:root{
  --of-primary:#4f46e5;
  --of-primary-dark:#3730a3;
  --of-sidebar:#1e2235;
  --of-sidebar-hover:#2a2f48;
  --of-muted:#6b7280;
}
body{ background:#f4f5fa; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

/* Sidebar */
.of-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:248px;
  background:var(--of-sidebar); color:#cbd2e0; overflow-y:auto; z-index:1030;
}
.of-sidebar .brand{
  display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.25rem;
  color:#fff; font-weight:700; font-size:1.15rem; border-bottom:1px solid rgba(255,255,255,.07);
}
.of-sidebar .brand img{ max-height:34px; max-width:140px; }
.of-sidebar .nav-link{
  color:#aab2c5; padding:.62rem 1.25rem; display:flex; align-items:center; gap:.7rem;
  font-size:.93rem; border-left:3px solid transparent;
}
.of-sidebar .nav-link:hover{ background:var(--of-sidebar-hover); color:#fff; }
.of-sidebar .nav-link.active{
  background:var(--of-sidebar-hover); color:#fff; border-left-color:var(--of-primary);
}
.of-sidebar .nav-section{
  text-transform:uppercase; font-size:.68rem; letter-spacing:.08em;
  color:#6c7793; padding:1rem 1.25rem .35rem;
}

/* Main */
.of-main{ margin-left:248px; min-height:100vh; }
.of-topbar{
  background:#fff; padding:.75rem 1.5rem; border-bottom:1px solid #e8eaf1;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:1020;
}
.of-content{ padding:1.5rem; }

/* Cards / stats */
.stat-card{ border:none; border-radius:14px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.stat-card .icon{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.2rem;
}
.card{ border:none; border-radius:14px; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.card-header{ background:#fff; border-bottom:1px solid #eef0f5; font-weight:600; border-radius:14px 14px 0 0; }

.table thead th{ font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--of-muted); }
.btn-primary{ background:var(--of-primary); border-color:var(--of-primary); }
.btn-primary:hover{ background:var(--of-primary-dark); border-color:var(--of-primary-dark); }
.text-primary{ color:var(--of-primary)!important; }

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