/* ============================================================
   REMIS — powered by Ribaad Technology
   Palette sampled directly from the Ribaad Technology logo:
   - Deep navy (wordmark / R stroke)  #0B1633 / #14235E
   - Primary brand blue               #1B3FA0
   - Bright accent blue (swirl)       #2F7BEA / #4FC3F7
   - Ink                              #0B2038
   - Paper                            #F4F7FB
   Clean, minimal, light-first UI with a matching navy-slate dark mode.
   ============================================================ */

:root{
  /* ---- Brand: navy + electric blue, sampled from the Ribaad Technology
     logo mark ----
     brand-600 (#1B3FA0) is the solid primary — white text on it passes
     WCAG AA. brand-500 (#2F7BEA) is the bright accent blue used for links,
     focus and active states, echoing the logo's swirl gradient. */
  --brand-700:#0F2B6B;
  --brand-600:#1B3FA0;
  --brand-500:#2F7BEA;
  --brand-300:#8FB8F5;
  --brand-100:#E7F0FD;

  /* Legacy names kept so every existing rule re-skins automatically. */
  --navy:var(--brand-600);
  --navy-dark:var(--brand-700);
  --navy-darker:#081A3E;
  --sky:var(--brand-500);
  --sky-light:var(--brand-100);
  --gold:#4FC3F7;
  --gold-light:#B7E4FB;
  --field-blue:var(--brand-600);
  --ink:#132430;
  --paper:#F4F7FA;
  --line:#E6EDF2;
  --green:#1E9E5B;
  --red:#DB4B3F;
  --radius:12px;
  --radius-lg:16px;
  --sidebar-w:266px;
  --sidebar-w-collapsed:82px;
  --topheader-h:72px;
  --focus-ring:0 0 0 3px rgba(47,107,184,.18);
  --shadow-sm:0 1px 2px rgba(15,40,60,.05), 0 1px 3px rgba(15,40,60,.05);
  --shadow-md:0 6px 20px rgba(12,40,65,.09);
  --shadow-lg:0 24px 60px rgba(6,26,45,.35);

  /* Semantic surface tokens — these flip in dark mode */
  --bg:var(--paper);
  --surface:#ffffff;
  --surface-2:#F3F7FA;
  --surface-input:#F8FBFD;
  --text:var(--ink);
  --text-strong:#0B2C3B;
  --text-muted:#5B6B78;
  --text-faint:#8A98A5;
  --border:var(--line);
  --border-strong:#D3DFE8;
  --topbar-bg:#ffffff;
  --tooltip-bg:#0B2C3B;
  --shadow-pop:0 18px 46px rgba(10,35,55,.16);
}

/* ================= DARK THEME ================= */
html[data-theme="dark"]{
  --brand-700:#8FB8F5;
  --brand-600:#3E64C8;
  --brand-500:#5B93EE;
  --brand-100:#152A45;

  --paper:#0B141B;
  --bg:#0B141B;
  --surface:#111E28;
  --surface-2:#17262F;
  --surface-input:#0F1C25;
  --ink:#E6EEF4;
  --text:#E6EEF4;
  --text-strong:#F2F8FC;
  --text-muted:#94A6B3;
  --text-faint:#6E828F;
  --line:#213340;
  --border:#213340;
  --border-strong:#2C4150;
  --topbar-bg:#0F1B24;
  --sky:#5B93EE;
  --sky-light:#152A45;
  --gold:#6FD3FA;
  --field-blue:#5B93EE;
  --tooltip-bg:#0E1C30;
  --focus-ring:0 0 0 3px rgba(91,147,238,.22);
  --shadow-sm:0 1px 3px rgba(0,0,0,.5);
  --shadow-md:0 10px 28px rgba(0,0,0,.55);
  --shadow-pop:0 18px 46px rgba(0,0,0,.6);
  color-scheme:dark;
}

html{transition:none;}
body,.topheader,.sidebar,.panel,.stat-card,.main-wrap,table.data,
input,select,textarea,.filters,.profile-chip,.icon-btn,.profile-dropdown{
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter','Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.logo-circle{
  width:40px;height:40px;border-radius:50%;
  background:#fff;color:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:15px;flex-shrink:0;
  border:2px solid #fff;overflow:hidden;
}
.logo-circle img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.logo-circle.small{width:34px;height:34px;font-size:13px;}

/* ================================================================
   APP SHELL — sidebar + topheader layout
   ================================================================ */
.app-shell{display:flex;min-height:100vh;}

/* ---------------- Sidebar ---------------- */
.sidebar-overlay{
  display:none;position:fixed;inset:0;background:rgba(10,18,38,.55);
  z-index:39;backdrop-filter:blur(1px);
}

.sidebar{
  width:var(--sidebar-w);flex-shrink:0;
  background:var(--surface);
  color:var(--text);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;z-index:40;
  border-right:1px solid var(--border);
  transition:width .22s ease, transform .25s ease, background-color .25s ease;
}

.sidebar-brand{
  display:flex;align-items:center;gap:13px;text-align:left;
  padding:20px 18px;border-bottom:1px solid var(--border);
}
.sidebar-logo{
  width:46px;height:46px;border-radius:13px;background:#fff;
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  overflow:hidden;flex-shrink:0;
}
.sidebar-logo img{width:100%;height:100%;object-fit:cover;}
/* Shown when a school has not uploaded a logo yet. An empty white square
   reads as a broken image; its own initials read as itself. */
.sidebar-initials{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-weight:800;font-size:17px;letter-spacing:.5px;
  color:var(--brand-700,#1d4ed8);background:var(--surface-2);
}
.sidebar-title{min-width:0;}
/* WRAPS TO TWO LINES INSTEAD OF NOWRAP. This block used to hold the fixed
   string "RIBAAD TECHNOLOGY"; it now holds whatever a school is called,
   and real names ("Horseed Academy Primary School") are far longer. nowrap
   pushed them straight out of the sidebar. */
.sidebar-title strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:14px;line-height:1.25;letter-spacing:.2px;
  font-weight:800;color:var(--text-strong);overflow-wrap:anywhere;
}
.sidebar-title span{display:block;font-size:11px;color:var(--text-muted);margin-top:2px;letter-spacing:.2px;}

.sidebar-nav{flex:1;padding:12px 12px;overflow-y:auto;}
.nav-section-label{
  font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--text-faint);margin:16px 10px 7px;
}
.nav-section-label:first-child{margin-top:4px;}
.sidebar-nav a{
  display:flex;align-items:center;gap:12px;
  color:var(--text-muted);text-decoration:none;
  padding:8px 10px;border-radius:11px;font-size:14px;font-weight:500;
  margin-bottom:2px;position:relative;transition:.15s;
}
.nav-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Colour-plated icon tiles: linear icon on a tinted rounded plate.
   Colours below are tuned for a light sidebar; dark mode lightens them. */
.nav-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  background:var(--surface-2);color:var(--text-muted);
  transition:.18s;
}
.nav-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.85;}

.nav-icon.acc-blue   {color:#2563EB;background:rgba(37,99,235,.10);}
.nav-icon.acc-teal   {color:#0D9488;background:rgba(13,148,136,.10);}
.nav-icon.acc-violet {color:#7C3AED;background:rgba(124,58,237,.10);}
.nav-icon.acc-green  {color:#16A34A;background:rgba(22,163,74,.10);}
.nav-icon.acc-amber  {color:#D97706;background:rgba(217,119,6,.10);}
.nav-icon.acc-cyan   {color:#0891B2;background:rgba(8,145,178,.10);}
.nav-icon.acc-emerald{color:#059669;background:rgba(5,150,105,.10);}
.nav-icon.acc-sky    {color:#0284C7;background:rgba(2,132,199,.10);}
.nav-icon.acc-slate  {color:#475569;background:rgba(71,85,105,.10);}
/* acc-red was used by the Exams menu icon but never defined, so that one
   icon fell back to the inherited colour while every neighbour was tinted. */
.nav-icon.acc-red    {color:#DC2626;background:rgba(220,38,38,.10);}

.sidebar-nav a:hover{background:var(--surface-2);color:var(--text-strong);}
.sidebar-nav a:hover .nav-icon{transform:translateY(-1px);}
.sidebar-nav a.active{background:var(--brand-100);color:var(--brand-700);font-weight:700;}
.sidebar-nav a.active .nav-icon{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));
  box-shadow:0 3px 10px rgba(47,123,234,.35);
}
.sidebar-nav a.active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:4px;height:24px;background:var(--brand-500);border-radius:0 4px 4px 0;
}

/* ---------------- Sidebar collapsible group (Students: Active/Dropout) ---------------- */
.nav-group{margin-bottom:2px;}
.nav-group summary{
  display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;
  color:var(--text-muted);
  padding:8px 10px;border-radius:11px;font-size:14px;font-weight:500;
  transition:.15s;position:relative;
}
.nav-group summary::-webkit-details-marker{display:none;}
.nav-group summary::marker{content:'';}
.nav-group summary .nav-label{flex:1;}
.nav-group summary .nav-chevron{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex-shrink:0;transition:transform .18s;color:var(--text-faint);
}
.nav-group summary .nav-chevron svg{width:14px;height:14px;stroke-width:2.2;}
.nav-group[open] summary .nav-chevron{transform:rotate(90deg);}
.nav-group summary:hover{background:var(--surface-2);color:var(--text-strong);}
.nav-group summary:hover .nav-icon{transform:translateY(-1px);}
.nav-group summary.active{background:var(--brand-100);color:var(--brand-700);font-weight:700;}
.nav-group summary.active .nav-icon{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));
  box-shadow:0 3px 10px rgba(47,123,234,.35);
}
.nav-group summary.active::before{
  content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:4px;height:24px;background:var(--brand-500);border-radius:0 4px 4px 0;
}
.nav-submenu{padding:2px 0 4px 10px;margin-left:15px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:2px;}
.nav-submenu a{
  display:flex;align-items:center;gap:9px;color:var(--text-muted);text-decoration:none;
  padding:8px 12px;border-radius:8px;font-size:13.5px;font-weight:500;
  transition:.15s;
}
.nav-submenu a .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;}
.nav-submenu a .dot-green{background:#22C55E;}
.nav-submenu a .dot-red{background:#EF4444;}
.nav-submenu a .dot-blue{background:#3B82F6;}

.table-scroll{overflow-x:auto;}
table.data th.th-sort{cursor:pointer;user-select:none;white-space:nowrap;}
table.data th.th-sort:hover{background:var(--navy-dark);}
table.data th .sort-arrow{font-size:10px;margin-left:3px;}
table.data tr.filter-row td{background:#f7f9fc;padding:5px 8px;border-bottom:1px solid var(--line);}
table.data tr.filter-row input.col-filter,
table.data tr.filter-row select.col-filter{
  width:100%;box-sizing:border-box;font-size:12px;padding:4px 6px;
  border:1px solid #dde3ee;border-radius:5px;background:#fff;color:var(--text);
}
.table-pagination{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
}
.pg-info{font-size:12.5px;color:#7a8399;}
.pg-controls{display:flex;gap:4px;flex-wrap:wrap;}
.pg-btn{
  min-width:30px;padding:5px 9px;border-radius:6px;border:1px solid #dde3ee;
  background:#fff;color:var(--navy-dark);font-size:12.5px;font-weight:600;cursor:pointer;
}
.pg-btn:hover:not(:disabled){border-color:var(--sky);color:var(--sky);}
.pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.pg-btn.pg-active{background:var(--navy);border-color:var(--navy);color:#fff;}
.nav-submenu a:hover{background:var(--surface-2);color:var(--text-strong);}
.nav-submenu a.active{background:var(--brand-100);color:var(--brand-700);font-weight:700;}

.sidebar-footer{
  padding:12px;border-top:1px solid var(--border);
}
.sidebar-logout-btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:10px 12px;border-radius:11px;
  color:var(--text-muted);text-decoration:none;
  font-size:13.5px;font-weight:600;letter-spacing:.2px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:.15s;
}
.sidebar-logout-btn:hover{background:var(--red);border-color:var(--red);color:#fff;}
.sidebar-logout-btn:hover .nav-icon{background:transparent;box-shadow:none;color:#fff;transform:none;}
.sidebar-logout-btn .nav-icon{width:18px;height:18px;background:transparent;box-shadow:none;border-radius:0;color:inherit;}
.sidebar-logout-btn svg{width:18px;height:18px;}

.avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-600));color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;
}
.avatar.small{width:34px;height:34px;font-size:13px;}

/* ---------------- Main area / top header ---------------- */
.main-wrap{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;min-width:0;transition:margin-left .22s ease;}

.topheader{
  height:var(--topheader-h);flex-shrink:0;
  background:var(--topbar-bg);border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:16px;
  padding:0 clamp(14px,3vw,28px);position:sticky;top:0;z-index:20;
  box-shadow:var(--shadow-sm);
}
/* Generic round-corner icon button used in the top bar */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:42px;height:42px;flex-shrink:0;cursor:pointer;
  border-radius:12px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-strong);
  transition:.15s;
}
.icon-btn:hover{background:var(--surface);border-color:var(--sky);color:var(--sky);box-shadow:var(--shadow-sm);}
.icon-btn svg{width:20px;height:20px;}
.icon-btn .ib-desktop{display:inline-flex;}
.icon-btn .ib-mobile{display:none;}

/* Theme toggle: sun in light mode, moon in dark mode (crossfade) */
.theme-toggle .ic-sun,.theme-toggle .ic-moon{display:inline-flex;align-items:center;justify-content:center;transition:opacity .2s, transform .3s;}
.theme-toggle .ic-moon{position:absolute;opacity:0;transform:rotate(-45deg) scale(.6);}
html[data-theme="dark"] .theme-toggle .ic-sun{opacity:0;transform:rotate(45deg) scale(.6);}
html[data-theme="dark"] .theme-toggle .ic-moon{opacity:1;transform:none;}

.topheader-heading{flex:1;min-width:0;}
.topheader-heading h1{margin:0;font-size:19px;font-weight:800;color:var(--text-strong);letter-spacing:.2px;}
.topheader-heading .breadcrumb{font-size:12px;color:var(--text-faint);}
.topheader-heading .breadcrumb .sep{margin:0 4px;color:var(--border);}
.topheader-right{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* Profile chip + dropdown */
.profile{position:relative;}
.profile-chip{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:5px 12px 5px 6px;border-radius:40px;
  background:var(--surface-2);border:1px solid var(--border);
  transition:.15s;font-family:inherit;
}
.profile-chip:hover{border-color:var(--sky);box-shadow:var(--shadow-sm);}
.profile-meta{display:flex;flex-direction:column;line-height:1.2;text-align:left;}
.profile-meta strong{font-size:13px;color:var(--text-strong);font-weight:700;}
.profile-meta span{font-size:11px;color:var(--text-faint);font-weight:500;}
.profile-caret{display:inline-flex;color:var(--text-faint);transition:transform .2s;}
.profile-caret svg{width:16px;height:16px;}
.profile.open .profile-caret{transform:rotate(180deg);}

.profile-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;width:250px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-pop);overflow:hidden;z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.profile.open .profile-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.profile-dropdown-head{
  display:flex;align-items:center;gap:12px;padding:16px;
  background:linear-gradient(135deg,var(--navy),var(--navy-dark));color:#fff;
}
.profile-dropdown-head strong{display:block;font-size:14px;font-weight:700;}
.profile-dropdown-head span{display:block;font-size:11.5px;color:rgba(255,255,255,.7);margin-top:2px;}
.profile-dropdown-body{padding:6px;}
.profile-dropdown-foot{padding:6px;border-top:1px solid var(--border);}
.profile-dropdown a,.profile-dropdown button{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:600;
  color:var(--text-strong);text-decoration:none;background:none;border:none;
  cursor:pointer;font-family:inherit;text-align:left;transition:.13s;
}
.profile-dropdown a:hover,.profile-dropdown button:hover{background:var(--surface-2);}
.profile-dropdown .pd-ic{display:inline-flex;color:var(--text-muted);}
.profile-dropdown .pd-ic svg{width:18px;height:18px;}
.profile-dropdown .pd-logout{color:var(--red);}
.profile-dropdown .pd-logout:hover{background:rgba(196,68,58,.1);}
.profile-dropdown .pd-logout .pd-ic{color:var(--red);}
/* dark-mode switch inside dropdown */
#themeToggleAlt{position:relative;}
#themeToggleAlt .pd-switch{
  margin-left:auto;width:38px;height:22px;border-radius:20px;background:var(--border);
  position:relative;transition:.18s;flex-shrink:0;
}
#themeToggleAlt .pd-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.18s;
}
#themeToggleAlt.on .pd-switch{background:var(--sky);}
#themeToggleAlt.on .pd-knob{left:18px;}

.container{max-width:1240px;width:100%;margin:0 auto;padding:26px clamp(14px,3vw,28px) 40px;}

/* ================= Sidebar collapse (desktop mini-rail) ================= */
html.sidebar-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
html.sidebar-collapsed .main-wrap{margin-left:var(--sidebar-w-collapsed);}
html.sidebar-collapsed .sidebar-title,
html.sidebar-collapsed .nav-text,
html.sidebar-collapsed .nav-section-label,
html.sidebar-collapsed .nav-group summary .nav-chevron,
html.sidebar-collapsed .nav-submenu{
  opacity:0;width:0;height:0;overflow:hidden;pointer-events:none;
  margin:0;padding:0;white-space:nowrap;
}
html.sidebar-collapsed .nav-section-label{display:block;height:1px;margin:10px 6px;background:var(--border);}
html.sidebar-collapsed .sidebar-brand{padding:22px 10px 18px;}
html.sidebar-collapsed .sidebar-logo{width:48px;height:48px;margin-bottom:0;}
html.sidebar-collapsed .sidebar-nav{padding:12px 14px;}
html.sidebar-collapsed .sidebar-nav a,
html.sidebar-collapsed .nav-group summary{justify-content:center;padding:9px;gap:0;}
html.sidebar-collapsed .sidebar-nav a.active::before,
html.sidebar-collapsed .nav-group summary.active::before{display:none;}
html.sidebar-collapsed .nav-group[open] .nav-submenu{display:none;}
html.sidebar-collapsed .sidebar-footer .nav-text{display:none;}
html.sidebar-collapsed .sidebar-logout-btn{padding:11px 0;}

/* Tooltips when collapsed */
html.sidebar-collapsed .sidebar-nav a,
html.sidebar-collapsed .nav-group summary,
html.sidebar-collapsed .sidebar-logout-btn{position:relative;}
html.sidebar-collapsed .sidebar-nav a[data-tip]:hover::after,
html.sidebar-collapsed .nav-group summary[data-tip]:hover::after,
html.sidebar-collapsed .sidebar-logout-btn[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:calc(100% + 14px);top:50%;
  transform:translateY(-50%);white-space:nowrap;
  background:var(--tooltip-bg);color:#fff;padding:6px 11px;border-radius:8px;
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow-md);z-index:70;
}

@media(max-width:980px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w) !important;}
  .main-wrap{margin-left:0 !important;}
  .icon-btn .ib-desktop{display:none;}
  .icon-btn .ib-mobile{display:inline-flex;}
  html.sidebar-open .sidebar{transform:translateX(0);}
  html.sidebar-open .sidebar-overlay{display:block;}
  /* On mobile the sidebar always shows full labels when open */
  html.sidebar-collapsed .sidebar-title,
  html.sidebar-collapsed .nav-text,
  html.sidebar-collapsed .nav-section-label{opacity:1;width:auto;height:auto;overflow:visible;}
  html.sidebar-collapsed .nav-section-label{background:none;}
  html.sidebar-collapsed .sidebar-nav a,
  html.sidebar-collapsed .nav-group summary{justify-content:flex-start;padding:9px 11px;gap:12px;}
}
@media(max-width:560px){
  .topheader{padding:0 14px;gap:10px;}
  .topheader-heading h1{font-size:16px;}
  .topheader-heading .breadcrumb{display:none;}
  .profile-meta{display:none;}
  .profile-chip{padding:3px;border:none;background:transparent;}
  .profile-caret{display:none;}
  .icon-btn{width:40px;height:40px;}
}

/* ---------------- Cards / panels ---------------- */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:22px;box-shadow:var(--shadow-sm);
}
.panel h2, .panel h3{margin-top:0;color:var(--navy-dark);}
.section-title{
  background:var(--navy);color:#fff;padding:8px 14px;border-radius:6px 6px 0 0;
  font-size:14px;font-weight:600;letter-spacing:.3px;margin:24px 0 0 0;
}
.section-body{border:1px solid var(--line);border-top:none;border-radius:0 0 6px 6px;padding:16px;margin-bottom:6px;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 16px;border-radius:10px;border:1px solid transparent;
  font-size:14px;cursor:pointer;text-decoration:none;font-weight:600;transition:.15s;
}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:0 2px 8px rgba(10,127,168,.28);}
.btn-primary:hover{background:var(--brand-700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,127,168,.32);}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.btn-outline:hover{background:rgba(255,255,255,.15);}
.btn-gold{background:var(--gold);color:var(--navy-dark);}
.btn-gold:hover{filter:brightness(0.95);transform:translateY(-1px);}
.btn-green{background:var(--green);color:#fff;}
.btn-green:hover{filter:brightness(0.95);transform:translateY(-1px);}
.btn-red{background:var(--red);color:#fff;}
.btn-small{padding:5px 10px;font-size:12px;}
.btn-block{width:100%;}
.actions{display:flex;gap:6px;flex-wrap:wrap;}

/* ---------------- Forms ---------------- */
label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px;color:var(--navy-dark);}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],
input[type=number],input[type=time],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  font-size:14px;font-family:inherit;background:var(--surface-input);color:var(--text);transition:.15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand-500);background:var(--surface);
  box-shadow:var(--focus-ring);
}
textarea{resize:vertical;min-height:60px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.form-row.three{grid-template-columns:1fr 1fr 1fr;}
.form-row.four{grid-template-columns:1fr 1fr 1fr 1fr;}
@media(max-width:700px){.form-row,.form-row.three,.form-row.four{grid-template-columns:1fr;}}
.radio-group{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;}
.radio-group label{display:flex;align-items:center;gap:6px;font-weight:500;margin:0;}
.radio-group input{width:auto;}

.declaration-list{font-size:13px;line-height:1.6;color:#445;padding-left:20px;margin:0 0 10px;}
.declaration-list li{margin-bottom:4px;}
.declaration-agree{display:flex;align-items:flex-start;gap:8px;font-weight:600;margin-top:14px;padding:10px 12px;background:rgba(240,180,41,0.1);border:1px solid rgba(240,180,41,0.4);border-radius:6px;}
.declaration-agree input{width:auto;margin-top:2px;}
html[data-theme="dark"] .declaration-list{color:var(--text-muted);}

.shift-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.shift-option{
  display:flex;align-items:center;gap:8px;font-weight:500;margin:0;
  border:1px solid var(--line);border-radius:9px;padding:9px 14px;cursor:pointer;
  background:#fbfcfe;transition:.15s;font-size:13.5px;
}
.shift-option:has(input:checked){
  border-color:var(--brand-500);background:var(--sky-light);box-shadow:var(--focus-ring);
}
.shift-option input{width:auto;margin:0;}
.shift-tag{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;
  background:var(--navy);color:#fff;padding:2px 7px;border-radius:20px;
}
.shift-tag-pt{background:var(--gold);color:var(--navy-dark);}
fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin:14px 0;}
legend{font-weight:700;color:var(--navy);padding:0 6px;}

.reg-id-box{
  background:var(--sky-light);border:1px solid #bcdcf5;border-left:5px solid var(--gold);
  border-radius:8px;padding:12px 16px;margin-bottom:18px;
}
.reg-id-box label{margin-top:0;color:var(--navy-dark);font-size:13.5px;}
.reg-id-box input{max-width:320px;background:#fff;}

.college-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;}
@media(max-width:700px){.college-grid{grid-template-columns:1fr;}}
.college-block{margin-bottom:10px;}
.college-block h4{
  background:var(--sky-light);color:var(--navy-dark);margin:0 0 4px;padding:6px 8px;
  border-radius:5px;font-size:13px;
}
.faculty-option{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:3px 4px;font-weight:400;}
.faculty-option input{width:auto;}

.photo-upload{display:flex;align-items:center;gap:16px;margin-top:8px;}
.photo-preview{
  width:110px;height:130px;border:2px dashed var(--line);border-radius:6px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fafbfc;font-size:12px;color:#888;
}
.photo-preview img{width:100%;height:100%;object-fit:cover;}

.repeat-table{width:100%;border-collapse:collapse;margin-top:6px;}
.repeat-table th{background:var(--sky-light);font-size:12px;padding:6px;text-align:left;}
.repeat-table td{padding:4px;border-bottom:1px solid var(--line);}
.repeat-table input{font-size:13px;padding:6px;}
.row-remove{color:var(--red);cursor:pointer;font-weight:700;border:none;background:none;font-size:16px;}

/* ---------------- Alerts ---------------- */
.alert{padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:14px;}
.alert-success{background:#e5f7ec;color:#1a7a3f;border:1px solid #b7e6c8;}
.alert-error{background:#fdeceb;color:#a3352c;border:1px solid #f5c2be;}

/* ---------------- Login page (modern split panel) ---------------- */
.login-body{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  padding:24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.06), transparent 40%),
    radial-gradient(circle at 88% 88%, rgba(47,123,234,.14), transparent 45%),
    linear-gradient(135deg,var(--navy) 0%,var(--navy-darker) 100%);
}

.login-shell{
  display:flex;width:100%;max-width:920px;min-height:560px;
  background:#fff;border-radius:22px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}

/* Left brand panel */
.login-brand{
  flex:1;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--navy-darker) 0%,var(--navy) 55%,var(--navy-dark) 100%);
  color:#fff;padding:44px 40px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.login-brand-glow{
  position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,195,247,.28),transparent 70%);
  pointer-events:none;
}
.login-brand-glow::after{
  content:'';position:absolute;bottom:-160px;left:-100px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,156,207,.30),transparent 70%);
}
.login-brand-inner{position:relative;z-index:1;text-align:center;margin-top:24px;}
.brand-logo-ring{
  width:104px;height:104px;border-radius:50%;margin:0 auto 20px;
  background:#fff;border:3px solid var(--gold);
  box-shadow:0 10px 26px rgba(0,0,0,.3);overflow:hidden;
}
.brand-logo-ring img{width:100%;height:100%;object-fit:cover;}
.login-brand-inner h1{margin:0;font-size:21px;font-weight:800;letter-spacing:.6px;}
.brand-ar{margin:6px 0 0;font-size:17px;font-weight:700;color:var(--gold-light);direction:rtl;}
.brand-tagline{margin:10px auto 0;font-size:12.5px;color:rgba(255,255,255,.65);max-width:230px;line-height:1.5;}
.brand-points{list-style:none;margin:30px 0 0;padding:0;text-align:left;display:inline-block;}
.brand-points li{
  display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.85);
  margin-bottom:12px;
}
.brand-points .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex-shrink:0;}
.brand-year{position:relative;z-index:1;text-align:center;font-size:11px;color:rgba(255,255,255,.45);letter-spacing:.5px;}

/* Right form panel */
.login-form-panel{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:48px 46px;
}
.login-box{width:100%;max-width:340px;margin:0 auto;text-align:center;}
.login-logo{text-align:center;margin-bottom:26px;}
.login-logo .logo-circle{
  width:0;height:0;margin:0;border:none;box-shadow:none;overflow:visible;display:none;
}
.login-logo h2{margin:0;color:var(--navy-dark);font-size:22px;font-weight:800;letter-spacing:.2px;}
.login-logo p{margin:6px 0 0;font-size:13px;color:#8a94a6;}
.login-form{text-align:left;}
.field-group{margin-bottom:16px;}
.field-group label{margin:0 0 6px;}
.input-icon{position:relative;}
.input-icon .icon{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  font-size:14px;opacity:.55;pointer-events:none;
}
.input-icon input{padding-left:36px;}
.btn-login{margin-top:10px;padding:12px;font-size:14.5px;border-radius:9px;letter-spacing:.2px;}
.login-hint{text-align:center;font-size:11.5px;color:#aab2c0;margin-top:20px;}
.login-footer-note{text-align:center;font-size:11px;color:#c3cadb;margin-top:22px;}

@media(max-width:820px){
  .login-shell{flex-direction:column;max-width:420px;min-height:0;}
  .login-brand{padding:36px 30px;}
  .login-brand-inner{margin-top:0;}
  .brand-points{display:none;}
  .login-form-panel{padding:38px 32px;}
}

/* ---------------- Dashboard table ---------------- */
.filters{
  display:flex;gap:14px;flex-wrap:wrap;align-items:end;margin-bottom:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;
}
.filters .f-group{display:flex;flex-direction:column;gap:4px;min-width:150px;}
.filters label{margin:0;font-size:11.5px;font-weight:700;color:#7a8399;text-transform:uppercase;letter-spacing:.4px;}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:24px;}
.stat-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow-sm);transition:.15s;position:relative;overflow:hidden;
}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.stat-card::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--navy);
}
.stat-card:nth-child(2)::before{background:var(--green);}
.stat-card:nth-child(3)::before{background:var(--gold);}
.stat-card:nth-child(4)::before{background:var(--sky);}
.stat-card .icon-badge{
  width:48px;height:48px;border-radius:14px;flex-shrink:0;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky-light);color:var(--navy);
}
.stat-card .icon-badge svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.stat-card:nth-child(2) .icon-badge{background:#dcf5e4;color:var(--green);}
.stat-card:nth-child(3) .icon-badge{background:#E8ECFB;color:#4A55C9;}
.stat-card:nth-child(4) .icon-badge{background:#e4edfb;color:var(--sky);}
.stat-card:nth-child(5)::before{background:var(--gold);}
.stat-card:nth-child(5) .icon-badge{background:#E8ECFB;color:#4A55C9;}
.stat-card:nth-child(6)::before{background:var(--red);}
.stat-card:nth-child(6) .icon-badge{background:#fbe4e2;color:var(--red);}
.stat-card .num{font-size:26px;font-weight:800;color:var(--navy-dark);line-height:1.1;}
.stat-card .lbl{font-size:12.5px;color:#7a8399;margin-top:2px;font-weight:500;}

/* ---------------- Dashboard chart grid ---------------- */
.dash-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.dash-grid .panel{margin-bottom:0;}
.dash-grid .panel h3{margin:0 0 14px;color:var(--navy-dark);font-size:15px;}
.dash-wide{grid-column:1 / -1;}
/* Canvas has no intrinsic width of its own — without this it sits at the
   browser default (300px) instead of filling the panel, which is why wide
   panels (e.g. Students by College) looked cramped and truncated names. */
.dash-grid .panel canvas{display:block;width:100%;}
@media (max-width:900px){
  .dash-grid{grid-template-columns:1fr;}
}

/* Chart hover tooltip — shows the full label/value for
   any bar or doughnut slice, including labels truncated on the canvas. */
.mc-tooltip{
  display:none;position:fixed;z-index:200;pointer-events:none;
  background:var(--tooltip-bg);color:#fff;padding:6px 11px;border-radius:8px;
  font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-md);
}

table.data{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
table.data th{background:var(--navy);color:#fff;padding:12px 10px;text-align:left;font-size:12.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
table.data td{padding:11px 10px;border-bottom:1px solid var(--line);font-size:13.5px;}
table.data tr:last-child td{border-bottom:none;}
table.data tr:hover td{background:var(--surface-2);}
.badge{padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.2px;}
.badge-pending{background:#fff3d6;color:#8a6300;}
.badge-admitted{background:#dcf5e4;color:#1a7a3f;}
.badge-notadmitted{background:#fde1de;color:#a3352c;}
.thumb{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--line);}

.shift-pill{
  display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;
  color:var(--navy);background:var(--sky-light);padding:2px 8px;border-radius:20px;
}
.shift-pill-pt{color:#4A55C9;background:#E8ECFB;}

/* Attendance status segmented control */
.att-status-group{display:inline-flex;gap:6px;flex-wrap:wrap;}
.att-opt{
  display:inline-flex;align-items:center;cursor:pointer;user-select:none;
  padding:5px 12px;border-radius:20px;font-size:12.5px;font-weight:600;
  color:#6b7280;background:#f1f4f8;border:1px solid transparent;transition:.12s;
}
.att-opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none;}
.att-opt:hover{background:#e7edf5;}
.att-opt.att-present.checked,  .att-opt.att-present:has(input:checked){background:#dcf5e4;color:#1a7a3f;border-color:#86ddab;}
.att-opt.att-absent.checked,   .att-opt.att-absent:has(input:checked){background:#fde1de;color:#a3352c;border-color:#f0a9a3;}
.att-opt.att-late.checked,     .att-opt.att-late:has(input:checked){background:#fff3d6;color:#8a6300;border-color:#f0d38a;}
.att-opt.att-excused.checked,  .att-opt.att-excused:has(input:checked){background:#e4edfb;color:#175CC7;border-color:#a9c8f0;}

.site-footer{text-align:center;padding:18px;font-size:12px;color:#8a94a6;}

/* ============================================================
   PRINTABLE APPLICATION FORM (mirrors the original PDF layout)
   ============================================================ */
.app-form{
  background:#fff;max-width:900px;margin:0 auto;border:1px solid var(--line);
  padding:0 0 20px;
}
.app-header{
  background:linear-gradient(90deg,#f6e7c9,#fbf3e2,#f6e7c9);
  padding:10px 24px;display:flex;align-items:center;justify-content:center;
  border-bottom:4px solid var(--red);
}
.app-header img.letterhead{max-width:100%;height:auto;display:block;}
/* Fallback (used only if the logo image file is missing) */
.app-header .brand-left{font-size:22px;font-weight:800;color:var(--red);letter-spacing:.5px;}
.app-header .brand-mid{text-align:center;}
.app-header .brand-mid .crest{
  width:56px;height:56px;border-radius:50%;background:var(--sky-light);border:2px solid var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);margin:0 auto;overflow:hidden;
}
.app-header .brand-mid .crest img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.app-header .brand-right{font-size:20px;font-weight:700;color:var(--green);direction:rtl;}
.app-title{text-align:center;padding:14px 10px 4px;}
.app-title h1{font-family:'Brush Script MT',cursive;font-size:26px;margin:0;color:#333;}
.app-title h2{font-family:'Brush Script MT',cursive;font-size:20px;margin:4px 0 0;color:#333;}
.app-photo-box{
  position:absolute;top:14px;right:24px;width:90px;height:100px;border:1px solid #999;
  font-size:10px;text-align:center;padding:4px;color:#555;background:#fff;
}
.app-photo-box img{width:100%;height:100%;object-fit:cover;}
.app-body{padding:6px 24px;position:relative;}
.app-section-title{
  background:#e2e2e2;font-weight:700;padding:4px 8px;margin-top:14px;font-size:13.5px;border:1px solid #999;
}
table.form-table{width:100%;border-collapse:collapse;margin-bottom:4px;}
table.form-table td{border:1px solid #999;padding:6px 8px;font-size:13px;vertical-align:top;}
table.form-table td.field-label{width:34%;font-weight:600;background:#fafafa;}
.check{display:inline-block;width:12px;height:12px;border:1px solid #333;margin-right:4px;position:relative;top:1px;}
.check.on::after{content:'✓';position:absolute;top:-4px;left:1px;font-size:11px;font-weight:800;}
.prog-grid{width:100%;border-collapse:collapse;font-size:12.5px;}
.prog-grid td{border:1px solid #999;padding:3px 6px;}
.prog-grid td.head{font-weight:700;background:#f0f0f0;}
.declaration{font-size:12px;line-height:1.5;margin-top:10px;}
.declaration ol{padding-left:18px;}
.sign-row{display:flex;justify-content:space-between;margin-top:22px;font-size:13px;}
.official-box{border:2px solid #333;margin-top:16px;padding:10px 16px;font-size:12.5px;}
.official-box h4{margin:0 0 6px;text-transform:uppercase;font-size:12px;letter-spacing:.5px;}
.official-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px;}

/* Footer that appears only when printing/saving the Application Form as PDF,
   matching the "Plasma University Application Form" footer on the original PDF. */
.print-footer{display:none;}

/* ============================================================
   ID CARD (matches the official Plasma University sample card)
   Standard CR80 card size ~ 3.375in x 2.125in (85.6mm x 54mm)
   --id-card-scale shrinks the ON-SCREEN preview only; it is reset
   to 1 for print/download so the actual card stays true CR80 size.
   ============================================================ */
:root{ --id-card-scale: 0.72; }

.id-card-wrap{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;padding:20px;}

.id-card,.id-card-back{
  width:calc(337.5px * var(--id-card-scale));height:calc(212.5px * var(--id-card-scale)); /* 100px per inch for on-screen preview */
  border-radius:14px;overflow:hidden;position:relative;
  background:linear-gradient(160deg,#ffffff 0%,#eef4fb 55%,#e2edf9 100%);
  box-shadow:0 8px 22px rgba(10,28,60,.16), 0 1px 0 rgba(10,28,60,.04);
  border:1px solid #e3e8f0;
  font-family:'Segoe UI',Arial,sans-serif;
  display:flex;flex-direction:column;
}
/* Quiet security-style watermark of the university crest, centered behind the content */
.id-card::before,.id-card-back::before{
  content:'';position:absolute;top:50%;left:50%;width:calc(230px * var(--id-card-scale));height:calc(230px * var(--id-card-scale));
  transform:translate(-50%,-50%);
  background:url('../images/logo-round-hq.png') no-repeat center/contain;
  opacity:.07;z-index:0;pointer-events:none;
}
.id-card>*,.id-card-back>*{position:relative;z-index:1;}

/* ---- Front: white header, logo centered between EN and AR names ---- */
.id-card .id-card-top{
  flex-shrink:0;background:transparent;
  display:flex;align-items:center;justify-content:space-between;gap:calc(8px * var(--id-card-scale));
  padding:calc(8px * var(--id-card-scale)) calc(12px * var(--id-card-scale));
}
.id-card .uni-name-en{
  color:var(--navy);font-weight:800;font-size:calc(11px * var(--id-card-scale));line-height:1.15;
  letter-spacing:.2px;text-transform:uppercase;flex:1;min-width:0;
}
.id-card .uni-name-ar{
  color:var(--navy);font-weight:700;font-size:calc(15px * var(--id-card-scale));direction:rtl;
  flex:1;min-width:0;text-align:right;
}
.id-card .id-crest{
  width:calc(52px * var(--id-card-scale));height:calc(52px * var(--id-card-scale));flex-shrink:0;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.id-card .id-crest img{width:100%;height:100%;object-fit:contain;}

.id-card .id-band{
  flex-shrink:0;background:var(--sky);color:#fff;text-align:center;
  font-weight:800;font-size:calc(10px * var(--id-card-scale));letter-spacing:1px;padding:calc(4px * var(--id-card-scale)) 0;
}

.id-card .id-content{flex:1;display:flex;gap:calc(10px * var(--id-card-scale));padding:calc(10px * var(--id-card-scale)) calc(14px * var(--id-card-scale));align-items:center;background:transparent;}
.id-card .id-fields{flex:1;min-width:0;}
.id-card .id-fields .field{
  font-size:calc(8.8px * var(--id-card-scale));line-height:1.35;margin-bottom:calc(3px * var(--id-card-scale));color:#111827;
}
.id-card .id-fields .field:last-child{margin-bottom:0;}
.id-card .id-fields .lbl{font-weight:800;color:#111827;}
.id-card .id-fields .val{font-weight:800;color:var(--field-blue);}

.id-card .id-photo{
  width:calc(52px * var(--id-card-scale));height:calc(72px * var(--id-card-scale));border-radius:calc(8px * var(--id-card-scale));overflow:hidden;flex-shrink:0;
  border:2px solid var(--sky);background:#eef3fa;box-shadow:0 2px 6px rgba(20,50,90,.2);
}
.id-card .id-photo img{width:100%;height:100%;object-fit:cover;}

.id-card .id-footer{
  flex-shrink:0;background:var(--navy);color:#ffffff;
  text-align:center;font-size:calc(11px * var(--id-card-scale));font-weight:700;padding:calc(7px * var(--id-card-scale)) 0;letter-spacing:.4px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.id-card .id-footer span{font-size:calc(12px * var(--id-card-scale));letter-spacing:.6px;margin-left:3px;color:#ffffff;}

/* ---- Back: plain white background, no header band ---- */
.id-card-back .back-content{flex:1;padding:calc(14px * var(--id-card-scale)) calc(18px * var(--id-card-scale)) 0;font-size:calc(9.5px * var(--id-card-scale));line-height:1.55;color:#111827;}
.id-card-back .back-content p.notice{margin:0 0 calc(6px * var(--id-card-scale));font-weight:700;}
.id-card-back .back-content ol{margin:0 0 calc(7px * var(--id-card-scale));padding-left:calc(16px * var(--id-card-scale));}
.id-card-back .back-content li{margin-bottom:calc(2px * var(--id-card-scale));font-weight:400;}
.id-card-back .back-warn{font-weight:700;margin:calc(2px * var(--id-card-scale)) 0 0;}
.id-card-back .back-email{text-align:center;font-weight:700;font-size:calc(11px * var(--id-card-scale));margin-top:calc(10px * var(--id-card-scale));color:#111827;}
.id-card-back .back-contact{
  flex-shrink:0;background:var(--sky);color:#fff;
  text-align:center;font-size:calc(11px * var(--id-card-scale));font-weight:800;padding:calc(8px * var(--id-card-scale)) 0;letter-spacing:.3px;
}


/* ============================================================
   DARK MODE — surface overrides for hardcoded-light components
   ============================================================ */
html[data-theme="dark"] body{background:var(--bg);}
html[data-theme="dark"] .panel{background:var(--surface);border-color:var(--border);}
html[data-theme="dark"] .panel h2,
html[data-theme="dark"] .panel h3,
html[data-theme="dark"] .topheader-heading h1,
html[data-theme="dark"] .dash-grid .panel h3,
html[data-theme="dark"] legend{color:var(--text-strong);}
html[data-theme="dark"] label{color:var(--text);}

html[data-theme="dark"] .stat-card{background:var(--surface);border-color:var(--border);}
html[data-theme="dark"] .stat-card .num{color:var(--text-strong);}
html[data-theme="dark"] .stat-card .lbl{color:var(--text-muted);}

html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] input[type=date],
html[data-theme="dark"] input[type=password],
html[data-theme="dark"] input[type=number],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:var(--surface-input);border-color:var(--border);color:var(--text);
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{background:var(--surface-2);}

html[data-theme="dark"] .filters{background:var(--surface-2);border-color:var(--border);}
html[data-theme="dark"] table.data{background:var(--surface);border-color:var(--border);}
html[data-theme="dark"] table.data td{border-bottom-color:var(--border);color:var(--text);}
html[data-theme="dark"] table.data tr:hover td{background:var(--surface-2);}
html[data-theme="dark"] .section-body{border-color:var(--border);}
html[data-theme="dark"] .repeat-table td{border-bottom-color:var(--border);}
html[data-theme="dark"] fieldset{border-color:var(--border);}
html[data-theme="dark"] .reg-id-box{background:var(--surface-2);border-color:var(--border);border-left-color:var(--gold);}
html[data-theme="dark"] .reg-id-box input{background:var(--surface-input);}
html[data-theme="dark"] .college-block h4{background:var(--surface-2);color:var(--text);}
html[data-theme="dark"] .shift-option{background:var(--surface-input);border-color:var(--border);}
html[data-theme="dark"] .photo-preview{background:var(--surface-2);border-color:var(--border);color:var(--text-muted);}
html[data-theme="dark"] .site-footer{color:var(--text-faint);}
html[data-theme="dark"] .btn-primary{background:var(--brand-500);color:#fff;box-shadow:0 2px 10px rgba(47,123,234,.35);}
html[data-theme="dark"] .btn-primary:hover{background:#6FA3F2;color:#fff;}

/* Sidebar icon tiles: lift the colours for the dark sidebar */
html[data-theme="dark"] .nav-icon{background:rgba(255,255,255,.05);color:var(--text-muted);}
html[data-theme="dark"] .nav-icon.acc-blue   {color:#7FB0FF;background:rgba(127,176,255,.14);}
html[data-theme="dark"] .nav-icon.acc-teal   {color:#3FD6C9;background:rgba(63,214,201,.14);}
html[data-theme="dark"] .nav-icon.acc-violet {color:#B198FB;background:rgba(177,152,251,.14);}
html[data-theme="dark"] .nav-icon.acc-green  {color:#5CE08C;background:rgba(92,224,140,.14);}
html[data-theme="dark"] .nav-icon.acc-amber  {color:#F6C25A;background:rgba(246,194,90,.14);}
html[data-theme="dark"] .nav-icon.acc-cyan   {color:#57C9F6;background:rgba(87,201,246,.14);}
html[data-theme="dark"] .nav-icon.acc-red    {color:#FF8A8A;background:rgba(255,138,138,.14);}
html[data-theme="dark"] .nav-icon.acc-emerald{color:#40DCA0;background:rgba(64,220,160,.14);}
html[data-theme="dark"] .nav-icon.acc-sky    {color:#6FB0F7;background:rgba(111,176,247,.14);}
html[data-theme="dark"] .nav-icon.acc-slate  {color:#C7D1E4;background:rgba(199,209,228,.12);}
html[data-theme="dark"] .sidebar-nav a.active .nav-icon,
html[data-theme="dark"] .nav-group summary.active .nav-icon{color:#fff;box-shadow:0 3px 10px rgba(91,147,238,.45);}
html[data-theme="dark"] .sidebar-nav a.active,
html[data-theme="dark"] .nav-group summary.active{background:rgba(91,147,238,.14);color:var(--brand-700);}

/* stat-card colour plates keep tints readable in dark */
html[data-theme="dark"] .stat-card .icon-badge{background:rgba(85,128,196,.20);color:#5580C4;}
html[data-theme="dark"] .stat-card:nth-child(2) .icon-badge{background:rgba(46,158,91,.18);color:#5ce08c;}
html[data-theme="dark"] .stat-card:nth-child(3) .icon-badge{background:rgba(99,110,241,.18);color:#A5AEF7;}
html[data-theme="dark"] .stat-card:nth-child(4) .icon-badge{background:rgba(14,156,207,.20);color:#57c9f6;}
html[data-theme="dark"] .stat-card:nth-child(5) .icon-badge{background:rgba(99,110,241,.18);color:#A5AEF7;}
html[data-theme="dark"] .stat-card:nth-child(6) .icon-badge{background:rgba(196,68,58,.2);color:#f87171;}

/* ---------------- Print ---------------- */
@media print{
  .sidebar,.topheader,.no-print,.site-footer{display:none !important;}
  .main-wrap{margin-left:0 !important;}
  body{background:#fff;}
  .container{padding:0;max-width:100%;}
  .app-form{border:none;padding-bottom:26px;}
  :root{ --id-card-scale: 1; }
  .id-card,.id-card-back{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .print-footer{
    display:block;position:fixed;bottom:0;left:0;right:0;
    text-align:center;font-size:10px;font-weight:700;letter-spacing:.4px;
    color:var(--navy-dark);padding:6px 0 4px;background:#fff;
    border-top:1.5px solid var(--gold);
  }
  @page{margin:10mm 10mm 16mm;}
}

/* ================= EXAMS MODULE ================= */
.exam-hero{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:20px 24px;border-radius:var(--radius-lg);border:1px solid var(--line);
}
.exam-hero.is-open{background:linear-gradient(135deg,#eafaf1 0%,#ffffff 65%);border-color:#bfe8cf;}
.exam-hero.is-closed{background:linear-gradient(135deg,#fdeceb 0%,#ffffff 65%);border-color:#f5c2be;}
.exam-hero-icon{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.exam-hero.is-open .exam-hero-icon{background:#dcf5e4;color:#1a7a3f;}
.exam-hero.is-closed .exam-hero-icon{background:#fde1de;color:#a3352c;}
.exam-hero-body{flex:1;min-width:200px;}
.exam-hero-body h3{margin:0 0 4px;font-size:17px;color:var(--text-strong);}
.exam-hero-body p{margin:0;color:var(--text-muted);font-size:13.5px;}
.exam-hero-actions{display:flex;gap:8px;flex-wrap:wrap;}

.step-head{display:flex;align-items:center;gap:10px;margin:0 0 4px;}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;
  font-size:12px;font-weight:800;
}
.step-head h4{margin:0;font-size:14.5px;color:var(--text-strong);}
.step-body{margin-left:34px;}
.step-divider{border:none;border-top:1px solid var(--line);margin:20px 0;}

.pill-group{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px;}
.pill-option{
  display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;margin:0;
  border:1.5px solid var(--line);border-radius:11px;padding:9px 14px;cursor:pointer;
  background:#fbfcfe;transition:.15s;color:var(--text);
}
.pill-option:has(input:checked){border-color:var(--brand-500);background:var(--sky-light);box-shadow:var(--focus-ring);}
.pill-option input{width:auto;margin:0;}
.pill-option.disabled{opacity:.4;cursor:not-allowed;}

.mini-progress-wrap{display:flex;align-items:center;gap:8px;}
.mini-progress{width:70px;height:7px;border-radius:20px;background:var(--line);overflow:hidden;flex-shrink:0;}
.mini-progress > span{display:block;height:100%;background:var(--brand-500);border-radius:20px;}
.mini-progress-txt{font-size:11.5px;color:var(--text-muted);white-space:nowrap;}

html[data-theme="dark"] .exam-hero.is-open{background:linear-gradient(135deg,rgba(46,158,91,.14) 0%,var(--surface) 65%);}
html[data-theme="dark"] .exam-hero.is-closed{background:linear-gradient(135deg,rgba(219,75,63,.14) 0%,var(--surface) 65%);}
html[data-theme="dark"] .pill-option{background:var(--surface-input);border-color:var(--border);}

/* ================= TIMETABLE MODULE ================= */
.tt-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;}
.tt-toolbar .tt-field{display:flex;flex-direction:column;gap:5px;min-width:190px;}
.tt-toolbar .tt-field.grow{flex:1;min-width:220px;}
.tt-toolbar label{font-size:12px;font-weight:600;color:var(--text-muted);letter-spacing:.2px;}
.tt-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;margin:-4px 0 16px;color:var(--text-muted);font-size:13px;}
.tt-meta .chip{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-weight:600;color:var(--text);font-size:12.5px;}

.tt-scroll{overflow-x:auto;border-radius:14px;border:1px solid var(--border);background:var(--surface);}
table.timetable{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;}
table.timetable th,table.timetable td{border-right:1px solid var(--border);border-bottom:1px solid var(--border);}
table.timetable th:last-child,table.timetable td:last-child{border-right:none;}
table.timetable tr:last-child td{border-bottom:none;}
table.timetable thead th{
  background:var(--navy);color:#fff;padding:11px 10px;font-size:12px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;text-align:center;position:sticky;top:0;
}
table.timetable thead th.tt-corner{text-align:left;width:132px;min-width:132px;}
table.timetable td.tt-period{
  background:var(--surface-2);padding:10px 12px;width:132px;min-width:132px;vertical-align:top;
}
table.timetable td.tt-period .pl{font-weight:700;color:var(--text-strong);font-size:13px;}
table.timetable td.tt-period .pt{color:var(--text-muted);font-size:11.5px;margin-top:2px;white-space:nowrap;}
table.timetable tr.is-break td{background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,transparent 10px,transparent 20px);}
table.timetable tr.is-break td.tt-period .pl{color:var(--text-muted);}

.tt-cell{padding:6px;vertical-align:top;height:70px;}
.tt-slot{
  width:100%;height:100%;min-height:58px;border:none;cursor:pointer;text-align:left;
  border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;
  background:transparent;transition:background .12s,box-shadow .12s;font:inherit;
}
.tt-slot.empty{color:var(--text-faint);align-items:center;justify-content:center;border:1.5px dashed var(--border);}
.tt-slot.empty span{font-size:18px;line-height:1;opacity:.6;}
.tt-slot.empty:hover{border-color:var(--sky);color:var(--sky);background:var(--sky-light);}
.tt-slot.filled{box-shadow:inset 0 0 0 1px var(--border);}
.tt-slot.filled:hover{box-shadow:inset 0 0 0 1.5px var(--sky);}
.tt-slot .subj{font-weight:700;font-size:13px;color:var(--text-strong);line-height:1.25;}
.tt-slot .who{font-size:11.5px;color:var(--text-muted);}
.tt-slot .room{font-size:11px;color:var(--text-faint);}
/* subject colour tones */
.tt-slot.tone-0{background:rgba(74,144,217,.13);}
.tt-slot.tone-1{background:rgba(46,158,91,.13);}
.tt-slot.tone-2{background:rgba(99,110,241,.16);}
.tt-slot.tone-3{background:rgba(177,152,251,.16);}
.tt-slot.tone-4{background:rgba(87,201,246,.14);}
.tt-slot.tone-5{background:rgba(196,68,58,.13);}

/* period manager */
.tt-period-form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:8px;}
.tt-period-form .tt-field{min-width:120px;}
.tt-period-form .tt-field.sm{min-width:90px;}

/* modal */
.tt-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px;}
.tt-modal.open{display:flex;}
.tt-modal-backdrop{position:absolute;inset:0;background:rgba(6,16,38,.5);backdrop-filter:blur(2px);}
.tt-modal-card{
  position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-pop);width:100%;max-width:440px;padding:22px 22px 20px;
}
.tt-modal-card h3{margin:0 0 4px;color:var(--text-strong);}
.tt-modal-card .sub{color:var(--text-muted);font-size:13px;margin-bottom:16px;}
.tt-modal-card label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin:12px 0 5px;}
.tt-modal-actions{display:flex;gap:10px;margin-top:20px;}
.tt-modal-actions .btn{flex:1;justify-content:center;}
.tt-modal-actions .spacer{flex:2;}

@media print{
  .tt-toolbar,.tt-period-panel,.tt-modal,.tt-slot.empty{display:none !important;}
  .tt-scroll{overflow:visible;border:none;}
  table.timetable{min-width:0;font-size:11px;}
  table.timetable thead th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .tt-slot{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* Admin avatar showing an uploaded photo (header chip + dropdown head) */
.avatar.has-photo{padding:0;overflow:hidden;background:none;}
.avatar.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ============================================================
   STUDENT INFORMATION MANAGEMENT (SIM) MODULE
   Uses the same design tokens (--navy, --gold [now blue accent], --line, etc.)
   ============================================================ */
.nav-submenu a .dot-gold{background:var(--gold);}

/* --- Lifecycle status badges --- */
.sim-badge{display:inline-block;padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.2px;white-space:nowrap;}
.sim-badge-active{background:#dcf5e4;color:#1a7a3f;}
.sim-badge-deferred{background:#e4edfb;color:#2c5aa0;}
.sim-badge-suspended{background:#fff3d6;color:#8a6300;}
.sim-badge-withdrawn{background:#eceff3;color:#5b6b78;}
.sim-badge-dropout{background:#fde1de;color:#a3352c;}
.sim-badge-graduated{background:#e7e0fb;color:#5b3ca8;}
.sim-badge-alumni{background:#d8f1f6;color:#0a6b83;}
html[data-theme="dark"] .sim-badge-active{background:rgba(46,158,91,.18);color:#5fd694;}
html[data-theme="dark"] .sim-badge-deferred{background:rgba(74,144,217,.18);color:#8fbdf0;}
html[data-theme="dark"] .sim-badge-suspended{background:rgba(99,110,241,.18);color:#A5AEF7;}
html[data-theme="dark"] .sim-badge-withdrawn{background:rgba(140,155,170,.18);color:#b5c1cd;}
html[data-theme="dark"] .sim-badge-dropout{background:rgba(196,68,58,.20);color:#f0938b;}
html[data-theme="dark"] .sim-badge-graduated{background:rgba(139,92,246,.20);color:#c4aef5;}
html[data-theme="dark"] .sim-badge-alumni{background:rgba(10,127,168,.20);color:#68c6dc;}

/* --- Profile header --- */
.sim-profile-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap;}
.sim-photo{width:104px;height:120px;border-radius:12px;object-fit:cover;border:1px solid var(--line);background:var(--surface-2);flex-shrink:0;}
.sim-photo.placeholder{display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:12px;text-align:center;}
.sim-head-meta h2{margin:0 0 4px;color:var(--text-strong);font-size:22px;}
.sim-head-meta .sim-idline{color:var(--text-muted);font-size:13.5px;display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 10px;}
.sim-head-meta .sim-idline b{color:var(--text-strong);}

/* --- Tabs --- */
.sim-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:18px 0 0;}
.sim-tab{appearance:none;border:none;background:none;cursor:pointer;padding:10px 15px;font-size:13.5px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:8px 8px 0 0;}
.sim-tab:hover{color:var(--text-strong);background:var(--surface-2);}
.sim-tab.active{color:var(--navy);border-bottom-color:var(--navy);}
html[data-theme="dark"] .sim-tab.active{color:var(--brand-300,#8fbdf0);border-bottom-color:var(--sky);}
.sim-tabpane{display:none;padding-top:18px;}
.sim-tabpane.active{display:block;}

/* --- Definition grid (key/value) --- */
.sim-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;}
@media(max-width:640px){.sim-dl{grid-template-columns:1fr;}}
.sim-dl .kv{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line);}
.sim-dl .kv .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-faint);font-weight:700;}
.sim-dl .kv .v{font-size:14px;color:var(--text-strong);}

/* --- Summary mini-cards inside tabs --- */
.sim-mini-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:6px;}
.sim-mini{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface);}
.sim-mini .n{font-size:24px;font-weight:800;color:var(--navy-dark);line-height:1.1;}
.sim-mini .l{font-size:12px;color:var(--text-muted);margin-top:3px;}
html[data-theme="dark"] .sim-mini{background:var(--surface-2);border-color:var(--border);}
html[data-theme="dark"] .sim-mini .n{color:var(--text-strong);}

/* --- Document list --- */
.sim-doc{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:var(--surface);}
.sim-doc .ico{width:40px;height:40px;border-radius:9px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.sim-doc .info{flex:1;min-width:0;}
.sim-doc .info .t{font-weight:600;color:var(--text-strong);font-size:14px;}
.sim-doc .info .m{font-size:12px;color:var(--text-muted);margin-top:2px;}
.sim-doc .acts{display:flex;gap:6px;flex-wrap:wrap;}
html[data-theme="dark"] .sim-doc{background:var(--surface-2);border-color:var(--border);}

/* --- Timeline (status / academic history) --- */
.sim-timeline{position:relative;padding-left:22px;}
.sim-timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--line);}
.sim-tl-item{position:relative;padding:0 0 16px 6px;}
.sim-tl-item::before{content:"";position:absolute;left:-19px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--navy);border:2px solid var(--surface);}
.sim-tl-item .when{font-size:12px;color:var(--text-faint);}
.sim-tl-item .what{font-size:14px;color:var(--text-strong);margin-top:2px;}
.sim-tl-item .why{font-size:13px;color:var(--text-muted);margin-top:2px;}

/* --- Modal --- */
.sim-modal-overlay{position:fixed;inset:0;background:rgba(11,44,59,.55);display:none;align-items:center;justify-content:center;z-index:200;padding:16px;}
.sim-modal-overlay.open{display:flex;}
.sim-modal{background:var(--surface,#fff);border-radius:16px;max-width:520px;width:100%;box-shadow:var(--shadow-lg,0 20px 60px rgba(0,0,0,.3));overflow:hidden;}
.sim-modal-head{padding:16px 20px;border-bottom:1px solid var(--line);font-weight:700;color:var(--text-strong);display:flex;justify-content:space-between;align-items:center;}
.sim-modal-body{padding:20px;max-height:70vh;overflow:auto;}
.sim-modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;}
.sim-modal .x{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--text-faint);}

.sim-empty{text-align:center;color:var(--text-muted);padding:26px;}
.sim-empty .big{font-size:34px;margin-bottom:6px;}
.sim-pending{font-size:12.5px;color:var(--text-faint);font-style:italic;margin-top:8px;}

/* ==================================================================
 * UI polish layer
 * ------------------------------------------------------------------
 * Appended last so it wins without editing the rules above.
 *
 * The secondary button used to be written inline on every page —
 * 264 copies of the same three declarations across 82 files, which
 * meant the "quiet" button could never be restyled once, and drifted
 * wherever someone typed it slightly differently. It is .btn-soft now.
 * ================================================================== */

/* ---------------- Buttons ---------------- */
.btn-soft{
  background:var(--surface-2);color:var(--text-strong);border:1px solid var(--border);
}
.btn-soft:hover{
  background:var(--surface);border-color:var(--border-strong);
  color:var(--brand-700);transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.07);
}
.btn-soft:active{transform:translateY(0);box-shadow:none;}

/* Every variant now has a hover, an active and a disabled state. The
   red one had none at all: the most destructive button in the system
   was also the only one that never acknowledged the pointer. */
.btn-red:hover{background:#b91c1c;transform:translateY(-1px);box-shadow:0 4px 14px rgba(220,38,38,.30);}
.btn-red:active,.btn-green:active,.btn-gold:active,.btn-primary:active{transform:translateY(0);box-shadow:none;}

.btn:disabled,.btn[disabled],.btn.is-busy{
  opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none !important;filter:grayscale(.25);
}

/* Keyboard users get the same ring the inputs have. :focus-visible so
   the ring does not flash on every mouse click. */
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring);}

.btn svg{width:15px;height:15px;flex:0 0 auto;}
.btn-small svg{width:13px;height:13px;}

/* ---------------- Form controls ---------------- */
/*
 * Tell the browser which palette its NATIVE widgets should use. Without
 * this the date picker, the calendar icon, the time spinner and the
 * select dropdown all render in the light palette — so in dark mode the
 * calendar button was a black glyph on a dark field, effectively
 * invisible, and the opened picker was a white sheet.
 */
input,select,textarea{color-scheme:light;}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{color-scheme:dark;}

/* These types were missing from the shared control styling, so they
   fell back to the browser default and sat at a different height and
   corner radius beside every other field on the same row. */
input[type=search],input[type=url],input[type=month],input[type=week],
input[type=datetime-local],input[type=time]{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;
  font-size:14px;font-family:inherit;background:var(--surface-input);color:var(--text);transition:.15s;
}

input[type=date],input[type=time],input[type=datetime-local],input[type=month]{
  min-height:42px;                 /* match text inputs: Safari sizes these from content */
  appearance:none;-webkit-appearance:none;
}
/* The picker button is a tiny, low-contrast target by default. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;padding:3px;border-radius:5px;transition:.15s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator,
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator,
input[type=month]:hover::-webkit-calendar-picker-indicator{
  opacity:1;background:var(--brand-100);
}
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=datetime-local]::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.4);opacity:.6;
}
html[data-theme="dark"] input[type=date]:hover::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type=time]:hover::-webkit-calendar-picker-indicator{
  background:transparent;opacity:1;
}
/* An empty date reads as a grey hint rather than looking like a value. */
input[type=date]:not(:focus):invalid,
input[type=date][value=""]:not(:focus){color:var(--text-faint);}

/* A select is a control, not a text box — give it the arrow back after
   the shared rule strips the browser default. */
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px;
}
html[data-theme="dark"] select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
select:disabled,input:disabled,textarea:disabled{
  opacity:.6;cursor:not-allowed;background:var(--surface-2);
}

/* The file input was never styled at all — it was the one raw browser
   control left on otherwise finished forms. */
input[type=file]{
  width:100%;font-size:13px;font-family:inherit;color:var(--text-muted);
  padding:8px;border:1px dashed var(--border-strong);border-radius:10px;
  background:var(--surface-input);cursor:pointer;transition:.15s;
}
input[type=file]:hover{border-color:var(--brand-500);background:var(--surface-2);}
input[type=file]::file-selector-button{
  font:inherit;font-size:13px;font-weight:600;margin-right:12px;cursor:pointer;
  padding:7px 13px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-strong);transition:.15s;
}
input[type=file]:hover::file-selector-button{background:var(--brand-600);color:#fff;border-color:var(--brand-600);}

/* Labels were pinned to a hardcoded navy, which is nearly black on a
   dark background. */
html[data-theme="dark"] label{color:var(--text-strong);}

.form-hint{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.45;}
.req{color:var(--red);font-weight:700;}

/* ---------------- Tables & badges ---------------- */
table.data tbody tr{transition:background .12s;}
table.data tbody tr:hover{background:var(--surface-2);}
.badge{white-space:nowrap;}

/* ---------------- Toolbar ---------------- */
.ss-toolbar input[type=date]{min-width:150px;}
.ss-toolbar select,.ss-toolbar input{margin:0;}

/* ---------------------------------------------------------------------
   A REGISTERED VALUE THE SCHOOL CANNOT CHANGE.
   It must not look like an input that has stopped working — the school
   is meant to READ this, so it is styled as a stated fact: quieter
   background, no focus ring, and a cursor that says "not for typing"
   rather than "broken".
   --------------------------------------------------------------------- */
input.so-locked,
input.so-locked:disabled{
    background:var(--surface-2);
    color:var(--text-strong);
    border-style:dashed;
    cursor:default;
    opacity:1;                 /* browsers grey a disabled input to unreadable */
    -webkit-text-fill-color:var(--text-strong);   /* Safari does it its own way */
}

/* The inline "correct this promotion" control on the promotion history. */
form.gr-fix{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:0;}
form.gr-fix select{min-width:96px;padding:4px 6px;font-size:12px;}

/* The running build, in the footer. Quiet enough to ignore, present
   enough to answer "which version is this?" without opening a file. */
.site-footer .site-version{
    margin-left:8px;opacity:.55;font-size:11px;letter-spacing:.3px;
    font-variant-numeric:tabular-nums;
}

/* My school history — one block per academic year. */
.st-hist{border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:10px;}
.st-hist-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start;}
.st-hist-head .badge{margin-left:6px;}
.st-hist-links{display:flex;gap:6px;flex-wrap:wrap;}
.st-hist-facts{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
    gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);
}
.st-hist-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
.st-hist-val{display:block;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px;}