/* ============================================================
   Bodh Saarthi — app.css
   Mobile-first responsive design
   Breakpoints: mobile (<600px) | tablet (600–900px) | desktop (>900px)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

/* ── TOKENS ── */
:root {
  --bg:      #0a0f1e;
  --bg2:     #0d1527;
  --card:    #131e35;
  --card2:   #1a2744;
  --border:  #1e3a5f;
  --border2: #243660;
  --acc:     #6366f1;
  --acc2:    #22d3ee;
  --acc3:    #f472b6;
  --green:   #10b981;
  --amber:   #f59e0b;
  --red:     #ef4444;
  --txt:     #f1f5f9;
  --muted:   #64748b;
  --muted2:  #94a3b8;
  --font:    'Syne', sans-serif;
  --mono:    'Space Mono', monospace;
  --r:       10px;
  --r-lg:    14px;
  --sidebar-w: 240px;
  --topbar-h:  58px;
  --mob-nav-h: 60px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: var(--font); background: var(--bg); color: var(--txt);
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
button { cursor: pointer; font-family: var(--font); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* ============================================================
   LAYOUT — Desktop sidebar + main
   ============================================================ */
.layout {
  display: block;       /* sidebar is position:fixed, so no grid needed */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ============================================================
   SIDEBAR — Desktop
   ============================================================ */
.sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;           /* fixed so it stays while content scrolls */
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  z-index: 100;
  transition: transform 0.25s ease;
}
.sidebar-logo {
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.logo-text { font-size: 20px; font-weight: 800; }
.logo-text span { color: var(--acc); }
.logo-sub { font-size: 9px; color: var(--muted); font-family: var(--mono); margin-top: 2px; text-transform: uppercase; letter-spacing: 1.5px; }

.user-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(99,102,241,0.05);
  flex-shrink: 0;
}
.u-av {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.u-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.u-role { font-size: 10px; color: var(--muted2); font-family: var(--mono); }

.sidebar-nav { padding: 6px 8px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 2px;
  padding: 10px 8px 3px; font-family: var(--mono);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px;
  font-size: 13px; color: var(--muted2);
  transition: background 0.15s, color 0.15s;
  margin-bottom: 1px; border: 1px solid transparent;
}
.nav-item:hover  { background: var(--card2); color: var(--txt); }
.nav-item.active { background: rgba(99,102,241,0.15); color: #fff; border-color: rgba(99,102,241,0.25); }
.nav-item i { font-size: 17px; width: 20px; text-align: center; flex-shrink: 0; }

.sidebar-bottom { padding: 10px 8px; border-top: 1px solid var(--border); flex-shrink: 0; }
.logout-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--red); border: 1px solid rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.05); font-size: 13px;
  transition: background 0.2s; width: 100%;
}
.logout-btn:hover { background: rgba(239,68,68,0.15); }

/* Sidebar overlay backdrop (mobile) */
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
  backdrop-filter: blur(2px);
}

/* ============================================================
   MAIN AREA
   ============================================================ */
.main-area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin-left: var(--sidebar-w);
  width: calc(100vw - var(--sidebar-w));  /* full remaining width */
  overflow-x: hidden;
}

/* ── TOPBAR ── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: sticky; top: 0; z-index: 50;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 10px; }

/* Hamburger — hidden on desktop */
.hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: transparent; border: 1px solid var(--border2);
  color: var(--muted2); font-size: 20px;
  flex-shrink: 0;
}

.page-title   { font-size: 18px; font-weight: 700; }
.breadcrumb   { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 1px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ── TOPBAR BUTTONS ── */
.tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 8px;
  font-size: 12px; font-family: var(--font);
  transition: all 0.2s; white-space: nowrap;
}
.tb-btn.ghost {
  background: transparent; border: 1px solid var(--border2); color: var(--muted2);
}
.tb-btn.ghost:hover { border-color: var(--acc); color: var(--txt); }

/* Hide text labels on small screens */
.tb-btn .tb-label { display: inline; }

/* ── FLASH ── */
.flash {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 24px; font-size: 13px;
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.flash i { font-size: 18px; flex-shrink: 0; }
.flash-success { background: rgba(16,185,129,0.1);  color: var(--green); }
.flash-error   { background: rgba(239,68,68,0.1);   color: var(--red);   }
.flash-info    { background: rgba(34,211,238,0.1);  color: var(--acc2);  }

/* ── CONTENT ── */
.content {
  padding: 24px;
  flex: 1;
  overflow-x: hidden;
}

/* ============================================================
   BOTTOM NAV — Mobile only (rendered by header.php)
   ============================================================ */
.mob-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--mob-nav-h);
  background: var(--bg2);
  border-top: 1px solid var(--border);
  z-index: 90;
  padding: 0 4px;
  align-items: center; justify-content: space-around;
  gap: 2px;
}
.mob-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 8px; border-radius: 10px;
  font-size: 10px; color: var(--muted2);
  flex: 1; transition: color 0.15s;
  text-align: center; min-width: 0;
}
.mob-nav-item i { font-size: 20px; }
.mob-nav-item.active { color: var(--acc); }
.mob-nav-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 9px;
  font-size: 13px; font-family: var(--font);
  border: none; transition: all 0.2s; font-weight: 500;
  white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--acc), #818cf8); color: #fff; }
.btn-primary:hover { box-shadow: 0 4px 20px rgba(99,102,241,0.35); transform: translateY(-1px); }
.btn-ghost   { background: transparent; border: 1px solid var(--border2); color: var(--muted2); }
.btn-ghost:hover { border-color: var(--acc); color: var(--txt); }
.btn-danger  { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red); }
.btn-danger:hover { background: rgba(239,68,68,0.2); }
.btn-sm { padding: 6px 11px; font-size: 12px; }

/* ============================================================
   PANELS
   ============================================================ */
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-bottom: 16px;
}
.panel-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 10px; flex-wrap: wrap;
}
.panel-hd h3 { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.panel-hd h3 i { font-size: 16px; }

/* ============================================================
   STAT CARDS
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px;
  position: relative; overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 70px; height: 70px;
  border-radius: 0 var(--r-lg) 0 70px; opacity: 0.12;
}
.sc1::after { background: var(--acc);   }
.sc2::after { background: var(--acc2);  }
.sc3::after { background: var(--acc3);  }
.sc4::after { background: var(--green); }

.stat-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-bottom: 12px;
}
.sc1 .stat-icon { background: rgba(99,102,241,0.15);  color: var(--acc);   }
.sc2 .stat-icon { background: rgba(34,211,238,0.15);  color: var(--acc2);  }
.sc3 .stat-icon { background: rgba(244,114,182,0.15); color: var(--acc3);  }
.sc4 .stat-icon { background: rgba(16,185,129,0.15);  color: var(--green); }

.stat-num   { font-size: 24px; font-weight: 700; font-family: var(--mono); line-height: 1; }
.stat-label { font-size: 10px; color: var(--muted2); margin-top: 4px; text-transform: uppercase; letter-spacing: 1px; }
.stat-sub   { font-size: 11px; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 20px; }
.up { background: rgba(16,185,129,0.1); color: var(--green); }
.dn { background: rgba(239,68,68,0.1);  color: var(--red);   }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th {
  padding: 9px 12px; text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--muted); font-weight: 500;
  border-bottom: 1px solid var(--border); font-family: var(--mono);
  white-space: nowrap;
}
td {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(30,58,95,0.4);
  font-size: 13px; vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.02); }

/* ============================================================
   PILLS / TAGS
   ============================================================ */
.pill {
  display: inline-block; font-size: 10px;
  padding: 3px 9px; border-radius: 20px;
  font-weight: 600; font-family: var(--mono); white-space: nowrap;
}
.p-green { background: rgba(16,185,129,0.12);  color: var(--green); }
.p-red   { background: rgba(239,68,68,0.12);   color: var(--red);   }
.p-amber { background: rgba(245,158,11,0.12);  color: var(--amber); }
.p-blue  { background: rgba(99,102,241,0.12);  color: var(--acc);   }
.p-cyan  { background: rgba(34,211,238,0.12);  color: var(--acc2);  }

/* ============================================================
   AVATAR
   ============================================================ */
.av-cell { display: flex; align-items: center; gap: 10px; }
.av {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }

.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11px; color: var(--muted2);
  text-transform: uppercase; letter-spacing: 1px;
  margin-bottom: 5px; font-family: var(--mono);
}
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea {
  width: 100%; padding: 9px 12px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 9px; color: var(--txt);
  font-size: 14px;      /* 14px prevents iOS zoom on focus */
  font-family: var(--font); outline: none;
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.field input[type=checkbox],
.field input[type=radio] {
  width: 16px; height: 16px; accent-color: var(--acc);
  cursor: pointer; flex-shrink: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--acc); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.field textarea { resize: vertical; min-height: 80px; }
.field input::placeholder { color: var(--muted); }

/* ============================================================
   SEARCH BAR
   ============================================================ */
.search-bar {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.search-wrap { position: relative; flex: 1; min-width: 180px; }
.search-wrap i {
  position: absolute; left: 11px; top: 50%;
  transform: translateY(-50%); color: var(--muted); font-size: 16px;
  pointer-events: none;
}
.search-bar input[type=search],
.search-bar input[type=text] {
  width: 100%; padding: 9px 12px 9px 36px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 9px; color: var(--txt);
  font-size: 14px; font-family: var(--font); outline: none;
}
.search-bar input:focus { border-color: var(--acc); }
.search-bar select {
  padding: 9px 32px 9px 12px;
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 9px; color: var(--muted2);
  font-size: 13px; font-family: var(--font); outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ============================================================
   INFO ROWS
   ============================================================ */
.info-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(30,58,95,0.4); font-size: 13px;
}
.info-row:last-child { border-bottom: none; }
.info-row span:first-child { color: var(--muted2); }

/* ============================================================
   GRID HELPERS
   ============================================================ */
.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.grid-2-1 { display: grid; grid-template-columns: 1fr 320px; gap: 16px; }
.mb-20 { margin-bottom: 20px; }

/* ============================================================
   ACCESS DENIED
   ============================================================ */
.denied {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 300px; text-align: center; padding: 24px;
}
.denied i { font-size: 56px; color: var(--red); opacity: 0.4; margin-bottom: 16px; }
.denied h2 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.denied p  { color: var(--muted2); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); position: relative; overflow: hidden;
  padding: 16px;
}
.login-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.login-glow {
  position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
  top: -100px; right: -100px; pointer-events: none;
}
.login-box { position: relative; z-index: 2; width: 100%; max-width: 420px; }
.login-logo { text-align: center; margin-bottom: 24px; }
.login-logo-text { font-size: 34px; font-weight: 800; letter-spacing: -1px; }
.login-logo-text span { color: var(--acc); }
.login-logo-sub { font-size: 10px; color: var(--muted2); font-family: var(--mono); margin-top: 4px; text-transform: uppercase; letter-spacing: 2px; }
.login-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 24px; position: relative; overflow: hidden;
}
.login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--acc), var(--acc2), var(--acc3));
}
.role-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-bottom: 20px; }
.role-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px; border-radius: 10px;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted2); transition: all 0.2s; font-family: var(--font);
}
.role-btn:hover { border-color: var(--acc); color: var(--txt); }
.role-btn.sel   { border-color: var(--acc); background: rgba(99,102,241,0.15); color: var(--acc); }
.role-btn i     { font-size: 20px; }
.role-btn span  { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.captcha-row    { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.captcha-box {
  flex: 1;
  background: repeating-linear-gradient(45deg, var(--bg) 0, var(--bg) 10px, var(--bg2) 10px, var(--bg2) 20px);
  border: 1px solid var(--border2); border-radius: 9px;
  padding: 10px; font-family: var(--mono); font-size: 20px;
  font-weight: 700; letter-spacing: 8px; color: var(--acc2);
  text-align: center; user-select: none;
}
.captcha-btn {
  background: none; border: 1px solid var(--border2); border-radius: 8px;
  color: var(--muted2); padding: 10px 12px; font-size: 16px;
}
.captcha-btn:hover { border-color: var(--acc); color: var(--txt); }
.login-btn {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, var(--acc), #818cf8);
  border: none; border-radius: 11px; color: #fff;
  font-size: 15px; font-weight: 700; font-family: var(--font);
  transition: all 0.2s;
}
.login-btn:hover { box-shadow: 0 8px 28px rgba(99,102,241,0.4); }
.error-box {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--red);
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}
.remember-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; font-size: 13px; color: var(--muted2);
}
.remember-row label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.remember-row input[type=checkbox] { accent-color: var(--acc); }

/* ============================================================
   TABLET  600px – 900px
   Sidebar collapses, bottom nav appears
   ============================================================ */
@media (max-width: 900px) {

  /* Push sidebar off-screen; toggled by JS class */
  .layout { grid-template-columns: 1fr; }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: 4px 0 24px rgba(0,0,0,0.5);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.open { display: block; }

  .main-area { margin-left: 0; width: 100vw; }

  /* Hamburger visible */
  .hamburger { display: flex; }

  /* Topbar adjustments */
  .topbar { padding: 0 16px; }
  .page-title { font-size: 16px; }
  .breadcrumb { display: none; }

  /* Hide text on topbar buttons, show only icon */
  .tb-btn .tb-label { display: none; }
  .tb-btn { padding: 7px 10px; }

  /* Content */
  .content { padding: 16px; }

  /* Flash */
  .flash { padding: 10px 16px; font-size: 12px; }

  /* Stats: 2 columns on tablet */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
  .stat-num   { font-size: 22px; }

  /* Grids stack */
  .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }

  /* Panel */
  .panel { padding: 14px; }

  /* Table horizontal scroll */
  .table-wrap { overflow-x: auto; }

  /* Bottom nav visible */
  .mob-nav { display: flex; }

  /* Add bottom padding so content isn't hidden behind mob nav */
  .content { padding-bottom: calc(var(--mob-nav-h) + 16px); }
}

/* ============================================================
   MOBILE  < 600px
   ============================================================ */
@media (max-width: 600px) {

  .topbar { padding: 0 12px; height: 52px; }
  .page-title { font-size: 15px; }

  .content { padding: 12px; padding-bottom: calc(var(--mob-nav-h) + 12px); }
  .flash { padding: 9px 12px; }

  /* Stats: 2 col on mobile too but smaller */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card  { padding: 12px; }
  .stat-icon  { width: 32px; height: 32px; font-size: 15px; margin-bottom: 8px; }
  .stat-num   { font-size: 20px; }
  .stat-label { font-size: 9px; }

  /* Panel */
  .panel { padding: 12px; margin-bottom: 12px; }
  .panel-hd { margin-bottom: 12px; }
  .panel-hd h3 { font-size: 13px; }

  /* Buttons smaller */
  .btn { padding: 8px 14px; font-size: 12px; }
  .btn-sm { padding: 5px 10px; font-size: 11px; }

  /* Search bar stacks */
  .search-bar { flex-direction: column; align-items: stretch; }
  .search-wrap { min-width: unset; }
  .search-bar select { width: 100%; }
  .search-bar .btn { width: 100%; justify-content: center; }

  /* Table: tighter padding */
  th { padding: 8px 10px; font-size: 9px; }
  td { padding: 9px 10px; font-size: 12px; }

  /* Login */
  .login-logo-text { font-size: 28px; }
  .login-card { padding: 18px; border-radius: 14px; }
  .role-btn i { font-size: 18px; }
  .role-btn span { font-size: 9px; }

  /* Mob nav icon size */
  .mob-nav-item i { font-size: 18px; }
  .mob-nav-item   { font-size: 9px; }

  /* Info rows */
  .info-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .info-row span:last-child { font-size: 12px; }
}

/* ============================================================
   VERY SMALL  < 380px  (older/budget phones)
   ============================================================ */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stat-num   { font-size: 18px; }
  .role-grid  { gap: 5px; }
  .role-btn   { padding: 8px 3px; }
  .content    { padding: 10px; }
}

/* ============================================================
   LARGE SCREENS  > 1280px
   ============================================================ */
@media (min-width: 1280px) {
  :root { --sidebar-w: 260px; }
  .content { padding: 28px 32px; }
  .stats-grid { gap: 18px; }
  .stat-num   { font-size: 30px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar, .topbar, .mob-nav, .hamburger, .sidebar-backdrop,
  .btn, .search-bar, .flash, .no-print { display: none !important; }
  .main-area { margin-left: 0 !important; width: 100% !important; max-width: 100% !important; }
  .content { padding: 0; }
  .panel { border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; }
  .pill { border: 1px solid #ccc; }
}

/* ============================================================
   MOBILE-FRIENDLY UTILITY CLASSES
   Use these instead of inline styles for responsive layouts
   ============================================================ */

/* Filter bar — search + filters + action buttons */
.filter-bar { display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.filter-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter-row .search-wrap { flex:1; min-width:0; }
.filter-row select {
  flex:1; min-width:0; max-width:180px;
  padding:9px 28px 9px 10px;
  background:var(--card); border:1px solid var(--border2);
  border-radius:9px; color:var(--muted2);
  font-size:14px; font-family:var(--font); outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.filter-actions { display:flex; gap:6px; align-items:center; margin-left:auto; flex-shrink:0; }

/* Quick action grid — auto responsive */
.quick-actions {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(90px,1fr));
  gap:10px;
}
.quick-action-item {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:14px 8px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,0.02);
  font-size:11px; color:var(--muted2); text-align:center;
  text-decoration:none; transition:all 0.2s;
}
.quick-action-item:hover { border-color:var(--acc); color:var(--txt); background:rgba(99,102,241,0.07); }
.quick-action-item i { font-size:22px; }

/* Page header with action button */
.page-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.page-hd h2 { font-size:16px; font-weight:700; }

/* Stat cards — always 2 col on mobile, 4 on desktop */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }

/* Tab nav */
.tab-nav { display:flex; gap:2px; margin-bottom:20px; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tab-nav::-webkit-scrollbar { height:0; }
.tab-link {
  padding:10px 16px; font-size:13px; white-space:nowrap;
  border-bottom:2px solid transparent; color:var(--muted2);
  text-decoration:none; font-weight:400; flex-shrink:0;
}
.tab-link.active { border-bottom-color:var(--acc); color:var(--acc); font-weight:600; }

/* Form actions row */
.form-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.form-actions .btn { flex:1; min-width:120px; justify-content:center; }
.form-actions .btn-ghost { flex:0; }

/* Summary pills row */
.summary-pills { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }

/* Info card (profile, settings) */
.info-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; margin-bottom:16px; }

/* Responsive overrides */
@media(max-width:900px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .filter-row select { max-width:none; }
  .quick-actions { grid-template-columns:repeat(3,1fr); }
  .form-actions .btn { flex:1; }
}
@media(max-width:600px) {
  .stats-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .filter-row { flex-wrap:wrap; }
  .filter-row select { flex:1; min-width:calc(50% - 4px); max-width:none; }
  .filter-actions { width:100%; justify-content:flex-end; }
  .quick-actions { grid-template-columns:repeat(3,1fr); gap:8px; }
  .quick-action-item { padding:12px 6px; font-size:10px; }
  .quick-action-item i { font-size:20px; }
  .tab-link { padding:8px 12px; font-size:12px; }
  .page-hd .btn span { display:none; } /* hide button text, keep icon */
}


/* ── MOBILE OVERFLOW FINAL FIX ── */
/* Force everything to stay within viewport */
@media (max-width: 900px) {
  html, body { overflow-x: hidden !important; }

  .layout    { width: 100%; overflow-x: hidden; }
  .main-area { width: 100%; overflow-x: hidden; }
  .content   { width: 100%; overflow-x: hidden; padding: 12px; }

  /* Filter bar — stack properly, no overflow */
  .filter-bar  { width: 100%; }
  .filter-row  { width: 100%; flex-wrap: wrap; gap: 6px; }
  .filter-row .search-wrap { width: 100%; flex: none; min-width: 0; }
  .filter-row select {
    flex: 1;
    min-width: 0;
    max-width: none;
    width: calc(50% - 3px);
  }
  .filter-actions { width: 100%; justify-content: flex-end; margin-left: 0; }

  /* Panels */
  .panel { width: 100%; overflow-x: hidden; }
  .panel-hd { flex-wrap: wrap; gap: 8px; }

  /* Tables — horizontal scroll ONLY inside table-wrap */
  .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table       { min-width: 0; width: max-content; min-width: 100%; }

  /* Pills row */
  .summary-pills { flex-wrap: wrap; gap: 6px; }

  /* Grid helpers */
  .grid-2, .grid-3, .grid-2-1 { grid-template-columns: 1fr; width: 100%; }
  .stats-grid { grid-template-columns: 1fr 1fr; width: 100%; }
  .form-grid  { grid-template-columns: 1fr; width: 100%; }

  /* Page header */
  .page-hd { flex-wrap: wrap; }

  /* Tab nav — scrollable but no page overflow */
  .tab-nav { width: 100%; overflow-x: auto; }
}

@media (max-width: 600px) {
  .content { padding: 10px; }

  /* On very small screens, search takes full row */
  .filter-row select { width: 100%; flex: none; }

  /* Stat cards smaller */
  .stat-card { padding: 12px; }
  .stat-num  { font-size: 20px; }
}

/* ── LAYOUT FINAL FIX ──
   Scoped to screen only — this reserves left-margin/width space for
   the sidebar, but the sidebar is never shown during print (hidden by
   the print block above), so there's nothing to reserve space for.
   Previously this had NO media scope at all, so it applied during
   print too — with `!important` on every property, appearing LATER in
   this file than the print block above, it could still end up winning
   depending on the exact page. It also computed width from `100vw`
   (viewport width — a SCREEN concept), which is unreliable in print
   contexts across browsers and could make a page's printable content
   compute a completely different width than the actual paper size,
   corrupting print layouts (columns miscalculating, unexpected extra
   pages) anywhere in the app that prints from inside .main-area. */
@media screen {
  .layout   { display: block !important; }
  .main-area {
    margin-left: var(--sidebar-w) !important;
    width: calc(100vw - var(--sidebar-w)) !important;
    max-width: calc(100vw - var(--sidebar-w)) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  @media (max-width: 900px) {
    .main-area {
      margin-left: 0 !important;
      width: 100vw !important;
      max-width: 100vw !important;
    }
  }
}