/* assets/app.css */
:root{
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --radius-xl: 16px;

  --bg: #f6f7fb;
  --panel: #ffffff;
  --panel-2: #f1f3f9;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15,23,42,.10);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.08);

  --brand: #2563eb;
  --brand-2: #1d4ed8;

  --sidebar: #0b1220;
  --sidebar-2: #0f1b33;
  --sidebar-text: rgba(255,255,255,.86);
  --sidebar-muted: rgba(255,255,255,.62);
  --sidebar-border: rgba(255,255,255,.10);
}

html[data-theme="dark"]{
  --bg: #0b1220;
  --panel: #0f1b33;
  --panel-2: #0b1730;
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.58);
  --border: rgba(255,255,255,.10);
  --shadow: 0 12px 34px rgba(0,0,0,.35);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.25);

  --brand: #60a5fa;
  --brand-2: #3b82f6;

  --sidebar: #0a1020;
  --sidebar-2: #0f1b33;
  --sidebar-text: rgba(255,255,255,.90);
  --sidebar-muted: rgba(255,255,255,.62);
  --sidebar-border: rgba(255,255,255,.12);
}

*{ box-sizing:border-box; }
body{
  font-family: var(--font-sans);
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* Layout */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width: 280px;
  background: linear-gradient(180deg,var(--sidebar),var(--sidebar-2));
  color: var(--sidebar-text);
  border-right: 1px solid var(--sidebar-border);
  position: sticky;
  top:0;
  height:100vh;
  padding: 18px 14px;
  transition: width .18s ease;
}

body.sidebar-collapsed .app-sidebar{ width: 88px; }
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .nav-text,
body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .small-muted{ display:none !important; }
body.sidebar-collapsed .app-link{ justify-content:center; }
body.sidebar-collapsed .app-link i{ margin-right:0 !important; }

.app-brand{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px 14px; margin-bottom: 10px;
}
.app-brand img{ height:28px; width:auto; }
.brand-badge{
  width:34px;height:34px;border-radius:12px;
  background:rgba(96,165,250,.18);
  border:1px solid rgba(96,165,250,.25);
  display:grid;place-items:center;
}
.brand-badge i{ color:rgba(255,255,255,.88); }
.app-brand .title{ font-weight: 800; letter-spacing: .2px; }
.app-brand .subtitle{ color: var(--sidebar-muted); font-size: 12px; margin-top:2px; }

.nav-section{ margin-top: 12px; }
.nav-label{
  color: var(--sidebar-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 10px 6px;
}

.app-nav{ display:flex; flex-direction:column; gap:6px; padding:0 6px; }
.app-link{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  color: var(--sidebar-text);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,0);
}
.app-link:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.06); }
.app-link.active{ background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.25); }
.app-link i{ width:18px; text-align:center; color: rgba(255,255,255,.90); }
.app-link .small-muted{ color: var(--sidebar-muted); font-size:12px; margin-left:auto; }

.app-main{ flex:1; display:flex; flex-direction:column; min-width:0; }

.app-topbar{
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  position: sticky;
  top:0; z-index: 50;
}
html[data-theme="dark"] .app-topbar{ background: rgba(15,27,51,.65); }

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width: 1280px; margin:0 auto;
}
.fw-black{ font-weight: 900; letter-spacing:.2px; }

.breadcrumb a{ color: var(--brand); text-decoration:none; }
.breadcrumb-item.active{ color: var(--muted); }

.topbar-search{
  position:relative;
  width: 340px;
}
.topbar-search i{
  position:absolute;
  left:10px; top:50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 13px;
}
.topbar-search input{
  padding-left: 32px !important;
}

.app-content{
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 20px 28px;
}

/* Cards + UI */
.card{
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.card .card-body{ padding: 18px !important; }

.kpi{ display:flex; align-items:center; gap:12px; }
.kpi .icon{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(37,99,235,.10);
  color: var(--brand);
  border: 1px solid rgba(37,99,235,.18);
}
.kpi .label{ font-size:12px; color: var(--muted); }
.kpi .value{ font-size:18px; font-weight:900; letter-spacing:.2px; }

/* Forms */
.form-control, .form-select, .form-check-input{
  border-radius: 12px !important;
  border-color: var(--border) !important;
}
.form-control, .form-select{
  background: var(--panel) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{
  background: rgba(255,255,255,.04) !important;
}
.form-label{ font-weight: 800; color: var(--muted); }
.form-text{ color: var(--muted) !important; }
.is-invalid{ box-shadow:none !important; }

/* Buttons */
.btn{ border-radius: 12px !important; font-weight: 800; }
.btn-primary{ background: var(--brand) !important; border-color: transparent !important; }
.btn-primary:hover{ background: var(--brand-2) !important; }

/* Tables */
.table{ color: var(--text) !important; }
.table thead th{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border) !important;
}
.table td, .table th{ border-color: var(--border) !important; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ background-color: rgba(2,6,23,.03) !important; }
html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{ background-color: rgba(255,255,255,.03) !important; }

/* Code box */
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
pre{
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border) !important;
  background: var(--panel-2) !important;
  color: var(--text) !important;
  white-space: pre-wrap;
}

/* Toast */
.toast{
  border-radius: 14px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm);
}