/* Simple professional admin theme (Bootstrap 5) */

:root{
  --sidebar-w: 270px;
  --sidebar-bg: #243447;        /* dark blue-gray */
  --sidebar-muted: #9fb3c8;
  --sidebar-active: #1abc9c;    /* accent */
  --card-radius: 14px;
}

html, body { height: 100%; }
body { background:#f5f7fb; }

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

/* Sidebar */
.sidebar{
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1rem .75rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand .logo{
  width:38px;height:38px;border-radius:10px;
  background: rgba(255,255,255,.12);
  display:grid;place-items:center;
  font-weight:700;
}
.brand .title{
  font-size:1rem;
  line-height:1.1;
}
.brand .subtitle{
  font-size:.8rem;
  color: var(--sidebar-muted);
}

.sidebar .userbox{
  padding:1rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background: rgba(255,255,255,.15);
  display:grid;place-items:center;
  font-weight:700;
}
.userbox .name{ font-weight:600; }
.userbox .role{ font-size:.8rem;color:var(--sidebar-muted); }

.nav-section{
  padding:1rem 1rem .5rem;
  font-size:.75rem;
  letter-spacing:.08em;
  color: rgba(255,255,255,.55);
  text-transform:uppercase;
}

.sidebar .nav-link{
  color: rgba(255,255,255,.85);
  padding:.6rem 1rem;
  border-radius:10px;
  margin: .15rem .5rem;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.sidebar .nav-link:hover{
  background: rgba(255,255,255,.08);
  color:#fff;
}
.sidebar .nav-link.active{
  background: rgba(26,188,156,.18);
  color:#fff;
  border: 1px solid rgba(26,188,156,.35);
}
.sidebar .nav-link i{ width:18px; text-align:center; color: rgba(255,255,255,.75); }
.sidebar .nav-link.active i{ color: var(--sidebar-active); }

/* Content area */
.main{
  flex:1;
  min-width:0;
}

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index:1020;
  background:#fff;
  border-bottom:1px solid #e8edf5;
}
.topbar .container-fluid{
  padding: .75rem 1rem;
}

.page-title{
  font-weight:700;
  margin:0;
}

.kpi-card{
  border:0;
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(27,39,51,.06);
}
.kpi-card .icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:#eef3ff;
  font-size:1.1rem;
}

.card{
  border:0;
  border-radius: var(--card-radius);
  box-shadow: 0 8px 24px rgba(27,39,51,.06);
}
.card-header{
  background:transparent;
  border-bottom:1px solid #eef1f7;
  padding: .9rem 1rem;
}
.card-body{ padding:1rem; }

/* Mobile: sidebar becomes offcanvas */
@media (max-width: 991.98px){
  .sidebar{ display:none; }
}