/* =====================================================================
   BFS Portal — Blossom Forth School
   Brand: logo green + navy. Calm surfaces, big readable money figures.
   ===================================================================== */

/* =====================================================================
   RESPONSIVE MAP — where each device viewport lives in this file
   (search for the @@ tag to jump there; every media query in this file is in one of these)
     @@ VIEWPORT 1 of 3  DESKTOP  1025px and up   (small laptop 1025–1279, desktop 1280+ with auto-scale)  -> line ~353
     @@ VIEWPORT 2 of 3  TABLET   up to 1024px    (drawer sidebar; 721–1024 refinements; big tablets in portrait)  -> line ~545
     @@ VIEWPORT 3 of 3  MOBILE   720px and below (phone / large phone / small phone)  -> line ~657
   (Line numbers are approximate; search the @@ tag.)  Print rules follow at line ~765.
   The three sections sit together near the END of this file, after all the base styles
   and before the Print rules. Order matters: Desktop -> Tablet -> Mobile.
   Public enrollment form (enroll.php) has the same three sections in assets/enroll.css.
   ===================================================================== */
:root{
  --g50:#eef7f1; --g100:#d8eee0; --g200:#b3dcc2; --g500:#12873f; --g600:#0d6e35; --g700:#0a5629; --g800:#073d1d;
  --navy:#1d2a7a; --navy50:#e8ebfa;
  --ink:#16241b; --paper:#f1f5f2; --card:#ffffff; --line:#dbe4de; --line-2:#c9d6cd;
  --muted:#59695f; --danger:#b3321f; --warn:#9a5b06; --gold:#fff4d6; --gold-line:#ecd28a;
  /* spacing scale + layout */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --tb:56px;            /* top bar height */
  --nav-w:248px;        /* sidebar width on desktop */
  --radius:12px;
  --font:'Segoe UI Variable Text','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
  box-sizing:border-box;
}
*{box-sizing:inherit; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--tb) + 12px);}
body{font-family:var(--font); font-size:15px; line-height:1.5; background:var(--paper); color:var(--ink); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;}
img{max-width:100%;}
a{color:var(--g700);}
:focus-visible{outline:3px solid #7cc79a; outline-offset:2px; border-radius:6px;}
.num, td.num, th.num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;}
.muted{color:var(--muted);}
.nowrap{white-space:nowrap;}

/* ---------- Top bar ---------- */
.topbar{position:sticky; top:0; z-index:30; background:var(--g800); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); min-height:var(--tb); padding:var(--s2) var(--s5); padding-left:max(var(--s5), env(safe-area-inset-left)); padding-right:max(var(--s5), env(safe-area-inset-right));}
.brand{display:flex; align-items:center; gap:var(--s3); font-weight:700; font-size:16px; letter-spacing:.01em; text-decoration:none; color:#fff; min-width:0; white-space:nowrap;}
.brand .mark{width:30px;height:30px;border-radius:8px;background:#ffffff26;display:flex;align-items:center;justify-content:center;font-size:15px;}
.brand small{display:block; font-weight:500; font-size:11.5px; color:#b9dcc6; line-height:1.1; margin-top:1px;}
.brand .brand-txt{display:flex; flex-direction:column; line-height:1.15; min-width:0;}
.top-title{font-size:15px; font-weight:600; color:#e6f3ea; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; text-align:left; padding-left:var(--s4); border-left:1px solid #ffffff2e; margin-left:var(--s2);}
.who{display:flex; align-items:center; gap:var(--s3); font-size:13px; min-width:0;}
.who > span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; font-weight:600;}
.who .role-pill{background:#ffffff1f; padding:4px 12px; border-radius:999px; font-weight:600; white-space:nowrap; font-size:12.5px;}
.who a.logout{background:transparent;border:1px solid #ffffff59;color:#fff;padding:7px 14px;border-radius:9px;text-decoration:none;font-size:13px; white-space:nowrap; min-height:36px; display:inline-flex; align-items:center;}
.who a.logout:hover{background:#ffffff1f;}
.nav-toggle{display:none; flex:none; width:44px; height:44px; border:1px solid #ffffff59; background:transparent; color:#fff; border-radius:10px; cursor:pointer; align-items:center; justify-content:center;}
.nav-toggle:hover{background:#ffffff1f;}
.nav-toggle svg{width:22px; height:22px;}
.topbar-left{display:flex; align-items:center; gap:var(--s3); min-width:0; flex:1;}

/* ---------- Login ---------- */
.login-body{background:var(--card);}
.login-split{min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.login-brand{background:var(--g800); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:var(--s5); padding:clamp(32px,6vw,80px);
  background-image:radial-gradient(circle at 12% 110%, #0f5a35 0, transparent 55%);}
.login-brand img{width:clamp(110px,16vw,190px); height:auto; border-radius:50%; background:#fff; border:4px solid #ffffff40;}
.login-brand h2{font-size:clamp(26px,3.2vw,38px); line-height:1.15; font-weight:700; letter-spacing:-.01em; max-width:15ch;}
.login-brand p{color:#c4e3d0; font-size:16px; max-width:38ch;}
.login-panel{display:flex; align-items:center; justify-content:center; padding:var(--s5) var(--s4);}
.login-wrap{min-height:calc(100vh - var(--tb)); display:flex; align-items:center; justify-content:center; padding:var(--s5) var(--s4);}
.login-card{background:var(--card); width:100%; max-width:380px;}
.login-split .login-card{border:none; box-shadow:none; padding:0;}
.login-card h1{font-size:26px; line-height:1.2; margin-bottom:var(--s1);}
.login-card p.sub{color:var(--muted); font-size:14.5px; margin-bottom:var(--s5);}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:76px;}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:none; background:transparent; color:var(--g700); font:inherit; font-size:13px; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer; min-height:36px;}
.pw-toggle:hover{background:var(--g50);}
.error-box{background:#fbe9e5; color:var(--danger); border:1px solid #f0c4bb; padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:var(--s4); font-weight:500;}

/* ---------- App shell ---------- */
.app{display:flex; align-items:flex-start; min-height:calc(100vh - var(--tb));}
.sidenav{width:var(--nav-w); flex:none; background:var(--card); border-right:1px solid var(--line); padding:var(--s3) var(--s3) var(--s5);
  position:sticky; top:var(--tb); height:calc(100vh - var(--tb)); overflow-y:auto; overscroll-behavior:contain;}
.nav-label{font-size:12px; font-weight:700; color:var(--g700); padding:var(--s4) var(--s3) var(--s1); letter-spacing:.01em;}
.nav-label:first-child{padding-top:var(--s2);}
.sidenav a{display:flex; align-items:center; gap:var(--s3); padding:9px var(--s3); border-radius:9px; font-size:14px; color:var(--ink); text-decoration:none; margin-bottom:1px; border:1px solid transparent; position:relative; min-height:40px;}
.sidenav a .icon{color:var(--muted);}
.sidenav a.active{background:var(--g50); border-color:var(--g200); color:var(--g700); font-weight:700;}
.sidenav a.active .icon{color:var(--g600);}
.sidenav a.active::before{content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:4px; border-radius:0 4px 4px 0; background:var(--g600);}
.sidenav a:hover:not(.active){background:var(--paper);}
.nav-scrim{display:none;}
.main{flex:1; min-width:0; padding:var(--s5) var(--s6) 72px; overflow-x:hidden;}
.main-in{width:100%; max-width:1480px; margin:0 auto;}
h2.page-title{font-size:24px; line-height:1.25; margin-bottom:var(--s1); letter-spacing:-.01em;}
.page-sub{color:var(--muted); font-size:14px; margin-bottom:var(--s5); max-width:70ch;}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s3) var(--s4); flex-wrap:wrap; margin-bottom:var(--s5);}
.page-head .page-sub{margin-bottom:0;}
.page-actions{display:flex; gap:var(--s2); flex-wrap:wrap;}
.lock-banner{display:flex; align-items:center; gap:var(--s2); background:var(--g50); border:1px solid var(--g200); color:var(--g700); padding:10px 14px; border-radius:10px; font-size:13.5px; margin-bottom:var(--s4); font-weight:600; flex-wrap:wrap;}

/* ---------- Cards ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s4); margin-bottom:var(--s5);}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4) 18px; min-width:0; display:block; text-decoration:none; color:inherit;}
.kpi .lbl{font-size:13px; color:var(--muted); font-weight:600;}
.kpi .val{font-size:26px; line-height:1.2; font-weight:700; margin-top:var(--s1); overflow-wrap:anywhere; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.kpi .sub{font-size:12.5px; color:var(--muted); margin-top:2px;}
.kpi.hero{background:var(--g700); border-color:var(--g700); color:#fff;}
.kpi.hero .lbl, .kpi.hero .sub{color:#cde8d7;}
.kpi.hero .val{font-size:32px;}
.kpi.warn{background:var(--gold); border-color:var(--gold-line);}
.kpi.warn .val{color:var(--warn);}
.kpi.alert{background:#fbe9e5; border-color:#f0c4bb;}
.kpi.alert .val{color:var(--danger);}
a.kpi:hover{border-color:var(--g500); box-shadow:0 6px 18px -12px rgba(10,60,30,.5);}
.kpi-group{font-size:13px; font-weight:700; color:var(--muted); margin:0 0 var(--s2);}

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px var(--s5); margin-bottom:var(--s5); min-width:0;}
.panel:last-child{margin-bottom:0;}
.panel-hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--s4); gap:var(--s3); flex-wrap:wrap;}
.panel h3{font-size:16px; line-height:1.3; display:flex; align-items:center; flex-wrap:wrap; gap:var(--s1) var(--s2); margin:0 0 var(--s3);}
.panel h3 + form > .row:first-child label.f, .panel h3 + form > label.f:first-child{margin-top:0;}
.panel-hd h3{margin:0;}
.panel h3 .dot{width:8px;height:8px;border-radius:2px;background:var(--g500); flex:none;}
.panel > p{margin-bottom:var(--s3);}

/* ---------- Forms ---------- */
input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],input[type=file],input[type=search],textarea,select{width:100%; min-height:42px; padding:9px var(--s3); border:1px solid var(--line-2); border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:15px;}
input::placeholder, textarea::placeholder{color:#8a9890;}
input:hover, select:hover, textarea:hover{border-color:var(--g500);}
input:focus,select:focus,textarea:focus{outline:3px solid var(--g100); border-color:var(--g500);}
label.f{display:block; font-size:13px; color:var(--ink); margin-bottom:var(--s1); margin-top:var(--s3); font-weight:600;}
.row{display:flex; gap:0 var(--s4); flex-wrap:wrap;}
.row > div{flex:1 1 200px; min-width:0;}

/* Adjust-fees form (account page): select + amount side by side, never overlapping or overflowing the panel */
.adj-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(140px,220px); gap:0 16px; align-items:end; margin-top:10px; width:100%; max-width:100%;}
.adj-grid > div{min-width:0;}
.adj-grid select, .adj-grid input[type=number], .adj-grid input[type=text]{width:100%; max-width:100%; min-width:0; box-sizing:border-box;}
.adj-grid.adj-reason{grid-template-columns:minmax(0,1fr);}
@media (max-width:640px){ .adj-grid{grid-template-columns:minmax(0,1fr);} }

.btn{border:1px solid transparent; border-radius:10px; padding:10px 18px; min-height:42px; font:inherit; font-size:14.5px; font-weight:600; line-height:1.3; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--s1);}
.btn-primary{background:var(--g600); color:#fff;}
.btn-primary:hover{background:var(--g700);}
.btn-primary:disabled{background:#8fb8a0; cursor:not-allowed;}
.btn-outline{background:#fff; border-color:var(--line-2); color:var(--ink);}
.btn-outline:hover{border-color:var(--g500); color:var(--g700); background:var(--g50);}
.btn-warn{background:#fbeee0; color:var(--warn); border-color:#f0d4ac;}
.btn-danger{background:#fbe9e5; color:var(--danger); border-color:#f0c4bb;}
.btn-sm{padding:6px 12px; min-height:34px; font-size:13px; border-radius:9px;}
.btn-lg{padding:12px 26px; min-height:50px; font-size:16px; border-radius:12px;}
.btn-block{width:100%;}

/* ---------- Tables ---------- */
.panel{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th{text-align:left; font-size:12.5px; font-weight:700; color:var(--muted); padding:10px var(--s3); border-bottom:2px solid var(--line); white-space:nowrap; background:#f8fbf9;}
td{padding:var(--s3); border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--g50);}
td form{margin:0;}
td select{max-width:200px !important; min-width:124px;}
th select, th input[type=text]{width:auto; max-width:100%; min-height:34px; padding:4px 8px; font-size:13px; font-weight:600; vertical-align:middle;}   /* bulk controls inside column headers must not stretch to 100% and overlap the next cell */
td.amt, .amt{font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap;}
.badge{padding:3px 10px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap; display:inline-block; line-height:1.5;}

/* Inline SVG icons */
.icon{width:17px; height:17px; flex:none; vertical-align:-3px;}
.brand .mark .icon{width:16px; height:16px; vertical-align:-1px;}
.brand img.logo{height:38px; width:38px; flex:none; object-fit:cover; border-radius:50%; background:#fff; border:2px solid #ffffff59;}
.badge .icon{width:12px; height:12px; margin-right:2px; vertical-align:-1px;}
.btn .icon{width:15px; height:15px; margin-right:var(--s1); vertical-align:-2px;}
.lock-banner .icon{width:16px; height:16px; margin-right:2px;}
.sidenav a .icon{width:18px; height:18px;}
.badge.paid, .badge.active, .badge.unlocked, .badge.approved{background:var(--g100); color:var(--g700);}
.badge.reviewing{background:var(--navy50); color:var(--navy);}
.badge.partial{background:#fdf1de; color:var(--warn);}
.badge.unpaid{background:#f6dcd6; color:var(--danger);}
.badge.due, .badge.pending{background:#fdf1de; color:var(--warn);}
.badge.disabled, .badge.locked, .badge.denied, .badge.cancelled{background:#f6dcd6; color:var(--danger);}

/* ---------- Search / filter rows ---------- */
.search-row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-bottom:var(--s4); align-items:center;}
.search-row input{flex:1 1 260px; min-width:0;}
.search-row select{width:auto; flex:0 1 170px; min-width:140px;}
.search-row .btn{flex:none;}
.panel .search-row:last-child{margin-bottom:0;}
.finder{display:flex; gap:var(--s3); align-items:stretch;}
.finder input{min-height:54px; font-size:18px; border-radius:12px; padding:0 var(--s4); border-width:2px; border-color:var(--g200);}
.finder .btn{min-height:54px; padding:0 28px; font-size:16px; border-radius:12px; flex:none; white-space:nowrap;}
.finder-hint{font-size:13px; color:var(--muted); margin-top:var(--s2);}
.student-card{display:flex; gap:var(--s5); flex-wrap:wrap;}
.student-card .col{flex:1 1 240px; min-width:0;}
.mini-lbl{font-size:12px; color:var(--muted); font-weight:600;}
.mini-val{font-size:15px; font-weight:600; margin-bottom:var(--s3); overflow-wrap:anywhere;}

.acct-summary{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s3); margin:var(--s3) 0 var(--s4);}
.acct-box{background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:var(--s4);}
.acct-box .l{font-size:13px; color:var(--muted); font-weight:600;}
.acct-box .v{font-size:22px; font-weight:700; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.acct-box.balance{background:var(--g50); border-color:var(--g200);}
.acct-box.balance .v{color:var(--g700); font-size:28px;}
.acct-box.balance.due{background:var(--gold); border-color:var(--gold-line);}
.acct-box.balance.due .v{color:var(--warn);}

/* compact student facts + expandable full details */
.info-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s3) var(--s5); margin-bottom:var(--s3);}
.info-strip .mini-val{margin-bottom:0;}
details.more-info{border-top:1px solid var(--line); margin-top:var(--s3); padding-top:var(--s3);}
details.more-info > summary{cursor:pointer; font-weight:600; font-size:14px; color:var(--g700); list-style:none; display:inline-flex; align-items:center; gap:var(--s2); min-height:36px; padding:0 2px;}
details.more-info > summary::-webkit-details-marker{display:none;}
details.more-info > summary::before{content:"+"; display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; border-radius:6px; background:var(--g100); font-weight:700; line-height:1;}
details.more-info[open] > summary::before{content:"\2212";}
details.more-info .student-card{margin-top:var(--s4);}

.receipt{border:1px dashed var(--line-2); border-radius:11px; padding:var(--s4) 18px; font-size:13px; background:var(--paper); max-width:440px; width:100%;}
.receipt .hd{text-align:center; margin-bottom:var(--s3);}
.receipt .hd b{font-size:14.5px;}
.receipt .line{display:flex; justify-content:space-between; gap:var(--s3); padding:5px 0; border-bottom:1px dashed var(--line-2);}
.receipt .sub{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:var(--s3) 0 2px;}
.receipt .note{font-size:11px; color:var(--muted); padding:0 0 3px; text-align:right;}
.receipt .total{font-weight:700; font-size:15px; margin-top:var(--s2);}
.receipt .paid-tag{font-style:normal; font-size:10px; font-weight:700; letter-spacing:.05em; color:var(--g700); border:1px solid var(--g600); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:1px;}

.empty{color:var(--muted); font-size:14px; padding:var(--s5); text-align:center;}
.overflow-x{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.method-opts{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s2);}
.method-opts label{border:1px solid var(--line-2); border-radius:10px; padding:8px 14px; min-height:44px; font-size:14px; font-weight:600; cursor:pointer; display:flex; gap:8px; align-items:center; background:#fff;}
.method-opts label:hover{border-color:var(--g500);}
.method-opts label:has(input:checked){border-color:var(--g600); background:var(--g50); color:var(--g700); box-shadow:0 0 0 2px var(--g100);}
.method-opts input{width:auto; min-height:0;}
.flash{background:var(--g50); border:1px solid var(--g200); color:var(--g700); padding:11px 14px; border-radius:10px; font-size:14px; margin-bottom:var(--s4); font-weight:600;}
input[type=checkbox], input[type=radio]{width:auto; min-height:0; accent-color:var(--g600);}
dialog{max-width:calc(100vw - 32px);}
dialog::backdrop{background:rgba(10,30,18,.45);}

/* ---------- Per-grade overview: compact filter chips ---------- */
.gcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--s3); margin-bottom:var(--s4);}
.gcard{display:flex; flex-direction:column; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s3) var(--s4); text-decoration:none; color:var(--ink); min-width:0; transition:border-color .15s, box-shadow .15s;}
.gcard:hover{border-color:var(--g500); box-shadow:0 8px 22px -14px rgba(10,60,30,.5);}
.gcard.on{border-color:var(--g600); background:var(--g50); box-shadow:0 0 0 2px var(--g200);}
.gc-top{display:flex; justify-content:space-between; align-items:center; gap:var(--s2);}
.gc-lbl{font-size:13px; font-weight:700; color:var(--ink); overflow-wrap:anywhere;}
.gc-ico{flex:none; width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff;}
.gc-ico.ok{background:var(--g500);} .gc-ico.due{background:var(--warn);}
.gc-ico .icon{width:14px; height:14px; vertical-align:0;}
.gc-num{font-size:22px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums;}
.gc-cap{font-size:12px; font-weight:600; display:flex; align-items:center; gap:var(--s1);}
.gc-cap .icon{width:12px; height:12px; vertical-align:0;}
.gc-cap.ok{color:var(--g600);} .gc-cap.due{color:var(--warn);}

/* ---------- Payment screen ---------- */
.pay-who{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--s4) var(--s5); margin-bottom:var(--s4);}
.pay-who .nm{font-size:20px; font-weight:700; line-height:1.25;}
.pay-who .meta{color:var(--muted); font-size:14px;}
.pay-who .due-box{text-align:right;}
.pay-who .due-box .l{font-size:13px; font-weight:600; color:var(--muted);}
.pay-who .due-box .v{font-size:32px; font-weight:700; color:var(--warn); line-height:1.15; font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.pay-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--s5); align-items:start;}
.pay-main .panel{margin-bottom:var(--s4);}
.pay-side{position:sticky; top:calc(var(--tb) + var(--s4)); background:var(--card); border:1px solid var(--g200); border-radius:var(--radius); padding:var(--s5); box-shadow:0 10px 30px -22px rgba(10,60,30,.6);}
.pay-side .ln{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); padding:6px 0; font-size:14px; color:var(--muted);}
.pay-side .ln b{color:var(--ink); font-variant-numeric:tabular-nums;}
.pay-side .big{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); border-top:2px solid var(--line); margin-top:var(--s2); padding-top:var(--s3);}
.pay-side .big span{font-weight:700; white-space:nowrap;}
.pay-side .big b{font-size:28px; line-height:1.15; color:var(--g700); font-variant-numeric:tabular-nums; letter-spacing:-.01em;}
.pay-side .btn{width:100%; margin-top:var(--s3);}
.fee-row{display:grid; grid-template-columns:minmax(0,1fr) 150px auto; gap:var(--s2) var(--s3); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--line);}
.fee-row:last-of-type{border-bottom:none;}
.fee-name{font-weight:700; font-size:15px;}
.fee-meta{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums;}
.fee-meta b{color:var(--ink);}
.fee-row input.alloc{margin:0; text-align:right; font-variant-numeric:tabular-nums; font-size:16px; font-weight:600;}
.fee-done{grid-column:2 / span 2; text-align:right; font-size:13px; font-weight:700; color:var(--g600);}
.fee-tools{display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3);}

/* ---------- Dashboards ---------- */
.dash-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s5); align-items:start;}
.dash-grid > .panel{margin-bottom:0;}
.progress{height:10px; border-radius:999px; background:var(--g100); overflow:hidden; margin-top:var(--s2);}
.progress > i{display:block; height:100%; background:var(--g500); border-radius:999px;}
.chips{display:flex; flex-wrap:wrap; gap:var(--s2);}
.chip{display:inline-flex; align-items:baseline; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13.5px;}
.chip b{font-variant-numeric:tabular-nums;}
.quick{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3);}
.quick a{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4); background:var(--card); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink); font-weight:600; font-size:14.5px; min-height:52px;}
.quick a:hover{border-color:var(--g500); background:var(--g50);}
.quick a .icon{color:var(--g600); width:20px; height:20px;}
.stat-link{font-size:13px; font-weight:600;}













/* ================= Student form (enroll / edit) — clean layout ================= */
.sf{display:flex; flex-direction:column; gap:var(--s5); max-width:1100px;}
.sf .panel{margin-bottom:0; padding:var(--s5) 28px 28px; overflow:visible; box-shadow:0 1px 2px rgba(10,40,20,.04);}
.sf-hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s1) var(--s3); padding-bottom:var(--s4); margin-bottom:20px; border-bottom:1px solid var(--line);}
.sf-hd h3{margin:0; font-size:17px;}
.sf-sub{font-size:13px; color:var(--muted);}
.sf-note{background:var(--g50); border:1px solid var(--g200); color:var(--g700); border-radius:10px; padding:10px 14px; font-size:13.5px; margin:0 0 20px !important;}
.req{color:var(--danger); font-weight:700;}

/* fields: even grid, consistent gaps */
.sf .row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px 24px; margin-bottom:20px;}
.sf .row:last-child{margin-bottom:0;}
.sf .row > div{min-width:0;}
.sf label.f{margin:0 0 6px; font-size:13px; color:var(--ink); font-weight:600;}
.sf input[type=text], .sf input[type=date], .sf select{min-height:46px; background:#fff; border-color:var(--line-2); padding:10px 14px;}
.sf input:hover, .sf select:hover{border-color:var(--g500);}
.sf input:focus, .sf select:focus{outline:3px solid var(--g100); border-color:var(--g500);}

/* action bar: stays visible, buttons clearly separated */
.sf-actions{position:sticky; bottom:0; z-index:5; display:flex; justify-content:flex-end; align-items:center; gap:16px; max-width:1100px; margin-top:var(--s5); padding:16px 20px; background:rgba(255,255,255,.96); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 -8px 24px -16px rgba(10,40,20,.35);}
.sf-actions .btn{min-width:140px; min-height:46px; padding:10px 26px;}


/* ---------- Pending edit-request notification (admin dashboard) ---------- */
.notif-pending{background:#fff3cd; border:1px solid #f0c24b; border-left:6px solid #e0a100; border-radius:var(--radius); padding:var(--s3) var(--s4); margin-bottom:var(--s5); box-shadow:0 6px 18px -12px rgba(120,80,0,.55);}
.notif-hd{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s2);}
.notif-title{font-weight:700; color:#6b4a00; display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;}
.notif-title .icon{width:16px; height:16px;}
.notif-row{display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; padding:var(--s2) 0; border-top:1px dashed #e8cf86;}
.notif-info{min-width:0; flex:1 1 260px; color:var(--ink);}
.notif-reason{display:block; font-size:13px; color:var(--muted);}
.notif-actions{display:flex; gap:var(--s2); flex:0 0 auto;}













/* Admin's eye toggle: lets cashiers see / use Enroll Student */
.eye-toggle{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 14px; border-radius:999px; border:1px solid var(--line-2); background:#fff; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer;}
.eye-toggle .icon{width:20px; height:20px;}
.eye-toggle b{font-weight:700;}
.eye-toggle.on{border-color:var(--g600); background:var(--g50); color:var(--g700); box-shadow:0 0 0 2px var(--g100);}
.eye-toggle:hover{border-color:var(--g500);}

/* Online application: Section / voucher / remarks fields (For Enrollment page) */
.app-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 16px; align-items:start;}
.app-fields > div{min-width:0;}
.app-fields label.f{display:block; margin:0 0 6px;}
.app-fields input[type=text], .app-fields select{width:100%; min-width:0; box-sizing:border-box;}

/* =====================================================================
   @@ VIEWPORT 1 of 3 — DESKTOP  (1025px and up)
   =====================================================================
   1025–1279px  small laptop  -> tighter sidebar and gutters so nothing is cramped
   1280px+      desktop       -> content fills the screen (no max-width cap).
                                Up to 1600px wide everything stays normal size (u = 1px).
                                Above 1600px EVERYTHING (text, cards, buttons, tables, logo,
                                gutters, login) grows with the viewport, so a 3840x2160 screen
                                looks like a bigger version of 1600x900:
                                   u = viewport width / 1600  (also limited by height / 900)
                                   1600px u=1.0   1920px u=1.2   2560px u=1.6   3840px u=2.4
   Tablet and Mobile rules are in the next two sections and are NOT touched here.
   ===================================================================== */

/* ---- Desktop A: small laptop, 1025–1279px ---- */
@media screen and (min-width:1025px) and (max-width:1279px){
  :root{ --nav-w:224px; }
  .main{padding:var(--s5) var(--s5) 64px;}
  .main-in{max-width:none;}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));}
  .kpi .val{font-size:23px;}
  .kpi.hero .val{font-size:28px;}
  .pay-grid{grid-template-columns:minmax(0,1fr) 300px; gap:var(--s4);}
  .sidenav a{font-size:13.5px;}
  .who > span:first-child{max-width:150px;}
}

/* ---- Desktop scale factor (--u) — a length: 1px at <=1600px, grows with the screen above that ---- */
@media screen and (min-width:1280px){
  :root{ --u:max(1px, min(calc(100vw / 1600), calc(100vh / 900))); }
}

/* ---- Desktop: 1280px and up — everything scales with --u ---- */
@media screen and (min-width:1280px){
  :root{
    --s1:calc(4 * var(--u)); --s2:calc(8 * var(--u)); --s3:calc(12 * var(--u));
    --s4:calc(16 * var(--u)); --s5:calc(24 * var(--u)); --s6:calc(32 * var(--u));
    --tb:calc(56 * var(--u));
    --nav-w:calc(248 * var(--u));
    --radius:calc(12 * var(--u));
  }
  body{font-size:calc(15 * var(--u));}
  .icon{width:calc(17 * var(--u)); height:calc(17 * var(--u));}

  /* top bar */
  .brand{font-size:calc(16 * var(--u));}
  .brand small{font-size:calc(11.5 * var(--u));}
  .brand img.logo{width:calc(38 * var(--u)); height:calc(38 * var(--u));}
  .top-title{font-size:calc(15 * var(--u));}
  .who{font-size:calc(13 * var(--u));}
  .who > span:first-child{max-width:calc(220 * var(--u));}
  .who .role-pill{font-size:calc(12.5 * var(--u)); padding:calc(4 * var(--u)) calc(12 * var(--u));}
  .who a.logout{font-size:calc(13 * var(--u)); min-height:calc(36 * var(--u)); padding:calc(7 * var(--u)) calc(14 * var(--u));}

  /* shell: content fills the rest of the screen (no max-width cap) */
  .main{padding:var(--s5) var(--s6) calc(72 * var(--u));}
  .main-in{max-width:none;}
  .nav-label{font-size:calc(12 * var(--u));}
  .sidenav a{font-size:calc(14 * var(--u)); min-height:calc(40 * var(--u)); padding:calc(9 * var(--u)) var(--s3);}
  .sidenav a .icon{width:calc(18 * var(--u)); height:calc(18 * var(--u));}
  .sidenav a.active::before{left:calc(var(--s3) * -1); top:calc(8 * var(--u)); bottom:calc(8 * var(--u)); width:calc(4 * var(--u));}

  /* headings */
  h2.page-title{font-size:calc(24 * var(--u));}
  .page-sub{font-size:calc(14 * var(--u)); max-width:calc(70ch);}
  .lock-banner{font-size:calc(13.5 * var(--u));}

  /* cards */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(calc(190 * var(--u)),1fr));}
  .kpi{padding:var(--s4) calc(18 * var(--u));}
  .kpi .lbl{font-size:calc(13 * var(--u));}
  .kpi .val{font-size:calc(26 * var(--u));}
  .kpi .sub{font-size:calc(12.5 * var(--u));}
  .kpi.hero .val{font-size:calc(32 * var(--u));}
  .kpi-group{font-size:calc(13 * var(--u));}
  .panel{padding:calc(20 * var(--u)) var(--s5);}
  .panel h3{font-size:calc(16 * var(--u));}
  .panel h3 .dot{width:calc(8 * var(--u)); height:calc(8 * var(--u));}

  /* forms + buttons */
  input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],input[type=file],input[type=search],textarea,select{min-height:calc(42 * var(--u)); font-size:calc(15 * var(--u)); border-radius:calc(10 * var(--u));}
  label.f{font-size:calc(13 * var(--u));}
  .row > div{flex-basis:calc(200 * var(--u));}
  .btn{font-size:calc(14.5 * var(--u)); min-height:calc(42 * var(--u)); padding:calc(10 * var(--u)) calc(18 * var(--u)); border-radius:calc(10 * var(--u));}
  .btn-sm{font-size:calc(13 * var(--u)); min-height:calc(34 * var(--u)); padding:calc(6 * var(--u)) calc(12 * var(--u));}
  .btn-lg{font-size:calc(16 * var(--u)); min-height:calc(50 * var(--u)); padding:calc(12 * var(--u)) calc(26 * var(--u));}
  .btn .icon{width:calc(15 * var(--u)); height:calc(15 * var(--u));}
  .method-opts label{font-size:calc(14 * var(--u)); min-height:calc(44 * var(--u));}

  /* tables */
  table{font-size:calc(14 * var(--u));}
  th{font-size:calc(12.5 * var(--u));}
  th select, th input[type=text]{min-height:calc(34 * var(--u)); font-size:calc(13 * var(--u));}
  td select{max-width:calc(200 * var(--u)) !important; min-width:calc(124 * var(--u));}
  .badge{font-size:calc(12 * var(--u));}

  /* search / finder / student info */
  .search-row input{flex-basis:calc(260 * var(--u));}
  .search-row select{flex-basis:calc(170 * var(--u)); min-width:calc(140 * var(--u));}
  .finder input{min-height:calc(54 * var(--u)); font-size:calc(18 * var(--u));}
  .finder .btn{min-height:calc(54 * var(--u)); font-size:calc(16 * var(--u));}
  .student-card .col{flex-basis:calc(240 * var(--u));}
  .mini-lbl{font-size:calc(12 * var(--u));}
  .mini-val{font-size:calc(15 * var(--u));}
  .info-strip{grid-template-columns:repeat(auto-fit,minmax(calc(170 * var(--u)),1fr));}
  .acct-box .l{font-size:calc(13 * var(--u));}
  .acct-box .v{font-size:calc(22 * var(--u));}
  .acct-box.balance .v{font-size:calc(28 * var(--u));}
  .receipt{max-width:calc(440 * var(--u)); font-size:calc(13 * var(--u));}
  .empty{font-size:calc(14 * var(--u));}

  /* grade cards, quick links, chips */
  .gcards{grid-template-columns:repeat(auto-fill,minmax(calc(150 * var(--u)),1fr));}
  .gc-lbl{font-size:calc(13 * var(--u));}
  .gc-num{font-size:calc(22 * var(--u));}
  .gc-cap{font-size:calc(12 * var(--u));}
  .gc-ico{width:calc(26 * var(--u)); height:calc(26 * var(--u));}
  .quick{grid-template-columns:repeat(auto-fit,minmax(calc(150 * var(--u)),1fr));}
  .quick a{font-size:calc(14.5 * var(--u)); min-height:calc(52 * var(--u));}
  .quick a .icon{width:calc(20 * var(--u)); height:calc(20 * var(--u));}
  .chip{font-size:calc(13.5 * var(--u));}
  .stat-link{font-size:calc(13 * var(--u));}
  .progress{height:calc(10 * var(--u));}

  /* payment screen */
  .pay-who .nm{font-size:calc(20 * var(--u));}
  .pay-who .meta{font-size:calc(14 * var(--u));}
  .pay-who .due-box .l{font-size:calc(13 * var(--u));}
  .pay-who .due-box .v{font-size:calc(32 * var(--u));}
  .pay-grid{grid-template-columns:minmax(0,1fr) calc(340 * var(--u));}
  .pay-side .ln{font-size:calc(14 * var(--u));}
  .pay-side .big b{font-size:calc(28 * var(--u));}
  .fee-row{grid-template-columns:minmax(0,1fr) calc(150 * var(--u)) auto;}
  .fee-name{font-size:calc(15 * var(--u));}
  .fee-meta, .fee-done{font-size:calc(12.5 * var(--u));}
  .fee-row input.alloc{font-size:calc(16 * var(--u));}

  /* student form (enroll / edit) */
  .sf{max-width:none;}
  .sf .panel{padding:var(--s5) calc(28 * var(--u)) calc(28 * var(--u));}
  .sf-hd h3{font-size:calc(17 * var(--u));}
  .sf-sub{font-size:calc(13 * var(--u));}
  .sf-note{font-size:calc(13.5 * var(--u));}
  .sf .row{grid-template-columns:repeat(auto-fit,minmax(calc(220 * var(--u)),1fr)); gap:calc(20 * var(--u)) var(--s5); margin-bottom:calc(20 * var(--u));}
  .sf label.f{font-size:calc(13 * var(--u));}
  .sf input[type=text], .sf input[type=date], .sf select{min-height:calc(46 * var(--u));}
  .sf-actions{max-width:none; padding:calc(16 * var(--u)) calc(20 * var(--u));}
  .sf-actions .btn{min-width:calc(140 * var(--u)); min-height:calc(46 * var(--u));}

  /* pending edit-request notice */
  .notif-info{flex-basis:calc(260 * var(--u));}
  .notif-reason{font-size:calc(13 * var(--u));}

  /* login */
  .login-card{max-width:calc(380 * var(--u));}
  .login-card h1{font-size:calc(26 * var(--u));}
  .login-card p.sub{font-size:calc(14.5 * var(--u));}
  .login-brand p{font-size:calc(16 * var(--u));}

  /* login: logo, heading, padding, password toggle, button were capped by clamp()/inline px */
  .login-brand{padding:calc(80 * var(--u)); gap:calc(24 * var(--u));}
  .login-brand img{width:calc(190 * var(--u)); border-width:calc(4 * var(--u));}
  .login-brand h2{font-size:calc(38 * var(--u));}
  .login-panel{padding:calc(24 * var(--u)) calc(16 * var(--u));}
  .pw-wrap input{padding-right:calc(76 * var(--u));}
  .pw-toggle{font-size:calc(13 * var(--u)); min-height:calc(36 * var(--u)); padding:calc(8 * var(--u)) calc(10 * var(--u));}
  .error-box{font-size:calc(14 * var(--u));}
  .login-card .btn-lg{margin-top:calc(24 * var(--u)) !important;}

  /* inline style="" sizes inside pages (font-size / min-width / max-width) — scaled too */
  [style*="font-size:11px"]{font-size:calc(11 * var(--u)) !important;}
  [style*="font-size:11.5px"]{font-size:calc(11.5 * var(--u)) !important;}
  [style*="font-size:12px"]{font-size:calc(12 * var(--u)) !important;}
  [style*="font-size:12.5px"]{font-size:calc(12.5 * var(--u)) !important;}
  [style*="font-size:13px"]{font-size:calc(13 * var(--u)) !important;}
  [style*="font-size:14px"]{font-size:calc(14 * var(--u)) !important;}
  [style*="font-size:16px"]{font-size:calc(16 * var(--u)) !important;}
  [style*="font-size:18px"]{font-size:calc(18 * var(--u)) !important;}
  [style*="min-width:140px"]{min-width:calc(140 * var(--u)) !important;}
  [style*="min-width:170px"]{min-width:calc(170 * var(--u)) !important;}
  [style*="min-width:200px"]{min-width:calc(200 * var(--u)) !important;}
  [style*="max-width:110px"]{max-width:calc(110 * var(--u)) !important;}
  [style*="max-width:140px"]{max-width:calc(140 * var(--u)) !important;}
  [style*="max-width:180px"]{max-width:calc(180 * var(--u)) !important;}
  [style*="max-width:440px"]{max-width:calc(440 * var(--u)) !important;}
  [style*="max-width:480px"]{max-width:calc(480 * var(--u)) !important;}
  [style*="max-width:520px"]{max-width:calc(520 * var(--u)) !important;}
  [style*="max-width:560px"]{max-width:calc(560 * var(--u)) !important;}
  [style*="max-width:640px"]{max-width:calc(640 * var(--u)) !important;}
  [style*="width:80px"]{width:calc(80 * var(--u)) !important;}
}

/* =====================================================================
   @@ VIEWPORT 2 of 3 — TABLET  (up to 1024px, phones are overridden in the MOBILE section)
   =====================================================================
   e.g. iPad Mini 768x1024, iPad 820/834, iPad landscape 1024, and large tablets held in
   PORTRAIT up to 1279px wide (iPad Pro 13" 1032x1376, iPad Pro 12.9" 1024x1366).
   Order inside this section:
     Tablet A  <=1100px   dashboard columns stack
     Tablet B  <=900px    KPI cards in 2 columns
     Tablet C  <=1024px   sidebar becomes a slide-in drawer, one-column payment screen
     Tablet D  721–1024px comfortable touch sizes, spacing, login layout (+ big tablets in portrait)
     Tablet E  portrait   login: brand banner on top, form centred below
   ===================================================================== */

/* ---- Tablet A: <=1100px ---- */
@media (max-width:1100px){
  .dash-grid{grid-template-columns:minmax(0,1fr);}
}

/* ---- Tablet B: <=900px ---- */
@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi.hero{grid-column:1 / -1;}
}

/* ---- Tablet C: <=1024px — sidebar becomes a slide-in drawer ---- */
@media (max-width:1024px){
  .topbar{padding:var(--s2) var(--s4); padding-left:max(var(--s4), env(safe-area-inset-left)); padding-right:max(var(--s4), env(safe-area-inset-right));}
  .nav-toggle{display:inline-flex;}
  .app{display:block;}
  .sidenav{position:fixed; z-index:25; top:var(--tb); left:0; bottom:0; height:auto; width:min(320px,86vw); padding:var(--s3) var(--s3) calc(var(--s5) + env(safe-area-inset-bottom));
    transform:translateX(-100%); visibility:hidden; box-shadow:0 0 0 rgba(0,0,0,0);}
  .sidenav a.active::before{left:-12px;}
  .nav-scrim{display:block; position:fixed; inset:var(--tb) 0 0 0; z-index:20; background:rgba(10,30,18,.5); opacity:0; pointer-events:none;}
  body.nav-open{overflow:hidden;}
  body.nav-open .sidenav{transform:none; visibility:visible; box-shadow:12px 0 40px -12px rgba(10,40,20,.45);}
  body.nav-open .nav-scrim{opacity:1; pointer-events:auto;}
  .sidenav a{padding:12px var(--s3); font-size:15px; min-height:46px;}
  .main{padding:var(--s5) var(--s5) 64px;}
  .pay-grid{grid-template-columns:minmax(0,1fr); gap:var(--s4);}
  /* total + save stay reachable at the bottom while filling the form */
  .pay-side{position:sticky; top:auto; bottom:0; z-index:6; border-radius:var(--radius) var(--radius) 0 0; margin:0 calc(var(--s5) * -1); padding:var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); border-width:1px 0 0; box-shadow:0 -10px 24px -16px rgba(10,40,20,.5);}
  .pay-side .ln{display:none;}
  .pay-side .big{border:none; margin:0; padding:0;}
  .pay-side .big b{font-size:26px;}
  .pay-side .btn{margin-top:var(--s2);}
  .pay-side .btn-outline{display:none;}   /* Back link at the top already cancels; keeps the bar short */
}
@media (max-width:1024px) and (prefers-reduced-motion:no-preference){
  .sidenav{transition:transform .22s ease, visibility 0s linear .22s, box-shadow .22s ease;}
  body.nav-open .sidenav{transition:transform .22s ease, visibility 0s, box-shadow .22s ease;}
  .nav-scrim{transition:opacity .22s ease;}
}

/* ---- Tablet D: 721–1024px (+ big tablets in portrait up to 1279px) — touch sizes, spacing, login ---- */
@media screen and (min-width:721px) and (max-width:1024px), screen and (min-width:1025px) and (max-width:1279px) and (orientation:portrait){
  /* comfortable touch sizes (16px inputs also stop iOS zoom-on-focus) */
  body{font-size:16px;}
  input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],input[type=file],input[type=search],textarea,select{min-height:48px; font-size:16px;}
  .btn{min-height:46px; font-size:15px;}
  .btn-sm{min-height:40px; padding:8px 14px;}
  .btn-lg{min-height:54px; font-size:17px;}
  label.f{font-size:14px;}
  th{font-size:13px;}
  table{font-size:15px;}
  td{padding:14px var(--s3);}

  /* page shell */
  .main{padding:var(--s5) var(--s5) 72px;}
  h2.page-title{font-size:26px;}
  .page-sub{font-size:15px;}
  .panel{padding:22px var(--s5);}
  .panel h3{font-size:17px;}

  /* cards: fill each row evenly (no lonely card) — hero card on its own row */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--s4);}
  .kpi.hero{grid-column:1 / -1;}
  .kpi .val{font-size:26px;}
  .gcards{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
  .quick{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
  .acct-summary{grid-template-columns:repeat(3,minmax(0,1fr));}
  .row > div{flex-basis:240px;}
  .sf{max-width:none;}
  .sf .row{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .sf-actions{max-width:none;}

  /* top bar: keep everything on one line */
  .who > span:first-child{max-width:160px;}
  .top-title{font-size:15px;}

  /* login: tablet LANDSCAPE keeps the split but with proper breathing room */
  .login-brand{padding:clamp(32px,5vw,56px);}
  .login-brand img{width:clamp(120px,16vw,160px);}
  .login-brand h2{font-size:clamp(28px,3.4vw,34px);}
  .login-brand p{font-size:16px;}
  .login-panel{padding:var(--s6) clamp(32px,6vw,64px);}
  .login-card{max-width:440px;}
  .login-card h1{font-size:30px;}
  .login-card p.sub{font-size:16px;}
  .pw-toggle{font-size:14px; min-height:40px;}
}

/* ---- Tablet E: PORTRAIT (iPad Mini 768x1024, iPad Pro 13" 1032x1376, etc): brand banner on top, form centred below */
@media screen and (min-width:721px) and (max-width:1279px) and (orientation:portrait){
  .login-split{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr;}
  .login-brand{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:var(--s5); row-gap:var(--s1); padding:var(--s6) 48px;}
  .login-brand img{grid-row:1 / span 2; width:104px; border-width:3px;}
  .login-brand h2{max-width:none; font-size:32px; align-self:end;}
  .login-brand p{max-width:none; align-self:start;}
  .login-panel{align-items:center; padding:56px 48px 72px;}
  .login-card{max-width:480px;}
}

/* =====================================================================
   @@ VIEWPORT 3 of 3 — MOBILE  (720px and below)
   =====================================================================
   Phones and small tablets. These rules come last on purpose so they win over the
   TABLET section above.
     Mobile A  <=720px  small tablet / large phone: tighter spacing, stacked layouts
     Mobile B  <=640px  phone: 16px inputs (no iOS zoom), tables turn into stacked cards
     Mobile C  <=420px  small phone: compact top bar, one KPI per row
     Mobile D  <=720px / <=640px  student form action bar and pending-request notice
   ===================================================================== */

/* ---- Mobile A: <=720px ---- */
@media (max-width:720px){
  body{font-size:15px;}
  .who > span:first-child{display:none;}
  .top-title{display:none;}
  .main{padding:var(--s4) var(--s4) 56px;}
  h2.page-title{font-size:21px;}
  .page-sub{margin-bottom:var(--s4);}
  .page-head{margin-bottom:var(--s4);}
  .panel{padding:var(--s4); margin-bottom:var(--s4);}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3); margin-bottom:var(--s4);}
  .kpi{padding:var(--s3) var(--s4);}
  .kpi .val{font-size:21px;}
  .kpi.hero{grid-column:1 / -1;}
  .kpi.hero .val{font-size:28px;}
  .acct-summary{grid-template-columns:1fr;}
  .acct-box.balance{order:-1;}
  .search-row input{flex-basis:100%;}
  .search-row select{flex:1 1 calc(50% - 6px); min-width:0;}
  .search-row .btn{flex:1 1 100%;}
  .row > div{flex-basis:100%;}
  .panel h3 + form > .row:first-child > div + div label.f{margin-top:var(--s3);}
  .login-split{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
  .login-brand{flex-direction:row; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5);}
  .login-brand img{width:56px; border-width:2px;}
  .login-brand h2{font-size:18px; max-width:none;}
  .login-brand p{display:none;}
  .login-panel{align-items:flex-start; padding:var(--s6) var(--s5);}
  .gcards{display:flex; overflow-x:auto; gap:var(--s2); padding-bottom:var(--s2); scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; margin-right:calc(var(--s4) * -1); padding-right:var(--s4);}
  .gcard{flex:0 0 132px; scroll-snap-align:start; padding:var(--s2) var(--s3);}
  .gc-num{font-size:20px;}
  .gc-ico{display:none;}
  .pay-who{padding:var(--s3) var(--s4);}
  .pay-who .nm{font-size:18px;}
  .pay-who .due-box{text-align:left; width:100%; display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:var(--s2);}
  .pay-who .due-box .v{font-size:26px;}
  .pay-side{margin:0 calc(var(--s4) * -1); padding-left:var(--s4); padding-right:var(--s4);}
  .fee-row{grid-template-columns:minmax(0,1fr) auto;}
  .fee-row .fee-info{grid-column:1 / -1;}
  .fee-done{grid-column:1 / -1; text-align:left;}
  .quick{grid-template-columns:repeat(2,minmax(0,1fr));}
  .finder{flex-direction:column;}
  .finder .btn{width:100%;}
  .login-card{padding:0;}
}

/* ---- Mobile B: <=640px — phone, tables turn into stacked cards ---- */
@media (max-width:640px){
  /* 16px inputs stop iOS zooming the page on focus; bigger touch targets */
  input[type=text],input[type=number],input[type=date],input[type=month],input[type=password],input[type=email],input[type=search],textarea,select{font-size:16px; min-height:46px;}
  .btn{min-height:46px;}
  .btn-sm{min-height:40px; padding:8px 14px;}
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block; width:100%;}
  table.stack thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  table.stack tbody tr{border:1px solid var(--line); border-radius:12px; padding:var(--s1) var(--s3); margin-bottom:var(--s3); background:var(--card);}
  table.stack tbody tr:last-child{margin-bottom:0;}
  table.stack td{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); text-align:right; padding:10px 0; border-bottom:1px solid var(--line); min-width:0; overflow-wrap:anywhere;}
  table.stack td:last-child{border-bottom:none;}
  table.stack td::before{content:attr(data-label); flex:none; max-width:42%; text-align:left; font-size:12.5px; font-weight:600; color:var(--muted);}
  table.stack td[data-label=""]::before{display:none;}
  table.stack td[data-label=""]{justify-content:flex-end; flex-wrap:wrap;}
  table.stack td[colspan]{display:block; text-align:center;}
  table.stack td[colspan]::before{display:none;}
  table.stack tr:hover td{background:transparent;}
  table.stack td form{display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:flex-end; flex:1 1 auto; min-width:0; max-width:100%;}
  table.stack td form .btn{flex:none;}
  table.stack td form input{min-width:0; flex:1 1 100px;}
  table.stack td input[type=text], table.stack td input[type=number], table.stack td select{max-width:100% !important; width:auto; flex:1 1 140px;}
  table.stack td.num{text-align:right;}
  .panel{overflow-x:visible;}
}

/* ---- Mobile C: <=420px — small phone ---- */
@media (max-width:420px){
  .topbar{gap:var(--s2);}
  .brand{font-size:15px; gap:var(--s2);}
  .brand small{display:none;}
  .brand img.logo{height:34px; width:34px;}
  .who{gap:var(--s2);}
  .who .role-pill{display:none;}
  .kpi .val{font-size:19px;}
  .kpis{grid-template-columns:minmax(0,1fr);}
  .kpi.hero{grid-column:auto;}
  .fee-row input.alloc{font-size:16px;}
}

/* ---- Mobile D: student form action bar + pending-request notice ---- */
@media (max-width:720px){
  .sf .panel{padding:var(--s4) var(--s4) 20px;}
  .sf .row{gap:16px; margin-bottom:16px;}
  .sf-actions{flex-direction:column-reverse; align-items:stretch; gap:10px; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));}
  .sf-actions .btn{width:100%;}
}
@media (max-width:640px){
  .notif-actions{flex:1 1 100%;}
  .notif-actions .btn{flex:1;}
}

/* ---------- Print (receipts + collection report) — black & white, fits the page ---------- */
@page{ size:A4; margin:12mm; }
@media print{
  /* Pure black on white, no colours or shading */
  *{color:#000 !important; background:transparent !important; box-shadow:none !important; text-shadow:none !important;
    -webkit-print-color-adjust:economy; print-color-adjust:economy;}
  html, body{background:#fff !important;}

  /* Hide app chrome, let the content use the full page width */
  .topbar, .sidenav, .nav-scrim, .nav-toggle, .no-print, .gcards, .lock-banner{display:none !important;}
  .main-in{max-width:none !important;}
  .panel{overflow:visible !important;}
  .app{display:block !important; height:auto !important;}
  .main{display:block !important; padding:0 !important; height:auto !important; overflow:visible !important; width:auto !important;}
  .panel{border:none !important; padding:0 !important;}
  .overflow-x{overflow:visible !important;}   /* no inner scrollbar / clipped columns */

  .receipt{border:1px dashed #000 !important; margin:0 auto;}

  /* Collection report table */
  .report-sheet table{width:100% !important; table-layout:auto; border-collapse:collapse; font-size:11px;}
  .report-sheet th, .report-sheet td{padding:4px 6px !important; border-bottom:1px solid #000 !important; white-space:nowrap; vertical-align:top;}
  .report-sheet td:nth-child(3){white-space:normal;}   /* student name may wrap */
  .report-sheet tfoot tr:first-child td{border-top:1.5px solid #000 !important; border-bottom:1.5px solid #000 !important;}   /* TOTAL row (amber on screen) */
  .report-sheet td div{white-space:normal !important;}
  .report-sheet thead th{border-top:1.5px solid #000 !important; border-bottom:1.5px solid #000 !important; font-size:10.5px;}
  .report-sheet thead{display:table-header-group;}            /* repeat header on each page */
  .report-sheet tr{page-break-inside:avoid;}
  .report-sheet .badge{border:1px solid #000 !important;}
  .report-sheet{page:report;}                                  /* wide fee-column table prints landscape */
}
@page report{ size:A4 landscape; margin:10mm; }

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important; scroll-behavior:auto !important;} }