/* ============================================================
   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;}
/* btn-soft inherits the right tokens but the hover shadow must be visible on dark. */
html[data-theme="dark"] .btn-soft{
  background:var(--surface-2);color:var(--text-strong);border-color:var(--border);
}
html[data-theme="dark"] .btn-soft:hover{
  background:var(--surface);border-color:var(--border-strong);color:var(--text-strong);
  box-shadow:0 3px 10px rgba(0,0,0,.35);
}

/* 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 option rows: the browser paints these natively, so colour-scheme
   is the primary lever. These explicit colours are a fallback for Chromium,
   which respects them in the open list even when the OS theme disagrees.
   Without them the open list is white-on-white or black-on-black. */
html[data-theme="dark"] option{
  background-color:var(--surface-2);
  color:var(--text);
}
html[data-theme="dark"] option:checked,
html[data-theme="dark"] option:hover{
  background-color:var(--brand-600);
  color:#fff;
}
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;}

/* ---------- Language menu --------------------------------------------
   Same shape language as the profile menu next to it: a 42px .icon-btn
   trigger, then a rounded popover with the system's shadow and the same
   open/close transition. The two controls do the same kind of thing —
   open a short list and pick one — so they should not look like two
   different kinds of control.

   The trigger shows the CURRENT language, and the open list ticks it, so
   the control never has to be read twice to know which way it goes. That
   matters most for the user who cannot read the other option.           */
.langmenu{position:relative;flex-shrink:0;}

.icon-btn.langmenu-trigger{gap:0;}
.icon-btn.langmenu-trigger svg{width:20px;height:20px;}

/* The code badge sits ON the globe, which keeps the trigger square and
   the top bar on one optical line. The ring is the button's own
   background so the badge reads as part of it — and it follows the hover
   colour, otherwise a seam appears on hover. */
.langmenu-code{
  position:absolute;right:-3px;bottom:-3px;
  min-width:19px;height:15px;padding:0 3px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;
  background:var(--brand-600);color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.4px;
  box-shadow:0 0 0 2px var(--surface-2);
  transition:box-shadow .15s;
}
.icon-btn.langmenu-trigger:hover .langmenu-code{box-shadow:0 0 0 2px var(--surface);}

.langmenu-pop{
  position:absolute;top:calc(100% + 10px);right:0;width:210px;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-pop);overflow:hidden;z-index:60;padding:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.langmenu.open .langmenu-pop{opacity:1;visibility:visible;transform:translateY(0);}

.langmenu-head{
  padding:6px 10px 8px;
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--text-muted);
}
.langmenu-opt{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  text-decoration:none;color:var(--text-strong);
  font-size:13.5px;transition:background .14s;
}
.langmenu-opt:hover{background:var(--surface-2);}
.langmenu-abbr{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:24px;border-radius:7px;flex-shrink:0;
  background:var(--surface-2);color:var(--text-muted);
  font-size:10.5px;font-weight:800;letter-spacing:.4px;
}
.langmenu-name{flex:1;min-width:0;}
.langmenu-tick{display:inline-flex;color:var(--brand-600);}
.langmenu-tick svg{width:16px;height:16px;}

/* The chosen language is the one fact this menu exists to show, so it is
   the only thing here given real contrast rather than a tint. */
.langmenu-opt.is-on{background:var(--brand-100);}
.langmenu-opt.is-on .langmenu-abbr{background:var(--brand-600);color:#fff;}
.langmenu-opt.is-on .langmenu-name{font-weight:700;color:var(--brand-700);}