:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-soft: #f0f3f6;
  --text: #17212b;
  --muted: #64717d;
  --border: #dce1e6;
  --accent: #145da0;
  --accent-dark: #0d467a;
  --success: #176b45;
  --warning: #8a5600;
  --danger: #a62b2b;
  --sidebar: #17212b;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
body { margin: 0; min-width: 320px; }
button, input, select, textarea { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid rgba(20, 93, 160, .35); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 264px; overflow-x: hidden; overflow-y: auto; background: var(--sidebar); color: #fff; transition: width .2s ease, transform .2s ease; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-copy { display: grid; min-width: 0; }
.sidebar-brand small { color: #b8c2cc; }
.sidebar-collapse { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 34px; margin-left: auto; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: transparent; color: #dce3e9; cursor: pointer; font-size: 1.45rem; line-height: 1; }
.sidebar-collapse:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-collapse span { transition: transform .2s ease; }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 7px; background: transparent; font-size: .78rem; font-weight: 800; letter-spacing: .05em; }
.brand-mark img { display: block; width: 42px; height: 42px; object-fit: contain; }
.sidebar-nav { padding: 14px 12px 28px; }
.nav-link { display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 2px 0; padding: 8px 10px; border-radius: 6px; color: #dce3e9; font-size: .91rem; }
.nav-link:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-link.active { background: var(--accent); color: #fff; }
.nav-icon { display: grid; place-items: center; width: 26px; height: 24px; color: #b9c5ce; font-size: .67rem; font-weight: 800; letter-spacing: .02em; }
.nav-icon img { display: block; width: 24px; height: 24px; object-fit: contain; filter: invert(83%) sepia(8%) saturate(321%) hue-rotate(164deg) brightness(94%) contrast(88%); }
.active .nav-icon { color: #fff; }
.nav-link.active .nav-icon img { filter: brightness(0) invert(1); }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group { margin-top: 10px; }
.nav-group-toggle { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: #9cabb8; cursor: pointer; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-align: left; text-transform: uppercase; }
.nav-group-toggle:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-group-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-short { display: none; }
.nav-group-chevron { margin-left: auto; font-size: 1rem; transition: transform .2s ease; }
.nav-group.expanded .nav-group-chevron { transform: rotate(180deg); }
.nav-group-panel[hidden] { display: none; }
.nav-group-panel { padding-left: 4px; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 20; background: rgba(23,33,43,.48); }

.app-content { min-width: 0; margin-left: 264px; transition: margin-left .2s ease; }
.top-header { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 12px 28px; border-bottom: 1px solid var(--border); background: var(--surface); }
.header-context { display: grid; flex: 1; }
.eyebrow { color: var(--muted); font-size: .75rem; }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-soft); color: var(--accent); font-weight: 800; }
.user-copy { display: grid; line-height: 1.2; }
.user-copy small { color: var(--muted); }
.menu-toggle { display: none; }
.main-content { max-width: 1500px; padding: 30px; }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.page-heading h1 { margin: 0; font-size: clamp(1.55rem, 3vw, 2rem); letter-spacing: -.03em; }
.page-heading p { max-width: 680px; margin: 5px 0 0; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.stack { display: grid; gap: 18px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.section-gap { margin-top: 18px; }
.span-2 { grid-column: span 2; }

.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.card-header h2, .card-header h3 { margin: 0; font-size: 1rem; }
.card-body { padding: 20px; }
.stat-card { display: grid; gap: 6px; padding: 20px; color: inherit; }
.stat-card:hover { border-color: #a9b8c5; text-decoration: none; }
.stat-label { color: var(--muted); font-size: .82rem; font-weight: 650; }
.stat-value { font-size: 1.8rem; font-weight: 780; letter-spacing: -.04em; }
.stat-note { color: var(--muted); font-size: .78rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: .86rem; line-height: 1.2; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.btn-secondary:hover, .btn-quiet:hover { background: var(--surface-soft); }
.btn-danger { border-color: #e4b9b9; background: #fff; color: var(--danger); }
.btn-quiet { color: var(--muted); }
.btn-sm { min-height: 34px; padding: 6px 10px; font-size: .78rem; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; }

.filters { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-group { display: grid; align-content: start; gap: 6px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: .82rem; font-weight: 700; }
.required::after { content: " *"; color: var(--danger); }
.form-control { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #bdc6cf; border-radius: 6px; background: #fff; color: var(--text); }
textarea.form-control { min-height: 90px; resize: vertical; }
.form-control:focus { border-color: var(--accent); outline: 3px solid rgba(20,93,160,.13); }
.form-hint { margin: 0; color: var(--muted); font-size: .76rem; }
.checkbox-group label { display: flex; align-items: center; gap: 9px; min-height: 42px; }
.checkbox-group input { width: 18px; height: 18px; accent-color: var(--accent); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; grid-column: 1 / -1; padding-top: 4px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
caption.sr-only, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
th, td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { background: #f8f9fa; color: #53606c; font-size: .74rem; letter-spacing: .035em; text-transform: uppercase; }
td { font-size: .88rem; }
tbody tr:last-child td { border-bottom: 0; }
.cell-primary { font-weight: 700; }
.cell-secondary { display: block; margin-top: 2px; color: var(--muted); font-size: .77rem; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.text-right { text-align: right; }
.empty-state { padding: 42px 20px; color: var(--muted); text-align: center; }
.access-card { padding: 16px; }
.access-card p { margin: 6px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }

.badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.badge-success { background: #e4f3eb; color: var(--success); }
.badge-warning { background: #fff2d8; color: var(--warning); }
.badge-neutral { background: #edf0f2; color: #53606c; }
.alert { margin-bottom: 18px; padding: 13px 15px; border: 1px solid; border-radius: 6px; }
.alert-success { border-color: #b9ddca; background: #eff9f3; color: var(--success); }
.alert-danger { border-color: #e5bcbc; background: #fff2f2; color: var(--danger); }
.alert-warning { border-color: #ead29d; background: #fff9e9; color: var(--warning); }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 18px; border-top: 1px solid var(--border); }
.page-link { display: grid; place-items: center; min-width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text); }
.page-link.active { border-color: var(--accent); background: var(--accent); color: #fff; }

.modal-backdrop { display: none; position: fixed; inset: 0; z-index: 60; place-items: center; padding: 20px; background: rgba(23,33,43,.62); }
.modal-backdrop.open { display: grid; }
.modal { width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: var(--radius); background: var(--surface); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.modal-header h2 { margin: 0; font-size: 1.15rem; }
.modal-body { padding: 20px; }

.login-page { display: grid; min-height: 100vh; grid-template-columns: minmax(320px, 480px) 1fr; }
.login-panel { display: grid; place-items: center; padding: 32px; background: #fff; }
.login-form { width: min(100%, 350px); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; }
.login-brand .brand-mark { color: #fff; }
.login-form h1 { margin: 0 0 8px; font-size: 1.8rem; }
.login-form > p { margin: 0 0 26px; color: var(--muted); }
.login-aside { display: flex; align-items: end; padding: 56px; background: var(--sidebar); color: #fff; position: relative; overflow: hidden; }
.login-aside::before { content: ''; position: absolute; inset: 0; background: url('../images/background.png') center/cover no-repeat; filter: brightness(0.1); z-index: 0; }
.login-aside > * { position: relative; z-index: 1; }
.login-aside div { max-width: 520px; }
.login-aside h2 { margin: 0 0 12px; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.045em; }
.login-aside p { color: #bdc8d1; font-size: 1.05rem; line-height: 1.6; }

.receipt { max-width: 760px; margin: 0 auto; }
.receipt-total { font-size: 1.5rem; font-weight: 800; }

.collection-search { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; }
.student-summary { display: grid; grid-template-columns: .7fr 1.25fr 1.5fr .6fr 1fr; gap: 1px; margin-top: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--border); }
.student-summary > div { display: grid; gap: 4px; padding: 13px; background: var(--surface); }
.collection-table-wrap { min-height: 210px; }
.collection-table tbody tr { transition: background .15s ease; }
.collection-table tbody tr.selected { background: #edf6ff; }
.collection-table .charge-checkbox { width: 19px; height: 19px; accent-color: var(--accent); cursor: pointer; }
.collection-table .payment-amount { min-width: 145px; }
.collection-table .payment-amount:disabled { background: var(--surface-soft); color: var(--muted); }
.selection-counter { padding: 5px 10px; border-radius: 999px; background: var(--surface-soft); color: var(--muted); font-size: .75rem; font-weight: 750; }
.selected-charges { min-height: 86px; max-height: 230px; overflow-y: auto; }
.selected-charge { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.selected-charge:last-child { border-bottom: 0; }
.empty-selection { padding: 28px 20px; color: var(--muted); text-align: center; }
.collection-checkout { display: grid; grid-template-columns: 180px 160px minmax(180px, 1fr) auto minmax(230px, 1fr); gap: 10px; align-items: end; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.collection-submit { min-height: 42px; }
.collection-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; padding: 8px 14px; border: 1px solid #dfc530; border-radius: 6px; background: #fff5a8; }
.collection-total span { color: #665a16; font-size: .78rem; font-weight: 750; }
.collection-total strong { font-size: 1.15rem; white-space: nowrap; }
.collection-history-summary .stat-card { padding: 16px 20px; }
.collection-history-summary .stat-value { font-size: 1.45rem; }

.receipt-brand { display: flex; align-items: center; gap: 12px; }
.receipt-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.receipt-meta > div { display: grid; gap: 3px; }
.receipt-signatures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px; margin-top: 70px; }
.receipt-signature { padding-top: 8px; border-top: 1px solid var(--text); text-align: center; font-size: .82rem; }

@media (min-width: 901px) {
  .menu-toggle { display: none !important; }
  body.sidebar-collapsed .sidebar { width: 76px; }
  body.sidebar-collapsed .app-content { margin-left: 76px; }
  body.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 16px; }
  body.sidebar-collapsed .brand-mark, body.sidebar-collapsed .brand-copy { display: none; }
  body.sidebar-collapsed .sidebar-collapse { margin-left: 0; }
  body.sidebar-collapsed .sidebar-collapse span { transform: rotate(180deg); }
  body.sidebar-collapsed .sidebar-nav { padding-inline: 10px; }
  body.sidebar-collapsed .nav-link { justify-content: center; padding-inline: 8px; }
  body.sidebar-collapsed .nav-label, body.sidebar-collapsed .nav-group-label, body.sidebar-collapsed .nav-group-chevron { display: none; }
  body.sidebar-collapsed .nav-group-short { display: inline; margin: auto; letter-spacing: .04em; }
  body.sidebar-collapsed .nav-group-toggle { justify-content: center; padding-inline: 4px; }
  body.sidebar-collapsed .nav-group-panel { padding-left: 0; }
}
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 1200px) { .student-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .collection-checkout { grid-template-columns: repeat(3, minmax(0, 1fr)); } .collection-total { grid-column: span 2; } }
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-collapse { display: none; }
  .sidebar-backdrop.open { display: block; }
  .app-content { margin-left: 0; }
  .menu-toggle { display: grid; }
  .filters { grid-template-columns: 1fr 1fr; }
  .student-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-checkout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-total { grid-column: 1 / -1; }
  .login-page { grid-template-columns: 1fr; }
  .login-aside { display: none; }
}
@media (max-width: 640px) {
  .top-header { min-height: 66px; padding: 10px 14px; }
  .header-context, .user-copy, .user-avatar { display: none; }
  .user-info { margin-left: auto; }
  .main-content { padding: 20px 14px; }
  .page-heading { align-items: stretch; flex-direction: column; }
  .page-heading .btn { width: 100%; }
  .grid-2, .grid-3, .grid-4, .form-grid, .filters { grid-template-columns: 1fr; }
  .collection-search, .student-summary, .collection-checkout, .receipt-meta { grid-template-columns: 1fr; }
  .collection-search .btn, .collection-submit { width: 100%; }
  .receipt-signatures { gap: 35px; }
  .filters .actions { width: 100%; }
  .filters .actions .btn { flex: 1; }
  .form-group.full { grid-column: auto; }
  .card-header { align-items: flex-start; flex-direction: column; }
  .row-actions { justify-content: flex-start; }
  .login-panel { padding: 22px; }
}
.billing-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.forecast-summary { margin-bottom: 18px; }

@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff; font-size: 10pt; }
  .page-heading { margin-bottom: 12px; }
  .forecast-summary { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .forecast-summary .stat-card { padding: 8px; }
  .forecast-summary .stat-value { font-size: 1rem; }
  th, td { padding: 6px; font-size: 8.5pt; }
  .sidebar, .top-header, .no-print, .sidebar-backdrop { display: none !important; }
  .app-content { margin: 0; }
  .main-content { max-width: none; padding: 0; }
  .card { border: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Options dropdown */
.options-dropdown { position: relative; display: inline-block; }
.options-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font: 700 .78rem inherit; color: var(--accent); cursor: pointer; transition: .2s; }
.options-btn:hover { background: var(--surface-soft); border-color: var(--accent); }
.options-btn svg { width: 14px; height: 14px; }
.options-menu { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: min(520px, 90vw); z-index: 100; overflow: hidden; }
.options-menu.open { display: block; }
.options-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; }
.options-menu-overlay.open { display: block; }
.options-menu-header { display: flex; border-bottom: 1px solid var(--border); }
.options-menu-header button { flex: 1; padding: 12px 16px; border: 0; background: none; font: 600 .78rem inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; transition: .2s; }
.options-menu-header button.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface-soft); }
.options-menu-body { padding: 0; }
.options-tab { display: none; }
.options-tab.active { display: block; }
.options-tab a, .options-tab button[type=submit], .options-tab label.file-label { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-bottom: 1px solid var(--border); background: none; width: 100%; text-align: left; font: 500 .78rem inherit; color: var(--text); cursor: pointer; transition: .15s; }
.options-tab a:hover, .options-tab button[type=submit]:hover, .options-tab label.file-label:hover { background: var(--surface-soft); }
.options-tab a:last-child, .options-tab button[type=submit]:last-child, .options-tab label.file-label:last-child { border-bottom: 0; }
.options-tab .opt-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; font-size: 14px; flex-shrink: 0; }
.opt-icon.blue { background: #e6f2fd; color: #19629e; }
.opt-icon.orange { background: #fff0e2; color: #e17b1e; }
.opt-icon.red { background: #fde8e5; color: #a62b2b; }
.opt-icon.green { background: #e4f7ee; color: #176b45; }
.options-tab .opt-info small { display: block; font-size: .65rem; color: var(--muted); margin-top: 2px; }
.options-tab .opt-info strong { display: block; font-size: .78rem; }
.options-tab .upload-form { padding: 14px 18px; }
.options-tab .upload-form label { display: block; font-size: .7rem; font-weight: 600; margin-bottom: 10px; }
.options-tab .upload-form input[type=file] { display: block; width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px; font-size: .75rem; margin-top: 4px; }
.options-tab .upload-form .btn { margin-top: 10px; width: 100%; }
.options-tab .current-file { padding: 10px 18px; font-size: .7rem; color: var(--muted); border-bottom: 1px solid var(--border); }
.options-tab .current-file a { color: var(--accent); text-decoration: underline; }