/* ═══════════════════════════════════════════
   EBA ADMIN PORTAL — DESIGN SYSTEM
   Brand: #FA2D56 pink, Urbanist + Ampunsuhu
═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Ampunsuhu';
  src: url('../doctor-portal/ampunsuhu.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.logo-ampunsuhu {
  font-family: 'Ampunsuhu', 'Urbanist', sans-serif;
  color: #fff;
  line-height: 1;
  letter-spacing: 0;
}

/* ── TOKENS ── */
:root {
  --bg-base:     #070C18;
  --bg-surface:  #0C1424;
  --bg-card:     #101929;
  --bg-card-h:   #141F32;
  --bg-elevated: #19253A;

  --border-s:   rgba(255,255,255,0.05);
  --border-d:   rgba(255,255,255,0.09);
  --border-str: rgba(255,255,255,0.15);

  --pink:       #FA2D56;
  --pink-50:    rgba(250,45,86,0.07);
  --pink-100:   rgba(250,45,86,0.13);
  --pink-200:   rgba(250,45,86,0.22);
  --pink-light: #FF6B90;
  --pink-dark:  #C91C42;

  --green:      #10B981;
  --green-50:   rgba(16,185,129,0.08);
  --green-100:  rgba(16,185,129,0.14);
  --amber:      #F59E0B;
  --amber-50:   rgba(245,158,11,0.08);
  --amber-100:  rgba(245,158,11,0.14);
  --red:        #EF4444;
  --red-50:     rgba(239,68,68,0.08);
  --red-100:    rgba(239,68,68,0.14);
  --purple:     #8B5CF6;
  --purple-50:  rgba(139,92,246,0.08);
  --purple-100: rgba(139,92,246,0.14);
  --teal:       #06B6D4;
  --teal-50:    rgba(6,182,212,0.08);
  --teal-100:   rgba(6,182,212,0.14);
  --blue:       #3B82F6;
  --blue-50:    rgba(59,130,246,0.08);
  --blue-100:   rgba(59,130,246,0.14);

  --text-1: #EFF6FF;
  --text-2: #94A3B8;
  --text-3: #64748B;

  --sidebar-w:  260px;
  --topbar-h:   66px;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 24px;

  --shadow-sm:   0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.6);
  --shadow-pink: 0 4px 24px rgba(250,45,86,0.35);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; }
body {
  font-family: 'Urbanist','Inter',system-ui,sans-serif;
  background: var(--bg-base);
  color: var(--text-1);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════ */
#login-screen {
  position:fixed; inset:0;
  display:flex; z-index:9999;
}
.login-visual {
  flex:1;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(140deg,#06101E 0%,#130A2A 55%,#0A1A30 100%);
  position:relative; overflow:hidden;
}
.login-orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.login-orb-1 { width:500px; height:500px; background:rgba(250,45,86,0.12); top:-120px; right:-100px; }
.login-orb-2 { width:400px; height:400px; background:rgba(139,92,246,0.09); bottom:-80px; left:-60px; }
.login-orb-3 { width:300px; height:300px; background:rgba(6,182,212,0.06); top:50%; left:40%; transform:translate(-50%,-50%); }
.login-visual-content {
  position:relative; z-index:1;
  max-width:460px; padding:48px;
  text-align:center;
}
.login-tagline { font-size:16px; color:var(--text-2); line-height:1.65; margin-bottom:36px; }
.login-features { display:flex; flex-direction:column; gap:12px; text-align:left; }
.login-feature {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:rgba(255,255,255,0.03); border:1px solid var(--border-s);
  border-radius:var(--r-md); font-size:14px; color:var(--text-2);
  transition:all 0.2s;
}
.login-feature:hover { background:rgba(255,255,255,0.05); border-color:var(--border-d); }
.lf-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.login-panel {
  width:480px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:60px 52px;
  background:var(--bg-surface); border-left:1px solid var(--border-s);
}
.lp-subtitle { font-size:12px; color:var(--text-3); margin-bottom:36px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; }
.lp-heading { font-size:24px; font-weight:800; width:100%; margin-bottom:6px; }
.lp-desc { font-size:14px; color:var(--text-2); margin-bottom:28px; width:100%; }
.login-note { margin-top:20px; font-size:12px; color:var(--text-3); text-align:center; }
.login-legal { margin-top:16px; font-size:11px; color:var(--text-3); text-align:center; line-height:1.6; }
.password-toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  cursor:pointer; font-size:16px; color:var(--text-3);
  transition:color 0.15s; user-select:none;
}
.password-toggle:hover { color:var(--text-1); }

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
.form-group { width:100%; margin-bottom:18px; }
.form-group label {
  display:block; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.07em;
  color:var(--text-3); margin-bottom:7px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; padding:11px 15px;
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); color:var(--text-1);
  font-family:'Urbanist','Inter',sans-serif; font-size:14px;
  outline:none; transition:border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance:none;
}
.form-group select { cursor:pointer; }
.form-group textarea { resize:vertical; line-height:1.55; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--pink);
  box-shadow:0 0 0 3px var(--pink-100);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--text-3); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.divider { height:1px; background:var(--border-s); margin:20px 0; }
.info-notice {
  padding:11px 14px; background:var(--blue-50);
  border:1px solid var(--blue-100); border-radius:var(--r-md);
  font-size:12px; color:var(--teal); margin-top:4px;
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 18px; border-radius:var(--r-md);
  font-family:'Urbanist','Inter',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; border:none; transition:all 0.18s;
  text-decoration:none; white-space:nowrap; letter-spacing:0.02em;
}
.btn-primary { background:linear-gradient(135deg,var(--pink),var(--pink-light)); color:#fff; box-shadow:var(--shadow-pink); }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 28px rgba(250,45,86,0.45); }
.btn-secondary { background:var(--bg-elevated); color:var(--text-1); border:1px solid var(--border-d); }
.btn-secondary:hover { background:var(--bg-card-h); border-color:var(--border-str); }
.btn-ghost { background:transparent; color:var(--text-2); border:1px solid var(--border-d); }
.btn-ghost:hover { background:rgba(255,255,255,0.04); color:var(--text-1); }
.btn-success { background:var(--green); color:#fff; }
.btn-success:hover { background:#0EA472; transform:translateY(-1px); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#DC2626; transform:translateY(-1px); }
.btn-warning { background:var(--amber); color:#fff; }
.btn-warning:hover { background:#D97706; }
.btn-purple { background:var(--purple); color:#fff; }
.btn-purple:hover { background:#7C3AED; transform:translateY(-1px); }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:hover { background:#0891B2; }
.btn-sm { padding:7px 13px; font-size:12px; }
.btn-lg { padding:13px 28px; font-size:15px; }
.btn-full { width:100%; }
.btn-icon {
  width:32px; height:32px; border-radius:var(--r-sm); padding:0;
  border:1px solid var(--border-d); background:var(--bg-elevated);
  color:var(--text-2); cursor:pointer; transition:all 0.15s;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; position:relative;
}
.btn-icon:hover { background:var(--bg-card-h); color:var(--text-1); border-color:var(--border-str); }
.btn-icon.danger:hover { background:var(--red-100); color:var(--red); border-color:rgba(239,68,68,0.3); }
.btn-icon.success:hover { background:var(--green-100); color:var(--green); border-color:rgba(16,185,129,0.3); }
.btn-icon.warn:hover { background:var(--amber-100); color:var(--amber); border-color:rgba(245,158,11,0.3); }
.btn-icon.purple:hover { background:var(--purple-100); color:var(--purple); border-color:rgba(139,92,246,0.3); }
.btn-icon .tooltip {
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:var(--bg-elevated); color:var(--text-1); border:1px solid var(--border-d);
  font-size:10px; font-weight:700; white-space:nowrap; padding:4px 8px; border-radius:6px;
  pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:100;
}
.btn-icon:hover .tooltip { opacity:1; }

/* ══════════════════════════════════════════
   PORTAL LAYOUT
══════════════════════════════════════════ */
#portal { height:100vh; display:grid; grid-template-columns:var(--sidebar-w) 1fr; }
.spinner {
  width:28px; height:28px;
  border:3px solid rgba(250,45,86,0.2); border-top-color:var(--pink);
  border-radius:50%; animation:spin 0.75s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════ */
.sidebar {
  background:var(--bg-surface); border-right:1px solid var(--border-s);
  display:flex; flex-direction:column; overflow:hidden; position:relative;
}
.sidebar::after {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(250,45,86,0.4),transparent);
}
.sidebar-logo {
  padding:22px 20px 18px; border-bottom:1px solid var(--border-s);
  display:flex; align-items:center; gap:8px;
}
.logo-badge {
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--pink); background:var(--pink-50); border:1px solid var(--pink-100);
  padding:2px 7px; border-radius:4px; margin-top:4px;
}
.admin-card {
  margin:14px 12px; padding:13px;
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); display:flex; align-items:center; gap:10px;
}
.admin-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--pink-light));
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#fff; flex-shrink:0;
  box-shadow:0 0 0 2px rgba(250,45,86,0.25);
}
.admin-info .ai-name { font-size:13px; font-weight:700; line-height:1.3; }
.admin-info .ai-role {
  font-size:10px; color:#fff; font-weight:700; margin-top:3px;
  background:var(--pink); padding:1px 7px; border-radius:99px; display:inline-block;
}
.online-dot {
  width:8px; height:8px; border-radius:50%; background:var(--green);
  margin-left:auto; box-shadow:0 0 0 2px rgba(16,185,129,0.2);
  animation:pulse-dot 2.5s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

.sidebar-nav { flex:1; padding:6px 10px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.nav-label {
  font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-3); padding:12px 10px 6px;
}
.nav-item {
  display:flex; align-items:center; gap:9px; padding:10px 12px;
  border-radius:var(--r-md); cursor:pointer; transition:all 0.14s;
  font-size:13.5px; font-weight:600; color:var(--text-2);
  border:1px solid transparent;
}
.nav-item:hover { background:rgba(255,255,255,0.04); color:var(--text-1); }
.nav-item.active { background:var(--pink-50); color:var(--pink-light); border-color:var(--pink-100); }
.nav-item.active .nav-icon { color:var(--pink); opacity:1; }
.nav-icon { width:17px; height:17px; opacity:0.65; flex-shrink:0; transition:opacity 0.14s; }
.nav-badge {
  margin-left:auto; background:var(--pink); color:#fff;
  font-size:10px; font-weight:800; min-width:18px; height:18px;
  border-radius:99px; display:flex; align-items:center; justify-content:center; padding:0 5px;
}
.nav-badge.amber { background:var(--amber); }
.sidebar-footer { padding:14px 10px; border-top:1px solid var(--border-s); display:flex; flex-direction:column; gap:2px; }

/* ══════════════════════════════════════════
   MAIN AREA + TOPBAR
══════════════════════════════════════════ */
.main-area { display:flex; flex-direction:column; overflow:hidden; background:var(--bg-base); position:relative; }
.topbar {
  height:var(--topbar-h); display:flex; align-items:center; gap:14px;
  padding:0 26px; background:var(--bg-surface); border-bottom:1px solid var(--border-s);
  flex-shrink:0; z-index:50;
}
.topbar-title { font-size:18px; font-weight:800; flex:1; letter-spacing:-0.3px; }
.topbar-search {
  display:flex; align-items:center; gap:8px;
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); padding:8px 14px; width:240px; transition:all 0.2s;
}
.topbar-search:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-100); width:280px; }
.topbar-search input { background:transparent; border:none; outline:none; font-size:13px; color:var(--text-1); font-family:inherit; width:100%; }
.topbar-search input::placeholder { color:var(--text-3); }
.topbar-search svg { color:var(--text-3); flex-shrink:0; }
.icon-btn {
  width:40px; height:40px; border-radius:var(--r-md); border:1px solid var(--border-d);
  background:var(--bg-card); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all 0.15s; color:var(--text-2); position:relative;
}
.icon-btn:hover { background:var(--bg-card-h); color:var(--text-1); border-color:var(--border-str); }
.ib-badge {
  position:absolute; top:-4px; right:-4px; width:16px; height:16px;
  background:var(--pink); border-radius:50%; font-size:9px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-surface);
}
.tb-divider { width:1px; height:26px; background:var(--border-s); }
.tb-admin { display:flex; align-items:center; gap:10px; cursor:pointer; }
.page-content { flex:1; overflow-y:auto; padding:26px; }
.view { display:none; }
.view.active { display:block; }

/* ══════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════ */
.stats-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:24px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:18px 16px;
  position:relative; overflow:hidden; cursor:default;
  transition:transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--card-accent,var(--pink)),transparent);
  opacity:0.6;
}
.stat-card.sc-pink   { --card-accent: var(--pink); }
.stat-card.sc-green  { --card-accent: var(--green); }
.stat-card.sc-amber  { --card-accent: var(--amber); }
.stat-card.sc-purple { --card-accent: var(--purple); }
.stat-card.sc-red    { --card-accent: var(--red); }
.stat-card.sc-teal   { --card-accent: var(--teal); }
.stat-icon {
  width:36px; height:36px; border-radius:10px; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px; background:rgba(255,255,255,0.06);
}
.stat-value { font-size:28px; font-weight:900; line-height:1; margin-bottom:4px; letter-spacing:-1px; }
.stat-label { font-size:11px; color:var(--text-2); font-weight:600; line-height:1.4; }
.stat-change { font-size:11px; margin-top:8px; font-weight:500; display:flex; align-items:center; gap:4px; }
.stat-change.up { color:var(--green); }
.stat-change.down { color:var(--red); }
.stat-change.neutral { color:var(--text-3); }

/* ══════════════════════════════════════════
   CARD
══════════════════════════════════════════ */
.card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:20px;
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.card-title { font-size:14px; font-weight:800; letter-spacing:-0.2px; }
.card-subtitle { font-size:11px; color:var(--text-3); margin-top:3px; }
.section-title { font-size:14px; font-weight:800; letter-spacing:-0.2px; margin-bottom:14px; }
.right-panel { display:flex; flex-direction:column; gap:16px; }
.dashboard-grid { display:grid; grid-template-columns:1fr 340px; gap:18px; }
.two-col-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }

/* ══════════════════════════════════════════
   PRIVACY BANNER
══════════════════════════════════════════ */
.privacy-banner {
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:rgba(59,130,246,0.07); border:1px solid rgba(59,130,246,0.18);
  border-radius:var(--r-md); margin-bottom:16px;
  font-size:12px; color:var(--text-2);
}
.privacy-banner strong { color:var(--blue); }

/* ══════════════════════════════════════════
   FILTER / SEARCH BAR
══════════════════════════════════════════ */
.filter-bar {
  display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;
}
.filter-search {
  display:flex; align-items:center; gap:8px; flex:1; min-width:200px;
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); padding:9px 14px; transition:all 0.2s;
}
.filter-search:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-100); }
.filter-search input { background:transparent; border:none; outline:none; font-size:13px; color:var(--text-1); font-family:inherit; width:100%; }
.filter-search input::placeholder { color:var(--text-3); }
.filter-select {
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); padding:9px 14px; color:var(--text-1);
  font-family:'Urbanist',sans-serif; font-size:13px; font-weight:600;
  outline:none; cursor:pointer; transition:border-color 0.2s; -webkit-appearance:none;
  min-width:140px;
}
.filter-select:focus { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-100); }
.results-count { font-size:12px; color:var(--text-3); margin-left:auto; white-space:nowrap; }

/* ══════════════════════════════════════════
   TAB BAR
══════════════════════════════════════════ */
.tab-bar {
  display:flex; gap:4px; background:var(--bg-card);
  border:1px solid var(--border-s); border-radius:var(--r-lg);
  padding:4px; margin-bottom:18px; width:fit-content;
}
.tab-item {
  padding:8px 18px; border-radius:var(--r-md); font-size:13px; font-weight:700;
  color:var(--text-2); cursor:pointer; transition:all 0.14s;
  display:flex; align-items:center; gap:6px;
}
.tab-item:hover { color:var(--text-1); }
.tab-item.active { background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.tab-count {
  background:rgba(255,255,255,0.18); border-radius:99px;
  font-size:10px; font-weight:800; min-width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}
.tab-item:not(.active) .tab-count { background:rgba(255,255,255,0.06); color:var(--text-3); }

/* ══════════════════════════════════════════
   ADMIN TABLE
══════════════════════════════════════════ */
.table-wrapper {
  overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border-s);
}
.admin-table {
  width:100%; border-collapse:collapse; font-size:13px;
}
.admin-table thead { position:sticky; top:0; z-index:5; }
.admin-table th {
  background:var(--bg-elevated); padding:11px 14px;
  font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.07em; color:var(--text-3);
  border-bottom:1px solid var(--border-d); white-space:nowrap;
  cursor:pointer; user-select:none; transition:color 0.15s;
}
.admin-table th:hover { color:var(--text-1); }
.admin-table th.sorted { color:var(--pink); }
.admin-table th .sort-arrow { font-size:10px; margin-left:4px; opacity:0.5; }
.admin-table th.sorted .sort-arrow { opacity:1; color:var(--pink); }
.admin-table td {
  padding:12px 14px; border-bottom:1px solid var(--border-s);
  vertical-align:middle; color:var(--text-1);
}
.admin-table tbody tr { background:var(--bg-card); transition:background 0.15s; }
.admin-table tbody tr:hover { background:var(--bg-card-h); }
.admin-table tbody tr:last-child td { border-bottom:none; }
.user-cell { display:flex; align-items:center; gap:10px; }
.user-avatar {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:11px; color:#fff; flex-shrink:0;
}
.av-0 { background:linear-gradient(135deg,#FF6B9D,#FA2D56); }
.av-1 { background:linear-gradient(135deg,#7C3AED,#A78BFA); }
.av-2 { background:linear-gradient(135deg,#06B6D4,#0891B2); }
.av-3 { background:linear-gradient(135deg,#10B981,#059669); }
.av-4 { background:linear-gradient(135deg,#F59E0B,#D97706); }
.av-5 { background:linear-gradient(135deg,#8B5CF6,#6D28D9); }
.av-6 { background:linear-gradient(135deg,#EF4444,#DC2626); }
.av-7 { background:linear-gradient(135deg,#EC4899,#BE185D); }
.user-name { font-size:13px; font-weight:700; line-height:1.3; }
.user-id { font-size:10px; color:var(--text-3); font-family:'Inter',monospace; margin-top:2px; }
.table-actions { display:flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.text-muted { color:var(--text-3); font-size:12px; }
.text-mono { font-family:'Inter',monospace; font-size:12px; color:var(--text-2); }
.pagination {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 0; border-top:1px solid var(--border-s); margin-top:4px;
}
.pagination-info { font-size:12px; color:var(--text-3); }
.pagination-btns { display:flex; gap:6px; }

/* ══════════════════════════════════════════
   BADGES
══════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:99px; font-size:11px; font-weight:700; white-space:nowrap;
}
.badge-dot { width:5px; height:5px; border-radius:50%; }
.bdg-active    { background:var(--green-100); color:var(--green); border:1px solid rgba(16,185,129,0.25); }
.bdg-suspended { background:var(--red-100); color:var(--red); border:1px solid rgba(239,68,68,0.25); }
.bdg-pending   { background:var(--amber-100); color:var(--amber); border:1px solid rgba(245,158,11,0.25); }
.bdg-verified  { background:var(--blue-100); color:var(--blue); border:1px solid rgba(59,130,246,0.25); }
.bdg-unverified{ background:rgba(255,255,255,0.05); color:var(--text-3); border:1px solid var(--border-s); }
.bdg-rejected  { background:var(--red-50); color:var(--red); border:1px solid rgba(239,68,68,0.2); }
.bdg-admin     { background:var(--pink-100); color:var(--pink); border:1px solid var(--pink-200); }
.bdg-new       { background:var(--purple-100); color:var(--purple); border:1px solid rgba(139,92,246,0.25); }

/* ══════════════════════════════════════════
   ANALYTICS
══════════════════════════════════════════ */
.analytics-filter-bar {
  display:flex; align-items:center; gap:6px; margin-bottom:24px;
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:4px; width:fit-content;
}
.af-btn {
  padding:7px 18px; border-radius:var(--r-md); font-size:12px; font-weight:700;
  color:var(--text-2); cursor:pointer; transition:all 0.14s;
  background:transparent; border:none; font-family:inherit;
}
.af-btn:hover { color:var(--text-1); background:rgba(255,255,255,0.04); }
.af-btn.active { background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.charts-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.charts-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; margin-bottom:18px; }
.chart-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:20px;
}
.chart-title { font-size:13px; font-weight:800; margin-bottom:4px; }
.chart-subtitle { font-size:11px; color:var(--text-3); margin-bottom:16px; }
.chart-container { position:relative; }
.chart-full { grid-column:1/-1; }

/* Heatmap */
.heatmap-grid {
  display:grid; grid-template-columns:40px repeat(24,1fr);
  gap:3px; overflow-x:auto;
}
.heatmap-label {
  font-size:10px; color:var(--text-3); font-weight:600;
  display:flex; align-items:center;
}
.heatmap-hour-label {
  font-size:9px; color:var(--text-3); text-align:center;
  margin-bottom:4px;
}
.heatmap-cell {
  aspect-ratio:1; border-radius:3px;
  background:rgba(250,45,86,var(--intensity,0.05));
  transition:transform 0.15s;
  cursor:default;
}
.heatmap-cell:hover { transform:scale(1.3); z-index:5; }
.heatmap-legend { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:11px; color:var(--text-3); }
.heatmap-legend-bar {
  height:8px; width:100px; border-radius:99px;
  background:linear-gradient(90deg,rgba(250,45,86,0.05),rgba(250,45,86,0.9));
}

/* Progress ring */
.progress-ring-container { display:flex; align-items:center; justify-content:center; gap:24px; }
.ring-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; }
.ring-label { font-size:12px; color:var(--text-2); font-weight:600; text-align:center; }
.ring-value { font-size:20px; font-weight:900; text-align:center; }

/* ══════════════════════════════════════════
   ACTIVITY FEED
══════════════════════════════════════════ */
.activity-feed { display:flex; flex-direction:column; gap:0; }
.activity-item {
  display:flex; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--border-s);
}
.activity-item:last-child { border-bottom:none; padding-bottom:0; }
.activity-icon {
  width:32px; height:32px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; flex-shrink:0; background:var(--bg-elevated);
}
.activity-info { flex:1; min-width:0; }
.activity-text { font-size:12px; font-weight:600; line-height:1.4; }
.activity-text strong { color:var(--text-1); }
.activity-text span { color:var(--text-2); }
.activity-time { font-size:11px; color:var(--text-3); margin-top:2px; }

/* ══════════════════════════════════════════
   VERIFICATION QUEUE
══════════════════════════════════════════ */
.verif-card {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:18px; margin-bottom:12px;
  display:grid; grid-template-columns:auto 1fr auto;
  gap:14px; align-items:center; transition:all 0.15s;
}
.verif-card:hover { border-color:var(--border-d); background:var(--bg-card-h); }
.verif-info .vi-name { font-size:14px; font-weight:800; margin-bottom:4px; }
.verif-info .vi-meta { font-size:12px; color:var(--text-2); display:flex; gap:14px; flex-wrap:wrap; }
.verif-info .vi-meta span { display:flex; align-items:center; gap:4px; }
.verif-actions { display:flex; gap:8px; flex-wrap:nowrap; }

/* ══════════════════════════════════════════
   NOTIFICATION COMPOSER
══════════════════════════════════════════ */
.notif-composer {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-lg); padding:24px; margin-bottom:20px;
}
.notif-type-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:20px; }
.notif-type-btn {
  padding:12px; border-radius:var(--r-md);
  background:var(--bg-elevated); border:2px solid var(--border-s);
  cursor:pointer; text-align:center; transition:all 0.15s;
}
.notif-type-btn:hover { border-color:var(--border-d); }
.notif-type-btn.selected { background:var(--pink-50); border-color:var(--pink-100); }
.notif-type-btn .nt-icon { font-size:20px; margin-bottom:6px; }
.notif-type-btn .nt-label { font-size:11px; font-weight:700; color:var(--text-2); }
.notif-type-btn.selected .nt-label { color:var(--pink-light); }
.notif-history-table { width:100%; border-collapse:collapse; font-size:12px; }
.notif-history-table th {
  text-align:left; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--text-3); padding:0 12px 10px;
}
.notif-history-table td { padding:11px 12px; border-top:1px solid var(--border-s); vertical-align:middle; }
.notif-history-table tr:hover td { background:rgba(255,255,255,0.02); }

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.85);
  backdrop-filter:blur(8px); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.open { display:flex; animation:fade-in 0.2s ease; }
@keyframes fade-in { from{opacity:0;} to{opacity:1;} }
.modal {
  background:var(--bg-surface); border:1px solid var(--border-d);
  border-radius:var(--r-xl); width:100%; max-width:500px;
  max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);
  animation:slide-up 0.25s cubic-bezier(0.4,0,0.2,1);
}
.modal-lg { max-width:680px; }
.modal-xl { max-width:800px; }
@keyframes slide-up { from{transform:translateY(24px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.modal-header { padding:22px 24px 0; display:flex; align-items:center; justify-content:space-between; }
.modal-title { font-size:17px; font-weight:800; }
.modal-close {
  width:30px; height:30px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.06); color:var(--text-2);
  cursor:pointer; font-size:16px; display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.modal-close:hover { background:rgba(255,255,255,0.12); color:var(--text-1); }
.modal-body { padding:20px 24px; }
.modal-footer { padding:0 24px 22px; display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }

/* User detail modal */
.user-detail-header {
  display:flex; align-items:center; gap:16px; padding:20px;
  background:linear-gradient(135deg,var(--bg-elevated),var(--pink-50));
  border:1px solid var(--pink-100); border-radius:var(--r-lg); margin-bottom:20px;
}
.udh-avatar {
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:22px; color:#fff; flex-shrink:0;
}
.udh-name { font-size:18px; font-weight:800; margin-bottom:4px; }
.udh-email { font-size:13px; color:var(--text-2); }
.udh-badges { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.info-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.info-field {
  background:var(--bg-card); border:1px solid var(--border-s);
  border-radius:var(--r-md); padding:11px 13px;
}
.info-field .label { font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-3); font-weight:700; margin-bottom:4px; }
.info-field .value { font-size:13px; font-weight:700; }
.login-history { display:flex; flex-direction:column; gap:0; }
.login-event {
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-bottom:1px solid var(--border-s); font-size:12px;
}
.login-event:last-child { border-bottom:none; }

/* Danger confirm */
.danger-confirm-box {
  background:var(--red-50); border:1px solid rgba(239,68,68,0.25);
  border-radius:var(--r-md); padding:14px 16px; margin:14px 0;
  font-size:13px; color:var(--text-2); line-height:1.5;
}
.confirm-input { margin-top:12px; }
.confirm-input input {
  background:var(--bg-card); border:1px solid var(--border-d);
  border-radius:var(--r-md); padding:10px 14px; color:var(--text-1);
  font-family:inherit; font-size:14px; outline:none; width:100%;
  transition:border-color 0.2s;
}
.confirm-input input:focus { border-color:var(--red); box-shadow:0 0 0 3px var(--red-50); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:10px; z-index:9999;
  pointer-events:none;
}
.toast {
  display:flex; align-items:flex-start; gap:12px;
  background:var(--bg-elevated); border:1px solid var(--border-d);
  border-radius:var(--r-lg); padding:14px 16px;
  box-shadow:var(--shadow-lg); pointer-events:all;
  animation:toast-in 0.3s cubic-bezier(0.4,0,0.2,1);
  max-width:360px;
}
@keyframes toast-in { from{transform:translateX(20px);opacity:0;} to{transform:translateX(0);opacity:1;} }
.toast.out { animation:toast-out 0.25s ease forwards; }
@keyframes toast-out { to{transform:translateX(20px);opacity:0;} }
.toast-icon { font-size:18px; flex-shrink:0; }
.toast-body { flex:1; }
.toast-title { font-size:13px; font-weight:700; margin-bottom:2px; }
.toast-msg { font-size:12px; color:var(--text-2); line-height:1.4; }
.toast.success .toast-icon { color:var(--green); }
.toast.error .toast-icon { color:var(--red); }
.toast.info .toast-icon { color:var(--teal); }
.toast.warn .toast-icon { color:var(--amber); }

/* ══════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════ */
.empty-state {
  text-align:center; padding:48px 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.empty-state .es-icon { font-size:40px; opacity:0.5; }
.empty-state .es-title { font-size:15px; font-weight:700; color:var(--text-2); }
.empty-state .es-desc { font-size:13px; color:var(--text-3); max-width:280px; line-height:1.5; }

/* ══════════════════════════════════════════
   LOADING
══════════════════════════════════════════ */
#loading-screen {
  position:fixed; inset:0; background:var(--bg-base);
  z-index:9000; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:16px;
}
.table-loading {
  display:flex; align-items:center; justify-content:center;
  padding:40px; gap:12px; color:var(--text-3); font-size:13px;
}

/* ══════════════════════════════════════════
   AUDIT LOG
══════════════════════════════════════════ */
.audit-action-chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border-radius:99px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.04em;
}
.audit-suspend   { background:var(--red-100); color:var(--red); }
.audit-activate  { background:var(--green-100); color:var(--green); }
.audit-verify    { background:var(--blue-100); color:var(--blue); }
.audit-delete    { background:rgba(239,68,68,0.15); color:var(--red); }
.audit-archive   { background:var(--purple-100); color:var(--purple); }
.audit-restore   { background:var(--green-100); color:var(--green); }
.audit-create    { background:var(--purple-100); color:var(--purple); }
.audit-notify    { background:var(--teal-100); color:var(--teal); }
.audit-update    { background:var(--amber-100); color:var(--amber); }
.bdg-archived    { background:var(--purple-50); color:var(--purple); border:1px solid var(--border-d); }

/* ══════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════ */
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-gap { display:flex; align-items:center; gap:10px; }
.mt-4 { margin-top:16px; }
.mt-6 { margin-top:24px; }
.mb-4 { margin-bottom:16px; }
.text-pink { color:var(--pink); }
.text-green { color:var(--green); }
.text-red { color:var(--red); }
.font-mono { font-family:'Inter',monospace; }

/* ══════════════════════════════════════════
   RESPONSIVE TWEAKS
══════════════════════════════════════════ */
@media (max-width:1400px) {
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .charts-grid { grid-template-columns:1fr; }
  .charts-grid-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:1100px) {
  .dashboard-grid { grid-template-columns:1fr; }
  :root { --sidebar-w: 220px; }
}