/* =================================================================
   AJ Institute of Hospital Management — Admin Panel
   public/css/admin.css
   ================================================================= */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Brand purple */
  --p:          #7C3AED;
  --p-dark:     #6D28D9;
  --p-50:       #F5F3FF;
  --p-100:      #EDE9FE;
  --p-200:      #DDD6FE;
  --p-text:     #5B21B6;

  /* Teal / info */
  --t:          #0891B2;
  --t-50:       #ECFEFF;
  --t-100:      #CFFAFE;
  --t-200:      #A5F3FC;
  --t-text:     #155E75;

  /* Green / success */
  --g:          #059669;
  --g-50:       #ECFDF5;
  --g-100:      #D1FAE5;
  --g-200:      #A7F3D0;
  --g-text:     #065F46;

  /* Amber / warning */
  --a:          #D97706;
  --a-50:       #FFFBEB;
  --a-100:      #FEF3C7;
  --a-200:      #FDE68A;
  --a-text:     #92400E;

  /* Red / danger */
  --r:          #DC2626;
  --r-100:      #FEE2E2;
  --r-200:      #FECACA;
  --r-text:     #991B1B;

  /* Neutral */
  --bg:         #F9FAFB;
  --surf:       #FFFFFF;
  --bd:         #E5E7EB;
  --bdl:        #F3F4F6;
  --txt:        #111827;
  --muted:      #6B7280;
  --hint:       #9CA3AF;

  /* Sidebar */
  --sb-w:       260px;
  --hdr-h:      56px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ── App shell ─────────────────────────────────────────────────── */
#app-shell { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────────── */
#sidebar {
  width: var(--sb-w);
  background: var(--surf);
  border-right: 1px solid var(--bd);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Brand row */
.sb-brand {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bd);
  flex-shrink: 0;
}
.sb-logo-box {
  width: 40px; height: 40px;
  background: var(--p);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-logo-box svg { width: 22px; height: 22px; color: #fff; }
.sb-college-name { font-size: .9rem; font-weight: 800; color: var(--txt); line-height: 1.2; }
.sb-college-sub  { font-size: .68rem; color: var(--muted); margin-top: 1px; }

/* Nav sections */
.sb-section {
  padding: 16px 20px 6px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--hint);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Nav links */
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--muted);
  transition: background .12s, color .12s;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.sb-link:hover { background: var(--bg); color: var(--txt); }
.sb-link.active {
  background: var(--p-100);
  color: var(--p);
  font-weight: 700;
}
.sb-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--p);
  border-radius: 0 3px 3px 0;
}
.sb-link-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sb-link-icon svg { width: 18px; height: 18px; }
.sb-link.active .sb-link-icon svg { stroke: var(--p); }

/* Sidebar footer */
.sb-footer {
  margin-top: auto;
  padding: 14px 20px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sb-user-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--p-100);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 800; color: var(--p);
  flex-shrink: 0;
}
.sb-user-name { font-size: .78rem; font-weight: 700; color: var(--txt); }
.sb-user-role { font-size: .65rem; color: var(--muted); }
.sb-logout {
  margin-left: auto;
  background: none; border: none; cursor: pointer;
  color: var(--hint); padding: 5px;
  border-radius: var(--r-sm); transition: all .15s;
  display: flex; align-items: center;
}
.sb-logout:hover { background: var(--r-100); color: var(--r); }
.sb-logout svg { width: 15px; height: 15px; }

/* ── Topbar ─────────────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
#topbar {
  height: var(--hdr-h);
  background: var(--surf);
  border-bottom: 1px solid var(--bd);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 10px;
  flex-shrink: 0;
}
.bc {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--muted);
}
.bc a { color: var(--muted); font-weight: 500; transition: color .12s; }
.bc a:hover { color: var(--p); }
.bc-sep { color: var(--hint); font-size: .75rem; }
.bc-cur { color: var(--txt); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topbar-av {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--p);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 800; color: #fff;
}

/* ── Page content ───────────────────────────────────────────────── */
#page-content { flex: 1; overflow-y: auto; padding: 24px 28px 48px; }

/* ── Welcome banner ─────────────────────────────────────────────── */
.welcome-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--g-100);
  border: 1px solid var(--g-200);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--g-text);
}
.welcome-banner svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Page header ─────────────────────────────────────────────────── */
.page-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.page-hdr h1 { font-size: 1.5rem; font-weight: 800; color: var(--txt); margin: 0; }
.page-hdr-sub { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.page-hdr-actions { display: flex; align-items: center; gap: 12px; }
.hdr-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  cursor: pointer; text-decoration: none; transition: color .12s;
}
.hdr-action-btn svg { width: 20px; height: 20px; }
.hdr-action-btn:hover { color: var(--p); }

/* ── Flash messages ─────────────────────────────────────────────── */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md);
  margin-bottom: 20px; font-size: .85rem; font-weight: 500;
}
.flash svg { width: 16px; height: 16px; flex-shrink: 0; }
.flash--ok  { background: var(--g-100); color: var(--g-text); border: 1px solid var(--g-200); }
.flash--err { background: var(--r-100); color: var(--r-text); border: 1px solid var(--r-200); }

/* ── KPI CARDS — screenshot-exact colored backgrounds ────────────── */
.kpi-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  border-radius: var(--r-xl);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  /* min-height: 180px; */
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

/* Color variants — exactly matching screenshot */
.stat-card--purple {
  background: var(--p-100);
  border-color: var(--p-200);
}
.stat-card--teal {
  background: var(--t-100);
  border-color: var(--t-200);
}
.stat-card--green {
  background: var(--g-100);
  border-color: var(--g-200);
}
.stat-card--amber {
  background: var(--a-100);
  border-color: var(--a-200);
}
.stat-card--red {
  background: var(--r-100);
  border-color: var(--r-200);
}

.stat-label {
  font-size: .8rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
}
.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}
.stat-card--purple .stat-value { color: var(--p); }
.stat-card--teal   .stat-value { color: var(--t); }
.stat-card--green  .stat-value { color: var(--g); }
.stat-card--amber  .stat-value { color: var(--a); }
.stat-card--red    .stat-value { color: var(--r); }

.stat-sub { font-size: .82rem; color: var(--muted); margin-bottom: 8px; }

.stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .75rem; font-weight: 600; margin-bottom: 12px;
}
.stat-delta--up   { color: var(--g); }
.stat-delta--down { color: var(--r); }
.stat-delta svg   { width: 12px; height: 12px; }

.stat-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  margin-top: auto;
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-card--purple .stat-icon svg { stroke: var(--p); }
.stat-card--teal   .stat-icon svg { stroke: var(--t); }
.stat-card--green  .stat-icon svg { stroke: var(--g); }
.stat-card--amber  .stat-icon svg { stroke: var(--a); }
.stat-card--red    .stat-icon svg { stroke: var(--r); }

/* ── Generic card ───────────────────────────────────────────────── */
.card {
  background: var(--surf);
  border: 1px solid var(--bd);
  border-radius: var(--r-xl);
}
.card-body { padding: 20px 22px; }
.card-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--bd);
}
.card-title {
  font-size: .9rem; font-weight: 700; color: var(--txt);
  display: flex; align-items: center; gap: 7px;
}
.card-title svg { width: 15px; height: 15px; color: var(--p); }
.card-link { font-size: .75rem; font-weight: 600; color: var(--p); }
.card-link:hover { opacity: .75; }

/* ── Table ──────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: .7rem; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 16px; border-bottom: 1px solid var(--bd);
  background: var(--bg); text-align: left; white-space: nowrap;
}
.tbl td {
  font-size: .84rem; padding: 11px 16px;
  border-bottom: 1px solid var(--bdl); vertical-align: middle;
}
.tbl tbody tr:hover td { background: var(--bg); }
.tbl tbody tr:last-child td { border-bottom: none; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 99px;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
}
.badge svg { width: 9px; height: 9px; }
.badge--purple { background: var(--p-100); color: var(--p-text); }
.badge--teal   { background: var(--t-100); color: var(--t-text); }
.badge--green  { background: var(--g-100); color: var(--g-text); }
.badge--amber  { background: var(--a-100); color: var(--a-text); }
.badge--red    { background: var(--r-100); color: var(--r-text); }
.badge--gray   { background: var(--bdl);   color: var(--muted);  }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--r-md);
  font-size: .83rem; font-weight: 600; cursor: pointer;
  transition: all .15s; text-decoration: none; border: none; white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn--primary { background: var(--p); color: #fff; }
.btn--primary:hover { background: var(--p-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--muted); border: 1px solid var(--bd); }
.btn--ghost:hover { background: var(--bg); color: var(--txt); }
.btn--sm { padding: 5px 12px; font-size: .77rem; border-radius: var(--r-sm); }

/* ── Action buttons (table) ──────────────────────────────────────── */
.act {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-sm);
  font-size: .75rem; font-weight: 600; border: none;
  cursor: pointer; text-decoration: none; transition: all .12s;
}
.act svg { width: 11px; height: 11px; }
.act--view    { background: var(--t-100); color: var(--t-text); }
.act--view:hover  { background: var(--t-200); }
.act--edit    { background: var(--p-100); color: var(--p-text); }
.act--edit:hover  { background: var(--p-200); }
.act--confirm { background: var(--g-100); color: var(--g-text); }
.act--confirm:hover { background: var(--g-200); }
.act--warn    { background: var(--a-100); color: var(--a-text); }
.act--warn:hover  { background: var(--a-200); }
.act--danger  { background: var(--r-100); color: var(--r-text); }
.act--danger:hover  { background: var(--r-200); }

/* ── Form inputs ─────────────────────────────────────────────────── */
.input {
  width: 100%; padding: 10px 12px;
  border-radius: var(--r-md); border: 1.5px solid var(--bd);
  font-size: .87rem; color: var(--txt); background: var(--surf);
  outline: none; transition: border .15s, box-shadow .15s; appearance: none;
}
.input:focus { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-100); }
.input.invalid { border-color: var(--r); }
.input:disabled { background: var(--bg); cursor: not-allowed; opacity: .75; }
.input-group { position: relative; }
.input-group .input { padding-left: 36px; }
.input-group .input-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  pointer-events: none; color: var(--hint);
}
.input-group .input-icon svg { width: 15px; height: 15px; }
.form-label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--txt);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.input-err { font-size: .75rem; color: var(--r); margin-top: 4px; }
.form-section {
  font-size: .7rem; font-weight: 700; color: var(--hint);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 10px; border-bottom: 1px solid var(--bd);
  margin-bottom: 16px; display: flex; align-items: center; gap: 6px;
}
.form-section svg { width: 13px; height: 13px; }

/* ── Alert banners ───────────────────────────────────────────────── */
.alert-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 16px;
}
.alert-banner svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-banner .alert-title { font-size: .84rem; font-weight: 700; }
.alert-banner .alert-body  { font-size: .78rem; margin-top: 3px; }
.alert-banner--warn  { background: var(--a-100); border: 1px solid var(--a-200); color: var(--a-text); }
.alert-banner--danger { background: var(--r-100); border: 1px solid var(--r-200); color: var(--r-text); }
.alert-banner--info  { background: var(--p-100); border: 1px solid var(--p-200); color: var(--p-text); }

/* ── Filter chips ────────────────────────────────────────────────── */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 99px; font-size: .77rem; font-weight: 700;
  text-decoration: none; border: 1.5px solid var(--bd);
  background: var(--surf); color: var(--muted); transition: all .15s; cursor: pointer;
}
.chip:hover { background: var(--bg); color: var(--txt); }
.chip.active { background: var(--p); color: #fff; border-color: var(--p); }

/* ── Progress ────────────────────────────────────────────────────── */
.prog { background: var(--bdl); border-radius: 99px; height: 8px; overflow: hidden; }
.prog--sm { height: 5px; }
.prog--lg { height: 12px; }
.prog-fill { height: 100%; border-radius: 99px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.prog-fill--purple { background: var(--p); }
.prog-fill--green  { background: var(--g); }
.prog-fill--amber  { background: var(--a); }
.prog-fill--red    { background: var(--r); }
.prog-fill--teal   { background: var(--t); }

/* ── Chart wrappers ─────────────────────────────────────────────── */
.chart-wrap { position: relative; width: 100%; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--muted); }
.chart-legend-item { display: flex; align-items: center; gap: 5px; }
.chart-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── Funnel ──────────────────────────────────────────────────────── */
.funnel-item { margin-bottom: 13px; }
.funnel-item:last-child { margin-bottom: 0; }
.funnel-meta { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: .82rem; }
.funnel-label { font-weight: 600; color: var(--txt); }
.funnel-count { color: var(--muted); font-weight: 600; }

/* ── Prog inline ─────────────────────────────────────────────────── */
.prog-inline { display: flex; align-items: center; gap: 8px; }
.prog-inline .prog { flex: 1; min-width: 60px; }

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination { gap: 4px; margin: 0; }
.page-link {
  border-radius: var(--r-sm) !important; border-color: var(--bd) !important;
  color: var(--muted) !important; font-size: .8rem; padding: 5px 10px;
}
.page-link:hover { background: var(--bg) !important; color: var(--txt) !important; }
.page-item.active .page-link {
  background: var(--p) !important; border-color: var(--p) !important; color: #fff !important;
}

/* ── Code ────────────────────────────────────────────────────────── */
code {
  font-family: 'Courier New', monospace; font-size: .82em;
  background: var(--bdl); padding: 1px 6px;
  border-radius: var(--r-sm); color: var(--muted);
}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Utilities ───────────────────────────────────────────────────── */
.h-100 { height: 100%; }
.table-responsive { overflow-x: auto; }
.text-muted { color: var(--muted); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.font-mono { font-family: 'Courier New', monospace; }

/* Bootstrap grid shim */
.row   { display: flex; flex-wrap: wrap; margin: -8px; }
.g-3   { gap: 16px !important; }
.col-md-3  { width: 25%;      padding: 8px; }
.col-md-4  { width: 33.333%;  padding: 8px; }
.col-md-5  { width: 41.666%;  padding: 8px; }
.col-md-6  { width: 50%;      padding: 8px; }
.col-md-7  { width: 58.333%;  padding: 8px; }
.col-md-8  { width: 66.666%;  padding: 8px; }
.col-md-12 { width: 100%;     padding: 8px; }
.mb-4  { margin-bottom: 20px; }
@media (max-width: 768px) {
  .col-md-3,.col-md-4,.col-md-5,.col-md-6,
  .col-md-7,.col-md-8,.col-md-12 { width: 100%; }
  .kpi-grid-3, .kpi-grid-4 { grid-template-columns: 1fr; }
}

/* Grid */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

/* Card */
.kpi-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* Left Text */
.kpi-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 6px;
}

.kpi-val {
    font-size: 26px;
    font-weight: 700;
}

.kpi-sub {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 6px;
}

/* Icon */
.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kpi-icon svg {
    width: 22px;
    height: 22px;
}

/* Colors */
.blue { background: linear-gradient(135deg,#eef2ff,#e0e7ff); }
.green { background: linear-gradient(135deg,#ecfdf5,#d1fae5); }
.teal { background: linear-gradient(135deg,#ecfeff,#cffafe); }
.yellow { background: linear-gradient(135deg,#fefce8,#fef3c7); }
.red { background: linear-gradient(135deg,#fef2f2,#fee2e2); }
.purple { background: linear-gradient(135deg,#f5f3ff,#ede9fe); }

/* Accent Bar */
.kpi-card::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    left: 0;
    top: 0;
    background: #6366f1;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 768px) {
    .kpi-val {
        font-size: 22px;
    }
}


 .page-title { font-family: 'Sora', sans-serif; font-size: 20px; font-weight: 800; color: var(--c-text-1); line-height: 1.25; }
  .page-sub   { font-size: 13px; color: var(--c-text-2); margin-top: 3px; }

  /* Cards */
  .card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
  }
  .card-hdr {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-border);
  }
  .card-hdr-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--c-text-1);
  }
  .card-hdr-title svg { width: 16px; height: 16px; color: var(--c-primary); }
  .card-hdr-link { font-size: 12px; color: var(--c-primary); font-weight: 600; text-decoration: none; }
  .card-hdr-link:hover { text-decoration: underline; }
  .card-body  { padding: 20px; }
  .card-body-flush { padding: 0; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

  /* KPI stat card */
  .stat-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    box-shadow: var(--shadow-card);
    display: block; text-decoration: none;
    transition: transform .18s, box-shadow .18s;
    border-top: 3px solid transparent;  /* colour override per card */
  }
  .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .stat-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 12px;
  }
  .stat-icon svg { width: 18px; height: 18px; }
  .stat-val  {
    font-family: 'Sora', sans-serif;
    font-size: 26px; font-weight: 800;
    line-height: 1; margin-bottom: 4px;
  }
  .stat-lbl  { font-size: 12px; color: var(--c-text-2); font-weight: 500; }

  /* Avatar chip (faculty/student) */
  .avatar-chip {
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
    background: var(--c-primary);
  }

  /* Tables */
  .table         { font-size: 13.5px; margin: 0; }
  .table thead th {
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--c-text-2);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border) !important;
    padding: 10px 16px; white-space: nowrap;
  }
  .table tbody td {
    padding: 12px 16px; vertical-align: middle;
    border-bottom: 1px solid var(--c-border);
    color: var(--c-text-1);
  }
  .table tbody tr:last-child td { border-bottom: none; }
  .table-hover tbody tr:hover td { background: var(--c-bg); }

  /* ID code chip */
  .id-chip {
    font-size: 11.5px; color: var(--c-text-2);
    background: var(--c-bg); padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: ui-monospace, monospace;
    border: 1px solid var(--c-border);
  }

  /* Badges – unified shape, semantic colour */
  .badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 600;
    white-space: nowrap; line-height: 1.5;
  }
  /* Lead statuses */
  .badge-new              { background: var(--c-blue-bg);   color: var(--c-blue); }
  .badge-verified         { background: var(--c-purple-bg); color: var(--c-purple); }
  .badge-link-sent        { background: var(--c-amber-bg);  color: var(--c-amber); }
  .badge-submitted        { background: var(--c-teal-bg);   color: var(--c-teal); }
  .badge-payment-pending  { background: var(--c-amber-bg);  color: var(--c-amber); }
  .badge-payment-received { background: var(--c-green-bg);  color: var(--c-green); }
  .badge-confirmed        { background: var(--c-green-bg);  color: var(--c-green); }
  .badge-not-interested   { background: var(--c-bg);        color: var(--c-text-2); border: 1px solid var(--c-border); }
  /* Course */
  .badge-bha { background: var(--c-green-bg);  color: var(--c-green); }
  .badge-mha { background: var(--c-purple-bg); color: var(--c-purple); }
  /* Student status */
  .badge-active    { background: var(--c-green-bg);  color: var(--c-green); }
  .badge-graduated { background: var(--c-purple-bg); color: var(--c-purple); }
  .badge-inactive  { background: var(--c-bg);        color: var(--c-text-2); border: 1px solid var(--c-border); }
  /* Fee */
  .badge-cleared  { background: var(--c-green-bg); color: var(--c-green); }
  .badge-partial  { background: var(--c-amber-bg); color: var(--c-amber); }
  .badge-overdue  { background: var(--c-red-bg);   color: var(--c-red); }
  /* Attendance */
  .badge-safe     { background: var(--c-green-bg); color: var(--c-green); }
  .badge-at-risk  { background: var(--c-amber-bg); color: var(--c-amber); }
  .badge-shortage { background: var(--c-red-bg);   color: var(--c-red); }
  /* Subject type */
  .badge-theory      { background: var(--c-purple-bg); color: var(--c-purple); }
  .badge-practical   { background: var(--c-amber-bg);  color: var(--c-amber); }
  .badge-dissertation{ background: var(--c-teal-bg);   color: var(--c-teal); }

  /* Action buttons – micro, icon-optional */
  .btn-act {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 11px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 600;
    cursor: pointer; border: none;
    text-decoration: none; transition: all .12s;
    white-space: nowrap; line-height: 1.4;
  }
  .btn-act svg { width: 12px; height: 12px; }
  .btn-view    { background: var(--c-blue-bg);   color: var(--c-blue); }   .btn-view:hover   { background: #DBEAFE; color: var(--c-blue); }
  .btn-verify  { background: var(--c-purple-bg); color: var(--c-purple); } .btn-verify:hover { background: #EDE9FE; color: var(--c-purple); }
  .btn-send    { background: var(--c-amber-bg);  color: var(--c-amber); }  .btn-send:hover   { background: #FDE68A; color: var(--c-amber); }
  .btn-confirm { background: var(--c-green-bg);  color: var(--c-green); }  .btn-confirm:hover{ background: #A7F3D0; color: var(--c-green); }
  .btn-danger  { background: var(--c-red-bg);    color: var(--c-red); }    .btn-danger:hover { background: #FECACA; color: var(--c-red); }
  .btn-edit    { background: var(--c-teal-bg);   color: var(--c-teal); }   .btn-edit:hover   { background: #CCFBF1; color: var(--c-teal); }

  /* Primary button */
  .btn-primary-sm {
    background: var(--c-primary); color: #fff;
    border: none; border-radius: var(--radius-md);
    padding: 9px 18px; font-size: 13.5px; font-weight: 600;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background .15s;
  }
  .btn-primary-sm svg { width: 15px; height: 15px; }
  .btn-primary-sm:hover { background: var(--c-primary-dark); color: #fff; }

  .btn-outline-sm {
    background: var(--c-surface); color: var(--c-text-2);
    border: 1px solid var(--c-border); border-radius: var(--radius-md);
    padding: 8px 16px; font-size: 13px; font-weight: 500;
    cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all .12s;
  }
  .btn-outline-sm svg { width: 14px; height: 14px; }
  .btn-outline-sm:hover { background: var(--c-bg); border-color: var(--c-border-strong); color: var(--c-text-1); }

  /* Search bar */
  .search-wrap { position: relative; }
  .search-wrap .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--c-text-3); pointer-events: none; }
  .search-wrap .search-icon svg { width: 14px; height: 14px; }
  .search-input {
    border: 1px solid var(--c-border); border-radius: var(--radius-md);
    padding: 8px 13px 8px 34px;
    font-size: 13.5px; font-family: 'Inter', sans-serif;
    color: var(--c-text-1); background: var(--c-surface);
    outline: none; transition: border-color .15s, box-shadow .15s;
    width: 100%;
  }
  .search-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); }

  /* Filter chips */
  .chip {
    display: inline-flex; align-items: center;
    padding: 5px 14px; border-radius: 20px;
    font-size: 12.5px; font-weight: 600;
    border: 1px solid var(--c-border);
    background: var(--c-surface); color: var(--c-text-2);
    text-decoration: none; cursor: pointer;
    transition: all .12s; white-space: nowrap;
  }
  .chip:hover { border-color: var(--c-primary); color: var(--c-primary); }
  .chip.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

  /* Progress bar */
  .prog-track { height: 6px; border-radius: 3px; background: var(--c-bg); overflow: hidden; }
  .prog-fill  { height: 100%; border-radius: 3px; transition: width .8s ease; }

  /* Funnel bar */
  .funnel-track { height: 8px; border-radius: 4px; background: var(--c-bg); overflow: hidden; }
  .funnel-fill  { height: 100%; border-radius: 4px; transition: width 1s ease; }

  /* Flash alerts */
  .flash { border: none; border-radius: var(--radius-md); font-size: 13.5px; padding: 11px 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
  .flash svg { width: 16px; height: 16px; flex-shrink: 0; }
  .flash-success { background: var(--c-green-bg); color: var(--c-green); }
  .flash-danger  { background: var(--c-red-bg);   color: var(--c-red); }

  /* Overlay for mobile */
  #sb-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 250; }

  /* Select / form controls (inherit design) */
  .form-select, .form-control {
    border: 1px solid var(--c-border); border-radius: var(--radius-md);
    font-size: 13.5px; font-family: 'Inter', sans-serif; color: var(--c-text-1);
    background: var(--c-surface);
  }
  .form-select:focus, .form-control:focus {
    border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.1); outline: none;
  }

  /* ─────────────────────── RESPONSIVE ─────────────────────── */
  @media (max-width: 992px) {
    #sidebar { transform: translateX(-100%); }
    #sidebar.sb-open { transform: translateX(0); }
    #main { margin-left: 0; }
    #sb-overlay.show { display: block; }
    #content { padding: 16px; }
  }


    :root {
    /* Brand palette – single source of truth */
    --c-primary:        #4F46E5;   /* Indigo 600  */
    --c-primary-light:  #EEF2FF;   /* Indigo 50   */
    --c-primary-mid:    #C7D2FE;   /* Indigo 200  */
    --c-primary-dark:   #3730A3;   /* Indigo 800  */

    /* Neutrals */
    --c-bg:             #F5F6FA;
    --c-surface:        #FFFFFF;
    --c-border:         #E8EAF0;
    --c-border-strong:  #D1D5DB;

    /* Text */
    --c-text-1:         #111827;   /* headings    */
    --c-text-2:         #4B5563;   /* body        */
    --c-text-3:         #9CA3AF;   /* muted       */

    /* Semantic – same weight across all cards */
    --c-green:          #059669;
    --c-green-bg:       #ECFDF5;
    --c-amber:          #D97706;
    --c-amber-bg:       #FFFBEB;
    --c-red:            #DC2626;
    --c-red-bg:         #FEF2F2;
    --c-purple:         #7C3AED;
    --c-purple-bg:      #F5F3FF;
    --c-blue:           #2563EB;
    --c-blue-bg:        #EFF6FF;
    --c-teal:           #0D9488;
    --c-teal-bg:        #F0FDFA;

    /* Sidebar */
    --sb-bg:            #1E1B4B;   /* Indigo 950  */
    --sb-active-bg:     rgba(99,102,241,.18);
    --sb-hover-bg:      rgba(255,255,255,.055);
    --sb-text:          rgba(255,255,255,.55);
    --sb-text-active:   #A5B4FC;   /* Indigo 300  */
    --sb-width:         252px;

    /* Shared shape */
    --radius-sm:        6px;
    --radius-md:        10px;
    --radius-lg:        14px;
    --radius-xl:        18px;

    /* Shadows */
    --shadow-card:      0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-hover:     0 6px 20px rgba(79,70,229,.12);
  }