/* ============================================================================
   Eduwise Admin — Prototype
   Academic Navy & Gold design system. Fresh, minimal, elegant.
   ========================================================================== */

:root {
  /* Brand ramps */
  --navy-50:#eef1f6; --navy-100:#d7deea; --navy-200:#aebed2; --navy-300:#8198b6;
  --navy-400:#506c92; --navy-500:#2f4a73; --navy-600:#26395f; --navy-700:#1b2a4a;
  --navy-800:#142036; --navy-900:#0d1626;
  --gold-50:#fbf7ec; --gold-100:#f4ecd6; --gold-200:#e8d6a6; --gold-300:#d9bd74;
  --gold-400:#c8a24b; --gold-500:#b08c3a; --gold-600:#8e6f2c;
  --grey-50:#fbfaf7; --grey-100:#f5f2eb; --grey-200:#e7e3da; --grey-300:#d7d2c6;
  --grey-400:#a9a294; --grey-500:#7a7466; --grey-600:#5b5547;

  /* Semantic */
  --primary:var(--navy-700); --primary-hover:var(--navy-800);
  --accent:var(--gold-400); --on-accent:#241b07;
  --bg:var(--grey-50); --surface:#ffffff; --surface-2:var(--grey-100);
  --border:var(--grey-200); --text:#1a1f2b; --muted:#5b6473;
  --success:#2e7d5b; --success-bg:#e6f2ec;
  --warning:#b7791f; --warning-bg:#fbf1dd;
  --error:#b23a3a;   --error-bg:#f6e6e6;
  --info:#2a5b8c;    --info-bg:#e6eef6;

  /* Shape & depth */
  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px;
  --sh-sm:0 1px 2px rgba(20,25,40,.06),0 1px 3px rgba(20,25,40,.05);
  --sh-md:0 4px 12px rgba(20,25,40,.08),0 2px 4px rgba(20,25,40,.05);
  --sh-lg:0 16px 40px rgba(20,25,40,.16),0 4px 10px rgba(20,25,40,.08);

  /* Type */
  --font-head:"Fraunces",Georgia,"Times New Roman",serif;
  --font-body:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;

  --sidebar-w:280px; --rail-w:76px; --topbar-h:84px;
}

* { box-sizing:border-box; margin:0; padding:0; }

/* ---- Global icon sizing safety net ----
   Every icon defaults to 18px and never stretches. Container rules below override
   for specific contexts; intentionally-large spots are restored further down. */
svg.ic-svg { width:18px; height:18px; flex:0 0 auto; vertical-align:middle; }
td svg.ic-svg, .cell-user > svg.ic-svg { vertical-align:middle; }
/* feature icon tiles (rounded coloured squares) get a slightly larger glyph */
.ic-navy svg.ic-svg, .ic-gold svg.ic-svg, .ic-green svg.ic-svg, .ic-red svg.ic-svg { width:20px; height:20px; }
.map-ph svg.ic-svg { width:30px; height:30px; }
.gal-item .ph svg.ic-svg { width:30px; height:30px; }
.profile-head .pa svg.ic-svg { width:34px; height:34px; }
html,body { height:100%; }
body {
  font-family:var(--font-body); color:var(--text); background:var(--bg);
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5 { font-family:var(--font-head); font-weight:600; letter-spacing:-.01em; color:var(--text); line-height:1.2; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--gold-200); }

/* Scrollbars */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--grey-300); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:var(--grey-400); background-clip:padding-box; }

/* ============================ Layout ============================ */
.app { display:flex; min-height:100vh; }

/* The menu is a rail of domains plus a panel for the one you picked. The two
   together are the old sidebar width, so nothing downstream has to move. */
.sidebar {
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:linear-gradient(178deg,var(--navy-700),var(--navy-800) 60%,var(--navy-900));
  color:#c7d0de; height:100vh; position:sticky; top:0;
  display:flex; flex-direction:row; overflow:hidden;
}
.rail {
  width:var(--rail-w); flex:0 0 var(--rail-w); display:flex; flex-direction:column; align-items:center;
  padding:0 0 10px; background:rgba(0,0,0,.22); border-right:1px solid rgba(255,255,255,.06);
  overflow-y:auto; overscroll-behavior:contain;
}
.rail::-webkit-scrollbar { width:0; }
.rail-logo {
  width:36px; height:36px; border-radius:11px; margin:16px 0 14px;
  background:linear-gradient(135deg,var(--gold-300),var(--gold-500));
  display:grid; place-items:center; color:var(--navy-900); font-family:var(--font-head); font-weight:700; font-size:17px;
  box-shadow:0 2px 8px rgba(0,0,0,.25); flex:0 0 36px;
}
.rail-set { display:flex; flex-direction:column; align-items:center; gap:2px; width:100%; flex:0 0 auto; }
.rail-item {
  width:64px; border:0; background:none; cursor:pointer; font-family:inherit;
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 2px 7px;
  border-radius:12px; color:#96a4ba; transition:.15s; position:relative; flex:0 0 auto;
}
.rail-item svg { width:20px; height:20px; stroke-width:1.9; }
/* Sentence case, not uppercase. At this size caps are both harder to read and
   wider — 11px sentence case measures narrower than the 8.5px caps it replaces
   while being half again as large. The two-line box keeps every button the same
   height whether its label wraps or not. */
.rail-item span {
  font-size:11px; font-weight:600; letter-spacing:.005em; line-height:1.24;
  text-align:center; min-height:2.4em; display:flex; align-items:center; justify-content:center;
}
.rail-item:hover { color:#e4eaf3; background:rgba(255,255,255,.07); }
.rail-item.sel { background:rgba(255,255,255,.11); color:#fff; }
.rail-item.sel svg { color:var(--gold-300); }
/* A dot marks the section the current screen actually lives in, which is not
   always the section being browsed. */
.rail-item.here::after {
  content:""; position:absolute; top:7px; right:11px; width:5px; height:5px;
  border-radius:50%; background:var(--gold-400);
}
.rail-item.here.sel::after { display:none; }

.nav-panel { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.panel-head {
  font-family:var(--font-head); font-size:14.5px; font-weight:600; color:#fff;
  padding:13px 16px 4px;
}
.brand {
  display:flex; align-items:center; gap:12px; padding:17px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand .name { font-family:var(--font-head); color:#fff; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.brand .name small { display:block; font-family:var(--font-body); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-300); font-weight:600; margin-top:1px; }

.nav { flex:1; overflow-y:auto; padding:6px 10px 24px; }
.nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); }
.nav-group-label { font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#6b7891; font-weight:700; padding:16px 12px 7px; }
.nav-item {
  display:flex; align-items:center; gap:8px; padding:9px 11px; border-radius:9px;
  color:#aeb9cc; font-size:13.5px; font-weight:500; cursor:pointer; position:relative;
  transition:background .15s,color .15s; margin-bottom:1px;
}
.nav-item svg { width:17px; height:17px; flex:0 0 17px; stroke-width:1.9; opacity:.85; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#e8edf4; }
.nav-item.active { background:rgba(255,255,255,.10); color:#fff; }
.nav-item.active::before {
  content:""; position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:3px; height:22px; border-radius:0 3px 3px 0; background:var(--gold-400);
}
.nav-item.active svg { opacity:1; color:var(--gold-300); }
.nav-badge { margin-left:auto; font-size:9.5px; font-weight:700; background:var(--gold-400); color:var(--navy-900); padding:1px 6px; border-radius:20px; flex:0 0 auto; }
.nav-new { margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--gold-400); flex:0 0 6px; }
.nav-caret { margin-left:auto; display:grid; place-items:center; transition:transform .2s; opacity:.55; flex:0 0 13px; }
.nav-caret svg { width:13px; height:13px; }
.nav-item.expanded .nav-caret { transform:rotate(180deg); }
.nav-item[data-parent] .nav-badge + .nav-caret { margin-left:6px; }
.nav-sub { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.nav-sub.open { max-height:760px; }
.nav-subitem { display:block; padding:7px 12px 7px 37px; font-size:12.5px; color:#94a2bb; border-radius:8px; font-weight:500; position:relative; margin-bottom:1px; }
.nav-subitem:hover { color:#dbe2ee; background:rgba(255,255,255,.05); }
.nav-subitem.active { color:#fff; background:rgba(255,255,255,.08); }
.nav-subitem.active::before { content:""; position:absolute; left:21px; top:50%; transform:translateY(-50%); width:5px; height:5px; border-radius:50%; background:var(--gold-400); }

/* ============================ Main ============================ */
.main { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  height:var(--topbar-h); background:rgba(251,250,247,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px; padding:0 28px;
}
.search {
  display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:9px 13px; width:340px; max-width:38vw; color:var(--muted);
}
.search input { border:none; outline:none; background:none; font-family:inherit; font-size:13.5px; width:100%; color:var(--text); }
.search svg { width:16px; height:16px; flex:0 0 16px; }
.topbar-spacer { flex:1; }
.session-pill {
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  padding:8px 14px; border-radius:10px; font-weight:600; font-size:13px; color:var(--navy-700); cursor:pointer;
}
.session-pill svg { width:15px; height:15px; color:var(--gold-500); }
.icon-btn {
  width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  display:grid; place-items:center; color:var(--muted); position:relative;
}
.icon-btn svg { width:18px; height:18px; }
.icon-btn .dot { position:absolute; top:9px; right:10px; width:7px; height:7px; border-radius:50%; background:var(--error); border:2px solid var(--surface); }
.user-chip { display:flex; align-items:center; gap:10px; padding-left:6px; cursor:pointer; }
.avatar { width:38px; height:38px; border-radius:11px; object-fit:cover; background:var(--navy-200); display:grid; place-items:center; color:var(--navy-800); font-weight:700; font-size:14px; }
.user-chip .meta { line-height:1.25; }
.user-chip .meta b { font-size:13px; font-weight:600; }
.user-chip .meta span { display:block; font-size:11.5px; color:var(--muted); }

/* Flex column purely so the module tab strip can be pinned to the top of the
   content regardless of where a screen happens to emit it. Without this the
   strip sat below the page-head, so it slid up and down between tabs of the
   same module depending on whether that screen had a description line or
   action buttons — the tabs moved under the cursor mid-click. */
.content { padding:20px 32px 48px; max-width:1320px; width:100%; margin:0 auto;
  display:flex; flex-direction:column; align-items:stretch; }
.content > .tabs.mod-tabs { order:-1; flex:0 0 auto; }
.content > * { flex:0 0 auto; }
/* Screens that wrap themselves in a scope element (the entity-CRUD managers)
   need the same treatment one level in, or their strip stays put. */
.content > [data-ent-scope] { display:flex; flex-direction:column; }
.content > [data-ent-scope] > .tabs.mod-tabs { order:-1; }
.content > [data-ent-scope] > * { flex:0 0 auto; }

/* ===================== Page identity, in the topbar ===================== */
.topbar-id { min-width:0; }
.topbar-id h1 { font-size:23px; line-height:1.15; margin-top:4px; }
.crumb { font-size:11px; color:var(--grey-400); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.crumb b { color:var(--grey-300); font-weight:600; }

/* What is left of the old page header: the descriptive line and the
   screen's actions. The title itself is in the topbar. */
.page-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:14px; flex-wrap:wrap; }
/* A page-head carrying only the descriptive line is a caption, not a band:
   it sits close under the tab strip instead of floating between two of them. */
.page-head.is-note { margin-top:-2px; margin-bottom:12px; }
.page-head p.sub { color:var(--muted); font-size:13.5px; }
/* A header with four or five buttons is wider than the page on a laptop,
   and a row that cannot wrap takes the whole page sideways with it. */
.head-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

/* ===================== One-line summary ===================== */
.sum-line > .grow, .list-bar > .grow, .bulk-bar > .grow, .cover-note > .grow, .fp-foot > .grow { flex:1; }
.sum-line { display:flex; align-items:center; margin:2px 0 14px; flex-wrap:wrap; row-gap:8px; }
.sum-item { display:inline-flex; align-items:baseline; gap:8px; padding:0 16px; border-left:1px solid var(--border); }
.sum-item:first-child { border-left:none; padding-left:0; }
.sum-item b { font-family:var(--font-head); font-size:19px; font-weight:600; line-height:1; color:var(--text); }
.sum-item b.warn { color:var(--warning); }
.sum-item b.bad  { color:var(--error); }
.sum-item b.mute { color:var(--grey-500); }
.sum-item span { font-size:12.5px; color:var(--muted); }
.sum-item.is-on span { color:var(--text); font-weight:600; }
.sum-right { font-size:12.5px; color:var(--muted); }
.sum-right b { color:var(--text); }

/* ===================== List bar, chips, filter panel ===================== */
.list-bar { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.f-count { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:20px;
  background:var(--primary); color:#fff; font-size:11px; font-weight:700; }
.f-chip { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 6px 0 13px;
  border:1px solid var(--navy-200); background:var(--navy-50); border-radius:10px;
  font-size:12.5px; font-weight:600; color:var(--navy-700); }
.f-chip i { font-style:normal; font-weight:500; color:var(--navy-400); }
.f-chip .x { width:22px; height:22px; border:none; background:none; display:grid; place-items:center; color:var(--navy-400); }
.f-chip .x svg { width:13px; height:13px; }
.f-clear { font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; }

.filter-panel { background:var(--surface); border:1px solid var(--navy-200); border-radius:var(--r-lg);
  box-shadow:var(--sh-md); margin-bottom:14px; }
.fp-head { display:flex; align-items:center; gap:12px; padding:15px 20px 13px; border-bottom:1px solid var(--grey-100); }
.fp-head h3 { flex:1; font-size:16px; }
.fp-head svg { width:16px; height:16px; color:var(--primary); }
.fp-grid { padding:18px 20px 4px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fp-foot { display:flex; align-items:center; gap:10px; padding:14px 20px 16px; font-size:12.5px; }

/* ===================== Bulk selection bar ===================== */
.bulk-bar { display:flex; align-items:center; gap:12px; height:60px; padding:0 18px; margin-bottom:14px;
  background:var(--navy-800); border-radius:12px; }
.bulk-bar .n { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 9px; border-radius:8px;
  background:var(--accent); color:var(--on-accent); font-size:13px; font-weight:700; }
.bulk-bar .lbl { font-size:13.5px; font-weight:600; color:#fff; }
.bulk-bar .all { font-size:12.5px; color:var(--navy-200); text-decoration:underline; cursor:pointer; }
.bulk-bar .btn { border-color:var(--navy-500); color:var(--navy-100); background:transparent; }
.bulk-bar .btn:hover { background:var(--navy-700); }
tr.is-sel { background:#f7f9fc; }

/* ============================ Buttons ============================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:10px;
  padding:10px 16px; font-size:13.5px; font-weight:600; transition:.15s; white-space:nowrap;
}
.btn svg { width:16px; height:16px; }
.btn-primary { background:var(--primary); color:#fff; box-shadow:var(--sh-sm); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-accent { background:var(--accent); color:var(--on-accent); }
.btn-accent:hover { background:var(--gold-500); }
.btn-ghost { background:var(--surface); border-color:var(--border); color:var(--navy-700); }
.btn-ghost:hover { background:var(--grey-100); }
.btn-soft { background:var(--navy-50); color:var(--navy-700); }
.btn-soft:hover { background:var(--navy-100); }
.btn-danger { background:var(--error-bg); color:var(--error); }
.btn-success { background:var(--success-bg); color:var(--success); }
.btn-success:hover { background:#d8ebe1; }
.btn-sm { padding:7px 12px; font-size:12.5px; border-radius:8px; }
.btn-icon { padding:8px; }

/* ============================ Cards ============================ */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.card-pad { padding:18px 20px; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.card-head h3 { font-size:16px; }
.card-head .card-sub { font-size:12px; color:var(--muted); margin-top:2px; font-family:var(--font-body); font-weight:400; }

.grid { display:grid; gap:14px; }
.g-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.g-12 { grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
/* g-12c is the twelve-column version its children were always written for:
   they carry span 7 / span 5, which in a two-column grid does not clamp — it
   invents five zero-width columns and the cards stack full-width instead of
   sitting side by side. */
.g-12c { grid-template-columns:repeat(12,minmax(0,1fr)); }
@media(max-width:900px){ .g-12, .g-12c { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1100px){ .g-4{grid-template-columns:repeat(2,minmax(0,1fr));} .g-3{grid-template-columns:repeat(2,minmax(0,1fr));} .g-12{grid-template-columns:minmax(0,1fr);} }
@media(max-width:680px){ .g-4,.g-3,.g-2{grid-template-columns:minmax(0,1fr);} }

/* Stat cards */
.stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--sh-sm); position:relative; overflow:hidden; }
.stat .label { font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
.stat .value { font-family:var(--font-head); font-size:32px; font-weight:600; margin-top:8px; letter-spacing:-.02em; }
.stat .value small { font-size:15px; color:var(--muted); font-weight:500; }
.stat .trend { font-size:12px; margin-top:8px; display:inline-flex; align-items:center; gap:5px; font-weight:600; }
.stat .trend.up { color:var(--success); } .stat .trend.down { color:var(--error); }
.stat .ic { position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; }
.stat .ic svg { width:20px; height:20px; }
.ic-navy { background:var(--navy-50); color:var(--navy-600); }
.ic-gold { background:var(--gold-50); color:var(--gold-600); }
.ic-green{ background:var(--success-bg); color:var(--success); }
.ic-red  { background:var(--error-bg); color:var(--error); }

/* ============================ Tables ============================ */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; }
table.tbl th { text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-100); font-weight:700; padding:13px 18px; background:var(--navy-700); border-bottom:1px solid var(--navy-600); white-space:nowrap; }
table.tbl td { padding:14px 18px; border-bottom:1px solid var(--grey-100); font-size:13.5px; vertical-align:middle; }
/* The Registration List carries ten columns (as live), so its cells sit a little tighter to fit beside the sidebar. */
table.tbl.reg-list th, table.tbl.reg-list td { padding-left:12px; padding-right:12px; }
table.tbl tbody tr:hover { background:var(--grey-50); }
table.tbl tbody tr:last-child td { border-bottom:none; }
.cell-user { display:flex; align-items:center; gap:11px; }
.cell-user .avatar { width:34px; height:34px; border-radius:9px; font-size:12px; }
.cell-user b { font-weight:600; display:block; font-size:13.5px; }
.cell-user span { font-size:11.5px; color:var(--muted); }

/* Status pill carrying a dot, so the state reads without relying on colour. */
.dot-badge { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:6px; }
.dot-badge i { width:5px; height:5px; border-radius:50%; background:currentColor; flex:0 0 5px; }
.dot-badge.ok   { color:var(--success); background:var(--success-bg); }
.dot-badge.warn { color:var(--warning); background:var(--warning-bg); }
.dot-badge.bad  { color:var(--error);   background:var(--error-bg); }
.dot-badge.mute { color:var(--grey-500); background:var(--grey-100); }

/* Attendance bar + figure, coloured on shared thresholds. */
.meter { display:flex; align-items:center; gap:9px; }
.meter .track { flex:1; min-width:46px; height:5px; background:var(--grey-100); border-radius:3px; overflow:hidden; }
.meter .fill { display:block; height:100%; border-radius:3px; }
.meter .fill.ok { background:var(--success); } .meter .fill.warn { background:var(--warning); } .meter .fill.bad { background:var(--error); }
.meter b { font-size:12px; font-weight:600; }
.meter b.ok { color:var(--success); } .meter b.warn { color:var(--warning); } .meter b.bad { color:var(--error); }

.row-acts { display:inline-flex; gap:6px; justify-content:flex-end; }
.slot { display:inline-block; font-size:12px; font-weight:600; color:var(--navy-700); background:var(--navy-50); padding:4px 9px; border-radius:6px; }

/* "Who is out today, and who covers" — the staff list's own standing question. */
.cover-note { display:flex; align-items:center; gap:13px; padding:14px 18px; margin-bottom:14px;
  background:var(--warning-bg); border:1px solid var(--gold-200); border-radius:var(--r-lg); }
.cover-note .ic { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 38px; }
.cover-note .cn-t b { display:block; font-size:13.5px; }
.cover-note .cn-t span { display:block; font-size:12.5px; color:var(--gold-600); margin-top:3px; }

.table-toolbar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.table-toolbar .grow { flex:1; }
.ms-wide { flex:0 0 280px; }
.mini-search { display:flex; align-items:center; gap:8px; background:var(--grey-100); border-radius:9px; padding:8px 12px; min-width:200px; }
.mini-search input { border:none; background:none; outline:none; font-family:inherit; font-size:13px; width:100%; }
.mini-search svg { width:15px; height:15px; color:var(--muted); }

/* Badges & chips */
.badge { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px; }
.b-green{ background:var(--success-bg); color:var(--success);} .b-gold{background:var(--gold-100); color:var(--gold-600);}
.b-red{background:var(--error-bg); color:var(--error);} .b-navy{background:var(--navy-50); color:var(--navy-600);}
.b-grey{background:var(--grey-100); color:var(--grey-600);} .b-info{background:var(--info-bg); color:var(--info);}
.dot-s { width:7px; height:7px; border-radius:50%; display:inline-block; }

/* Filters */
.filter-bar { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:16px 20px; }
@media(max-width:900px){ .filter-bar{grid-template-columns:repeat(2,minmax(0,1fr));} }
.field label { display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.field select,.field input,.field textarea {
  /* min-width:0 — a date or time input carries an intrinsic minimum width that
     otherwise pushes its grid track wider than the column it was given. */
  width:100%; min-width:0; border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:13.5px;
  background:var(--surface); color:var(--text); outline:none; transition:.15s;
}
.field select:focus,.field input:focus,.field textarea:focus { border-color:var(--navy-400); box-shadow:0 0 0 3px var(--navy-50); }
.field .hint { font-size:11px; color:var(--muted); margin-top:5px; }
/* Standalone field styling (inputs/selects used outside a .field wrapper) */
.field-input { border:1px solid var(--border); border-radius:9px; padding:8px 12px; font-family:inherit; font-size:13px; background:var(--surface); color:var(--text); outline:none; transition:.15s; }
.field-input:focus { border-color:var(--navy-400); box-shadow:0 0 0 3px var(--navy-50); }

/* Pagination */
.pager { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-top:1px solid var(--border); flex-wrap:wrap; gap:12px; }
.pager .count { font-size:12.5px; color:var(--muted); }
.pg-btns { display:flex; gap:5px; }
.pg-btns button { width:34px; height:34px; border:1px solid var(--border); background:var(--surface); border-radius:8px; font-size:13px; color:var(--text); font-weight:600; }
.pg-btns button.active { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.pg-btns button:disabled { opacity:.4; }

/* Tabs */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; overflow-x:auto; }
/* flex:0 0 auto — a tab that shrinks to fit truncates its own label and, worse,
   hides the overflow from collapseTabs, which then never moves anything into
   the More menu. Tabs keep their width; the strip handles the excess. */
.tab { flex:0 0 auto; padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; }
/* Admission has ten screens, so its strip sits tighter and every tab stays in view beside the sidebar. */
.tabs.tabs-dense { gap:0; }
.tabs.tabs-dense .tab { padding:11px 11px; }
.tab.active { color:var(--navy-700); border-bottom-color:var(--gold-400); }
.tab:hover:not(.active){ color:var(--text); }
.tabs button.tab { background:none; border:none; border-bottom:2px solid transparent; font-family:inherit; cursor:pointer; }
.tabs button.tab.active { border-bottom-color:var(--gold-400); }
.local-tabs { display:block; }

/* Misc */
.row { display:flex; gap:16px; } .col { flex:1; min-width:0; }
.between { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.muted { color:var(--muted); } .gold { color:var(--gold-600); }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:14px}.mt-3{margin-top:20px}.mb-2{margin-bottom:14px}.mb-3{margin-bottom:20px}
.section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:10px; }

/* Progress / bar chart */
.bars { display:flex; align-items:flex-end; gap:14px; height:170px; padding-top:10px; }
.bars .bar-col { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bars .bar { width:60%; max-width:42px; border-radius:7px 7px 3px 3px; background:linear-gradient(var(--navy-400),var(--navy-600)); transition:.4s; }
.bars .bar.gold { background:linear-gradient(var(--gold-300),var(--gold-500)); }
.bars .bar-lbl { font-size:11px; color:var(--muted); font-weight:600; }

/* Donut */
.donut-wrap { display:flex; align-items:center; gap:24px; }
.donut { width:140px; height:140px; border-radius:50%; flex:0 0 140px; display:grid; place-items:center; position:relative; }
.donut .hole { width:96px; height:96px; background:var(--surface); border-radius:50%; display:grid; place-items:center; text-align:center; }
.donut .hole b { font-family:var(--font-head); font-size:26px; display:block; }
.donut .hole span { font-size:11px; color:var(--muted); }
.legend { display:flex; flex-direction:column; gap:11px; }
.legend .li { display:flex; align-items:center; gap:9px; font-size:13px; }
.legend .li b { margin-left:auto; font-weight:600; }

/* Calendar */
.cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.cal .dow { font-size:11px; font-weight:700; color:var(--muted); text-align:center; padding:6px 0; text-transform:uppercase; }
.cal .day { aspect-ratio:1; border:1px solid var(--grey-100); border-radius:9px; padding:7px; font-size:13px; font-weight:600; position:relative; }
.cal .day.muted-day { color:var(--grey-300); }
.cal .day.today { background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.cal .day .ev { position:absolute; bottom:6px; left:7px; display:flex; gap:3px; }
.cal .day .ev i { width:6px; height:6px; border-radius:50%; }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
@media(max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
/* Album media drop tiles — the big circular + on the Add Album form. */
.alb-drop { border:1px solid var(--border); border-radius:var(--r); padding:22px 18px; background:var(--surface); text-align:center; }
.alb-drop .t { font-family:var(--font-head); font-weight:600; font-size:14.5px; margin-bottom:16px; }
.alb-plus { width:126px; height:126px; border-radius:50%; border:none; background:var(--navy-50); color:var(--grey-500); display:grid; place-items:center; cursor:pointer; transition:.15s; margin:0 auto; }
.alb-plus:hover { background:var(--navy-100); color:var(--navy-600); }
.alb-plus svg { width:50px; height:50px; stroke-width:1.5; }
.alb-drop .h { margin-top:16px; font-size:14px; }
.alb-thumbs { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.alb-thumb { position:relative; width:76px; }
.alb-thumb .box { height:56px; border-radius:8px; display:grid; place-items:center; color:#fff; }
.alb-thumb .box svg { width:20px; height:20px; }
.alb-thumb .nm { font-size:10.5px; color:var(--muted); margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alb-thumb .rm { position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--error); display:grid; place-items:center; cursor:pointer; padding:0; }
.alb-thumb .rm svg { width:12px; height:12px; }
.gal-item { border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; position:relative; border:1px solid var(--border); }
.gal-item .ph { width:100%; height:100%; display:grid; place-items:center; color:#fff; font-family:var(--font-head); }
.gal-item .cap { position:absolute; left:0; right:0; bottom:0; padding:10px 12px; background:linear-gradient(transparent,rgba(13,22,38,.8)); color:#fff; font-size:12.5px; font-weight:600; }

/* Timeline / activity */
.activity { display:flex; flex-direction:column; }
.activity .it { display:flex; gap:13px; padding:13px 0; border-bottom:1px solid var(--grey-100); }
.activity .it:last-child { border-bottom:none; }
.activity .it .ai { width:34px; height:34px; border-radius:9px; flex:0 0 34px; display:grid; place-items:center; }
.activity .it .ai svg { width:16px; height:16px; }
.activity .it .at b { font-size:13px; font-weight:600; } .activity .it .at p { font-size:12px; color:var(--muted); }
.activity .it time { margin-left:auto; font-size:11px; color:var(--muted); white-space:nowrap; }

/* Form layout */
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
@media(max-width:900px){ .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){ .form-grid{grid-template-columns:minmax(0,1fr);} }
/* Column-count modifiers, so a narrower grid still collapses. An inline
   grid-template-columns beats every media query below it, which is how a
   two-column form ends up wider than the phone it is being read on. */
.form-grid.fg-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:600px){ .form-grid.fg-2{grid-template-columns:minmax(0,1fr);} }
.form-section { padding:18px 20px; border-bottom:1px solid var(--border); }
.form-section:last-child { border-bottom:none; }
.fs-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.fs-head .n { width:28px; height:28px; border-radius:8px; background:var(--navy-50); color:var(--navy-700); display:grid; place-items:center; font-weight:700; font-size:13px; }
.fs-head h4 { font-size:15px; } .fs-head span { font-size:12px; color:var(--muted); }
.span-2 { grid-column:span 2; } .span-3 { grid-column:span 3; }
.form-foot { padding:13px 20px; display:flex; justify-content:flex-end; align-items:center; gap:10px; background:var(--grey-50); border-radius:0 0 var(--r-lg) var(--r-lg); }

/* Detail profile */
.profile-head { display:flex; gap:22px; align-items:center; padding:26px; }
.profile-head .pa { width:84px; height:84px; border-radius:20px; flex:0 0 84px; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-size:30px; }
.profile-head h2 { font-size:24px; } .profile-head .role { color:var(--muted); font-size:13.5px; margin-top:3px; }
/* kv() emits the label and the value as two siblings, so the column count has
   to be a multiple of two or a label ends a row and its value starts the next
   one — which is how Procurement flow came to show "1 · Requisition" sitting
   above the text belonging to "2 · Approval". One pair per row always reads
   correctly; .kv.dense puts two pairs on a row where the values are short. */
.kv { display:grid; grid-template-columns:minmax(120px,max-content) minmax(0,1fr); gap:0 24px; align-items:baseline; }
.kv.dense { grid-template-columns:repeat(2, minmax(110px,max-content) minmax(0,1fr)); column-gap:32px; }
@media(max-width:820px){ .kv, .kv.dense { grid-template-columns:minmax(100px,max-content) minmax(0,1fr); } }
.kv .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding:11px 0; }
.kv .v { font-size:14px; font-weight:500; padding:11px 0; border-bottom:1px solid var(--grey-100); }
.kv .k { border-bottom:1px solid var(--grey-100); }
.kv > .k:last-of-type, .kv > .v:last-of-type { border-bottom:none; }

/* A numbered sequence — for content that genuinely is ordered, like a
   procurement chain, and never as decoration on a plain list. */
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.steps li { display:flex; gap:14px; padding:0 0 18px; position:relative; }
.steps li:last-child { padding-bottom:0; }
.steps li::before { content:""; position:absolute; left:13px; top:28px; bottom:0; width:2px; background:var(--grey-200); }
.steps li:last-child::before { display:none; }
.steps .n { flex:0 0 28px; width:28px; height:28px; border-radius:50%; background:var(--navy-700); color:#fff;
  display:grid; place-items:center; font-size:12.5px; font-weight:700; position:relative; z-index:1; }
.steps b { display:block; font-size:13.5px; }
.steps span.d { display:block; font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.5; }

/* Empty / placeholder map */
.map-ph { height:300px; border-radius:var(--r); background:
  linear-gradient(45deg,var(--navy-50) 25%,transparent 25%),
  linear-gradient(-45deg,var(--navy-50) 25%,transparent 25%),
  linear-gradient(45deg,transparent 75%,var(--navy-50) 75%),
  linear-gradient(-45deg,transparent 75%,var(--navy-50) 75%);
  background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0;
  border:1px solid var(--border); display:grid; place-items:center; color:var(--navy-400); }

.banner { display:flex; align-items:center; gap:14px; padding:16px 20px; border-radius:var(--r); border:1px solid var(--gold-200); background:var(--gold-50); }
.banner svg { color:var(--gold-600); width:22px; height:22px; flex:0 0 22px; }
.banner b { font-size:14px; } .banner p { font-size:12.5px; color:var(--gold-600); }
.banner .btn { margin-left:auto; }

.toggle { width:42px; height:24px; border-radius:20px; background:var(--grey-300); position:relative; cursor:pointer; transition:.2s; flex:0 0 42px; }
.toggle.on { background:var(--success); }
.toggle::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:.2s; }
.toggle.on::after { left:21px; }

.chiprow { display:flex; gap:8px; flex-wrap:wrap; }
.chip { font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px; background:var(--grey-100); color:var(--grey-600); }
.chip.sel { background:var(--navy-700); color:#fff; }

/* Attendance grid */
.att-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.att-card { border:1px solid var(--border); border-radius:var(--r); padding:13px; display:flex; align-items:center; gap:10px; }
.att-card .seg { margin-left:auto; display:flex; gap:3px; }
.att-card .seg b { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-size:11px; font-weight:700; cursor:pointer; background:var(--grey-100); color:var(--muted); }
.att-card .seg b.p { background:var(--success); color:#fff; }
.att-card .seg b.a { background:var(--error); color:#fff; }

/* ============================ Admission enquiries — leads ============================ */
/* Lead pills & temperature */
.pill { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:7px; background:var(--grey-100); color:var(--grey-600); white-space:nowrap; }
.pill svg { width:13px; height:13px; flex:0 0 13px; opacity:.85; }
.t-hot { background:var(--error); } .t-warm { background:var(--gold-400); } .t-cold { background:var(--info); }
.avatar.xs { width:24px; height:24px; border-radius:7px; font-size:9.5px; flex:0 0 24px; }

/* Kanban pipeline board (drag & drop) */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:14px; overflow-x:auto; padding-bottom:10px; align-items:start; }
.kb-col { background:var(--grey-50); border:1px solid var(--border); border-radius:var(--r-lg); display:flex; flex-direction:column; transition:background .15s,border-color .15s,box-shadow .15s; }
.kb-col.drop { background:var(--navy-50); border-color:var(--navy-300); box-shadow:inset 0 0 0 2px var(--navy-100); }
.kb-head { display:flex; align-items:center; gap:8px; padding:13px 14px 11px; border-bottom:1px solid var(--border); }
.kb-head b { font-size:12.5px; font-weight:700; }
.kb-count { margin-left:auto; font-size:11px; font-weight:700; background:var(--surface); border:1px solid var(--border); color:var(--muted); border-radius:20px; min-width:24px; text-align:center; padding:1px 7px; }
.kb-body { padding:11px; display:flex; flex-direction:column; gap:10px; min-height:70px; }
.kb-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-sm); padding:12px; cursor:grab; transition:box-shadow .15s,transform .15s,border-color .15s; }
.kb-card:hover { box-shadow:var(--sh-md); border-color:var(--navy-200); transform:translateY(-1px); }
.kb-card:active { cursor:grabbing; }
.kb-card.dragging { opacity:.45; }
.kb-card .kc-top { display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.kb-card .kc-top b { font-size:13.5px; font-weight:600; flex:1; min-width:0; }
.kb-card .kc-meta { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-top:5px; }
.kb-card .kc-meta svg { width:13px; height:13px; flex:0 0 13px; opacity:.8; }
.kb-card .kc-foot { display:flex; align-items:center; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid var(--grey-100); }
.kb-card .kc-next { font-size:11px; color:var(--muted); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.kb-card .kc-next svg { width:12px; height:12px; flex:0 0 12px; }

/* Lead stage stepper */
.stepper { display:flex; }
.stepper .stp { flex:1; text-align:center; position:relative; font-size:11px; color:var(--muted); font-weight:600; padding:0 4px; }
.stepper .stp .b { width:28px; height:28px; border-radius:50%; margin:0 auto 8px; display:grid; place-items:center; background:var(--surface); color:var(--muted); border:2px solid var(--grey-200); font-size:11.5px; font-weight:700; position:relative; z-index:1; }
.stepper .stp .b svg { width:14px; height:14px; }
.stepper .stp::before { content:""; position:absolute; top:13px; right:50%; width:100%; height:2px; background:var(--grey-200); z-index:0; }
.stepper .stp:first-child::before { display:none; }
.stepper .stp.done .b { background:var(--success); border-color:var(--success); color:#fff; }
.stepper .stp.active .b { background:var(--navy-700); border-color:var(--navy-700); color:#fff; }
.stepper .stp.done::before, .stepper .stp.active::before { background:var(--success); }
.stepper .stp.active { color:var(--navy-700); }

/* ============================ Dropdown menu (details-based, no JS) ============================ */
.dd { position:relative; display:inline-block; }
.dd > summary { list-style:none; cursor:pointer; user-select:none; }
.dd > summary::-webkit-details-marker { display:none; }
.dd > summary::marker { content:""; }
.dd > summary svg { width:14px; height:14px; }
.dd-menu { position:absolute; top:calc(100% + 6px); right:0; min-width:160px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-lg); padding:6px; z-index:40; }
.dd-menu.left { left:0; right:auto; min-width:120px; }
.dd-item { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:8px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; white-space:nowrap; }
.dd-item:hover { background:var(--grey-100); }
.dd-item svg { width:15px; height:15px; color:var(--muted); flex:0 0 15px; }

/* ============================ Modal / dialog ============================ */
.modal-overlay { position:fixed; inset:0; background:rgba(13,22,38,.55); backdrop-filter:blur(3px); display:grid; place-items:center; z-index:100; padding:24px; animation:overlay-in .16s ease; }
.modal-overlay[hidden] { display:none; }
@keyframes overlay-in { from{opacity:0} to{opacity:1} }
.modal { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-lg); width:100%; max-width:840px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden; animation:modal-in .2s cubic-bezier(.2,.8,.3,1); outline:none; }
@keyframes modal-in { from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
/* A destructive dialog reads as one before it is read at all. */
/* Update dialogs carry a navy header so an edit reads differently from a view. */
.modal.is-upd .modal-head { background:var(--navy-800); border-bottom-color:var(--navy-800); }
.modal.is-upd .modal-head h3 { color:#fff; }
.modal.is-upd .modal-head .btn { background:transparent; border-color:transparent; color:#fff; }
.modal.is-upd .modal-head .btn:hover { background:rgba(255,255,255,.16); }
.modal.is-danger { border-top:3px solid var(--error); }
.modal.is-danger .modal-head { background:var(--error-bg); border-bottom-color:rgba(178,58,58,.18); }
.modal.is-danger .modal-head h3 { color:var(--error); }
.modal.is-danger .mh-icon { background:rgba(178,58,58,.12); color:var(--error); }
/* Intent icon, added by openModal so every dialog gets one regardless of markup. */
.mh-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--navy-50); color:var(--navy-700); flex:0 0 34px; }
.mh-icon svg { width:17px; height:17px; }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 22px; border-bottom:1px solid var(--border); }
.modal-head .mh-title { display:flex; align-items:center; gap:10px; }
.modal-head .mh-title svg { color:var(--gold-600); width:20px; height:20px; }
.modal-head h3 { font-size:17px; }
.modal-head > h3 { flex:1; }
.modal-x { width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; color:var(--muted); flex:0 0 34px; }
.modal-x:hover { background:var(--grey-100); color:var(--text); }
.modal-x svg { width:17px; height:17px; }
.modal-body { padding:22px; overflow-y:auto; overscroll-behavior:contain; }
.modal-foot { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--border); background:var(--grey-50); flex-wrap:wrap; }
.modal-foot .grow { flex:1; min-width:12px; }

/* Super Admin school request approval */
.request-actions { display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; }
.request-actions > div { display:contents !important; }
.payment-mail-school { display:flex; align-items:center; gap:8px; padding:11px 13px; margin-bottom:18px;
  border:1px solid var(--border); border-radius:10px; background:var(--navy-50); color:var(--navy-700); font-size:13px; }
.payment-mail-school svg { width:17px; height:17px; flex:0 0 17px; }
.payment-mail-school span { color:var(--muted); }
.payment-mail-school b { margin-left:auto; color:var(--navy-800); }
.amount-input-wrap { position:relative; display:flex; align-items:center; }
.amount-input-wrap > span { position:absolute; left:14px; z-index:1; color:var(--navy-700); font-weight:700; }
.amount-input-wrap input { width:100%; padding-left:34px; font-size:16px; font-weight:600; }
.field-help { display:block; margin-top:7px; color:var(--muted); font-size:12px; line-height:1.45; }
.completed-payments-card .table-wrap { overflow-x:auto; }
.completed-payments-card table { min-width:1080px; }
.completed-payments-card tbody td { padding-top:16px; padding-bottom:16px; }
.request-review-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; align-items:start; }
.request-review-list { display:flex; flex-direction:column; gap:22px; }
.request-review-list .request-decision-card { position:static; }
.review-queue-summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 18px; margin-bottom:18px; border:1px solid var(--gold-300); border-radius:var(--r); background:var(--gold-50); }
.review-queue-summary > div { display:flex; align-items:center; gap:12px; color:var(--navy-800); }
.review-queue-summary svg { width:22px; height:22px; color:var(--gold-700); }
.review-queue-summary span { display:flex; flex-direction:column; gap:2px; }
.review-queue-summary small { color:var(--muted); font-size:12px; }
.request-number { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.request-review-main { overflow:hidden; }
.request-review-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--navy-50),#fff); }
.request-review-head .avatar { width:46px; height:46px; }
.request-review-head h3 { font-size:18px; margin-bottom:3px; }
.review-section { padding:20px 22px; border-bottom:1px solid var(--border); }
.review-section:last-child { border-bottom:0; }
.review-section .info-grid { margin-top:14px; }
.review-section .info-grid > div { display:flex; flex-direction:column; gap:5px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; background:var(--grey-50); }
.review-section .info-grid .k { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.review-section .info-grid .v { font-size:14px; color:var(--navy-800); }
.request-decision-card { padding:24px; position:sticky; top:82px; }
.decision-icon { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:var(--gold-100); color:var(--gold-700); margin-bottom:14px; }
.decision-icon svg { width:23px; height:23px; }
.request-decision-card h3 { font-size:18px; }
.request-decision-card > p { color:var(--muted); font-size:13px; line-height:1.6; margin:8px 0 18px; }
.request-decision-card .btn + .btn { margin-top:9px; }
.decision-status { display:flex; align-items:center; justify-content:space-between; padding:12px 0; margin-bottom:16px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:13px; }
@media(max-width:900px){ .request-review-layout { grid-template-columns:minmax(0,1fr); } .request-decision-card { position:static; } }
@media(max-width:640px){ .payment-mail-school { align-items:flex-start; flex-wrap:wrap; } .payment-mail-school b { width:100%; margin-left:25px; } }
/* Keyboard focus has to be visible once Tab is trapped inside the dialog. */
.modal :focus-visible { outline:2px solid var(--navy-600); outline-offset:2px; border-radius:6px; }
.modal .kv .v:last-child { border-bottom:none; }
@media(max-width:640px){
  .modal-overlay { padding:12px; align-items:flex-end; }
  .modal { max-height:92vh; border-radius:16px 16px 12px 12px; }
  .modal-head, .modal-body, .modal-foot { padding-left:16px; padding-right:16px; }
  .modal-foot .btn { flex:1 1 auto; justify-content:center; }
}
.modal-foot .grow { flex:1; min-width:12px; }

/* Confirm dialog (UI.confirm) */
.sw-confirm-box { max-width:420px; }
.sw-confirm-box .modal-head { border-bottom:none; padding-bottom:4px; }
.sw-confirm-body { text-align:center; padding-top:4px; }
.sw-confirm-body p { font-size:15px; line-height:1.6; color:var(--text); }
.sw-confirm-foot { justify-content:center; gap:14px; padding-bottom:22px; background:var(--surface); border-top:none; }
.sw-cn-pill { border-radius:24px !important; min-width:90px; }

/* Field-picker checkboxes */
.chk-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px 14px; margin-top:12px; }
@media(max-width:760px){ .chk-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.chk { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; color:var(--text); cursor:pointer; padding:8px 10px; border:1px solid var(--border); border-radius:9px; transition:background .15s,border-color .15s; }
.chk:hover { background:var(--grey-50); border-color:var(--navy-200); }
.chk input { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; flex:0 0 16px; }
.chk-all { display:inline-flex; background:var(--navy-50); border-color:var(--navy-100); font-weight:600; color:var(--navy-700); }
.fld-search input { min-width:180px; }
.max-note { transition:transform .15s; }
.max-note.pulse { animation:pulse-note .55s ease; }
@keyframes pulse-note { 0%,100%{transform:scale(1)} 30%{transform:scale(1.09)} }

/* ============================ Wizard / stepper (Add Student) ============================ */
.wizard .stepper { padding:24px 24px 6px; }
.stepper .stp[data-goto] { cursor:pointer; }
.wiz-body { padding:0; }
.radio-row { display:flex; gap:20px; align-items:center; padding:10px 0 2px; }
.radio-opt { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:500; color:var(--text); cursor:pointer; }
.radio-opt input { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }
.chk-inline { display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:500; cursor:pointer; padding:8px 0; }
.chk-inline input { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }

/* ============================ Segmented sub-tabs (profile inner sections) ============================ */
.seg-btns { display:inline-flex; gap:4px; background:var(--grey-100); padding:4px; border-radius:11px; flex-wrap:wrap; }
.seg-btn { padding:8px 15px; border:none; background:none; border-radius:8px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; font-family:inherit; white-space:nowrap; transition:.15s; }
.seg-btn:hover:not(.active) { color:var(--text); }
.seg-btn.active { background:var(--surface); color:var(--navy-700); box-shadow:var(--sh-sm); }
.seg-panels { margin-top:18px; }

/* ============================ Student-profile helpers ============================ */
.info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 26px; }
@media(max-width:900px){ .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){ .info-grid{grid-template-columns:minmax(0,1fr);} }
.info-grid .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding-top:14px; }
.info-grid .v { font-size:14px; font-weight:500; padding-bottom:13px; border-bottom:1px solid var(--grey-100); }
.legend-row { display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:12px; color:var(--muted); }
.legend-row b { color:var(--text); }

/* Attendance daily grid */
.att-day { overflow-x:auto; }
.att-day table { border-collapse:collapse; width:100%; min-width:760px; }
.att-day th, .att-day td { border:1px solid var(--grey-200); padding:6px 5px; text-align:center; font-size:11.5px; }
.att-day th { background:var(--grey-100); font-weight:700; color:var(--muted); }
.att-day td.mon { text-align:left; font-weight:700; background:var(--grey-50); white-space:nowrap; }
.am-P{ color:var(--success); font-weight:700; } .am-A{ color:var(--error); font-weight:700; }
.am-W{ color:var(--grey-400); } .am-H{ color:var(--gold-600); font-weight:700; }

/* Report card (Exam) */
.report-tbl { width:100%; border-collapse:collapse; }
.report-tbl th, .report-tbl td { border:1px solid var(--grey-200); padding:9px 10px; font-size:12.5px; text-align:center; }
.report-tbl th { background:var(--grey-100); font-weight:700; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.03em; }
.report-tbl td.subj { text-align:left; font-weight:600; }

/* Timetable grid */
.tt-tbl { width:100%; border-collapse:collapse; min-width:680px; }
.tt-tbl th, .tt-tbl td { border:1px solid var(--grey-200); padding:10px; font-size:12.5px; text-align:center; vertical-align:middle; }
.tt-tbl th { background:var(--navy-700); color:#fff; font-weight:600; }
.tt-tbl td.per { background:var(--grey-50); font-weight:600; color:var(--muted); font-size:11.5px; white-space:nowrap; }
.tt-tbl td b { display:block; font-size:12.5px; } .tt-tbl td span { font-size:11px; color:var(--muted); }
.tt-wrap { overflow-x:auto; }

/* ============================ Fee month cards + payment form (Payment tab) ============================ */
.pay-months { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media(max-width:1000px){ .pay-months{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:760px){ .pay-months{grid-template-columns:repeat(2,minmax(0,1fr));} }
.pay-month { border:1px solid var(--border); border-top:3px solid var(--border); border-radius:var(--r); padding:14px; background:var(--surface); position:relative; }
.pay-month.paid { border-top-color:var(--success); }
.pay-month.due { border-top-color:var(--error); cursor:pointer; transition:box-shadow .15s,background .15s,outline .1s; }
.pay-month.due:hover { box-shadow:var(--sh-md); }
.pay-month.due.selected { outline:2px solid var(--error); outline-offset:1px; border-color:var(--error); background:var(--error-bg); }
.pay-month .pm-top { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.pay-month .pm-top b { font-size:14px; }
.pay-month .pm-spacer { flex:1; }
.pay-month .pm-check { display:none; color:var(--error); }

/* Fee-breakup tooltip (info icon on each month) */
.pm-info { position:relative; display:inline-flex; align-items:center; color:var(--muted); cursor:help; }
.pm-info > svg { width:14px; height:14px; }
.pm-info:hover { color:var(--navy-600); }
.pm-tip { position:absolute; bottom:calc(100% + 9px); left:50%; transform:translateX(-50%); width:216px; background:var(--navy-800); color:#fff; border-radius:11px; padding:12px 14px; box-shadow:var(--sh-lg); z-index:60; display:none; text-align:left; cursor:default; }
.pm-info:hover .pm-tip { display:block; }
.pm-tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy-800); }
.pm-tip-h { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gold-300); margin-bottom:8px; }
.pm-tip-row { display:flex; justify-content:space-between; gap:14px; font-size:12px; padding:3px 0; color:#c7d0de; }
.pm-tip-row b { color:#fff; font-weight:600; white-space:nowrap; }
.pm-tip-row.disc b { color:#7ee0b0; }
.pm-tip-row.late b { color:#ffb4a8; }
.pm-tip-row.total { border-top:1px solid rgba(255,255,255,.16); margin-top:6px; padding-top:7px; }
.pm-tip-row.total span, .pm-tip-row.total b { color:#fff; font-weight:700; font-size:12.5px; }
.pay-month .pm-check svg { width:16px; height:16px; }
.pay-month.due.selected .pm-check { display:inline-flex; }
.pay-month .pm-row { display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); padding:3px 0; }
.pay-month .pm-row b { color:var(--text); }

/* Break-up shown after selecting due month(s) */
.pay-breakup[hidden] { display:none; }
.pay-summary { margin:14px 0 0 auto; max-width:340px; border:1px solid var(--border); border-radius:var(--r); padding:12px 16px; background:var(--grey-50); }
.pay-summary .ps-row { display:flex; justify-content:space-between; gap:16px; font-size:13px; padding:4px 0; color:var(--muted); }
.pay-summary .ps-row b { color:var(--text); font-weight:600; }
.pay-summary .ps-row b.disc { color:var(--success); }
.pay-summary .ps-row b.late { color:var(--error); }
.pay-summary .ps-row.total { border-top:1px solid var(--border); margin-top:6px; padding-top:8px; }
.pay-summary .ps-row.total span { font-weight:700; color:var(--text); }
.pay-summary .ps-row.total b { font-weight:700; font-size:15px; color:var(--navy-700); }

.pay-form { margin-top:18px; border:1px solid var(--border); border-radius:var(--r); padding:18px; transition:opacity .2s; }
.pay-form.disabled { opacity:.5; }
.pay-form .pf-hint { font-size:12.5px; font-weight:600; color:var(--muted); margin-bottom:15px; display:flex; align-items:center; gap:7px; }
.pay-form .pf-hint svg { width:15px; height:15px; flex:0 0 15px; }
.pay-form input:disabled, .pay-form select:disabled { background:var(--grey-100); cursor:not-allowed; }

/* ============================ Photo upload (student & parent) ============================ */
.photo-up { display:inline-flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; }
.photo-av { width:84px; height:84px; border-radius:50%; background-size:cover; background-position:center; display:grid; place-items:center; color:#fff; font-family:var(--font-head); font-size:26px; font-weight:600; border:2px solid var(--border); position:relative; box-shadow:var(--sh-sm); transition:box-shadow .15s; flex:0 0 84px; }
.photo-up:hover .photo-av { box-shadow:var(--sh-md); }
.photo-av .photo-cam { position:absolute; bottom:-3px; right:-3px; width:27px; height:27px; border-radius:50%; background:var(--navy-700); color:#fff; display:grid; place-items:center; border:2.5px solid var(--surface); }
.photo-av .photo-cam svg { width:14px; height:14px; }
.photo-av.has-img .pa-txt { display:none; }
.photo-lbl { font-size:11.5px; font-weight:600; color:var(--muted); }

/* ============================ Active-student slider (profile header) ============================ */
.active-switch { display:inline-flex; align-items:center; gap:10px; padding:8px 15px; border:1px solid var(--border); border-radius:30px; background:var(--surface); box-shadow:var(--sh-sm); align-self:flex-start; }
.ph-actions { display:flex; flex-direction:column; align-items:flex-end; gap:12px; align-self:flex-start; }
.ph-actions .active-switch { align-self:auto; }
.ph-pay { white-space:nowrap; }
@media (max-width:760px){ .profile-head { flex-wrap:wrap; } .profile-head { align-items:flex-start; } .ph-actions { flex-direction:row; flex-wrap:wrap; align-items:center; width:100%; justify-content:flex-start; } }
.active-switch .toggle { cursor:pointer; }
.active-switch b { font-size:13px; font-weight:600; color:var(--success); white-space:nowrap; }
.active-switch.inactive b { color:var(--error); }

.mobile-only{display:none}
@media(max-width:920px){
  .sidebar{position:fixed; z-index:60; transform:translateX(-100%); transition:.25s; box-shadow:var(--sh-lg);}
  .sidebar.open{transform:none;}
  .mobile-only{display:grid;}
  .search{display:none;}
  .content{padding:20px 16px 50px;}
  /* The bar kept its desktop furniture at every width: the user's name, role
     and session pill alone ran 67px past the edge of a phone, which is what
     took every single screen sideways. Drop what the avatar already says. */
  .topbar{padding:0 14px; gap:10px;}
  .topbar-id{flex:1 1 auto; min-width:0;}
  .topbar-id h1{font-size:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .crumb{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .user-chip .meta{display:none;}
  .user-chip > svg{display:none;}
  .session-pill .badge{display:none;}
  .session-pill{padding:7px 10px; font-size:12px; flex:0 0 auto;}
  .topbar > .icon-btn, .topbar > .session-pill, .topbar > .user-chip{flex:0 0 auto;}
}
/* ---- Narrow screens ----
   Column templates are classes (.gt-* / .gx / .gc-* at the foot of this file),
   so everything here is ordinary cascade — nothing below needs !important. */
@media(max-width:900px){
  .form-grid, .chk-grid, .set-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* A grid or flex child is min-width:auto by default, so a wide table inside
     one pushes the whole page sideways instead of scrolling within its own box. */
  .grid > *, .row > *, .between > *, .card, .table-wrap, .col { min-width:0; }
  /* A flex item is min-width:auto, so a card laid out as a column is sized by
     its widest child rather than by the card — the card shrinks correctly and
     its own head and body hang out of it. */
  .card > *, .card-head > *, .card-pad > *, .form-section > * { min-width:0; }
  .row, .radio-row, .between, .card-head, .form-foot, .head-actions { flex-wrap:wrap; }
  .ss-f.wide { min-width:0; }
}
@media(max-width:640px){
  .form-grid, .chk-grid, .set-grid, .grid, .g-2, .g-3, .g-4, .pay-grid,
  .pay-rail .pr-modes { grid-template-columns:minmax(0,1fr); }
  .ss-f, .ss-f.wide { min-width:0; }
  .scope-strip > * { flex:1 1 100%; }
  .tabs .tab-more .dd-menu, .tabs .tab-group .dd-menu { min-width:0; max-width:78vw; }
  .active-switch { align-self:stretch; }
  /* A span in a one-column grid would invent columns to span into. */
  .span-2, .span-3 { grid-column:auto; }
  /* Any row of controls wraps rather than taking the page with it — including
     the flex rows this prototype declares inline. */
  .between, .card-head, .form-foot, .head-actions, .chiprow,
  #content [style*="display:flex"] { flex-wrap:wrap; }
  .radio-opt, .chk-inline { white-space:normal; }
  /* A long tab label plus the More control is wider than a phone. Bound the
     label instead of letting the strip push the document sideways. */
  .tabs .tab { max-width:54vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabs .tab-more-btn { max-width:none; }
  /* The group already wears the gold underline, and the topbar crumb names the
     screen — the label beside it is the first thing a phone can spare. */
  .tabs .tab-group .tg-on { display:none; }
  .radio-row, .profile-head, .kv-row { flex-wrap:wrap; }
  /* Only the list-bar search is a column that should collapse; the other
     flex:0 0 boxes are 20-54px icon rails that must keep their width. */
  .mini-search.ms-wide { flex-basis:auto; }
  /* A 120px label column and a 24px gutter is most of a phone-width card, and
     the value beside it is often an address or an email with nowhere to break. */
  .kv, .kv.dense { grid-template-columns:minmax(88px,max-content) minmax(0,1fr); column-gap:14px; }
  .kv > .v { overflow-wrap:anywhere; }
  /* The Copilot transcript is a fixed-layout component — bubbles at max-width
     82% of a column that assumes a desktop. Contain it here rather than on
     every .card, which would clip the Actions menus that open inside them. */
  .ai-chat { overflow:hidden; }
  .ai-chat > *, .ai-chat .card-pad > * { min-width:0; }
  .ai-chat .card-pad { overflow:auto; }
  /* A button is nowrap so short labels keep their shape; on a phone a long one
     has to wrap rather than take the page with it. */
  .btn { white-space:normal; }
  .cell-user { flex-wrap:wrap; }
  .cell-user > * { min-width:0; }
  /* Below this the columns crush and names break mid-word ("Abhishe k"). The
     wrapper already scrolls; give the table a floor and let it. */
  .table-wrap .tbl { min-width:600px; }
  .tabs .tab { max-width:none; }
}

@media(max-width:600px){
  .topbar{height:70px; padding:0 12px; gap:8px;}
  .topbar-spacer{display:none;}
  .session-pill{display:none;}
  .topbar-id h1{font-size:17px; margin-top:2px;}
  .crumb{font-size:10px;}
  .icon-btn{width:36px; height:36px;}
  .avatar{width:34px; height:34px; border-radius:10px;}
  .content{padding:16px 14px 44px;}
}

/* ============================ Teacher screens (live-admin mirror) ============================ */
.field input[readonly] { background:var(--gold-50); color:var(--muted); cursor:default; }
.tt-tbl td.tt-band { background:var(--gold-50); color:var(--gold-600); font-weight:700; letter-spacing:.12em; font-size:11.5px; }
.tt-tbl td.tt-no { color:var(--grey-400); font-size:12px; }
.tt-tbl td .ttv-tag { display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.tt-empty { text-align:center; padding:26px 0; font-size:13px; color:var(--muted); border-bottom:1px solid var(--border); }
.asub-main { flex:2; min-width:360px; }
.asub-group { border:1px solid var(--border); border-radius:12px; padding:16px 18px; margin-top:16px; background:var(--grey-50); }
.asub-row { display:grid; grid-template-columns:34px minmax(0,1fr) minmax(0,1fr); gap:14px 18px; align-items:end; padding:8px 0; }
.asub-row + .asub-row { border-top:1px dashed var(--grey-200); }
.asub-row .field { margin:0; }
.asub-row .asub-n { width:26px; height:26px; border-radius:8px; background:var(--navy-50); color:var(--navy-700); display:grid; place-items:center; font-weight:700; font-size:12px; margin-bottom:7px; }
@media(max-width:760px){ .asub-row .asub-n{display:none;} }
/* Sortable table headers */
table.tbl thead th { cursor:pointer; user-select:none; }
table.tbl thead th:hover { color:#fff; }
table.tbl thead th.sort-asc::after { content:" ▲"; font-size:9px; color:var(--gold-300); }
table.tbl thead th.sort-desc::after { content:" ▼"; font-size:9px; color:var(--gold-300); }
/* Timetable builder cells (Add Time Table tab) */
.ttb-cell select { display:block; width:100%; min-width:120px; margin-top:6px; font-size:12px; padding:6px 8px; }
.ttb-cell select[hidden] { display:none; }
.tt-tbl td.ttb-cell { text-align:left; vertical-align:top; }
.ttb-cell input[type=text] { display:block; width:100%; min-width:120px; margin-top:6px; font-size:12px; padding:6px 8px; }
.ttb-cell input[type=text][hidden] { display:none; }
.ttb-cell [data-ttb-cflow][hidden], .ttb-cell [data-ttb-oflow][hidden] { display:none; }
.radio-row .radio-opt { white-space:nowrap; }
/* Inline table controls (head-info rows, per-cell selects) — match .field styling */
table.tbl td select, table.tbl td input:not([type="checkbox"]):not([type="radio"]) {
  width:100%; min-width:110px; border:1px solid var(--border); border-radius:9px; padding:9px 11px;
  font-family:inherit; font-size:13px; background:var(--surface); color:var(--text); outline:none; transition:.15s;
}
table.tbl td select:focus, table.tbl td input:focus { border-color:var(--navy-400); box-shadow:0 0 0 3px var(--navy-50); }
table.tbl td input[readonly] { background:var(--gold-50); color:var(--muted); }
table.tbl td select:disabled, table.tbl td input:disabled { background:var(--grey-100); color:var(--grey-400); cursor:not-allowed; }
.stat .label { padding-right:52px; }
[hidden] { display:none !important; }
/* Dark navy stat tiles (finance report cards) */
.stat-navy .stat { background:linear-gradient(135deg,var(--navy-700),var(--navy-500)); border-color:var(--navy-600); }
.stat-navy .stat .label { color:var(--navy-200); }
.stat-navy .stat .value { color:#fff; }
.stat-navy .stat .trend { color:var(--navy-100); }
.stat-navy .stat .ic { background:rgba(255,255,255,.14); color:var(--gold-300); }
/* Transport Allocation Wise — radio + control rows */
.taw-row { display:flex; align-items:center; gap:14px; padding:8px 0; flex-wrap:wrap; }
.taw-row + .taw-row { border-top:1px dashed var(--grey-200); }
.taw-row > .radio-opt { min-width:88px; }
.taw-row > select { flex:0 1 460px; max-width:460px; }
.taw-row select { border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:13.5px; background:var(--surface); color:var(--text); outline:none; transition:.15s; }
.taw-row select:focus { border-color:var(--navy-400); box-shadow:0 0 0 3px var(--navy-50); }
/* Fee-structure month cards (student profile → Fees → Fee Structure) */
.fee-struct-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-top:12px; }
.fee-struct-card { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); box-shadow:var(--sh-sm); }
.fee-struct-card .fsc-head { background:var(--navy-700); color:#fff; font-weight:700; font-size:14px; padding:11px 16px; letter-spacing:.02em; }
.fee-struct-card .fsc-body { padding:12px 16px; }
.fee-struct-card .fsc-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:13px; }
.fee-struct-card .fsc-row span { color:var(--muted); }
.fee-struct-card .fsc-total { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-top:1px solid var(--border); background:var(--gold-50); }
.fee-struct-card .fsc-total span { font-weight:600; font-size:13px; }
.fee-struct-card .fsc-total b { font-size:15px; color:var(--gold-600); }

/* ============================ Upload dropzone (leave document) ============================ */
.dropzone { display:block; border:1.5px dashed var(--grey-300); border-radius:var(--r); padding:18px; text-align:center;
  color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; background:var(--grey-50);
  transition:border-color .15s, color .15s, background .15s; }
.dropzone:hover { border-color:var(--gold-400); color:var(--navy-700); background:var(--surface); }
.dropzone .dz-name { display:block; margin-top:6px; font-size:12.5px; font-weight:500; color:var(--navy-700); }

/* ==================== Exam pattern — dynamic term / exam / sub-exam builder ==================== */
.term-panel { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.term-panel .tp-head { background:var(--navy-700); color:#fff; text-align:center; padding:11px 14px;
  font-family:var(--font-head); font-size:15px; letter-spacing:.02em; }
.term-panel .tp-body { padding:16px; }
.exam-block { background:var(--grey-50); border:1px solid var(--grey-200); border-radius:var(--r); padding:14px; margin-top:12px; }
.sub-row { background:var(--grey-100); border:1px solid var(--grey-200); border-radius:var(--r-sm); padding:12px; margin-top:10px; }

/* ==================== Mark Allocation landing cards — dark colourways ====================
   Each card is a deep gradient in the Navy & Gold family, lifted with a soft corner
   glow and a fine diagonal weave so the five read as one set but stay distinct. */

/* ==================== Sub Exam — subject picker (mirrors the live block) ==================== */
.subj-pick { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; margin:10px 0 4px; border:1px solid var(--border);
  border-radius:10px; font-size:13.5px; background:var(--grey-50); }
.subj-list { display:flex; flex-wrap:wrap; align-items:center; }
.subj-all { margin-left:auto; }
.subj-item { display:flex; align-items:center; margin:5px 10px; }
.subj-item input { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }
.subj-item label { font-weight:600; font-size:14px; margin-left:6px; cursor:pointer; }
.subj-item input:disabled { cursor:default; }
.subj-item input:disabled + label { color:var(--muted); cursor:default; }

/* View/Edit marks: locked boxes stay readable (values matter), just visibly non-editable */
table.tbl td input[data-ma-mark]:disabled { background:var(--grey-100); color:var(--text); font-weight:600;
  -webkit-text-fill-color:var(--text); opacity:1; cursor:default; }
/* edit mode: unlocked boxes go white with a navy edge so it's obvious they're live */
[data-ma-marks].is-editing table.tbl td input[data-ma-mark] { background:var(--surface); color:var(--text);
  -webkit-text-fill-color:var(--text); border-color:var(--navy-300); font-weight:600; cursor:text; }

/* Non Exam: visible file picker beside the Excel buttons */
.ne-file { font-size:12.5px; max-width:230px; border:1px solid var(--border); border-radius:8px;
  padding:5px 8px; background:var(--surface); }
.ne-file::file-selector-button { border:0; border-radius:6px; padding:5px 10px; margin-right:8px;
  background:var(--grey-200); color:var(--text); font-family:inherit; font-size:12.5px; cursor:pointer; }
.ne-file::file-selector-button:hover { background:var(--navy-100); }

/* Sub Exam View/Edit: marks box + attendance dropdown share a cell */
.mark-cell { display:flex; align-items:center; gap:8px; }
.mark-cell input[data-ma-mark] { max-width:78px; }
.mark-cell select[data-ma-att] { max-width:74px; }
table.tbl td select[data-ma-att]:disabled { background:var(--grey-100); color:var(--text);
  -webkit-text-fill-color:var(--text); opacity:1; cursor:default; font-weight:600; }

/* ==================== Marksheet — report card preview & print ==================== */
.ms-sheet { border:1px solid var(--border); border-radius:var(--r); padding:22px; background:var(--surface);
  margin-bottom:18px; page-break-inside:avoid; break-inside:avoid; }
.ms-sheet + .ms-sheet { page-break-before:always; }
.ms-head { text-align:center; border-bottom:2px solid var(--navy-700); padding-bottom:12px; margin-bottom:16px; }
.ms-head .ms-school { font-family:var(--font-head); font-size:22px; font-weight:700; color:var(--navy-700); letter-spacing:-.01em; }
.ms-head .ms-sub { font-size:12.5px; color:var(--muted); margin-top:4px; letter-spacing:.04em; text-transform:uppercase; }
.ms-meta { display:grid; grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr); gap:2px 20px; margin-bottom:16px; }
.ms-meta .k { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; padding-top:10px; }
.ms-meta .v { font-size:13.5px; font-weight:600; padding-bottom:10px; border-bottom:1px solid var(--grey-100); }
.ms-tbl tbody tr.ms-total td { background:var(--gold-50); border-top:2px solid var(--gold-300); }
.ms-foot { display:flex; justify-content:space-between; margin-top:34px; font-size:12px; color:var(--muted); }
.ms-foot span { border-top:1px solid var(--grey-300); padding-top:6px; min-width:150px; text-align:center; }

/* Printing happens in a dedicated preview window (see msOpenPrintWindow), which
   carries its own stylesheet — no in-page print overrides needed here. */

/* ==================== Attendance validation (days attended vs total days) ==================== */
table.tbl td input.is-invalid { border-color:var(--error) !important; background:var(--error-bg) !important;
  color:var(--error); font-weight:600; }
table.tbl td input.is-invalid:focus { box-shadow:0 0 0 3px rgba(178,58,58,.15); }
.stu-err { color:var(--error); font-size:11px; font-weight:600; margin-top:4px; line-height:1.3; }

/* ==================== Examinations dashboard — dark class cards ====================
   Same gradient family as the Mark Allocation cards so the module reads as one. */

/* ---- School Info › logo upload slots ---- */
.logo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
@media(max-width:1180px){ .logo-grid{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:720px){ .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
.logo-grid .card { display:flex; flex-direction:column; }
.logo-grid .card-head { min-height:62px; align-items:flex-start; }
.logo-grid .card-head h3 { line-height:1.3; }
.logo-grid .card-pad { flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.logo-slot { height:96px; display:grid; place-items:center; border:1px dashed var(--navy-200);
  border-radius:12px; background:var(--navy-50); color:var(--navy-700);
  font-weight:700; font-size:15px; letter-spacing:.04em; word-break:break-all; padding:8px; }
.logo-slot.has-file { border-style:solid; background:var(--surface); font-size:12px; font-weight:600; }
/* Bank Account matrix: inputs sit flush inside the cells */
[data-bank-tbl] input { width:100%; padding:7px 10px; border:1px solid var(--border);
  border-radius:8px; font-size:13px; background:var(--surface); }
[data-bank-tbl] input:disabled { background:var(--grey-50); color:var(--text); border-color:transparent; }

/* ---- School Info › location map ---- */
.map-wrap { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--grey-50); }
.map-embed { width:100%; height:360px; border:0; display:block; }
@media(max-width:720px){ .map-embed{height:260px;} }

/* ---- School Settings hub tiles ---- */
.set-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media(max-width:1100px){ .set-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:680px){ .set-grid{grid-template-columns:minmax(0,1fr);} }
.set-tile { transition:border-color .15s, box-shadow .15s, transform .15s; }
.set-tile:hover { border-color:var(--navy-200); box-shadow:var(--sh-md); transform:translateY(-1px); }
.set-tile .ic-svg:last-child { color:var(--muted); flex:0 0 18px; }

/* ---- Draggable table rows (Classes) ---- */
.drag-handle { display:inline-flex; align-items:center; vertical-align:middle; margin-right:9px;
  color:var(--grey-400,#9aa3b2); cursor:grab; border-radius:5px; padding:1px; }
.drag-handle:hover { color:var(--navy-700); background:var(--navy-50); }
.drag-handle:active { cursor:grabbing; }
.drag-handle svg { width:15px; height:15px; }
tbody[data-ent-drag] tr { transition:background .12s, opacity .12s; }
tbody[data-ent-drag] tr:hover { background:var(--grey-50); }
tbody[data-ent-drag] tr.dragging { opacity:.4; background:var(--navy-50); }
tbody[data-ent-drag] tr.just-moved { background:var(--navy-50); }
.drag-note { display:flex; align-items:center; gap:8px; padding:10px 20px; font-size:12.5px;
  color:var(--muted); border-bottom:1px solid var(--border); background:var(--grey-50); }
.drag-note svg { width:15px; height:15px; flex:0 0 15px; }

/* ---- Configure Fee › View Schedule modal ---- */
.sched-head { display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.sched-session { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-700); }
.sched-total { font-size:14px; font-weight:700; color:var(--gold-600,#a1802f); }
.sched-meta { font-size:12.5px; color:var(--muted); margin-top:5px; }
.sched-meta b { color:var(--text); }
.sched-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media(max-width:1000px){ .sched-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:600px){ .sched-grid{grid-template-columns:minmax(0,1fr);} }
.sched-card { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface); }
.sched-card-h { padding:9px 12px; font-weight:700; font-size:13px; border-bottom:1px solid var(--border); background:var(--grey-50); }
.sched-card-b { padding:10px 12px; }
.sched-row { display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:4px 0; color:var(--muted); }
.sched-row b { color:var(--text); font-weight:600; }
.sched-row.tot { border-top:1px solid var(--border); margin-top:6px; padding-top:8px; font-weight:700; color:var(--text); }
.sched-row.tot b { color:var(--gold-600,#a1802f); }

/* ---- Payment Correction ---- */
.empty-note { padding:26px 20px; text-align:center; font-size:13px; color:var(--muted);
  border-top:1px solid var(--border); }
[data-pc-rows] input[type=date], [data-pc-rows] input[type=text] {
  width:100%; padding:6px 9px; border:1px solid var(--border); border-radius:8px;
  font-size:12.5px; background:var(--surface); }
[data-pc-rows] input[type=checkbox] { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }
[data-pc-rows] select { width:100%; padding:6px 26px 6px 9px; border:1px solid var(--border);
  border-radius:8px; font-size:12.5px; background-color:var(--surface); }
.tbl tfoot tr.rv-total td { background:var(--grey-50); border-top:2px solid var(--border);
  font-size:13px; padding:11px 14px; }
[data-bulk-rows] input[type=number], [data-bulk-rows] input[type=text],
[data-bulk-rows] input[type=date], [data-bulk-rows] select {
  width:100%; padding:6px 9px; border:1px solid var(--border); border-radius:8px;
  font-size:12.5px; background-color:var(--surface); }
[data-bulk-rows] input[type=checkbox] { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }

/* ============================ Exam Pattern — View tree ============================ */
.pt-view { display:flex; flex-direction:column; gap:6px; }
.pt-meta { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
.pt-meta > div { display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  background:var(--gold-100); border:1px solid var(--gold-200); border-radius:10px; padding:8px 14px; }
.pt-meta-k { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-600); }
.pt-meta b { font-size:14px; color:var(--navy-700); }
.pt-tree-wrap { overflow-x:auto; padding:10px 4px 4px; }
/* Classic centred CSS tree with elbow connectors. */
.pt-tree ul { position:relative; padding-top:22px; display:flex; justify-content:center; margin:0; }
.pt-tree, .pt-tree > ul { padding-top:0; }
.pt-tree li { list-style:none; position:relative; padding:22px 10px 0; display:flex; flex-direction:column; align-items:center; }
.pt-tree li::before, .pt-tree li::after { content:''; position:absolute; top:0; right:50%; width:50%; height:22px; border-top:2px solid var(--navy-200); }
.pt-tree li::after { right:auto; left:50%; border-left:2px solid var(--navy-200); }
.pt-tree li:only-child::after, .pt-tree li:only-child::before { display:none; }
.pt-tree li:only-child { padding-top:22px; }
.pt-tree li:first-child::before, .pt-tree li:last-child::after { border:0 none; }
.pt-tree li:last-child::before { border-right:2px solid var(--navy-200); border-radius:0 6px 0 0; }
.pt-tree li:first-child::after { border-radius:6px 0 0 0; }
.pt-tree ul ul::before { content:''; position:absolute; top:0; left:50%; border-left:2px solid var(--navy-200); width:0; height:22px; }
.pt-tree > ul > li { padding-top:0; }
.pt-tree > ul > li::before, .pt-tree > ul > li::after { display:none; }
.pt-node { display:inline-flex; flex-direction:column; align-items:center; gap:3px;
  min-width:130px; padding:12px 16px; border-radius:12px; background:var(--navy-50);
  border:1px solid var(--navy-200); color:var(--navy-700); box-shadow:var(--sh-sm); }
.pt-node b { font-size:13.5px; color:var(--navy-800,#16233c); }
.pt-node span { font-size:11.5px; color:var(--muted); line-height:1.5; text-align:center; }
.pt-node.pt-root { background:var(--navy-700); border-color:var(--navy-700); }
.pt-node.pt-root b { color:#fff; }
.pt-node.pt-term { background:var(--gold-50); border-color:var(--gold-200); }
.pt-node.pt-term b { color:var(--gold-600); }
.pt-node.pt-sub { min-width:100px; background:var(--surface); }

/* ---- Exam schedule / timetable entry grids ---- */
.xsched-grid th input[type=date], .xsched-grid th input[type=time] {
  display:block; margin-top:6px; width:100%; max-width:170px; padding:5px 8px;
  border:1px solid var(--border); border-radius:7px; font-size:12px;
  font-weight:400; background:var(--surface); color:var(--text); }
.xsched-grid td input[type=date], .xsched-grid td input[type=time] {
  width:100%; max-width:180px; padding:6px 9px; border:1px solid var(--border);
  border-radius:8px; font-size:12.5px; background:var(--surface); }
.xsched-grid input[type=checkbox] { width:16px; height:16px; accent-color:var(--navy-600); cursor:pointer; }

/* ============================================================================
   Fee · Admission · Class — components introduced with the redesigned screens.
   Everything here is shared; nothing is module-private.
   ========================================================================== */

/* ---- Split bar: one proportion, where a row of stat cards used to sit ---- */
.split { display:flex; flex-direction:column; gap:10px; }
.sb-track { height:10px; border-radius:5px; background:var(--grey-100); overflow:hidden; display:flex; }
.sb-seg { display:block; height:100%; }
.sb-legend { display:flex; flex-wrap:wrap; gap:8px 22px; }
.sb-key { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.sb-key i { width:9px; height:9px; border-radius:3px; flex:0 0 9px; }
.sb-key b { font-size:15px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.sb-key em { font-style:normal; color:var(--grey-500); font-variant-numeric:tabular-nums; }

/* ---- Month cards: four states, matching the legend on the Fee screen ----
   due = payable now (amber) · overdue = past its date (red) · soon = not yet
   due (dashed, inert) · paid = settled. Selected fills navy so the receipt
   being built reads as one block. */
.pay-month.due { border-top-color:var(--warning); }
.pay-month.due.overdue { border-top-color:var(--error); background:var(--error-bg); }
.pay-month.soon { border-style:dashed; border-top:3px dashed var(--grey-300); background:var(--grey-50); cursor:default; }
.pay-month.soon .pm-top b, .pay-month.soon .pm-row b { color:var(--grey-500); }
.pay-month.due.selected { outline:none; border-color:var(--navy-900); background:var(--navy-900); box-shadow:var(--sh-md); }
.pay-month.due.overdue.selected { border-top-color:var(--error); }
.pay-month.due.selected .pm-top b, .pay-month.due.selected .pm-row b { color:#fff; }
.pay-month.due.selected .pm-row { color:var(--navy-200); }
.pay-month.due.selected .pm-check { display:inline-flex; color:var(--gold-400); }
.pay-month.due.selected .pm-info { color:var(--navy-200); }
.pm-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pm-legend span { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.pm-legend i { width:9px; height:9px; border-radius:3px; flex:0 0 9px; }

/* ---- Collection desk: months on the left, a running total that never scrolls away ---- */
.pay-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
@media(max-width:1100px){ .pay-grid { grid-template-columns:minmax(0,1fr); } }
.pay-rail { background:var(--navy-900); color:#fff; border-radius:var(--r-lg); padding:20px;
  display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--topbar-h) + 16px); }
.pay-rail .pr-cap { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--navy-200); }
.pay-rail .pr-total { font-family:var(--font-head); font-size:36px; font-weight:600; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pay-rail .pr-count { font-size:12.5px; color:var(--navy-200); }
.pay-rail .pr-lines { background:rgba(255,255,255,.04); border:1px solid var(--navy-700); border-radius:var(--r);
  padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.pay-rail .pr-row { display:flex; align-items:baseline; gap:10px; font-size:12.5px; color:#c7d0de; }
.pay-rail .pr-row b { margin-left:auto; color:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.pay-rail .pr-row.zero, .pay-rail .pr-row.zero b { color:var(--navy-200); font-weight:400; }
.pay-rail .pr-row.total { border-top:1px solid var(--navy-700); padding-top:8px; font-size:13.5px; font-weight:700; color:#fff; }
.pay-rail .pr-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.pay-rail .pr-mode { height:36px; border-radius:9px; border:1px solid var(--navy-700); background:transparent;
  color:var(--navy-100); font-size:12.5px; font-weight:600; }
.pay-rail .pr-mode:hover { background:var(--navy-800); }
.pay-rail .pr-mode.on { background:#fff; border-color:#fff; color:var(--navy-900); }
.pay-rail label { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--navy-200); display:block; margin-bottom:6px; }
.pay-rail input { width:100%; height:40px; border-radius:9px; border:1px solid var(--navy-700);
  background:var(--navy-800); color:#fff; padding:0 12px; font-family:inherit; font-size:13px; }
.pay-rail input::placeholder { color:var(--navy-300); }
.pay-rail .pr-by { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--navy-200); }
.pay-rail .pr-by svg { width:14px; height:14px; }
.pay-rail .btn-primary { background:var(--gold-400); border-color:var(--gold-400); color:var(--navy-900); height:48px; font-size:14.5px; }
.pay-rail .btn-primary:hover:not(:disabled) { background:var(--gold-300); border-color:var(--gold-300); }
.pay-rail .btn-primary:disabled { background:var(--navy-700); border-color:var(--navy-700); color:var(--navy-300); }
.pay-rail .btn-soft { background:transparent; border-color:var(--navy-700); color:var(--navy-100); }
.pay-rail .btn-soft:hover { background:var(--navy-800); }

/* ---- Session ledger strip under the month grid ---- */
.ses-foot { display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  border-top:1px solid var(--grey-100); padding-top:14px; margin-top:14px; }
.ses-foot .sf-k { display:flex; flex-direction:column; gap:3px; }
.ses-foot .sf-k span { font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--muted); }
.ses-foot .sf-k b { font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; }
.ses-foot .sf-k b.ok { color:var(--success); } .ses-foot .sf-k b.bad { color:var(--error); }
.ses-foot .sf-k b.mute { color:var(--muted); }

/* ---- "Still to set up" tiles (Class) ---- */
.gap-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media(max-width:1000px){ .gap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px){ .gap-grid { grid-template-columns:minmax(0,1fr); } }
.gap-tile { background:var(--grey-50); border:1px solid var(--grey-100); border-radius:var(--r);
  padding:13px 14px; display:flex; flex-direction:column; gap:6px; }
.gap-tile .gt-h { display:flex; align-items:baseline; gap:7px; }
.gap-tile .gt-h b { font-size:19px; font-weight:700; color:var(--warning); font-variant-numeric:tabular-nums; }
.gap-tile .gt-h span { font-size:12.5px; font-weight:600; }
.gap-tile p { font-size:12px; color:var(--muted); line-height:1.45; }
.gap-tile a { font-size:12px; font-weight:600; color:var(--navy-500); margin-top:2px; }
.gap-tile a:hover { color:var(--navy-900); text-decoration:underline; }

/* ---- Promote: source → destination on one line ---- */
.move-bar { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.move-bar .mb-leg { display:flex; flex-direction:column; gap:6px; }
.move-bar .mb-leg > span { font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--muted); }
.move-bar .mb-fields { display:flex; gap:8px; flex-wrap:wrap; }
.move-bar select { height:40px; border:1px solid var(--border); border-radius:9px; background:var(--surface);
  padding:0 10px; font-family:inherit; font-size:13px; color:var(--text); }
.move-bar .mb-to select { border-color:var(--navy-900); font-weight:600; }
.move-bar .mb-arrow { height:40px; display:grid; place-items:center; color:var(--grey-400); }
.move-bar .mb-arrow svg { width:24px; height:24px; }
.move-bar .mb-count { display:flex; flex-direction:column; gap:4px; }
.move-bar .mb-count span { font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--muted); }
.move-bar .mb-count b { font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---- Fee cell: what was collected, or the button to collect it ---- */
.fee-cell { display:flex; flex-direction:column; gap:1px; }
.fee-cell b { font-size:13.5px; font-variant-numeric:tabular-nums; }
.fee-cell span { font-size:11px; color:var(--muted); }
.dupe-tag { display:inline-block; font-size:10.5px; font-weight:600; color:var(--gold-600);
  background:var(--gold-50); padding:2px 8px; border-radius:20px; margin-top:3px; }
tr.is-dupe > td { background:#fffdf8; }

/* A summary item may carry the context line its stat card used to show. */
.sum-item em { font-style:normal; font-size:12px; color:var(--grey-500); }
.sum-item b.ok { color:var(--success); }

/* An empty list explains itself rather than shrugging. */
.tt-empty b { display:block; font-size:13.5px; font-weight:600; color:var(--text); }
.tt-empty span { display:block; font-size:12.5px; color:var(--muted); margin:5px auto 0; max-width:52ch; line-height:1.5; }

/* ---- Scope strip: the selects a screen needs, on one line ---- */
.scope-strip { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  padding:12px 14px; margin-bottom:14px; }
.scope-strip > .grow { flex:1; min-width:0; }
.ss-f { display:flex; flex-direction:column; gap:5px; min-width:150px; }
.ss-f.wide { min-width:240px; flex:1; }
.ss-f > span { font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--muted); text-transform:uppercase; }
.ss-f select, .ss-f input { height:38px; border:1px solid var(--border); border-radius:9px; background:var(--surface);
  padding:0 10px; font-family:inherit; font-size:13px; color:var(--text); width:100%; }
.ss-f input[readonly] { background:var(--grey-50); color:var(--muted); }
.ss-f select:focus, .ss-f input:focus { outline:2px solid var(--gold-300); outline-offset:1px; border-color:var(--gold-400); }
.ss-note { font-size:12.5px; color:var(--muted); align-self:center; }
.scope-strip .btn { margin-bottom:0; }

/* Chips sit in the list bar, beside the Filters button that made them. */
.chip-slot { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.table-toolbar .f-chip { margin:0; }
.table-toolbar[data-list-bar] { gap:10px; }

/* Where data-jump lands, so the eye can find it after the scroll. */
@keyframes flash-in { from { box-shadow:0 0 0 3px var(--gold-300); } to { box-shadow:0 0 0 3px transparent; } }
.is-flash { animation:flash-in 1.4s ease-out 1; border-radius:var(--r-lg); }
@media (prefers-reduced-motion:reduce){ .is-flash { animation:none; outline:2px solid var(--gold-400); outline-offset:2px; } }

/* A tab strip that had to collapse: the dropdown must not be clipped by the
   scroll container the strip normally is. */
.tabs.has-more { overflow:visible; }
.tabs .tab-more { position:relative; margin-left:auto; }
.tabs .tab-more-btn { display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; white-space:nowrap; }
.tabs .tab-more-btn::-webkit-details-marker { display:none; }
.tabs .tab-more[open] .tab-more-btn { color:var(--text); }
.tabs .tab-more .dd-menu { max-height:min(60vh,420px); overflow-y:auto; min-width:220px; }
.tabs .tab-more .dd-label, .tabs .tab-group .dd-label { padding:9px 11px 4px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.tabs .dd-item.dd-sub { padding-left:22px; }

/* Grouped tabs — a named dropdown standing in for a run of sibling screens. */
.tabs.has-groups { overflow:visible; }
.tabs .tab-group { position:relative; }
.tabs .tab-group-btn { display:flex; align-items:center; gap:7px; }
.tabs .tab-group.active > .tab-group-btn { color:var(--navy-700); border-bottom-color:var(--gold-400); }
.tabs .tab-group[open] > .tab-group-btn { color:var(--text); }
.tabs .tab-group .tg-on { font-weight:500; font-size:12.5px; color:var(--muted); padding-left:7px; border-left:1px solid var(--border); }
.tabs .tab-group.active .tg-on { color:var(--navy-700); }
.tabs .tab-group .dd-menu { max-height:min(60vh,420px); overflow-y:auto; min-width:210px; }
.tabs .dd-item.on { background:var(--grey-100); color:var(--navy-700); font-weight:600; }

/* Settings switch row — a toggle with room for the sentence that says what
   turning it off actually costs. */
.set-sw { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:12px 0; border-bottom:1px solid var(--grey-100); cursor:pointer; }
.set-sw:last-child { border-bottom:none; }
.set-sw-t { max-width:680px; }
.set-sw-t b { font-size:13.5px; display:block; }
.set-sw-t span { display:block; font-size:12.5px; line-height:1.55; color:var(--muted); margin-top:3px; }
.set-sw .toggle { flex:0 0 auto; margin-top:2px; }


/* ============================ Grid templates ============================
   These were style attributes on the element. A style attribute outranks
   every media query, so the responsive rules at the bottom of this file could
   only reach them with !important — which is why they are classes now.

   minmax(0,1fr) rather than a bare 1fr: a 1fr track takes its minimum from its
   content, which is the blowout that took every screen sideways on a phone. */
.gt-1 { grid-template-columns:minmax(0,1fr); }
.gt-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.gt-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.gt-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.gt-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }

/* A one-off template — a 34px checkbox rail, an auto-fit gallery — keeps its
   own shape in a custom property. The element still says what it is, but the
   property the cascade needs to override is set here, not inline. */
.gx { grid-template-columns:var(--gx,1fr); }

.gc-2 { grid-column:span 2; }  .gc-4 { grid-column:span 4; }
.gc-5 { grid-column:span 5; }  .gc-6 { grid-column:span 6; }
.gc-7 { grid-column:span 7; }  .gc-8 { grid-column:span 8; }

@media(max-width:900px){
  .gt-3, .gt-4, .gt-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Declared further up the file than the narrow-screen blocks, so its 360px
     floor has to be lifted from here to be lifted at all. */
  .asub-main { min-width:0; }
}
@media(max-width:760px){
  .asub-row.gx { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:640px){
  .gt-2, .gt-3, .gt-4, .gt-5, .gx { grid-template-columns:minmax(0,1fr); }
  .gc-2, .gc-4, .gc-5, .gc-6, .gc-7, .gc-8 { grid-column:auto; }
}

/* Student profile: income-head chips that open Income · Add Payment */
.chip-lbl { font-size:12px; font-weight:700; color:var(--muted); align-self:center; }
.chip-link { cursor:pointer; border:0; font:inherit; font-size:12px; display:inline-flex; align-items:center; gap:4px; }
.chip-link svg { width:12px; height:12px; }
.chip-link:hover { filter:brightness(.95); }
.chip-link:focus-visible { outline:2px solid var(--accent,#c9a24a); outline-offset:2px; }
.chip-link.is-paid { cursor:default; }
.chip-link.is-paid:hover { filter:none; }
.ph-actions { gap:8px; }

/* Exam Schedule grid: a tick beside the class and the section, dates open once the row is ticked */
.chk-lbl { display:inline-flex; align-items:center; gap:8px; cursor:pointer; }
.xsched-grid input[type=date]:disabled { opacity:.5; cursor:not-allowed; }
.field-err { color:var(--red,#b23a3a); font-size:13px; font-weight:600; margin-left:12px; }

/* Exam Time Table (live flow): a section row beside its exam select, the exam-count selects, the subject column */
.tt-secrow { display:grid; grid-template-columns:minmax(120px,1fr) minmax(220px,2fr); gap:16px; align-items:end; margin-top:14px; }
.tt-secrow .chk-lbl { min-height:40px; }
.tt-counts { display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
.tt-count { display:inline-flex; align-items:center; gap:8px; }
.tt-count select { width:72px; }
.ttv1-grid td.ttg-subj { background:var(--navy-700,#1b2a4a); color:#fff; font-weight:700; font-size:12px; letter-spacing:.04em; white-space:nowrap; }
.ttv1-grid input[type=number] { max-width:130px; }
.ttv1-grid input[type=text] { min-width:150px; }

/* ==================== External Web Apps (V1 public links) ====================
   The teacher helper, admissions assistant and parent portal, framed as the
   public page a teacher or family opens. Prefix xt-. */
.xt-linkcard { margin-bottom:14px; }
.xt-link-row { display:grid; grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)); gap:16px; align-items:start; }
@media(max-width:1100px){ .xt-link-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:680px){ .xt-link-row { grid-template-columns:minmax(0,1fr); } }
.xt-k { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:4px; }
.xt-v { font-size:13px; line-height:1.5; }
.xt-link { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.xt-link code, .xt-ov-url { font-family:var(--font-mono); font-size:12px; background:var(--grey-100); border:1px solid var(--border); padding:4px 8px; border-radius:var(--r-sm); word-break:break-all; }

.xt-browser { border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); background:#f5f5f5; }
.xt-bar { display:flex; align-items:center; gap:12px; padding:9px 14px; background:var(--grey-100); border-bottom:1px solid var(--border); }
.xt-dots { display:flex; gap:6px; } .xt-dots i { width:10px; height:10px; border-radius:50%; background:var(--grey-300); }
.xt-url { flex:1; display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:12px; color:var(--muted); min-width:0; }
.xt-url span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xt-url svg { width:13px; height:13px; flex:0 0 13px; }
.xt-page { position:relative; min-height:520px; padding-bottom:44px; }
.xt-powered { position:absolute; right:14px; bottom:10px; font-size:11px; color:var(--muted); background:#fff; border:1px solid var(--border); border-radius:8px; padding:3px 9px; }
.xt-powered b { color:var(--navy-700); }

.xt-head { background:#11203b; color:#fff; padding:14px 18px; }
.xt-head-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.xt-title { font-weight:600; font-size:17px; }
.xt-sub { font-size:12.5px; opacity:.8; margin-top:2px; }
.xt-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.xt-tab { display:inline-flex; align-items:center; gap:6px; border:none; background:rgba(255,255,255,.1); color:#fff; padding:7px 13px; border-radius:8px; font:inherit; font-size:13px; cursor:pointer; }
.xt-tab svg { width:15px; height:15px; }
.xt-tab:hover { background:rgba(255,255,255,.18); }
.xt-tab.on { background:#fff; color:var(--navy-800); font-weight:600; }
.xt-tab.xt-out { margin-left:auto; background:none; border:1px solid rgba(255,255,255,.6); }
.xt-child { font:inherit; font-size:13px; padding:4px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.5); background:#fff; color:var(--navy-800); }
.btn.xt-on-dark { background:rgba(255,255,255,.12); color:#fff; }
.btn.xt-on-dark:hover { background:rgba(255,255,255,.22); }

.xt-body { padding:16px; }
.xt-two { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start; }
@media(max-width:900px){ .xt-two { grid-template-columns:minmax(0,1fr); } }
.xt-card { background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:14px; margin-bottom:12px; }
.xt-card-h { font-weight:600; font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:7px; }
.xt-card-h svg { width:16px; height:16px; }
.xt-h4 { font-size:15px; font-weight:600; }
.xt-help { font-size:12px; line-height:1.6; margin-bottom:10px; }
.xt-lbl { font-size:12.5px; font-weight:600; margin-bottom:6px; }
.xt-row3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media(max-width:680px){ .xt-row3 { grid-template-columns:minmax(0,1fr); } }
.xt-inline { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.xt-topic, .xt-pat { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.xt-topic > input[type=text], .xt-pat > input[type=text] { flex:1; min-width:140px; }
.xt-pat label { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.xt-pat label input { width:64px; }
.xt-pat b { min-width:42px; font-size:13px; }
.xt-mk { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.xt-mk input { width:56px; border:none !important; }
.xt-mk i { font-style:normal; font-size:12px; color:var(--muted); background:var(--grey-100); padding:0 8px; align-self:stretch; display:grid; place-items:center; }
.xt-check { display:flex; align-items:center; gap:8px; font-size:13px; }
.xt-item { display:flex; align-items:center; gap:10px; padding:10px; border-radius:8px; border:1px solid transparent; cursor:pointer; }
.xt-item + .xt-item { border-top-color:var(--grey-100); }
.xt-item:hover { background:var(--grey-50); }
.xt-item.on { background:var(--navy-50); border-color:var(--navy-100); }
.xt-item .grow { flex:1; min-width:0; }
.xt-item > svg { transform:rotate(-90deg); color:var(--muted); width:16px; }
.xt-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.xt-empty { text-align:center; color:var(--muted); padding:44px 16px; font-size:13px; }
.xt-empty svg { width:36px; height:36px; color:var(--grey-300); margin-bottom:10px; }
.xt-sec { border-top:1px dashed var(--border); padding-top:10px; margin-top:10px; font-size:13px; }
.xt-sec ol { margin:6px 0 0 18px; }
.xt-q { padding:8px 0; font-size:13px; line-height:1.55; }
.xt-q textarea { width:100%; margin-top:6px; }
.xt-opts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 16px; color:var(--muted); margin-top:3px; }
.xt-radio { display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:6px; }
.xt-radio label { display:flex; align-items:center; gap:6px; }
.xt-more { font-size:12px; }
.xt-foot { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
.xt-summary { background:var(--grey-50); border:1px solid var(--border); border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.65; }
.xt-summary p + p { margin-top:8px; }
.xt-summary[contenteditable]:focus { outline:2px solid var(--gold-300); }
.xt-sub-tag { font-size:10.5px; font-weight:600; color:var(--warning); background:var(--warning-bg); border-radius:5px; padding:1px 6px; }
.xt-notice { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.5; background:var(--success-bg); color:var(--success); border-radius:8px; padding:9px 11px; margin:10px 0; }
.xt-notice svg { width:16px; height:16px; flex:0 0 16px; margin-top:1px; }
.xt-notice.warn { background:var(--warning-bg); color:var(--warning); }
.xt-notice.bad { background:var(--error-bg); color:var(--error); }

.xt-chat { max-width:760px; margin:0 auto; display:flex; flex-direction:column; min-height:440px; }
.xt-log { flex:1; max-height:460px; overflow-y:auto; padding:4px 2px 10px; }
.xt-intro { text-align:center; margin:28px auto 10px; max-width:560px; color:var(--muted); font-size:14px; line-height:1.6; }
.xt-intro-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; margin:0 auto 12px; background:var(--navy-50); color:var(--navy-600); }
.xt-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:14px; }
.xt-chips-sm { justify-content:flex-start; margin:0 0 10px; }
.xt-chip { border:1px solid var(--navy-100); background:#fff; color:var(--navy-700); border-radius:20px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; }
.xt-chip:hover { background:var(--navy-50); }
.xt-msg { display:flex; margin-bottom:10px; }
.xt-msg.user { justify-content:flex-end; }
.xt-bub { max-width:82%; background:#fff; padding:10px 14px; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.06); font-size:13.5px; line-height:1.6; }
.xt-msg.user .xt-bub { background:#1b2b45; color:#fff; }
.xt-bub ul, .xt-bub ol { margin:4px 0 0 18px; }
.xt-compose { display:flex; gap:8px; align-items:center; }
.xt-compose input { flex:1; }

.xt-apply { max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--border); border-radius:var(--r); padding:16px; }
.xt-fs { margin:16px 0 6px; font-weight:600; font-size:13px; color:#475467; }
.xt-submit { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; }
.xt-success { max-width:520px; margin:40px auto; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; text-align:center; font-size:14px; line-height:1.6; }
.xt-success > svg { width:44px; height:44px; color:var(--success); }
.xt-success h3 { margin:8px 0; font-size:20px; }
.xt-success p { margin-bottom:10px; }

.xt-ov h3 { font-size:17px; margin-top:12px; }
.xt-ov-ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; }
.xt-ov-url { display:block; margin:12px 0; }
.xt-ov-list { margin:0 0 14px 18px; font-size:13px; line-height:1.7; }
.xt-ov-btns { display:flex; gap:8px; flex-wrap:wrap; }
/* Inputs outside a .field (chat composer, topic and pattern rows, answer boxes)
   take the same look as field inputs. */
.xt-compose input, .xt-topic > input, .xt-pat input, .xt-q textarea {
  border:1px solid var(--border); border-radius:var(--r-sm); padding:9px 12px; font:inherit; font-size:13.5px; background:#fff; color:var(--text); outline:none; }
.xt-mk input { padding:8px 10px; font:inherit; font-size:13.5px; outline:none; }
.xt-compose input:focus, .xt-topic > input:focus, .xt-pat input:focus, .xt-q textarea:focus { border-color:var(--navy-400); box-shadow:0 0 0 3px var(--navy-50); }