:root {
  --ink: #13283d;
  --green: #0b5578;
  --green-dark: #082f49;
  --green-soft: #e6f0f5;
  --gold: #e6bd45;
  --paper: #fffefa;
  --canvas: #f4f2eb;
  --muted: #64717a;
  --line: #d7dde1;
  --danger: #a73333;
  --success: #236849;
  --shadow: 0 10px 32px rgba(31, 58, 51, 0.08);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.loading-screen,
.sign-in-screen,
.public-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 86% 10%, rgba(241, 201, 91, 0.24), transparent 25rem),
    var(--canvas);
}

.loading-screen { display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--green-dark); }
.loading-screen p { margin: 0; color: var(--muted); }
.brand-logo { display: block; object-fit: cover; border-radius: 50%; box-shadow: 0 8px 22px rgba(7, 38, 53, 0.2); }
.brand-logo-loading { width: 82px; height: 82px; }
.brand-logo-featured { width: clamp(112px, 12vw, 160px); height: clamp(112px, 12vw, 160px); border: 3px solid rgba(241, 201, 91, 0.6); }
.brand-logo-compact { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid rgba(241, 201, 91, 0.72); }

.sign-in-screen { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr); }
.sign-in-brand { padding: clamp(38px, 7vw, 96px); display: flex; flex-direction: column; justify-content: space-between; color: #fffdf8; background: var(--green-dark); }
.sign-in-brand h1 { max-width: 680px; margin: 30px 0 18px; font: 700 clamp(42px, 6vw, 76px)/0.99 Georgia, serif; letter-spacing: -0.04em; }
.sign-in-brand p { max-width: 600px; color: #c8dbd5; font-size: clamp(16px, 2vw, 20px); line-height: 1.6; }
.sign-in-brand .portal-name { margin: 22px 0 0; color: var(--gold); font-size: 12px; font-weight: 850; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.motto { display: flex; gap: 18px; color: var(--gold); font: 700 14px Georgia, serif; }
.sign-in-brand-footer { display: grid; gap: 4px; color: #aac2cf; font-size: 11px; line-height: 1.45; }
.sign-in-brand-footer .motto { margin-bottom: 5px; }
.sign-in-panel { padding: clamp(30px, 6vw, 88px); display: grid; align-content: center; }
.auth-card { max-width: 520px; padding: clamp(28px, 4vw, 44px); border: 1px solid rgba(24, 49, 44, 0.09); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.eyebrow { margin: 0 0 7px; color: #73807a; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.auth-card h2, .page-heading h1, .card h2, .section-heading h2 { margin: 0; font-family: Georgia, serif; }
.auth-card h2 { font-size: 34px; }
.auth-card > p { margin: 14px 0 26px; color: var(--muted); line-height: 1.6; }
.google-button, .primary-button, .secondary-button, .nav-button, .text-button { min-height: 44px; border: 0; border-radius: 12px; font-weight: 750; }
.google-button, .primary-button { color: #fff; background: var(--green); box-shadow: 0 8px 20px rgba(20, 91, 78, 0.2); }
.google-button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px; }
.google-g { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #315d55; background: #fff; font: 800 14px Arial, sans-serif; }
.help-link { display: block; margin-top: 18px; color: var(--green); font-size: 13px; text-align: center; }
.auth-error { margin: 16px 0 0; padding: 11px 13px; border-radius: 10px; color: #842626; background: #f8dddd; font-size: 13px; }
.demo-portal-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid #b9cdc6; border-radius: 10px; background: #fff; color: var(--green-dark); font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.demo-portal-link:hover { background: var(--green-soft); border-color: var(--green); }
.demo-portal-link:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.demo-sign-in { margin-top: 24px; padding-top: 24px; border-top: 1px solid #dbe4df; }
.demo-sign-in .demo-portal-link { width: 100%; }
.demo-sign-in p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.demo-practice-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 20px; margin-bottom: 24px; border: 1px solid #ead8a7; border-radius: 14px; background: #fff6df; color: var(--green-dark); }
.demo-practice-card > div { flex: 1 1 280px; }
.demo-practice-card p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }
@media(max-width:600px) { .topbar { flex-wrap: wrap; } .demo-practice-card .demo-portal-link { width: 100%; } }
@media print { .demo-practice-card { display: none; } }

.portal { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 25px 20px 22px; display: flex; flex-direction: column; color: #f7f4eb; background: var(--green-dark); }
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.dashboard-brand-button { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; border-radius: 12px; }
.dashboard-brand-button:hover { background: rgba(255,255,255,.07); }
.dashboard-brand-button:focus-visible { outline: 3px solid rgba(241,201,91,.45); outline-offset: 4px; }
.brand-lockup strong, .brand-lockup small { display: block; }
.brand-lockup strong { font: 700 17px Georgia, serif; }
.brand-lockup small { margin-top: 3px; color: #b5cec7; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.school-location { margin: 20px 0 15px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: #c8d8e2; background: rgba(255,255,255,.07); font-size: 12px; line-height: 1.5; }
.portal-nav { min-height: 0; padding-right: 3px; display: grid; gap: 13px; overflow-y: auto; scrollbar-width: thin; }
.nav-group { display: grid; gap: 5px; }
.nav-group > p { margin: 0 0 2px 12px; color: #93afbf; font-size: 9px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.mobile-view-navigation, .finance-mobile-navigation { display: none; }
.nav-button { width: 100%; padding: 0 13px; display: flex; align-items: center; gap: 11px; color: #d0dde5; background: transparent; text-align: left; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-button.active { color: var(--green-dark); background: var(--gold); }
.nav-icon { width: 24px; font-size: 16px; text-align: center; }
.sidebar-footer { margin-top: 16px; color: #a9bfcb; font: 13px/1.4 Georgia, serif; }
.sidebar-demo-menu { margin-top: auto; padding-top: 14px; flex-shrink: 0; }
.sidebar-demo-link { width: 100%; justify-content: flex-start; min-height: 46px; border: 1px solid rgba(241,201,91,.5); background: rgba(241,201,91,.1); color: #fff5d8; text-decoration: none; font-size: 14px; }
.sidebar-demo-link:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.main-area { min-width: 0; }
.topbar { min-height: 88px; padding: 17px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(24,49,44,.09); background: rgba(255,253,248,.78); backdrop-filter: blur(14px); }
.topbar h1 { margin: 0; font: 700 22px Georgia, serif; }
.user-area { display: flex; align-items: center; gap: 11px; }
.avatar { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #dceae4; font-weight: 800; }
.user-meta { min-width: 0; }
.user-meta strong, .user-meta small { display: block; max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta strong { font-size: 13px; }
.user-meta small { margin-top: 2px; color: #75807b; font-size: 11px; }
.text-button { min-height: 36px; padding: 0 12px; color: var(--green); background: var(--green-soft); }
.content { padding: 32px 34px 55px; }
.view { max-width: 1450px; margin: 0 auto; }
.page-heading { margin-bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.school-hub-view > .card, .portal-help > .card, .guardian-main > .card { margin-bottom: 20px; }
.school-hub-view details.card > summary, .portal-help details.card > summary, .guardian-main > details.card > summary { padding: 20px; cursor: pointer; font-size: 1rem; font-weight: 700; }
.school-calendar-list { display: grid; gap: 0; margin-top: 24px; }
.school-event { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 24px; padding: 24px 0; border-top: 1px solid var(--line, #dce4e0); }
.school-week { color: #123f36; background: #eef5f1; border-radius: 8px; padding: 10px; align-self: start; text-align: center; font-size: 1rem; font-weight: 700; }
.school-event h3 { font-size: 1.15rem; margin: 6px 0; }
.school-event-date { color: #795c18; font-weight: 700; font-size: 1rem; }
.school-pre { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; font-size: 1rem; }
.school-announcement { border-bottom: 1px solid var(--line, #dce4e0); }
.school-announcement > summary { padding: 20px 0; cursor: pointer; }
.school-announcement summary strong { font-size: 1.1rem; }
.school-announcement summary small { display: block; margin-top: 8px; color: var(--muted); font-size: .875rem; }
.school-announcement-body { padding: 0 0 24px; max-width: 850px; }
.school-hub-editor { margin-top: 24px; }
.guide-contents { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 12px 24px; font-size: 1rem; }
.guide-article { border-bottom: 1px solid var(--line, #dce4e0); padding: 18px 0; }
.guide-article summary { cursor: pointer; font-size: 1rem; }
.guide-article summary small { color: var(--muted); font-size: .875rem; margin-left: 16px; }
.guide-article > div { padding: 14px 0 4px; max-width: 850px; font-size: 1rem; line-height: 1.7; }
.guide-article li { margin-bottom: 10px; }
.school-hub-view [data-hub-notice]:empty { display: none; }
@media (max-width:600px) { .school-event { grid-template-columns: 75px minmax(0,1fr); gap: 12px; } .school-week { padding: 8px 4px; font-size: .9rem; } .guide-article summary small { display:block; margin:8px 0 0; } .guide-contents { grid-template-columns: 1fr; } }
.page-heading h1 { font-size: clamp(29px, 3vw, 39px); letter-spacing: -0.025em; }
.page-heading p:last-child { margin: 8px 0 0; color: var(--muted); }
.primary-button { padding: 0 17px; }
.secondary-button { padding: 0 15px; color: var(--green); background: var(--green-soft); }
.secondary-link { min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; border-radius: 12px; color: var(--green); background: var(--green-soft); font-weight: 750; text-decoration: none; }
.table-action { min-height: 34px; padding: 0 12px; border: 1px solid #a8c3bb; border-radius: 9px; color: var(--green); background: #f5faf7; font-weight: 750; }
.table-action:hover { border-color: var(--green); background: var(--green-soft); }

.notice { margin: 17px 34px 0; padding: 16px 18px; border-radius: 11px; font-size: 16px; line-height: 1.55; border-left: 5px solid currentColor; }
.notice.success { color: var(--success); background: #dceee5; }
.notice.error { color: #8d2929; background: #f7dede; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat, .card { border: 1px solid rgba(31,58,51,.09); border-radius: 17px; background: var(--paper); box-shadow: var(--shadow); }
.stat { min-height: 125px; padding: 22px; display: flex; align-items: center; gap: 15px; }
.stat-link { width: 100%; color: var(--ink); text-align: left; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.stat-link:hover { transform: translateY(-2px); border-color: rgba(20,91,78,.32); box-shadow: 0 14px 36px rgba(31,58,51,.13); }
.stat-link:focus-visible { outline: 3px solid rgba(60,130,117,.28); outline-offset: 2px; }
.stat-icon { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--green); background: var(--green-soft); font-size: 20px; }
.stat span, .stat strong, .stat small { display: block; }
.stat span { color: var(--muted); font-size: 12px; }
.stat strong { margin-top: 2px; font: 700 30px Georgia, serif; }
.stat small { margin-top: 3px; color: #89928e; }
.stat .stat-open { margin-top: 9px; color: var(--green); font-size: 11px; font-weight: 800; }
.dashboard-grid { margin-top: 18px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.85fr); gap: 18px; }
.overview-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
.workspace-groups { display: grid; gap: 17px; }
.workspace-groups section { display: grid; gap: 8px; }
.workspace-groups h3 { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.workspace-groups section > div { display: flex; flex-wrap: wrap; gap: 7px; }
.workspace-link { min-height: 38px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #d6e0e6; border-radius: 10px; color: var(--green-dark); background: #f5f9fb; font-size: 12px; font-weight: 750; text-align: left; }
.workspace-link:hover { border-color: #7ba3b8; background: var(--green-soft); }
.workspace-link span { width: 19px; color: var(--green); text-align: center; }
.card { overflow: hidden; }
.card-header { padding: 21px 22px 15px; }
.card-header h2 { font-size: 19px; }
.card-header p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.card-body { min-width: 0; padding: 0 22px 22px; }
.levels { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.level-row { padding: 10px 11px; display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; background: #f1f3ed; }
.level-row span { color: #586761; font-size: 12px; }
.level-row strong { color: var(--green); font-family: Georgia, serif; }

.split { display: grid; grid-template-columns: minmax(370px,.82fr) minmax(520px,1.18fr); gap: 18px; align-items: start; }
.split > *, .dashboard-grid > *, .settings-layout > *, .user-management-layout > *, .finance-layout > *, .finance-settings-layout > *, .family-invoice-layout > *, .family-admin-grid > *, .guardian-grid > *, .batch-billing-layout > * { min-width: 0; }
.form-grid { display: grid; gap: 14px; }
.two-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
.four-columns { grid-template-columns: repeat(4, minmax(0,1fr)); }
.field { display: grid; gap: 7px; min-width: 0; }
.field label { color: #384943; font-size: 12px; font-weight: 650; }
.required { color: var(--danger); }
.field input, .field select, .field textarea, .toolbar input, .toolbar select { width: 100%; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid #ccd6d0; border-radius: 9px; color: var(--ink); background: #fff; }
.field textarea { min-height: 82px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .toolbar input:focus, .toolbar select:focus { outline: 3px solid rgba(60,130,117,.16); border-color: #4c8a7d; }
.divider { margin: 19px 0 16px; border-top: 1px solid #e2e5de; }
.divider span { position: relative; top: -10px; padding-right: 10px; color: #78847f; background: var(--paper); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.form-actions { margin-top: 18px; display: flex; justify-content: flex-end; flex-wrap: wrap; }
.form-actions button { max-width: 100%; }
.table-wrap { width: 100%; min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 12px 10px; border-bottom: 1px solid #e5e8e2; text-align: left; vertical-align: middle; }
th { color: #64716b; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
td strong, td small { display: block; }
td small { margin-top: 3px; color: #86908c; }
.empty { height: 108px; color: var(--muted); text-align: center; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; }
.badge.good { color: #236849; background: #dcefe5; }
.badge.warn { color: #76580d; background: #ffefc5; }
.badge.alert { color: #913030; background: #f7dcdc; }
.badge.neutral { color: #55635e; background: #e7ebe9; }
.toolbar { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.toolbar input { max-width: 390px; }
.toolbar select { width: 180px; }
.full-card { margin-top: 18px; }
.register-only { display: grid; }

.review-overlay { position: fixed; inset: 0; z-index: 50; padding: 28px; display: grid; place-items: center; background: rgba(9, 31, 27, .58); backdrop-filter: blur(5px); }
.review-panel { width: min(900px, 100%); max-height: min(900px, calc(100vh - 56px)); padding: clamp(22px, 4vw, 34px); overflow-y: auto; border: 1px solid rgba(31,58,51,.12); border-radius: 22px; background: var(--paper); box-shadow: 0 28px 80px rgba(9,31,27,.28); }
.review-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.review-header h2 { margin: 0; font: 700 clamp(25px, 4vw, 34px) Georgia, serif; }
.close-button { width: 40px; height: 40px; flex: 0 0 auto; border: 0; border-radius: 50%; color: var(--green-dark); background: var(--green-soft); font-size: 26px; line-height: 1; }
.review-status { margin: 16px 0 21px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.detail-item { min-height: 74px; padding: 14px 15px; background: #fff; }
.detail-item span, .detail-item strong { display: block; }
.detail-item span, .application-notes span { color: #75817c; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.detail-item strong { margin-top: 6px; font-size: 13px; line-height: 1.45; }
.application-notes { margin-top: 14px; padding: 15px; border-radius: 12px; background: #f0f2ed; }
.application-notes p { margin: 7px 0 0; white-space: pre-wrap; font-size: 13px; line-height: 1.55; }
.application-notes small { display: block; margin-top: 8px; color: var(--muted); }
.decision-history { border-left: 4px solid var(--gold); }
.duplicate-warning { margin: 0 0 18px; padding: 15px; border: 1px solid #e6c86d; border-radius: 13px; color: #654d0a; background: #fff5cf; }
.duplicate-warning p { margin: 5px 0 8px; font-size: 13px; line-height: 1.5; }
.duplicate-warning ul { margin: 0; padding-left: 19px; font-size: 12px; line-height: 1.65; }
.edit-disclosure { margin-top: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.edit-disclosure summary { padding: 14px 16px; color: var(--green); font-size: 13px; font-weight: 800; cursor: pointer; }
.edit-form { padding: 2px 16px 17px; display: grid; gap: 14px; }
.review-form { margin-top: 22px; padding-top: 20px; display: grid; gap: 14px; border-top: 1px solid var(--line); }
.review-actions { display: flex; justify-content: flex-end; gap: 10px; }
.admission-action, .enrolled-box { margin-top: 20px; padding: 17px; border-radius: 14px; color: #185d44; background: #dcefe5; }
.admission-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admission-action p, .enrolled-box p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
.admission-action .primary-button { flex: 0 0 auto; }
.enrolment-checklist { margin-top: 20px; padding: 18px; display: grid; gap: 13px; border: 1px solid #b7d9ca; border-radius: 14px; color: #185d44; background: #eef8f2; }
.enrolment-checklist > div:first-child p { margin: 5px 0 0; color: #4f6f64; font-size: 13px; line-height: 1.5; }
.family-onboarding-note { margin: 0; padding: 12px 14px; border-left: 4px solid var(--gold); border-radius: 10px; color: #53655e; background: #fff7d9; font-size: 12px; line-height: 1.55; }
.family-onboarding-note strong { color: #654d0a; }
.family-onboarding-note span, .family-onboarding-note code { overflow-wrap: anywhere; }
.learner-service-toggle { min-height: 67px; }
.check-row { padding: 11px 12px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid #cde1d7; border-radius: 10px; background: #fff; font-size: 12px; line-height: 1.5; cursor: pointer; }
.check-row input { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green); }
.permission-note { margin: 20px 0 0; padding: 13px 15px; border-radius: 11px; color: #6b581a; background: #fff1c9; font-size: 13px; line-height: 1.5; }
.danger-zone { margin-top: 22px; padding: 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid #efc6c6; border-radius: 14px; color: #7f2929; background: #fff5f3; }
.danger-zone p { margin: 5px 0 0; color: #8c5555; font-size: 13px; line-height: 1.5; }
.danger-button { min-height: 42px; padding: 0 15px; flex: 0 0 auto; border: 0; border-radius: 11px; color: #fff; background: #a73333; font-weight: 750; }
.danger-button:hover { background: #842626; }
.danger-button:disabled { cursor: wait; opacity: .65; }

.section-heading h3 { margin: 0; font: 700 18px Georgia, serif; }
.section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.audit-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.audit-timeline { margin: 15px 0 0; padding: 0; display: grid; gap: 0; list-style: none; }
.audit-timeline li { position: relative; min-height: 55px; padding: 0 0 16px 27px; border-left: 2px solid #d9e5df; }
.audit-timeline li:last-child { min-height: auto; padding-bottom: 0; border-left-color: transparent; }
.audit-dot { position: absolute; top: 2px; left: -6px; width: 10px; height: 10px; border: 2px solid var(--paper); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px #9fc0b5; }
.audit-timeline strong, .audit-timeline small { display: block; }
.audit-timeline strong { font-size: 12px; line-height: 1.5; }
.audit-timeline small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.audit-empty { margin-top: 13px; padding: 15px; border-radius: 11px; color: var(--muted); background: #f1f3ed; font-size: 12px; }

.settings-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 18px; align-items: start; }
.settings-toggles { display: grid; gap: 10px; }
.setting-toggle { padding: 13px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.setting-toggle input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green); }
.setting-toggle span, .setting-toggle strong, .setting-toggle small { display: block; }
.setting-toggle strong { font-size: 13px; }
.setting-toggle small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.settings-meta { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.admissions-readiness { margin: 0 0 18px; padding: 18px 20px; display: grid; grid-template-columns: minmax(260px,1.15fr) minmax(320px,1fr) auto; align-items: center; gap: 20px; border: 1px solid #a8cdbd; border-left: 5px solid #28795d; border-radius: 15px; background: #eff8f3; }
.admissions-readiness.is-closed { border-color: #e2c296; border-left-color: #bc7624; background: #fff7ea; }
.admissions-readiness h2 { margin: 3px 0 5px; font: 700 21px Georgia, serif; }
.admissions-readiness p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.admissions-readiness dl { margin: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.admissions-readiness dl div { min-width: 0; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.75); }
.admissions-readiness dt { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admissions-readiness dd { margin: 4px 0 0; color: var(--green-dark); font-size: 12px; font-weight: 750; overflow-wrap: anywhere; }
.admissions-readiness a { color: var(--green); text-decoration: none; }
.admissions-readiness-actions { display: grid; gap: 8px; }
.admissions-date-grid { margin-top: 3px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #f7f8f3; }
.available-levels { min-width: 0; margin: 3px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.available-levels legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia, serif; }
.available-levels > p { margin: 0 0 10px; color: var(--muted); font-size: 11px; }
.available-levels > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.available-levels label { padding: 8px 9px; display: flex; align-items: center; gap: 8px; border-radius: 9px; background: #f4f6f1; font-size: 11px; font-weight: 700; }
.available-levels input { width: 17px; height: 17px; accent-color: var(--green); }
.settings-divider { margin-top: 4px; padding: 13px 2px 3px; display: grid; gap: 3px; border-top: 1px solid var(--line); }
.settings-divider strong { font-size: 13px; }
.settings-divider span { color: var(--muted); font-size: 11px; }
.application-status-summary { margin: 0 0 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.application-status-card { min-width: 0; padding: 14px 15px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: #fff; cursor: pointer; }
.application-status-card:hover, .application-status-card.active { border-color: #76aa94; background: #eef7f2; }
.application-status-card span, .application-status-card small { color: var(--muted); font-size: 10px; }
.application-status-card strong { font: 700 25px Georgia, serif; }
.application-register-header { align-items: flex-start; }
.application-filter-form { max-width: 650px; display: grid; grid-template-columns: minmax(180px,1fr) minmax(130px,.65fr) auto auto; gap: 8px; }
.application-filter-form input, .application-filter-form select { min-width: 0; min-height: 40px; padding: 8px 10px; border: 1px solid #ccd6d0; border-radius: 10px; background: #fff; }
.academic-settings-layout { grid-template-columns: minmax(280px, .7fr) minmax(520px, 1.3fr); }
.academic-settings-layout > .full-card { grid-column: 1 / -1; }
.term-list { display: grid; gap: 12px; }
.term-card { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.term-card legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia, serif; }
.cohort-table-input { width: 100%; min-width: 130px; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 9px; color: var(--ink); background: #fff; }
.cohort-remove-check { display: inline-flex; align-items: center; gap: 7px; color: #8d2929; font-size: 11px; font-weight: 750; }
.cohort-remove-check input { width: 17px; height: 17px; accent-color: #a63c36; }
.new-cohort-row { margin: 0; padding: 15px; border: 1px dashed #adc4ba; border-radius: 12px; background: #f5f8f4; }
.new-cohort-row legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia, serif; }
.cohort-add-grid { grid-template-columns: .75fr 1.1fr 1.15fr; }

.application-child-card { position: relative; min-width: 0; margin: 0 0 17px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f7f8f3; }
.application-child-card legend { padding: 0 8px; color: var(--green-dark); font: 700 15px Georgia, serif; }
.application-services { min-width: 0; margin: 16px 0 0; padding: 15px; border: 1px solid #ccd9d2; border-radius: 12px; background: #fff; }
.application-services legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia, serif; }
.application-services > p { margin: 0 0 11px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.application-service-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }
.application-service-option { min-width: 0; padding: 11px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line); border-radius: 10px; background: #f7f8f3; cursor: pointer; }
.application-service-option input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green); }
.application-service-option span, .application-service-option strong, .application-service-option small { min-width: 0; display: block; }
.application-service-option strong { color: var(--green-dark); font-size: 12px; }
.application-service-option small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.service-placement-note { min-height: 67px; padding: 12px 14px; display: grid; align-content: center; gap: 4px; border: 1px solid #b7d9ca; border-radius: 11px; background: #eef8f2; }
.service-placement-note strong, .service-placement-note small { display: block; }
.service-placement-note small { color: var(--muted); line-height: 1.45; }
.additional-application-children { display: grid; gap: 4px; }
.child-remove { position: absolute; top: 10px; right: 12px; }
.add-child-row { margin: 4px 0 20px; padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px dashed #adc4ba; border-radius: 12px; background: #f1f6f2; }
.add-child-row p, .add-child-row small { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

.user-management-layout { grid-template-columns: minmax(330px, .72fr) minmax(620px, 1.28fr); }
.permission-guide { padding: 13px; display: grid; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #f3f5f0; }
.permission-guide div { display: grid; gap: 3px; }
.permission-guide strong { color: var(--green); font-size: 12px; }
.permission-guide span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.inline-role-select { width: 100%; min-width: 170px; min-height: 37px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 9px; color: var(--ink); background: #fff; }
.row-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.owner-lock { padding: 7px 10px; border-radius: 999px; color: #735c18; background: #fff0bf; font-size: 11px; font-weight: 800; }
.danger-link { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: #8d2929; background: #fae4e2; font-size: 12px; font-weight: 750; }
.danger-link:hover { background: #f3cdca; }

.finance-tabs { margin: -5px 0 20px; padding: 5px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
.finance-tab { min-height: 40px; padding: 0 15px; flex: 0 0 auto; border: 0; border-radius: 10px; color: #66736d; background: transparent; font-size: 12px; font-weight: 800; }
.finance-tab.active { color: #fff; background: var(--green); box-shadow: 0 6px 14px rgba(20,91,78,.2); }
.finance-tab-panel { animation: finance-enter .16s ease-out; }
.employee-mobile-tabs { display: none; }
.employee-tabs { margin: -5px 0 20px; padding: 5px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
.employee-tab-panel { display: grid; gap: 18px; animation: finance-enter .16s ease-out; }
.employee-directory-layout { display: grid; grid-template-columns: minmax(390px,.82fr) minmax(620px,1.18fr); gap: 18px; align-items: start; }
.employee-payroll-setup, .employee-leave-forms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; align-items: start; }
.employee-leave-forms { grid-template-columns: repeat(3,minmax(0,1fr)); }
.employee-table { min-width: 820px; }
.payroll-table { min-width: 900px; }
.table-money { width: 115px; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 8px; }
.payroll-summary { margin-bottom: 16px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.payroll-summary > div { padding: 13px; display: grid; gap: 4px; border-radius: 11px; background: #eef3ef; }
.payroll-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.payroll-summary strong { color: var(--green-dark); font: 700 19px Georgia,serif; }
.compact-select { min-width: 280px; }
.payroll-workflow-actions { justify-content: flex-end; }
.finance-layout { grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr); }
.finance-settings-layout { grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr); }
.finance-charge-list { display: grid; gap: 9px; }
.finance-charge { padding: 12px; display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
.finance-charge[hidden] { display: none; }
.finance-charge > input { width: 18px; height: 18px; accent-color: var(--green); }
.finance-charge-copy { min-width: 0; overflow-wrap: anywhere; }
.finance-charge-copy strong, .finance-charge-copy small { display: block; }
.finance-charge-copy strong { color: var(--green-dark); font-size: 13px; }
.finance-charge-copy small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.finance-charge-inputs { grid-column: 2; min-width: 0; display: grid; grid-template-columns: minmax(72px,.6fr) minmax(100px,1fr); gap: 8px; align-items: end; }
.finance-charge-inputs > span { display: grid; gap: 4px; }
.finance-charge-inputs small { color: #718079; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.finance-charge-inputs input { width: 100%; min-width: 0; min-height: 36px; padding: 7px 8px; border: 1px solid #ccd6d0; border-radius: 8px; }
.charge-amount { min-width: 0; min-height: 36px; padding: 8px 9px; align-content: center; overflow-wrap: anywhere; border-radius: 8px; color: var(--green); background: var(--green-soft); font-size: 12px; font-weight: 800; }
.family-rule-note { padding: 13px 15px; display: grid; gap: 4px; border-left: 4px solid var(--gold); border-radius: 10px; background: #fff5cf; }
.family-rule-note strong { color: #654d0a; font-size: 12px; }
.family-rule-note span { color: #77601f; font-size: 11px; }
.field > small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.finance-export-actions { display: grid; gap: 10px; }
.finance-export-actions button { width: 100%; }
.family-invoice-layout { display: grid; grid-template-columns: minmax(480px,1.05fr) minmax(520px,.95fr); gap: 18px; align-items: start; }
.family-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; align-items: start; }
.family-members-billing { display: grid; gap: 15px; }
.family-member-bill { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f7f8f3; }
.family-member-bill legend { padding: 0 7px; color: var(--green); font: 700 14px Georgia, serif; }
.family-member-bill > p { margin: -2px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.finance-empty-note { padding: 20px; border: 1px dashed #b9c8c1; border-radius: 12px; color: var(--muted); background: #f7f8f3; font-size: 13px; line-height: 1.5; text-align: center; }
.family-learner-picker { display: grid; gap: 9px; }
.family-learner-option { padding: 12px; display: grid; grid-template-columns: 20px minmax(0,1fr) minmax(118px,.42fr); align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.family-learner-option > input { width: 18px; height: 18px; accent-color: var(--green); }
.family-learner-option span, .family-learner-option strong, .family-learner-option small { min-width: 0; display: block; }
.family-learner-option small { margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.family-position-select { width: 100%; min-width: 0; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 9px; color: var(--ink); background: #fff; }
.wallet-balance-banner { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-radius: 12px; color: #fff; background: var(--green); }
.wallet-balance-banner span { color: #c9ddd7; font-size: 11px; }
.wallet-balance-banner strong { font: 700 22px Georgia, serif; }
.guardian-fee-line { display: block; margin: 3px 0; font-size: 11px; line-height: 1.45; }
.batch-billing-layout { display: grid; grid-template-columns: minmax(440px,.78fr) minmax(580px,1.22fr); gap: 18px; align-items: start; }
.batch-billing-layout > .full-card { grid-column: 1 / -1; }
.batch-safeguard, .batch-preview-empty { padding: 15px; border: 1px dashed #adc4ba; border-radius: 12px; color: #52655e; background: #f1f6f2; }
.batch-safeguard strong, .batch-preview-empty strong { color: var(--green-dark); font-size: 12px; }
.batch-safeguard p, .batch-preview-empty p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; }
.batch-preview-result { display: grid; gap: 16px; }
.batch-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.batch-preview-header h3 { margin: 0; font: 700 20px Georgia, serif; }
.batch-preview-header p:last-child { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.batch-preview-header .primary-button { flex: 0 0 auto; }
.batch-preview-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.batch-preview-stats div { padding: 11px; border-radius: 10px; background: #eef3ef; }
.batch-preview-stats span, .batch-preview-stats strong { display: block; }
.batch-preview-stats span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.batch-preview-stats strong { margin-top: 4px; color: var(--green-dark); font: 700 17px Georgia, serif; }
.fee-pill { display: block; margin: 3px 0; font-size: 11px; line-height: 1.45; }
.batch-warning { color: #866516; }
.batch-exclusions { border: 1px solid #ead7a3; border-radius: 11px; background: #fffaf0; }
.batch-exclusions summary { padding: 11px 13px; color: #76580d; font-size: 12px; font-weight: 800; cursor: pointer; }
@keyframes finance-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.academic-mobile-tabs { display: none; }
.academic-tabs button { min-height: 40px; padding: 0 15px; flex: 0 0 auto; border: 0; border-radius: 10px; color: #66736d; background: transparent; font-size: 12px; font-weight: 800; }
.academic-tabs button.active { color: #fff; background: var(--green); box-shadow: 0 6px 14px rgba(20,91,78,.2); }
.academic-section { animation: finance-enter .16s ease-out; }
.academic-mark-sheet .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.academic-import-actions { margin-bottom: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.file-button { min-height: 40px; display: inline-flex; align-items: center; cursor: pointer; }
.file-button.disabled, button:disabled { cursor: not-allowed; opacity: .55; }
.marks-table { min-width: 850px; }
.marks-table .mark-score { width: 115px; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 8px; }
.marks-table .mark-comment { width: 100%; min-width: 190px; min-height: 38px; padding: 7px 9px; border: 1px solid #ccd6d0; border-radius: 8px; }
.marks-table .mark-absent { width: 18px; height: 18px; accent-color: var(--green); }
.academic-workflow-actions { gap: 9px; }
.academic-form-note { grid-column: 1 / -1; }
.academic-levels { margin: 0; padding: 13px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border: 1px solid var(--line); border-radius: 12px; }
.academic-levels legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia, serif; }
.academic-levels label { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; }
.academic-levels input { width: 17px; height: 17px; accent-color: var(--green); }
.compact-register { margin-top: 18px; }
.academic-assignment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.academic-assignment-grid .form-actions { grid-column: 1 / -1; }
.academic-release-list { display: grid; gap: 10px; }
.academic-release-card { padding: 13px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 12px; background: #f4f7f2; }
.academic-release-card strong, .academic-release-card small { display: block; }
.academic-release-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.release-learner-actions { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.guardian-academic { margin: 18px 0; display: grid; gap: 18px; }

.data-exchange-layout { display: grid; grid-template-columns: minmax(560px,1.25fr) minmax(300px,.75fr); gap: 18px; align-items: start; }
.data-exchange-layout > * { min-width: 0; }
.data-dataset-note { padding: 13px 14px; display: grid; gap: 4px; border-left: 4px solid var(--gold); border-radius: 10px; background: #fff7d9; }
.data-dataset-note strong { color: #654d0a; font-size: 13px; }
.data-dataset-note span { color: #776b46; font-size: 11px; line-height: 1.5; }
.data-action-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.data-action-grid > div { min-width: 0; padding: 15px; display: grid; align-content: start; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: #f5f7f2; }
.data-action-grid h3 { margin: 0; color: var(--green-dark); font: 700 16px Georgia, serif; }
.data-action-grid p { min-height: 48px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.data-action-grid button, .data-action-grid label { width: 100%; justify-content: center; text-align: center; }
.safeguard-list { display: grid; gap: 10px; }
.safeguard-list div { padding: 12px 13px; display: grid; gap: 4px; border-radius: 11px; background: #eef3ef; }
.safeguard-list strong { color: var(--green); font-size: 12px; }
.safeguard-list span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.data-preview-card { border-color: #b7d9ca; }
.data-preview-card .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.data-preview-stats { margin-bottom: 16px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.data-preview-stats div { padding: 13px; border-radius: 11px; background: #eef3ef; }
.data-preview-stats strong, .data-preview-stats span { display: block; }
.data-preview-stats strong { color: var(--green-dark); font: 700 22px Georgia, serif; }
.data-preview-stats span { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.mobile-section-selector { display: none; }
.communication-tabs { margin: -4px 0 20px; padding: 6px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: #e9ece6; }
.communication-tabs button { min-height: 40px; padding: 0 15px; flex: 0 0 auto; border: 0; border-radius: 9px; color: #66736d; background: transparent; font-size: 12px; font-weight: 800; }
.communication-tabs button.active { color: #fff; background: var(--green); box-shadow: 0 6px 14px rgba(20,91,78,.2); }
.communication-compose-grid { display: grid; grid-template-columns: minmax(560px,1.3fr) minmax(280px,.7fr); gap: 18px; align-items: start; }
.communication-guidance { display: grid; gap: 12px; }
.communication-guidance p { margin: 0; padding: 13px; border-radius: 11px; color: var(--muted); background: #eef3ef; font-size: 12px; line-height: 1.55; }
.channel-options { margin: 0; padding: 13px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; border: 1px solid var(--line); border-radius: 12px; }
.channel-options legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia,serif; }
.channel-options label { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.channel-options input { width: 17px; height: 17px; accent-color: var(--green); }
.communication-message-list { display: grid; gap: 12px; }
.communication-message { padding: 17px 18px; border: 1px solid var(--line); border-left: 5px solid #8aa198; border-radius: 13px; background: #fff; }
.communication-message.priority-important { border-left-color: var(--gold); background: #fffdf5; }
.communication-message.priority-urgent { border-left-color: #bd4b45; background: #fff8f7; }
.communication-message h3 { margin: 8px 0 7px; color: var(--green-dark); font: 700 18px Georgia,serif; }
.communication-message p { margin: 0; color: #43564e; white-space: pre-wrap; line-height: 1.6; }
.communication-message-meta, .communication-message-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.communication-message-meta span { padding: 3px 7px; border-radius: 999px; color: #52665e; background: #edf2ef; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.communication-message-footer { margin-top: 13px; justify-content: space-between; }
.communication-template-list { display: grid; gap: 8px; }
.communication-template-list button { padding: 12px 13px; display: grid; gap: 3px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: #fff; text-align: left; }
.communication-template-list button:hover { border-color: var(--green); background: #f4f8f5; }
.communication-template-list span, .communication-template-list small { color: var(--muted); }
.provider-note { margin-bottom: 15px; padding: 13px 14px; border-left: 4px solid var(--gold); border-radius: 10px; color: #6e5c29; background: #fff8df; font-size: 12px; }
.custom-report-builder { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.custom-report-fields { margin: 14px 0; padding: 13px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; border: 1px solid var(--line); border-radius: 12px; }
.custom-report-fields legend { padding: 0 7px; color: var(--green); font: 700 13px Georgia,serif; }
.custom-report-fields label { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.custom-report-fields input { width: 17px; height: 17px; accent-color: var(--green); }

.report-controls { display: grid; grid-template-columns: 1.1fr 1fr 1fr .85fr .85fr; gap: 12px; }
.report-actions { margin-top: 17px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.report-loading { min-height: 150px; display: grid; place-items: center; color: var(--muted); }
.report-actions button:disabled { cursor: not-allowed; opacity: .55; }

.public-header { padding: 19px clamp(20px, 6vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #fff; background: var(--green-dark); }
.public-header .brand-lockup { color: #fff; }
.public-header a { color: var(--gold); font-weight: 750; text-decoration: none; }
.public-links, .auth-links { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.auth-links { margin-top: 17px; justify-content: center; }
.auth-links .help-link { margin: 0; }
.public-main { width: min(1050px, calc(100% - 36px)); margin: 0 auto; padding: 50px 0 70px; }
.public-intro { max-width: 760px; margin-bottom: 28px; }
.public-intro h1 { margin: 0; font: 700 clamp(35px, 6vw, 56px)/1 Georgia, serif; letter-spacing: -0.035em; }
.public-intro p { color: var(--muted); font-size: 17px; line-height: 1.6; }
.public-intake { margin-top: 16px; padding: 12px 14px; display: flex; align-items: center; gap: 7px 18px; flex-wrap: wrap; border: 1px solid #cbdcd4; border-radius: 12px; background: rgba(255,255,255,.72); }
.public-intake strong { color: var(--green-dark); font-size: 13px; }
.public-intake span { color: var(--muted); font-size: 11px; }
.application-steps { margin-top: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.application-steps span { min-height: 38px; padding: 7px 12px 7px 8px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d9e1e5; border-radius: 999px; color: #50616d; background: rgba(255,255,255,.72); font-size: 12px; font-weight: 750; }
.application-steps b { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--gold); font-size: 11px; }
.public-card { padding: clamp(22px, 4vw, 38px); }
.academy-footer { padding: 27px clamp(20px,6vw,72px); display: flex; justify-content: space-between; gap: 24px; color: #d8e2e8; background: var(--green-dark); font-size: 12px; line-height: 1.6; }
.academy-footer div { display: flex; gap: 7px 18px; flex-wrap: wrap; }
.academy-footer div:first-child { display: grid; gap: 1px; }
.academy-footer strong { color: #fff; font-family: Georgia, serif; font-size: 15px; }
.academy-footer a { color: var(--gold); text-decoration: none; }
.success-box { padding: 28px; border-radius: 16px; color: #185d44; background: #dcefe5; }
.success-box h2 { margin: 0 0 8px; font-family: Georgia, serif; }
.success-box p { margin: 0; line-height: 1.6; }
.success-box p + p { margin-top: 10px; }
.application-document-note { margin: 16px 0; padding: 15px; border: 1px solid #d5dfd8; border-radius: 12px; background: #f5f8f4; }
.application-document-note strong { color: var(--green-dark); font: 700 14px Georgia, serif; }
.application-document-note p, .application-document-note li { color: var(--muted); font-size: 11px; line-height: 1.5; }
.application-document-note p { margin: 5px 0 7px; }
.application-document-note ul { margin: 0; padding-left: 19px; }

.guardian-shell { min-height: 100vh; background: radial-gradient(circle at 88% 8%, rgba(241,201,91,.22), transparent 26rem), var(--canvas); }
.guardian-header { min-height: 86px; padding: 15px clamp(18px,4vw,54px); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(24,49,44,.1); color: #fff; background: var(--green-dark); }
.guardian-header .brand-lockup { color: #fff; }
.guardian-header .text-button { color: var(--green-dark); background: var(--gold); }
.guardian-header .user-meta small { color: #b5cec7; }
.guardian-main { width: min(1450px, calc(100% - 44px)); margin: 0 auto; padding: 38px 0 65px; }
.guardian-grid { margin: 18px 0; display: grid; grid-template-columns: minmax(320px,.72fr) minmax(560px,1.28fr); gap: 18px; }
.guardian-learners { display: grid; gap: 10px; }
.guardian-learner { padding: 13px 14px; display: grid; gap: 3px; border-radius: 11px; background: #f1f4ee; }
.guardian-learner span { color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.guardian-learner small { color: var(--muted); }
.guardian-help { margin: 18px 0 0; color: var(--muted); font-size: 12px; text-align: center; }
.guardian-help a { color: var(--green); font-weight: 750; }

@media (max-width: 1320px) {
  .split, .dashboard-grid, .settings-layout, .user-management-layout, .finance-layout, .finance-settings-layout, .family-invoice-layout, .family-admin-grid, .guardian-grid, .batch-billing-layout, .data-exchange-layout, .employee-directory-layout, .employee-payroll-setup, .employee-leave-forms, .communication-compose-grid { grid-template-columns: 1fr; }
  .data-exchange-layout { grid-template-columns: 1fr; }
  .batch-billing-layout > .full-card { grid-column: auto; }
  .report-controls { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .academic-settings-layout > .full-card { grid-column: auto; }
  .admissions-readiness { grid-template-columns: 1fr; }
  .admissions-readiness-actions { display: flex; flex-wrap: wrap; }
}

@media (max-width: 1120px) {
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .four-columns { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 780px) {
  .sign-in-screen { grid-template-columns: 1fr; }
  .sign-in-brand { min-height: 48vh; padding: 34px 25px; }
  .sign-in-brand h1 { font-size: 44px; }
  .sign-in-panel { padding: 30px 18px 50px; }
  .portal { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 20; height: auto; padding: 13px 16px 15px; box-shadow: 0 8px 24px rgba(8,47,73,.16); }
  .school-location, .sidebar-footer { display: none; }
  .portal-nav { display: none; }
  .mobile-view-navigation { margin-top: 10px; display: grid; }
  .mobile-view-navigation label { color: #d3e0e7; }
  .mobile-view-navigation select { min-height: 48px; border-color: rgba(255,255,255,.28); color: var(--green-dark); background: var(--paper); font-weight: 800; }
  .nav-button { width: auto; min-width: 122px; justify-content: center; }
  .nav-icon { display: none; }
  .sidebar-demo-menu { padding-top: 8px; }
  .sidebar-demo-link { width: 100%; justify-content: flex-start; }
  .topbar { min-height: 75px; padding: 14px 18px; }
  .user-meta { display: none; }
  .content { padding: 25px 18px 45px; }
  .notice { margin: 14px 18px 0; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .page-heading > a, .page-heading > button { width: 100%; justify-content: center; }
  .stats, .two-columns, .four-columns { grid-template-columns: 1fr; }
  .levels { grid-template-columns: 1fr 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar input, .toolbar select { width: 100%; max-width: none; }
  .public-header { padding: 16px 18px; }
  .public-header .brand-lockup small { display: none; }
  .public-header { align-items: stretch; flex-direction: column; }
  .public-links { justify-content: space-between; }
  .public-main { width: min(100% - 28px,1050px); padding: 34px 0 46px; }
  .public-intro { margin-bottom: 21px; }
  .public-intro p { font-size: 15px; }
  .application-steps { display: grid; grid-template-columns: 1fr; }
  .application-steps span { width: 100%; border-radius: 12px; }
  .academy-footer { align-items: flex-start; flex-direction: column; }
  .guardian-header { align-items: flex-start; }
  .guardian-main { width: min(100% - 28px, 1450px); padding-top: 26px; }
  .family-learner-option { grid-template-columns: 20px minmax(0,1fr); }
  .family-position-select { grid-column: 2; }
  .review-overlay { padding: 0; place-items: end center; }
  .review-panel { width: 100%; max-height: 94vh; border-radius: 22px 22px 0 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .admission-action { align-items: stretch; flex-direction: column; }
  .danger-zone { align-items: stretch; flex-direction: column; }
  .report-controls { grid-template-columns: 1fr; }
  .communication-tabs { display: none; }
  .mobile-section-selector { margin: -5px 0 20px; padding: 13px; display: grid; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
  .channel-options, .custom-report-fields { grid-template-columns: 1fr; }
  .report-actions { align-items: stretch; flex-direction: column; }
  .finance-charge { grid-template-columns: 20px 1fr; }
  .finance-charge-inputs { grid-column: 2; }
  .finance-tabs { display: none; }
  .employee-tabs { display: none; }
  .employee-mobile-tabs { margin: -5px 0 20px; padding: 13px; display: grid; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
  .payroll-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compact-select { width: 100%; min-width: 0; }
  .finance-mobile-navigation { margin: -5px 0 20px; padding: 13px; display: grid; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
  .academic-mobile-tabs { margin: -5px 0 20px; padding: 13px; display: grid; border: 1px solid var(--line); border-radius: 14px; background: #e9ece6; }
  .academic-import-actions { display: grid; }
  .academic-import-actions > * { width: 100%; justify-content: center; }
  .academic-mark-sheet .card-header, .academic-release-card { align-items: stretch; flex-direction: column; }
  .release-learner-actions { justify-content: flex-start; }
  .academic-assignment-grid, .academic-levels { grid-template-columns: 1fr; }
  .academic-assignment-grid .form-actions { grid-column: auto; }
  .application-service-options { grid-template-columns: 1fr; }
  .admissions-readiness dl, .application-status-summary, .available-levels > div { grid-template-columns: 1fr; }
  .admissions-readiness-actions { display: grid; }
  .admissions-readiness-actions > * { width: 100%; }
  .application-filter-form { width: 100%; grid-template-columns: 1fr; }
  .application-register-header { align-items: stretch; flex-direction: column; }
  .card-header { padding: 18px 17px 13px; }
  .card-body { padding: 0 17px 18px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .batch-preview-header { align-items: stretch; flex-direction: column; }
  .batch-preview-header .primary-button { width: 100%; }
  .batch-preview-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cohort-add-grid { grid-template-columns: 1fr; }
  .data-action-grid { grid-template-columns: 1fr; }
  .data-action-grid p { min-height: 0; }
  .data-preview-card .card-header { align-items: stretch; flex-direction: column; }
  .data-preview-stats { grid-template-columns: 1fr; }
  .add-child-row { align-items: stretch; flex-direction: column; }
  .add-child-row button { width: 100%; }
}

@media (max-width: 440px) {
  .stats, .levels { grid-template-columns: 1fr; }
  .motto { flex-direction: column; gap: 4px; }
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 19px; }
  .user-area { gap: 7px; }
  .text-button { padding: 0 10px; }
  .content { padding-inline: 14px; }
  .notice { margin-inline: 14px; }
  .application-child-card { padding: 15px 12px; }
  .finance-charge-inputs { grid-template-columns: 1fr; }
  .brand-logo-featured { width: 104px; height: 104px; }
  .sign-in-brand { min-height: 42vh; }
  .sign-in-brand h1 { margin-top: 21px; font-size: 39px; }
  .auth-card h2 { font-size: 29px; }
  .public-header .brand-logo-compact { width: 45px; height: 45px; }
}

@media print {
  body { background: #fff; }
  .sidebar, .topbar, .notice, .page-heading, .report-view > .card:not(.report-output) { display: none !important; }
  .portal { display: block; }
  .content { padding: 0; }
  .view { max-width: none; }
  .report-output { margin: 0; border: 0; box-shadow: none; }
  .report-output .card-body { padding: 0; overflow: visible; }
  table { font-size: 10px; }
  th, td { padding: 7px 6px; }
}
.preset-permission-grid,.user-access-list,.custom-group-list{display:grid;gap:12px}.permission-disclosure,.user-access-card{border:1px solid #d9e1e4;border-radius:12px;background:#fff}.permission-disclosure>summary,.user-access-card>summary{display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;padding:14px 16px}.permission-disclosure>summary span,.user-access-card>summary small{color:#66777e;font-size:.82rem}.permission-matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}.permission-matrix fieldset{border:1px solid #dfe6e8;border-radius:10px;padding:10px}.permission-matrix legend{font-weight:700;color:#003b55;padding:0 6px}.permission-option{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:.88rem}.permission-summary{display:grid;gap:8px;padding:14px 16px}.permission-summary div{display:grid;gap:3px}.permission-summary span{color:#596b72;font-size:.84rem;line-height:1.45}.user-access-card>summary>span{display:grid;gap:3px}.user-permission-editor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px;border-top:1px solid #e4eaec}.user-permission-editor>.permission-disclosure,.user-permission-editor>.row-actions,.user-permission-editor>div:last-of-type{grid-column:1/-1}.custom-group-list{margin-top:18px}.custom-group-list h3{margin:0}.full-card{grid-column:1/-1}@media(max-width:760px){.permission-matrix,.user-permission-editor{grid-template-columns:1fr}.permission-disclosure>summary,.user-access-card>summary{align-items:flex-start;flex-direction:column}}
/* Optional service requests, shared by guardian and staff finance views. */
.cycle-section { display: grid; gap: 20px; }
.cycle-section [hidden] { display: none !important; }
.cycle-list { display: grid; gap: 16px; }
.cycle-evidence { border-left: 3px solid var(--gold); padding: 12px 16px; margin: 14px 0; background: var(--green-soft); }
.cycle-preview { padding: 18px; background: #f7fafc; border: 1px solid #d6e2e8; border-radius: 12px; }
.cycle-section [role="status"]:empty { display: none; }
.cycle-section [role="status"] { color: var(--green-dark); font-weight: 600; }
.cycle-section [role="alert"] { color: #8d321c; }
.cycle-section small { display: block; }
#admission-intake-rows, #cohort-fee-rules { display: grid; gap: 16px; }
#application-intake { margin-bottom: 14px; }
.service-section { margin-bottom: 24px; }
.service-section [hidden] { display: none !important; }
.service-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.service-heading > div { min-width: 0; }
.service-heading h3, .service-heading h4, .service-heading p { margin: 0 0 6px; }
.service-compose { padding: 18px; border: 1px solid #d5dfd8; border-radius: 12px; background: #fafcf9; }
.service-compose summary, .service-decision summary { cursor: pointer; font-weight: 650; color: var(--green-dark); }
.service-compose form, .service-decision form { margin-top: 18px; }
.service-period-help { margin: 0; color: #526459; font-size: 13px; }
.service-check { display: flex; align-items: center; gap: 10px; }
.service-check input { width: 18px; height: 18px; }
.service-quote { padding: 16px; border-left: 4px solid #ac842f; background: #f7f0dc; border-radius: 6px; overflow-wrap: anywhere; }
.service-quote p { margin: 8px 0; }
.service-history-heading { margin: 26px 0 16px; align-items: center; }
.service-history-heading .field { min-width: 150px; }
.service-request-list { display: grid; gap: 14px; }
.service-request-card { border: 1px solid #dce4dd; border-radius: 12px; padding: 18px; min-width: 0; }
.service-request-card h4 { font-size: 16px; }
.service-request-card small, .service-request-card .service-period { color: #526459; }
.service-request-card p { margin: 8px 0; }
.service-period, .service-notes { overflow-wrap: anywhere; white-space: pre-wrap; }
.service-status { white-space: nowrap; border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 650; background: #eef1ed; }
.service-status.status-pending { background: #fcf0cf; color: #735400; }
.service-status.status-approved { background: #dfefe2; color: #174c36; }
.service-status.status-rejected { background: #fbe4dd; color: #85351b; }
.service-decision { margin-top: 14px; border-top: 1px solid #e3e8e2; padding-top: 12px; }
.service-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.service-section [role="status"]:empty { display: none; }
.service-section [role="status"] { color: #174c36; font-weight: 550; }
@media (max-width: 640px) {
  .service-heading { flex-wrap: wrap; }
  .service-compose, .service-request-card { padding: 14px; }
  .service-actions > button { width: 100%; }
}

.employee-extra-fields { margin: 8px 0; padding: 18px; min-width: 0; border: 1px solid var(--line, #d9e1e5); border-radius: 8px; }
.employee-extra-fields legend, .employee-field-definition legend { color: var(--navy, #003b55); font-weight: 700; padding: 0 6px; }
.employee-extra-fields > p { margin: 0 0 14px; font-size: .875rem; color: #536871; }
.employee-field-definition { padding: 18px; min-width: 0; border: 1px solid #d9e1e5; border-radius: 8px; margin: 0 0 18px; }
.employee-field-definition > .field { margin: 14px 0; }
.employee-field-definition > small { display: block; font-size: .875rem; color: #536871; margin-top: 10px; }
.employee-archived { margin-top: 16px; }
.employee-archived dt { font-weight: 600; }
.employee-archived dd { margin: 4px 0 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
#employee-form-setup { max-width: 900px; }
#employee-form-setup h3 { margin: 10px 0 0; }
/* Staff access follows the portal's existing navy and gold controls. */
.staff-access-review { display: grid; gap: 1.25rem; }
.access-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1rem; }
.access-metrics > div { display: grid; gap: .4rem; padding: 1.2rem; background: white; border: 1px solid #dce3e8; border-top: 3px solid #003b55; border-radius: .6rem; }
.access-metrics strong { font-size: 1.8rem; color: #003b55; }
.access-metrics span { font-size: 1rem; }
.access-metrics .access-attention { border-top-color: #bb6b00; }
.access-status { display: inline-block; padding: .25rem .55rem; border: 1px solid #c8d5de; border-radius: .3rem; font-size: .875rem; background: #f3f7fa; color: #003b55; }
.access-review-body { display: grid; gap: 1rem; padding: 1.2rem; min-width: 0; }
.access-review-body p { margin: 0; overflow-wrap: anywhere; }
.access-facts { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 1rem; margin: 0; }
.access-facts dt { font-size: .875rem; font-weight: 600; color: #506472; }
.access-facts dd { margin: .4rem 0 0; overflow-wrap: anywhere; }
.access-flags,.access-departure { padding: .9rem; background: #fff6de; border-left: 3px solid #b88200; color: #503c0b; }
.access-departure { display: grid; gap: .7rem; }
.access-pending { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .7rem 0; }
.welcome-status { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .875rem; }
.welcome-status small { flex-basis: 100%; }
.access-mail-history { display: grid; gap: .8rem; margin-top: .8rem; }
.access-mail-history > div { padding: .8rem; background: #f4f7f9; border-radius: .4rem; }
.access-review-body label { display: grid; gap: .4rem; font-size: 1rem; }
.access-permissions { font-size: .875rem; line-height: 1.7; padding-top: .5rem; }
@media (max-width: 640px) { .access-review-body { padding: .9rem; } .access-metrics,.access-facts { grid-template-columns: 1fr; } .staff-access-review .section-heading { flex-wrap: wrap; gap: .75rem; } }

/* Payroll detail forms and private payslip review. */
.payroll-person { border:1px solid var(--line); border-radius:12px; margin:14px 0; overflow:hidden; }
.payroll-person > summary { cursor:pointer; padding:16px; display:flex; justify-content:space-between; gap:16px; background:#f5f6f2; }
.payroll-person small,.payroll-deliveries small { display:block; font-size:12px; margin-top:4px; }
.payroll-person-body { padding:18px; }
.payroll-breakdown { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin:0 0 20px; }
.payroll-breakdown dt { font-size:12px; color:var(--muted); }
.payroll-breakdown dd { margin:5px 0; font-weight:700; }
.payroll-deduction { display:grid; grid-template-columns:1fr 1.4fr .8fr 1.5fr auto; gap:10px; align-items:end; border:1px solid var(--line); padding:14px; border-radius:10px; margin:10px 0; }
.payroll-exceptions,.payroll-rules { margin:20px 0; }
.payroll-exceptions summary,.payroll-rules > summary { cursor:pointer; padding:16px; font-weight:700; }
.payroll-exceptions { background:#f5f6f2; padding:4px 12px 16px; border-radius:10px; }
.payroll-rate-band { display:grid; grid-template-columns:1fr 1fr auto; align-items:end; gap:12px; margin:12px 0; }
.payroll-share { margin:18px 0; padding:20px; border:2px solid #bb932e; border-radius:12px; }
.payroll-share pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; line-height:1.6; max-height:380px; overflow:auto; padding:16px; background:#f5f6f2; }
.payroll-deliveries { padding-left:18px; }
.payroll-deliveries li { margin:12px 0; overflow-wrap:anywhere; }
@media(max-width:780px) { .employee-tabs.staff-access-tabs { display:flex; } .payroll-deduction { grid-template-columns:1fr; } .payroll-rate-band { grid-template-columns:1fr 1fr; } .payroll-person > summary { flex-wrap:wrap; } .payroll-person-body,.payroll-share { padding:12px; } }

.owner-preview-stage{width:100%;overflow:auto;background:#e7edf0;padding:16px;border-radius:16px;margin-top:20px}
.owner-preview-stage iframe{display:block;max-width:100%;min-height:780px;height:80vh;border:1px solid #cad7dc;border-radius:12px;background:#fff;margin:0 auto}
.owner-preview-view [hidden]{display:none!important}
@media(max-width:600px){.owner-preview-stage{padding:4px}.owner-preview-stage iframe{min-height:650px}}

/* Financial documents reuse the portal's card and form styles. */
.guardian-quick-links,.document-actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.guardian-quick-links{margin:1.5rem 0;padding:1rem;background:#eaf3f5;border-radius:12px}
.guardian-quick-links a{font-weight:700;color:#07516b;padding:.4rem}
.document-group{border-top:1px solid #dae4e5;padding:1rem 0}
.document-group summary{font-size:1rem;font-weight:700;cursor:pointer;padding:.5rem 0}
.document-group small,.document-delivery small{display:block;margin-top:.35rem}
.document-actions button{white-space:normal;text-align:left}
.document-compose{margin-top:1.5rem;padding:1.5rem;border:2px solid #0e6079;border-radius:14px;background:#f5fafb}
.document-delivery{padding:1rem 0;border-top:1px solid #e2e9eb;overflow-wrap:anywhere}
.financial-documents{scroll-margin-top:2rem}.financial-documents .card-header{flex-wrap:wrap;gap:1rem}
@media(max-width:640px){.document-compose{padding:1rem}.guardian-quick-links{align-items:stretch;flex-direction:column}}
/* Account access shares the portal's existing school branding. */
.account-main{width:min(100% - 32px,760px);margin:40px auto}.account-form{display:grid;gap:16px;margin:22px 0}.account-form label{display:grid;gap:7px;font-weight:600}.account-form input,.account-form select{box-sizing:border-box;width:100%;min-height:48px;border:1px solid #cbd6d8;border-radius:10px;padding:12px;font:inherit}.account-form button{min-height:48px}.auth-divider{text-align:center;margin:20px 0;color:#65777d}.account-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.account-main h1{font-size:clamp(28px,5vw,40px)}.account-main h2{margin-top:30px}.account-main details{padding:16px 0;border-top:1px solid #dbe2e3}.account-main summary{cursor:pointer;font-weight:700}.account-main [role=status],.auth-card [role=status]{overflow-wrap:anywhere;color:#0b536a}.mfa-secret{display:block;word-break:break-all;font-size:20px;letter-spacing:2px;background:#f1f5f6;padding:16px}.applicant-account-note{margin:20px 0;padding:18px;background:#fff;border:1px solid #d9e2df;border-radius:12px}.applicant-account-note p{font-size:15px}.account-main .public-footer{gap:16px}.auth-card{max-width:520px}.user-area{flex-wrap:wrap}@media(max-width:600px){.account-main{margin:20px auto}.account-actions>*{flex:1 1 100%;text-align:center}.auth-links{flex-wrap:wrap}}

/* Payment evidence and the finance forms retain the school theme on narrow screens. */
[data-proof-fields] { min-width: 0; margin: 0; padding: 14px; display: grid; gap: 12px; border: 1px solid #ccd6d0; border-radius: 9px; }
[data-proof-fields] legend { padding: 0 6px; font-weight: 650; font-size: 14px; }
[data-proof-fields] input[type=file] { max-width: 100%; }
[data-proof-fields] p, [data-form-status] { overflow-wrap: anywhere; font-size: 14px; }
.finance-tab-panel .field > span, #guardian-payment-proof .field > span { font-size: 14px; }
.finance-tab-panel .card-body > p, #guardian-payment-proof .card-body > p { font-size: 16px; }
.finance-tab-panel { display: grid; gap: 18px; }

.assignment-options {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:18px 0;}
.assignment-options fieldset {border:1px solid #dbe3e8;border-radius:10px;padding:14px;}
.assignment-options legend {font-weight:700;}
.assignment-options label {display:flex;align-items:center;gap:9px;padding:7px 0;font-size:14px;}
.assignment-options input {width:18px;height:18px;}

.responsibility-panel {display:grid;gap:24px;}
.responsibility-panel .card {min-width:0;}
.responsibility-panel .card-body {display:grid;gap:18px;}
.responsibility-panel .card-body p {margin:0;line-height:1.55;}
.responsibility-panel .assignment-options {grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin:0;}
.responsibility-panel .assignment-options fieldset {display:grid;gap:8px;min-width:0;padding:16px;border:1px solid #b8cad1;}
.responsibility-panel .assignment-options legend {padding:0 6px;font-size:16px;}
.responsibility-panel .assignment-options label {display:flex;gap:12px;padding:12px;border:1px solid #d7e2e6;border-radius:8px;background:#f5f9fb;font-size:16px;line-height:1.4;cursor:pointer;}
.responsibility-panel .assignment-options label:has(input:checked) {border-color:#075772;background:#e3f1f6;color:#073c54;}
.responsibility-panel .assignment-options input {flex:0 0 20px;width:20px;height:20px;margin:0;accent-color:#075772;}
.responsibility-panel input:focus-visible,.responsibility-panel select:focus-visible,.responsibility-panel button:focus-visible {outline:3px solid #bd8b09;outline-offset:3px;}
.responsibility-panel .form-actions {display:flex;flex-wrap:wrap;gap:12px;}
.responsibility-panel button {min-height:44px;}
.responsibility-shortcuts {display:flex;gap:12px;flex-wrap:wrap;margin:0 0 24px;}
.responsibility-summary {padding:16px;border-left:4px solid #075772;background:#eef5f8;line-height:1.6;}
@media(max-width:760px){.responsibility-panel .assignment-options {grid-template-columns:minmax(0,1fr);}.responsibility-panel .form-actions>* {width:100%;}.responsibility-shortcuts>* {width:100%;text-align:center;}}

/* Payroll controls remain legible on narrow screens. */
.payroll-tool-tabs{display:flex!important;flex-wrap:wrap;gap:8px;margin-bottom:18px}.payroll-tool-tabs .finance-tab{font-size:14px;min-height:44px;padding:10px 14px;background:#fff;color:#003b55;border:1px solid #78929e}.payroll-tool-tabs .finance-tab.active{background:#003b55;color:#fff}.payroll-toggle-list{display:flex;flex-wrap:wrap;gap:20px}.payroll-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px}.payroll-toggle input{width:20px;height:20px;flex:0 0 20px}#payroll-payment,#payroll-enrolment{margin-top:24px;padding-top:20px;border-top:1px solid #bdcbd1}.payroll-tool-tabs+.card small{display:block}#payroll-wallet-create,#payroll-wallet-link{padding:18px;border:1px solid #bdcbd1;border-radius:8px}
/* Adjacent section navigation remains available when tab rows collapse on mobile. */
.section-navigation { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 0 20px; }
.section-navigation .secondary-button { min-height:44px; white-space:normal; text-align:left; max-width:100%; }
.section-navigation button:disabled { opacity:.45; cursor:default; }
.section-navigation button:focus-visible { outline:3px solid #b57900; outline-offset:3px; }

/* Promotion controls stay visible before focus, including Safari textareas. */
#discount-promotions { display: grid; gap: 18px; font-size: 16px; line-height: 1.55; }
#discount-promotions > *, #discount-promotions fieldset, #discount-promotions form { min-width: 0; }
#discount-promotions p { margin: 0; }
#discount-promotions [role="status"]:empty { display: none; }
#discount-promotions h3 { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
#discount-promotions fieldset { margin: 0; padding: 18px; border: 1px solid #bccbd4; border-radius: 10px; }
#discount-promotions legend { padding: 0 7px; font-size: 16px; font-weight: 700; color: var(--green-dark); }
#discount-promotions label { display: grid; gap: 8px; min-width: 0; color: var(--ink); font-size: 16px; font-weight: 600; }
#discount-promotions input:not([type="checkbox"]), #discount-promotions select, #discount-promotions textarea {
  display: block; width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px;
  border: 1px solid #899eac; border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-weight: 400;
}
#discount-promotions textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
#discount-promotions textarea::placeholder { color: #60717e; opacity: 1; }
#discount-promotions input:focus, #discount-promotions select:focus, #discount-promotions textarea:focus {
  outline: 3px solid rgba(11,85,120,.22); outline-offset: 2px; border-color: var(--green);
}
#discount-promotions .promotion-checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
#discount-promotions input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--green); }
#discount-promotions .promotion-full-width { grid-column: 1 / -1; }
#discount-promotions .promotion-policy-status { padding: 12px 16px; border-left: 4px solid var(--green); border-radius: 6px; background: var(--green-soft); }
#discount-promotions details { border: 1px solid #bccbd4; border-radius: 10px; padding: 16px; background: #f7fafc; }
#discount-promotions summary { cursor: pointer; color: var(--green-dark); font-size: 16px; font-weight: 700; }
#discount-promotions details[open] > summary { margin-bottom: 18px; }
#discount-promotions details > p { margin-top: 14px; }
#discount-promotions button { justify-self: start; max-width: 100%; white-space: normal; text-align: center; }
#discount-promotions button:focus-visible, #discount-promotions summary:focus-visible { outline: 3px solid #a87805; outline-offset: 3px; }
#discount-promotions :disabled { opacity: .65; cursor: not-allowed; }
#discount-promotions #promotion-preview { display: grid; gap: 18px; }
#discount-promotions td { overflow-wrap: anywhere; }
#discount-promotions td small { color: #536673; font-size: 14px; }
@media (max-width: 700px) {
  #discount-promotions .two-columns { grid-template-columns: 1fr; }
  #discount-promotions fieldset, #discount-promotions details { padding: 12px; }
  #discount-promotions button { width: 100%; }
}

/* Payroll controls respond to their card width, including desktop zoom and Safari. */
.employee-payroll-setup { grid-template-columns: repeat(auto-fit,minmax(min(100%,460px),1fr)); }
.employee-payroll-setup > .card,.payroll-deduction > *,.payroll-month-picker { min-width:0; }
.payroll-deduction { grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); align-items:start; }
.payroll-deduction .field { display:flex; flex-direction:column; gap:7px; }
.payroll-deduction .field > span { font-weight:650; font-size:13px; }
.payroll-deduction select,.employee-payroll-setup select { width:100%; min-height:42px; }
.payroll-deduction button { align-self:end; justify-self:start; }
.payroll-month-parts { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:8px; }
.payroll-quick-actions { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.payroll-employee-context { background:#eef3ef; padding:14px; border-radius:10px; }
.payroll-employee-context dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:12px 0 0; }
.payroll-employee-context dt { color:var(--muted); font-size:12px; }
.payroll-employee-context dd { margin:4px 0 0; overflow-wrap:anywhere; }
.payroll-save-status { color:#246047; font-weight:700; }
.payroll-save-status:empty { display:none; }
.payroll-compensation-register { margin-bottom:18px; }
#payroll-register { scroll-margin-top:24px; }
@media(max-width:600px){.employee-payroll-setup .two-columns {grid-template-columns:1fr;} .payroll-deduction {grid-template-columns:1fr;} }
#payroll-create-form > .two-columns { grid-template-columns:1fr; }
.payroll-month-parts { grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); }

[data-payroll-error]:empty { display:none; }

/* Fees review: full-width accounts and compact grouped navigation. */
.finance-groups{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.finance-groups button{padding:10px 18px;border:1px solid #cbd8df;background:#fff;color:#003b55;border-radius:8px;font-size:14px;font-weight:700}.finance-groups button[aria-current="true"]{background:#003b55;color:#fff}.finance-view .finance-tabs{flex-wrap:wrap;overflow:visible;background:#eef3f6}.finance-view .finance-tab{font-size:14px}.finance-view .finance-mobile-navigation{display:none}.fee-account-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.fee-account-search,.fee-account-filters .form-actions{grid-column:1/-1}.fee-account-totals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.fee-account-totals>div{padding:16px;background:#eef4f7;border-left:3px solid #d6a900}.fee-account-totals span,.fee-account-totals strong{display:block}.fee-account-totals span{font-size:14px}.fee-account-totals strong{font-size:20px;margin-top:8px;color:#003b55}.fee-account-table{min-width:1120px}.fee-account-table td,.fee-account-table th{font-size:14px;vertical-align:top}.fee-account-table small{display:block;font-size:12px;margin-top:5px;max-width:210px;overflow-wrap:anywhere}.fee-account-table details{max-width:230px;font-size:13px;margin-top:8px}.fee-account-group{padding:14px;border:1px solid #d1dde4;border-radius:8px;margin-top:12px}.fee-account-group>summary{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;cursor:pointer}.fee-account-group>summary span{font-size:14px}.needs-review{color:#93431b}.register-search{margin:0 0 14px;min-width:240px;max-width:580px}.register-search input{font-size:16px}.fee-review{min-width:0}.fee-review .card-body{min-width:0}.fee-review [hidden],.finance-view tr[hidden]{display:none!important}
@media(max-width:900px){.fee-account-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.fee-account-totals{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.finance-view .finance-mobile-navigation{display:flex}.finance-groups,.finance-view .finance-tabs{display:none}.fee-account-filters{grid-template-columns:1fr}.fee-account-totals strong{font-size:18px}}

/* Use the shared visible controls on correction and family-link forms. */
#family-corrections { display: grid; gap: 20px; font-size: 16px; line-height: 1.55; }
#family-corrections > *, #family-corrections form, #family-corrections fieldset { min-width: 0; }
#family-corrections [role="status"]:empty { display: none; }
#family-corrections p { margin: 0; }
#family-corrections section { display: grid; gap: 14px; min-width: 0; }
#family-corrections h3 { margin: 0; font-size: 18px; font-weight: 700; }
#family-corrections legend { font-family: inherit; font-size: 16px; font-weight: 700; }
#family-corrections label.field, .family-repair-form label.field { font-weight: 600; }
#family-corrections .field input, #family-corrections .field select, #family-corrections .field textarea,
.family-repair-form .field select { min-height: 46px; border-color: #899eac; font: inherit; font-weight: 400; }
#family-corrections textarea { min-height: 112px; }
#family-corrections .correction-full-width { grid-column: 1 / -1; }
#family-corrections button, .family-repair-form button { justify-self: start; max-width: 100%; white-space: normal; }
.family-repair-form + .family-repair-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 700px) {
  #family-corrections .two-columns { grid-template-columns: 1fr; }
  #family-corrections button, .family-repair-form button { width: 100%; }
}

/* Employee contract workspace */
.contract-workspace{min-width:0}.contract-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:14px 0}.contract-heading h2,.contract-heading h3{margin:0 0 6px}.contract-heading p{color:var(--muted,#66736f);margin:0}.contract-controls{border:0;padding:0;margin:0;min-width:0}.contract-editor-grid{display:grid;grid-template-columns:minmax(260px,.85fr) minmax(340px,1.15fr);gap:20px;align-items:start}.contract-workspace details{background:#fff;border:1px solid #dce5df;border-radius:9px;margin:10px 0;padding:14px}.contract-workspace summary{font-weight:650;cursor:pointer;padding:3px 0}.contract-workspace details .form-grid{margin-top:16px}.contract-workspace textarea{width:100%;resize:vertical;min-height:88px}.contract-workspace .field{display:flex;flex-direction:column;gap:7px;margin:10px 0;min-width:0}.contract-workspace input:not([type=checkbox]),.contract-workspace select,.contract-workspace textarea{font:inherit;border:1px solid #bbc9c1;border-radius:7px;padding:10px;background:#fff;color:#183c32;min-width:0;max-width:100%}.contract-workspace input[readonly]{background:#f1f5f2}.contract-workspace small{display:block;margin-top:5px;color:#63716b}.contract-workspace .form-grid.two-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.contract-workspace .form-actions,.contract-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.contract-actions{padding:12px;background:#edf3ef;border-radius:9px}.contract-check{display:flex;gap:9px;align-items:flex-start;margin:14px 0;line-height:1.5}.contract-check input{flex:0 0 auto;margin-top:5px;width:18px;height:18px}.contract-hash{overflow-wrap:anywhere;font-size:12px}.contract-preview p,.contract-guidance p{line-height:1.65}.contract-upload{margin:18px 0;border-bottom:1px solid #dce5df;padding-bottom:16px}.contract-workspace .notice{padding:12px;border-radius:8px;margin:12px 0;white-space:normal}.contract-workspace .notice.error{background:#fff0ed;color:#922b21}.contract-workspace .notice.success{background:#edf6ed;color:#24592c}.contract-workspace .table-wrap{overflow:auto}.contract-workspace .table-wrap table{width:100%}.contract-workspace button{white-space:normal}.contract-workspace .permission-note{padding:12px;background:#f5f1e5;border-radius:8px}
@media(max-width:950px){.contract-editor-grid{grid-template-columns:1fr}.contract-heading{align-items:flex-start}}@media(max-width:560px){.contract-workspace .form-grid.two-columns{grid-template-columns:1fr}.contract-heading{flex-direction:column}.contract-workspace .employee-tabs{flex-wrap:wrap}}
/* Contract drafting and signing: keep the real-employee action visible on samples. */
.contract-workspace .employee-tabs{flex-wrap:wrap;gap:8px}
.contract-signing-guide{margin:18px 0;padding:18px;border:1px solid #c8d9dd;border-radius:10px;background:#f2f8f8}
.contract-signing-guide h3{margin:0 0 10px}
.contract-signing-guide p{line-height:1.6}
#contract-signature-pad{display:block;width:100%;max-width:700px;height:auto;aspect-ratio:10/3;background:#fff;border:2px solid #64828c;border-radius:8px;touch-action:none;cursor:crosshair}
.contract-signing-guide .contract-check{margin:16px 0;align-items:flex-start}

/* Reviewed academic-year setup */
.year-fee-amount {min-width:10rem;gap:.4rem;display:grid;}
.year-fee-amount input {width:100%;padding:.65rem;border:1px solid #8caaa3;border-radius:.4rem;background:#fff;font-size:1rem;}
.year-fee-add {display:flex;align-items:end;gap:1rem;margin:1rem 0;flex-wrap:wrap;}
.year-fee-add .field {flex:1;min-width:min(100%,18rem);}
.year-warning {padding:.75rem 1rem;border-left:4px solid #bd761c;background:#fff7e8;color:#493519;}
.year-fee-review tr[hidden] {display:none;}
[data-school-date]::placeholder {color:#596b73;opacity:1;}
/* Consistent date entry with ISO values retained for forms and calendar pickers. */
.school-date-field{display:flex;position:relative;gap:6px;align-items:center;min-width:0;width:100%}
.school-date-field>input[data-date-display]{min-width:0;width:100%;flex:1}
.school-date-field>.school-date-source{position:absolute!important;width:1px!important;height:1px!important;opacity:0;padding:0!important;border:0!important;pointer-events:none;bottom:0;left:0}
.date-calendar-button{border:1px solid #b6c8ca;border-radius:6px;background:#f2f7f7;color:#173f45;min-height:40px;padding:7px 9px;font:inherit;font-size:12px;cursor:pointer}
.finance-workspace { display: grid; gap: 16px; min-width: 0; }
.finance-workspace > *, .finance-record-frame { min-width: 0; }
.finance-workspace [data-workspace-panel][hidden] { display: none !important; }
.finance-workspace-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.finance-workspace-tabs button { min-height: 44px; padding: 10px 16px; border: 1px solid #a8bfc3; border-radius: 9px; background: #fff; color: #173e45; font: inherit; font-weight: 650; cursor: pointer; }
.finance-workspace-tabs button[aria-selected="true"] { background: #173e45; color: #fff; }
.guardian-page-tabs button.active { background: #173e45; color: #fff; }
.guardians-view { min-width: 0; }
.guardian-directory-table th:nth-child(1) { width: 24%; }
.guardian-directory-table th:nth-child(2) { width: 22%; }
.guardian-directory-table th:nth-child(3) { width: 14%; }
.guardian-directory-table th:nth-child(4) { width: 40%; }
.guardian-page-tabs { margin-bottom: 20px; }
.identity-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.identity-comparison > div, .merge-review { padding: 16px; border: 1px solid #b4cec6; border-radius: 10px; background: #f3f8f5; overflow-wrap: anywhere; }
.guardian-employee-confirm { display: flex; align-items: flex-start; gap: 10px; }
.guardian-employee-confirm input { flex: 0 0 auto; margin-top: 4px; }
.feature-finder-trigger { white-space: nowrap; }
.feature-finder-dialog { width: min(760px,calc(100vw - 32px)); max-height: 85vh; overflow-y: auto; border: 1px solid #adcbc2; border-radius: 14px; padding: 22px; color: var(--ink); background: var(--paper); }
.feature-finder-dialog::backdrop { background: #001c3b88; }
.feature-finder-heading { display: flex; gap: 12px; justify-content: space-between; align-items: start; }
.feature-result { width: 100%; display: grid; gap: 6px; text-align: left; padding: 14px; margin: 8px 0; border: 1px solid #d1dfd8; border-radius: 9px; background: #fff; color: #173e45; cursor: pointer; font: inherit; overflow-wrap: anywhere; }
.feature-result small { color: var(--muted); }
.feature-result:focus-visible { outline: 3px solid #b98d24; outline-offset: 2px; }
@media(max-width:700px) { .identity-comparison { grid-template-columns: 1fr; } .feature-finder-trigger { min-height: 42px; padding: 8px 10px; } .feature-finder-dialog { padding: 16px; } }
.finance-workspace-tabs button:focus-visible { outline: 3px solid #b98d24; outline-offset: 2px; }
.finance-entry-panel { width: 100%; max-width: 960px; justify-self: center; }
.finance-record-frame { container-type: inline-size; container-name: finance-register; }
.finance-record-frame .register-search { min-width: 0; width: 100%; }
.finance-register-scroll { max-height: 65vh; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.finance-record-table { width: 100%; min-width: 0; table-layout: fixed; }
.finance-record-table th, .finance-record-table td { overflow-wrap: anywhere; white-space: normal; vertical-align: top; }
.finance-record-table th { position: sticky; top: 0; z-index: 1; background: #edf3f0; }
.finance-record-table .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.finance-record-table .table-action { white-space: normal; text-align: left; }
@container finance-register (max-width: 820px) {
  .finance-record-table, .finance-record-table tbody { display: block; }
  .finance-record-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .finance-record-table tr { display: grid; gap: 8px; padding: 14px; margin-bottom: 12px; border: 1px solid #cad9d4; border-radius: 10px; background: #fff; }
  .finance-record-table td { display: block; position: relative; min-height: 24px; padding: 0 0 0 100px; border: 0; }
  .finance-record-table td::before { content: attr(data-label); position: absolute; left: 0; top: 0; width: 88px; color: #63746d; font-weight: 650; font-size: 12px; }
  .finance-record-table td.empty { padding: 0; }
  .finance-record-table .table-action { min-height: 40px; }
}
.finance-statement-dialog{width:min(1180px,96vw);max-height:90vh;border:1px solid #b8cbcb;border-radius:12px;padding:24px;color:#173e45;background:white;box-shadow:0 20px 80px #001c3b40}
.finance-statement-dialog::backdrop{background:#001c3b88}.statement-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}.statement-heading h2{margin:0}.statement-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0}.statement-totals>div{padding:16px;background:#eef5f5;border-radius:8px}.statement-totals span,.statement-totals strong{display:block}.statement-totals strong{font-size:24px;margin-top:7px}.statement-fees{padding-left:16px;margin:0;min-width:210px}.statement-fees li+li{margin-top:10px}.finance-statement-dialog small{display:block;margin-top:5px}.finance-statement-dialog td:nth-child(n+3){white-space:nowrap}.finance-statement-dialog td{vertical-align:top}
@media(max-width:1000px){.statement-totals{gap:8px}.statement-totals strong{font-size:20px}}
@media(max-width:600px){.finance-statement-dialog{padding:16px}.statement-totals{grid-template-columns:1fr}.statement-totals>div{display:flex;justify-content:space-between;align-items:center;padding:12px}.statement-totals strong{margin:0}}

/* Employee records: give the register its own row so names and actions remain visible. */
.employee-directory-layout { grid-template-columns: minmax(0,1fr); }
.employee-directory-layout > .card { min-width: 0; }
.employee-directory-layout > #employee-register { order: -1; }
#employee-register .employee-table { width: 100%; min-width: 0; table-layout: fixed; }
#employee-register .employee-table th:first-child { width: 28%; }
#employee-register .employee-table th:last-child { width: 18%; }
#employee-register .employee-table th,
#employee-register .employee-table td { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
#employee-register .employee-table button { max-width: 100%; white-space: normal; text-align: left; }
#employee-register .employee-table td:last-child button { display: block; margin-bottom: 8px; }
#employee-record-form .field { display: flex; flex-direction: column; align-self: start; gap: 7px; }
#employee-record-form .field > span,
#employee-record-form label.field { color: #384943; font-size: 12px; font-weight: 650; }
#employee-record-form .field input,
#employee-record-form .field select,
#employee-record-form .field textarea { font-weight: 400; }
#employee-record-form .employee-status-actions,
#employee-record-form .employee-identity-note { grid-column: 1 / -1; }
#employee-record-form .employee-status-actions .form-actions { justify-content: flex-start; gap: 8px; margin-top: 0; }
#employee-record-form .employee-status-actions button { border: 1px solid transparent; }
#employee-record-form .employee-status-actions button[aria-pressed="true"] { border-color: #003b55; background: #d5e6ed; }
#employee-record-form [hidden] { display: none !important; }
@media(max-width:760px) {
  #employee-register .employee-table { min-width: 640px; table-layout: auto; }
  #employee-register .card-body { overflow-x: auto; }
  #employee-record-form .two-columns { grid-template-columns: minmax(0,1fr); }
}
/* Direct employee status actions remain separate from editing personal details. */
.employee-row-status{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#employee-register .employee-row-status button{display:inline-block;margin:0;font-size:12px}
.employee-status-dialog{width:min(520px,calc(100vw - 32px));max-height:90vh;overflow:auto;border:1px solid #c9d8df;border-radius:16px;padding:24px;color:#163c4d}
.employee-status-dialog::backdrop{background:rgba(9,34,49,.5)}
.employee-status-dialog .field{display:flex;flex-direction:column;gap:8px}
.employee-status-dialog [data-status-error]{color:#a12a2a}

[data-collective-register] td small,.payroll-eligibility td small,.payroll-expand-hint{display:block;font-size:.78rem;margin-top:.25rem;color:var(--muted,#556274)}
.payroll-eligibility{margin:1.5rem 0;padding:1rem;border:1px solid var(--border,#dce2e8);border-radius:.6rem}
#employee-deduction-plans fieldset,#payroll-recoveries fieldset{min-width:0;border:1px solid var(--border,#dce2e8);padding:1rem;border-radius:.5rem}
#payroll-recoveries .field{display:flex;flex-direction:column;gap:7px;margin:12px 0;min-width:0}#payroll-recoveries input:not([type=checkbox]),#payroll-recoveries select{width:100%;min-height:44px;max-width:100%}#payroll-recoveries button{min-height:44px;white-space:normal}#payroll-recoveries .recovery-check{display:flex;gap:10px;align-items:flex-start;margin:16px 0}.recovery-check input{flex:0 0 auto;width:20px;height:20px}.recovery-plan{border:1px solid var(--border,#dce2e8);border-radius:8px;padding:14px;margin:14px 0;overflow-wrap:anywhere}#payroll-recoveries [data-recovery-editor] > [hidden]{display:none}#payroll-recoveries [data-instalment-preview]{font-weight:650}
@media(max-width:600px){#payroll-recoveries .two-columns{grid-template-columns:minmax(0,1fr)}#payroll-recoveries fieldset{padding:10px}#payroll-recoveries button{width:100%}}

/* Controlled calendar: body-mounted to avoid clipped cards and hidden native pickers. */
.date-calendar-popover{position:fixed;z-index:10000;box-sizing:border-box;max-height:calc(100vh - 24px);overflow:auto;padding:12px;border:1px solid #8da9ae;border-radius:10px;box-shadow:0 8px 28px #052c3b40;background:#fff;color:#173f45;font:14px/1.4 Arial,sans-serif}
.date-calendar-popover[hidden]{display:none!important}
.date-calendar-controls{display:flex;gap:6px;align-items:end}.date-calendar-controls label{display:grid;gap:3px;flex:1;min-width:0;font-size:12px}.date-calendar-controls select{width:100%;font:inherit;color:inherit;min-height:36px;border:1px solid #aabfc3;border-radius:5px;background:#fff;padding:4px}
.date-calendar-popover button{font:inherit;color:inherit;cursor:pointer;border:1px solid #b6c8ca;border-radius:5px;background:#f2f7f7;min-height:36px;padding:5px 9px}.date-calendar-popover button:disabled{opacity:.35;cursor:default}.date-calendar-popover button:focus-visible,.date-calendar-popover select:focus-visible{outline:2px solid #006b78;outline-offset:2px}
.date-calendar-title{font-weight:bold;margin:10px 0;font-size:12px}.date-calendar-grid{width:100%;border-collapse:collapse;table-layout:fixed}.date-calendar-grid th,.date-calendar-grid td{text-align:center;padding:2px;border:0}.date-calendar-grid th{font-size:11px}.date-calendar-grid button{width:100%;padding:3px;min-height:36px;border-color:transparent;background:#fff}.date-calendar-grid button:hover:not(:disabled){background:#e3f1f2}.date-calendar-grid button[aria-pressed=true]{background:#0a6170;color:#fff;border-color:#0a6170}
.date-calendar-actions{display:flex;justify-content:space-between;margin-top:10px;gap:6px}.date-calendar-time{display:grid;gap:4px;margin-top:8px}.date-calendar-time input{font:inherit;min-height:36px}.date-calendar-popover [hidden]{display:none!important}

.monthly-payroll-menu{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px;padding:12px;background:#edf4f1;border:1px solid #cdded7;border-radius:10px}.monthly-payroll-menu button{white-space:normal}.monthly-payroll-menu button[aria-current=page]{background:#123f36;color:#fff}.monthly-payroll-panel[hidden]{display:none!important}.monthly-payroll-panel{scroll-margin-top:16px}.monthly-payroll-panel>.card{margin-bottom:20px}.payroll-payslips{margin:18px 0;padding:16px;border:1px solid #b6c8ca;border-radius:10px;background:#f8fbfa}.payroll-payslip-actions{display:flex;gap:8px;flex-wrap:wrap}.payroll-payslips td{vertical-align:top}.payroll-payslips td small{display:block}.payroll-payslips [data-payslip-preview]:empty{display:none}

.onscreen-payslip{margin-top:16px;padding:18px;border:1px solid #b6c8ca;background:#fff;border-radius:8px;max-width:800px}.onscreen-payslip[hidden]{display:none!important}.onscreen-payslip h2{font-size:20px}.onscreen-payslip p{line-height:1.6}.onscreen-payslip table{width:100%;table-layout:auto}.onscreen-payslip th{white-space:normal}.onscreen-payslip td{text-align:right;white-space:nowrap}

.monthly-payroll-panel{min-width:0}@media(max-width:600px){.monthly-payroll-panel .two-columns{grid-template-columns:1fr}.payroll-payslips{padding:10px}.payroll-payslip-actions button{width:100%}}

/* Visible learner and guardian management entry points. */
.learner-record-actions,.guardian-quick-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.learner-record-actions{min-width:155px}.family-record-action{font-weight:700;background:#e8f2ef;border-color:#86b8aa;color:#174f41}.learner-family-card{margin:18px 0;padding:16px;border:1px solid #a4c9bd;border-radius:14px;background:#f1f7f5}.learner-family-card h3{margin:0 0 6px;font-size:18px}.learner-family-card>p{margin:0 0 12px;color:var(--muted)}.learner-family-card .card{background:var(--paper)}.guardian-directory-search{max-width:620px;margin-bottom:10px}.guardian-quick-actions .table-action{white-space:normal;text-align:left}.guardian-quick-actions small{display:block}#family-account-register [hidden]{display:none!important}@media(max-width:640px){.learner-record-actions,.guardian-quick-actions{align-items:stretch}.learner-record-actions .table-action,.guardian-quick-actions .table-action{min-height:40px}.learner-family-card{padding:12px}}
.learner-editor-tabs{position:sticky;top:0;z-index:5;display:flex;gap:8px;flex-wrap:wrap;background:var(--paper,#fff);padding:12px 0;border-bottom:1px solid var(--line,#d6e0dc)}.learner-editor-tabs button{min-height:44px;border:1px solid #b6c8c0;border-radius:8px;padding:9px 14px;background:#eff5f2;color:#174f41;cursor:pointer}.learner-editor-tabs button[aria-selected=true]{background:#174f41;color:#fff}.learner-editor-tabs button:focus-visible,.feature-favourite:focus-visible{outline:3px solid #368c76;outline-offset:2px}#learner-review-overlay [data-learner-panel][hidden]{display:none!important}.learner-record-summary{margin:16px 0}.learner-record-summary summary{cursor:pointer;font-weight:650}.learner-save-actions{position:sticky;bottom:0;z-index:4;background:var(--paper,#fff);padding:12px 0;border-top:1px solid #d6e0dc;flex-wrap:wrap}.learner-save-actions p{font-size:.8rem;color:var(--muted);flex:1;margin:0}.feature-result-row{display:flex;align-items:stretch;gap:6px;margin:6px 0}.feature-result-row .feature-result{flex:1;min-width:0;margin:0}.feature-favourite{flex:0 0 44px;min-height:44px;border:1px solid #b6c8c0;border-radius:8px;background:#f6f9f7;color:#174f41;font-size:24px;cursor:pointer}.feature-favourites-filter{display:flex;gap:10px;align-items:center;margin-top:12px}.feature-favourites-filter input{width:20px;height:20px}.feature-finder-dialog [data-feature-results]{max-height:55vh;overflow:auto}.feature-finder-dialog h3{font-size:14px;color:var(--muted);margin:14px 0 6px}[data-cleanup-row][hidden]{display:none!important}@media(max-width:600px){.learner-editor-tabs{gap:4px}.learner-editor-tabs button{flex:1;padding:8px}.learner-save-actions p{flex-basis:100%}.learner-save-actions button{flex:1}.feature-finder-dialog{max-width:calc(100vw - 24px)}}
.promotion-preview-action{margin:16px 0;padding:16px;border:1px solid #adcbc2;border-radius:10px;background:#edf5f1}.promotion-preview-action button{min-height:44px;white-space:normal}.promotion-preview-action p{margin:10px 0 0;color:var(--muted)}@media(max-width:600px){.promotion-preview-action button{width:100%}}

/* Clearly visible action feedback and persistent saved finance results. */
.portal-action-banner,.discount-saved-result { margin: 16px 0; padding: 18px; border: 1px solid #bed4cb; border-left: 5px solid #246852; border-radius: 12px; background: #edf7f1; color: #143d30; font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
.portal-action-banner strong,.portal-action-toast strong { display: block; font-size: 1.1rem; }
.portal-action-banner p,.portal-action-toast p { margin: 6px 0 0; }
.portal-action-banner.working,.portal-action-banner.info { background: #edf5fa; border-color: #387796; color: #173e54; }
.portal-action-banner.error { background: #fff0ed; border-color: #a3312b; color: #7e211b; }
.portal-action-banner.warning { background: #fff7e5; border-color: #a77616; color: #664506; }
.portal-action-toast { position: fixed; right: 20px; bottom: 20px; z-index: 1800; display: flex; gap: 12px; align-items: flex-start; width: min(440px,calc(100vw - 40px)); max-height: 38vh; overflow: auto; padding: 20px; border: 2px solid #317858; border-radius: 14px; background: #f0faf3; color: #163d2c; box-shadow: 0 8px 35px #153c3538; font-size: 1rem; line-height: 1.55; }
.portal-action-toast.working,.portal-action-toast.info { background: #eff7fc; border-color: #347391; color: #183b50; }
.portal-action-toast.error { background: #fff1ef; border-color: #a6332c; color: #802b23; }
.portal-action-toast.warning { background: #fff8e8; border-color: #a77b18; color: #674b0a; }
.portal-action-toast > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.portal-action-toast button { background: transparent; color: inherit; flex: 0 0 auto; padding: 0 8px; min-height: 36px; font-size: 24px; }
.portal-action-spinner { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 3px; border: 3px solid #b1cddc; border-top-color: #246180; border-radius: 50%; animation: portal-action-spin 1s linear infinite; }
@keyframes portal-action-spin { to { transform: rotate(360deg); } }
.discount-review-panel,.discount-search-results { margin-block: 18px; }
.discount-saved-result { scroll-margin-block: 24px; }
.discount-saved-result h3 { margin-top: 0; }
@media (prefers-reduced-motion:reduce) { .portal-action-spinner { animation: none; } }
@media print { .portal-action-toast { display: none !important; } }

.discount-search-results { grid-column: 1 / -1; min-width: 0; }
.discount-search-status { padding: 12px 14px; border-radius: 9px; background: #edf5fa; color: #173e54; font-size: 1rem; font-weight: 650; line-height: 1.5; margin: 0 0 12px; }

/* Additional parent / guardian relationships */
.child-relation-choices{max-height:28rem;overflow:auto;border:1px solid var(--border,#d4dfdf);border-radius:12px;}
.child-relation-row{padding:14px 16px;border-bottom:1px solid #dce5e5;align-items:center;}
.child-relation-row[hidden]{display:none!important;}
.child-relation-row:last-child{border-bottom:0;}
.child-relation-row .guardian-employee-confirm{display:block;line-height:1.5;}
.child-relation-row .guardian-employee-confirm input{margin-right:8px;}
.child-relation-row small{display:block;margin-left:26px;color:#526b73;}
.guardian-same-person-tools{margin-top:20px;padding-top:16px;border-top:1px solid #d4dfdf;}
.guardian-same-person-tools>summary{font-weight:700;cursor:pointer;margin-bottom:16px;}
@media(max-width:640px){.child-relation-row{grid-template-columns:1fr!important;padding:12px;}.child-relation-row .field{margin-left:26px;}.child-relation-choices{max-height:30rem;}}