/* Clean v3 product layer. The copied reference stylesheet supplies only the approved visual language. */
:root{--brand:#820D25;--brand-deep:#580719;--brand-soft:#F9EBEE;--accent:#DBA72F;--canvas:#F7F4F2;--ink:#251C1E;--muted:#766B6E;--line:#E8E1DF;--panel:#FFF;--success:#13855A;--danger:#B9273D;--warning:#A56A08;--ui-font:Poppins,"Noto Sans Devanagari","Nirmala UI","Segoe UI",Arial,sans-serif;--sidebar:224px}
html,body{margin:0;min-height:100%;background:var(--canvas);font-family:var(--ui-font);color:var(--ink)}
button,input,select,textarea,table,option{font:inherit}
.boot-screen{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:12px;background:radial-gradient(circle at 50% 30%,#fff,var(--canvas))}.boot-screen img{width:82px;height:82px;border-radius:22px;box-shadow:0 18px 48px color-mix(in srgb,var(--brand) 22%,transparent)}.boot-screen strong{font-size:22px}.boot-screen span{color:var(--muted);font-size:16px}
.erp-app{font-family:var(--ui-font)!important;background:var(--canvas)}.erp-app,.erp-app *{box-sizing:border-box;font-family:var(--ui-font)!important}.sidebar{background:linear-gradient(175deg,var(--brand-deep),var(--brand) 50%,color-mix(in srgb,var(--brand) 90%,#111));color:#fff}.brand strong,.school-chip strong,.sidebar-user strong{color:#fff}.sidebar-nav button{color:rgba(255,255,255,.78)}.sidebar-nav button:hover,.sidebar-nav button.active{color:var(--brand-deep);background:#fff}.sidebar-nav button.active .nav-icon{color:#fff;background:var(--brand)}
.product-signature{display:grid;gap:2px;margin:14px 5px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.06)}.product-signature span{color:rgba(255,255,255,.55);font-size:11px}.product-signature strong{font-size:13px}.product-signature a{color:var(--accent);font-size:11px;text-decoration:none}
.sidebar-nav section{margin:17px 0}.sidebar-nav section h3{margin:0 9px 7px;color:rgba(255,255,255,.56);font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.sidebar-nav section button{width:100%;min-height:38px;display:flex;align-items:center;gap:10px;margin:3px 0;padding:6px 9px;border:0;border-radius:9px;color:rgba(255,255,255,.78);background:transparent;text-align:left;cursor:pointer;font-size:13px;font-weight:700}.sidebar-nav section button:hover{color:#fff;background:rgba(255,255,255,.09)}.sidebar-nav section button.active{color:var(--brand-deep);background:#fff;box-shadow:0 7px 18px rgba(0,0,0,.13)}.nav-icon{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;border-radius:7px;color:#fff;background:rgba(255,255,255,.1)}.nav-icon svg{width:16px;height:16px;display:block}.sidebar-nav section button.active .nav-icon{color:#fff;background:var(--brand)}.module-drawer-list i svg,.settings-drawer-list i svg{width:18px;height:18px;display:block}.quick-action-grid button>span svg{width:19px;height:19px;display:block}
.topbar{background:rgba(255,255,255,.9);backdrop-filter:blur(16px)}.page-wrap{max-width:1640px;margin:0 auto}.page-heading h1{letter-spacing:-.04em}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success)}
.top-actions{flex-wrap:nowrap}.top-actions .icon-button{min-width:max-content;white-space:nowrap;padding-inline:12px}
.stat-grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.stat-card{min-height:138px}.stat-card strong{font-size:31px}.stat-card::after{content:"";position:absolute;width:74px;height:74px;right:-22px;bottom:-24px;border-radius:50%;background:color-mix(in srgb,var(--brand) 5%,transparent)}
.drawer-settings{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:18px}.settings-drawer-list{display:grid;gap:8px;align-self:start;position:sticky;top:86px}.settings-drawer-list button{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;text-align:left;cursor:pointer}.settings-drawer-list button:hover,.settings-drawer-list button.active{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-soft);box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 8%,transparent)}.settings-drawer-list i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--brand);background:var(--brand-soft);font-style:normal;font-weight:900;font-size:12px}.settings-drawer-list strong,.settings-drawer-list small{display:block}.settings-drawer-list strong{font-size:14px}.settings-drawer-list small{margin-top:3px;color:var(--muted);font-size:11px}.settings-drawer-list b{color:var(--brand)}.settings-drawer-content{min-width:0}.settings-pane{display:none}.settings-pane.active{display:block;animation:pane-in .22s ease}@keyframes pane-in{from{opacity:0;transform:translateY(5px)}}
.appearance-gallery{padding:22px}.appearance-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.appearance-card{display:grid;gap:9px;padding:11px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;text-align:left;cursor:pointer}.appearance-card:hover,.appearance-card.selected{border-color:var(--brand);box-shadow:0 8px 24px color-mix(in srgb,var(--brand) 10%,transparent)}.appearance-swatches{height:25px;display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 7px rgba(0,0,0,.08)}.appearance-card strong{font-size:12px}.appearance-card small{color:var(--muted);font-size:10px}.appearance-card em{color:var(--brand);font-size:10px;font-style:normal;font-weight:800}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}.form-grid label{display:grid;gap:6px;color:var(--ink);font-size:12px;font-weight:750}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;outline:0}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent)}
.module-empty{padding:54px 24px;text-align:center}.module-empty b{width:48px;height:48px;display:grid;place-items:center;margin:auto;border-radius:14px;color:var(--brand);background:var(--brand-soft)}.module-empty h2{margin:14px 0 6px}.module-empty p{max-width:520px;margin:auto;color:var(--muted);font-size:13px;line-height:1.6}
.print-preview-toolbar{justify-content:flex-end;padding-inline:24px}.print-preview-toolbar strong{margin-right:auto;color:#fff}.print-preview-toolbar>span:not([class]){flex:1}.print-document{font-family:var(--ui-font)!important}.print-logo{object-fit:contain;background:none!important}.print-reference{display:inline-block;padding:5px 8px;border-radius:16px;color:var(--brand);background:var(--brand-soft);font-size:11px;font-weight:800}.preview-open{overflow:hidden}
.toast-stack{position:fixed;right:20px;bottom:20px;z-index:300;display:grid;gap:8px}.v3-toast{max-width:390px;padding:13px 15px;border-radius:12px;color:#fff;background:#20191B;box-shadow:0 14px 35px rgba(0,0,0,.18);font-size:13px}.v3-toast.error{background:#851C2E}.v3-toast.success{background:#126444}
@media(max-width:1050px){.stat-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}.appearance-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.drawer-settings{grid-template-columns:1fr}.settings-drawer-list{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.stat-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.settings-drawer-list{grid-template-columns:1fr}.print-preview-toolbar strong{display:none}}
@media(max-width:480px){.stat-grid.five,.appearance-grid{grid-template-columns:1fr}}
@page{size:A4;margin:8mm}
@media print{html,body{background:#fff!important}.print-preview-overlay{padding:0!important}.print-preview-toolbar{display:none!important}.print-document{width:194mm!important;min-height:281mm!important;padding:0!important;border:0!important;box-shadow:none!important}.print-document,.print-document *{font-family:var(--ui-font)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Fresh v3 activation and login surfaces. */
.setup-product-image{width:64px;height:64px;object-fit:contain;margin-bottom:12px;border-radius:16px;background:transparent}.login-v3{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);background:#fff}.login-story{position:relative;display:flex;flex-direction:column;justify-content:center;padding:8vw;color:#fff;overflow:hidden;background:radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 32%),linear-gradient(145deg,var(--brand-deep),var(--brand))}.login-story::after{content:"";position:absolute;right:-18%;bottom:-28%;width:560px;height:560px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.04),0 0 0 140px rgba(255,255,255,.025)}.login-story>img{width:78px;height:78px;object-fit:contain;margin-bottom:42px;border-radius:20px}.login-story>span{color:var(--accent);font-size:14px;font-weight:900;letter-spacing:.12em}.login-story h1{max-width:700px;margin:15px 0;font-size:clamp(52px,6vw,92px);line-height:.93;letter-spacing:-.06em}.login-story p{max-width:620px;color:rgba(255,255,255,.78);font-size:16px;line-height:1.6}.login-story>div{z-index:1;display:grid;gap:4px;margin-top:42px;padding:18px 20px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.07)}.login-story a{color:var(--accent);text-decoration:none}.login-panel{display:grid;place-items:center;padding:40px;background:linear-gradient(160deg,#fff,var(--canvas))}.login-panel form{width:min(470px,100%);display:grid;gap:16px;padding:38px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 28px 80px color-mix(in srgb,var(--brand) 10%,transparent)}.login-panel form>img{width:62px;height:62px;object-fit:contain}.login-panel small{color:var(--brand);font-weight:900;letter-spacing:.12em}.login-panel h2{margin:0;font-size:35px;letter-spacing:-.04em}.login-panel p{margin:-10px 0 6px;color:var(--muted)}.login-panel label{display:grid;gap:7px;font-size:15px;font-weight:800}.login-panel input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;outline:0}.login-panel input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.password-field{position:relative}.password-field button{position:absolute;right:7px;top:7px;height:38px;padding:0 12px;border:0;border-radius:9px;color:var(--brand);background:var(--brand-soft);font-weight:800}.btn{min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-weight:800}.btn.primary{color:#fff;border-color:var(--brand);background:var(--brand)}.btn.secondary{color:var(--brand);background:#fff}.btn.wide{width:100%}.text-button{border:0;color:var(--brand);background:transparent;cursor:pointer;font-weight:800}.copy-field{display:flex;gap:7px}.copy-field input{flex:1}.copy-field button{border:0;border-radius:9px;color:#fff;background:var(--brand);padding:0 14px}.empty-chart{min-height:260px;display:grid;place-items:center;margin-top:20px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);background:linear-gradient(180deg,var(--brand-soft),#fff)}
@media(max-width:900px){.login-v3{grid-template-columns:1fr}.login-story{display:none}.login-panel{min-height:100vh;padding:18px}.login-panel form{padding:26px}.setup-product-image{width:52px;height:52px}}
.module-two{display:grid;grid-template-columns:minmax(330px,.7fr) minmax(0,1.3fr);gap:16px;margin-bottom:16px}.module-form,.module-list{padding:20px}.module-form{display:grid;align-content:start;gap:13px}.module-form h2,.module-list h2{margin:0 0 8px;font-size:17px}.module-form>label{display:grid;gap:6px;font-size:13px;font-weight:800}.module-form input,.module-form select,.module-form textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:9px;outline:0}.module-form input:focus,.module-form select:focus,.module-form textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}.inline-check{display:flex!important;align-items:center;gap:8px}.inline-check input{width:auto!important;accent-color:var(--brand)}.data-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:11px}.data-table{width:100%;border-collapse:collapse;background:#fff}.data-table th,.data-table td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;font-size:12px}.data-table th{color:var(--muted);background:color-mix(in srgb,var(--canvas) 75%,white);font-size:11px;text-transform:uppercase}.empty-table{padding:35px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:11px}.library-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.library-metrics b{display:grid;gap:4px;padding:17px;border-radius:12px;color:var(--brand);background:var(--brand-soft);font-size:20px}.library-metrics span{color:var(--muted);font-size:11px;font-weight:700}.status-pill{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:18px;color:var(--success);background:#e8f7ef;font-size:12px;font-weight:800}
@media(max-width:980px){.module-two{grid-template-columns:1fr}}
.backup-status-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}.backup-status-grid article{display:grid;gap:5px;padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--brand-soft)}.backup-status-grid strong{font-size:13px}.backup-status-grid span{color:var(--muted);font-size:11px;line-height:1.5}
.notice-print-body{min-height:150mm;margin-top:12mm;font-size:11pt;line-height:1.8;text-align:justify}.notice-a4 footer{margin-top:auto}.receipt-a4 section>p{margin-top:18mm;padding:8mm;border:1px solid var(--line);border-radius:4mm;font-size:11pt;line-height:1.7}

/* D6 authenticated school workspace: fresh visual implementation over the v2 workflows. */
.authenticated-workspace .sidebar{padding-top:14px;padding-bottom:0}.authenticated-workspace .sidebar-nav{padding-bottom:18px}.authenticated-workspace .brand img{object-fit:contain;background:transparent}.authenticated-workspace .topbar{border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);box-shadow:0 8px 30px color-mix(in srgb,var(--brand) 4%,transparent)}
.breadcrumb{display:grid;gap:1px}.breadcrumb span{color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.breadcrumb strong{font-size:14px}.global-search input{font-family:var(--ui-font)!important}.page-wrap{padding-bottom:72px}
.workspace-panel{margin-bottom:18px;padding:22px;border:1px solid color-mix(in srgb,var(--line) 92%,transparent);border-radius:18px;background:color-mix(in srgb,#fff 97%,var(--canvas));box-shadow:0 14px 42px color-mix(in srgb,var(--brand) 5%,transparent)}.workspace-panel>.panel-head{margin-bottom:18px}.workspace-panel>.panel-head h2{margin:0;font-size:17px;letter-spacing:-.025em}.workspace-panel>.panel-head p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.module-search{min-width:220px;display:grid;gap:4px;text-align:left}.module-search>span{color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.module-search input{height:42px;padding:0 13px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#fff;outline:0}.module-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.metric-grid{display:grid;gap:13px;margin-bottom:18px}.metric-grid.five{grid-template-columns:repeat(var(--metric-columns,5),minmax(0,1fr))}.metric-grid.dense{gap:10px}.metric-grid.dense .metric-card{min-height:118px;padding:14px 13px}.metric-grid.dense .metric-card>span{font-size:10px;letter-spacing:.04em}.metric-grid.dense .metric-card>strong{margin:9px 0 4px;font-size:19px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.metric-grid.dense .metric-card>small{font-size:10px;line-height:1.35}.metric-grid.dense .metric-card::after{right:-38px;bottom:-44px}
/* A six-figure strip stays one line for as long as the figures stay legible:
   the extra class outranks the shared breakpoints below, which step 5-card
   rows down to 3 and 2 at widths where 6 would be unreadable. */
@media(min-width:1000px){.metric-grid.five.dense{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:999px){.metric-grid.five.dense{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.metric-grid.five.dense{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.metric-grid.five.dense{grid-template-columns:1fr}}.metric-card{position:relative;min-width:0;min-height:128px;display:flex;flex-direction:column;overflow:hidden;padding:18px;border:1px solid color-mix(in srgb,var(--line) 94%,transparent);border-radius:17px;background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--canvas) 68%,#fff));box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 5%,transparent)}.metric-card::after{content:"";position:absolute;right:-33px;bottom:-39px;width:96px;height:96px;border-radius:50%;background:color-mix(in srgb,var(--brand) 7%,transparent);box-shadow:0 0 0 18px color-mix(in srgb,var(--accent) 5%,transparent)}.metric-card>span{z-index:1;color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.metric-card>strong{z-index:1;margin:11px 0 5px;color:var(--brand);font-size:25px;line-height:1.05;letter-spacing:-.04em;overflow-wrap:anywhere}.metric-card>small{z-index:1;color:var(--muted);font-size:11px;line-height:1.45}
.dashboard-split{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px}.quick-action-grid{display:grid;grid-template-columns:1fr;gap:8px}.quick-action-grid button{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;text-align:left;cursor:pointer}.quick-action-grid button:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 9px 22px color-mix(in srgb,var(--brand) 8%,transparent)}.quick-action-grid button>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand-deep));font-size:11px;font-weight:900}.quick-action-grid button strong,.quick-action-grid button small{display:block}.quick-action-grid button strong{font-size:13px}.quick-action-grid button small{margin-top:2px;color:var(--muted);font-size:10px}.quick-action-grid button>b{color:var(--brand)}/* Dashboard charts. Tones are semantic, not decorative: good/warn/bad/idle,   so a reader can tell a healthy split from one that needs work at a glance. */.chart-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}.chart-tile{display:grid;gap:10px;padding:13px;border:1px solid var(--line);border-radius:13px;background:#fff;text-align:left;cursor:pointer}.chart-tile:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 9px 22px color-mix(in srgb,var(--brand) 8%,transparent)}.chart-tile header{display:grid;gap:2px}.chart-tile header strong{font-size:12.5px;color:var(--ink)}.chart-tile header small{font-size:10.5px;color:var(--muted);font-weight:700}.chart-tile header small.urgent{color:#9e182b}.chart{margin:0;display:grid;gap:9px;justify-items:center}.chart-donut svg{width:118px;height:118px}.chart-slice.tone-good{fill:#2f8f5b}.chart-slice.tone-warn{fill:#c98a10}.chart-slice.tone-bad{fill:#b3243a}.chart-slice.tone-idle{fill:#c9c6c2}.chart-slice.tone-brand{fill:var(--brand)}.chart-empty-ring{fill:#eceae7}.chart-centre{text-anchor:middle;dominant-baseline:central;font-size:19px;font-weight:900;fill:var(--ink)}.chart figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px}.chart-key{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:10px;font-weight:700}.chart-key b{color:var(--ink)}.chart-key i{width:8px;height:8px;border-radius:3px;display:inline-block}.chart-key i.tone-good{background:#2f8f5b}.chart-key i.tone-warn{background:#c98a10}.chart-key i.tone-bad{background:#b3243a}.chart-key i.tone-idle{background:#c9c6c2}.chart-key i.tone-brand{background:var(--brand)}.chart-bars{width:100%;gap:7px;justify-items:stretch}.chart-bar-row{display:grid;grid-template-columns:62px 1fr 22px;align-items:center;gap:7px}.chart-bar-label{color:var(--muted);font-size:10px;font-weight:700}.chart-bar-track{height:9px;border-radius:5px;background:#f0eeeb;overflow:hidden}.chart-bar-track i{display:block;height:100%;border-radius:5px;min-width:2px}.chart-bar-track i.tone-good{background:#2f8f5b}.chart-bar-track i.tone-warn{background:#c98a10}.chart-bar-track i.tone-bad{background:#b3243a}.chart-bar-track i.tone-idle{background:#c9c6c2}.chart-bar-track i.tone-brand{background:var(--brand)}.chart-bars b{color:var(--ink);font-size:11px;text-align:right;white-space:nowrap}.chart-bar-row{grid-template-columns:62px 1fr auto}.chart-note{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:700}.form-section-heading{margin:6px 0 0;padding-top:10px;border-top:1px solid var(--line);color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.form-section-heading:first-child{margin-top:0;padding-top:0;border-top:0}.attention-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.attention-list button{width:100%;display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer}.attention-list button:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 9px 22px color-mix(in srgb,var(--brand) 8%,transparent)}.attention-list button>b{min-width:44px;height:36px;display:grid;place-items:center;padding:0 6px;border-radius:10px;color:var(--brand);background:var(--brand-soft);font-size:16px;font-weight:900}.attention-list button>b.urgent{color:#9e182b;background:#fde5e8}.attention-list strong,.attention-list small{display:block}.attention-list strong{font-size:13px;color:var(--ink)}.attention-list small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}.attention-list button>i{color:var(--brand);font-style:normal;font-size:15px}.settings-metrics{margin-bottom:14px}/* The settings pane is far narrower than the dashboard, so these wrap into rows   instead of being squeezed into five columns that break every word. */.metric-grid.settings-metrics{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.discipline-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.discipline-list li{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.discipline-list li>b{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--brand);background:var(--brand-soft)}.discipline-list strong,.discipline-list small{display:block}.discipline-list strong{font-size:13px}.discipline-list small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.5}
.workflow-stack{display:grid;gap:11px;margin-bottom:18px}.workflow-card{overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 4%,transparent)}.workflow-card>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}.workflow-card>summary::-webkit-details-marker{display:none}.workflow-card>summary strong,.workflow-card>summary small{display:block}.workflow-card>summary strong{font-size:15px}.workflow-card>summary small{margin-top:3px;color:var(--muted);font-size:11px}.workflow-card>summary>b{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;color:var(--brand);background:var(--brand-soft);transition:.2s}.workflow-card[open]>summary{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand-soft) 55%,#fff)}.workflow-card[open]>summary>b{transform:rotate(180deg)}.workflow-card-body{padding:20px}.workflow-card-body hr{height:1px;margin:22px 0;border:0;background:var(--line)}
.compact-form{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}.settings-form{margin-top:20px}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:5px}.form-note{margin:0;padding:11px 13px;border-left:3px solid var(--accent);border-radius:8px;color:var(--muted);background:color-mix(in srgb,var(--accent) 9%,#fff);font-size:11px;line-height:1.55}.align-end{align-self:end}.btn.compact{min-height:30px;padding:0 9px;border-radius:8px;font-size:11px}.btn.danger{color:#fff;border-color:var(--danger);background:var(--danger)}.btn.danger,.record-actions button.danger,.record-actions button.danger:last-child,.row-actions button.danger,.row-actions button.danger:last-child{color:#fff;border-color:color-mix(in srgb,var(--danger) 78%,#000);background:linear-gradient(135deg,var(--danger),color-mix(in srgb,var(--danger) 72%,#000));box-shadow:0 3px 10px color-mix(in srgb,var(--danger) 26%,transparent);font-weight:800}.btn.danger:hover:not(:disabled),.record-actions button.danger:hover:not(:disabled),.row-actions button.danger:hover:not(:disabled){background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 88%,#000),color-mix(in srgb,var(--danger) 60%,#000));box-shadow:0 5px 14px color-mix(in srgb,var(--danger) 34%,transparent)}.btn.danger:focus-visible,.record-actions button.danger:focus-visible,.row-actions button.danger:focus-visible{outline:2px solid color-mix(in srgb,var(--danger) 55%,#fff);outline-offset:2px}.btn.danger:disabled,.record-actions button.danger:disabled,.row-actions button.danger:disabled{color:color-mix(in srgb,var(--danger) 55%,#8b8482);border-color:color-mix(in srgb,var(--danger) 22%,var(--line));background:color-mix(in srgb,var(--danger) 7%,#fff);box-shadow:none;opacity:1;cursor:not-allowed}.btn:disabled{opacity:.5;cursor:not-allowed}.record-actions{display:flex;align-items:center;gap:5px;min-width:max-content}.row-actions-heading{width:1%}.data-table td small{display:block;margin-top:3px;color:var(--muted);font-size:10px}.data-table tbody tr:hover{background:color-mix(in srgb,var(--brand-soft) 44%,#fff)}
.staff-portal-access-form{align-items:start}.staff-portal-access-form>label{grid-template-rows:auto minmax(42px,auto) minmax(30px,auto);align-content:start}.staff-portal-access-form>label>select,.staff-portal-access-form>label>.password-field,.staff-portal-access-form>label>.password-field>input{min-height:42px}.staff-portal-access-form>label>small{margin:0;color:var(--muted);font-weight:500;line-height:1.35}.staff-portal-access-form .password-field button{top:4px}
.restore-backup-form{align-items:start}.restore-backup-form>label{align-content:start;align-self:start}.restore-backup-form>label>input,.restore-backup-form>label>.password-field,.restore-backup-form>label>.password-field>input{min-height:42px}
.record-status{display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;color:var(--brand);background:var(--brand-soft);font-size:10px;font-weight:850}.record-status.status-active,.record-status.status-approved,.record-status.status-enrolled,.record-status.status-issued,.record-status.status-present,.record-status.status-paid,.record-status.status-done,.record-status.status-available,.record-status.status-verified{color:var(--success);background:color-mix(in srgb,var(--success) 10%,#fff)}.record-status.status-rejected,.record-status.status-cancelled,.record-status.status-reversed,.record-status.status-failed,.record-status.status-left,.record-status.status-disabled,.record-status.status-revoked,.record-status.status-held{color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,#fff)}.record-status.status-draft,.record-status.status-pending,.record-status.status-provisional,.record-status.status-follow-up,.record-status.status-follow_up,.record-status.status-late,.record-status.status-part-paid,.record-status.status-part_paid{color:var(--warning);background:color-mix(in srgb,var(--accent) 15%,#fff)}
.empty-state{min-height:210px;display:grid;place-items:center;align-content:center;gap:6px;padding:30px;border:1px dashed color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:14px;text-align:center;background:linear-gradient(165deg,#fff,var(--brand-soft))}.empty-state.compact{min-height:120px}.empty-state>span{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:#fff;background:var(--brand);font-size:12px;font-weight:900}.empty-state strong{font-size:16px}.empty-state p{max-width:460px;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.attendance-grid,.marks-grid,.fee-due-grid,.period-editor,.timetable-editor,.permission-grid{display:grid;overflow:auto;border:1px solid var(--line);border-radius:13px;background:#fff}.attendance-grid-head,.attendance-grid-row{display:grid;grid-template-columns:minmax(210px,1fr) 150px minmax(210px,1fr);align-items:center;gap:10px;padding:9px 12px}.marks-grid-head,.marks-grid-row{display:grid;grid-template-columns:minmax(210px,1fr) 135px 110px 90px minmax(170px,1fr);align-items:center;gap:8px;padding:9px 12px}.fee-due-head,.fee-due-row{display:grid;grid-template-columns:42px minmax(180px,1fr) 90px 92px 120px 95px 105px;align-items:center;gap:8px;padding:9px 12px}.period-editor-head,.period-editor-row{display:grid;grid-template-columns:64px minmax(170px,1fr) 130px 130px 70px;align-items:center;gap:8px;padding:9px 12px}.timetable-editor-head,.timetable-editor-row{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(170px,1fr) minmax(170px,1fr) minmax(120px,.7fr);align-items:center;gap:8px;padding:9px 12px}.attendance-grid-head,.marks-grid-head,.fee-due-head,.period-editor-head,.timetable-editor-head,.permission-head{min-width:max-content;color:var(--muted);background:color-mix(in srgb,var(--canvas) 75%,#fff);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.attendance-grid-row,.marks-grid-row,.fee-due-row,.period-editor-row,.timetable-editor-row{min-width:max-content;border-top:1px solid var(--line);font-size:11px}.attendance-grid-row>span strong,.attendance-grid-row>span small,.marks-grid-row>span strong,.marks-grid-row>span small,.timetable-editor-row>span strong,.timetable-editor-row>span small,.fee-due-row>span strong,.fee-due-row>span small{display:block}.attendance-grid-row small,.marks-grid-row small,.timetable-editor-row small,.fee-due-row small{margin-top:2px;color:var(--muted)}.attendance-grid select,.attendance-grid input,.marks-grid select,.marks-grid input,.fee-due-grid input,.period-editor input,.timetable-editor input,.timetable-editor select{min-height:35px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fff}.break-period{grid-column:2/-1;padding:10px;border-radius:8px;color:var(--brand);background:var(--brand-soft);font-style:normal;font-weight:850;text-align:center}
.holder-selection{max-height:390px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:auto;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--canvas)}.holder-selection label{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff}.holder-selection .select-all-row{grid-column:1/-1;background:var(--brand-soft)}.holder-selection strong,.holder-selection small{display:block}.holder-selection strong{font-size:12px}.holder-selection small{margin-top:2px;color:var(--muted);font-size:10px}
.permission-head,.permission-row{display:grid;grid-template-columns:minmax(180px,1.4fr) repeat(6,minmax(72px,.6fr));align-items:center;gap:5px;padding:9px 12px;min-width:720px}.permission-row{border-top:1px solid var(--line);font-size:11px}.permission-row input{justify-self:center;accent-color:var(--brand)}
.backup-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.backup-flow article{display:grid;grid-template-columns:42px 1fr;gap:5px 11px;padding:17px;border:1px solid var(--line);border-radius:15px;background:#fff}.backup-flow article>span{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#fff;background:var(--brand);font-weight:900}.backup-flow strong{font-size:13px}.backup-flow p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}.backend-boundary{display:grid;gap:5px;margin-bottom:16px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-left:4px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 9%,#fff)}.backend-boundary strong{font-size:13px}.backend-boundary p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
.portal-link-grid{display:grid;gap:11px}.portal-link-grid article{display:grid;gap:6px}.portal-link-grid article>span{font-size:12px;font-weight:800}.portal-link-grid article>div{display:flex;gap:8px}.portal-link-grid input{flex:1;min-width:0;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--canvas)}.profile-grid,.document-payload-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}.profile-grid>div,.profile-grid>article,.document-payload-list>div{display:grid;gap:6px;min-width:0;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fff}.profile-grid>article small{color:var(--muted);font-size:10px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}.profile-grid>article strong{font-size:13px;font-weight:780;line-height:1.4;overflow-wrap:anywhere}.profile-grid dt,.document-payload-list dt{color:var(--muted);font-size:10px;text-transform:uppercase}.profile-grid dd,.document-payload-list dd{margin:5px 0 0;font-size:12px;font-weight:750;overflow-wrap:anywhere}.system-policy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.system-policy-grid article{display:grid;gap:4px;padding:15px;border:1px solid var(--line);border-radius:12px}.system-policy-grid article>span{color:var(--brand);font-size:20px;font-weight:900}.system-policy-grid strong{font-size:12px}.system-policy-grid p{margin:0;color:var(--muted);font-size:11px}.backend-blocker-list{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}.backend-blocker-list li{display:grid;gap:3px;padding:11px 13px;border-radius:10px;background:var(--canvas)}.backend-blocker-list strong{font-size:12px}.backend-blocker-list span{color:var(--muted);font-size:11px;line-height:1.5}
.portal-access-control-list{display:grid;gap:9px}.portal-access-control-list article{display:grid;grid-template-columns:minmax(0,1fr) auto 92px;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--canvas)}.portal-access-control-list article>span{display:grid;gap:3px}.portal-access-control-list strong{font-size:13px}.portal-access-control-list small{color:var(--muted);font-size:11px}.portal-access-control-list .btn{min-width:92px}
.weekday-exclusions{margin:0;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--canvas)}.weekday-exclusions legend{padding:0 6px;font-size:12px;font-weight:800}.weekday-exclusions>div{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.weekday-exclusions label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:7px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:11px}.weekday-exclusions input{width:auto;min-height:0;accent-color:var(--brand)}.weekday-exclusions small{display:block;margin-top:8px;color:var(--muted);font-size:10px}
.verification-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;justify-content:flex-start}.verification-form label{flex:0 1 570px;display:grid;gap:6px;font-size:12px;font-weight:800}.verification-form .verify-hint,.verification-form .scanner-stage{flex-basis:100%}.verification-form input{height:48px;padding:0 14px;border:1px solid var(--line);border-radius:11px;outline:0}.verification-result,.verification-idle{display:flex;gap:18px;padding:25px;border:1px solid var(--line);border-radius:17px;background:#fff}.verification-result>span,.verification-idle>span{width:54px;height:54px;display:grid;place-items:center;flex:0 0 54px;border-radius:15px;color:#fff;background:var(--brand);font-size:19px;font-weight:900}.verification-result.success>span{background:var(--success)}.verification-result.failed>span{background:var(--danger)}.verification-result small{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em}.verification-result h2{margin:4px 0 12px}.verification-result>div{flex:1;min-width:0}.verification-result dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.verification-result dl>div{padding:9px;border-radius:9px;background:var(--canvas)}.verification-result dt{color:var(--muted);font-size:10px}.verification-result dd{margin:4px 0 0;font-size:12px;font-weight:800}.audit-boundary{display:grid;grid-template-columns:76px 1fr;gap:22px;padding:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,#fff,var(--brand-soft))}.audit-boundary>span{width:76px;height:76px;display:grid;place-items:center;border-radius:20px;color:#fff;background:var(--brand);font-size:18px;font-weight:900}.audit-boundary small{color:var(--brand);font-weight:900;letter-spacing:.08em}.audit-boundary h2{margin:6px 0}.audit-boundary p,.audit-boundary li{color:var(--muted);font-size:12px;line-height:1.55}
.loading-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.loading-panels i{height:170px;border-radius:17px;background:linear-gradient(100deg,var(--brand-soft) 20%,#fff 40%,var(--brand-soft) 60%);background-size:220% 100%;animation:workspace-shimmer 1.4s infinite}@keyframes workspace-shimmer{to{background-position:-220% 0}}
.workspace-busy{position:fixed;inset:0;z-index:1000;display:grid;place-content:center;justify-items:center;gap:13px;color:#fff;background:color-mix(in srgb,var(--brand-deep) 75%,transparent);backdrop-filter:blur(5px)}.workspace-busy>span{width:38px;height:38px;border:4px solid rgba(255,255,255,.28);border-top-color:#fff;border-radius:50%;animation:workspace-spin .7s linear infinite}.workspace-busy strong{font-size:14px}@keyframes workspace-spin{to{transform:rotate(360deg)}}
.icon-button.refresh-button{display:grid;place-items:center;width:38px;min-width:38px;height:38px;padding:0;border-radius:11px;color:var(--brand)}.icon-button.refresh-button svg{width:19px;height:19px;display:block}.icon-button.refresh-button:hover{color:#fff;background:var(--brand);border-color:var(--brand)}.icon-button.refresh-button:active svg{transform:rotate(-90deg);transition:transform .2s ease}.toast-stack{z-index:2147483647}.toast-stack:popover-open{position:fixed;inset:auto 20px 20px auto;width:min(420px,calc(100vw - 40px));max-width:none;height:auto;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible;color:inherit}.v3-toast{display:grid;grid-template-columns:30px 1fr 24px;align-items:center;gap:8px}.v3-toast>span{width:27px;height:27px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.12);font-weight:900}.v3-toast strong,.v3-toast small{display:block}.v3-toast small{margin-top:3px;color:rgba(255,255,255,.7)}.v3-toast button{border:0;color:#fff;background:transparent;cursor:pointer}
.workspace-dialog{width:min(620px,calc(100vw - 28px));max-height:90vh;padding:0;overflow:auto;border:0;border-radius:20px;background:#fff;box-shadow:0 30px 100px rgba(0,0,0,.3)}.workspace-dialog.wide{width:min(980px,calc(100vw - 28px))}.workspace-dialog::backdrop{background:rgba(24,15,17,.58);backdrop-filter:blur(4px)}.dialog-title{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}.dialog-title span{color:var(--brand);font-size:10px;font-weight:900;letter-spacing:.09em}.dialog-title h2{margin:3px 0 0;font-size:18px}.dialog-title button{width:36px;height:36px;border:0;border-radius:10px;color:var(--brand);background:var(--brand-soft);cursor:pointer}.dialog-form,.password-boundary{padding:22px}.confirm-dialog form{padding:22px}.confirm-dialog header span{color:var(--danger);font-size:11px;font-weight:900}.confirm-dialog header h2{margin:5px 0}.confirm-dialog header p{color:var(--muted);font-size:12px;line-height:1.55}.confirm-dialog label{display:grid;gap:6px;margin:16px 0;font-size:12px;font-weight:800}.confirm-dialog input{padding:10px;border:1px solid var(--line);border-radius:9px}.confirm-dialog footer{display:flex;justify-content:flex-end;gap:8px}.password-boundary{display:grid;gap:10px}.password-boundary>span{color:var(--brand);font-size:11px;font-weight:900}.password-boundary h3,.password-boundary p{margin:0}.password-boundary p{color:var(--muted);font-size:12px;line-height:1.6}
.jpraxc-generic-document{position:relative;width:194mm;min-height:281mm;display:flex;flex-direction:column;margin:0 auto;padding:10mm;border:1px solid color-mix(in srgb,var(--brand) 70%,#000);color:var(--ink);background:#fff;font-family:var(--ui-font)!important;box-sizing:border-box}.jpraxc-generic-document>header{display:flex;align-items:center;gap:6mm;padding-bottom:5mm;border-bottom:1.2mm solid var(--brand)}.jpraxc-generic-document>header img{width:19mm;height:19mm;object-fit:contain}.jpraxc-generic-document>header h1{margin:0;color:var(--brand);font-size:18pt}.jpraxc-generic-document>header p{margin:1mm 0 0;font-size:8pt;line-height:1.45}.generic-document-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:2mm;margin:5mm 0}.generic-document-meta>div{padding:2.4mm;border:1px solid var(--line);border-radius:2mm}.generic-document-meta span,.generic-document-meta strong{display:block}.generic-document-meta span{color:var(--muted);font-size:7pt}.generic-document-meta strong{margin-top:1mm;font-size:8.5pt}.jpraxc-generic-document>main{flex:1}.generic-reference{display:inline-block;padding:1.5mm 3mm;border-radius:10mm;color:var(--brand);background:var(--brand-soft);font-size:7pt;font-weight:800}.jpraxc-generic-document>main h2{margin:4mm 0;color:var(--brand);font-size:16pt}.jpraxc-generic-document>footer{display:flex;justify-content:flex-end;padding-top:12mm}.jpraxc-generic-document>footer div{width:58mm;text-align:center}.jpraxc-generic-document>footer i{display:block;height:10mm;border-bottom:1px solid var(--ink)}.jpraxc-generic-document>footer span{display:block;margin-top:2mm;font-size:8pt}.jpraxc-generic-document>small{margin-top:5mm;padding-top:2mm;border-top:1px solid var(--line);color:var(--muted);font-size:6.5pt;text-align:center}.receipt-confirmation,.certificate-body,.salary-slip-summary{margin-top:8mm;padding:6mm;border:1px solid var(--line);border-radius:3mm;font-size:10pt;line-height:1.7}.official-pdf-preview{padding-top:88px!important}.official-pdf-preview iframe{width:min(1100px,calc(100vw - 30px));height:calc(100vh - 140px);border:0;background:#fff}.official-pdf-notice{position:fixed;left:50%;top:57px;z-index:2;width:min(1100px,calc(100vw - 30px));display:flex;gap:12px;justify-content:center;transform:translateX(-50%);padding:8px 12px;color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,#fff);font-size:12px}.official-pdf-notice b{color:var(--brand)}
@media(max-width:1200px){.metric-grid.five{grid-template-columns:repeat(3,minmax(0,1fr))}.dashboard-split{grid-template-columns:1fr}.holder-selection{grid-template-columns:repeat(2,minmax(0,1fr))}.system-policy-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.metric-grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-form{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-split{grid-template-columns:1fr}.backup-flow{grid-template-columns:1fr}.holder-selection{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}.module-search{width:100%;min-width:0}.verification-form{align-items:stretch;flex-direction:column}}
@media(max-width:640px){.metric-grid.five,.compact-form,.quick-action-grid,.system-policy-grid{grid-template-columns:1fr}.workspace-panel{padding:15px}.workflow-card-body{padding:14px}.holder-selection .select-all-row{grid-column:auto}.verification-result,.audit-boundary{grid-template-columns:1fr}.verification-result{display:grid}.verification-result dl{grid-template-columns:1fr}.portal-link-grid article>div{flex-direction:column}.portal-access-control-list article{grid-template-columns:1fr auto}.portal-access-control-list article>span{grid-column:1/-1}.weekday-exclusions>div{grid-template-columns:repeat(2,minmax(0,1fr))}.official-pdf-notice{align-items:center;flex-direction:column;gap:2px}.official-pdf-preview{padding-top:104px!important}}
@media print{.jpraxc-generic-document{width:194mm!important;min-height:281mm!important;margin:0!important;padding:10mm!important;border:0!important;box-shadow:none!important}.jpraxc-generic-document,.jpraxc-generic-document *{font-family:var(--ui-font)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.official-pdf-preview{display:none!important}}
.record-history{min-width:220px;white-space:normal}.record-history summary{cursor:pointer;color:var(--brand);font-weight:800}.record-history dl{display:grid;gap:7px;margin:9px 0 0;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--canvas)}.record-history dl div{display:grid;grid-template-columns:88px 1fr;gap:7px}.record-history dt{color:var(--muted);font-size:10px;text-transform:uppercase}.record-history dd{margin:0;font-size:11px;overflow-wrap:anywhere}
.icon-button.logout-button{display:grid;place-items:center;width:38px;min-width:38px;height:38px;padding:0;border-radius:11px;color:var(--brand)}.icon-button.logout-button svg{width:19px;height:19px;display:block}.icon-button.logout-button:hover{color:#fff;background:var(--danger);border-color:var(--danger)}
.school-day-status-control{display:grid;grid-template-columns:minmax(180px,.45fr) minmax(180px,.45fr);gap:14px;margin-bottom:18px;padding:0 18px 18px;overflow:hidden;border:1px solid color-mix(in srgb,var(--brand) 34%,var(--line));border-radius:16px;background:linear-gradient(150deg,color-mix(in srgb,var(--canvas) 64%,#fff),#fff);box-shadow:0 12px 30px color-mix(in srgb,var(--brand) 7%,transparent)}.school-day-status-heading{grid-column:1/-1;margin:0 -18px 2px;padding:17px 18px 15px;border-bottom:3px solid var(--accent);color:#fff;background:radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 36%),linear-gradient(135deg,var(--brand-deep),var(--brand))}.school-day-status-heading>span{color:var(--accent);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.school-day-status-heading h4{margin:4px 0 3px;color:#fff;font-size:17px}.school-day-status-heading p{margin:0;color:rgba(255,255,255,.76);font-size:11px;line-height:1.55}.school-day-status-control>label{display:grid;gap:6px;color:var(--ink);font-size:12px;font-weight:650}.school-day-status-control input,.school-day-status-control select{min-height:42px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--brand) 14%,var(--line));border-radius:10px;background:#fff;font:inherit}.school-day-status-control input:focus,.school-day-status-control select:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px var(--brand-soft)}.school-day-status-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.school-day-status-option{display:flex!important;align-items:flex-start;gap:10px;padding:13px;border:1px solid color-mix(in srgb,var(--brand) 13%,var(--line));border-radius:12px;background:#fff;cursor:pointer}.school-day-status-option input{width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--brand)}.school-day-status-option span,.school-day-status-option b,.school-day-status-option small{display:block}.school-day-status-option b{font-size:12px}.school-day-status-option small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.45}.school-day-status-option:has(input:checked){border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)}.school-day-status-option:has(input:checked) b{color:var(--brand)}.school-day-status-option.is-closed:has(input:checked){border-color:var(--brand-deep);background:color-mix(in srgb,var(--brand-deep) 8%,#fff)}.school-day-status-option.is-closed:has(input:checked) b{color:var(--brand-deep)}.school-day-status-control>.form-actions{grid-column:1/-1;margin:0}.school-day-status-control>.full{grid-column:1/-1}@media(max-width:700px){.school-day-status-control,.school-day-status-options{grid-template-columns:1fr}}
.form-grid .tick-option input.school-status-tickbox[type="radio"]{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:0 0 15px;width:15px;min-width:15px;max-width:15px;height:15px;min-height:15px;margin:0;padding:0;border:1px solid color-mix(in srgb,var(--brand) 42%,var(--line));border-radius:3px;background:#fff;cursor:pointer}.form-grid .tick-option input.school-status-tickbox[type="radio"]::before{content:"✓";display:block;color:#fff;font-size:11px;font-weight:900;line-height:1;transform:scale(0)}.form-grid .tick-option input.school-status-tickbox[type="radio"]:checked{border-color:var(--brand);background:var(--brand)}.form-grid .tick-option input.school-status-tickbox[type="radio"]:checked::before{transform:scale(1)}

/* Durable local-first synchronization status. */
.sync-indicator{border:1px solid color-mix(in srgb,var(--success) 35%,var(--line));cursor:pointer;font-family:var(--ui-font)!important}.sync-indicator.pending{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,var(--line));background:color-mix(in srgb,var(--accent) 13%,#fff)}.sync-indicator.error{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 35%,var(--line));background:color-mix(in srgb,var(--danger) 8%,#fff)}.sync-indicator.syncing .status-dot{animation:sync-status-pulse .8s ease-in-out infinite alternate}@keyframes sync-status-pulse{to{opacity:.35;transform:scale(.72)}}
.sync-queue-review{display:grid;gap:12px;padding:22px}.sync-queue-review>p{margin:0 0 4px;color:var(--muted);font-size:13px;line-height:1.6}.sync-queue-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--canvas)}.sync-queue-row strong,.sync-queue-row small{display:block}.sync-queue-row strong{font-size:13px;font-weight:850}.sync-queue-row small{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}

/* Accessible, theme-aware administrator challenge. */
.login-panel form{gap:13px}.login-captcha-card{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff}.login-captcha-card[aria-busy="true"]{opacity:.72}.login-captcha-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.login-captcha-card>header>div:first-child{display:grid;gap:2px}.login-captcha-card>header strong{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:750}.login-captcha-card>header strong::before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:6px;color:#fff;background:var(--brand);font-size:11px;font-weight:900}.login-captcha-card>header small{color:var(--muted);font-size:11.5px;font-weight:500;letter-spacing:0}.login-captcha-tools{display:flex;gap:6px}.login-captcha-tools button{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--brand);background:#fff;font-size:14px;cursor:pointer}.login-captcha-tools button:hover:not(:disabled),.login-captcha-tools button:focus-visible{border-color:var(--brand);background:var(--brand-soft)}.login-captcha-tools button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 16%,transparent);outline-offset:2px}.login-captcha-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:end}.login-captcha-question{min-height:52px;display:grid;place-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;color:var(--brand-deep);background:var(--canvas);font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.05em;text-align:center}.login-captcha-question:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent);outline-offset:2px}.login-panel .login-captcha-answer{gap:5px;font-size:13px;font-weight:650}.login-panel .login-captcha-answer input{min-height:52px;font-size:15px;font-weight:700}.login-captcha-help{margin:0;color:var(--muted);font-size:11px;line-height:1.45}.login-captcha-tools button:disabled,.login-panel [data-login-submit]:disabled{cursor:wait;opacity:.58}

/* Runtime-font typography hierarchy for ERP, setup, forms, cards and documents. */
body,.erp-app,.setup-shell,.login-v3,.print-document,.jpraxc-generic-document{font-family:var(--ui-font)!important;font-weight:500}.erp-app button,.erp-app input,.erp-app select,.erp-app textarea,.setup-shell button,.setup-shell input,.setup-shell select,.setup-shell textarea,.login-v3 button,.login-v3 input{font-family:var(--ui-font)!important}.page-heading h1,.login-story h1,.login-panel h2,.setup-page h1,.setup-page h2,.setup-shell form>header h2{font-weight:780}.page-heading p,.panel-head p,.workspace-panel>.panel-head p,.module-empty p,.empty-state p,.form-note,.backend-boundary p,.setup-page p,.login-story p,.login-panel>form>p{font-weight:500}.brand strong,.school-chip strong,.sidebar-user strong,.breadcrumb strong,.panel-head h2,.workspace-panel>.panel-head h2,.workflow-card>summary strong,.module-form h2,.module-list h2,.empty-state strong{font-weight:720}.sidebar-nav section h3,.page-heading>div>span,.breadcrumb span,.module-search>span,.metric-card>span,.data-table th,.attendance-grid-head,.marks-grid-head,.fee-due-head,.period-editor-head,.timetable-editor-head,.permission-head{font-weight:730}.sidebar-nav section button,.top-actions button,.settings-drawer-list strong,.quick-action-grid button strong{font-weight:650}.form-grid label,.module-form>label,.verification-form label,.confirm-dialog label,.setup-form-grid label,.setup-activation label{font-weight:650}.btn,.text-button,.setup-shell form>footer button,.record-status,.status-pill{font-weight:700}.metric-card>strong,.stat-card strong,.library-metrics b{font-weight:760}.data-table td,.attendance-grid-row,.marks-grid-row,.fee-due-row,.period-editor-row,.timetable-editor-row{font-weight:500}.setup-shell>aside>strong{font-weight:740}.setup-shell>aside>p,.setup-shell form>footer span{font-weight:500}.setup-shell aside li{font-weight:680}.setup-shell aside li b,.setup-shell form>header span,.setup-shell>aside>small{font-weight:760}.appearance-card strong,.review-badge,.setup-reference strong{font-weight:720}.print-document,.print-document *,.jpraxc-generic-document,.jpraxc-generic-document *{font-family:var(--ui-font)!important}.print-document h1,.print-document h2,.print-document h3,.jpraxc-generic-document>header h1,.jpraxc-generic-document>main h2{font-weight:760}.print-document th,.generic-document-meta strong,.jpraxc-generic-document>footer span{font-weight:680}

@media(max-width:560px){.login-captcha-grid{grid-template-columns:1fr}.login-captcha-card{padding:13px}}
@media print{.print-document,.print-document *,.jpraxc-generic-document,.jpraxc-generic-document *{font-family:var(--ui-font)!important}.print-document h1,.print-document h2,.print-document h3,.jpraxc-generic-document>header h1,.jpraxc-generic-document>main h2{font-weight:760!important}}
/* School-identity sign-in: the school owns this screen, so its name is the
   headline and the product keeps only a discreet footer credit. */
.login-story>.school-mark{flex:none;width:82px;height:82px;margin-bottom:38px;border-radius:20px}
.login-story>img.school-mark{object-fit:contain;padding:6px;background:rgba(255,255,255,.94)}
.login-story>.school-mark-monogram{display:grid;place-items:center;color:var(--brand-deep);background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--accent) 34%,#fff));font:900 26px/1 "Manrope",Poppins,sans-serif;letter-spacing:.03em}
.login-story h1{max-width:15ch;font-size:clamp(34px,4.1vw,60px);line-height:1.06;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
.login-story .school-contact{color:rgba(255,255,255,.82);font-size:14px}
.login-story>div strong{font-size:15px;font-weight:800}
.login-panel form>.school-mark{width:66px;height:66px;border-radius:17px}
.login-panel form>img.school-mark{object-fit:contain;padding:4px;border:1px solid var(--line);background:#fff}
.login-panel form>.school-mark-monogram{display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--brand-deep),var(--brand));font:900 21px/1 "Manrope",Poppins,sans-serif;letter-spacing:.03em}
.login-panel small{display:block;line-height:1.35;overflow-wrap:break-word}
/* Module drawer. Shares the settings drawer's visual language so a module and
   the settings page read as one system; the pane list is built at render time
   from whatever sections the module produced. */
.drawer-module{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:18px;margin-top:16px;align-items:start}
.module-drawer-list{display:grid;gap:8px;align-self:start;position:sticky;top:86px}
.module-drawer-list button{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;text-align:left;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.module-drawer-list button:hover,.module-drawer-list button.active{border-color:color-mix(in srgb,var(--brand) 30%,var(--line));background:var(--brand-soft);box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 8%,transparent)}
.module-drawer-list button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 22%,transparent);outline-offset:2px}
.module-drawer-list i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;color:var(--brand);background:var(--brand-soft);font-style:normal;font-weight:900;font-size:12px}
.module-drawer-list button.active i{color:#fff;background:linear-gradient(145deg,var(--brand-deep),var(--brand))}
.module-drawer-list span{min-width:0}
.module-drawer-list strong,.module-drawer-list small{display:block}
.module-drawer-list strong{font-size:14px;font-weight:650}
.module-drawer-list small{margin-top:3px;color:var(--muted);font-size:11px;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.module-drawer-list b{color:var(--brand)}
.module-drawer-content{min-width:0;display:grid;gap:14px}
.module-drawer-content>.module-pane{display:none;margin:0;min-width:0}
.pane-table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.module-drawer-content>.module-pane.active{display:block;animation:pane-in .22s ease}
.module-drawer-content>details.module-pane.active{display:block}
.module-drawer-content>details.module-pane>summary{cursor:default;list-style:none}
.module-drawer-content>details.module-pane>summary::-webkit-details-marker{display:none}
.module-drawer-content>details.module-pane>summary b{display:none}
@media(max-width:1080px){.drawer-module{grid-template-columns:1fr}.module-drawer-list{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.module-drawer-list{grid-template-columns:1fr}}
.login-vendor{z-index:1;display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.login-vendor img{flex:none;width:46px;height:46px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.94);padding:4px}
.login-vendor>div{display:grid;gap:3px;min-width:0}
.login-vendor strong{color:#fff;font-size:14px;font-weight:800;letter-spacing:-.01em}
.login-vendor span{color:rgba(255,255,255,.72);font-size:12.5px;font-weight:500;line-height:1.5}
.login-vendor a{width:fit-content;color:var(--accent);font-size:12.5px;font-weight:800;text-decoration:none}
.login-vendor a:hover,.login-vendor a:focus-visible{text-decoration:underline}
/* Below 900px the story panel is hidden, taking the vendor greeting with it, so
   the form panel carries a compact product credit in its place. */
.login-product-note{display:none}
.login-license-notice{padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));border-left:4px solid var(--brand);border-radius:12px;color:var(--brand-deep);background:var(--brand-soft);font-size:13px;font-weight:750;line-height:1.5}
.license-expiry-screen{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--brand-deep) 72%,rgba(0,0,0,.56));backdrop-filter:blur(9px)}
.license-expiry-screen>article{width:min(520px,100%);display:grid;justify-items:center;gap:13px;padding:34px;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:24px;background:linear-gradient(155deg,#fff,var(--canvas));box-shadow:0 30px 90px rgba(0,0,0,.3);text-align:center}
.license-expiry-screen img{width:62px;height:62px;object-fit:contain}.license-expiry-screen span{color:var(--brand);font-size:12px;font-weight:900;letter-spacing:.13em}.license-expiry-screen h2{margin:0;color:var(--brand-deep);font-size:clamp(25px,5vw,36px);line-height:1.08;letter-spacing:-.035em}.license-expiry-screen p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}.license-expiry-screen p strong{color:var(--ink)}.license-expiry-screen>article>div:last-child{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px}.license-expiry-screen a{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.license-expiry-count{display:grid;place-items:center;width:86px;height:86px;border:5px solid color-mix(in srgb,var(--accent) 72%,#fff);border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--brand-deep),var(--brand));font-size:38px;font-weight:950;font-variant-numeric:tabular-nums;box-shadow:0 0 0 9px color-mix(in srgb,var(--brand) 10%,transparent);animation:jpraxc-license-expiry-flash 1.15s ease-in-out infinite}
@keyframes jpraxc-license-expiry-flash{0%,100%{transform:scale(1);box-shadow:0 0 0 9px color-mix(in srgb,var(--brand) 10%,transparent)}50%{transform:scale(1.06);box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 22%,transparent)}}
@media(prefers-reduced-motion:reduce){.license-expiry-count{animation:none}}
@media(max-width:900px){.login-product-note{display:block;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;text-align:center}.login-product-note a{color:var(--brand);font-weight:800;text-decoration:none}.login-product-note a:hover{text-decoration:underline}}

/* The loading overlay reports how far it has got and offers a way out. A bar
   with no number means the work cannot be measured, not that it is stuck. */
.workspace-busy [data-busy-percent]{min-height:16px;font-size:15px;font-weight:900;letter-spacing:.04em}
.workspace-busy .busy-bar{width:210px;height:5px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.24)}
.workspace-busy .busy-bar i{display:block;width:35%;height:100%;border-radius:99px;background:#fff;animation:workspace-sweep 1.15s ease-in-out infinite}
.workspace-busy.is-measured .busy-bar i{width:0;animation:none;transition:width .2s ease}
.workspace-busy .busy-cancel{margin-top:2px;padding:7px 18px;border:1px solid rgba(255,255,255,.55);border-radius:99px;color:#fff;background:transparent;font-size:12px;font-weight:800;cursor:pointer}
.workspace-busy .busy-cancel:hover{background:rgba(255,255,255,.16)}
.workspace-busy .busy-cancel:disabled{cursor:not-allowed;opacity:.5}
@keyframes workspace-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}

.login-panel select{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:15px;font-weight:650;outline:0}.login-panel select:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

/* Shared sign-in reference: matches the jpraxc.com staff login geometry. */
.login-v3{grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr)}
.login-story{padding:clamp(48px,8vw,120px)}
.login-story>.school-mark{width:78px;height:78px;margin-bottom:32px}
.login-story h1{font-size:clamp(40px,4.8vw,68px);line-height:1.02}
.login-story>div{width:min(570px,100%);margin-top:30px;padding:17px 19px}
.login-panel{min-height:100vh;padding:40px;overflow:auto}
.login-panel form{width:min(470px,100%);gap:11px;padding:38px}
.login-panel form>.school-mark{width:62px;height:62px}
.login-panel h2{font-size:35px}
.login-panel label{font-size:13px}
.login-panel .btn.primary.wide{min-height:48px;margin-top:3px;border-radius:11px}
@media (max-height:860px) and (min-width:901px){.login-story{padding:44px clamp(48px,7vw,92px)}.login-story>.school-mark{width:68px;height:68px;margin-bottom:24px}.login-story h1{font-size:clamp(38px,4.5vw,58px)}.login-story>div{margin-top:20px;padding:13px 16px}.login-vendor{margin-top:18px;padding-top:16px}.login-panel{padding:24px}.login-panel form{gap:9px;padding:28px;max-height:calc(100vh - 48px);overflow:auto}.login-panel form>.school-mark{width:54px;height:54px}.login-panel h2{font-size:31px}.login-panel input,.login-panel select{min-height:48px}.login-captcha-card{padding:13px;gap:9px}}
@media(max-width:900px){.login-v3{grid-template-columns:1fr}.login-story{display:none}.login-panel{min-height:100vh;padding:18px}.login-panel form{padding:28px;max-height:none;overflow:visible}}

/* The money picture shown once a student is chosen for fee collection. */
.fee-session-strip{display:flex;flex-wrap:wrap;gap:8px 28px;padding:10px 14px;margin:0 0 12px;border-radius:11px;background:color-mix(in srgb,var(--brand-soft) 55%,#fff);border:1px solid color-mix(in srgb,var(--brand) 14%,#fff)}
.fee-session-strip span{display:flex;flex-direction:column;gap:1px}
.fee-session-strip small{color:var(--muted);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.fee-session-strip strong{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.fee-session-strip span:last-child strong{color:var(--brand)}
.fee-advance-tag{display:inline-block;padding:0 5px;border-radius:999px;font-size:8.5px;font-style:normal;font-weight:800;line-height:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;background:color-mix(in srgb,var(--accent) 20%,#fff);color:var(--warning);border:1px solid color-mix(in srgb,var(--accent) 45%,#fff)}

/* Fees module: register toolbars, and the settled rows of the session ledger. */
.table-toolbar{display:flex;align-items:flex-start;gap:16px;margin:0 0 12px;flex-wrap:wrap}
.table-toolbar label{display:flex;flex-direction:column;gap:4px;font-size:.78rem;font-weight:600}
.table-toolbar select,.table-toolbar input{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
.toolbar-print{display:inline-flex;align-items:center;gap:7px;min-height:38px;margin-top:calc(.78rem + 4px);padding:0 18px;border-radius:10px}
.fee-paid-pill{display:inline-block;padding:0 8px;border-radius:999px;font-size:9px;font-style:normal;font-weight:800;line-height:15px;text-transform:uppercase;letter-spacing:.05em;background:color-mix(in srgb,var(--success) 12%,#fff);color:var(--success);border:1px solid color-mix(in srgb,var(--success) 32%,#fff)}

/* The session ledger is a register, not a form. The fee name sits over its
   period and the due date over its Advance tag, so both columns share the one
   two-line rhythm; money is right-aligned on tabular figures; and a settled
   fee keeps the same columns as an open one instead of spanning them. The
   grid is sized to the module drawer's pane, so it never scrolls sideways. */
.fee-due-grid .fee-due-head,.fee-due-grid .fee-due-row{grid-template-columns:22px minmax(104px,1fr) 76px 70px 78px 74px 82px;gap:8px;min-width:0;padding:0 12px}
.fee-due-grid .fee-due-head{padding-top:7px;padding-bottom:7px;font-size:9px;letter-spacing:.05em}
.fee-due-grid .fee-due-row{align-items:start;min-height:40px;padding-top:5px;padding-bottom:5px;font-size:11.5px}
.fee-due-grid .fee-due-row>input,.fee-due-grid .fee-due-amount{align-self:center}
.fee-due-grid .fee-due-row:hover{background:color-mix(in srgb,var(--brand-soft) 40%,#fff)}
.fee-due-name{min-width:0}
.fee-due-grid .fee-due-name strong{overflow:hidden;font-weight:750;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}
.fee-due-grid .fee-due-name small{margin-top:0;overflow:hidden;color:var(--muted);font-size:10px;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.fee-due-when{display:flex;flex-direction:column;align-items:flex-start;gap:1px;color:var(--muted);line-height:1.35;white-space:nowrap}
.fee-due-head span:nth-child(n+4),.fee-due-amount{text-align:right;font-variant-numeric:tabular-nums}
.fee-due-amount{font-weight:650}
.fee-due-muted{color:var(--muted);font-weight:500}
.fee-due-grid input[type=number]{min-height:27px;padding:3px 7px;text-align:right;font-variant-numeric:tabular-nums}
.fee-due-grid input[type=checkbox]{width:15px;height:15px;min-height:0;margin:0;accent-color:var(--brand)}
.fee-due-row--paid{color:var(--muted);background:color-mix(in srgb,var(--canvas) 45%,#fff)}
.fee-due-row--paid .fee-due-name strong{color:color-mix(in srgb,var(--ink) 68%,#fff);font-weight:650}

/* Every module panel wears the same heading band a workflow card wears when
   it opens: a brand-tinted strip closed by a hairline, bled out to the panel
   edge. Opening any sub-module now announces itself the same way ERP-wide. */
.workspace-panel>.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:-22px -22px 18px;padding:14px 22px;border-bottom:1px solid var(--line);border-radius:17px 17px 0 0;background:color-mix(in srgb,var(--brand-soft) 55%,#fff)}
@media(max-width:640px){.workspace-panel>.panel-head{margin:-15px -15px 14px;padding:12px 15px;border-radius:14px 14px 0 0}}

/* A register cell with nothing recorded yet reads as absent, not as zero. */
.table-muted{color:var(--muted);font-style:normal;font-size:11px;font-weight:700}

/* A register's own count, which every toolbar shows and none styled. */
.table-toolbar .result-count{margin-left:auto;align-self:center;padding:8px 13px;border:1px solid color-mix(in srgb,var(--brand) 14%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--brand-soft) 55%,#fff);color:var(--muted);font-size:.7rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
/* What a narrowed register came to, read as figures rather than a sentence. */
.tally-strip{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0 0 14px;padding:11px 15px;border:1px solid color-mix(in srgb,var(--brand) 14%,#fff);border-radius:12px;background:color-mix(in srgb,var(--brand-soft) 55%,#fff)}
.tally-strip span{display:flex;flex-direction:column;gap:1px}
.tally-strip small{color:var(--muted);font-size:.6rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.tally-strip strong{font-size:1rem;font-weight:850;font-variant-numeric:tabular-nums}
.tally-strip .tally-in strong{color:var(--success)}
.tally-strip .tally-out strong{color:var(--danger)}
.tally-strip .tally-net strong{color:var(--brand)}
.tally-strip .tally-net.is-deficit strong{color:var(--danger)}

/* The transport ledger carries two figures the school ledger does not — the
   fare and the fine it has run up — so it gets columns of its own rather than
   overflowing the seven the fee grid defines and wrapping onto a second line. */
.fee-due-grid--transport .fee-due-head,.fee-due-grid--transport .fee-due-row{grid-template-columns:20px minmax(66px,1fr) 58px 56px 62px 62px 62px 56px;gap:5px;padding:0 9px}
.fee-due-grid--transport .fee-due-row{align-items:center;min-height:38px}
.fee-due-grid--transport .fee-due-head span:nth-child(n+3),.fee-due-grid--transport .fee-due-row>span:nth-child(n+3){text-align:right}
.fee-due-grid--transport .fee-due-head span:nth-child(2),.fee-due-grid--transport .fee-due-row>span:nth-child(2){text-align:left}
.fee-due-grid--transport .fee-due-row>span:nth-child(3),.fee-due-grid--transport .fee-due-row>span:nth-child(7){font-variant-numeric:tabular-nums;white-space:nowrap}
.fee-due-grid--transport .fee-due-amount small{display:block;margin-top:0;color:var(--muted);font-size:9.5px;font-weight:500;line-height:1.25}
.fee-due-grid--transport .fee-due-row--paid{background:color-mix(in srgb,var(--success) 4%,#fff)}
.fee-due-grid--transport .fee-due-row--paid .fee-due-name strong{color:var(--muted)}
/* What the counter is about to take, said where the taking is decided. */
.collect-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:2px 0 0;padding:12px 15px;border:1px solid color-mix(in srgb,var(--brand) 16%,#fff);border-radius:12px;background:color-mix(in srgb,var(--brand-soft) 50%,#fff)}
.collect-strip label{display:grid;gap:5px;min-width:132px;font-size:12px;font-weight:650}
.collect-strip label input,.collect-strip label select{width:100%;min-height:40px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:#fff;font-family:var(--ui-font);font-size:12px;outline:0}
.collect-strip label input:focus,.collect-strip label select:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent)}
.collect-strip .collect-figure{display:flex;flex-direction:column;gap:1px;margin-left:auto;text-align:right}
.collect-strip .collect-figure small{color:var(--muted);font-size:9.5px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.collect-strip .collect-figure strong{font-size:1.45rem;font-weight:850;font-variant-numeric:tabular-nums;color:var(--brand)}
.collect-strip .collect-terms{display:flex;flex-direction:column;gap:1px;color:var(--muted);font-size:10.5px;line-height:1.45}
.fee-due-grid--transport .fee-due-head{padding-top:8px;padding-bottom:8px}
.fee-due-grid--transport .fee-due-row>span:nth-child(7){text-align:right}
.fee-due-grid--transport .fee-due-name small{font-size:9.5px}
.fee-due-status em{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.fee-due-status .fee-due-now{color:var(--danger)}
.fee-due-status .fee-due-later{color:var(--muted);font-weight:650;text-transform:none;letter-spacing:0;font-size:10px}

/* Fees left from a year the student has since left. Set apart from this
   year's ledger, because the two are read differently — one is the running
   account, the other is what was never settled. */
.fee-arrears{margin-top:14px;padding:12px;border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--danger) 4%,#fff)}
.fee-arrears-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px;margin:0 2px 10px}
.fee-arrears-head>div{display:grid;gap:2px}
.fee-arrears-head strong{font-size:12.5px;font-weight:800;color:var(--danger);text-transform:uppercase;letter-spacing:.05em}
.fee-arrears-head span{color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.fee-due-grid--transport input[type=number]{min-height:26px;padding:3px 5px;font-size:11px}
.fee-due-grid--transport .fee-due-row>span:nth-child(8){text-align:right}

/* A primary row action — Return a book, Pay a wage — was losing its colour to
   the pale treatment the last button in a row gets, while keeping white text:
   white on near-white, unreadable under every theme. Every colour here is
   mixed from --brand, which each theme sets, so it follows all ten by
   construction rather than by ten hand-picked values. */
.record-actions button.primary,.record-actions button.primary:last-child,.row-actions button.primary,.row-actions button.primary:last-child{color:#fff;border-color:color-mix(in srgb,var(--brand) 78%,#000);background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 72%,#000));box-shadow:0 3px 10px color-mix(in srgb,var(--brand) 26%,transparent);font-weight:800}
.record-actions button.primary:hover:not(:disabled),.row-actions button.primary:hover:not(:disabled){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 88%,#000),color-mix(in srgb,var(--brand) 60%,#000));box-shadow:0 5px 14px color-mix(in srgb,var(--brand) 34%,transparent)}
.record-actions button.primary:focus-visible,.row-actions button.primary:focus-visible{outline:2px solid color-mix(in srgb,var(--brand) 55%,#fff);outline-offset:2px}
.record-actions button.primary:disabled,.row-actions button.primary:disabled{color:color-mix(in srgb,var(--brand) 55%,#8b8482);border-color:color-mix(in srgb,var(--brand) 22%,var(--line));background:color-mix(in srgb,var(--brand) 7%,#fff);box-shadow:none;opacity:1;cursor:not-allowed}

/* The tokens a certificate wording may use, listed under the editor: a clerk
   writing the school's own wording needs to see what may be written into it. */
.token-legend { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 2px 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.token-legend li { font-size: 12px; line-height: 1.5; }
.token-legend code { padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb,var(--brand) 10%,transparent); font-size: 11.5px; font-weight: 700; }

/* The ID-card layout chooser: ten cards drawn small, each shown both ways up,
   so a layout is picked by looking at it rather than by reading its name. */
.id-template-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 18px; }
.id-template { padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.id-template.is-chosen { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.id-template-previews { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; min-height: 132px; }
.id-template-previews figure { margin: 0; }
.id-template-previews figcaption { margin-top: 6px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.id-template h4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: 14px; }
.id-template h4 .pill { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb,var(--brand) 14%,transparent); color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.id-template p { margin: 0 0 10px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.id-template .row-actions { display: flex; gap: 8px; }


/* Zoom stepper in the print-preview toolbar. */
.preview-zoom { display: inline-flex; flex: none; align-items: center; gap: 2px; margin-right: 6px; padding: 2px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; }
.preview-zoom button { min-width: 26px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; cursor: pointer; }
.preview-zoom button:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.preview-zoom button:disabled { opacity: .35; cursor: default; }
.preview-zoom output { min-width: 44px; color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

/* Pairing the school's own WhatsApp account: the state, the code, the buttons. */
.whatsapp-link { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--brand) 3%,transparent); }
.whatsapp-link-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.whatsapp-link-state .pill { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb,var(--muted) 18%,transparent); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.whatsapp-link-state .pill.is-linked { background: color-mix(in srgb,#1f9d55 18%,transparent); color: #1f7a44; }
.whatsapp-link figure { margin: 10px 0; }
.whatsapp-link figure img { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: 10px; background: #fff; object-fit: contain; }
.whatsapp-link figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; }
.tick-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 6px 16px; margin-top: 8px; }
.tick-list .inline-check { display: flex; align-items: center; gap: 8px; margin: 0; text-align: left; }
.tick-list .inline-check input { margin: 0; }

/* Communication configuration: one card per channel, each headed by what it is,
   whether it is switched on and whether it holds what it needs to send. Forty
   fields in one column tell an administrator nothing about which of the three
   actually works. Every colour is the school's own theme. */
.channel-form { display: grid; gap: 18px; }
/* WhatsApp carries most of a school's messages and most of the settings, so it
   takes the whole first row; email and SMS sit side by side underneath it. */
.channel-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.channel-grid > [data-channel="whatsapp"] { grid-column: 1 / -1; }
.channel-grid > [data-channel="whatsapp"] .channel-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
@media (max-width: 900px) { .channel-grid { grid-template-columns: 1fr; } .channel-grid > [data-channel="whatsapp"] .channel-fields { grid-template-columns: 1fr; } }
.channel-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.channel-card.is-on { border-color: color-mix(in srgb,var(--brand) 34%,var(--line)); box-shadow: 0 10px 30px color-mix(in srgb,var(--brand) 7%,transparent); }
.channel-card > header { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.channel-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--brand); background: var(--brand-soft); }
.channel-mark svg { width: 19px; height: 19px; display: block; }
.channel-card > header strong { display: block; font-size: 15px; }
.channel-card > header small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.channel-state { padding: 4px 10px; border-radius: 999px; color: var(--muted); background: color-mix(in srgb,var(--muted) 12%,transparent); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.channel-state.is-ready { color: var(--success); background: color-mix(in srgb,var(--success) 13%,transparent); }
.channel-switch { padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb,var(--canvas) 60%,#fff); font-size: 12.5px; font-weight: 800; }
.channel-card.is-on .channel-switch { border-color: color-mix(in srgb,var(--brand) 28%,var(--line)); background: var(--brand-soft); color: var(--brand-deep); }
.channel-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.channel-fields .full, .channel-card > .full { grid-column: 1 / -1; }
.channel-fields label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 750; }
.channel-fields input, .channel-fields select, .channel-fields textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fff; outline: 0; }
.channel-fields input:focus, .channel-fields select:focus, .channel-fields textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent); }
.channel-note { margin: 0; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
.channel-note code { padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb,var(--brand) 8%,transparent); font-size: 11px; }
/* The one route that is outside WhatsApp's terms says so in the colour a
   warning is read in, not in the same grey as everything else. */
.channel-note.is-warning { padding: 10px 12px; border-left: 3px solid var(--warning); border-radius: 8px; color: color-mix(in srgb,var(--warning) 82%,var(--ink)); background: color-mix(in srgb,var(--warning) 9%,transparent); font-weight: 650; }
.channel-card--auto { grid-column: 1 / -1; }
.auto-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 12px; }
.auto-grid > label { display: grid; gap: 6px; font-size: 12px; font-weight: 750; }
.whatsapp-link { grid-column: 1 / -1; }


/* Which language every message goes out in: three cards rather than a dropdown,
   because the choice changes every message the school sends and the cost of
   each is worth seeing before it is picked. */
.language-choice { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--canvas) 55%,#fff); }
.language-choice legend { padding: 0 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.language-option { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); cursor: pointer; }
.language-option:hover { border-color: color-mix(in srgb,var(--brand) 34%,var(--line)); }
.language-option.is-chosen { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 6px 20px color-mix(in srgb,var(--brand) 9%,transparent); }
.language-option input { position: absolute; opacity: 0; pointer-events: none; }
.language-option strong { font-size: 13px; }
.language-option.is-chosen strong { color: var(--brand-deep); }
.language-option small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.language-choice .channel-note { grid-column: 1 / -1; }
/* What a message will cost to send, counted as it is typed. */
.message-measure { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; color: var(--muted); font-size: 11.5px; font-weight: 700; }
.message-measure b { color: var(--ink); font-variant-numeric: tabular-nums; }
.message-measure.is-over { color: var(--danger); }
.message-measure.is-over b { color: var(--danger); }

/* A heading action is a button, not a column. It was being stretched to the
   height of the search box beside it - 59px against its own 42 - which made
   "Back up now" read as a panel rather than as something to press. The search
   box is part of this strip and carries a label above its field, so the row is
   aligned to its foot: that is the line the field itself sits on. */
.heading-actions { align-items: flex-end; }
.heading-actions .btn { min-height: 42px; height: 42px; white-space: nowrap; }

/* Password visibility stays inside the field and uses only eye icons. */
.password-field{position:relative;display:block}.password-field input{padding-right:54px!important}.password-field button{position:absolute;top:50%!important;right:6px;width:38px;height:38px;min-height:38px;padding:0;border:0;border-radius:9px;color:var(--brand);background:var(--brand-soft);font-size:0!important;line-height:0;cursor:pointer;transform:translateY(-50%)}.password-field button:hover{color:#fff;background:var(--brand)}
.password-field button::before{content:"";position:absolute;inset:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat}.password-field button.is-password-visible::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.8 2.8M9.9 4.2A10.6 10.6 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.1 3.1M6.6 6.7C3.5 8.8 2 12 2 12s3.5 8 10 8a9.7 9.7 0 0 0 4.1-.9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.6 10.7a2 2 0 0 0 2.8 2.8M9.9 4.2A10.6 10.6 0 0 1 12 4c6.5 0 10 8 10 8a17 17 0 0 1-2.1 3.1M6.6 6.7C3.5 8.8 2 12 2 12s3.5 8 10 8a9.7 9.7 0 0 0 4.1-.9'/%3E%3C/svg%3E")}

/* v3.1.7 — the product artwork is transparent and must remain fully visible. */
.boot-screen img,.setup-product-image,.login-story>img,.login-panel form>img,.login-vendor img,.license-expiry-screen img,.product-brand img{display:block;object-fit:contain;object-position:center;border:0;border-radius:0;background:transparent;box-shadow:none}
.boot-screen img{width:86px;height:86px;filter:drop-shadow(0 14px 24px color-mix(in srgb,var(--brand) 24%,transparent))}
.setup-product-image{width:68px;height:68px}
.login-story>img{width:84px;height:84px}
.login-panel form>img{width:68px;height:68px}
.login-vendor img{width:50px;height:50px;padding:0}
.license-expiry-screen img{width:68px;height:68px}
.product-brand img{width:34px;height:34px}

/* Themed marks register: the subject columns retain their horizontal working
   space while every candidate reads as a distinct, focusable ERP record. */
.marks-entry-grid{gap:8px;padding:12px;border:1px solid var(--line);border-radius:15px;background:color-mix(in srgb,var(--canvas) 64%,#fff);scrollbar-color:color-mix(in srgb,var(--brand) 42%,transparent) transparent}
.marks-entry-head{z-index:2;padding:10px 12px;border:0;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--brand-deep),var(--brand));box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 14%,transparent)}
.marks-entry-head span,.marks-entry-head small{color:inherit}
.marks-entry-row{padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 4px 14px color-mix(in srgb,var(--brand) 4%,transparent)}
.marks-entry-row:hover{border-color:color-mix(in srgb,var(--brand) 28%,var(--line));background:color-mix(in srgb,var(--brand-soft) 36%,#fff)}
.marks-entry-row>input,.marks-entry-cell input{min-height:42px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;font-variant-numeric:tabular-nums}
.marks-entry-row>input:focus,.marks-entry-cell input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 11%,transparent);outline:0}
.marks-entry-cell--split{gap:7px}

/* School closure is an operational state, not an empty register. */
.school-closed-state{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid color-mix(in srgb,var(--warning) 30%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--warning) 8%,#fff)}
.school-closed-state>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:11px;color:#fff;background:var(--warning);font-size:12px;font-weight:850}
.school-closed-state strong{display:block;color:var(--ink);font-size:15px}
.school-closed-state p{margin:3px 0 0;color:var(--muted);font-size:12.5px}

/* Direct-payment staff ledger has no selection column. */
.payroll-ledger .fee-due-head,.payroll-ledger .fee-due-row{grid-template-columns:minmax(142px,1.4fr) repeat(5,minmax(88px,1fr))}

.icon-button.logout-button{color:var(--danger);background:color-mix(in srgb,var(--danger) 7%,#fff)}
.icon-button.logout-button:hover{color:#fff;background:var(--danger)}
.icon-button.logout-button svg{width:19px;height:19px}

@media(max-width:760px){.marks-entry-grid{padding:8px}.school-closed-state{align-items:flex-start}.payroll-ledger{min-width:720px}}

/* Daily updates (class diary) editor: period, taught-by, and the update text. */
.diary-editor .timetable-editor-head,.diary-editor .timetable-editor-row{grid-template-columns:minmax(150px,.6fr) minmax(190px,.9fr) minmax(320px,1.6fr)}
.diary-editor textarea[data-diary-text]{min-height:52px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:var(--ui-font);font-size:11px;font-weight:500;resize:vertical;width:100%}
.diary-editor .break-period{grid-column:2/-1}

/* Permission card: one switch, its name, and exactly what it shares. */
.permission-toggle-card{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid color-mix(in srgb,var(--brand) 23%,var(--line));border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand-soft) 72%,#fff),#fff);cursor:pointer}
.permission-toggle-card input[type="checkbox"]{width:18px;height:18px;margin-top:1px;flex:none;accent-color:var(--brand)}
.permission-toggle-card span{display:grid;gap:3px}
.permission-toggle-card strong{font-size:12.5px;font-weight:750}
.permission-toggle-card small{color:var(--muted);font-size:11px;line-height:1.55;font-weight:500}

/* The blank sheet offered beside an import file picker. */
.import-template{display:grid;gap:15px;margin:6px 0;padding:18px 20px;border:1px dashed color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--brand-soft) 42%,#fff)}
.import-template .form-note{margin:0;padding:2px 4px 2px 14px;border-left:3px solid var(--brand);border-radius:0;background:transparent;font-size:11.5px;line-height:1.75}
/* The picker keeps its caption above it like every other field, so the row is
   aligned along the bottom: the select and the button end on the same line. */
.import-template .form-actions{margin:0;gap:14px;justify-content:flex-start;align-items:flex-end;flex-wrap:wrap}
/* The picker and the button beside it are one control: same height, same
   baseline, so the row does not read as two unrelated things. */
.import-template .inline-select{display:grid;gap:6px;margin:0;color:var(--muted);font-size:11px;font-weight:650}
.import-template .inline-select select{min-height:42px;padding:0 11px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:11.5px;font-weight:650}

/* The machines a school can buy and know will work, by family. */
.supported-devices{margin-top:20px;padding:18px 20px;border:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));border-radius:14px;background:linear-gradient(150deg,color-mix(in srgb,var(--canvas) 60%,#fff),#fff)}
.supported-devices>header{display:grid;gap:3px;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.supported-devices>header strong{font-size:13px;font-weight:800;color:var(--brand-deep)}
.supported-devices>header small{color:var(--muted);font-size:11px;line-height:1.55}
.supported-device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.supported-device-grid article{display:grid;gap:5px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.supported-device-grid h5{margin:0;font-size:12.5px;font-weight:800;color:var(--ink)}
.supported-device-protocol{margin:0;color:var(--brand);font-size:10.5px;font-weight:750;letter-spacing:.02em;text-transform:uppercase}
.supported-device-models{margin:0;color:var(--ink);font-size:11.5px;line-height:1.6}
.supported-device-grid small{color:var(--muted);font-size:10.5px;line-height:1.55}


/* The watermark picture currently in use, shown beside the picker. */
.watermark-current img{width:100%;max-width:190px;height:74px;object-fit:contain;padding:8px;border:1px dashed color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:11px;background:#fff;opacity:.55}

/* The WhatsApp submodule: conversations down one side, the open one beside. */
.wa-workspace{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:16px;align-items:start}
.wa-threads{max-height:520px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.wa-thread-list{margin:0;padding:0;list-style:none}
.wa-thread-list li+li{border-top:1px solid var(--line)}
.wa-thread{display:grid;gap:3px;width:100%;padding:12px 14px;border:0;background:transparent;text-align:left;cursor:pointer}
.wa-thread:hover{background:var(--brand-soft)}
.wa-thread.is-active{background:color-mix(in srgb,var(--brand) 12%,#fff);box-shadow:inset 3px 0 0 var(--brand)}
.wa-thread-name{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:750;color:var(--ink)}
.wa-unread{display:grid;place-items:center;min-width:19px;height:19px;padding:0 6px;border-radius:10px;color:#fff;background:var(--brand);font-size:10px;font-weight:800}
.wa-thread-preview{color:var(--muted);font-size:11px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-thread-when{color:var(--muted);font-size:10px;font-weight:650}
/* JPRAXC ConnectX names a person, not a sentence: a fixed two-line row of who and
   when, so ten of them fill the box exactly and the eleventh is a scroll away. */
.wa-thread-side{display:grid;gap:9px;align-content:start}
.wa-thread-search input{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:12px}
.wa-thread-search input:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)}
.wa-thread-empty{margin:0}
.chat-workspace .wa-threads{max-height:calc(60px * 10 + 11px);overflow-y:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.chat-workspace .wa-thread{height:60px;gap:4px;align-content:center;overflow:hidden}
.chat-workspace .wa-thread-name{line-height:1.35}
.chat-workspace .wa-thread-when{display:flex;align-items:center;gap:4px;line-height:1.3;white-space:nowrap}
.chat-workspace .wa-thread-when em{padding:1px 6px;border-radius:999px;background:var(--brand-soft);color:var(--brand-deep);font-style:normal;font-weight:750;letter-spacing:.02em}
.chat-workspace .wa-thread-when i{margin-left:auto;font-style:normal;font-weight:600}
.wa-conversation{display:grid;gap:12px;min-height:320px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,color-mix(in srgb,var(--canvas) 55%,#fff),#fff)}
.wa-conversation-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:11px;border-bottom:1px solid var(--line)}
.wa-conversation-head strong{display:block;font-size:13.5px}
.wa-conversation-head small{color:var(--muted);font-size:11px}
.wa-window{padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--warning) 40%,var(--line));color:color-mix(in srgb,var(--warning) 80%,#000);background:color-mix(in srgb,var(--warning) 10%,#fff);font-size:10.5px;font-weight:750}
.wa-window.is-open{border-color:color-mix(in srgb,var(--success,#177245) 40%,var(--line));color:color-mix(in srgb,var(--success,#177245) 85%,#000);background:color-mix(in srgb,var(--success,#177245) 10%,#fff)}
.wa-messages{display:grid;gap:9px;max-height:380px;overflow-y:auto;padding:4px 2px}
.wa-bubble{max-width:78%;padding:9px 12px;border-radius:13px;border:1px solid var(--line);background:#fff}
.wa-bubble p{margin:0;font-size:12.5px;line-height:1.55;overflow-wrap:anywhere}
.wa-bubble small{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:650}
.wa-bubble--in{justify-self:start;border-bottom-left-radius:4px}
.wa-bubble--out{justify-self:end;border-color:color-mix(in srgb,var(--brand) 26%,var(--line));background:var(--brand-soft);border-bottom-right-radius:4px}
/* Correcting or striking out a message is the office's own act, so the controls
   sit quietly on the message and appear when it is pointed at. */
.chat-workspace .wa-bubble{position:relative}
.wa-bubble-tools{display:flex;gap:6px;position:absolute;top:6px;right:8px;opacity:0;transition:opacity .12s}
.wa-bubble:hover .wa-bubble-tools,.wa-bubble:focus-within .wa-bubble-tools{opacity:1}
.wa-bubble-tool{padding:2px 7px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:9.5px;font-weight:750;cursor:pointer}
.wa-bubble-tool:hover{border-color:var(--brand);color:var(--brand-deep);background:var(--brand-soft)}
.wa-bubble.is-failed{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 7%,#fff)}
.wa-reply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;padding-top:11px;border-top:1px solid var(--line)}
.wa-reply textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-size:12.5px;resize:vertical}
.wa-reply textarea:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.wa-queue-head{display:grid;gap:3px;margin-bottom:13px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));border-radius:13px;background:var(--brand-soft)}
.wa-queue-head strong{font-size:13px}
.wa-queue-head span{color:var(--muted);font-size:11px;line-height:1.55}
.channel-webhook{display:grid;gap:9px;padding:14px 15px;border:1px dashed color-mix(in srgb,var(--brand) 30%,var(--line));border-radius:12px;background:color-mix(in srgb,var(--brand-soft) 40%,#fff)}
.channel-webhook strong{font-size:12.5px;color:var(--brand-deep)}
.channel-webhook p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:820px){.wa-workspace{grid-template-columns:1fr}.wa-threads{max-height:250px}}

/* Role, user and sign-in screen read as one job, one after another. */
.access-setup,.profile-setup{display:grid;gap:22px}
.access-setup>section,.profile-setup>section{display:grid;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.access-setup>section:last-child,.profile-setup>section:last-child{padding-bottom:0;border-bottom:0}
.access-setup .form-note,.profile-setup .form-note{margin:0}

/* The school's own mark, shown beside the picker that replaces it. */
.school-logo-row{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:18px;align-items:start}
.school-logo-preview{display:grid;gap:8px;margin:0;padding:14px;border:1px dashed color-mix(in srgb,var(--brand) 28%,var(--line));border-radius:13px;background:#fff;text-align:center}
.school-logo-preview img{width:100%;height:96px;object-fit:contain}
.school-logo-preview figcaption{color:var(--muted);font-size:10.5px;line-height:1.5}
.school-logo-row form{margin:0}
@media(max-width:720px){.school-logo-row{grid-template-columns:1fr}}

/* The bell in the header: how many conversations are waiting on the office. */
.icon-button.chat-bell{position:relative}
.icon-button.chat-bell.has-unread{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 34%,var(--line));background:var(--brand-soft)}
.chat-bell-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px;border-radius:9px;color:#fff;background:var(--danger);font-size:10px;font-weight:850;line-height:1;box-shadow:0 2px 6px color-mix(in srgb,var(--danger) 40%,transparent)}
.chat-bell-count[hidden]{display:none}

/* A message may carry one file: a picture is shown, anything else is named. */
.chat-reply{grid-template-columns:minmax(0,1fr) auto auto}
.chat-attach{display:grid;place-items:center;min-height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;color:var(--brand);background:#fff;font-size:11.5px;font-weight:750;cursor:pointer;white-space:nowrap}
.chat-attach:hover{border-color:var(--brand);background:var(--brand-soft)}
.chat-attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.chat-attach:has(input:not(:placeholder-shown)),.chat-attach.has-file{border-color:var(--brand);background:var(--brand-soft)}
.chat-attachment{display:flex;align-items:center;gap:9px;margin-bottom:7px;padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:#fff;color:inherit;text-decoration:none}
.chat-attachment b{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:8px;color:#fff;background:var(--brand);font-size:9.5px;font-weight:850}
.chat-attachment img{width:100%;max-width:230px;max-height:170px;border-radius:8px;object-fit:cover}
.chat-attachment.is-image{display:grid;gap:6px}
.chat-attachment span{display:grid;gap:1px;min-width:0;font-size:11.5px;font-weight:700;overflow-wrap:anywhere}
.chat-attachment small{color:var(--muted);font-size:10px;font-weight:650}

/* JPRAXC ConnectX wears its own mark wherever it is listed — the drawer, the panel
   head and the channel card — instead of a stroked line drawing. */
.submodule-mark-image{width:26px;height:26px;border-radius:8px;object-fit:cover;display:block}
.module-drawer-list i .submodule-mark-image{width:30px;height:30px;border-radius:9px}
.channel-mark .submodule-mark-image{width:24px;height:24px;border-radius:7px}

/* The composer is one row: a box the same height as the buttons beside it, a
   paperclip that is a paperclip, and Send. Nothing taller than anything else. */
.chat-reply{align-items:center}
.chat-reply textarea{min-height:44px;height:44px;padding:12px 13px;resize:none;line-height:1.35}
.chat-reply .chat-attach{min-height:44px;height:44px;width:44px;padding:0}
.chat-reply .chat-attach svg{width:19px;height:19px}
.chat-reply .btn{min-height:44px;height:44px}

/* The header carries the ConnectX mark rather than a bell: it is the thing it
   opens, and the count sits on it the same way. */
.chat-bell-mark{width:22px;height:22px;border-radius:6px;object-fit:cover;display:block}
.icon-button.chat-bell.has-unread .chat-bell-mark{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 45%,transparent)}
/* Same in the ERP: the label is the row's height, not the textarea plus a
   line-box's descender. */
.chat-reply label.full{display:grid;height:44px}
.chat-reply textarea{overflow-y:auto;scrollbar-width:none}
.chat-reply textarea::-webkit-scrollbar{width:0;height:0}
/* A file said in a conversation opens over it, with a way to save it as sent. */
.attachment-dialog{width:min(900px,94vw);max-height:92vh;padding:0}
.attachment-dialog .dialog-title small{color:var(--muted);font-size:11px;font-weight:650}
.attachment-stage{display:grid;place-items:center;padding:14px;background:color-mix(in srgb,var(--canvas) 60%,#fff)}
.attachment-stage img{max-width:100%;max-height:66vh;border-radius:10px;object-fit:contain}
.attachment-stage iframe{width:100%;height:66vh;border:0;border-radius:10px;background:#fff}
.attachment-actions{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--line)}
.attachment-actions .btn.primary{display:inline-grid;place-items:center;text-decoration:none}
/* The verified card ends with the paper itself: a button to open what was just
   checked, standing clear of the particulars and seated to the right. */
.verification-result .verify-result-actions{display:flex;justify-content:flex-end;margin-top:14px}
/* The line that goes with a file, written while looking at the file. */
.attachment-caption{padding:12px 16px 0}
.attachment-caption label{display:grid;gap:6px;font-size:11.5px;font-weight:800;color:var(--muted)}
.attachment-caption textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font:inherit;font-size:12.5px;resize:vertical}
.attachment-caption textarea:focus{border-color:var(--brand);outline:0;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent)}

/* A family and a member of staff are told apart at a glance: their own mark,
   their own colour on the pill, and a stripe on the row that carries it. */
.chat-workspace .wa-thread{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding-left:12px}
.wa-thread-mark{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;border:1px solid transparent}
.wa-thread-mark svg{width:16px;height:16px}
.wa-thread-lines{display:grid;gap:4px;min-width:0}
.wa-thread.is-student .wa-thread-mark{color:var(--brand-deep);background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 24%,transparent)}
.wa-thread.is-student .wa-thread-when em{background:var(--brand-soft);color:var(--brand-deep)}
.wa-thread.is-staff .wa-thread-mark{color:#7a4a05;background:#fdf3e2;border-color:#f0d9ae}
.wa-thread.is-staff .wa-thread-when em{background:#fdf3e2;color:#7a4a05}
.wa-thread.is-staff.is-active{box-shadow:inset 3px 0 0 #c8871a}

/* The two halves of the module are one thing, so they are one height: the list
   fills its side, the conversation fills its own, and each scrolls inside. */
.chat-workspace{align-items:stretch;height:664px}
.chat-workspace .wa-thread-side{grid-template-rows:auto minmax(0,1fr);min-height:0}
.chat-workspace .wa-threads{max-height:none;height:100%;min-height:0}
.chat-workspace .wa-conversation{grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
.chat-workspace .wa-messages{max-height:none;min-height:0}
/* One height for both, and neither grows with what it holds: ten conversations
   fill the list and the rest are a scroll away, however long the open one runs. */
.chat-workspace .wa-thread-side,.chat-workspace .wa-conversation{height:100%;min-height:0}
@media(max-width:820px){.chat-workspace{height:auto}.chat-workspace .wa-threads{max-height:250px}.chat-workspace .wa-messages{max-height:380px}}

/* Messages sit on the floor of the pane and grow upwards, the way every
   messenger reads: two lines in a new conversation belong at the bottom by the
   box you answer in, not stranded at the top of an empty card. */
.chat-workspace .wa-messages{align-content:end}

/* Messages rest on the floor of the pane, but a pane that fills up must still
   scroll to the top of what was said. Pushing content down with align-content
   makes the overflow above it unreachable, so it is pushed with an auto margin
   instead — which collapses to nothing the moment there is no room to spare. */
.chat-workspace .wa-messages{display:flex;flex-direction:column;align-content:normal;overflow-y:auto}
.chat-workspace .wa-messages::before{content:"";margin-top:auto}
.chat-workspace .wa-bubble{flex:0 0 auto}
.chat-workspace .wa-bubble--in{align-self:flex-start}
.chat-workspace .wa-bubble--out{align-self:flex-end}

/* JPRAXC ConnectX, headed by its own mark and its own name. */
.connectx-brand{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.connectx-brand-mark{width:48px;height:48px;flex:none;border-radius:13px;object-fit:cover;box-shadow:0 2px 8px rgba(17,12,13,.14)}
.connectx-brand h1{margin:0;font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--brand-deep);line-height:1.15}
.connectx-brand h1 b{font-weight:800;color:#e07b18}
.connectx-brand p{margin:3px 0 0;color:var(--muted);font-size:12.5px}
/* With nothing in the list yet, the empty note still fills its side, so the two
   cards stand level on the day a school first opens the module. */
.chat-workspace .wa-thread-side > .empty-state,.chat-workspace .wa-threads > .empty-state{height:100%;align-content:center}
.chat-workspace .wa-thread-side{min-height:0}

/* A PDF states what it is rather than relying on a plugin to draw it. */
.attachment-doc{display:flex;align-items:center;gap:14px;width:100%;max-width:520px;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}
.attachment-doc b{display:grid;place-items:center;width:52px;height:64px;flex:none;border-radius:8px;color:#fff;background:linear-gradient(160deg,#b4322c,#8d211c);font-size:13px;font-weight:850;letter-spacing:.06em}
.attachment-doc div{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.attachment-doc strong{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.attachment-doc small{color:var(--muted);font-size:11.5px;font-weight:650}

/* The bar itself is fixed to the top of the window, so it is already the frame
   this is measured against — no positioning of its own is added here, because
   making it relative drops it into the page and leaves a gap above it.
   The zoom sits in the middle of the preview bar, centred on the bar itself
   rather than on whatever is left over between the title and the buttons — so
   it stays put as titles get longer. Below the breakpoint where the title is
   dropped it goes back into the row, where there is no room to centre it. */
@media(min-width:761px){
  .print-preview-toolbar .preview-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-right:0}
}

/* Sectioned entry forms.

   Admission, Add student and Add staff ask for forty-odd things each. As one
   flat grid that reads as a wall; the online admission form already solves it
   by grouping the questions into numbered sections, so the office forms are
   built the same way and a clerk moving between them recognises the shape. */
.form-sections { display: grid; gap: 16px; }
.form-sections fieldset { min-width: 0; margin: 0; padding: 18px 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.form-sections legend { display: flex; align-items: center; gap: 9px; padding: 0 7px; color: var(--ink); font-size: 14px; font-weight: 850; }
.form-sections legend span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: #fff; background: var(--brand); font-size: 11px; font-weight: 800; }
.form-sections .section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.form-sections .section-grid label { min-width: 0; display: grid; align-content: start; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
/* A tick option is a box and its name on one line - the sectioned grid's
   stacked label layout must not pull the name underneath the box. */
.form-sections .section-grid .tick-option { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.form-sections .section-grid label > small,
.form-sections .section-grid .field-hint { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.form-sections .section-grid .full { grid-column: 1 / -1; }
.form-sections .section-grid .span-2 { grid-column: span 2; }
.form-sections .form-actions { display: flex; justify-content: flex-end; gap: 10px; }
@media (max-width: 1100px) { .form-sections .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .form-sections .section-grid { grid-template-columns: 1fr; } .form-sections .section-grid .span-2 { grid-column: auto; } }

/* Every box in a sectioned form is drawn to one rule - the Selected subjects
   picker's: 46px tall, 11px corners, the same hairline and focus ring the rest
   of the workspace uses - so a row of mixed controls reads as one line of
   boxes rather than a mix of parts. */
.form-sections .section-grid input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.form-sections .section-grid select,
.form-sections .section-grid textarea,
.form-sections .section-grid .tick-picker-toggle {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: #fff;
  outline: 0;
}
.form-sections .section-grid textarea { min-height: 0; }
.form-sections .section-grid input:focus,
.form-sections .section-grid select:focus,
.form-sections .section-grid textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 11%, transparent);
}
/* Developer Control owns these identity values. Grey presentation makes the
   boundary visible while every school-owned profile field remains editable. */
.form-grid .developer-controlled-field{color:#6f6a6c}.form-grid .developer-controlled-field input[readonly]{color:#676164;border-color:#cbc7c8;background:#eceaeb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02);cursor:not-allowed}.form-grid .developer-controlled-field small{display:flex;align-items:center;gap:5px;color:#777174;font-size:10px;font-weight:700}
.jpraxc-generic-document .school-letterhead-contact{display:flex;flex-wrap:wrap;justify-content:center;gap:1mm 4mm;margin-top:1.2mm}.jpraxc-generic-document .school-letterhead-contact-item{display:inline-flex;align-items:center;max-width:100%;color:#3a3335;font-size:7pt;line-height:1.3}.jpraxc-generic-document .school-letterhead-contact-address{flex-basis:100%;justify-content:center}.jpraxc-generic-document .school-letterhead-contact-item svg{flex:0 0 auto;width:3.2mm;height:3.2mm;margin-right:1.2mm;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.jpraxc-generic-document .school-letterhead-contact-item b{overflow-wrap:anywhere}

/* Compact operational header: preserve the full school identity beside controls. */
.topbar .sync-indicator{padding:5px 8px;border-radius:15px;font-size:10px;gap:5px}
.topbar .sync-indicator .status-dot{width:6px;height:6px}
@media (min-width:761px) and (max-width:1350px){
  .topbar .breadcrumb{min-width:135px;max-width:135px}
  .topbar .breadcrumb span{display:none}
  .topbar .topbar-school{min-width:350px}
  .topbar .topbar-school strong{font-size:14px}
  .topbar .product-brand{display:none}
}

/* Icon-only sync state leaves the header width to the complete school name. */
.topbar .topbar-school>div{flex:1 1 auto;min-width:0}
.topbar .topbar-school strong{font-size:15px}
.topbar .sync-indicator{position:relative;flex:0 0 36px;width:36px;height:36px;min-width:36px;padding:0;border-radius:10px;justify-content:center;gap:0}
.topbar .sync-indicator span{display:none}
.topbar .sync-indicator .status-dot{position:relative;display:grid;width:20px;height:20px;place-items:center;border-radius:50%;background:var(--success)}
.topbar .sync-indicator .status-dot::after{content:'✓';color:#fff;font-size:12px;font-weight:900;line-height:1}
.topbar .sync-indicator.pending .status-dot{background:var(--warning)}
.topbar .sync-indicator.pending .status-dot::after{content:'↻'}
.topbar .sync-indicator.error .status-dot{background:var(--danger)}
.topbar .sync-indicator.error .status-dot::after{content:'!'}
.topbar .sync-indicator.syncing .status-dot::after{content:'↻'}