/* ============================================================ * NextGen MIS — Base layer * ------------------------------------------------------------ * Body type, links, headings, focus, motion. * * Loaded AFTER all vendor (Metronic + Bootstrap 3) CSS, so we * occasionally need !important to defeat existing !important * declarations in the Metronic theme. Each use is justified * with a comment. * ============================================================ */ /* ---------- BOX MODEL ---------- */ /* Don't reset Bootstrap 3's, just normalise the obvious miss. */ *, *::before, *::after { box-sizing: border-box; } /* ---------- BODY / SURFACES ---------- */ /* Paint the root the app background too, so there's never a flash of white behind the body during load/navigation (the inline script also sets color-scheme early for the same reason). */ html { background-color: var(--color-bg-app); } body { font-family: var(--font-family-ui); font-size: var(--font-size-base); /* 15px — up from Metronic's 14px default */ line-height: var(--line-height-base); color: var(--color-text-default); background-color: var(--color-bg-app); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Figtree stylistic alternates (single-storey a + 2 variants) for friendlier feel */ font-feature-settings: "calt", "ss01"; } /* The page wrapper bg defaults to a hardcoded sage in layout-app.css:38–42 — neutralise */ .page-container { background-color: var(--color-bg-app); } /* Inline style="background: #657E6B" on .page-content-wrapper (layouts/app.blade.php:56) — beats inline with attribute selector + !important. Marked for template cleanup. */ .page-content-wrapper[style*="background"] { background: var(--color-bg-app) !important; } /* ---------- TYPOGRAPHY ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-display); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); color: var(--color-text-strong); margin-top: 0; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-md); } h5 { font-size: var(--font-size-base); } h6 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: var(--letter-spacing-uppercase); } p { margin-top: 0; margin-bottom: var(--space-4); } small, .small { font-size: var(--font-size-sm); } /* Horizontal rule — Bootstrap + Metronic both hardcode a #eee top border (light / near-white in dark). Force the semantic token (all sides, !important) so it knocks back to a subtle stroke in dark and beats every vendor hr rule. */ hr { border-color: var(--color-border-default) !important; } /* Strong/em get their own weights for Figtree clarity */ strong, b { font-weight: var(--font-weight-semibold); } em, i:not([class*="fa"]):not([class*="icon"]) { font-style: italic; } /* ---------- LINKS ---------- Medium weight (500) — at navy-600 (~9.4:1 on white, AAA) the link colour alone is already strong, but Figtree at the body 13.5 px benefits from a tick more weight to clearly read as a link without needing an underline at rest. (Underline still appears on hover.) */ a { color: var(--color-link); font-weight: var(--font-weight-medium); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard), text-decoration-color var(--motion-fast) var(--ease-standard); } a:hover { color: var(--color-link-hover); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:visited { color: var(--color-link-visited); } a:active { color: var(--color-link-hover); } /* ---------- FOCUS RING ---------- */ /* The biggest single a11y improvement: visible focus everywhere. :where() keeps specificity 0 so component-level focus styles win. */ :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus { outline: none; /* let :focus-visible take over */ } :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); /* Soft halo for extra prominence on busy backgrounds */ box-shadow: var(--shadow-focus); transition: box-shadow var(--motion-fast) var(--ease-standard); } /* Sidebar, top bar and footer are all LIGHT surfaces now, so they use the normal navy focus ring (the previous amber "inverse" ring was for the old dark sidebar and read poorly on light). No override needed. */ /* ---------- SELECTION ---------- */ ::selection { background: var(--color-navy-100); color: var(--color-text-strong); } ::-moz-selection { background: var(--color-navy-100); color: var(--color-text-strong); } /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- SKIP LINK (markup added in a follow-up template-edit micro-PR) ---------- */ .skip-link { position: absolute; top: -48px; left: var(--space-2); z-index: 99999; padding: var(--space-2) var(--space-4); background: var(--color-brand-primary); color: var(--color-text-inverse); text-decoration: none; font-family: var(--font-family-ui); font-weight: var(--font-weight-medium); font-size: var(--font-size-base); border-radius: var(--radius-md); transition: top var(--motion-base) var(--ease-standard); } .skip-link:focus, .skip-link:focus-visible { top: var(--space-2); color: var(--color-text-inverse); outline: var(--focus-ring-width) solid var(--color-text-inverse); outline-offset: 2px; } /* ---------- FORM CONTROLS (force Figtree, fight Metronic !important) ---------- */ /* Metronic's plugins.css has 11+ `font-family: 'Open Sans' !important` rules across .form-control variants. To win, we match high specificity AND use !important. */ .form-control, .form-group .form-control, input.form-control, select.form-control, textarea.form-control, .input-icon .form-control, .form-group.form-md-line-input .form-control, .bootstrap-select .filter-option, .bootstrap-select .btn, .select2-selection, .select2-selection__rendered, .select2-search__field { font-family: var(--font-family-ui) !important; /* fights Metronic Open Sans !important */ font-size: var(--font-size-base); color: var(--color-text-default); } /* Data-context inputs (numerics, dates, IDs) stay on Atkinson for legibility */ input.form-control.numeric, input.form-control.date-input, input.numeric, input.date-input, input[type="number"].form-control { font-family: var(--font-family-data) !important; font-variant-numeric: tabular-nums lining-nums; } /* Placeholder text — slightly muted, matches input font */ ::placeholder { font-family: inherit; color: var(--color-text-faint); opacity: 1; /* override Firefox default */ } /* Labels — Figtree, medium weight for hierarchy */ label, .control-label, .form-group > label, .form-group > .control-label { font-family: var(--font-family-ui); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-default); } /* Help text — smaller, muted */ .help-block { font-family: var(--font-family-ui); font-size: var(--font-size-sm); color: var(--color-text-muted); } /* ---------- DATA / TABULAR CONTEXTS ---------- */ /* Tables, datatable wrappers, monospace data swap to Atkinson Hyperlegible for max-legibility numeric and ID scanning. Tabular figures keep columns aligned. Sizing for tables is handled in _data-display.css (loaded after this). */ .table, .dataTables_wrapper, .dataTable, .dataTables_info, .dataTables_paginate, .numeric-value, .id-value, .pii-field { font-family: var(--font-family-data); font-feature-settings: "tnum", "lnum"; /* tabular + lining figures */ font-variant-numeric: tabular-nums lining-nums; } code, kbd, samp, pre { font-family: var(--font-family-mono); font-size: 0.92em; background: var(--color-bg-sunken); padding: 0.125em 0.375em; border-radius: var(--radius-sm); } pre { padding: var(--space-4); overflow-x: auto; line-height: var(--line-height-base); } pre code { padding: 0; background: transparent; }