/* Shared visual system. Layout/interaction foundations remain in app.css. */
:root {
 --ink:#17263d; --primary:#075dce; --muted:#536176; --background:#f4f6fa;
 --border:#e1e7ef; --mint:#edf4ff; --radius:20px;
 --shadow:0 3px 16px #233a5e05;
}
body { color:var(--ink); background:var(--background); font-size:16px; line-height:1.65; }
a:hover { color:#034faa; }
h1 { font-size:32px; letter-spacing:-.6px; }
h2 { font-size:21px; letter-spacing:-.2px; }
small,.muted,.page-heading p { color:var(--muted); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
 outline:3px solid #2379e5; outline-offset:3px;
}
.sidebar { width:254px; padding:20px 16px; background:#fff; border-inline-end:1px solid var(--border); }
.workspace { margin-right:254px; }
.school-brand { display:flex; width:auto; min-height:66px; gap:10px; margin:0 8px; justify-content:flex-start; background:none; }
.school-logo { width:56px; height:56px; }
.school-brand .brand-name { color:var(--ink); font-size:18px; line-height:1.4; font-weight:700; }
.school-brand .brand-name small { color:var(--muted); font-size:12px; font-weight:400; }
.sidebar .school-badge { margin:16px 6px 14px; padding:10px 12px; background:#f5f7fb; border:1px solid var(--border); text-align:start; font-size:14px; }
.school-badge small { color:var(--muted); font-size:12px; }
.sidebar .nav-caption { font-size:12px; color:#5a687b; margin:16px 12px 9px; }
.sidebar nav { gap:3px; }
.sidebar .nav-link { min-height:45px; padding:6px 10px; font-size:14px; border-radius:11px; color:#43516a; gap:10px; }
.portal-icon { width:30px; height:30px; border-radius:9px; }
.sidebar .portal-icon .icon { width:17px; height:17px; }
.sidebar .nav-link:hover { background:#f2f5fa; border-color:transparent; color:var(--ink); box-shadow:none; }
.sidebar .nav-link.active { background:#edf4ff; color:#075dce; border-color:transparent; box-shadow:inset -3px 0 #075dce; }
.sidebar .nav-link.active .portal-icon { background:#075dce; color:#fff; }
.sidebar .portal-arrow { opacity:.35; }
.sidebar .install-app { border-top:1px solid var(--border); margin-top:22px; padding-top:12px; }
.mobile-install-help summary { color:var(--muted); font-size:12px; }
.topbar { height:76px; padding:0 32px; background:#ffffffed; }
.topbar-start { color:var(--muted); gap:12px; }
.topbar-logo { display:none; }
.breadcrumb-separator { padding:0 8px; }
.user-name { color:var(--ink); font-size:14px; }
.user-name small { color:var(--muted); }
.profile-avatar { border:1px solid var(--border); background:#fff; }
.icon-button { border-color:var(--border); border-radius:12px; background:#f9fafc; color:#536176; }
.icon-button:hover { background:#edf4ff; color:var(--primary); }
.main-content { padding:32px 32px 20px; max-width:1600px; }
.page-heading { margin-bottom:26px; align-items:center; }
.page-heading p { font-size:15px; margin-top:6px; max-width:780px; }
.eyebrow { color:#536176; font-size:12px; letter-spacing:0; margin-bottom:6px; }
.date-chip { background:#fff; border:1px solid var(--border); border-radius:12px; color:#536176; }
.card { padding:24px; margin-bottom:22px; border-color:var(--border); box-shadow:var(--shadow); border-radius:var(--radius); }
.card-header { margin-bottom:22px; gap:16px; }
.card-header p { color:var(--muted); font-size:14px; }
.card-header>a { font-size:14px; font-weight:700; }
.button { min-height:44px; font-size:14px; padding:11px 17px; border-radius:11px; background:var(--primary); box-shadow:0 2px 4px #075dce12; }
.button:hover { background:#034faa; color:#fff; }
.button.secondary { background:#fff; border:1px solid #dce3ed; color:#35455e; box-shadow:0 1px 2px #233a5e05; }
.button.secondary:hover { background:#f4f7fb; border-color:#b8cbe4; color:#075dce; }
.button.ghost { background:#edf4ff; color:#075dce; box-shadow:none; }
.button.danger { background:#fff0f1; border-color:#f4cdd3; color:#a72337; }
.button.danger:hover { background:#ffe4e8; color:#a72337; }
.field label { color:#35455e; font-size:14px; font-weight:700; margin-bottom:7px; }
.field-label-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-create-link { display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:#075dce; font-size:13px; min-height:44px; padding:5px; }
.section-create-link .icon { width:16px; height:16px; }
.section-dialog { width:min(650px,calc(100% - 32px)); max-height:calc(100dvh - 40px); border:1px solid #dfe6ef; border-radius:20px; padding:26px; color:var(--ink); box-shadow:0 25px 80px #17263d33; }
.section-dialog::backdrop { background:#17263d66; backdrop-filter:blur(3px); }
.section-dialog [hidden] { display:none; }
.field input:not([type=checkbox]),.field select,.field textarea { min-height:48px; border-radius:11px; border:1px solid #cbd5e2; color:var(--ink); background:#fff; font-size:16px; padding:11px 13px; }
.field input::placeholder,.field textarea::placeholder { color:#68778a; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#2379e5; box-shadow:0 0 0 3px #2379e510; }
.field-hint { color:#536176; font-size:13px; margin-top:6px; line-height:1.6; }
.filters { padding:18px; background:#f7f9fc; border:1px solid #e6ebf2; border-radius:14px; gap:14px; margin-bottom:22px; }
.filters .field { min-width:160px; flex:1 1 180px; }
.filters .field label { font-size:13px; }
.filters .field input,.filters .field select { min-height:44px; font-size:15px; }
.filters .button { flex:0 0 auto; min-height:44px; }
.card:has(>.filters:only-child),.card:has(>form.filters:only-child) { padding:0; background:transparent; border:0; box-shadow:none; }
.card>.filters:only-child { margin-bottom:0; }
.form-grid { gap:24px 22px; }
.form-actions { padding-top:22px; margin-top:26px; border-top:1px solid var(--border); gap:12px; }
.record-form-card,.settings-card,.account-form-card { max-width:960px; }
.form-section { margin-bottom:24px; }
.form-section h2 { font-size:18px; margin-bottom:18px; }
.account-login-fields { margin-top:28px; padding-top:24px; border-color:var(--border); }
.account-login-fields h2 { font-size:18px; }
.notice { background:#f1f6fd; color:#425976; border:1px solid #dae7f8; padding:15px 18px; border-radius:12px; font-size:14px; }
.table-wrap { border-color:#e1e7ef; border-radius:13px; scrollbar-width:thin; scrollbar-color:#c3d0e1 #f6f8fb; }
.table-wrap:focus-visible { outline:3px solid #2379e5; outline-offset:3px; }
.table-scroll-hint { color:#536176; font-size:12px; padding:0 2px 10px; }
.table-scroll-hint[hidden] { display:none; }
thead th { padding:15px 16px; background:#f1f5fa; color:#41526b; border-bottom:1px solid #d7e1ed; font-size:13px; }
tbody td { padding:16px; color:#35455e; border-bottom:1px solid #e8edf4; font-size:15px; line-height:1.6; }
th+th,td+td { border-inline-start:0; }
tbody tr:nth-child(even) { background:#fafbfd; }
tbody tr:hover { background:#f1f6fd; }
.table-name { color:var(--ink); font-weight:700; }
.numeric-score { display:inline-block; unicode-bidi:isolate; white-space:nowrap; font-variant-numeric:tabular-nums; }
.table-name small { color:var(--muted); font-size:12px; margin-top:3px; }
.badge { padding:4px 9px; border-radius:7px; font-size:12px; line-height:1.5; }
.grade-input { border:1px solid #bdcce0; border-radius:9px; background:#fff; color:#17263d; text-align:center; font-weight:700; }
.grade-toolbar { margin-top:22px; padding:18px; border-radius:13px; background:#f5f8fc; border:1px solid var(--border); }
.stats-grid { gap:16px; margin-bottom:24px; }
.stat-card { padding:20px; border-color:var(--border); border-radius:18px; box-shadow:var(--shadow); }
.stat-top { color:#536176; font-size:14px; }
.stat-icon { width:36px; height:36px; border-radius:11px; }
.stat-value { font-size:34px; line-height:1.2; margin:14px 0; color:var(--ink); }
.stat-value.money { font-size:25px; }
.stat-footer { color:#536176; font-size:12px; }
.dashboard-grid { gap:22px; align-items:start; margin-bottom:22px; }
.dashboard-grid .card { margin:0; }
.dashboard-columns { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px; align-items:start; }
.dashboard-main,.dashboard-side { min-width:0; display:grid; gap:22px; }
.dashboard-columns .card { margin:0; }
.quick-links { gap:10px; }
.quick-link { min-height:66px; background:#f5f8fc; border:1px solid #e5ecf5; border-radius:12px; padding:14px; color:#344761; }
.quick-link:hover { background:#edf4ff; color:#075dce; border-color:#c5dafa; }
.dashboard-page .notice { background:#f5f8fc; color:#536176; border:0; font-size:13px; }
.schedule-item { padding:16px 0; border-color:#e8edf4; gap:14px; }
.schedule-item p { color:var(--muted); font-size:14px; }
.schedule-time { color:#075dce; border-color:#d7e5fa; font-size:16px; }
.schedule-time small { color:#536176; font-size:12px; }
.finance-summary strong { color:var(--ink); font-size:24px; }
.progress-track { height:8px; background:#eaf0f8; }
.progress-bar { background:#075dce; border-radius:8px; }
.classroom-grid { gap:16px; }
.classroom-card { position:relative; padding:22px; background:#fff; border:1px solid #dfe7f1; border-radius:16px; transition:border-color .18s,box-shadow .18s; }
.classroom-card:hover { color:var(--ink); background:#fafdff; border-color:#90b8ed; box-shadow:0 5px 18px #075dce09; }
.classroom-card>.icon { color:#075dce; background:#edf4ff; padding:9px; width:44px; height:44px; border-radius:12px; margin-bottom:14px; }
.classroom-card h3 { font-size:18px; color:var(--ink); }
.classroom-card p { font-size:14px; color:#536176; }
.classroom-open { display:block; margin-top:18px; font-size:14px; color:#075dce; font-weight:700; }
.teacher-card-heading { margin-bottom:16px; }
.teacher-pay-summary { padding-top:16px; margin-top:16px; border-top:1px solid var(--border); gap:12px; }
.teacher-subjects { min-height:46px; }
.profile-grid { gap:0; margin:0; }
.profile-grid>div { padding:17px; border-bottom:1px solid #e8edf4; min-width:0; }
.profile-grid dt { color:#536176; font-size:13px; margin-bottom:5px; }
.profile-grid dd { color:#17263d; font-size:16px; margin:0; overflow-wrap:anywhere; }
.profile-heading { gap:16px; }
.resource-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:10px; border:1px solid var(--border); border-radius:15px; background:#edf1f7; overflow:visible; }
.resource-tabs a { display:flex; justify-content:center; align-items:center; min-height:44px; white-space:normal; padding:8px; border:1px solid transparent; font-size:13px; border-radius:9px; background:transparent; color:#44546b; }
.resource-tabs a:hover { color:#075dce; background:#f8faff; }
.resource-tabs a.active { background:#fff; color:#075dce; border-color:#dce5f2; box-shadow:0 2px 5px #233a5e08; font-weight:700; }
.exam-tabs { display:inline-flex; background:#edf1f7; padding:5px; border-radius:13px; gap:5px; }
.exam-tabs .button { box-shadow:none; }
.exam-tabs .button.secondary { border-color:transparent; background:transparent; }
.grade-step { background:#f6f8fc; border-color:#e8edf4; }
.grade-step small { color:#536176; }
.day-card h2 { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); padding-bottom:16px; }
.day-card.today { border-top:3px solid #075dce; background:#fff; }
.timetable-grid { align-items:start; }
.attendance-stat { border-color:var(--border); border-radius:16px; }
.attendance-day { background:#f8fafd; border-color:#e1e7ef; }
.attendance-day.unrecorded .attendance-day-status { color:#536176; }
.school-report { border-color:#d7e1ed; border-top-color:#183958; box-shadow:var(--shadow); }
.receipt { max-width:900px; border-top:3px solid #183958; }
.receipt-amount { background:#f1f6fd; color:#183958; border:1px solid #dae7f8; border-radius:14px; }
.receipt-brand { gap:20px; }
.receipt-brand .report-logo { width:68px; height:68px; }
.account-create-card { background:#fff; padding:24px; }
.account-create-card h2 { font-size:20px; }
.account-create-card>.icon { width:44px; height:44px; padding:10px; border-radius:12px; background:#edf4ff; }
.account-create-card:nth-child(2)>.icon { background:#edecff; color:#6545bd; }
.account-create-card:nth-child(3)>.icon { background:#e8f7f2; color:#197659; }
.page-footer { border-top:1px solid var(--border); padding:20px 0; margin-top:26px; color:#536176; font-size:12px; }
.login-page,.auth-simple { background:var(--background); }
.login-card,.auth-card { border-radius:24px; border:1px solid #dfe6ef; box-shadow:0 20px 65px #233a5e09; padding:36px; }
.login-header h1,.auth-card h1 { color:#17263d; font-size:28px; }
.auth-simple { display:grid; place-items:center; padding:32px 16px; }
.auth-card { width:100%; max-width:440px; margin:0; }
.auth-card .form-stack { margin-top:24px; }
.auth-logo { background:#edf4ff; color:#075dce; border-radius:16px; }
.login-header p,.login-help { color:#536176; }
.login-form .field label { font-weight:700; }
.guest-shell>#main>.card { max-width:520px; margin:10vh auto; }
@media(min-width:1600px) { .main-content { padding:38px 42px; } }
@media(max-width:1200px) and (min-width:961px) {
 .sidebar { width:230px; } .workspace { margin-right:230px; }
 .main-content { padding:26px; } .topbar { padding:0 26px; }
 .sidebar .nav-link { font-size:13px; }
 .resource-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:960px) {
 .sidebar { width:280px; padding-top:max(20px,env(safe-area-inset-top)); }
 .workspace { margin-right:0; }
 .topbar { padding:0 22px; }
 .topbar-logo { display:block; width:38px; height:38px; }
 .main-content { padding:26px 22px; }
 .dashboard-grid { grid-template-columns:1fr; }
 .dashboard-columns { grid-template-columns:1fr; }
}
@media(max-width:640px) {
 h1 { font-size:27px; } h2 { font-size:20px; }
 .topbar { height:68px; padding:0 max(16px,env(safe-area-inset-right)); }
 .topbar-start { gap:9px; } .topbar-start>span { font-size:13px; }
 .main-content { padding:24px max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
 .page-heading { align-items:start; gap:16px; margin-bottom:22px; }
 .page-heading p { font-size:14px; }
 .page-heading>.actions { width:100%; display:flex; gap:8px; }
 .page-heading>.actions .button { flex:1 1 auto; font-size:13px; }
 .card { padding:20px 16px; border-radius:17px; }
 .card-header { margin-bottom:18px; flex-wrap:wrap; gap:10px; }
 .card-header h2 { font-size:19px; }
 .card-header>a { font-size:13px; }
 .stats-grid { gap:10px; } .stat-card { padding:16px; border-radius:16px; }
 .stat-top { font-size:13px; gap:7px; }
 .stat-icon { width:30px; height:30px; } .stat-icon .icon { width:17px; height:17px; }
 .stat-value { font-size:30px; margin:12px 0; } .stat-value.money { font-size:19px; }
 .stat-footer { font-size:12px; }
 .filters { padding:14px; gap:14px; }
 .filters .field { width:100%; min-width:0; flex-basis:100%; }
 .filters .button { width:100%; flex-basis:100%; }
 .form-grid { gap:21px; }
 .form-actions { flex-wrap:wrap; } .form-actions .button { flex:1; }
 .classroom-grid { gap:12px; } .classroom-card { padding:20px; }
 .resource-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:7px; }
 .resource-tabs a { font-size:13px; text-align:center; }
 .profile-grid>div { padding:14px 8px; } .profile-grid dd { font-size:15px; }
 .profile-heading { align-items:center; gap:12px; } .profile-heading h1 { font-size:23px; }
 .profile-heading img { width:52px; height:52px; }
 .schedule-item { gap:10px; } .schedule-item p { font-size:13px; }
 .quick-link { font-size:14px; min-height:62px; padding:12px; }
 .finance-summary strong { font-size:20px; }
 tbody td { padding:14px 12px; font-size:14px; } thead th { padding:13px 12px; }
 .account-create-grid { gap:12px; }
 .account-create-card { display:grid; grid-template-columns:44px 1fr; gap:4px 14px; padding:20px; }
 .account-create-card>.icon { grid-row:1/3; } .account-create-card h2 { font-size:19px; }
 .account-create-card span { font-size:13px; }
 .attendance-calendar { padding:18px 10px; }
 .attendance-calendar-header h2 { font-size:21px; }
 .login-card,.auth-card { padding:30px 24px; }
 .guest-shell>#main>.card { margin:8vh 16px; }
}
@media(prefers-reduced-motion:reduce) { .classroom-card { transition:none; } }
@media print {
 .workspace { margin:0; } .main-content { padding:0; max-width:none; }
 .card,.stat-card { box-shadow:none; border-radius:0; border-color:#b4bdc9; padding:14px; }
 .resource-tabs,.page-footer { display:none; }
 .filters { display:none; } .profile-grid>div { padding:10px; }
 .table-wrap { border-radius:0; } .dashboard-grid { align-items:start; }
 .school-report { box-shadow:none; }
}