/* ============================================================================
   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:260px; --topbar-h:68px;
}

* { 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; }

.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:column; overflow:hidden;
}
.brand {
  display:flex; align-items:center; gap:12px; padding:20px 22px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand .logo {
  width:38px; height:38px; border-radius:11px; flex:0 0 38px;
  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:18px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.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:10px 12px 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:11px; padding:9px 12px; 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:18px; height:18px; flex:0 0 18px; stroke-width:2; 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:10px; font-weight:700; background:var(--gold-400); color:var(--navy-900); padding:1px 7px; border-radius:20px; }
.nav-caret { margin-left:auto; display:grid; place-items:center; transition:transform .2s; opacity:.6; }
.nav-caret svg { width:15px; height:15px; }
.nav-item.expanded .nav-caret { transform:rotate(180deg); }
.nav-item[data-parent] .nav-badge + .nav-caret { margin-left:8px; }
.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 41px; 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:24px; 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); }

.content { padding:28px 32px 60px; max-width:1320px; width:100%; margin:0 auto; }

/* ============================ Page header ============================ */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.crumb { font-size:12px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; font-weight:600; margin-bottom:7px; }
.crumb b { color:var(--gold-600); }
.page-head h1 { font-size:30px; }
.page-head p.sub { color:var(--muted); font-size:13.5px; margin-top:5px; }
.head-actions { display:flex; gap:10px; align-items:center; }

/* ============================ 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:22px 24px; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; 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:18px; }
.g-2 { grid-template-columns:repeat(2,1fr); }
.g-3 { grid-template-columns:repeat(3,1fr); }
.g-4 { grid-template-columns:repeat(4,1fr); }
.g-12 { grid-template-columns:2fr 1fr; }
@media(max-width:1100px){ .g-4{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(2,1fr);} .g-12{grid-template-columns:1fr;} }
@media(max-width:680px){ .g-4,.g-3,.g-2{grid-template-columns: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; }
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); }

.table-toolbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.table-toolbar .grow { flex:1; }
.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,1fr); gap:14px; padding:20px 24px; }
@media(max-width:900px){ .filter-bar{grid-template-columns:repeat(2,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 {
  width:100%; 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:22px; overflow-x:auto; }
.tab { padding:11px 16px; font-size:13.5px; font-weight:600; color:var(--muted); border-bottom:2px solid transparent; white-space:nowrap; cursor:pointer; }
.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:16px}.mt-3{margin-top:24px}.mb-2{margin-bottom:16px}
.section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px; }

/* Progress / bar chart */
.bars { display:flex; align-items:flex-end; gap:14px; height:170px; padding-top:10px; }
.bars .bar-col { flex:1; 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,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,1fr); gap:14px; }
@media(max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,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,1fr); gap:18px; }
@media(max-width:900px){ .form-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.form-section { padding:24px; border-bottom:1px solid var(--border); }
.form-section:last-child { border-bottom:none; }
.fs-head { display:flex; align-items:center; gap:11px; margin-bottom:18px; }
.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:18px 24px; display:flex; justify-content:flex-end; 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 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px 24px; }
.kv .k { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; padding-top:14px; }
.kv .v { font-size:14px; font-weight:500; padding-bottom:14px; border-bottom:1px solid var(--grey-100); }

/* 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: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,1fr); gap:10px 14px; margin-top:12px; }
@media(max-width:760px){ .chk-grid{grid-template-columns:repeat(2,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,1fr); gap:2px 26px; }
@media(max-width:900px){ .info-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .info-grid{grid-template-columns: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,1fr); gap:12px; }
@media(max-width:1000px){ .pay-months{grid-template-columns:repeat(3,1fr);} }
@media(max-width:760px){ .pay-months{grid-template-columns:repeat(2,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; }
.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;}
  .topbar{padding:0 16px;}
}

/* ============================ 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-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 1fr 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{grid-template-columns:1fr !important;} .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. */
.mark-card { position:relative; overflow:hidden; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.10);
  padding:22px; display:flex; flex-direction:column; color:#fff;
  box-shadow:0 6px 18px rgba(13,22,38,.22);
  transition:transform .16s ease, box-shadow .16s ease; }
/* gold hairline along the top edge */
.mark-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--gold-400); }

.mark-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,22,38,.30); }
.mark-card > * { position:relative; z-index:1; }
.mark-card .mc-title { font-family:var(--font-head); font-size:15.5px; letter-spacing:.06em;
  text-transform:uppercase; margin:0; color:#fff; }
.mark-card .mc-sub { font-size:13px; color:rgba(255,255,255,.72); margin-top:7px; flex:1; }
.mark-card .mc-ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; flex:0 0 38px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); color:#fff; }
.mark-card .mc-ic svg { width:18px; height:18px; }
/* button reads as glass on the dark ground */
.mark-card .btn { align-self:flex-start; background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.22); }
.mark-card .btn:hover { background:rgba(255,255,255,.24); }

/* flat dark fills — no gradient */
.mc-navy  { background:#25395e; }
.mc-gold  { background:#7d612a; }
.mc-green { background:#1d5740; }
.mc-info  { background:#1e4468; }
.mc-plum  { background:#7d5111; }

/* ==================== 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 1fr auto 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. */
.exam-card { position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.10); padding:18px 18px 16px; color:#fff;
  display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(13,22,38,.22);
  transition:transform .16s ease, box-shadow .16s ease; }
.exam-card::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:var(--gold-400); }

.exam-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,22,38,.30); }
.exam-card > * { position:relative; z-index:1; }

.exam-card .ec-head { font-family:var(--font-head); font-size:16px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; text-align:center; padding-bottom:11px; margin-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.22); }
.exam-card .ec-label { font-size:12px; font-weight:700; text-align:center; margin-bottom:9px;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.80); }
.exam-card .ec-list { display:flex; flex-direction:column; gap:7px; flex:1; }
.exam-card .ec-row { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; }
.exam-card .ec-name { font-weight:600; }
.exam-card .ec-st { font-size:11.5px; font-weight:700; white-space:nowrap; }
.exam-card .ec-st.done { color:#8fe0b0; }   /* Completed */
.exam-card .ec-st.live { color:var(--gold-300); }  /* Ongoing  */
.exam-card .ec-st.soon { color:rgba(255,255,255,.62); } /* Upcoming */
.exam-card .ec-empty { font-size:12.5px; color:rgba(255,255,255,.62); padding:10px 0; text-align:center; flex:1; }

.exam-card .ec-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.exam-card .ec-actions .btn { background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.22); }
.exam-card .ec-actions .btn:hover { background:rgba(255,255,255,.24); }
.exam-card .ec-secs { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
.exam-card .ec-sec { display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 8px;
  border-radius:7px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.20);
  font-size:11.5px; font-weight:700; cursor:pointer; }
.exam-card .ec-sec:hover { background:rgba(255,255,255,.24); }

/* ---- School Info › logo upload slots ---- */
.logo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1180px){ .logo-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:720px){ .logo-grid{grid-template-columns:repeat(2,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,1fr); gap:12px; }
@media(max-width:1100px){ .set-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:680px){ .set-grid{grid-template-columns: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,1fr); gap:12px; }
@media(max-width:1000px){ .sched-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){ .sched-grid{grid-template-columns: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; }