/* Shared presentation for parent and teacher web portals only. */
:root {--primary:#2455d6;--primary-light:#eaf0ff;--bg:#f4f6fa;--card:#fff;--text:#182235;--text-muted:#59677b;--text-faint:#67778a;--border:#dce3ec;--border-light:#e8edf3;--bg-alt:#edf1f7;--radius-lg:12px;--danger:#c32c35;--success:#16724a;color-scheme:light}
:root[data-theme=dark] {--primary:#85aaff;--primary-light:#253a60;--bg:#101827;--card:#1e2b3e;--text:#e5ebf5;--text-muted:#afbdd0;--text-faint:#a3b2c7;--border:#36465b;--border-light:#2c3c50;--bg-alt:#253447;--danger:#ff8187;--success:#5dd59d;color-scheme:dark}
*{box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;line-height:1.5;background:var(--bg);color:var(--text);margin:0;min-width:0}
h1,h2{font-size:24px;line-height:1.3;overflow-wrap:anywhere}h3{font-size:18px}button,input,select,textarea{font:inherit;color:inherit;max-width:100%}
button,.btn,.btn-primary,.btn-secondary,input:not([type=checkbox]):not([type=radio]),select{min-height:44px}
input,select,textarea{font-size:16px!important;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:0}input[type=checkbox],input[type=radio]{accent-color:#2455d6;width:24px;height:24px}
button{cursor:pointer;border-radius:8px;padding:10px 16px;border:1px solid var(--border);background:var(--bg-alt)}button:disabled{cursor:not-allowed;opacity:.55}
.btn,.btn-primary{background:#2455d6;color:white;border:1px solid #2455d6}.btn-secondary,.topbar button,.theme-toggle{background:var(--card);color:var(--text);border:1px solid var(--border)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}a{color:var(--primary)}[hidden],.hidden{display:none!important}
.shell,.content{width:100%;max-width:1440px;padding:24px 32px;margin:auto;min-width:0}.panel,.card{border:1px solid var(--border);border-radius:12px;padding:24px;background:var(--card);box-shadow:none;min-width:0}
.topbar{gap:16px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--card);margin-bottom:24px}.topbar h1{white-space:normal;font-size:24px}.topbar .title-block{min-width:0;flex:1}.topbar .parent-name{white-space:normal;overflow-wrap:anywhere}
.toolbar,.toolbar-actions,.attendance-toolbar,.modal-actions{flex-wrap:wrap;min-width:0;gap:8px}.toolbar-search{min-width:0;flex:1}.toolbar-actions>*{max-width:100%}
.portal-account{position:relative}.portal-account>summary{min-height:44px;padding:10px 16px;cursor:pointer;border:1px solid var(--border);border-radius:8px;font-weight:600;list-style:none}.portal-account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:50;min-width:230px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:0 12px 30px #0003;display:grid;gap:8px}.portal-account-menu>span{overflow-wrap:anywhere}
.tabs,.section-nav{display:flex;gap:8px;flex-wrap:nowrap;overflow:auto;padding:8px 0;scrollbar-width:thin;max-width:100%}.tabs button,.section-nav button{flex:0 0 auto;white-space:nowrap;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 16px}.tabs button.active,.section-nav button.active{background:#2455d6;color:#fff;border-color:#2455d6}
.portal-context{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}.portal-context p{margin:0;color:var(--text-muted)}.portal-context label{margin:0;font-size:14px}.portal-context select{min-width:240px;max-width:100%}
.child-selector{gap:8px}.child-btn{text-align:left;max-width:100%;overflow-wrap:anywhere}.child-btn .child-balance{color:var(--text-muted)}
.portal-table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--border);border-radius:8px;margin:8px 0 16px}.portal-table-scroll table{display:table;min-width:100%;border-collapse:collapse;font-size:14px}.portal-table-scroll th{position:sticky;top:0;background:var(--bg-alt);white-space:nowrap}.portal-table-scroll td,.portal-table-scroll th{padding:12px;border-bottom:1px solid var(--border);text-align:left}.portal-scroll-cue{font-size:13px;color:var(--text-muted);margin:8px 0}
.portal-read-state{padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--bg-alt);margin:8px 0;overflow-wrap:anywhere}.portal-read-state button{margin:8px}.portal-error{color:var(--danger)}
.portal-savebar{position:sticky;bottom:8px;z-index:10;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:0 4px 16px #0002;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:16px}.portal-savebar .portal-save-context{flex-basis:100%;font-size:14px;color:var(--text-muted)}
.portal-save-state{font-size:14px;color:var(--text-muted);margin:8px 0}.modal-backdrop{z-index:1000;padding:16px}.modal-card{max-height:calc(100dvh - 32px);padding:24px}.modal-card h2{margin-top:0}.portal-table-scroll .list{overflow:visible}
.teacher-portal .layout{grid-template-columns:240px minmax(0,1fr)}.teacher-portal .hero{grid-template-columns:1fr 1fr}.teacher-portal .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.teacher-portal .class-card{box-shadow:none;width:100%;text-align:left}.teacher-portal .timetable-grid{min-width:880px}.portal-timetable-scroll{overflow:auto;max-width:100%}.portal-class-picker{margin-bottom:16px}.portal-class-picker input{width:100%;margin-bottom:12px}
.parent-portal .content{max-width:1120px}.parent-portal .balance-banner{border:1px solid var(--border);background:var(--bg-alt);border-radius:12px;padding:20px;margin-bottom:16px}.balance-amount{font-size:32px;font-weight:700}.balance-label{font-size:14px;color:var(--text-muted)}.parent-portal #fee-table td{white-space:nowrap}
.portal-overview{margin-bottom:16px}.portal-overview>summary{padding:16px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--primary);cursor:pointer;font-weight:600}.portal-overview .hero{margin:16px 0}
@media(max-width:1023px){.teacher-portal .layout{grid-template-columns:1fr}.teacher-portal .hero{grid-template-columns:1fr}.teacher-portal #class-list{display:flex;gap:8px;overflow:auto}.teacher-portal .class-card{min-width:180px;margin:0}.teacher-portal .layout>.panel:first-child{padding:16px}}
@media(max-width:639px){
 .shell,.content{padding:16px}.panel,.card{padding:16px}.topbar{padding:16px;margin-bottom:16px}.topbar>div{max-width:100%}.topbar h1{font-size:22px}.teacher-portal .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.teacher-portal .stat{padding:8px}.stat strong{font-size:24px}
 .portal-context{display:block}.portal-context select{width:100%;min-width:0}.portal-context p{margin-top:8px}.child-selector{display:none}
 .portal-cards,.portal-cards tbody{display:block!important;width:100%}.portal-cards thead{display:none}.portal-cards tbody tr{display:grid;grid-template-columns:minmax(0,1fr);padding:8px;border-bottom:1px solid var(--border)}
 .portal-cards tbody td{display:flex;justify-content:space-between;gap:12px;white-space:normal!important;overflow-wrap:anywhere;border:0;min-width:0;padding:8px!important}.portal-cards tbody td::before{content:attr(data-label);flex:0 0 28%;color:var(--text-muted);font-weight:500}.portal-cards tbody td[colspan]::before{display:none}.portal-cards tbody td input{min-width:0;max-width:68%}.portal-cards tbody td input[type=checkbox]{max-width:24px}
 .portal-savebar{bottom:0}.attendance-toolbar>*{max-width:100%}.attendance-toolbar select,.attendance-toolbar input{width:100%;flex-basis:100%}.modal-card{padding:16px}.modal-backdrop{padding:8px}.portal-account-menu{min-width:220px;max-width:calc(100vw - 32px)}
}

.portal-context p{overflow-wrap:anywhere}.teacher-portal #class-search{width:100%;margin-bottom:8px}.teacher-portal .portal-timetable-scroll .timetable-grid{overflow:visible}.portal-filter label{margin:0 0 4px;text-transform:none;letter-spacing:normal;font-size:14px}
@media(max-width:639px){.teacher-portal .topbar .title-block{flex-basis:100%}.teacher-portal .topbar .toolbar-actions{width:100%;justify-content:space-between}.teacher-portal .topbar h1{margin:0}.teacher-portal .topbar .eyebrow{margin-bottom:4px}.portal-filter{flex:1 1 100%}.portal-filter select,.portal-filter input{width:100%}.portal-account-menu>span{display:block!important}}