:root {
  --ab-red: #ff3b3b;
  --ab-blue: #2563eb;
  --ab-navy: #0b1220;
  --ab-sky: #38bdf8;
  --sidebar-width: 250px;
  --topbar-height: 60px;
}
* { font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; }

body { background: var(--bs-body-bg); }
[data-bs-theme="dark"] body { background: #0b1220; }

.app-wrapper { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: linear-gradient(180deg, #0b1220 0%, #101b30 100%);
  color: #cbd5e1;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 1030;
  transition: transform .25s ease;
}
[data-bs-theme="light"] .sidebar { background: linear-gradient(180deg, #101b30 0%, #14213d 100%); }

.sidebar-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { background: linear-gradient(135deg, var(--ab-red), var(--ab-blue)); color: #fff; font-weight: 700; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.brand-text strong { display: block; font-size: 1rem; color: #fff; letter-spacing: .5px; }
.brand-text small { color: #94a3b8; font-size: .7rem; }

.sidebar-nav { padding: .75rem .6rem 2rem; }
.sidebar-nav a { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border-radius: 8px; color: #cbd5e1; text-decoration: none; font-size: .88rem; margin-bottom: 2px; }
.sidebar-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar-nav a.active { background: linear-gradient(90deg, rgba(37,99,235,.35), rgba(56,189,248,.15)); color: #fff; border-left: 3px solid var(--ab-sky); }
.sidebar-nav .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; color: #64748b; margin: 1rem .75rem .35rem; }

.app-main { flex: 1; margin-left: var(--sidebar-width); display: flex; flex-direction: column; min-height: 100vh; }
.topbar { height: var(--topbar-height); background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; }
.topbar-search { width: 260px; }
.avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--ab-blue), var(--ab-sky)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; }

.content-area { flex: 1; }

.kpi-card { border-radius: 14px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); padding: 1.1rem 1.3rem; height: 100%; }
.kpi-card .kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; }
.kpi-value { font-size: 1.5rem; font-weight: 700; }
.kpi-label { font-size: .78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .4px; }

.chart-card { border-radius: 14px; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); padding: 1.2rem; }

.card-panel { border-radius: 14px; border: 1px solid var(--bs-border-color); }

.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top, #14213d, #0b1220 70%); }
.auth-card { width: 100%; max-width: 420px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 2.2rem; backdrop-filter: blur(6px); }
.auth-card h1 { font-size: 1.3rem; color: #fff; }

@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .app-main { margin-left: 0; }
}

.table-responsive { border-radius: 10px; overflow: hidden; }