:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#142b39;background:#f2f5f7;font-size:16px;line-height:1.5;--ink:#142b39;--muted:#546776;--line:#d9e1e5;--accent:#aa2538}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:7px;padding:.65rem 1rem;font-weight:600}button:hover{filter:brightness(1.15)}button.secondary{background:white;color:var(--ink);border-color:var(--line)}button.danger{background:var(--accent);border-color:var(--accent)}button:disabled{opacity:.5;cursor:wait}a{color:var(--accent)}input,select,textarea{border:1px solid #b7c5ce;border-radius:6px;padding:.6rem .7rem;width:100%;color:var(--ink);background:white;min-height:44px}input[type=checkbox]{width:20px;min-height:20px}select[multiple]{min-height:100px}label{display:block;font-size:.9rem;font-weight:600}label>input,label>select,label>textarea{margin-top:.35rem}small,.muted{color:var(--muted);font-size:.875rem}h1{font-size:1.9rem;letter-spacing:-.04em;margin:0 0 .4rem}h2{font-size:1.15rem;margin:0 0 1rem}h3{font-size:1rem}p{margin:.5rem 0 1rem}header{display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:white;padding:1rem 2rem;gap:1rem}.brand{display:flex;align-items:center;gap:.8rem}.monogram{border:1px solid #9fbbc6;border-radius:5px;font-size:.875rem;font-weight:800;padding:.5rem;letter-spacing:.06em}.brand small{color:#bbced8;display:block}.user{font-size:.875rem}nav{background:white;border-bottom:1px solid var(--line);display:flex;gap:.5rem;padding:.7rem 2rem;overflow:auto}nav button{white-space:nowrap;border:none;background:transparent;color:var(--muted);padding:.5rem .9rem}nav button.active{background:#e8eef2;color:var(--ink)}main{max-width:1200px;margin:auto;padding:2rem}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;gap:1rem}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;color:var(--muted);font-weight:700}.card{background:white;border:1px solid var(--line);border-radius:10px;padding:1.5rem;margin-bottom:1.2rem}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.full{grid-column:1/-1}.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}.actions button{font-size:.875rem}.metric{font-size:1.6rem;font-weight:700;letter-spacing:-.03em}.metrics{border-top:3px solid var(--accent)}.scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.9rem}th{text-align:left;color:var(--muted);font-size:.8rem;font-weight:600;white-space:nowrap}th,td{padding:.85rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}td button{font-size:.8rem;padding:.35rem .65rem}.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.badge{font-size:.75rem;padding:.2rem .5rem;border-radius:4px;background:#e7eef2;display:inline-block;text-transform:capitalize}.badge.received,.badge.approved{background:#e2f3e9;color:#165733}.badge.pending,.badge.sent{background:#fff0d2;color:#785000}.badge.rejected{background:#fbe5e7;color:#882337}.empty{padding:2rem;text-align:center;color:var(--muted)}.filters{display:flex;align-items:end;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}.filters label{flex:1;min-width:150px}.login{max-width:460px;margin:7vh auto;padding:2rem}.login .monogram{display:inline-block;margin-bottom:1.5rem;border-color:var(--ink)}.login button{width:100%}.login label{margin:1rem 0}.error{color:#9d1830;font-size:.9rem}.hint{background:#eef3f6;border-left:3px solid #8096a3;padding:.8rem 1rem;font-size:.875rem}.line{display:grid;grid-template-columns:1fr 1.7fr 1fr 1fr auto;gap:.5rem;align-items:end;margin-bottom:.8rem}.line button{background:white;color:var(--accent);border-color:var(--line)}dialog{border:1px solid var(--line);border-radius:12px;padding:1.7rem;width:min(720px,95vw);max-height:90vh;color:var(--ink)}dialog::backdrop{background:#102632aa}dialog .grid{gap:.8rem}#notice{position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:.8rem 1.2rem;border-radius:8px;max-width:90vw;display:none;z-index:100}#offline{background:#fff0d2;color:#624200;text-align:center;padding:.6rem}.checks{display:flex;gap:.7rem;flex-wrap:wrap}.checks label{display:flex;gap:.4rem;align-items:center}.checks input{margin:0}.admin-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}.admin-tabs button{font-size:.85rem}.loading{padding:4rem}.detail-list{margin:0;padding:0;list-style:none}.detail-list li{padding:.9rem 0;border-bottom:1px solid var(--line)}@media(max-width:700px){header{padding:1rem}.user{display:none}nav{padding:.6rem}main{padding:1rem}.heading{align-items:start;flex-direction:column}h1{font-size:1.6rem}.card{padding:1rem}.grid,.grid.three{grid-template-columns:1fr}.grid.five{grid-template-columns:1fr 1fr}.line{grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);padding-bottom:1rem}.line button{justify-self:start}.login{margin:2rem auto}.metric{font-size:1.4rem}}@media print{header,nav,button,.filters,#notice{display:none!important}body{background:white}main{max-width:none;padding:0}.card{break-inside:avoid;border:0}dialog{display:none}.scroll{overflow:visible}}

/* Password visibility controls shared by login and account forms. */
.password-field{min-width:0;margin-bottom:.75rem}
.password-control{display:flex;align-items:stretch;gap:.5rem;margin-top:.35rem}
.password-control input{min-width:0;flex:1}
.password-control .password-toggle{flex:0 0 auto;width:auto;min-width:72px;min-height:44px}
.password-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.login .password-field{margin:1rem 0}
.login .password-field label{margin:0}

.fee-matrix{min-width:880px}.fee-matrix th:first-child{min-width:190px}.fee-matrix td{min-width:150px}.fee-matrix input{max-width:210px}.month-label{font-size:.75rem;white-space:normal;margin-top:.6rem}.month-label input{font-size:.85rem}.fee-from{display:block;margin-top:.3rem}.discount-line{display:grid;grid-template-columns:1fr 1fr 2fr auto;gap:.7rem;align-items:end;margin:1rem 0}fieldset{border:0;padding:0;margin:1rem 0}fieldset:disabled{opacity:.6}#expected-preview{margin-top:1rem}#entry-form [data-candidate-grade]{min-width:90px}#grading-fees-form .actions{position:sticky;bottom:0;background:white;padding:.75rem 0}
@media(max-width:700px){.discount-line{grid-template-columns:1fr}.fee-matrix th:first-child{min-width:150px}.fee-matrix td{min-width:135px}}

/* Clear collection checks and statement calculations. */
.collection-check{margin-top:1.5rem;padding-top:1rem;border-top:2px solid var(--line)}
.comparison-table{min-width:600px}.comparison-table th,.comparison-table td{vertical-align:middle}
.balance-label{display:inline-flex;flex-direction:column;gap:.2rem;padding:.5rem .7rem;border-radius:6px;font-size:.85rem;font-weight:600;background:#eef3f6;color:var(--ink)}
.balance-label strong{font-variant-numeric:tabular-nums;white-space:nowrap}.balance-label.shortfall{background:#fff0d2;color:#714500}.balance-label.excess{background:#e5efff;color:#174b83}.balance-label.settled{background:#e2f3e9;color:#165733}
tfoot{background:#f2f6f8;font-weight:700}tfoot th{font-size:.9rem;color:var(--ink)}.balance-help{margin-top:1rem}
.calculation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-bottom:1rem}.calculation-grid>div{padding:1rem;background:#f2f6f8;border:1px solid var(--line);border-radius:8px}.calculation-grid span,.calculation-grid small{display:block}.calculation-grid strong{display:block;font-size:1.35rem;margin:.35rem 0;font-variant-numeric:tabular-nums}
.statement-notes{background:#f7f9fa;border-left:3px solid #8096a3;padding:.8rem 1rem;margin-top:1rem}.statement-notes h3{margin:0 0 .4rem}.statement-notes p{white-space:pre-wrap;margin:0}
@media(max-width:700px){.calculation-grid{grid-template-columns:1fr}.comparison-table th,.comparison-table td{padding:.65rem .45rem}}

/* Separate settlement status from report workflow. */
.metrics.settled{border-top-color:#23804b}.metrics.waiting{border-top-color:#b77a10}
.badge.settled{background:#e2f3e9;color:#165733}.badge.waiting{background:#fff0d2;color:#785000}.badge.unpaid{background:#fbe5e7;color:#882337}
.payment-status{text-transform:none;max-width:220px}.metrics.settled .metric{color:#165733}

/* Student register and touch-friendly individual attendance. */
.attendance-roster{display:grid;gap:.65rem;margin:1rem 0}.attendance-student{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,260px);gap:1rem;padding:.85rem;border:1px solid #dbe3e8;border-radius:10px;align-items:center}.attendance-student label{margin:0}.attendance-student select{min-height:44px;width:100%}.review-check{display:flex;align-items:flex-start;gap:.7rem;padding:1rem 0}.review-check input{width:auto;margin-top:.3rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){.attendance-student{grid-template-columns:1fr;gap:.5rem}}

/* Monthly register: names stay visible when scrolling on phones. */
.monthly-scroll{overflow:auto;max-height:70vh;border:1px solid #ccd5dc;border-radius:8px}.monthly-table{border-collapse:separate;border-spacing:0;width:max-content}.monthly-table th,.monthly-table td{padding:5px;border-bottom:1px solid #d9e0e5;border-right:1px solid #e5e9ed;text-align:center}.monthly-table th:first-child{position:sticky;left:0;z-index:2;background:#f3f6f8;min-width:165px;max-width:210px;text-align:left;white-space:normal}.monthly-table th small{display:block;font-weight:normal}.monthly-table thead th{position:sticky;top:0;background:#eaf0f4;z-index:3}.monthly-table thead th:first-child{z-index:4}.monthly-table select{min-width:62px;width:62px;padding:9px 3px;margin:0;font-size:14px}.monthly-table .day-na,.day-na select{background:#e0e3e6;color:#58616a}.monthly-table select:disabled{opacity:.7}.day-total{font-weight:700;background:#e7f3ee;min-width:74px}.batch-editor{margin:16px 0;padding:16px;border:1px solid #ccd5dc;border-radius:8px}.batch-days,.batch-students{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}.batch-days input,.batch-students input{width:auto;display:inline-block;margin-right:8px}.batch-students{max-height:280px;overflow:auto;margin:12px 0}

.monthly-table tr[hidden]{display:none}.fee-date-cell{min-width:160px;background:#f7fafc}.fee-date-cell input{min-width:145px;margin:0;padding:8px}.monthly-filter{display:flex;gap:8px;align-items:center}.monthly-filter input{width:auto}.record-link{display:inline-block;padding:10px 14px}.report-record-links a{overflow-wrap:anywhere}
@media print{.report-record-links a{color:#000;text-decoration:underline}.report-record-links a::after{content:" (" attr(href) ")";font-size:9pt;display:block}}

[data-hierarchy]{display:contents}

.monthly-table .attendance-weekday{display:block;font-size:11px;font-weight:400;line-height:1.4;margin-top:3px;white-space:nowrap}

/* Two-level navigation, shared across all app sections. */
.primary-nav,.section-nav{flex-wrap:wrap;overflow:visible;gap:.25rem .5rem}.primary-nav a,.section-nav a{display:inline-flex;align-items:center;text-decoration:none;border-radius:6px;padding:.55rem .85rem;color:var(--muted);font-size:.95rem}.primary-nav a.active{background:var(--ink);color:white}.section-nav{background:#f8fafb;padding-top:.4rem;padding-bottom:.4rem}.section-nav a{font-size:.86rem}.section-nav a.active{background:#e8eef2;color:var(--ink);font-weight:600}.primary-nav a:hover,.section-nav a:hover{background:#e8eef2;color:var(--ink)}.primary-nav a:focus-visible,.section-nav a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}@media(max-width:700px){.primary-nav a,.section-nav a{padding:.5rem .6rem}.primary-nav,.section-nav{gap:.15rem}}

[hidden]{display:none!important}

.bkb-logo{object-fit:contain;flex-shrink:0}.session-warning{position:fixed;bottom:1rem;left:1rem;right:1rem;z-index:10000;background:#fff5df;border:2px solid #995800;border-radius:12px;padding:1rem;color:#172b36;box-shadow:0 4px 20px #0003}.session-warning button{margin-left:1rem}