/* TCMS foundations. Components own their layouts; no page-specific overrides here. */
:root {
    --color-primary: #004282;
    --color-primary-hover: #003366;
    --color-secondary: #0a5a9c;
    --color-accent: #1d76b8;
    --color-header: #0a1e3f;
    --color-sidebar: #002c5a;
    --color-page: #eef2f8;
    --color-paper: #f8fafd;
    --color-surface: #fff;
    --color-surface-warm: #fbfdff;
    --color-text: #0a1e3f;
    --color-muted: #64748b;
    /* Slate is slightly darker when small text sits on pale-blue page surfaces. */
    --color-muted-on-page: #56667c;
    --color-border: #dce6f1;
    --color-border-control: #78889c;
    --color-control-border: var(--color-border-control);
    --color-success: #047857;
    --color-success-bg: #e7f6ed;
    --color-info: var(--color-primary);
    --color-info-bg: #eaf3fc;
    --color-warning: #82520b;
    --color-warning-bg: #fff4cc;
    --color-error: #b42318;
    --color-error-bg: #feecec;
    --color-neutral: #6b7280;
    --color-neutral-bg: #f3f4f6;
    --color-danger: #b91c1c;
    --color-danger-hover: #991b1b;
    --color-danger-bg: #fff1f2;
    --color-nav-text: #d8e8f8;
    --color-nav-muted: #a9c4df;
    --color-nav-line: #28547f;
    --color-nav-hover: #0b467e;
    --color-nav-current: #00549f;
    --color-nav-indicator: #7cc4ff;
    --color-nav-focus: #e4b75b;
    --institutional-panel-background: radial-gradient(ellipse 720px 520px at 150px 90px, #004282 0 30%, #003f7d 52%, rgb(0 58 116 / 68%) 76%, transparent 100%), linear-gradient(155deg, #002855 0%, #003670 45%, #00244c 100%);
    --institutional-pattern: radial-gradient(rgb(255 255 255 / 18%) 1.2px, transparent 1.2px);
    --institutional-pattern-size: 24px 24px;
    --institutional-text: #d8e8f8;
    --institutional-accent: #8bd0ff;
    --color-overlay: rgb(17 28 41 / 48%);
    --font-body: Inter, "Segoe UI", Arial, sans-serif;
    --font-heading: "Plus Jakarta Sans", Inter, "Segoe UI", Arial, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-control: 7px;
    --radius-panel: 6px;
    --shadow-panel: none;
    --shadow-floating: 0 16px 48px rgb(17 28 41 / 16%);
    --navigation-width: 14.5rem;
    --header-height: 4rem;
    --content-width: 100rem;
    --control-height: 2.75rem;
    --density-row: 3rem;
    --duration-fast: 140ms;
    --duration-panel: 180ms;
    --ease-standard: cubic-bezier(.2, .6, .3, 1);
    --type-display: clamp(1.65rem, 2.6vw, 2.25rem);
    --type-title: clamp(1.4rem, 2vw, 1.75rem);
    --type-body: .875rem;
    --type-label: .8125rem;
    --type-caption: .75rem;
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-page);
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; scroll-padding-top: 88px; }
body { margin: 0; max-width:100%; overflow-x:hidden; font: 400 .875rem/1.6 var(--font-body); color: var(--color-text); background: var(--color-page); }
table, time, input[type=number], .amount-cell { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; }
button, summary, label { -webkit-tap-highlight-color: transparent; }
input, select, textarea { min-width: 0; max-width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--color-primary); }
img, canvas { max-width: 100%; height: auto; }
svg { max-width: 100%; flex-shrink: 0; }
:where(h1,h2,h3,h4,p,dl,ul,ol) { margin-top: 0; }
:where(h1,h2,h3,h4) { font-family: var(--font-heading); color: var(--color-text); line-height: 1.3; letter-spacing: -.025em; }
:where(h1) { font-size: 1.75rem; font-weight: 700; }
:where(h2) { font-size: 1rem; font-weight: 700; }
:where(h3) { font-size: .9375rem; font-weight: 700; }
:where(a) { color: var(--color-primary-hover); text-underline-offset: 3px; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
:where(button,input,select,textarea):disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
body:has(dialog:modal) { overflow: hidden; }
:where(.dashboard-table-wrap,.roster-table-wrap,.catalog-table-wrap,.fee-table-wrap,.table-responsive,.attendance-table,.user-table-wrap,.application-table-wrap) {
    position: relative; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain;
}
@media(max-width:760px) {
    :where(input:not([type=checkbox],[type=radio],[type=hidden]),select,textarea) { font-size: 16px; }
    html { scroll-padding-top: 16px; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Scale the desktop design as one system, rather than shrinking individual
   logos or headings at a height breakpoint. rem bounds preserve text zoom. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
    html { font-size: clamp(.8125rem, min(1.041667vw, 2.185792dvh), 1rem); }
}