/* ═══════════════════════════════════════════════════════════════════
   JGA SCHOOL MANAGEMENT SYSTEM — UI v2
   Sidebar: dark navy. Page body: clean warm white.
   Tables: crisp, alternating rows, navy header.
   Forms: light, spacious, colour-accented.
   ═══════════════════════════════════════════════════════════════════ */

@import url('fonts.css');

/* ══════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════ */
:root {
  /* Sidebar chrome — stays dark */
  --navy:    #0d1526;
  --navy-2:  #0f1c32;
  --navy-3:  #14223c;
  --navy-4:  #1c2e4a;
  --navy-5:  #243657;
  --navy-6:  #2c4068;

  /* Brand accents */
  --gold:       #d4940a;
  --gold-lt:    #f0ab1f;
  --gold-dim:   rgba(212,148,10,0.13);
  --gold-glow:  rgba(212,148,10,0.28);
  --teal:       #0c9e78;
  --teal-dim:   rgba(12,158,120,0.12);
  --red:        #d63b51;
  --red-dim:    rgba(214,59,81,0.10);
  --blue:       #2872f0;
  --blue-dim:   rgba(40,114,240,0.10);
  --green:      #18a85e;
  --green-dim:  rgba(24,168,94,0.10);
  --orange:     #e07230;
  --purple:     #6f4fc0;
  --purple-dim: rgba(111,79,192,0.10);

  /* Aliases — several templates reference these names directly; they were
     never defined, so the styles silently fell back to inherited/default
     color (often invisible or low-contrast on a white card). Point them at
     the real tokens above so every existing usage resolves correctly. */
  --primary:      var(--blue);
  --accent:       var(--blue);
  --accent-blue:  var(--blue);
  --border-color: var(--border);

  /* ── Page surface (warm white) ── */
  --page-bg:   #f2f5fb;
  --surface:   #ffffff;
  --surface-2: #f7f9fd;
  --surface-3: #eaeff9;

  /* ── Table ── */
  --th-bg:     #1c2e4a;   /* same shade as nav hover */
  --th-text:   #ffffff;
  --td-odd:    #ffffff;
  --td-even:   #f5f8ff;
  --td-hover:  #ebf0ff;
  --td-border: #dce4f2;

  /* ── Forms ── */
  --input-bg:       #ffffff;
  --input-border:   #c4cfe3;
  --input-focus:    #2872f0;
  --input-text:     #1e2d45;
  --input-ph:       #96a6be;
  --label-col:      #334a66;

  /* ── Text on page ── */
  --txt:       #192740;
  --txt-2:     #3d526f;
  --txt-muted: #51658a; /* darkened from #6b82a4 — that was ~3.9:1 contrast on white, below WCAG AA (4.5:1) for body text */

  /* ── Text inside chrome (sidebar/topbar) ── */
  --chr-txt:   #dde8f5;
  --chr-2:     #7a9abc;
  --chr-dim:   #3a5070;

  /* ── Borders ── */
  --border:        #dce4f2;
  --border-strong: #c4cfe3;
  --border-focus:  rgba(40,114,240,0.4);

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(20,40,80,0.06);
  --shadow:    0 2px 12px rgba(20,40,80,0.08);
  --shadow-md: 0 4px 20px rgba(20,40,80,0.11);
  --shadow-lg: 0 8px 40px rgba(20,40,80,0.15);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --sidebar-w: 260px;
  --header-h:  64px;
  --ease:      0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100vw; }
body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--page-bg);
  color: var(--txt);
  min-height: 100vh;
  line-height: 1.65;
  font-size: clamp(16px, 1vw + 14px, 17px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: #c0cce0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.app-wrapper { display: flex; min-height: 100vh; overflow-x: hidden; max-width: 100vw; }

/* ══════════════════════════════════════════════
   SIDEBAR  (stays dark navy — no change)
══════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w);
  background: var(--navy-2);
  border-right: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform var(--ease);
  overflow-y: auto; overflow-x: hidden;
}

.sidebar-brand {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 12px;
  min-height: var(--header-h);
}
.sidebar-brand-icon {
  width: 36px; height: 36px;
  background: var(--gold-lt);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  box-shadow: 0 0 16px var(--gold-glow);
}
.sidebar-brand-text { font-weight: 800; font-size: 16px; color: var(--chr-txt); line-height: 1.2; }
.sidebar-brand-text span { display: block; font-size: 11.5px; font-weight: 400; color: var(--chr-2); letter-spacing: 0.5px; text-transform: uppercase; }

.sidebar-nav { flex: 1; padding: 14px 10px; display: flex; flex-direction: column; gap: 1px; }

.nav-section-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--chr-dim);
  padding: 14px 10px 5px; margin-top: 4px;
}
.nav-section-label:first-child { padding-top: 4px; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--chr-2); font-weight: 500; font-size: 14.5px;
  transition: all var(--ease); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
}
.nav-item:hover  { background: var(--navy-4); color: var(--chr-txt); }
.nav-item.active { background: var(--gold-dim); color: var(--gold-lt); border-color: rgba(212,148,10,0.2); font-weight: 600; }
.nav-item .nav-icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; opacity: 0.8; }
.nav-item.active .nav-icon { opacity: 1; }
.nav-item .nav-badge { margin-left: auto; background: var(--red); color: white; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center; }

.sidebar-footer { padding: 14px 10px; border-top: 1px solid rgba(255,255,255,0.06); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--navy-4); border: 1px solid rgba(255,255,255,0.06); }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 8px; background: var(--gold-dim); border: 1px solid var(--gold-glow); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--gold-lt); flex-shrink: 0; text-transform: uppercase; }
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-username { font-size: 13px; font-weight: 600; color: var(--chr-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-role { font-size: 11px; color: var(--chr-dim); text-transform: capitalize; }
.sidebar-logout { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--chr-dim); transition: all var(--ease); flex-shrink: 0; }
.sidebar-logout:hover { background: var(--red-dim); color: var(--red); }

/* ── Main content ── */
.main-content { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; overflow-x: hidden; min-width: 0; }

/* ══════════════════════════════════════════════
   TOPBAR  (white, clean)
══════════════════════════════════════════════ */
.topbar {
  min-height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 8px 28px; gap: 16px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
  overflow: visible;
  flex-wrap: wrap;
  max-width: 100%;
}
.topbar-left { flex: 1; min-width: 0; }
.topbar-title { font-size: clamp(17px, 1.2vw + 14px, 20px); font-weight: 700; color: var(--txt); letter-spacing: -0.3px; line-height: 1.3; }
.topbar-subtitle { font-size: 13px; color: var(--txt-2); margin-top: 2px; line-height: 1.4; }
.topbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 1; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.topbar-pill { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12px; color: var(--txt-2); }
.topbar-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px rgba(24,168,94,0.5); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* ── Owner topbar notification bell ── */
.notif-bell-wrap { position: relative; }
.notif-bell-btn {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 17px; line-height: 1; position: relative; transition: background .15s;
}
.notif-bell-btn:hover { background: var(--surface-3); }
/* Sits mostly on top of the button face (not overhanging onto the topbar's
   own background), so a single border color reads cleanly against both —
   previously a -5px offset put part of the badge over .notif-bell-btn's
   --surface-2 background and part over .topbar's plain --surface, with a
   border color matching only one of the two (a visible mismatched seam). */
.notif-bell-badge {
  position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; display: flex; align-items: center; justify-content: center;
  line-height: 1; border: 2px solid var(--surface-2); box-sizing: border-box;
}
/* position:fixed (not absolute) — .topbar has overflow:hidden, which would
   clip an absolutely-positioned descendant no matter how high its z-index
   is set. Fixed positioning escapes that clip; exact placement is computed
   in JS from the bell button's bounding rect. */
.notif-dropdown {
  display: none; position: fixed; width: 330px; max-height: 420px;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); z-index: 9999;
}
.notif-dropdown.open { display: block; }
.notif-dropdown-head { padding: 12px 16px; font-size: 13px; font-weight: 800; color: var(--txt); border-bottom: 1px solid var(--border); }
.notif-empty { padding: 28px 16px; text-align: center; color: var(--txt-muted); font-size: 13px; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--border); text-decoration: none; transition: background .15s; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item-icon { font-size: 16px; flex-shrink: 0; }
/* flex:1 + min-width:0 — without this the title/sub block doesn't stretch
   to fill the row, so long titles overflow the dropdown instead of wrapping. */
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title { display: block; font-size: 13px; font-weight: 700; color: var(--txt); line-height: 1.4; overflow-wrap: break-word; }
.notif-item-sub { display: block; font-size: 11.5px; color: var(--txt-muted); margin-top: 2px; }

/* ── Live-update pulse + toast (owner part "comes alive" without a reload) ── */
@keyframes notifBellPulse {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  60%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.notif-bell-btn.pulse { animation: notifBellPulse .5s ease; }
.nav-badge.pulse { animation: notifBellPulse .5s ease; }

#liveToastStack {
  position: fixed; top: 18px; right: 18px; z-index: 10000;
  display: flex; flex-direction: column; gap: 10px; max-width: 340px;
}
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
.live-toast {
  display: flex; align-items: flex-start; gap: 10px; background: var(--surface); color: var(--txt);
  border: 1px solid var(--border); border-left: 4px solid var(--gold); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 12px 14px; text-decoration: none; cursor: pointer;
  animation: toastSlideIn .25s ease; transition: opacity .3s, transform .3s;
}
.live-toast .lt-icon { font-size: 18px; flex-shrink: 0; }
.live-toast .lt-body { flex: 1; min-width: 0; }
.live-toast .lt-title { display: block; font-size: 13px; font-weight: 700; color: var(--txt); line-height: 1.4; }
.live-toast .lt-sub { display: block; font-size: 11.5px; color: var(--txt-muted); margin-top: 2px; }
.live-toast.leaving { opacity: 0; transform: translateX(24px); }
.menu-toggle-btn { display: none; width: 36px; height: 36px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; font-size: 18px; color: var(--txt-2); }

/* ── Page body ── */
.page-body { flex: 1; padding: 28px; overflow-x: hidden; max-width: 100%; }

/* ══════════════════════════════════════════════
   STAT CARDS
══════════════════════════════════════════════ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; margin-bottom: 28px; max-width: 100%; }
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px; position: relative; overflow: hidden;
  transition: all var(--ease); box-shadow: var(--shadow-sm);
}
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.stat-card.gold::before  { background: var(--gold-lt); }
.stat-card.teal::before  { background: var(--teal); }
.stat-card.red::before   { background: var(--red); }
.stat-card.blue::before  { background: var(--blue); }
.stat-card.green::before { background: var(--green); }
.stat-card:hover { border-color: var(--border-focus); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { font-size: 12px; font-weight: 700; color: var(--txt-2); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 8px; }
.stat-value { font-size: clamp(24px, 2vw + 18px, 28px); font-weight: 800; color: var(--txt); letter-spacing: -0.5px; line-height: 1.1; font-family: 'JetBrains Mono', monospace; }
.stat-value.currency::before { content: '₵'; font-size: 17px; vertical-align: 3px; margin-right: 2px; color: var(--txt-muted); }
.stat-sub { font-size: 13px; color: var(--txt-muted); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.stat-sub .up { color: var(--green); }
.stat-sub .down { color: var(--red); }
.stat-icon { position: absolute; right: 18px; top: 18px; font-size: 26px; opacity: 0.08; }

/* ══════════════════════════════════════════════
   CARD
══════════════════════════════════════════════ */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); max-width: 100%; }
.card-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-title { font-size: 15px; font-weight: 700; color: var(--txt); display: flex; align-items: center; gap: 8px; }
.card-title-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.card-title-icon.gold   { background: var(--gold-dim); }
.card-title-icon.teal   { background: var(--teal-dim); }
.card-title-icon.blue   { background: var(--blue-dim); }
.card-title-icon.red    { background: var(--red-dim); }
.card-title-icon.green  { background: var(--green-dim); }
.card-title-icon.purple { background: var(--purple-dim); }
.card-body { padding: 20px; }
.card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 13px; color: var(--txt-2); line-height: 1.5; }

/* ══════════════════════════════════════════════
   DATA TABLE  — crisp, legible, light
══════════════════════════════════════════════ */
.table-wrap,
.table-responsive { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

/* Default <th> styling — covers tables that use <th> as a plain row-label
   in the first column (no <thead>), e.g. detail/overview tables. Dark text
   on the table's normal light row background, so it's never accidentally
   white-on-white when there's no navy header bar underneath it. */
.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--txt-2);
  white-space: nowrap;
  border: none;
}

/* True column headers inside <thead> — navy background, white text, gold sort arrows */
.data-table thead {
  background: var(--th-bg);
}
.data-table thead th {
  font-size: 11.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--th-text);
  cursor: pointer;
  user-select: none;
  transition: background var(--ease);
}
.data-table thead th:hover { background: var(--navy-5); }
.data-table thead th.sort-asc::after  { content: ' ↑'; color: var(--gold-lt); }
.data-table thead th.sort-desc::after { content: ' ↓'; color: var(--gold-lt); }

/* Body — alternating rows, soft horizontal lines */
.data-table tbody tr:nth-child(odd)  { background: var(--td-odd); }
.data-table tbody tr:nth-child(even) { background: var(--td-even); }
.data-table tbody tr { transition: background var(--ease); border-bottom: 1px solid var(--td-border); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--td-hover) !important; }

.data-table td {
  padding: 12px 16px;
  color: var(--txt);
  vertical-align: middle;
  line-height: 1.5;
}

/* Tight checkbox column */
.data-table th:first-child,
.data-table td:first-child { padding: 12px 8px 12px 14px; width: 38px; }

/* Status row tints for receipts */
.paid-full  td { background: rgba(24,168,94,0.05) !important; }
.paid-part  td { background: rgba(212,148,10,0.06) !important; }
.paid-none  td { background: rgba(214,59,81,0.05) !important; }
.paid-full:hover td,
.paid-part:hover td,
.paid-none:hover td { background: var(--td-hover) !important; }

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap;
  line-height: 1.3;
}
.badge-gold   { background: rgba(212,148,10,0.12);   color: #8a5c00; border: 1px solid rgba(212,148,10,0.28); }
.badge-green  { background: rgba(24,168,94,0.11);    color: #0d6e40; border: 1px solid rgba(24,168,94,0.25); }
.badge-red    { background: rgba(214,59,81,0.10);    color: #a8202e; border: 1px solid rgba(214,59,81,0.22); }
.badge-blue   { background: rgba(40,114,240,0.10);   color: #174ab8; border: 1px solid rgba(40,114,240,0.22); }
.badge-teal   { background: rgba(12,158,120,0.10);   color: #065e47; border: 1px solid rgba(12,158,120,0.22); }
.badge-purple { background: rgba(111,79,192,0.10);   color: #4c2e96; border: 1px solid rgba(111,79,192,0.22); }
.badge-orange { background: rgba(224,114,48,0.10);   color: #8a3800; border: 1px solid rgba(224,114,48,0.22); }
.badge-indigo { background: rgba(79,70,229,0.10);   color: #3730a3; border: 1px solid rgba(79,70,229,0.22); }
.badge-rose   { background: rgba(244,63,94,0.10);   color: #9f1239; border: 1px solid rgba(244,63,94,0.22); }
.badge-pink   { background: rgba(219,39,119,0.10);  color: #9d174d; border: 1px solid rgba(219,39,119,0.22); }
.badge-muted  { background: var(--surface-2); color: var(--txt-muted); border: 1px solid var(--border); }

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--radius-sm);
  font-weight: 600; font-size: 14px; cursor: pointer;
  transition: all var(--ease); border: 1px solid transparent;
  white-space: nowrap; line-height: 1.3;
  letter-spacing: 0.01em;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn svg, .btn .btn-icon { width: 14px; height: 14px; }

.btn-primary   { background: var(--btn-primary-bg, var(--blue));  color: var(--btn-primary-txt, #fff); border-color: var(--btn-primary-bg, var(--blue)); box-shadow: 0 2px 8px rgba(40,114,240,0.28); }
.btn-primary:hover   { filter: brightness(0.9); box-shadow: 0 4px 14px rgba(40,114,240,0.38); }

.btn-secondary { background: var(--surface); color: var(--txt-2); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-3); color: var(--txt); border-color: #aab8d2; }

.btn-danger  { background: var(--red-dim);   color: var(--red);   border-color: rgba(214,59,81,0.25); }
.btn-danger:hover  { background: var(--red);   color: #fff; box-shadow: 0 2px 8px rgba(214,59,81,0.3); }

.btn-warning { background: rgba(232,140,0,.12); color: #b86c00; border-color: rgba(232,140,0,.3); }
.btn-warning:hover { background: #e88c00; color: #fff; box-shadow: 0 2px 8px rgba(232,140,0,.3); }

.btn-success { background: var(--green-dim); color: #0d6e40; border-color: rgba(24,168,94,0.25); }
.btn-success:hover { background: var(--green); color: #fff; }

.btn-teal    { background: var(--teal-dim);  color: #065e47; border-color: rgba(12,158,120,0.25); }
.btn-teal:hover    { background: var(--teal);  color: #fff; }

.btn-blue    { background: var(--blue-dim);  color: #174ab8; border-color: rgba(40,114,240,0.25); }
.btn-blue:hover    { background: var(--blue);  color: #fff; }

.btn-gold    { background: var(--gold-lt); color: #4a2800; border-color: var(--gold-lt); font-weight: 700; }
.btn-gold:hover    { background: var(--gold);  box-shadow: 0 2px 10px var(--gold-glow); }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-lg { padding: 13px 26px; font-size: 16px; }
.btn-icon-only { width: 32px; height: 32px; padding: 0; justify-content: center; }

/* ══════════════════════════════════════════════
   FORMS  — light, warm, inviting
══════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }

.form-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--label-col);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1.4;
}
.form-label .required { color: var(--red); margin-left: 3px; }

.form-control {
  background: var(--input-bg);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--input-text);
  font-size: 15px;
  line-height: 1.5;
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
  width: 100%;
}
.form-control:hover { border-color: #a8bbd6; }
.form-control:focus {
  outline: none;
  border-color: var(--input-focus);
  background: #fafcff;
  box-shadow: 0 0 0 3px rgba(40,114,240,0.14);
}
.form-control::placeholder { color: var(--input-ph); }
.form-control option { background: #fff; color: var(--input-text); }
textarea.form-control { resize: vertical; min-height: 90px; line-height: 1.5; }
.form-hint { font-size: 12.5px; color: var(--txt-2); margin-top: 2px; line-height: 1.4; }

/* ── Password visibility toggle (see togglePasswordField() in js/main.js) ── */
.pw-wrap { position: relative; display: block; }
.pw-wrap input.form-control { padding-right: 42px; }
.pw-toggle-btn {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 30px; height: 30px; min-width: 30px; max-width: 30px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-sm);
    cursor: pointer; font-size: 14px; line-height: 1; opacity: 0.75; z-index: 2;
    transition: opacity .15s, background .15s, border-color .15s; box-shadow: none;
}
.pw-toggle-btn:hover, .pw-toggle-btn:focus-visible { opacity: 1; background: var(--surface-3); border-color: var(--border); }
.pw-toggle-btn:focus-visible { outline: 2px solid var(--input-focus); outline-offset: 1px; }

/* Form sections with coloured left accent */
.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  overflow: hidden;
}
.form-section-title {
  font-size: 14px; font-weight: 700; color: var(--txt);
  margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--surface-3);
  display: flex; align-items: center; gap: 8px;
}
.form-section-title .ico {
  width: 24px; height: 24px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.form-section-title .ico.blue   { background: var(--blue-dim); }
.form-section-title .ico.green  { background: var(--green-dim); }
.form-section-title .ico.gold   { background: var(--gold-dim); }
.form-section-title .ico.teal   { background: var(--teal-dim); }

/* Coloured input accents by context */
.form-control.inp-green:focus  { border-color: var(--green);  box-shadow: 0 0 0 3px rgba(24,168,94,0.13); }
.form-control.inp-gold:focus   { border-color: var(--gold-lt); box-shadow: 0 0 0 3px rgba(212,148,10,0.13); }
.form-control.inp-teal:focus   { border-color: var(--teal);   box-shadow: 0 0 0 3px rgba(12,158,120,0.13); }

/* ══════════════════════════════════════════════
   FILTER BAR
══════════════════════════════════════════════ */
.filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  overflow: visible;
}
.filter-bar .form-control { min-width: 130px; flex: 1; padding: 9px 13px; font-size: 14px; }
.filter-bar .search-wrap { position: relative; flex: 2; min-width: 0; }
.filter-bar .search-wrap input { padding-left: 36px; }
.filter-bar .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--txt-muted); font-size: 14px; pointer-events: none; }

/* ══════════════════════════════════════════════
   AVATAR
══════════════════════════════════════════════ */
.avatar {
  width: 36px; height: 36px; border-radius: 9px; object-fit: cover;
  background: var(--blue-dim); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #174ab8;
  border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; text-transform: uppercase;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ══════════════════════════════════════════════
   AMOUNT / MONO TEXT
══════════════════════════════════════════════ */
.mono { font-family: 'JetBrains Mono', monospace; }
.amount-green { color: #0d6e40; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.amount-red   { color: #a8202e; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.amount-gold  { color: #8a5c00; font-weight: 600; font-family: 'JetBrains Mono', monospace; }
.amount-muted { color: var(--txt-muted); font-family: 'JetBrains Mono', monospace; }

/* ══════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════ */
.alert { padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; line-height: 1.5; max-width: 100%; word-break: break-word; }
.alert-success { background: rgba(24,168,94,0.08);  color: #0d6e40; border: 1px solid rgba(24,168,94,0.22); }
.alert-danger  { background: rgba(214,59,81,0.08);  color: #a8202e; border: 1px solid rgba(214,59,81,0.22); }
.alert-info    { background: rgba(40,114,240,0.08); color: #174ab8; border: 1px solid rgba(40,114,240,0.22); }
.alert-warning { background: rgba(212,148,10,0.10); color: #8a5c00; border: 1px solid rgba(212,148,10,0.25); }

/* ══════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════ */
.pagination { display: flex; align-items: center; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.page-info { font-size: 13px; color: var(--txt-2); margin-right: auto; line-height: 1.4; }
.page-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--txt-2); transition: all var(--ease); }
.page-btn:hover { background: var(--surface-3); color: var(--txt); border-color: var(--border-strong); }
.page-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 700; box-shadow: 0 2px 6px rgba(40,114,240,0.3); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,28,50,0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; transform: translateY(20px) scale(0.97); transition: transform 0.2s; box-shadow: var(--shadow-lg); }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-lg { max-width: 800px; }
.modal-sm { max-width: 420px; }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 17px; font-weight: 700; color: var(--txt); line-height: 1.3; }
.modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; cursor: pointer; color: var(--txt-muted); transition: all var(--ease); }
.modal-close:hover { background: var(--red-dim); color: var(--red); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }

/* ══════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════ */
.progress-wrap { background: var(--surface-3); border-radius: 4px; height: 7px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.progress-bar.gold  { background: var(--gold-lt); }
.progress-bar.green { background: var(--green); }
.progress-bar.red   { background: var(--red); }
.progress-bar.blue  { background: var(--blue); }

/* ══════════════════════════════════════════════
   RECEIPT CARD / NUMBER
══════════════════════════════════════════════ */
.receipt-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; display: flex; gap: 20px; align-items: flex-start; transition: all var(--ease); box-shadow: var(--shadow-sm); }
.receipt-card:hover { border-color: var(--border-focus); box-shadow: var(--shadow-md); }
.receipt-number { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--blue); font-weight: 600; }

/* ══════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════ */
.empty-state { text-align: center; padding: 60px 20px; color: var(--txt-2); line-height: 1.6; }
.empty-state-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.4; }
.empty-state-title { font-size: 17px; font-weight: 700; color: var(--txt); margin-bottom: 8px; }

/* ══════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════ */
.skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, #e6eaf4 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: 6px; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════════
   TOOLTIP  — always visible, always above everything
══════════════════════════════════════════════ */

/* Every [data-tip] element is a positioning anchor */
[data-tip] { position: relative; }

/* When the JS tooltip engine is active (html.js-tips, set by js/main.js),
   it renders one position:fixed bubble on <body> that no table header,
   sticky element, or overflow ancestor can cover — so the CSS pseudo
   bubbles below must not double-render underneath it. */
html.js-tips [data-tip]::after,
html.js-tips [data-tip]::before { display: none !important; }

/* The tooltip itself: absolutely positioned above the element.
   overflow:visible on all ancestor wrappers is set below. */
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-3, #122d57);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 99999;   /* higher than modals, sidebars, everything */
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
/* Small arrow */
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy-3, #122d57);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 99999;
}
[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before { opacity: 1; }

/* ── Action-group tooltips: appear above the button (same as global default).
   Explicitly reset any left/right overrides so the tooltip shows on top. ── */
.actions-group [data-tip]::after {
  bottom: calc(100% + 7px);
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(4px);
}
.actions-group [data-tip]::before {
  bottom: calc(100% + 1px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border-top-color: var(--navy-3, #122d57);
  border-left-color: transparent;
}
.actions-group [data-tip]:hover::after {
  transform: translateX(-50%) translateY(0);
}
.actions-group [data-tip]:hover::before { opacity: 1; }

/* ── Break out of all overflow:hidden/auto ancestors ─────────────────
   The table, card, and page-body wrappers all clip overflow:hidden.
   We make only the last-mile containers overflow:visible so the
   absolutely-positioned tooltip can escape without JavaScript. */
.table-wrap          { overflow: visible; }
.table-wrap table    { overflow: visible; border-collapse: collapse; }

/* thead paints on top of tbody by default in the document flow.
   Give it an explicit z-index of 1 so we can push tooltip-bearing
   cells ABOVE it with z-index 2. */
.table-wrap thead    { position: relative; z-index: 1; }
.table-wrap th       { overflow: visible; position: relative; }

/* tbody cells that show tooltips must paint above thead */
.table-wrap tbody td { position: relative; z-index: 2; }

/* While a tooltip is hovered, lift ITS cell above every sibling th/td —
   without this, every td shares z-index 2 and whichever cell comes later
   in the DOM paints over the open tooltip bubble, hiding it under the
   neighbouring row/header. The hovered anchor must always win. */
.table-wrap tbody td:hover,
.table-wrap tbody tr:hover td { z-index: 9990; }
.table-wrap th:hover          { z-index: 9991; }
[data-tip]:hover              { z-index: 9992; }

.actions-group       { overflow: visible; position: relative; }
/* Cards that contain tooltips must not clip them.
   :has() is broadly supported (Chrome 105+, Firefox 121+, Safari 15.4+).
   Older browsers fall back to the earlier overflow:hidden and tooltips
   won't show — acceptable since those browsers are < 5% of traffic. */
.card:has([data-tip]) { overflow: visible; }

/* The horizontal scroll bar lives on the page-body now, not the table-wrap */
.page-body { overflow-x: auto; }
.data-table { min-width: max-content; }

/* ══════════════════════════════════════════════
   MISC COMPONENTS
══════════════════════════════════════════════ */
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.divider-label { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-muted); }
.divider-label::before, .divider-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.actions-group { display: flex; gap: 6px; align-items: center; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 12px; flex-wrap: wrap; max-width: 100%; }
.section-title { font-size: clamp(18px, 1.4vw + 14px, 22px); font-weight: 800; color: var(--txt); letter-spacing: -0.3px; line-height: 1.3; }
.section-subtitle { font-size: 14px; color: var(--txt-2); margin-top: 3px; line-height: 1.5; }

.two-col   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.three-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; }

.tab-nav { display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; width: fit-content; margin-bottom: 20px; }
.tab-btn { padding: 8px 18px; border-radius: 6px; font-size: 14px; font-weight: 600; color: var(--txt-muted); cursor: pointer; transition: all var(--ease); border: none; background: none; white-space: nowrap; }
.tab-btn:hover { color: var(--txt-2); }
.tab-btn.active { background: var(--surface); color: var(--txt); box-shadow: var(--shadow-sm); border: 1px solid var(--border); }

.student-photo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); flex-shrink: 0; }
.student-name-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.student-name-cell .name { font-weight: 600; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.student-name-cell .sub  { font-size: 13px; color: var(--txt-2); line-height: 1.3; }

/* ══════════════════════════════════════════════
   LOGIN PAGE  (keeps dark theme)
   Responsive: 280px → ultrawide
══════════════════════════════════════════════ */
.login-page {
  min-height: 100vh;
  display: flex;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}
.login-page::before {
  content: ''; position: fixed; top: -200px; left: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,148,10,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.login-page::after {
  content: ''; position: fixed; bottom: -200px; right: -200px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(12,158,120,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Left panel — form area */
.login-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 3vw + 4px, 40px) clamp(6px, 2vw + 4px, 40px);
  position: relative;
  min-width: 0;
}

/* Card container — max-width scales with the viewport instead of sitting at
   a fixed 420px, so the card actually grows on large/ultrawide screens
   instead of looking stranded in a huge empty panel. width:100% (with
   .login-left's own responsive padding) already handles the shrink side
   down to very small screens; this clamp only governs the upper bound. */
.login-card {
  width: 100%;
  max-width: clamp(340px, 34vw + 60px, 640px);
  background: var(--navy-3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: clamp(8px, 2vw + 4px, var(--radius-lg));
  padding: clamp(16px, 4vw + 8px, 40px) clamp(12px, 3vw + 6px, 40px);
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.5s ease;
  overflow-x: hidden;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* Logo mark */
.login-logo {
  width: clamp(34px, 4vw + 20px, 52px);
  height: clamp(34px, 4vw + 20px, 52px);
  background: var(--gold-lt);
  border-radius: clamp(8px, 2vw + 4px, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 2vw + 10px, 26px);
  margin-bottom: clamp(12px, 2vw + 6px, 24px);
  box-shadow: 0 0 28px var(--gold-glow);
}

/* Typography */
.login-card { color: var(--chr-txt); }
.login-heading {
  font-size: clamp(22px, 2.5vw + 16px, 30px);
  font-weight: 800;
  color: var(--chr-txt);
  letter-spacing: -0.5px;
  margin-bottom: 8px;
  line-height: 1.2;
}
.login-subheading {
  font-size: clamp(14px, 1vw + 11px, 16px);
  color: var(--chr-2);
  margin-bottom: clamp(14px, 3vw + 6px, 32px);
  line-height: 1.5;
}

/* Login form inputs are dark */
.login-card .form-control {
  background: var(--navy-4);
  border-color: rgba(255,255,255,0.1);
  color: var(--chr-txt);
  font-size: 16px; /* 16px prevents iOS zoom on focus */
}
.login-card .form-control:focus {
  border-color: var(--gold-lt);
  background: var(--navy-5);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.login-card .form-control::placeholder { color: var(--chr-dim); }
.login-card .form-label { color: var(--chr-2); font-size: 13.5px; }

/* Alerts on the dark login card need light text for contrast */
.login-card .alert-danger  { background: rgba(214,59,81,0.16);  color: #ff9aa8; border-color: rgba(214,59,81,0.35); }
.login-card .alert-success { background: rgba(24,168,94,0.16);  color: #6fe3ab; border-color: rgba(24,168,94,0.35); }
.login-card .alert-info    { background: rgba(40,114,240,0.16); color: #9cc0ff; border-color: rgba(40,114,240,0.35); }
.login-card a { color: var(--gold-lt); font-weight: 600; }
.login-card a:hover { color: var(--gold); text-decoration: none; }

/* Right panel — branding & stats */
.login-right {
  width: 42%;
  background: var(--navy-3);
  border-left: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  position: relative;
}
.login-school-name {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 900;
  color: var(--gold-lt);
  letter-spacing: -1px;
  text-align: center;
  line-height: 1.1;
  margin-top: 20px;
  word-break: break-word;
}
.login-school-sub {
  font-size: 14px;
  color: var(--chr-2);
  text-align: center;
  margin-top: 8px;
}
.login-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
  width: 100%;
  max-width: 320px;
}
.login-stat {
  background: var(--navy-4);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.login-stat-value { font-size: 24px; font-weight: 800; color: var(--gold-lt); }
.login-stat-label { font-size: 11px; color: var(--chr-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* ── Login Responsive ─────────────────────── */
/* Right panel hides on smaller screens */
@media (max-width: 1024px) {
  .login-right { display: none; }
  .login-left  { justify-content: center; }
}

/* Tablet / Mobile Overrides */
@media (max-width: 768px) {
  .login-page { overflow-y: auto; }
}
@media (max-width: 375px) {
  .login-card .form-label { font-size: 12px; }
  .login-card .btn-lg { padding: clamp(11px, 2vw + 4px, 16px) clamp(16px, 3vw + 6px, 24px); font-size: clamp(14px, 1vw + 11px, 16px); }
  .login-card .form-control { padding: clamp(10px, 1vw + 6px, 14px) 12px 10px 38px; font-size: 16px; }
  .login-card .form-group { margin-bottom: clamp(12px, 2vw + 6px, 20px) !important; }
}
@media (max-width: 280px) {
  .login-brand-dots { margin: 16px 0; }
}

/* ══════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════ */
@media print {
  .sidebar, .topbar, .filter-bar, .actions-group, .btn, .pagination { display: none !important; }
  .main-content { margin-left: 0; }
  body { background: white; color: black; }
  .data-table th { background: #1c2e4a !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .data-table tbody tr:nth-child(even) td { background: #f0f4ff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — 375px to ultrawide
══════════════════════════════════════════════ */

/* ── Ultrawide (≥1600px) ── */
@media (min-width: 1600px) {
  .page-body { padding: 32px 40px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
}

/* ── Tablet landscape (≤1200px) ── */
@media (max-width: 1200px) {
  :root { --sidebar-w: 240px; }
  .login-right { display: none; }
  .login-left  { justify-content: center; }
}

/* ── Tablet portrait (≤1024px) ── */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
  .page-body { padding: 20px; }
  .stats-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
  .topbar-right .btn-sm { font-size: 11px; padding: 5px 10px; }
}

/* ── Mobile (≤768px) — sidebar collapses to drawer ── */
@media (max-width: 768px) {
  /* Sidebar becomes off-canvas drawer */
  .sidebar {
    transform: translateX(-100%);
    z-index: 300;
    width: 280px !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.25);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  }
  .sidebar.open { transform: translateX(0); }

  /* Dim overlay behind open sidebar */
  .sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.52);
    z-index: 299;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }
  .sidebar-overlay.open { display: block; }

  /* Main content fills full width */
  .main-content { margin-left: 0 !important; }

  /* Show hamburger */
  .menu-toggle-btn { display: flex !important; }

  /* ── Topbar: wrap actions below title ── */
  .topbar {
    padding: 10px 14px;
    height: auto;
    min-height: var(--header-h);
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-left { flex: 1 1 auto; min-width: 0; }
  .topbar-title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-subtitle { display: none; }
  .topbar-pill { display: none; }
  .topbar-right {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: wrap;
    width: 100%;
    min-width: 0;
  }
  .topbar-right .btn { font-size: 13px; padding: 6px 12px; }

  /* Page body */
  .page-body { padding: 14px; }

  /* Fixed inline max-width wrappers (e.g. 520-960px form/content columns,
     used across ~48 templates for their central content column) can still
     exceed a tablet-portrait viewport before the 480px tier below kicks in —
     neutralize them here too so every page, owner and tenant alike, goes
     full width with just .page-body's own small padding as the margin. */
  .page-body [style*="max-width"]:not([style*="nowrap"]) { max-width: 100% !important; }

  /* A few shared containers that never shrank their padding at any
     breakpoint before now — same "full width, tiny margin" treatment. */
  .form-section { padding: 16px; }
  .card-footer   { padding: 10px 14px; }
  .receipt-card  { padding: 14px 16px; }
  .inv-card, .panel { padding: 14px; }

  /* Stat grid: 2 columns */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 20px; }

  /* Cards */
  .card-header { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .card-body { padding: 16px; }
  .card-header .topbar-right { flex-wrap: wrap; }

  /* Tables — horizontal scroll on mobile */
  .table-wrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 560px; }
  .data-table th, .data-table td { padding: 10px 12px; font-size: 13px; }

  /* Filter bars — wrap nicely */
  .filter-bar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .filter-bar .search-wrap { flex: 1 1 100%; min-width: 0; }
  .filter-bar .form-control { flex: 1 1 calc(50% - 4px); min-width: 100px; }

  /* Section headers */
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-header > div:last-child { width: 100%; }

  /* Grid layouts collapse */
  .two-col, .three-col { grid-template-columns: 1fr !important; }

  /* Form grids */
  .form-grid, .fee-grid { grid-template-columns: 1fr !important; }
  .fee-grid .s2 { grid-column: span 1 !important; }

  /* Pagination */
  .pagination { flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
  .page-info { width: 100%; margin-bottom: 4px; }
  .page-btn { width: 30px; height: 30px; font-size: 12px; }

  /* Action buttons row — scrollable on mobile */
  .actions-group {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .actions-group .btn-icon-only {
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
  }

  /* Fee footer buttons full-width */
  .fee-footer { flex-wrap: wrap; }
  .fee-footer .btn { flex: 1 1 140px; justify-content: center; }

  /* Alert banners */
  .alert { font-size: 13px; padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Tab nav scrollable */
  .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; white-space: nowrap; }
  .tab-btn { flex-shrink: 0; }

  /* Modal full-width on mobile */
  .modal { max-width: calc(100vw - 24px); max-height: calc(100vh - 48px); border-radius: var(--radius); }
  .modal-header { padding: 16px 18px; }
  .modal-body { padding: 18px; }
  .modal-footer { padding: 14px 18px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 120px; justify-content: center; }

  /* Confirm dialog / danger modal */
  #dmBox { max-width: calc(100vw - 32px) !important; }

  /* Chat layout: sidebar + main becomes stacked */
  .chat-layout { flex-direction: column !important; }
  .chat-sidebar, .chat-users-panel { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: 240px; border-right: none !important; border-bottom: 1px solid var(--border); }
  .chat-main { height: calc(100vh - 380px) !important; }

  /* Flash message padding fix when no sidebar */
  .flash-wrap { padding: 0 14px; padding-top: 12px; }

  /* Form section tighter */
  .form-section { padding: 16px; }
  .form-section-title { font-size: 12px; margin-bottom: 14px; }

  /* Inline grid overrides for templates that use inline styles */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Receipt cards stack */
  .receipt-card { flex-direction: column; gap: 12px; }

  /* Student name cell tighter */
  .student-photo { width: 32px; height: 32px; border-radius: 8px; }
  .student-name-cell .name { font-size: 13px; }
  .student-name-cell .sub  { font-size: 11px; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  /* Topbar even tighter */
  .topbar { padding: 8px 10px; min-height: 52px; }
  .topbar-title { font-size: 16px; }
  .menu-toggle-btn { width: 36px; height: 36px; font-size: 16px; }

  /* Topbar actions: stack if many */
  .topbar-right { gap: 4px; }
  .topbar-right .btn { font-size: 12px; padding: 5px 10px; }

  /* Stat cards: 1 column */
  .stats-grid { grid-template-columns: 1fr; }

  /* Table scroll hint */
  .table-wrap::before {
    content: '← scroll →';
    display: block;
    font-size: 10px;
    color: var(--txt-muted);
    text-align: center;
    padding: 4px 0;
    letter-spacing: 0.5px;
  }

  /* Filter bar full-column */
  .filter-bar .form-control { flex: 1 1 100%; }

  /* Reduce page padding */
  .page-body { padding: 10px; }

  /* Cards tighter */
  .card-header { padding: 10px 14px; }
  .card-body { padding: 14px; }
  .card-title { font-size: 14px; }

  /* Confirm dialog full-width */
  .cfm-box, #dmBox { width: 96% !important; max-width: none !important; }

  /* Student dropdown */
  .stu-dd { max-height: 200px; }

  /* Badges truncate */
  .badge { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Section title */
  .section-title { font-size: 17px; }

  /* Buttons minimum touch target */
  .btn { min-height: 36px; }
  .btn-icon-only { width: 36px; height: 36px; min-width: 36px; }

  /* Sidebar brand shrink */
  .sidebar-brand { padding: 14px 12px; }
  .sidebar-brand-text { font-size: 14px; }

  /* Chat on small mobile */
  .chat-sidebar, .chat-users-panel { max-height: 180px; }
}

/* ── Very small / iPhone SE, Galaxy Fold (≤375px) ── */
@media (max-width: 375px) {
  .page-body { padding: 8px; }
  .card { border-radius: 8px; }
  .stats-grid { gap: 8px; }
  .stat-card { padding: 12px; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 10px; }
  .topbar { padding: 6px 8px; }
  .topbar-title { font-size: 15px; }
  .data-table { min-width: 440px; }
  .data-table th, .data-table td { padding: 8px 10px; font-size: 12.5px; }

  /* Form controls 16px prevents iOS auto-zoom */
  .form-control { padding: 10px 12px; font-size: 16px; }
  .form-label { font-size: 12px; }

  /* Buttons */
  .btn { font-size: 13px; padding: 8px 14px; }
  .btn-sm { padding: 6px 12px; font-size: 12px; }
  .btn-icon-only { width: 34px; height: 34px; min-width: 34px; }

  /* Actions group tighter */
  .actions-group { gap: 3px; }

  /* Modal even tighter */
  .modal { border-radius: 10px; }
  .modal-header { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-title { font-size: 15px; }
  #dmBox { border-radius: 12px !important; }

  /* Filter bar */
  .filter-bar { padding: 8px 10px; gap: 6px; }

  /* Tab buttons scroll */
  .tab-btn { padding: 7px 14px; font-size: 13px; }

}

/* ── Ultra small (≤320px) — Galaxy Fold closed ── */
@media (max-width: 320px) {
  .page-body { padding: 6px; }
  .topbar-title { font-size: 14px; }
  .topbar-right .btn { font-size: 11px; padding: 4px 8px; }
  .stat-value { font-size: 16px; }
  .card-header { padding: 8px 10px; }
  .card-body { padding: 10px; }
  .form-grid { gap: 14px; }
  .data-table { min-width: 400px; }
}

/* ══════════════════════════════════════════════
   EMOJI / ICON CONSISTENCY
   Ensure emoji icons render consistently across
   all platforms (iOS, Android, Windows, Mac)
══════════════════════════════════════════════ */
.nav-icon,
.card-title-icon,
.stat-icon,
.form-section-title .ico,
.btn-icon-only,
.empty-state-icon {
  font-style: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}

/* Touch-friendly: ensure all interactive elements meet 44px minimum */
@media (pointer: coarse) {
  .nav-item { min-height: 44px; }
  .btn-icon-only { min-width: 40px; min-height: 40px; }
  .page-btn { min-width: 40px; min-height: 40px; }
  .form-control { min-height: 44px; }
  .tab-btn { min-height: 40px; }
  .data-table th, .data-table td { padding: 10px; }
}

/* ══════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════ */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--txt-muted); }
.text-small   { font-size: 12px; }
.text-bold    { font-weight: 700; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8   { gap: 8px; }
.gap-12  { gap: 12px; }
.gap-16  { gap: 16px; }
.mt-4    { margin-top: 4px; }
.mt-8    { margin-top: 8px; }
.mt-12   { margin-top: 12px; }
.mt-16   { margin-top: 16px; }
.mt-20   { margin-top: 20px; }
.mt-28   { margin-top: 28px; }
.mb-12   { margin-bottom: 12px; }
.mb-20   { margin-bottom: 20px; }
.mb-28   { margin-bottom: 28px; }
.w-full  { width: 100%; }
.hidden  { display: none !important; }
.relative { position: relative; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap  { white-space: nowrap; }

/* ── Extended utilities for payroll ── */
.text-green { color: var(--green); }
.text-red   { color: var(--red);   }

.form-control-sm {
  padding: 5px 9px;
  font-size: 12.5px;
  height: auto;
  border-radius: var(--radius-sm);
}

.btn-green {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.btn-green:hover {
  background: #15944f;
  border-color: #15944f;
}
/* ══════════════════════════════════════════════
   SMALL-SCREEN HARDENING (300px – 640px)
   Dozens of templates lay out forms/stats with inline
   `style="display:grid;grid-template-columns:1fr 1fr…"`. Rather than editing
   every template, these attribute-selector overrides collapse ALL inline
   multi-column grids to a single column on phones (auto-fit/auto-fill grids
   are excluded — they already collapse by themselves).
══════════════════════════════════════════════ */
@media (max-width: 640px) {
  .page-body [style*="grid-template-columns"]:not([style*="auto-f"]),
  .modal-backdrop [style*="grid-template-columns"]:not([style*="auto-f"]),
  .modal-box [style*="grid-template-columns"]:not([style*="auto-f"]),
  .del-overlay [style*="grid-template-columns"]:not([style*="auto-f"]) {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  /* Inline min-widths on filter controls / dropdown wrappers force horizontal
     overflow at 300–400px — release them; flex/grid wrapping takes over. */
  .page-body .filter-bar [style*="min-width"],
  .page-body form [style*="min-width"],
  .modal-box [style*="min-width"] { min-width: 0 !important; }
  /* Inline fixed max-widths (e.g. 480–760px card columns) may exceed the
     viewport minus padding — cap them. */
  .page-body [style*="max-width"]:not([style*="nowrap"]) { max-width: 100% !important; }
  /* Long unbroken strings (references, emails, hashes) must never force
     a page-wide horizontal scroll. */
  .page-body .mono, .page-body code { overflow-wrap: anywhere; }

  /* .modal-box is redefined per-template (40+ separate <style> blocks, each
     with its own fixed 24-32px padding and 480-780px max-width) rather than
     shared here — so every one of them needs an !important override to go
     full width with a tiny margin on phones, same fix already applied to
     .signup-card. Centralizing this one rule covers every popup form across
     the whole app (owner and tenant) without editing 40+ files individually. */
  .modal-box { padding: 16px !important; width: 96% !important; max-width: none !important; }
  .form-section { padding: 12px; }
}
@media (max-width: 360px) {
  .page-body { padding: 6px; }
  .topbar-pill { display: none; }
  .data-table th, .data-table td { padding: 6px 8px; font-size: 12px; }
  .modal-box { padding: 16px !important; }
  .quick-links { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}