:root{
  --a2-sidebar-w: 250px;
  --a2-radius: .6rem;
}
[data-bs-theme="dark"]{ --a2-bg:#0f1216; --a2-panel:#171b21; --a2-panel2:#1d232b; --a2-border:#272e37; }
[data-bs-theme="light"]{ --a2-bg:#f2f4f7; --a2-panel:#ffffff; --a2-panel2:#f7f9fb; --a2-border:#e3e7ec; }

body{ background:var(--a2-bg); }
.a2-app{ display:flex; min-height:100vh; }

/* Sidebar */
.a2-sidebar{
  width:var(--a2-sidebar-w); background:var(--a2-panel); border-right:1px solid var(--a2-border);
  position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; z-index:1040; overflow-y:auto;
}
.a2-brand{ display:flex; align-items:center; gap:.6rem; padding:1rem 1.1rem; border-bottom:1px solid var(--a2-border); font-weight:600; }
.a2-brand-img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.a2-nav{ padding:.5rem .6rem 2rem; }
.a2-nav-head{ text-transform:uppercase; font-size:.68rem; letter-spacing:.06em; color:#7a828d; padding:.9rem .6rem .3rem; }
.a2-nav-link{ display:flex; align-items:center; gap:.65rem; padding:.5rem .7rem; border-radius:var(--a2-radius);
  color:inherit; text-decoration:none; font-size:.92rem; margin-bottom:1px; }
.a2-nav-link i{ width:1.1rem; text-align:center; opacity:.85; }
.a2-nav-link:hover{ background:var(--a2-panel2); }
.a2-nav-link.active{ background:#0d6efd; color:#fff; }
.a2-sidebar-close{ margin-left:auto; color:inherit; }

/* Main */
.a2-main{ flex:1; margin-left:var(--a2-sidebar-w); display:flex; flex-direction:column; min-width:0; }
.a2-topbar{ position:sticky; top:0; z-index:1030; display:flex; align-items:center; gap:.75rem;
  background:var(--a2-panel); border-bottom:1px solid var(--a2-border); padding:.55rem .9rem; }
.a2-content{ padding:1.25rem 1.4rem; flex:1; }
.a2-footer{ padding:.75rem 1.4rem; border-top:1px solid var(--a2-border); }
.a2-icon-btn{ color:inherit; border:1px solid transparent; }
.a2-icon-btn:hover{ background:var(--a2-panel2); }
.a2-search{ position:relative; max-width:320px; flex:1; }
.a2-search i{ position:absolute; left:.6rem; top:50%; transform:translateY(-50%); color:#8a929c; }
.a2-search input{ padding-left:1.9rem; background:var(--a2-panel2); border-color:var(--a2-border); }
.a2-user-btn{ display:flex; align-items:center; gap:.5rem; color:inherit; }
.a2-avatar{ width:30px; height:30px; border-radius:50%; background:#0d6efd; color:#fff; display:inline-flex;
  align-items:center; justify-content:center; font-size:.85rem; font-weight:600; }

/* Cards / panels */
.card{ background:var(--a2-panel); border:1px solid var(--a2-border); border-radius:var(--a2-radius); }
.a2-kpi{ display:flex; align-items:center; gap:1rem; }
.a2-kpi .a2-kpi-ico{ width:52px; height:52px; border-radius:var(--a2-radius); display:flex; align-items:center;
  justify-content:center; font-size:1.5rem; color:#fff; }
.a2-kpi h3{ margin:0; font-size:1.55rem; font-weight:700; }
.a2-kpi .a2-kpi-label{ color:#8a929c; font-size:.82rem; }
.bg-grad-1{ background:linear-gradient(135deg,#0d6efd,#3b82f6); }
.bg-grad-2{ background:linear-gradient(135deg,#198754,#22c55e); }
.bg-grad-3{ background:linear-gradient(135deg,#fd7e14,#f59e0b); }
.bg-grad-4{ background:linear-gradient(135deg,#6f42c1,#a855f7); }
.bg-grad-5{ background:linear-gradient(135deg,#0dcaf0,#06b6d4); }

table.dataTable td, table.dataTable th{ vertical-align:middle; }
.table thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.03em; color:#8a929c; }
.a2-thumb{ width:52px; height:52px; object-fit:cover; border-radius:.4rem; border:1px solid var(--a2-border); }

/* Login */
.a2-login{ display:flex; align-items:center; justify-content:center; min-height:100vh; background:radial-gradient(circle at 30% 20%, #1b2330, #0f1216); }
.a2-login-card{ width:100%; max-width:380px; background:var(--a2-panel); border:1px solid var(--a2-border);
  border-radius:1rem; padding:2rem; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.a2-login-logo{ width:60px; height:60px; margin:0 auto; border-radius:50%; background:#0d6efd; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.8rem; }

/* Responsive */
@media (max-width: 991.98px){
  .a2-sidebar{ transform:translateX(-100%); transition:transform .2s ease; }
  .a2-app.a2-sidebar-open .a2-sidebar{ transform:translateX(0); }
  .a2-main{ margin-left:0; }
}