* { box-sizing: border-box; }
body { margin: 0; background: #F6F2E9; font-family: 'Inter', sans-serif; color: #1B2C4F; }
a { text-decoration: none; color: inherit; }
table { border-collapse: collapse; width: 100%; }
.mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }
.main { flex: 1; min-width: 0; }
.page { padding: 36px 44px; max-width: 1100px; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 232px; background: #1B2C4F; color: #F6F2E9;
  padding: 24px 18px; display: flex; flex-direction: column; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh;
}
.crest-block { display: flex; align-items: center; gap: 12px; }
.crest {
  width: 40px; height: 40px; border-radius: 4px; background: #C6962E; color: #1B2C4F;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.school-name { font-family: 'Source Serif 4', serif; font-size: 15px; font-weight: 600; line-height: 1.25; }
.school-sub { font-size: 11px; opacity: 0.6; margin-top: 2px; letter-spacing: 0.3px; }
.sidebar nav { margin-top: 32px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.sidebar nav::-webkit-scrollbar { width: 4px; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(246,242,233,0.2); border-radius: 2px; }
.nav-item {
  display: block; width: 100%; padding: 10px 12px; margin-bottom: 4px;
  border-radius: 6px; color: #F6F2E9; opacity: 0.75; font-size: 13.5px; cursor: pointer;
}
.nav-item.active { background: rgba(246,242,233,0.08); opacity: 1; font-weight: 500; }

/* ---------- Collapsible sidebar nav groups ---------- */
.nav-group { margin-bottom: 4px; }
.nav-group summary {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 10px 12px; border-radius: 6px; color: #F6F2E9;
  opacity: 0.75; font-size: 13.5px; cursor: pointer; list-style: none;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: '\25B8'; font-size: 10px; opacity: 0.6; transition: transform 0.15s ease; }
.nav-group[open] summary::after { transform: rotate(90deg); }
.nav-group summary:hover { opacity: 1; }
.nav-group.has-active summary { opacity: 1; font-weight: 500; }
.nav-group .nav-item { padding-left: 26px; font-size: 13px; }
.sidebar-footer { margin-top: auto; flex-shrink: 0; }

/* ---------- Sidebar show/hide toggle ---------- */
.sidebar-toggle {
  position: fixed; top: 18px; left: 18px; z-index: 100;
  width: 34px; height: 34px; border-radius: 6px; border: none;
  background: #1B2C4F; color: #F6F2E9; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-toggle:hover { background: #C6962E; }
.ledger-line { height: 1px; background: rgba(246,242,233,0.15); margin-bottom: 16px; }
.footer-user { font-size: 12.5px; padding: 6px 12px; line-height: 1.6; }
.role-tag { opacity: 0.6; text-transform: capitalize; }
.logout-link { display: block; padding: 8px 12px; font-size: 12.5px; opacity: 0.65; margin-top: 4px; }
.logout-link:hover { opacity: 1; }

/* ---------- Headers ---------- */
.page-header { margin-bottom: 28px; }
.eyebrow { font-size: 11.5px; letter-spacing: 0.6px; text-transform: uppercase; color: #C6962E; font-weight: 600; margin-bottom: 6px; }
.page-header h1 { font-family: 'Source Serif 4', serif; font-size: 30px; font-weight: 600; margin: 0; }

/* ---------- Flash messages ---------- */
.flash { padding: 10px 14px; border-radius: 6px; font-size: 13.5px; margin-bottom: 18px; }
.flash-success { background: #E7EFE8; color: #3F6B4E; }
.flash-error { background: #F4E4E0; color: #A6192E; }

/* ---------- Stat cards ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 30px; }
.stat-card {
  background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 8px;
  padding: 16px 18px; position: relative; overflow: hidden;
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent, #1B2C4F);
}
.stat-label { font-size: 12px; color: #6B7686; margin-bottom: 8px; }
.stat-value { font-size: 22px; font-weight: 600; font-family: 'Source Serif 4', serif; }

/* ---------- Section cards ---------- */
.section-card { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 8px; padding: 20px 22px; margin-bottom: 18px; }
.section-card h3 { font-family: 'Source Serif 4', serif; font-size: 17px; margin: 0 0 12px; font-weight: 600; }
.section-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.link-button { color: #C6962E; font-size: 13px; font-weight: 500; }
.empty-note { padding: 24px 0; color: #6B7686; font-size: 14px; text-align: center; }

/* ---------- Due rows / history rows ---------- */
.due-row, .history-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #F0EAD9; font-size: 13.5px; }
.due-row:first-child, .history-row:first-child { border-top: none; }
.due-name { font-weight: 500; font-size: 14px; }
.due-meta { font-size: 12px; color: #6B7686; }
.status-tab { width: 6px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }

/* ---------- Toolbar ---------- */
.toolbar { display: flex; gap: 10px; margin-bottom: 22px; align-items: center; flex-wrap: wrap; }
.search-box { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 6px; padding: 8px 12px; flex: 1; max-width: 340px; }
.search-box input { border: none; outline: none; background: transparent; font-size: 13.5px; width: 100%; font-family: 'Inter', sans-serif; color: #1B2C4F; }
select, .toolbar select { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 6px; padding: 8px 12px; font-size: 13.5px; color: #1B2C4F; font-family: 'Inter', sans-serif; }

/* ---------- Buttons ---------- */
.primary-button {
  display: inline-flex; align-items: center; gap: 6px; background: #1B2C4F; color: #F6F2E9;
  border: none; border-radius: 6px; padding: 9px 16px; font-size: 13.5px; font-weight: 500;
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.ghost-button {
  display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 1px solid #E7E0CF;
  border-radius: 5px; padding: 7px 11px; font-size: 12px; color: #1B2C4F; cursor: pointer; font-family: 'Inter', sans-serif;
}
.ghost-button.danger { color: #A6192E; }
.small-link-button { background: none; border: 1px solid #E7E0CF; border-radius: 5px; padding: 5px 10px; font-size: 11.5px; color: #C6962E; font-weight: 600; cursor: pointer; }
.small-link-button.danger { color: #A6192E; }
.text-button { background: none; border: none; color: #6B7686; font-size: 13.5px; cursor: pointer; padding: 9px 12px; }

/* ---------- Cards grid (student records) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.index-card { display: flex; background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 8px; overflow: hidden; }
.card-name { font-family: 'Source Serif 4', serif; font-size: 16.5px; font-weight: 600; }
.card-number { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #6B7686; margin-top: 2px; }
.status-pill { font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 12px; white-space: nowrap; }
.card-divider { height: 1px; background: #F0EAD9; margin: 12px 0; }
.card-fact-row { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; }
.card-fact-row span:first-child { color: #6B7686; }
.card-actions { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }

/* ---------- Ledger table (fees/ledger.php) ---------- */
.ledger-table { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 8px; overflow: hidden; }
.ledger-header-row { display: flex; align-items: center; padding: 10px 16px; border-bottom: 1px solid #E7E0CF; background: #F0EAD9; font-size: 12px; color: #6B7686; }
.ledger-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #F0EAD9; }
.ledger-total-row { display: flex; align-items: center; padding: 12px 16px; background: #F0EAD9; }
.ledger-cell { font-size: 13px; padding-right: 8px; }

/* ---------- Plain HTML tables (fee structure, payment history, users) ---------- */
.ledger-html-table th, .ledger-html-table td { text-align: left; padding: 9px 10px; font-size: 13px; border-bottom: 1px solid #F0EAD9; }
.ledger-html-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.3px; color: #6B7686; font-weight: 500; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; }
.field.span-2 { grid-column: span 2; }
.field label { font-size: 11.5px; color: #6B7686; margin-bottom: 5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
.field input, .field select {
  border: 1px solid #E7E0CF; border-radius: 6px; padding: 9px 11px; font-size: 13.5px;
  background: #FFFFFF; color: #1B2C4F; font-family: 'Inter', sans-serif; width: 100%;
}
.balance-strip { display: flex; justify-content: space-between; align-items: center; background: #F0EAD9; border-radius: 6px; padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; }

/* ---------- Auth pages (login / install) ---------- */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 10px; padding: 32px 36px; width: 400px; text-align: center; }
.auth-card h1 { font-family: 'Source Serif 4', serif; font-size: 22px; margin: 0 0 6px; }
.auth-sub { font-size: 13px; color: #6B7686; margin-bottom: 18px; }
.auth-card form { text-align: left; }
.auth-card label { font-size: 11.5px; color: #6B7686; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin: 12px 0 5px; }
.auth-card input { width: 100%; border: 1px solid #E7E0CF; border-radius: 6px; padding: 10px 11px; font-size: 14px; font-family: 'Inter', sans-serif; }
.auth-card .primary-button { width: 100%; justify-content: center; margin-top: 18px; }
.auth-footnote { font-size: 12px; color: #6B7686; margin-top: 16px; }

/* ---------- Receipt ---------- */
.receipt-body { display: flex; justify-content: center; padding: 40px 16px; background: #F6F2E9; }
.receipt-card { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 10px; padding: 28px 32px; width: 100%; max-width: 380px; text-align: center; }

/* Report cards use their own class, completely separate from .receipt-card
   above, so a fix for one can never accidentally affect the other again.
   Report cards keep a simple fixed width (set inline per page) rather
   than being responsive, since that's what worked reliably for them. */
.report-card-box { background: #FFFDF8; border: 1px solid #E7E0CF; border-radius: 10px; padding: 28px 32px; text-align: center; }
.receipt-card h2 { font-family: 'Source Serif 4', serif; font-size: 18px; margin: 10px 0 2px; }
.receipt-sub { font-size: 12px; color: #6B7686; margin: 0 0 14px; }
.receipt-divider { height: 1px; background: #E7E0CF; margin: 14px 0; }
.report-card-clean { background:#fff; border-color:#DDE3EA; }
.report-card-clean .receipt-divider { background:#DDE3EA; margin:10px 0; }
.report-results-table th { background:#1B2C4F;color:#fff;border-bottom:0; }
.report-results-table td { background:transparent!important;border-bottom:1px solid #E2E7EE;padding-top:7px;padding-bottom:7px; }
.report-results-table tbody tr:hover { background:transparent; }
.receipt-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; text-align: left; }
.receipt-total { font-size: 16px; font-weight: 700; color: #3F6B4E; }
.receipt-footnote { font-size: 11.5px; color: #6B7686; margin-top: 4px; }
.professional-receipt { position:relative;max-width:560px;padding:30px 34px;overflow:hidden;border-color:#D8E1EB;border-radius:14px;background:#fff;box-shadow:0 18px 48px rgba(15,39,71,.12); }
.receipt-watermark { position:absolute;z-index:0;left:50%;top:56%;width:72%;height:58%;transform:translate(-50%,-50%);object-fit:contain;opacity:.055;pointer-events:none;filter:grayscale(.12); }
.receipt-document-layer { position:relative;z-index:1; }
.receipt-title-row { margin:14px 0 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left; }
.receipt-title-row span:first-child { color:#6F7F92;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.receipt-title-row h1 { margin:4px 0 0;color:#102844;font-family:'Inter',sans-serif;font-size:22px;letter-spacing:-.025em; }
.receipt-status { padding:6px 10px;border-radius:999px;font-size:9.5px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase; }
.receipt-status.is-valid { color:#14724C;background:#E9F7F0; }
.receipt-status.is-void { color:#9D3D35;background:#FBECEB; }
.receipt-detail-group { margin:12px 0 0;padding:12px 14px;border:1px solid rgba(218,225,234,.9);border-radius:10px;background:rgba(255,255,255,.76); }
.receipt-detail-group h2 { margin:0 0 7px;color:#2F80ED;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;text-align:left; }
.receipt-detail-group .receipt-row { padding:3.5px 0; }
.receipt-detail-group .receipt-row>span:first-child { color:#738195; }
.receipt-detail-group .receipt-row>span:last-child,.receipt-detail-group .receipt-row>strong { max-width:64%;color:#1D304A;text-align:right; }
.receipt-amount-panel { margin:16px 0;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;border:1px solid #BEDAF0;border-radius:11px;background:linear-gradient(135deg,rgba(239,247,253,.94),rgba(247,251,255,.94));text-align:left; }
.receipt-amount-panel span { color:#52657A;font-size:10px;font-weight:750;letter-spacing:.07em;text-transform:uppercase; }
.receipt-amount-panel strong { color:#145080;font-size:23px;letter-spacing:-.02em; }
.receipt-amount-panel.is-void { border-color:#E6B9B5;background:#FDF2F1; }
.receipt-amount-panel.is-void strong { color:#A14B3D; }
.receipt-void-notice { margin:12px 0;padding:10px 12px;display:flex;flex-direction:column;gap:3px;border:1px solid #E8B6B1;border-radius:9px;color:#963F37;background:#FCEDEC;font-size:11px; }
.receipt-authorization { margin-top:19px;text-align:left; }
.receipt-authorization p { margin:0;color:#6C7B8D;font-size:10.5px; }
.receipt-authorization p strong { color:#263A53; }
.receipt-authorization>div { margin:28px 0 7px;display:grid;grid-template-columns:1fr 1fr;gap:42px; }
.receipt-authorization>div span { padding-top:6px;border-top:1px solid #AEB9C6;color:#7A8796;font-size:9px;text-align:center; }
.receipt-authorization small { display:block;color:#8A96A5;font-size:8.5px;font-style:italic;text-align:center; }
@media(max-width:560px){.professional-receipt{padding:24px 20px}.receipt-title-row h1{font-size:19px}.receipt-amount-panel strong{font-size:19px}.receipt-detail-group .receipt-row{gap:14px}.receipt-authorization>div{gap:20px}}
@media print { .no-print { display: none; } }

/* ---------- Attendance ---------- */
.attendance-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.att-option {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid #E7E0CF; border-radius: 5px;
  padding: 6px 10px; font-size: 12px; cursor: pointer; color: #6B7686; background: #FFFDF8;
}
.att-option input { accent-color: #1B2C4F; }
.att-option.att-present:has(input:checked) { background: #E7EFE8; border-color: #3F6B4E; color: #3F6B4E; font-weight: 600; }
.att-option.att-late:has(input:checked) { background: #F4ECDA; border-color: #C6962E; color: #C6962E; font-weight: 600; }
.att-option.att-absent:has(input:checked) { background: #F4E4E0; border-color: #A6192E; color: #A6192E; font-weight: 600; }
.att-option.att-excused:has(input:checked) { background: #EDEFF2; border-color: #6B7686; color: #1B2C4F; font-weight: 600; }
.att-summary { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
.att-summary span { display: inline-flex; align-items: center; gap: 5px; }
.att-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

@media (max-width: 720px) {
  /* On mobile, the sidebar starts hidden and slides in as an overlay
     drawer when opened - rather than being permanently hidden with no
     way to reach it, which was the previous bug. The same toggle class
     used to collapse the sidebar on desktop means the opposite thing
     here (shows it, rather than hides it), since the default states
     are inverted between the two screen sizes. */
  .sidebar {
    display: none;
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 78%;
    max-width: 280px;
    z-index: 150;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  .page { padding: 64px 20px 20px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .field.span-2 { grid-column: span 1; }
}

/* System administration */
.system-page { max-width: 780px; }
.system-config-card { border-left: 4px solid var(--blue-600); }
.branding-logo-card { border-left: 4px solid #7B61C9; }
.branding-logo-card input[type=file] { max-width: 100%; padding: 10px; border: 1px solid #D9E1EC; border-radius: 8px; background: #F8FAFC; }
.system-toolbar { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }
.calendar-card { border-top: 4px solid var(--blue-600); }
.notification-test-card { border-left: 4px solid var(--success); }
.notification-test-card input[type=email] { min-height: 40px; border-color: #D9E1EC !important; border-radius: 8px !important; }
.backup-page { max-width: 1100px; }
.backup-table-card { overflow-x: auto; }
.backup-table-card table { min-width: 760px; }
.backup-automation-card { border-left: 4px solid var(--warning); }
.backup-automation-card code { color: #D7E5F3; background: var(--navy-900) !important; border-radius: 8px !important; }
.restore-page { max-width: 700px; }
.restore-confirm-card { border-top: 4px solid var(--danger); }
.restore-confirm-card p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.restore-confirm-card label { display: block; margin: 17px 0 6px; color: var(--text); font-size: 11px; font-weight: 600; }
.restore-confirm-card input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #D9E1EC; border-radius: 8px; }

/* Supporting actions, receipts and print */
.supporting-action-page { max-width: 720px; }
.comments-form-card { border-left: 4px solid var(--blue-600); }
.comments-form-card textarea { width: 100%; min-height: 100px; padding: 11px 12px; border: 1px solid #D9E1EC !important; border-radius: 8px !important; font: 13px/1.55 'Inter',sans-serif; }
.utility-preview-card { border-top: 4px solid var(--warning); }
.transaction-review-card { border-left: 4px solid #6C8EB5; }
.void-confirm-card { border-top: 4px solid var(--danger); }
.void-confirm-card textarea,.void-confirm-card input[type=text] { width: 100%; padding: 10px 11px; border: 1px solid #D9E1EC; border-radius: 8px; }
.premium-receipt-body { min-height: 100vh; padding: 42px 18px; background: linear-gradient(145deg,#E9EFF7,#F7F9FC); }
.premium-receipt { position: relative; overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 20px 50px rgba(9,26,48,.14); }
.premium-receipt::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg,var(--navy-800),var(--blue-600)); }
.premium-receipt h2 { color: var(--navy-800); font-family: 'Inter',sans-serif; font-weight: 700; }
.premium-receipt .receipt-total { color: var(--navy-800); }
.premium-print-body { color: #111827; background: #EEF2F7; }
@media print {
  @page { margin: 10mm; }
  body,.premium-print-body,.receipt-body { padding: 0 !important; background: #fff !important; }
  .receipt-card,.report-card-box { border-color: #CBD3DD !important; border-radius: 0 !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .premium-receipt::before { background: #0F2747 !important; }
  a { color: #111 !important; }
}

/* Installer and final global polish */
.setup-body { padding: 20px; background: #EAF0F7; }
.setup-shell { width: min(920px,100%); min-height: 570px; display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 25px 60px rgba(9,26,48,.17); }
.setup-intro { padding: 50px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg,#07172B,#123E6D); }
.setup-intro > div:first-child > span { color: #83B8F6; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.setup-intro h1 { margin: 17px 0 14px; font-size: 35px; line-height: 1.17; letter-spacing: -.045em; }
.setup-intro p { color: #B7C7D9; font-size: 12px; line-height: 1.7; }
.setup-steps { display: grid; gap: 12px; }
.setup-steps div { display: flex; align-items: center; gap: 10px; color: #B7C7D9; font-size: 10.5px; }
.setup-steps b { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: #83B8F6; background: rgba(255,255,255,.06); font-size: 9px; }
.setup-card { align-self: center; width: 100%; padding: 44px 38px; border: 0; box-shadow: none; background: #fff; }
.setup-crest { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 13px; }
textarea { color: var(--text); font-family: 'Inter',sans-serif; }
.empty-note a { color: var(--blue-600) !important; font-weight: 600; }
.status-pill { letter-spacing: .01em; }
.small-link-button { transition: background .16s,border-color .16s,color .16s; }
.small-link-button:hover { background: #F2F6FB; border-color: #C8D4E2; }
.small-link-button.danger:hover,.ghost-button.danger:hover { background: #FFF0F2; border-color: #F1B7BD; }
@media (max-width: 720px) {
  .setup-shell { display: block; min-height: 0; }
  .setup-intro { display: none; }
  .setup-card { padding: 38px 27px; }
}

/* Attendance module */
.module-heading { margin-bottom: 21px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.module-heading h1 { margin: 3px 0 6px; color: var(--navy-800); font-size: 30px; letter-spacing: -.035em; }
.module-heading p { margin: 0; color: var(--muted); font-size: 11.5px; }
.attendance-toolbar { padding: 12px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); }
.attendance-toolbar > input[type=date] { min-height: 38px; padding: 7px 10px; border: 1px solid #D9E1EC; border-radius: 8px; color: var(--text); }
.attendance-class-card { min-height: 190px; border-radius: 13px; transition: transform .2s,box-shadow .2s; }
.attendance-class-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.attendance-progress { height: 6px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #E9EEF5; }
.attendance-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue-600),#65AAF8); }
.attendance-register { padding: 8px 22px; }
.attendance-register-row { min-height: 66px; padding: 11px 0; }
.attendance-register-row .due-name { color: var(--navy-800); font-weight: 600; }
.att-option { min-width: 78px; justify-content: center; padding: 7px 10px; border-color: #DDE5EF; border-radius: 8px; background: #fff; }
.att-option.att-present:has(input:checked) { background: #E8F8F1; border-color: #76C9A7; color: #087A4D; }
.att-option.att-late:has(input:checked) { background: #FFF6E3; border-color: #EDC978; color: #986008; }
.att-option.att-absent:has(input:checked) { background: #FFF0F2; border-color: #E9A1A9; color: #B42332; }
.att-option.att-excused:has(input:checked) { background: #EFF3F8; border-color: #BCC8D6; color: #526173; }
.attendance-table-card { padding: 0; overflow-x: auto; }
.attendance-table-card .ledger-html-table th,.attendance-table-card .ledger-html-table td { padding: 13px 14px; }
.staff-attendance-table input[type=text] { min-height: 36px; border-color: #D9E1EC !important; border-radius: 8px !important; }
@media (max-width: 800px) {
  .module-heading { align-items: flex-start; flex-direction: column; }
  .attendance-register-row { align-items: flex-start !important; flex-direction: column; }
  .attendance-toggle { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); }
  .att-option { width: 100%; }
}

/* Academic marks and reports */
.academic-toolbar { padding: 12px 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow-sm); }
.marks-entry-card { padding: 0; overflow-x: auto; }
.marks-table { min-width: 760px; }
.marks-table th { padding: 13px 12px; text-align: center; }
.marks-table th:first-child { min-width: 190px; text-align: left; }
.marks-table td { padding: 11px 12px; text-align: center; }
.marks-table td:first-child { color: var(--navy-800); text-align: left; font-weight: 600; }
.marks-table input[type=number] { width: 76px !important; min-height: 36px; border: 1px solid #D9E1EC !important; border-radius: 8px !important; text-align: center; }
.marks-table input[type=number]:focus { border-color: #83B5F6 !important; box-shadow: 0 0 0 3px rgba(47,128,237,.1); outline: none; }
.marks-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy-800); }
.report-list-card { padding: 7px 22px; }
.report-student-row { min-height: 66px; }
.report-student-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 9px; color: #1768CC; background: #EAF3FF; font-size: 11px; font-weight: 700; }
.release-page { max-width: 760px; }
.release-card { padding: 0; overflow: hidden; }
.release-card .ledger-html-table th,.release-card .ledger-html-table td { padding: 14px 16px; }
.release-card .small-link-button { min-height: 30px; padding: 6px 10px; }
@media (max-width: 680px) {
  .report-student-row { align-items: flex-start; flex-wrap: wrap; }
  .report-student-row > div:nth-child(2) { min-width: calc(100% - 55px); }
}

/* Supporting assessment screens */
.assessment-grid-card { padding: 0; overflow-x: auto; }
.assessment-grid-table { min-width: 720px; }
.assessment-grid-table th,.assessment-grid-table td { padding: 12px 13px; text-align: center; }
.assessment-grid-table th:first-child,.assessment-grid-table td:first-child { position: sticky; left: 0; z-index: 2; min-width: 190px; text-align: left; background: #fff; }
.assessment-grid-table th:first-child { z-index: 3; background: #F8FAFC; }
.assessment-grid-table td:first-child { color: var(--navy-800); font-weight: 600; box-shadow: 5px 0 10px rgba(15,39,71,.03); }
.assessment-grid-table select { min-width: 58px; min-height: 35px; border-color: #D9E1EC !important; border-radius: 8px !important; text-align: center; }
.ece-remarks-page { max-width: 720px; }
.ece-remarks-form { padding: 27px; }
.ece-area-heading { margin: 5px 0 11px; padding-top: 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.ece-area-heading:first-of-type { padding-top: 0; border-top: 0; }
.ece-area-heading span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #1768CC; background: #EAF3FF; font-size: 9px; font-weight: 700; }
.ece-area-heading strong { color: var(--navy-800); font-size: 12.5px; }
.ece-remarks-form > label { display: none !important; }
.ece-remarks-form select { width: 100%; margin-bottom: 7px; }
.ece-remarks-form textarea { width: 100%; margin-bottom: 18px; padding: 11px 12px; border: 1px solid #D9E1EC; border-radius: 8px; color: var(--text); font: 13px/1.55 'Inter',sans-serif; resize: vertical; }
.ece-remarks-form textarea:focus { border-color: #83B5F6; box-shadow: 0 0 0 3px rgba(47,128,237,.1); outline: none; }

/* Academic setup */
.academic-setup-page { max-width: 980px; }
.boundaries-page { max-width: 720px; }
.class-subjects-page { max-width: 820px; }
.comment-bank-page { max-width: 780px; }
.setup-form-card { border-left: 4px solid var(--blue-600); }
.setup-form-card h3 { margin-bottom: 17px; }
.setup-form-card form > input[type=text] { min-height: 40px; border-color: #D9E1EC !important; border-radius: 8px !important; }
.setup-table-card { padding: 0; overflow: hidden; }
.setup-table-card > h3 { padding: 21px 22px 4px; }
.setup-table-card .ledger-html-table th,.setup-table-card .ledger-html-table td { padding: 13px 16px; }
.setup-table-card .ledger-html-table td:first-child { color: var(--navy-800); font-weight: 600; }
.boundary-card input[type=text],.boundary-card input[type=number] { min-height: 36px; border-color: #D9E1EC !important; border-radius: 8px !important; }
.boundary-card > form > .primary-button { margin: 14px 16px 17px !important; }
.subject-picker { max-height: 280px; margin-bottom: 14px; padding: 13px; overflow-y: auto; columns: 2; column-gap: 20px; border: 1px solid #D9E1EC; border-radius: 9px; background: #FAFCFF; }
.subject-picker label { min-height: 32px; padding: 6px 7px !important; border-radius: 6px; }
.subject-picker label:hover { background: #EAF3FF; }
.subject-picker input { accent-color: var(--blue-600); }
.comment-group-card { padding: 8px 21px; }
.comment-group-card h3 { padding: 12px 0 7px; }
.comment-group-card .due-row { min-height: 52px; }
@media (max-width: 620px) { .subject-picker { columns: 1; } }

/* Remaining financial workflows */
.finance-setup-page { max-width: 1050px; }
.finance-config-card { border-left: 4px solid var(--blue-600); }
.finance-config-card h3 { margin-bottom: 17px; }
.finance-config-card + .finance-config-card { border-left-color: #66A7F5; }
.finance-policy-card { border-left: 4px solid #6C8EB5; }
.finance-policy-card input[type=number] { min-height: 38px; border-color: #D9E1EC !important; border-radius: 8px !important; }
.outstanding-lines-card { padding: 12px 22px; border-left: 4px solid var(--danger); }
.outstanding-lines-card h3 { padding: 8px 0 5px; }
.finance-action-page { max-width: 720px; }
.adjustment-preview-card { border-top: 4px solid var(--warning); }
.active-discount-card { border-top: 4px solid var(--success); }
.active-discount-card .due-row,.adjustment-preview-card .due-row { min-height: 48px; }
.finance-action-page input[type=radio],.finance-action-page input[type=checkbox] { accent-color: var(--blue-600); }
@media (max-width: 700px) {
  .finance-policy-card form { align-items: flex-start !important; flex-direction: column; }
}

/* School records batch */
.records-admin-page { max-width: 1050px; }
.records-config-card { border-left: 4px solid var(--blue-600); }
.records-table-card .small-link-button { margin: 2px; }
.promotion-page { max-width: 880px; }
.promotion-preview-card { padding: 0; overflow: hidden; border-top: 4px solid var(--blue-600); }
.promotion-preview-card h3,.promotion-branch-card h3 { padding: 18px 20px 4px; }
.promotion-preview-card .ledger-html-table th,.promotion-preview-card .ledger-html-table td,.promotion-branch-card .ledger-html-table th,.promotion-branch-card .ledger-html-table td { padding: 12px 16px; }
.promotion-branch-card { padding: 0 0 14px; overflow: hidden; border-top: 4px solid var(--warning); }
.promotion-branch-card > p { padding-left: 20px !important; padding-right: 20px !important; }
.promotion-branch-card input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--blue-600); }
.family-card { border-left: 4px solid var(--blue-600); }
.family-card .section-header-row { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.guardian-table-card { overflow-x: auto; }
.guardian-table-card table { min-width: 720px; }
.import-page { max-width: 1050px; }
.import-upload-card { padding: 30px; border: 1px dashed #B9C8D9; background: linear-gradient(145deg,#fff,#F8FBFF); text-align: center; }
.import-upload-card input[type=file] { max-width: 100%; padding: 11px; border: 1px solid #D9E1EC; border-radius: 9px; background: #fff; }
.import-preview-card { padding: 0; overflow-x: auto; }
.import-preview-card h3 { padding: 19px 20px 5px; }
.import-preview-card table { min-width: 760px; }
.import-preview-card .ledger-html-table th,.import-preview-card .ledger-html-table td { padding: 12px 14px; }

/* Staff administration and authentication */
.staff-admin-page { max-width: 1050px; }
.staff-table-card { overflow-x: auto; }
.staff-table-card table { min-width: 720px; }
.staff-list-avatar { width: 31px; height: 31px; margin-right: 10px; display: inline-grid; place-items: center; border-radius: 8px; color: #1768CC; background: #EAF3FF; font-size: 10px; font-weight: 700; vertical-align: middle; }
.leave-page { max-width: 760px; }
.leave-form-card { border-left: 4px solid var(--blue-600); }
.leave-history-card { padding: 8px 21px; }
.leave-history-card .due-row { min-height: 58px; }
.leave-approval-card { padding: 8px 22px; }
.leave-approval-card .due-row { min-height: 64px; }
.staff-login-body { padding: 20px; background: #EAF0F7; }
.staff-login-shell { width: min(940px,100%); min-height: 580px; display: grid; grid-template-columns: 1.17fr .83fr; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 25px 60px rgba(9,26,48,.17); }
.staff-login-intro { padding: 54px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg,#07172B,#123E6D); }
.staff-login-intro span { color: #83B8F6; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.staff-login-intro h1 { max-width: 430px; margin: 17px 0 14px; font-size: 36px; line-height: 1.16; letter-spacing: -.045em; }
.staff-login-intro p { max-width: 400px; color: #B7C7D9; font-size: 12px; line-height: 1.7; }
.staff-login-intro small { color: #7990AA; }
.staff-login-card { align-self: center; width: 100%; padding: 44px 38px; border: 0; box-shadow: none; background: #fff; }
.staff-login-logo-wrap { width:150px;height:118px;margin:0 auto 18px;padding:7px;display:grid;place-items:center;overflow:hidden;border-radius:34px;background:radial-gradient(circle at 50% 45%,#F8FBFF 0%,#EAF2FB 72%,#E2EDF9 100%);box-shadow:inset 0 0 0 1px rgba(39,101,170,.08); }
.staff-login-logo { width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:multiply;filter:saturate(1.04) contrast(1.02); }

/* Unified management and parent authentication */
.unified-login-body { min-height:100vh;padding:24px;background:radial-gradient(circle at 12% 10%,#fff 0,#EEF3F9 32%,#E5ECF5 100%); }
.unified-login-shell { width:min(1040px,100%);min-height:630px;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);overflow:hidden;border:1px solid rgba(15,39,71,.06);border-radius:24px;background:#fff;box-shadow:0 30px 75px rgba(7,23,43,.18); }
.unified-login-intro { position:relative;padding:64px 58px 48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;color:#fff;background:linear-gradient(145deg,#061426 0%,#0D2D52 58%,#164B7D 100%); }
.unified-login-intro::before { content:"";position:absolute;width:360px;height:360px;right:-155px;top:-125px;border:1px solid rgba(255,255,255,.09);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.unified-login-intro::after { content:"";position:absolute;inset:auto -60px -110px auto;width:330px;height:220px;transform:rotate(-12deg);border-radius:50%;background:rgba(47,128,237,.13);filter:blur(2px); }
.login-intro-top,.unified-login-intro small { position:relative;z-index:1; }
.login-eyebrow { display:inline-flex;padding:7px 10px;border:1px solid rgba(131,184,246,.28);border-radius:999px;color:#A9CDF7;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase; }
.unified-login-intro h1 { max-width:500px;margin:24px 0 17px;font-size:40px;line-height:1.12;letter-spacing:-.045em; }
.unified-login-intro p { max-width:455px;margin:0;color:#B9C9DA;font-size:13px;line-height:1.75; }
.login-feature-list { margin-top:34px;display:grid;gap:13px; }
.login-feature-list span { display:flex;align-items:center;gap:10px;color:#E4EDF7;font-size:12px;font-weight:550; }
.login-feature-list span::before { content:"✓";width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:#9CC9FF;background:rgba(47,128,237,.18);font-size:10px; }
.unified-login-intro small { color:#8198B2;font-size:10.5px;letter-spacing:.02em; }
.unified-login-card { align-self:stretch;width:100%;padding:34px 46px 38px;display:flex;flex-direction:column;justify-content:center;border:0;border-radius:0;box-shadow:none;background:#fff; }
.login-portal-switch { width:100%;margin:0 0 24px;padding:4px;display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:11px;background:#F0F4F9; }
.login-portal-switch a { padding:9px 8px;border-radius:8px;color:#718096;font-size:10.5px;font-weight:700;text-align:center; }
.login-portal-switch a.active { color:#123A67;background:#fff;box-shadow:0 2px 8px rgba(15,39,71,.09); }
.unified-login-logo-wrap { width:132px;height:102px;margin:0 auto 14px;padding:5px;display:grid;place-items:center;overflow:hidden;border-radius:26px;background:radial-gradient(circle,#FAFCFF 0%,#EAF2FB 78%,#E3EDF8 100%);box-shadow:inset 0 0 0 1px rgba(39,101,170,.07); }
.unified-login-logo { width:100%;height:100%;display:block;object-fit:contain;mix-blend-mode:multiply;filter:saturate(1.06) contrast(1.04); }
.login-card-heading { margin-bottom:21px;text-align:center; }
.login-card-heading span { color:#2F80ED;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; }
.login-card-heading h1 { margin:7px 0 5px;color:#102844;font-size:25px;letter-spacing:-.025em; }
.login-card-heading p { margin:0;color:#6B7A8D;font-size:11.5px;font-weight:550; }
.unified-login-form { text-align:left; }
.unified-login-form label { margin:0 0 6px;display:block;color:#344054;font-size:10.5px;font-weight:650; }
.unified-login-form input { height:45px;margin:0 0 14px;border:1px solid #D8E0EA;border-radius:9px;background:#FBFCFE;box-shadow:inset 0 1px 2px rgba(15,39,71,.025); }
.unified-login-form input:focus { border-color:#6AA8F5;background:#fff;box-shadow:0 0 0 3px rgba(47,128,237,.11); }
.login-submit { width:100%;height:46px;margin-top:3px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:9px;background:linear-gradient(135deg,#123B68,#1E6FBA);box-shadow:0 9px 18px rgba(25,94,160,.18); }
.login-submit:hover { transform:translateY(-1px);box-shadow:0 12px 22px rgba(25,94,160,.23); }
.login-security-note { margin-top:20px;padding:11px 12px;display:flex;align-items:center;gap:10px;border:1px solid #E5EBF2;border-radius:10px;background:#F8FAFD;text-align:left; }
.login-security-note>span { width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:7px;color:#236DB5;background:#E7F2FF;font-size:10px;font-weight:800; }
.login-security-note p { margin:0;line-height:1.25; }
.login-security-note strong,.login-security-note small { display:block; }
.login-security-note strong { color:#344054;font-size:10px; }
.login-security-note small { margin-top:3px;color:#7A8798;font-size:9.5px; }
@media(max-width:760px){.unified-login-body{padding:14px}.unified-login-shell{display:block;min-height:0;border-radius:18px}.unified-login-intro{display:none}.unified-login-card{min-height:calc(100vh - 28px);padding:28px 25px}.unified-login-logo-wrap{width:124px;height:96px}.login-portal-switch{margin-bottom:22px}}
@media (max-width: 720px) {
  .staff-login-shell { display: block; min-height: 0; }
  .staff-login-intro { display: none; }
  .staff-login-card { padding: 38px 27px; }
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 140;
}

/* ========================================================================== */
/* Premium deep-navy interface                                                */
/* ========================================================================== */
:root {
  --navy-950: #07172B;
  --navy-900: #091A30;
  --navy-800: #0F2747;
  --navy-700: #173A63;
  --blue-600: #2F80ED;
  --blue-100: #EAF3FF;
  --surface: #FFFFFF;
  --canvas: #F4F7FB;
  --line: #E4EAF2;
  --text: #172033;
  --muted: #667085;
  --success: #16A36A;
  --warning: #F5A524;
  --danger: #DC3545;
  --sidebar-width: 272px;
  --topbar-height: 76px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 39, 71, 0.04), 0 4px 12px rgba(15, 39, 71, 0.04);
  --shadow-md: 0 12px 32px rgba(15, 39, 71, 0.09);
}

body { background: var(--canvas); color: var(--text); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(47,128,237,.25); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.main { margin-left: var(--sidebar-width); width: calc(100% - var(--sidebar-width)); }
.content-area { padding: 0 40px 44px; }
.page { padding: 32px 0 0; max-width: 1440px; margin: 0 auto; }

/* Premium sidebar */
.sidebar {
  width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 160;
  height: 100vh; padding: 24px 16px 18px;
  background: linear-gradient(180deg, var(--navy-900) 0%, var(--navy-950) 100%);
  color: #fff; border-right: 1px solid rgba(255,255,255,.05);
  box-shadow: 10px 0 35px rgba(7,23,43,.08);
  transition: transform .25s ease;
}
.crest-block { min-height: 72px; gap: 12px; padding: 0 3px; }
.crest, .school-logo {
  width: 68px; height: 62px; border-radius: 14px; flex: 0 0 68px; object-fit: contain;
  background: linear-gradient(145deg, #3B8EFA, #1E6FD8); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 14px; box-shadow: 0 8px 20px rgba(47,128,237,.25);
}
.school-logo { padding:3px;background:#F3F7FC;box-shadow:inset 0 0 0 1px rgba(255,255,255,.78),0 8px 20px rgba(0,0,0,.2);filter:saturate(1.08) contrast(1.06); }
.school-name { font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.35; color: #fff; }
.school-sub { margin-top: 3px; color: #94A7BE; opacity: 1; font-size: 10.5px; letter-spacing: .45px; text-transform: uppercase; }
.sidebar nav { margin-top: 28px; padding-right: 2px; }
.nav-section-label { padding: 0 12px 8px; color: #71859E; font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.nav-section-spaced { margin-top: 18px; }
.nav-item, .nav-group summary {
  min-height: 42px; display: flex; align-items: center; margin-bottom: 4px; padding: 10px 12px;
  border-radius: 9px; color: #B8C6D8; opacity: 1; font-size: 13px; font-weight: 500;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover, .nav-group summary:hover { color: #fff; background: rgba(255,255,255,.065); }
.nav-item.active {
  position: relative; color: #fff; background: linear-gradient(90deg, rgba(47,128,237,.28), rgba(47,128,237,.13));
  box-shadow: inset 0 0 0 1px rgba(94,161,250,.16); font-weight: 600;
}
.nav-item.active::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 4px 4px 0; background: #5EA1FA; }
.nav-group { margin-bottom: 3px; }
.nav-group summary { justify-content: space-between; }
.nav-group summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .18s ease; }
.nav-group[open] summary::after { transform: rotate(45deg); }
.nav-group.has-active summary { color: #fff; }
.nav-group .nav-item { min-height: 36px; margin-left: 10px; padding: 8px 12px 8px 22px; font-size: 12.5px; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0 8px 8px 0; }
.sidebar-footer { padding-top: 8px; }
.ledger-line { background: rgba(255,255,255,.09); margin: 0 8px 14px; }
.footer-user { padding: 5px 10px; color: #D7E0EB; line-height: 1.45; }
.footer-user strong { font-size: 12.5px; font-weight: 600; }
.role-tag { color: #7F94AD; opacity: 1; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.logout-link { margin: 6px 4px 0; padding: 9px 10px; color: #95A8BE; opacity: 1; border-radius: 8px; display: flex; justify-content: space-between; }
.logout-link:hover { color: #fff; background: rgba(255,255,255,.06); }

/* Top navigation */
.topbar {
  height: var(--topbar-height); padding: 0 40px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 120; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.topbar-leading, .topbar-actions, .topbar-user { display: flex; align-items: center; }
.topbar-leading { gap: 15px; }
.topbar-actions { gap: 18px; }
.sidebar-toggle {
  position: static; z-index: auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; color: var(--navy-800); display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(15,39,71,.03); transition: background .18s, border-color .18s;
}
.sidebar-toggle span { display: block; width: 16px; height: 1.5px; border-radius: 2px; background: currentColor; }
.sidebar-toggle:hover { background: var(--blue-100); color: var(--blue-600); border-color: #CFE2FF; }
.topbar-page { display: flex; flex-direction: column; gap: 2px; }
.topbar-context { color: #8A96A8; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.topbar-page strong { color: var(--navy-800); font-size: 16px; font-weight: 600; }
.academic-chip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; font-size: 11.5px; font-weight: 500; }
.academic-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(22,163,106,.1); }
.topbar-user { gap: 10px; padding-left: 18px; border-left: 1px solid var(--line); }
.user-avatar { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--navy-800); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.user-summary { display: flex; flex-direction: column; gap: 2px; }
.user-summary strong { font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-summary span { color: var(--muted); font-size: 10.5px; }

/* Refined shared content components */
.page-header { margin-bottom: 26px; }
.eyebrow { color: var(--blue-600); font-size: 10.5px; letter-spacing: .09em; }
.page-header h1 { font-family: 'Inter', sans-serif; color: var(--navy-800); font-size: clamp(25px, 3vw, 32px); font-weight: 650; letter-spacing: -.035em; }
.flash { max-width: 1440px; margin: 20px auto 0; padding: 12px 15px; border: 1px solid transparent; border-radius: 10px; box-shadow: var(--shadow-sm); }
.flash-success { background: #ECFDF5; color: #087A4D; border-color: #C8F1DF; }
.flash-error { background: #FFF1F2; color: #B42332; border-color: #FFD6DA; }
.stat-grid { gap: 18px; margin-bottom: 20px; }
.stat-card {
  min-height: 126px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card::before { top: 20px; right: auto; left: 20px; width: 34px; height: 4px; border-radius: 4px; }
.stat-label { margin: 17px 0 8px; color: var(--muted); font-size: 11.5px; font-weight: 500; }
.stat-value { color: var(--navy-800); font-family: 'Inter', sans-serif; font-size: 24px; font-weight: 650; letter-spacing: -.025em; }
.section-card { padding: 23px 24px; margin-bottom: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.section-card h3 { font-family: 'Inter', sans-serif; color: var(--navy-800); font-size: 15px; font-weight: 650; }
.section-header-row { margin-bottom: 16px; gap: 15px; }
.link-button { color: var(--blue-600); font-weight: 600; }
.due-row, .history-row { padding: 13px 2px; border-color: #EDF1F6; }
.due-name { color: var(--text); font-weight: 600; }
.status-tab { width: 4px; }
.toolbar { gap: 10px; }
.search-box, select, .toolbar select, .field input, .field select { background: #fff; border-color: #D9E1EC; border-radius: var(--radius-sm); }
.field input, .field select { min-height: 42px; }
.search-box:focus-within, .field input:focus, .field select:focus, select:focus { border-color: #83B5F6; box-shadow: 0 0 0 3px rgba(47,128,237,.11); outline: none; }
.primary-button { min-height: 39px; padding: 9px 16px; border-radius: var(--radius-sm); background: var(--navy-800); color: #fff; box-shadow: 0 5px 12px rgba(15,39,71,.13); transition: transform .18s, background .18s; }
.primary-button:hover { background: var(--navy-700); transform: translateY(-1px); }
.ghost-button { min-height: 36px; background: #fff; border-color: #D9E1EC; border-radius: var(--radius-sm); color: var(--navy-800); }
.ghost-button:hover { background: #F8FAFD; border-color: #C5D1DF; }
.section-card, .stat-card, .index-card, .ledger-table { border-color: var(--line); }
.index-card, .ledger-table { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.ledger-header-row, .ledger-total-row, .balance-strip { background: #F7F9FC; }
.ledger-html-table th { padding: 11px 10px; background: #F8FAFC; color: #667085; }
.ledger-html-table td { padding: 12px 10px; border-color: #EDF1F6; }
.ledger-html-table tbody tr:hover { background: #FAFCFF; }

body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main { margin-left: 0; width: 100%; }

@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .content-area, .topbar { padding-left: 26px; padding-right: 26px; }
}

@media (max-width: 900px) {
  .sidebar { display: flex; transform: translateX(-105%); width: min(286px, 86vw); box-shadow: 12px 0 40px rgba(7,23,43,.3); }
  .main, body.sidebar-collapsed .main { margin-left: 0; width: 100%; }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; background: rgba(7,23,43,.55); backdrop-filter: blur(2px); }
  .topbar { height: 68px; }
  .content-area { padding-bottom: 30px; }
  .page { padding-top: 25px; }
  .academic-chip { display: none; }
}

@media (max-width: 620px) {
  .content-area, .topbar { padding-left: 16px; padding-right: 16px; }
  .topbar-user { padding-left: 0; border: 0; }
  .user-summary { display: none; }
  .topbar-context { display: none; }
  .topbar-page strong { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .stat-grid { grid-template-columns: 1fr; gap: 12px; }
  .stat-card { min-height: 108px; }
  .section-card { padding: 18px 16px; overflow-x: auto; }
  .section-header-row { align-items: flex-start; flex-direction: column; }
  .page-header { margin-bottom: 20px; }
}
@media print {
  .sidebar, .topbar, .no-print, .flash { display: none !important; }
  .main-content, .page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .section-card, .stat-card { box-shadow: none !important; break-inside: avoid; }
}

/* Dashboard */
.dashboard-page { padding-top: 26px; }
.dashboard-hero {
  position: relative; overflow: hidden; min-height: 164px; margin-bottom: 22px; padding: 30px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  color: #fff; border-radius: 16px; background: linear-gradient(125deg, #0A1E37 0%, #0F3159 62%, #164D82 100%);
  box-shadow: 0 16px 38px rgba(9,26,48,.15);
}
.dashboard-hero::after { content: ''; position: absolute; width: 260px; height: 260px; right: -80px; top: -125px; border: 52px solid rgba(255,255,255,.045); border-radius: 50%; }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-kicker { margin-bottom: 8px; color: #8EBDF5; font-size: 10.5px; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-hero h1 { margin: 0; max-width: 700px; color: #fff; font-size: clamp(24px,3vw,31px); font-weight: 650; letter-spacing: -.035em; }
.dashboard-hero p { margin: 9px 0 0; color: #B9C9DA; font-size: 13px; line-height: 1.55; }
.hero-actions { display: flex; gap: 10px; flex-shrink: 0; }
.hero-primary, .hero-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 9px 15px; border-radius: 9px; font-size: 12px; font-weight: 600; transition: transform .18s, background .18s; }
.hero-primary { color: var(--navy-900); background: #fff; box-shadow: 0 7px 18px rgba(4,17,32,.18); }
.hero-secondary { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.08); }
.hero-primary:hover, .hero-secondary:hover { transform: translateY(-1px); }
.hero-secondary:hover { background: rgba(255,255,255,.14); }
.hero-date { min-width: 170px; padding: 14px 17px; border: 1px solid rgba(255,255,255,.15); border-radius: 11px; background: rgba(255,255,255,.07); text-align: right; }
.hero-date span, .hero-date strong { display: block; }
.hero-date span { margin-bottom: 4px; color: #91A8C0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.hero-date strong { color: #fff; font-size: 12.5px; }

.dashboard-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.dashboard-stat { min-width: 0; padding: 19px; display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s; }
.dashboard-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-icon, .action-icon { display: grid; place-items: center; flex-shrink: 0; font-weight: 700; }
.stat-icon { width: 42px; height: 42px; border-radius: 11px; font-size: 13px; }
.stat-blue, .action-blue { color: #1768CC; background: #EAF3FF; }
.stat-green, .action-green { color: #078653; background: #E8F8F1; }
.stat-red { color: #C32C3B; background: #FFF0F2; }
.stat-amber, .action-amber { color: #B16A00; background: #FFF5DF; }
.action-violet { color: #7546C8; background: #F2ECFF; }
.stat-copy { min-width: 0; }
.stat-copy > span, .stat-copy > strong, .stat-copy > small { display: block; }
.stat-copy > span { margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 500; }
.stat-copy > strong { overflow: hidden; color: var(--navy-800); font-size: clamp(18px,2vw,22px); font-weight: 680; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.stat-copy > small { margin-top: 5px; color: #98A2B3; font-size: 9.5px; }

.dashboard-main-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); gap: 20px; margin-bottom: 20px; }
.collection-card, .quick-actions-card, .class-overview-card { padding: 23px 24px; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); }
.dashboard-section-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.dashboard-section-title span { display: block; margin-bottom: 4px; color: #98A2B3; font-size: 9.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.dashboard-section-title h3 { margin: 0; color: var(--navy-800); font-size: 15px; font-weight: 650; }
.dashboard-section-title > a { color: var(--blue-600); font-size: 11.5px; font-weight: 600; }
.collection-summary { display: flex; align-items: center; gap: 20px; margin: 7px 0 18px; }
.collection-summary > div { min-width: 90px; }
.collection-summary > div strong { display: block; color: var(--navy-800); font-size: 31px; font-weight: 700; letter-spacing: -.045em; }
.collection-summary > div span { color: var(--muted); font-size: 10.5px; }
.collection-summary p { margin: 0; padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 11.5px; line-height: 1.65; }
.collection-summary p b { color: var(--text); font-weight: 600; }
.collection-progress, .progress-track { overflow: hidden; background: #EBF0F6; border-radius: 999px; }
.collection-progress { height: 10px; }
.collection-progress span, .progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2F80ED, #58A4F8); }
.collection-legend { display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: var(--muted); font-size: 10.5px; }
.collection-legend span { display: flex; align-items: center; gap: 6px; }
.collection-legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-collected { background: var(--blue-600); }
.legend-balance { background: #DCE4EE; }
.collection-legend b { color: var(--text); font-weight: 600; }
.all-time-strip { margin-top: 21px; padding: 11px 13px; display: flex; justify-content: space-between; gap: 16px; border-radius: 8px; background: #F7F9FC; color: var(--muted); font-size: 10.5px; }
.all-time-strip b { color: var(--navy-800); }

.quick-action-grid { display: grid; gap: 9px; }
.quick-action { min-width: 0; padding: 10px; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 9px; transition: background .18s, border-color .18s, transform .18s; }
.quick-action:hover { background: #F8FAFD; border-color: var(--line); transform: translateX(2px); }
.action-icon { width: 36px; height: 36px; border-radius: 9px; font-size: 12px; }
.quick-action div { min-width: 0; }
.quick-action strong, .quick-action small { display: block; }
.quick-action strong { color: var(--text); font-size: 11.5px; font-weight: 600; }
.quick-action small { margin-top: 3px; overflow: hidden; color: #98A2B3; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.quick-action > b { color: #A3AFBE; font-size: 14px; font-weight: 400; }

.teacher-dashboard-grid { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(400px,1.25fr); gap: 20px; }
.class-overview-card { min-height: 290px; background: linear-gradient(150deg,#fff,#F7FAFE); }
.class-card-head { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-start; }
.class-card-head span { color: #98A2B3; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.class-card-head h2 { margin: 5px 0 0; color: var(--navy-800); font-size: 25px; }
.class-badge { min-width: 52px; height: 52px; padding: 0 8px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--navy-800); font-size: 17px; font-weight: 700; box-shadow: 0 8px 18px rgba(15,39,71,.18); }
.metric-row { display: flex; justify-content: space-between; padding: 9px 0; color: var(--muted); font-size: 11.5px; }
.metric-row strong { color: var(--text); }
.progress-track { height: 8px; margin-top: 13px; }
.progress-caption { display: flex; justify-content: space-between; margin-top: 8px; color: #98A2B3; font-size: 9.5px; }
.progress-caption strong { color: var(--blue-600); }
.teacher-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
.teacher-actions .quick-action { min-height: 74px; }
.dashboard-empty { padding: 55px 24px; border: 1px dashed #C8D3E0; border-radius: 13px; background: #fff; text-align: center; }
.dashboard-empty-icon { width: 45px; height: 45px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 12px; color: #B16A00; background: #FFF5DF; font-weight: 700; }
.dashboard-empty h3 { margin: 0 0 6px; color: var(--navy-800); font-size: 15px; }
.dashboard-empty p { margin: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 1200px) {
  .dashboard-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-main-grid { grid-template-columns: 1fr; }
  .quick-action-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .dashboard-hero { align-items: flex-start; flex-direction: column; padding: 25px; }
  .hero-actions { width: 100%; }
  .hero-actions a { flex: 1; }
  .hero-date { text-align: left; }
  .teacher-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dashboard-stat-grid, .quick-action-grid, .teacher-actions { grid-template-columns: 1fr; }
  .dashboard-hero { min-height: 190px; padding: 23px 20px; }
  .dashboard-hero p { max-width: 290px; }
  .collection-card, .quick-actions-card, .class-overview-card { padding: 19px 16px; }
  .collection-summary { align-items: flex-start; flex-direction: column; gap: 10px; }
  .collection-summary p { padding: 0; border: 0; }
  .collection-legend, .all-time-strip { align-items: flex-start; flex-direction: column; }
}

/* Student records */
.records-heading { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.records-heading h1 { margin: 3px 0 6px; color: var(--navy-800); font-size: clamp(25px,3vw,32px); font-weight: 680; letter-spacing: -.035em; }
.records-heading p { margin: 0; color: var(--muted); font-size: 11.5px; }
.records-heading-actions { display: flex; gap: 9px; flex-shrink: 0; }
.records-toolbar { margin-bottom: 20px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.records-toolbar .search-box { min-width: 230px; }
.view-switcher { margin-left: auto; display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #F7F9FC; }
.view-switcher a { padding: 6px 10px; border-radius: 6px; color: var(--muted); font-size: 10.5px; font-weight: 600; }
.view-switcher a.active { color: #fff; background: var(--navy-800); box-shadow: 0 3px 8px rgba(15,39,71,.15); }
.student-record-card { position: relative; overflow: visible; min-height: 250px; border-radius: 13px; transition: transform .2s, box-shadow .2s; }
.student-record-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.student-card-body { flex: 1; padding: 19px 20px; }
.student-avatar { width: 38px; height: 38px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 11px; color: #1768CC; background: #EAF3FF; font-size: 13px; font-weight: 700; }
.student-record-card .card-name { color: var(--navy-800); font-family: 'Inter',sans-serif; font-size: 15px; font-weight: 650; }
.student-record-card .card-number { margin-top: 4px; color: #8B98A9; font-size: 10.5px; }
.student-record-card .card-fact-row { padding: 4px 0; font-size: 11.5px; }
.student-record-card .card-actions { margin-top: 16px; padding-top: 13px; border-top: 1px solid #EDF1F6; }
.student-record-card .card-actions .primary-button { min-height: 32px; padding: 6px 11px; font-size: 10.5px; }
.student-record-card .card-actions .ghost-button { min-height: 32px; padding: 6px 10px; font-size: 10.5px; }
@media (max-width: 760px) {
  .records-heading { align-items: flex-start; flex-direction: column; }
  .records-heading-actions { width: 100%; }
  .records-heading-actions a { flex: 1; }
  .view-switcher { margin-left: 0; }
}

/* Academic analysis */
.analysis-toolbar { margin-bottom: 16px; }
.module-heading-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.analysis-context { margin-bottom: 15px; padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; border: 1px solid #DCE5F0; border-radius: 10px; color: var(--navy-800); background: #F7FAFE; font-size: 11px; }
.analysis-context span { color: var(--muted); }
.analysis-stat-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 13px; }
.analysis-stat { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); }
.analysis-stat span,.analysis-stat strong,.analysis-stat small { display: block; }
.analysis-stat span { color: var(--muted); font-size: 10px; }
.analysis-stat strong { margin: 8px 0 5px; color: var(--navy-800); font-size: 23px; }
.analysis-stat small { color: #8996A7; font-size: 9.5px; }
.analysis-grid { margin-bottom: 18px; display: grid; grid-template-columns: 1.45fr .75fr; gap: 16px; }
.grade-distribution { display: grid; gap: 11px; }
.grade-band { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 10px; }
.grade-band > div:first-child { display: flex; justify-content: space-between; color: var(--navy-800); font-size: 10.5px; }
.grade-band > div:first-child span { color: #97A2B1; font-size: 9px; }
.grade-track { height: 7px; overflow: hidden; border-radius: 9px; background: #EAF0F7; }
.grade-track span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#1768CC,#3D8AE2); }
.grade-band b { color: var(--navy-800); font-size: 11px; text-align: right; }
.completion-list { display: grid; gap: 17px; }
.completion-list > div { display: flex; align-items: center; gap: 11px; }
.completion-list p,.completion-list strong,.completion-list small { margin: 0; display: block; }
.completion-list p { color: var(--text); font-size: 11px; }
.completion-list strong { float: right; margin-left: 8px; color: var(--navy-800); }
.completion-list small { margin-top: 3px; color: #98A2B3; font-size: 9px; }
.completion-dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; }
.completion-dot.complete { background: #2F855A; }.completion-dot.partial { background: #D69E2E; }.completion-dot.missing { background: #A0AEC0; }
.analysis-table-head { padding: 17px 18px 12px; }.analysis-table-head small,.subtle-label { color: #98A2B3; font-size: 9.5px; }
.table-subline { margin-top: 3px; display: block; color: #98A2B3; font-size: 9px; }
@media (max-width: 900px) { .analysis-stat-grid { grid-template-columns: repeat(2,1fr); }.analysis-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .analysis-stat-grid { grid-template-columns: 1fr; }.analysis-context { flex-direction: column; } }

/* Parent portal */
.portal-body { min-height: 100vh; background: var(--canvas); }
.portal-topbar { height: 72px; padding: 0 max(24px,calc((100vw - 1080px)/2)); display: flex; align-items: center; gap: 12px; color: #fff; background: var(--navy-900); box-shadow: 0 5px 20px rgba(7,23,43,.14); }
.portal-logo { width: 42px; height: 42px; flex: 0 0 42px; object-fit: cover; border-radius: 11px; }
.portal-brand { display: flex; flex-direction: column; min-width: 180px; }
.portal-brand strong { font-size: 13px; }
.portal-brand span { margin-top: 2px; color: #8EA4BD; font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; }
.portal-nav { flex: 1; }
.portal-nav a { padding: 8px 11px; color: #B7C5D5; font-size: 11.5px; }
.portal-mobile-signout { display:none; }
.portal-menu-toggle { display:none;width:38px;height:38px;padding:10px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);color:#fff; }
.portal-menu-toggle span { display:block;height:1.5px;margin:4px 0;border-radius:2px;background:currentColor; }
.portal-user { display: flex; align-items: center; gap: 9px; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.1); }
.portal-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--blue-600); font-size: 11px; font-weight: 700; }
.portal-user strong, .portal-user a { display: block; }
.portal-user strong { max-width: 150px; overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.portal-user a { margin-top: 2px; color: #8EA4BD; font-size: 9.5px; }
.portal-main { max-width: 1080px; margin: 0 auto; padding: 27px 24px 42px; }
.portal-main > .flash { margin-top: 0; }
.portal-welcome, .portal-student-hero { color: #fff; border-radius: 15px; background: linear-gradient(125deg,#091A30,#123B68); box-shadow: 0 14px 32px rgba(9,26,48,.14); }
.portal-welcome { min-height: 155px; margin-bottom: 26px; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.portal-welcome span, .portal-student-hero > a { color: #8EBDF5; font-size: 9.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.portal-welcome h1 { margin: 7px 0; color: #fff; font-size: 27px; letter-spacing: -.035em; }
.portal-welcome p { margin: 0; color: #B9C9DA; font-size: 11.5px; }
.portal-calendar { min-width: 125px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; background: rgba(255,255,255,.07); }
.portal-calendar small, .portal-calendar strong { display: block; }
.portal-calendar small { color: #91A8C0; font-size: 9px; }
.portal-calendar strong { margin-top: 5px; color: #fff; font-size: 13px; }
.portal-children-heading { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-end; }
.portal-children-heading span { color: #98A2B3; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.portal-children-heading h2 { margin: 4px 0 0; color: var(--navy-800); font-size: 19px; }
.portal-children-heading > small { color: var(--muted); font-size: 10px; }
.portal-child-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.portal-child-card { display: flex; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-sm); transition: transform .2s,box-shadow .2s; }
.portal-child-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.portal-child-body { flex: 1; padding: 20px; }
.portal-child-avatar, .portal-student-avatar { display: grid; place-items: center; color: #1768CC; background: #EAF3FF; font-weight: 700; }
.portal-child-avatar { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 11px; font-size: 13px; }
.portal-child-card .primary-button { min-height: 34px; font-size: 10.5px; }
.portal-student-hero { margin-bottom: 19px; padding: 22px 26px; }
.portal-student-identity { margin-top: 19px; display: flex; align-items: center; gap: 15px; }
.portal-student-avatar { width: 58px; height: 58px; flex: 0 0 58px; border-radius: 15px; color: #fff; background: rgba(255,255,255,.12); font-size: 18px; }
.portal-student-identity span { color: #8EBDF5; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; }
.portal-student-identity h1 { margin: 4px 0; color: #fff; font-size: 24px; }
.portal-student-identity p { margin: 0; color: #AFC1D4; font-size: 10px; }
.portal-login-body { padding: 20px; background: #EAF0F7; }
.portal-login-shell { width: min(920px,100%); min-height: 570px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 25px 60px rgba(9,26,48,.16); }
.portal-login-intro { padding: 52px; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: linear-gradient(145deg,#07172B,#123E6D); }
.portal-login-intro span { color: #83B8F6; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.portal-login-intro h1 { max-width: 400px; margin: 17px 0 14px; font-size: 35px; line-height: 1.18; letter-spacing: -.045em; }
.portal-login-intro p { max-width: 390px; color: #B7C7D9; font-size: 12px; line-height: 1.7; }
.portal-login-intro small { color: #7990AA; }
.portal-login-card { align-self: center; width: 100%; padding: 44px 38px; border: 0; box-shadow: none; background: #fff; }
.portal-login-logo { width: 52px; height: 52px; margin: 0 auto 16px; display: block; object-fit: cover; border-radius: 12px; }
.report-student-photo { width:100%;height:100%;display:block;object-fit:cover;object-position:center;image-rendering:auto;transform:translateZ(0); }
.owner-intelligence-grid { margin:18px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.owner-intelligence-card { min-height:156px;padding:21px;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,#fff,#F7FAFD);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s; }
.owner-intelligence-card:hover { transform:translateY(-2px);box-shadow:var(--shadow-md); }
.owner-card-label { color:var(--blue-600);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; }
.owner-intelligence-card strong { margin-top:8px;color:var(--navy-800);font-size:17px; }
.owner-intelligence-card p { margin:8px 0 14px;color:var(--muted);font-size:11px;line-height:1.55; }
.owner-intelligence-card b { margin-top:auto;color:var(--blue-600);font-size:10.5px; }
@media(max-width:900px){.owner-intelligence-grid{grid-template-columns:1fr}}
@media (max-width: 720px) {
  .portal-menu-toggle { display:block;order:3; }
  .portal-nav { display:none;position:absolute;z-index:50;top:66px;left:15px;right:15px;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:#0B2039;box-shadow:0 18px 42px rgba(5,18,34,.32); }
  .portal-nav.is-open { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-nav a { padding:11px;border-radius:8px; }
  .portal-nav a:hover { background:rgba(255,255,255,.07);color:#fff; }
  .portal-nav .portal-mobile-signout { display:block;color:#FCA5A5;border-top:1px solid rgba(255,255,255,.10); }
  .portal-topbar { padding: 0 16px; }
  .portal-brand { min-width: 0; flex: 1; }
  .portal-user > div:last-child { display: none; }
  .portal-main { padding: 20px 15px 32px; }
  .portal-welcome { align-items: flex-start; flex-direction: column; padding: 23px 20px; }
  .portal-calendar { width: 100%; }
  .portal-login-shell { display: block; min-height: 0; }
  .portal-login-intro { display: none; }
  .portal-login-card { padding: 38px 27px; }
  .portal-finance-stats { grid-template-columns: 1fr !important; }
}

/* Alignment release: shared operational controls */
.control-panel { margin-bottom:18px;padding:24px; }
.table-actions { display:flex;align-items:center;gap:7px;flex-wrap:wrap; }
.inline-action { display:inline-flex;align-items:center;gap:6px;margin:0; }
.inline-action input { width:132px;min-height:32px; }
.coverage-cell { min-width:132px; }
.coverage-cell strong,.coverage-cell span { display:block; }
.coverage-cell span { margin-top:2px;color:var(--muted);font-size:9.5px; }
.mini-progress { width:100%;height:5px;margin-top:7px;overflow:hidden;border-radius:8px;background:#E7EDF4; }
.mini-progress i { display:block;width:var(--progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,#1D67B1,#4B91D5); }
.numeric-cell { text-align:right;white-space:nowrap; }
.status-draft,.status-open { background:#EEF2F6;color:#526173; }
.status-submitted { background:#E8F2FF;color:#185FA8; }
.status-approved,.status-closed,.status-locked { background:#E8F7EE;color:#27764A; }
.status-returned,.status-reopened { background:#FFF3D9;color:#9A6400; }
@media(max-width:620px){.control-panel{padding:18px}.inline-action{display:flex;width:100%}.inline-action input{flex:1;width:auto}.numeric-cell{text-align:left}}

/* Student forms and profile */
.student-form-page { max-width: 820px; }
.form-page-heading { margin-bottom: 22px; }
.form-back-link { display: inline-block; margin-bottom: 22px; color: var(--blue-600); font-size: 11px; font-weight: 600; }
.form-page-heading h1 { margin: 4px 0 7px; color: var(--navy-800); font-size: 30px; letter-spacing: -.035em; }
.form-page-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.premium-record-form { padding: 28px; gap: 17px; }
.form-section-heading { margin: 8px -4px 2px; padding: 0 4px 12px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.form-section-heading:first-of-type { margin-top: 0; }
.form-section-heading > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #1768CC; background: #EAF3FF; font-size: 9px; font-weight: 700; }
.form-section-heading strong, .form-section-heading small { display: block; }
.form-section-heading strong { color: var(--navy-800); font-size: 12.5px; }
.form-section-heading small { margin-top: 2px; color: #98A2B3; font-size: 9.5px; }
.premium-record-form textarea { width: 100%; border: 1px solid #D9E1EC !important; border-radius: 8px !important; padding: 10px 11px !important; color: var(--text) !important; }
.form-submit-row { margin: 7px -28px -28px; padding: 17px 28px; display: flex; flex-direction: row; align-items: center; gap: 8px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #F8FAFC; }
.student-profile-hero { margin-bottom: 21px; padding: 25px 28px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-radius: 15px; color: #fff; background: linear-gradient(125deg,#091A30,#123B68); box-shadow: 0 14px 34px rgba(9,26,48,.15); }
.profile-identity { display: flex; align-items: center; gap: 17px; min-width: 0; }
.profile-photo { width: 68px; height: 68px; flex: 0 0 68px; object-fit: cover; border: 3px solid rgba(255,255,255,.2); border-radius: 17px; }
.profile-initial { display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.13); font-size: 22px; font-weight: 700; }
.student-profile-hero .eyebrow { color: #8EBDF5; }
.student-profile-hero h1 { margin: 3px 0 5px; color: #fff; font-size: clamp(21px,3vw,28px); letter-spacing: -.03em; }
.student-profile-hero p { margin: 0; color: #B9C9DA; font-size: 11px; }
.profile-status { color: #DCE6F1 !important; background: rgba(255,255,255,.13) !important; text-transform: capitalize; vertical-align: middle; }
.profile-hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.profile-status-note { margin: -10px 0 20px; padding: 11px 14px; border: 1px solid #F2D8AB; border-radius: 9px; color: #8A5A0A; background: #FFF9ED; font-size: 11.5px; }
@media (max-width: 700px) {
  .premium-record-form { padding: 20px 16px; }
  .form-submit-row { margin: 7px -16px -20px; padding: 15px 16px; }
  .student-profile-hero { align-items: flex-start; flex-direction: column; padding: 22px 19px; }
  .profile-hero-actions { width: 100%; }
  .profile-hero-actions a { flex: 1; }
  .profile-photo { width: 56px; height: 56px; flex-basis: 56px; border-radius: 14px; }
}

/* Financial screens */
.finance-heading { margin-bottom: 21px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.finance-heading h1 { margin: 3px 0 6px; color: var(--navy-800); font-size: 30px; letter-spacing: -.035em; }
.finance-heading p { margin: 0; color: var(--muted); font-size: 11.5px; }
.finance-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; margin-bottom: 19px; }
.finance-summary { position: relative; overflow: hidden; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.finance-summary::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy-800); }
.finance-summary.summary-success::before { background: var(--success); }
.finance-summary.summary-danger::before { background: var(--danger); }
.finance-summary span, .finance-summary strong, .finance-summary small { display: block; }
.finance-summary span { color: var(--muted); font-size: 10.5px; }
.finance-summary strong { margin: 8px 0 6px; color: var(--navy-800); font-size: 21px; }
.finance-summary small { color: #98A2B3; font-size: 9.5px; }
.finance-toolbar { padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.premium-ledger-table { border-radius: 12px; box-shadow: var(--shadow-sm); }
.premium-ledger-table .ledger-header-row { min-height: 44px; background: #F7F9FC; }
.premium-ledger-table .ledger-row { min-height: 58px; transition: background .15s; }
.premium-ledger-table .ledger-row:hover { background: #FAFCFF; }
.transaction-stats { margin-top: 4px; }
.finance-table-card { padding: 0; overflow-x: auto; }
.finance-table-card .ledger-html-table th { padding: 13px 12px; }
.finance-table-card .ledger-html-table td { padding: 13px 12px; }
.budget-inline-form { display: grid; grid-template-columns: 105px minmax(180px,1fr) auto; gap: 7px; align-items: center; min-width: 390px; }
.budget-inline-form input { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; }
.payment-page { max-width: 650px; }
.payment-balance-card { margin-bottom: 18px; padding: 23px 25px; display: flex; justify-content: space-between; align-items: center; border-radius: 13px; color: #fff; background: linear-gradient(125deg,#091A30,#123B68); box-shadow: 0 12px 28px rgba(9,26,48,.15); }
.payment-balance-card span, .payment-balance-card strong, .payment-balance-card small { display: block; }
.payment-balance-card span { color: #91A8C0; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.payment-balance-card strong { margin: 7px 0 4px; color: #fff; font-size: 27px; }
.payment-balance-card small { color: #AFC1D4; font-size: 10px; }
.payment-student-badge { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: rgba(255,255,255,.12); font-weight: 700; }
.payment-form { margin-top: 18px; }
.finance-period-banner { margin:18px 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:hidden;border:1px solid #DCE4EE;border-radius:12px;background:#DCE4EE;gap:1px; }
.finance-period-banner>div { padding:16px 18px;background:#fff; }
.finance-period-banner span,.finance-period-banner strong { display:block; }
.finance-period-banner span { color:#7C8999;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em; }
.finance-period-banner strong { margin-top:5px;color:#142C4F;font-size:12px; }
.term-finance-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.payment-coverage-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;overflow:hidden;border:1px solid #E0E6EE;border-radius:10px;background:#E0E6EE; }
.payment-coverage-grid>div { padding:16px;background:#FAFCFE;text-align:center; }
.payment-coverage-grid span,.payment-coverage-grid strong { display:block; }
.payment-coverage-grid span { color:#7A8798;font-size:9.5px; }
.payment-coverage-grid strong { margin-top:6px;color:#142C4F;font-size:21px; }
.payslip-document { position:relative;max-width:900px;margin:0 auto;padding:34px;overflow:hidden;background:#fff; }
.payslip-document .receipt-watermark { position:absolute;inset:145px 0 auto;display:flex;justify-content:center;pointer-events:none;opacity:.035; }
.payslip-document .receipt-watermark img { width:min(470px,68%);height:auto;filter:grayscale(1); }
.payslip-document .receipt-document-layer { position:relative;z-index:1; }
.payslip-title { margin:24px 0 20px;padding-bottom:15px;display:flex;align-items:flex-end;justify-content:space-between;border-bottom:2px solid #142C4F; }
.payslip-title span { color:#7A8798;font-size:9px;font-weight:700;letter-spacing:.11em; }
.payslip-title h2 { margin:4px 0 0;color:#142C4F;font-size:25px;letter-spacing:-.03em; }
.payslip-meta-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-bottom:22px;overflow:hidden;border:1px solid #DEE5EE;border-radius:10px;background:#DEE5EE; }
.payslip-meta-grid > div { min-height:65px;padding:14px 16px;background:rgba(255,255,255,.96); }
.payslip-meta-grid span,.payslip-meta-grid strong { display:block; }
.payslip-meta-grid span { margin-bottom:5px;color:#8793A4;font-size:9px;text-transform:uppercase;letter-spacing:.07em; }
.payslip-meta-grid strong { color:#1B2C43;font-size:12px; }
.payslip-columns { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px; }
.payslip-columns section { overflow:hidden;border:1px solid #DEE5EE;border-radius:10px;background:rgba(255,255,255,.94); }
.payslip-columns h3 { margin:0;padding:11px 14px;color:#fff;background:#142C4F;font-size:10px;text-transform:uppercase;letter-spacing:.08em; }
.payslip-line { min-height:42px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid #EDF1F5;color:#526173;font-size:10.5px; }
.payslip-line strong { color:#1B2C43;white-space:nowrap; }
.payslip-line.payslip-total { border-bottom:0;background:#F5F8FB;color:#142C4F;font-weight:700; }
.payslip-net { margin-top:20px;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;color:#fff;background:linear-gradient(120deg,#0B2039,#173E6B); }
.payslip-net span { color:#C4D3E3;font-size:10px;font-weight:700;letter-spacing:.12em; }
.payslip-net strong { color:#fff;font-size:24px; }
.payslip-payment-meta { padding:12px 2px 17px;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid #DEE5EE;color:#7A8798;font-size:9.5px; }
.payslip-payment-meta strong { color:#34445A; }
.payslip-document .receipt-authorization { margin-top:28px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:22px;align-items:end;color:#7A8798;font-size:9px; }
.payslip-document .receipt-authorization strong { display:block;margin-top:5px;color:#273A52;font-size:10.5px; }
.authorization-line { padding-top:22px;border-top:1px solid #AEB8C5;text-align:center; }
.receipt-verification { margin:26px 0 0;color:#98A2B3;font-size:8.5px;text-align:center; }
@media (max-width: 760px) {
  .finance-heading { align-items: flex-start; flex-direction: column; }
  .finance-summary-grid { grid-template-columns: 1fr; }
  .premium-ledger-table { overflow-x: auto; }
  .premium-ledger-table > * { min-width: 760px; }
  .transaction-stats { grid-template-columns: 1fr !important; }
  .finance-period-banner,.term-finance-grid,.payment-coverage-grid { grid-template-columns:1fr; }
  .payslip-document { padding:22px 16px; }
  .payslip-meta-grid,.payslip-columns { grid-template-columns:1fr; }
  .payslip-payment-meta,.payslip-document .receipt-authorization { grid-template-columns:1fr;display:grid; }
}

.attendance-context-fields { margin-left: 10px; display: grid; grid-template-columns: 180px 120px auto; align-items: center; gap: 7px; }
.attendance-context-fields label { color: var(--muted); font-size: 10px; text-transform: none; white-space: nowrap; }
.attendance-context-fields input[type="checkbox"] { width: auto; }
@media (max-width: 1050px) {
  .attendance-register-row { align-items: flex-start !important; flex-wrap: wrap; }
  .attendance-context-fields { width: 100%; margin: 8px 0 0; grid-template-columns: minmax(180px,1fr) 130px auto; }
}
@media (max-width: 620px) {
  .attendance-toggle { width: 100%; }
  .attendance-context-fields { grid-template-columns: 1fr; }
}

/* Standard application typography release */
:root {
  --font-ui: 'Segoe UI', Arial, sans-serif;
  --font-display: 'Segoe UI', Arial, sans-serif;
  --font-data: 'Segoe UI', Arial, sans-serif;
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body, button, input, select, textarea { font-family: var(--font-ui); }
body { font-size: 14px; line-height: 1.5; letter-spacing: normal; }
body, body * { font-family: var(--font-ui) !important; }
.mono, .card-number { font-family: var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: normal; }
.crest { font-family: var(--font-ui); }

/* One clear sans-serif hierarchy throughout the application. */
.page-header h1,
.form-page-heading h1,
.finance-heading h1,
.dashboard-hero h1,
.portal-welcome h1,
.portal-student-identity h1,
.portal-login-intro h1,
.auth-card h1,
.receipt-card h2,
.report-card-box h1,
.report-card-box h2,
.payslip-title h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Product and navigation typography stays crisp at small sizes. */
.school-name,
.portal-brand strong,
.nav-item,
.nav-group summary,
.primary-button,
.ghost-button,
.small-link-button,
.text-button,
.link-button,
.form-back-link {
  font-family: var(--font-ui);
}
.school-name { font-size: 14px; font-weight: 700; letter-spacing: normal; }
.school-sub { font-size: 10.5px; line-height: 1.4; letter-spacing: .035em; }
.nav-section-label { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
.nav-item, .nav-group summary { min-height: 44px; font-size: 14.5px; font-weight: 500; line-height: 1.35; letter-spacing: normal; }
.nav-group .nav-item { min-height: 38px; font-size: 13.5px; line-height: 1.35; }
.nav-item.active, .nav-group.has-active summary { font-weight: 700; }
.footer-user, .logout-link { font-size: 12.5px; }

/* Page hierarchy and editorial rhythm. */
.page-header h1, .form-page-heading h1, .finance-heading h1 { line-height: 1.2; }
.dashboard-hero h1 { line-height: 1.15; }
.section-card h3,
.dashboard-section-title h3,
.portal-children-heading h2,
.owner-intelligence-card strong,
.card-name,
.student-record-card .card-name,
.due-name,
.form-section-heading strong {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: normal;
}
.section-card h3 { font-size: 15px; }
.portal-children-heading h2 { font-size: 18px; }
.card-name { font-size: 14.5px; }
.eyebrow,
.dashboard-kicker,
.owner-card-label,
.field label,
.ledger-html-table th,
.finance-period-banner span,
.payslip-meta-grid span,
.payslip-title span {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .085em;
}

/* Readable operational content-removes the overly tiny template appearance. */
.field label, .ledger-html-table th { font-size: 10.5px; }
.field input, .field select, .field textarea, .search-box input, select, .toolbar select,
.auth-card input, .comments-form-card textarea, .ece-remarks-form textarea {
  font-family: var(--font-ui);
  font-size: 13px;
}
.ledger-html-table td, .ledger-cell, .due-row, .history-row { font-size: 12.5px; }
.due-meta, .form-page-heading p, .finance-heading p, .portal-welcome p { font-size: 11px; line-height: 1.6; }
.primary-button { font-size: 12.5px; font-weight: 600; letter-spacing: normal; }
.ghost-button { font-size: 11.5px; font-weight: 600; }
.small-link-button { font-size: 10.5px; font-weight: 700; }
.status-pill { font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; letter-spacing: .025em; }

/* Financial values use the same standard face with tabular numerals. */
.finance-summary strong,
.stat-value,
.dashboard-stat strong,
.payment-balance-card strong,
.payslip-net strong {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
}
.receipt-card, .report-card-box, .payslip-document { font-family: var(--font-ui); }
.receipt-title-row h1, .receipt-detail-group h2, .premium-receipt h2,
.comments-form-card textarea, .ece-remarks-form textarea { font-family: var(--font-ui); }

@media print {
  body, body *, .receipt-card, .report-card-box, .payslip-document { font-family: Arial, sans-serif !important; }
}

/* Correctly scaled management and parent login screens. */
.unified-login-body { padding: 22px; }
.unified-login-shell {
  width: min(920px, 100%);
  min-height: 510px;
  grid-template-columns: minmax(0, 1fr) 400px;
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(7,23,43,.16);
}
.unified-login-intro { padding: 40px 40px 32px; }
.unified-login-intro h1 {
  max-width: 430px;
  margin: 20px 0 14px;
  font-family: var(--font-ui);
  font-size: 32px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.unified-login-intro p { font-size: 13px; line-height: 1.65; }
.login-feature-list { margin-top: 26px; gap: 11px; }
.login-feature-list span { font-size: 12.5px; font-weight: 500; }
.unified-login-card { padding: 22px 34px 24px; justify-content:flex-start; overflow-y:auto; }
.login-portal-switch { margin-bottom: 12px; }
.login-portal-switch a { padding: 10px 8px; font-size: 12px; }
.unified-login-logo-wrap { width: 172px; height: 132px; margin: 8px auto 10px; border-radius: 26px; }
.login-card-heading { margin-bottom: 12px; }
.login-card-heading span { font-size: 10.5px; letter-spacing: .07em; }
.login-card-heading h1 {
  margin: 3px 0;
  font-family: var(--font-ui);
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.015em;
}
.login-card-heading p { font-size: 12px; font-weight: 400; }
.unified-login-form label { margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.unified-login-form input { height: 42px; margin-bottom: 10px; font-size: 14px; }
.login-submit { height: 42px; font-size: 13px; box-shadow: 0 7px 16px rgba(25,94,160,.16); }
.login-security-note { margin-top: 12px; padding: 8px 10px; }
.login-security-note strong { font-size: 11px; }
.login-security-note small { font-size: 10px; }

@media (max-width: 760px) {
  .unified-login-body { min-height:100dvh;padding:8px;align-items:stretch; }
  .unified-login-shell { min-height:0;height:calc(100dvh - 16px);border-radius:12px; }
  .unified-login-card { min-height:0;height:100%;padding:14px 20px;justify-content:flex-start;overflow-y:auto; }
  .login-portal-switch { margin-bottom:8px; }
  .login-portal-switch a { padding:8px 6px;font-size:11px; }
  .unified-login-logo-wrap { width:112px;height:86px;margin:4px auto 5px;border-radius:16px; }
  .login-card-heading { margin-bottom:9px; }
  .login-card-heading span { font-size:9px; }
  .login-card-heading h1 { margin:2px 0;font-size:21px; }
  .login-card-heading p { font-size:10.5px; }
  .unified-login-form label { margin-bottom:4px;font-size:11px; }
  .unified-login-form input { height:40px;margin-bottom:8px; }
  .login-submit { height:41px;margin-top:1px; }
  .login-security-note { margin-top:9px;padding:7px 9px; }
  .login-security-note>span { width:20px;height:20px;flex-basis:20px; }
  .login-security-note small { margin-top:1px; }
}

@media (max-height: 620px) {
  .unified-login-body { padding:6px;align-items:stretch; }
  .unified-login-shell { min-height:0;height:calc(100dvh - 12px); }
  .unified-login-intro { padding:28px 34px; }
  .unified-login-intro h1 { margin:14px 0 10px;font-size:27px; }
  .login-feature-list { margin-top:18px;gap:8px; }
  .unified-login-card { padding-top:10px;padding-bottom:10px; }
  .unified-login-logo-wrap { width:172px;height:132px;margin:5px auto 7px;border-radius:26px; }
  .login-card-heading span { display:none; }
  .login-security-note { display:none; }
}

/* Secure password recovery */
.login-help-link { display:block;margin-top:13px;color:#236DB5;font-size:11.5px;font-weight:600;text-align:center; }
.login-help-inline { margin:-3px 0 8px;text-align:right; }
.recovery-body { min-height:100vh;padding:18px;background:#EEF3F9; }
.recovery-card { width:min(410px,100%);padding:30px 34px;border:1px solid #DFE6EF;background:#fff;box-shadow:0 20px 50px rgba(7,23,43,.13); }
.recovery-card .login-card-heading { margin-bottom:20px; }
.recovery-card .auth-sub { line-height:1.6; }
.recovery-full-button { width:100%;justify-content:center; }
.password-guidance { display:block;margin:-2px 0 14px;color:#6B7A8D;font-size:10.5px;line-height:1.45; }
@media(max-width:520px){.recovery-body{padding:10px}.recovery-card{padding:24px 20px}}
.handover-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.handover-preview-grid>div{border:1px solid #e1e6ee;border-radius:8px;padding:13px 15px;background:#f8fafc}.handover-preview-grid span{display:block;color:#667085;font-size:12px}.handover-preview-grid strong{display:block;color:#10233f;font-size:22px;margin-top:4px}@media(max-width:720px){.handover-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.password-toggle-wrap{position:relative;width:100%}.password-toggle-wrap>input{width:100%;padding-right:44px!important}.password-toggle-button{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:#66758a;cursor:pointer;z-index:2}.password-toggle-button:hover,.password-toggle-button:focus-visible{background:#eef3f8;color:#12345a;outline:none}.password-toggle-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.password-toggle-button.is-visible{color:#155fa0}
.request-pending{cursor:wait}.request-spinner{display:inline-block;width:13px;height:13px;margin-right:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:request-spin .7s linear infinite}.download-pending{pointer-events:none;opacity:.65;cursor:wait}@keyframes request-spin{to{transform:rotate(360deg)}}