/* ============================================================================
Swiss VMS design system — wwwroot/css/vms.css (v3 · 2026-09)
Same family as www.swisssystems.co.za: tokens, easing, shadows, buttons and
nav patterns are lifted from the site's site.css / nav.css.
Vendor chain (every layout): Google Fonts → Font Awesome 6.5 → Bootstrap 5.3.3
→ DataTables 2 (bs5) → flatpickr → THIS FILE (last, so overrides win).
Sections
1 Tokens (light / dark) 9 Modals · offcanvas · dropdowns
2 Base · typography 10 Toasts · SweetAlert2 theme
3 Buttons 11 Timeline · empty · skeleton · progress · tabs · misc
4 Top navigation + drawer 12 Charts (ApexCharts hooks)
5 Shell · page header 13 Kiosk
6 Cards · stat tiles 14 Portal
7 Tables (DataTables 2) 15 Access (login)
8 Badges · chips · forms 16 Motion · route progress
17 Print · 18 Compat shim · 19 Legacy aliases
========================================================================== */
/* ---------- 1. Tokens ------------------------------------------------------ */
:root {
/* Brand (verbatim from site.css) */
--ink: #001433;
--ink-2: #0a2748;
--ink-3: #143a6b;
--ink-fade: rgba(0, 20, 51, .72);
--brand-navy: #282C68;
--brand-blue: #5D6BA9;
--brand-grey: #8A8A8A;
--paper: #ffffff;
--paper-2: #f6f8fb;
--paper-3: #eef2f7;
--green: #1f9d6b;
--green-hi: #25b87d;
--green-lo: #178556;
--amber: #ffb100;
--amber-lo: #b87a00;
--rose: #e85b6b;
--rose-lo: #b8354a;
--rose-soft: rgba(232, 91, 107, .08);
--blue: #5D6BA9;
--info: #2F6FED;
--text: #001433;
--text-2: #3b4a64;
--text-3: #66768b;
--text-on-navy: #e9eef6;
--text-on-navy-2: #b8c4d6;
--line: rgba(0, 20, 51, .10);
--line-2: rgba(0, 20, 51, .06);
--line-on-navy: rgba(255, 255, 255, .14);
/* Type scale (site) */
--t-xs: clamp(.75rem, .72rem + .12vw, .82rem);
--t-sm: clamp(.875rem, .85rem + .12vw, .95rem);
--t-base: clamp(.95rem, .92rem + .18vw, 1rem);
--t-md: clamp(1.125rem, 1.06rem + .28vw, 1.25rem);
--t-lg: clamp(1.375rem, 1.25rem + .55vw, 1.625rem);
--t-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
--t-2xl: clamp(2.25rem, 1.85rem + 1.85vw, 3.25rem);
--t-3xl: clamp(2.875rem, 2.2rem + 3vw, 4.5rem);
--t-4xl: clamp(3.5rem, 2.6rem + 4.2vw, 6rem);
/* Spacing */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
/* Layout */
--gutter: clamp(20px, 3vw, 40px);
--maxw-narrow: 880px;
--radius: 14px;
--radius-sm: 8px;
--radius-lg: 22px;
--nav-h: 68px;
/* Elevation (site) */
--shadow-1: 0 1px 0 rgba(0, 20, 51, .04), 0 1px 2px rgba(0, 20, 51, .04);
--shadow-2: 0 6px 18px rgba(0, 20, 51, .06), 0 2px 4px rgba(0, 20, 51, .04);
--shadow-3: 0 18px 48px rgba(0, 20, 51, .12), 0 6px 12px rgba(0, 20, 51, .06);
--glow-green: 0 6px 20px rgba(31, 157, 107, .28);
/* Motion (site) */
--ease: cubic-bezier(.2, .7, .2, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-spring: cubic-bezier(.34, 1.56, .64, 1);
--d-1: 120ms; --d-2: 220ms; --d-3: 380ms; --d-4: 600ms;
--grad-navy: radial-gradient(120% 120% at 100% -10%, rgba(255,255,255,.06) 0, transparent 55%),
linear-gradient(180deg, #001433 0%, #052551 100%);
--grad-green: linear-gradient(180deg, #1f9d6b 0%, #178556 100%);
/* App surfaces */
--surface: var(--paper);
--surface-2: var(--paper-2);
--surface-3: var(--paper-3);
--body-bg: #f3f6fa;
--ring: rgba(31, 157, 107, .22);
--font: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
--touch: 64px;
/* Chart palette */
--c-1: #1f9d6b; --c-2: #001433; --c-3: #5D6BA9; --c-4: #ffb100; --c-5: #e85b6b; --c-6: #2F6FED; --c-7: #25b87d;
/* Bootstrap bridge */
--bs-body-font-family: var(--font);
--bs-body-color: var(--text);
--bs-body-bg: var(--body-bg);
--bs-border-color: var(--line);
--bs-border-radius: var(--radius-sm);
--bs-primary: #1f9d6b;
--bs-primary-rgb: 31, 157, 107;
--bs-secondary: #001433;
--bs-secondary-rgb: 0, 20, 51;
--bs-success: #1f9d6b;
--bs-success-rgb: 31, 157, 107;
--bs-danger: #e85b6b;
--bs-danger-rgb: 232, 91, 107;
--bs-warning: #ffb100;
--bs-warning-rgb: 255, 177, 0;
--bs-info: #2F6FED;
--bs-info-rgb: 47, 111, 237;
--bs-link-color: var(--ink-3);
--bs-link-hover-color: var(--green-lo);
--bs-secondary-color: var(--text-3);
--bs-tertiary-bg: var(--surface-2);
--bs-emphasis-color: var(--ink);
/* legacy --vms-* aliases (still used by views) */
--vms-navy-900: var(--ink);
--vms-navy-700: var(--ink-2);
--vms-navy-500: var(--ink-3);
--vms-green-600: var(--green-lo);
--vms-green-500: var(--green);
--vms-green-400: var(--green-hi);
--vms-amber: var(--amber);
--vms-rose: var(--rose);
--vms-surface: var(--surface);
--vms-surface-2: var(--surface-2);
--vms-surface-3: var(--surface-3);
--vms-ink: var(--text);
--vms-ink-2: var(--text-3);
--vms-radius: var(--radius);
--vms-radius-sm: var(--radius-sm);
--vms-shadow: var(--shadow-2);
--vms-border: var(--line);
--vms-ring: var(--ring);
--vms-info: var(--info);
--vms-font: var(--font);
--vms-mono: var(--mono);
--vms-touch: var(--touch);
--vms-topbar-h: var(--nav-h);
}
/* Dark theme: explicit attribute, or OS preference when not forced light */
[data-theme=dark],
:root:not([data-theme=light]) { color-scheme: light; }
[data-theme=dark] {
--paper: #0d1730;
--paper-2: #122040;
--paper-3: #182a4f;
--surface: #0f1b36;
--surface-2: #132244;
--surface-3: #1a2d54;
--body-bg: #08101f;
--text: #edf2f9;
--text-2: #c3cddc;
--text-3: #8d9bb2;
--line: rgba(255, 255, 255, .10);
--line-2: rgba(255, 255, 255, .06);
--ink-fade: rgba(0, 0, 0, .55);
--shadow-1: 0 1px 0 rgba(0, 0, 0, .3);
--shadow-2: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
--shadow-3: 0 24px 56px rgba(0, 0, 0, .6);
--ring: rgba(37, 184, 125, .35);
--amber-lo: #ffc94d;
--rose-lo: #ff9aa6;
--info: #7ea4ff;
--c-2: #8fb1ff;
--bs-body-color: #edf2f9;
--bs-body-bg: #08101f;
--bs-emphasis-color: #fff;
--bs-link-color: #9fd4bc;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme=light]) {
--paper: #0d1730; --paper-2: #122040; --paper-3: #182a4f;
--surface: #0f1b36; --surface-2: #132244; --surface-3: #1a2d54; --body-bg: #08101f;
--text: #edf2f9; --text-2: #c3cddc; --text-3: #8d9bb2;
--line: rgba(255, 255, 255, .10); --line-2: rgba(255, 255, 255, .06);
--ink-fade: rgba(0, 0, 0, .55);
--shadow-1: 0 1px 0 rgba(0, 0, 0, .3);
--shadow-2: 0 8px 24px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
--shadow-3: 0 24px 56px rgba(0, 0, 0, .6);
--ring: rgba(37, 184, 125, .35);
--amber-lo: #ffc94d; --rose-lo: #ff9aa6; --info: #7ea4ff; --c-2: #8fb1ff;
--bs-body-color: #edf2f9; --bs-body-bg: #08101f; --bs-emphasis-color: #fff; --bs-link-color: #9fd4bc;
color-scheme: dark;
}
}
/* ---------- 2. Base / typography ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; } /* smooth scrolling + Chrome scroll anchoring produced a visible "shake" on long report pages */
body { overflow-anchor: none; overflow-x: hidden; }
/* Classic (Windows) scrollbars take 17px of layout width. Reserve the vertical one permanently and never show a horizontal one:
otherwise a page whose charts resize on parent width oscillates - scrollbar appears -> content narrower -> charts redraw -> overflow gone ->
scrollbar disappears -> ... - which is seen as the page jumping left/right and up/down. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
body {
margin: 0; background: var(--body-bg); color: var(--text);
font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 400;
font-feature-settings: 'cv11', 'ss03', 'cv02'; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
min-height: 100vh;
}
@media (min-width: 1400px) { body { font-size: 16px; } }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; color: var(--text); margin: 0 0 var(--s-3);
}
h1, .h1 { font-size: var(--t-xl); letter-spacing: -.03em; }
h2, .h2 { font-size: var(--t-lg); letter-spacing: -.025em; }
h3, .h3 { font-size: var(--t-md); }
h4, .h4 { font-size: var(--t-base); }
h5, .h5 { font-size: var(--t-sm); }
h6, .h6 { font-size: var(--t-xs); }
.display, .display-4, .display-5, .display-6 { font-family: var(--font); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
.display-6 { font-size: var(--t-2xl); }
p { margin: 0 0 var(--s-4); color: var(--text-2); }
p.lead { font-size: var(--t-md); color: var(--text); }
a { color: var(--ink-3); text-decoration: none; transition: color var(--d-2) var(--ease); }
a:hover { color: var(--green-lo); }
strong, b { font-weight: 700; }
small, .small { font-size: var(--t-xs); }
.mono, .vms-mono, .vms-kbd, code, kbd, .vms-plate, .vms-time, .vms-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vms-num { font-weight: 600; letter-spacing: -.01em; }
.eyebrow, .vms-eyebrow {
font-family: var(--mono); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--text-3); display: inline-block;
}
.vms-eyebrow.green, .eyebrow.green { color: var(--green); }
.vms-eyebrow.on-navy, .eyebrow.on-navy { color: var(--text-on-navy-2); }
.spec-tag { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: var(--text-3); font-weight: 500; }
.vms-kbd, .kbd {
display: inline-block; padding: .12rem .5rem; border-radius: 6px; font-size: .82em; font-family: var(--mono);
background: var(--surface-3); border: 1px solid var(--line); color: var(--text); box-shadow: inset 0 -1px 0 var(--line);
}
code { font-size: .88em; color: var(--green-lo); background: rgba(31,157,107,.08); padding: .1em .4em; border-radius: 5px; }
.vms-plate {
display: inline-block; padding: .18rem .6rem; border-radius: 6px; font-weight: 700; letter-spacing: .08em; font-size: .82rem;
background: linear-gradient(180deg, #ffd66b 0%, #ffb100 100%); color: #1a1a1a; border: 1.5px solid #1a1a1a; box-shadow: var(--shadow-1); white-space: nowrap;
}
.text-ink-2, .vms-muted, .text-muted { color: var(--text-3) !important; }
.vms-sr-only, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(31,157,107,.25); }
hr, .divider { border: 0; height: 1px; background: var(--line); margin: var(--s-4) 0; }
img { max-width: 100%; height: auto; }
.vms-divider-label { display: flex; align-items: center; gap: var(--s-3); color: var(--text-3); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); }
.vms-divider-label::before, .vms-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ---------- 3. Buttons (site .btn-* patterns) ----------------------------- */
.btn {
--bs-btn-border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
padding: 11px 20px; border-radius: 999px; font-family: var(--font); font-weight: 600; font-size: var(--t-sm); letter-spacing: .005em; line-height: 1.2;
border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none;
transition: transform var(--d-1) var(--ease), background var(--d-2) var(--ease), border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; box-shadow: none; }
.btn:disabled, .btn.disabled { opacity: .55; transform: none; cursor: not-allowed; }
.btn i { font-size: .92em; }
.btn .me-1, .btn .me-2 { margin-right: 0 !important; }
.btn .ms-1, .btn .ms-2 { margin-left: 0 !important; }
.btn-primary, .btn-success, .btn-primary:focus, .btn-success:focus {
background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--glow-green);
}
.btn-primary:hover, .btn-success:hover { background: var(--green-hi); border-color: var(--green-hi); color: #fff; box-shadow: 0 10px 28px rgba(31, 157, 107, .36); }
.btn-primary:active, .btn-success:active, .btn-primary.active, .btn-check:checked + .btn-primary { background: var(--green-lo) !important; border-color: var(--green-lo) !important; color: #fff !important; }
.btn-secondary, .btn-dark, .btn-secondary:focus { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-secondary:hover, .btn-dark:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }
.btn-ghost, .btn-light, .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-success {
background: transparent; color: var(--text); border-color: var(--line); box-shadow: none;
}
.btn-ghost:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-success:hover {
background: var(--surface-2); color: var(--text); border-color: var(--text);
}
.btn-outline-primary { color: var(--green-lo); border-color: rgba(31,157,107,.4); }
.btn-outline-primary:hover { background: rgba(31,157,107,.08); color: var(--green-lo); border-color: var(--green); }
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.btn-light { background: var(--surface-2); border-color: var(--line-2); }
.btn-light:hover { background: var(--surface-3); border-color: var(--line); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #fff; }
.btn-danger { background: var(--rose); border-color: var(--rose); color: #fff; box-shadow: 0 6px 20px rgba(232,91,107,.25); }
.btn-danger:hover { background: #ee7381; border-color: #ee7381; color: #fff; }
.btn-outline-danger { color: var(--rose-lo); border-color: rgba(232,91,107,.4); background: transparent; }
.btn-outline-danger:hover { background: rgba(232,91,107,.1); color: var(--rose-lo); border-color: var(--rose); }
.btn-warning { background: var(--amber); border-color: var(--amber); color: #1a1a1a; }
.btn-warning:hover { background: #ffc12e; border-color: #ffc12e; color: #1a1a1a; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-link { color: var(--green-lo); padding: 6px 8px; box-shadow: none; }
.btn-link:hover { color: var(--green); text-decoration: underline; transform: none; }
.btn-sm, .btn-group-sm > .btn { padding: 8px 14px; font-size: var(--t-xs); }
.btn-lg, .btn-group-lg > .btn { padding: 15px 26px; font-size: var(--t-base); }
.btn-xl { padding: 18px 32px; font-size: var(--t-md); }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
.btn-icon.btn-sm { width: 34px; height: 34px; }
.btn-icon.btn-lg { width: 48px; height: 48px; }
.btn-icon i { font-size: 1em; }
.btn.is-loading, .btn[data-loading], .vms-kiosk-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after, .btn[data-loading]::after, .vms-kiosk-btn.is-loading::after {
content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
animation: vms-spin .7s linear infinite;
}
.btn-ghost.is-loading::after, .btn-light.is-loading::after, .vms-kiosk-btn--ghost.is-loading::after { border-color: var(--line); border-top-color: var(--ink); }
.vms-kiosk-btn.is-loading::after { left: 50%; top: 50%; margin: -9px 0 0 -9px; width: 22px; height: 22px; }
.spinner-border { --bs-spinner-width: 1rem; --bs-spinner-height: 1rem; --bs-spinner-border-width: .16em; }
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-radius: 999px 0 0 999px; }
.btn-group > .btn:last-child, .btn-group > .btn-check:last-of-type + .btn { border-radius: 0 999px 999px 0; }
.btn-group > .btn-check:first-child + .btn { border-radius: 999px 0 0 999px; }
.btn-close { --bs-btn-close-focus-shadow: none; opacity: .5; }
[data-theme=dark] .btn-close { filter: invert(1) grayscale(1); }
/* ---------- 4. Top navigation --------------------------------------------- */
.vms-topnav {
position: sticky; top: 0; z-index: 1040; background: var(--grad-navy); color: var(--text-on-navy);
border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 24px rgba(0,20,51,.18);
/* no backdrop-filter / transform here: they would turn the header into the containing block of the fixed mobile drawer */
}
.vms-topnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(37,184,125,.7) 30%, rgba(37,184,125,.7) 70%, transparent); opacity: .5; }
.vms-topnav__inner {
height: var(--nav-h); padding: 0 var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5);
}
.vms-topnav__brand { display: inline-flex; align-items: center; gap: var(--s-3); color: #fff; text-decoration: none; transition: opacity var(--d-2) var(--ease); }
.vms-topnav__brand:hover { opacity: .88; color: #fff; }
.vms-topnav__mark { width: 40px; height: 40px; flex-shrink: 0; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.vms-topnav__mark svg { width: 100%; height: 100%; display: block; }
.vms-mark .m-a { fill: #282C68; } .vms-mark .m-b { fill: #5D6BA9; }
.vms-mark--light .m-a { fill: #ffffff; } .vms-mark--light .m-b { fill: #9fd4bc; }
.vms-topnav__wordmark { display: flex; flex-direction: column; line-height: 1; gap: 2px; }
.vms-topnav__wordmark span { font: 700 15px/1 var(--font); letter-spacing: -.02em; color: #fff; }
.vms-topnav__tagline {
display: flex; flex-direction: column; gap: 3px; padding-left: var(--s-3); border-left: 1px solid rgba(255,255,255,.18);
}
.vms-topnav__tagline-line, .vms-topnav__tagline-meta { font: 500 9.5px/1 var(--mono); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap; }
.vms-topnav__tagline-line { color: var(--green-hi); }
.vms-topnav__tagline-meta { color: rgba(255,255,255,.6); }
.vms-topnav__nav { justify-self: center; min-width: 0; }
.vms-topnav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.vms-topnav__item { position: relative; }
.vms-topnav__link {
display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 9px; position: relative;
font: 500 14px/1.2 var(--font); color: rgba(255,255,255,.82); text-decoration: none; background: transparent; border: 0; cursor: pointer; white-space: nowrap;
transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease);
}
.vms-topnav__link i:first-child { font-size: 12px; opacity: .7; color: var(--green-hi); }
.vms-topnav__link:hover, .vms-topnav__link:focus-visible, .vms-topnav__link[aria-expanded=true] { background: rgba(255,255,255,.08); color: #fff; }
.vms-topnav__link::after {
content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--green-hi);
transform: scaleX(0); transform-origin: left; transition: transform var(--d-3) var(--ease-out);
}
.vms-topnav__link[aria-current=page] { color: #fff; }
.vms-topnav__link[aria-current=page]::after, .vms-topnav__link:hover::after { transform: scaleX(1); }
.vms-topnav__chev { font-size: 9px; opacity: .55; transition: transform var(--d-2) var(--ease); }
.vms-topnav__link[aria-expanded=true] .vms-topnav__chev { transform: rotate(180deg); opacity: .9; }
/* dropdown / mega panel */
.vms-topnav__menu {
position: absolute; top: calc(100% + 10px); left: 0; min-width: 300px; padding: 10px; z-index: 30;
background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3);
opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top left; pointer-events: none;
transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility 0s linear var(--d-2);
}
.vms-topnav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.vms-topnav__item.open > .vms-topnav__menu, .vms-topnav__item:hover > .vms-topnav__menu, .vms-topnav__item:focus-within > .vms-topnav__menu {
opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease), visibility 0s;
}
.vms-topnav__menu--wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.vms-topnav__menu-head { grid-column: 1 / -1; font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .2em; color: var(--text-3); padding: 8px 12px 6px; }
.vms-topnav__menu-link {
display: grid; grid-template-columns: 36px 1fr; align-items: center; gap: var(--s-3); padding: 8px 10px; border-radius: 10px; color: var(--text); text-decoration: none;
transition: background var(--d-2) var(--ease);
}
.vms-topnav__menu-link .ic { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; color: var(--text-2); font-size: 13px; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease); }
.vms-topnav__menu-link strong { display: block; font: 600 13.5px/1.25 var(--font); color: var(--text); }
.vms-topnav__menu-link .desc { display: block; font-size: 12px; color: var(--text-3); line-height: 1.35; }
.vms-topnav__menu-link:hover, .vms-topnav__menu-link:focus-visible { background: var(--surface-2); color: var(--text); }
.vms-topnav__menu-link:hover .ic { background: var(--ink); color: #fff; }
.vms-topnav__menu-link.active .ic { background: var(--green); color: #fff; }
.vms-topnav__menu-link.active strong { color: var(--green-lo); }
[data-theme=dark] .vms-topnav__menu-link:hover .ic { background: var(--green); }
/* right cluster */
.vms-topnav__right { display: flex; align-items: center; gap: var(--s-2); }
.vms-topnav__site {
display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px; border-radius: 999px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; font-size: 13px; font-weight: 500; max-width: 240px;
transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-topnav__site:hover, .vms-topnav__site:focus-within { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.vms-topnav__site i { color: var(--green-hi); font-size: 12px; }
.vms-topnav__site select {
appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font: 500 13px var(--font); padding: 6px 22px 6px 0; max-width: 180px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 6px center; cursor: pointer; text-overflow: ellipsis;
}
.vms-topnav__site select:focus { outline: 0; }
.vms-topnav__site select option { color: var(--text); background: var(--surface); }
.vms-topnav__search { position: relative; display: none; }
@media (min-width: 1300px) { .vms-topnav__search { display: block; } }
.vms-topnav__search input {
height: 38px; width: 200px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); color: #fff;
padding: 0 14px 0 36px; font: 400 13px var(--font); transition: width var(--d-3) var(--ease), background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-topnav__search input::placeholder { color: rgba(255,255,255,.55); }
.vms-topnav__search input:focus { outline: 0; width: 260px; background: rgba(255,255,255,.14); border-color: rgba(37,184,125,.7); }
.vms-topnav__search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 12px; color: rgba(255,255,255,.6); pointer-events: none; }
.vms-topnav__search kbd { background: transparent; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 500 10px var(--mono); color: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 2px 5px; }
.vms-topnav__ibtn {
position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: rgba(255,255,255,.85); display: grid; place-items: center; cursor: pointer; font-size: 15px;
transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-topnav__ibtn:hover, .vms-topnav__ibtn[aria-expanded=true] { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.14); }
.vms-topnav__badge {
position: absolute; top: 5px; right: 5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--rose); color: #fff;
font: 700 9.5px/16px var(--mono); text-align: center; border: 2px solid #031b40; box-shadow: 0 0 0 0 rgba(232,91,107,.6); animation: vms-ping 2.4s var(--ease) infinite;
}
.vms-topnav__user {
display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 3px 12px 3px 3px; border-radius: 999px; background: transparent; border: 1px solid transparent; color: #fff; cursor: pointer;
transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-topnav__user:hover, .vms-topnav__user[aria-expanded=true] { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); }
.vms-topnav__user .vms-avatar { --sz: 34px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
.vms-topnav__user-name { font: 600 13px/1.1 var(--font); color: #fff; text-align: left; }
.vms-topnav__user-role { font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green-hi); margin-top: 3px; text-align: left; }
.vms-topnav__user-menu { left: auto; right: 0; min-width: 260px; transform-origin: top right; }
.vms-topnav__user-menu .who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.vms-topnav__user-menu .who strong { display: block; font-size: 14px; }
.vms-topnav__user-menu .who span { font-size: 12px; color: var(--text-3); }
.vms-topnav__user-menu .vms-topnav__menu-link { grid-template-columns: 28px 1fr; }
.vms-topnav__user-menu .vms-topnav__menu-link .ic { width: 28px; height: 28px; font-size: 12px; }
.vms-topnav__user-menu form { margin: 0; }
.vms-topnav__user-menu button.vms-topnav__menu-link { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.vms-topnav__user-menu .danger strong { color: var(--rose-lo); }
.vms-topnav__user-menu .danger .ic { color: var(--rose); }
.vms-topnav__toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
/* Notifications panel */
.vms-topnav__notif { left: auto; right: 0; min-width: 340px; padding: 0; transform-origin: top right; overflow: hidden; }
.vms-topnav__notif .head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.vms-topnav__notif .head a { font-size: 12px; font-weight: 600; color: var(--green-lo); }
.vms-topnav__notif .item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; padding: 10px 14px; align-items: start; border-bottom: 1px solid var(--line-2); transition: background var(--d-2) var(--ease); }
.vms-topnav__notif .item:hover { background: var(--surface-2); }
.vms-topnav__notif .item .ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; }
.vms-topnav__notif .item strong { display: block; font-size: 13px; }
.vms-topnav__notif .item span { font-size: 12px; color: var(--text-3); }
.vms-topnav__notif .item time { font: 500 10px var(--mono); color: var(--text-3); white-space: nowrap; }
.vms-topnav__notif .empty { padding: 28px 14px; text-align: center; color: var(--text-3); font-size: 13px; }
/* Mobile: drawer */
.vms-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,20,51,.55); z-index: 1039; opacity: 0; visibility: hidden; transition: opacity var(--d-3) var(--ease), visibility 0s linear var(--d-3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
body.is-drawer-open .vms-drawer-backdrop { opacity: 1; visibility: visible; transition: opacity var(--d-3) var(--ease), visibility 0s; }
.vms-topnav__user-text { display: none; }
@media (min-width: 1600px) { .vms-topnav__user-text { display: block; } }
@media (max-width: 1599.98px) {
.vms-topnav__tagline { display: none; }
.vms-topnav__search input { width: 170px; }
.vms-topnav__site { max-width: 190px; }
.vms-topnav__user { padding: 3px; }
.vms-topnav__user .vms-topnav__chev { display: none; }
}
@media (max-width: 1399.98px) {
.vms-topnav__link { padding: 9px 10px; font-size: 13.5px; }
.vms-topnav__link i:first-child { display: none; }
.vms-topnav__search { display: none; }
}
@media (max-width: 1199.98px) {
.vms-topnav__link { padding: 9px 8px; font-size: 13px; }
.vms-topnav__inner { gap: var(--s-3); }
}
@media (max-width: 991.98px) {
.vms-topnav__inner { grid-template-columns: auto 1fr auto; }
.vms-topnav__toggle { display: inline-flex; }
.vms-topnav__site { display: none; }
.vms-topnav__nav {
position: fixed; top: 0; left: 0; bottom: 0; width: min(340px, 88vw); z-index: 1050; background: var(--surface); color: var(--text);
transform: translateX(-104%); transition: transform var(--d-3) var(--ease-out); overflow-y: auto; padding: 0 12px 24px; box-shadow: var(--shadow-3);
justify-self: stretch;
}
body.is-drawer-open .vms-topnav__nav { transform: none; }
.vms-topnav__list { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 12px; }
.vms-topnav__drawer-head { display: flex; align-items: center; gap: 10px; padding: 16px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.vms-topnav__drawer-head .vms-topnav__mark { width: 36px; height: 36px; filter: none; }
.vms-topnav__drawer-head strong { font-size: 15px; letter-spacing: -.02em; display: block; }
.vms-topnav__drawer-head span { font: 500 10px var(--mono); letter-spacing: .15em; text-transform: uppercase; color: var(--green); }
.vms-topnav__drawer-head .close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--text); }
.vms-topnav__link { width: 100%; justify-content: flex-start; color: var(--text); padding: 12px 12px; font-size: 15px; border-radius: 10px; }
.vms-topnav__link i:first-child { display: inline-block; color: var(--green); width: 18px; text-align: center; opacity: 1; }
.vms-topnav__link:hover, .vms-topnav__link[aria-expanded=true] { background: var(--surface-2); color: var(--text); }
.vms-topnav__link::after { display: none; }
.vms-topnav__link[aria-current=page] { color: var(--green-lo); background: rgba(31,157,107,.08); }
.vms-topnav__chev { margin-left: auto; }
.vms-topnav__menu, .vms-topnav__menu--wide {
position: static; min-width: 0; display: none; box-shadow: none; border: 0; padding: 2px 0 8px 8px; opacity: 1; visibility: visible; transform: none; pointer-events: auto; grid-template-columns: 1fr; transition: none;
}
.vms-topnav__item.open > .vms-topnav__menu { display: grid; }
.vms-topnav__item:hover > .vms-topnav__menu:not(.open) { display: none; }
.vms-topnav__item.open:hover > .vms-topnav__menu { display: grid; }
}
@media (min-width: 992px) { .vms-topnav__drawer-head { display: none; } }
@media (max-width: 480px) { .vms-topnav__wordmark, .vms-topnav__tagline { display: none; } .vms-topnav__inner { gap: var(--s-3); padding: 0 16px; } .vms-topnav__search { display: none; } }
/* ---------- 5. Shell · page header --------------------------------------- */
.vms-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--body-bg); }
.vms-main { flex: 1; width: 100%; padding: var(--s-5) var(--gutter) var(--s-8); min-width: 0; }
.vms-container--narrow { max-width: var(--maxw-narrow); margin-inline: auto; }
.vms-content { min-width: 0; }
.vms-footer { padding: var(--s-4) var(--gutter); border-top: 1px solid var(--line); color: var(--text-3); font-size: var(--t-xs); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; }
.vms-footer a { color: var(--text-2); }
.vms-footer .spacer { flex: 1; }
.vms-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); }
.vms-page-header__title { font-size: var(--t-xl); font-weight: 700; letter-spacing: -.03em; margin: 0; line-height: 1.05; }
.vms-page-header__subtitle { color: var(--text-3); margin: 6px 0 0; font-size: var(--t-sm); max-width: 72ch; }
.vms-page-header__actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.vms-page-header .vms-eyebrow { margin-bottom: 8px; color: var(--green); }
.vms-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--t-xs); color: var(--text-3); margin-bottom: 8px; font-weight: 500; }
.vms-breadcrumb a { color: var(--text-3); }
.vms-breadcrumb a:hover { color: var(--green-lo); }
.vms-breadcrumb span + span::before { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 8px; margin: 0 8px 0 4px; opacity: .5; }
.vms-breadcrumb [aria-current=page] { color: var(--text); }
.vms-hero {
position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: var(--s-6) var(--s-6); color: #fff; background: var(--grad-navy); box-shadow: var(--shadow-3); isolation: isolate;
}
.vms-hero h1, .vms-hero h2, .vms-hero h3 { color: #fff; }
.vms-hero p { color: var(--text-on-navy); }
.vms-hero .vms-eyebrow { color: var(--green-hi); }
.vms-hero::before { content: ""; position: absolute; inset: auto -80px -120px auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(31,157,107,.35) 0%, transparent 65%); pointer-events: none; z-index: -1; animation: vms-float 9s ease-in-out infinite; }
.vms-hero::after { content: ""; position: absolute; inset: -40% -60% auto auto; width: 60%; height: 200%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%); transform: rotate(10deg); pointer-events: none; z-index: -1; }
.vms-hero__mark { position: absolute; right: 4%; top: 50%; transform: translateY(-50%); width: clamp(180px, 22vw, 320px); opacity: .07; pointer-events: none; z-index: -1; }
.vms-hero__mark .m-a, .vms-hero__mark .m-b { fill: #fff; }
.vms-section-title { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-4); }
.vms-section-title h2 { font-size: var(--t-md); margin: 0; }
.vms-section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.vms-section-title .vms-eyebrow { margin: 0; }
/* ---------- 6. Cards · stat tiles ---------------------------------------- */
.vms-card, .card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s-5); margin-bottom: var(--s-5); color: var(--text);
transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.card { padding: 0; }
.card-body { padding: var(--s-5); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-5); font-weight: 700; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--s-3) var(--s-5); }
.vms-card:hover, .card:hover, .vms-card--hover:hover { box-shadow: var(--shadow-2); border-color: rgba(0,20,51,.16); }
[data-theme=dark] .vms-card:hover, [data-theme=dark] .card:hover { border-color: rgba(255,255,255,.18); }
a.vms-card:hover, .vms-card--lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.vms-card.on-navy, .card.on-navy { background: var(--ink-2); border-color: var(--line-on-navy); color: var(--text-on-navy); }
.vms-card.on-navy h1, .vms-card.on-navy h2, .vms-card.on-navy h3, .vms-card.on-navy h4, .vms-card.on-navy .vms-card__title { color: #fff; }
.vms-card.on-navy p, .vms-card.on-navy .vms-muted { color: var(--text-on-navy-2) !important; }
.vms-card.on-navy:hover { background: var(--ink-3); border-color: rgba(255,255,255,.25); }
.vms-card__header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); flex-wrap: wrap; }
.vms-card__title { font-weight: 700; font-size: var(--t-base); letter-spacing: -.015em; margin: 0; display: flex; align-items: center; gap: 8px; }
.vms-card__title i { color: var(--green); font-size: .9em; }
.vms-card__title .text-primary { color: var(--green) !important; }
.vms-card__sub { color: var(--text-3); font-size: var(--t-xs); margin-top: 2px; }
.vms-card__header .vms-card__actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.vms-card--flush { padding: 0; }
.vms-card--flush .vms-card__header { padding: var(--s-4) var(--s-5) 0; }
.vms-card--flush .vms-table-wrap { border-radius: 0 0 var(--radius) var(--radius); }
.vms-card__footer { margin: var(--s-4) calc(var(--s-5) * -1) calc(var(--s-5) * -1); padding: var(--s-3) var(--s-5); background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); font-size: var(--t-xs); color: var(--text-3); }
.card-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-size: 18px; margin-bottom: var(--s-3); }
/* Stat tile */
.vms-stat {
--accent: var(--ink-3); --accent-soft: rgba(20,58,107,.12);
position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 128px;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--s-4) var(--s-4) var(--s-3);
color: var(--text); text-decoration: none; transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: rgba(0,20,51,.16); color: var(--text); }
.vms-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); opacity: .9; }
.vms-stat::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%); pointer-events: none; }
.vms-stat--ok { --accent: var(--green); --accent-soft: rgba(31,157,107,.16); }
.vms-stat--warn { --accent: var(--amber); --accent-soft: rgba(255,177,0,.18); }
.vms-stat--danger { --accent: var(--rose); --accent-soft: rgba(232,91,107,.16); }
.vms-stat--info { --accent: var(--blue); --accent-soft: rgba(93,107,169,.16); }
.vms-stat--neutral { --accent: var(--text-3); --accent-soft: rgba(102,118,139,.14); }
.vms-stat--navy { --accent: var(--ink); --accent-soft: rgba(0,20,51,.12); }
[data-theme=dark] .vms-stat--navy { --accent: #8fb1ff; --accent-soft: rgba(143,177,255,.16); }
[data-theme=dark] .vms-stat { --accent-soft: rgba(143,177,255,.14); }
[data-theme=dark] .vms-stat:not([class*="vms-stat--"]) { --accent: #8fb1ff; }
.vms-stat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.vms-stat__label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); font-weight: 600; font-family: var(--mono); }
.vms-stat__chip { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 14px; flex-shrink: 0; }
.vms-stat--ok .vms-stat__chip { color: var(--green-lo); } .vms-stat--warn .vms-stat__chip { color: var(--amber-lo); } .vms-stat--danger .vms-stat__chip { color: var(--rose-lo); }
[data-theme=dark] .vms-stat__chip { color: var(--accent); }
.vms-stat__icon { position: absolute; right: 14px; top: 14px; font-size: 1.1rem; opacity: .22; color: var(--accent); }
.vms-stat__value { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight: 700; font-family: var(--mono); letter-spacing: -.03em; line-height: 1.05; color: var(--text); margin-top: 2px; word-break: break-word; }
.vms-stat__value.is-text { font-family: var(--font); font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.25; }
.vms-stat__foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vms-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; font-family: var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.vms-stat__delta.up { background: rgba(31,157,107,.14); color: var(--green-lo); }
.vms-stat__delta.down { background: rgba(232,91,107,.14); color: var(--rose-lo); }
[data-theme=dark] .vms-stat__delta.up { color: var(--green-hi); } [data-theme=dark] .vms-stat__delta.down { color: #ff9aa6; }
.vms-stat__note { font-size: .76rem; color: var(--text-3); }
.vms-stat__spark { position: absolute; right: 0; bottom: 0; width: 44%; height: 40px; pointer-events: none; opacity: .9; }
.vms-stat--has-spark .vms-stat__foot { max-width: 55%; }
.vms-stat-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--s-5); }
.vms-stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .vms-stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .vms-stat-grid, .vms-stat-grid--4 { grid-template-columns: 1fr; } }
/* Spec block (site) */
.spec-block { background: var(--ink); color: var(--text-on-navy); border-radius: var(--radius); padding: var(--s-5); border: 1px solid var(--ink-3); }
.spec-block .num { font-size: var(--t-2xl); font-weight: 700; letter-spacing: -.03em; color: #fff; display: block; line-height: 1; margin: var(--s-2) 0; font-family: var(--mono); }
.spec-block .label { color: var(--text-on-navy-2); font-size: var(--t-sm); }
/* ---------- 7. Tables (DataTables 2 + bs5) ------------------------------- */
.vms-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); position: relative; }
.vms-table, .table.vms-table { --bs-table-bg: transparent; --bs-table-color: var(--text); width: 100%; margin: 0; color: var(--text); border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.vms-table thead th, .table thead th {
position: sticky; top: 0; z-index: 2; background: var(--surface); color: var(--text-3); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
border-bottom: 1px solid var(--line); padding: 10px 14px; white-space: nowrap; vertical-align: middle;
}
.vms-table tbody td, .table tbody td { padding: 0 14px; height: 48px; border-bottom: 1px solid var(--line-2); vertical-align: middle; background: transparent; box-shadow: none; transition: background var(--d-1) var(--ease); }
.vms-table tbody tr:hover td { background: var(--surface-2); }
.vms-table tbody tr:last-child td { border-bottom: 0; }
.vms-table tbody tr.is-selected td { background: rgba(31,157,107,.08); }
.vms-table .num, .vms-table .text-end, .vms-table td[data-num], .vms-table th[data-num] { text-align: right; font-variant-numeric: tabular-nums; }
.vms-table .actions { white-space: nowrap; text-align: right; }
.vms-table .actions .btn + .btn { margin-left: 4px; }
.vms-table .actions .btn-sm { padding: 6px 10px; }
.vms-table .actions .btn-light, .vms-table .actions .btn-ghost { border-color: transparent; }
.vms-table .actions .btn-light:hover { border-color: var(--line); }
.table > :not(caption) > * > * { background-color: transparent; box-shadow: none; }
.table-warning > td, tr.table-warning td { background: rgba(255,177,0,.09) !important; }
.table-light > td, tr.table-light td { background: var(--surface-2) !important; }
.vms-table .row-title { font-weight: 600; color: var(--text); white-space: nowrap; }
.vms-table .row-sub { font-size: var(--t-xs); color: var(--text-3); }
.vms-table .cell-who { display: flex; align-items: center; gap: 10px; }
/* DataTables 2 */
div.dt-container { padding: 0; }
div.dt-container .dt-layout-row { margin: 0; }
div.dt-container .dt-layout-row:first-child { margin-bottom: var(--s-3); }
div.dt-container .dt-layout-row:last-child { margin-top: var(--s-3); }
div.dt-container .dt-layout-cell { padding: 0; }
div.dt-container .dt-search { display: flex; align-items: center; gap: 8px; position: relative; }
div.dt-container .dt-search label { display: none; }
div.dt-container .dt-search input.form-control, div.dt-container .dt-search input {
height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat 13px center;
padding: 0 14px 0 36px; min-width: 220px; font-size: var(--t-sm); color: var(--text); margin: 0;
}
div.dt-container .dt-search input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--ring); outline: 0; }
div.dt-container .dt-length { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: var(--t-xs); }
div.dt-container .dt-length select.form-select, div.dt-container .dt-length select { width: auto; height: 34px; padding: 0 30px 0 12px; border-radius: 999px; font-size: var(--t-xs); border-color: var(--line); background-color: var(--surface); color: var(--text); }
div.dt-container .dt-length label { font-size: var(--t-xs); color: var(--text-3); }
div.dt-container .dt-info { color: var(--text-3); font-size: var(--t-xs); padding: 0; font-family: var(--mono); }
div.dt-container .dt-paging .pagination, .pagination { --bs-pagination-border-radius: 999px; gap: 4px; margin: 0; }
div.dt-container .dt-paging .pagination .page-link, .pagination .page-link, div.dt-container .dt-paging-button {
border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important;
min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 600; font-family: var(--mono); transition: background var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.pagination .page-link:hover, div.dt-container .dt-paging-button:hover { background: var(--surface-3) !important; border-color: var(--text) !important; }
.pagination .page-item.active .page-link, div.dt-container .dt-paging-button.current { background: var(--green) !important; color: #fff !important; border-color: var(--green) !important; }
.pagination .page-item.disabled .page-link, div.dt-container .dt-paging-button.disabled { opacity: .4; }
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover { outline: 0; color: var(--text); }
table.dataTable thead .dt-column-order::before, table.dataTable thead .dt-column-order::after { opacity: .25; }
table.dataTable thead th.dt-ordering-asc .dt-column-order::before, table.dataTable thead th.dt-ordering-desc .dt-column-order::after { opacity: 1; color: var(--green); }
table.dataTable.table > :not(caption) > * > * { padding-left: 14px; padding-right: 14px; }
div.dt-processing { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-2); border: 1px solid var(--line); color: var(--text-2); }
div.dt-processing > div:last-child > div { background: var(--green); }
.dt-buttons .btn { margin-right: .35rem; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--line); }
/* legacy DataTables 1.x wrapper (in case) */
div.dataTables_wrapper .dataTables_filter input { border-radius: 999px; border: 1px solid var(--line); padding: .4rem .9rem; }
/* ---------- 8. Badges · chips · forms ------------------------------------ */
.vms-badge {
display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; letter-spacing: .01em;
}
.vms-badge i { font-size: .8em; }
.vms-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; flex-shrink: 0; }
.vms-badge--nodot::before, .vms-badge > i:first-child ~ * { }
.vms-badge:has(> i:first-child)::before { display: none; }
.vms-badge-ok { background: rgba(31,157,107,.12); color: var(--green-lo); border-color: rgba(31,157,107,.3); }
.vms-badge-warn { background: rgba(255,177,0,.16); color: #7a5300; border-color: rgba(255,177,0,.45); }
.vms-badge-danger { background: rgba(232,91,107,.12); color: #a3253a; border-color: rgba(232,91,107,.35); }
.vms-badge-info { background: rgba(93,107,169,.12); color: #3f4c8c; border-color: rgba(93,107,169,.35); }
.vms-badge-neutral { background: var(--surface-3); color: var(--text-2); border-color: var(--line); }
.vms-badge-navy { background: var(--ink); color: #fff; border-color: var(--ink); }
[data-theme=dark] .vms-badge-ok { color: var(--green-hi); }
[data-theme=dark] .vms-badge-warn { color: #ffd166; }
[data-theme=dark] .vms-badge-danger { color: #ff9aa6; }
[data-theme=dark] .vms-badge-info { color: #b3bdf2; }
.vms-badge--lg { font-size: .82rem; padding: .35rem .8rem; }
.vms-chip, .chip {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: var(--t-xs); font-weight: 500; line-height: 1;
background: var(--surface-2); border: 1px solid var(--line); color: var(--text); user-select: none; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), border-color var(--d-2) var(--ease);
}
.vms-chip i, .chip i { color: var(--green); font-size: .85em; }
.vms-chip[role=button], button.vms-chip, a.vms-chip { cursor: pointer; }
.vms-chip:hover { border-color: var(--text); }
.vms-chip.active, .vms-chip[aria-pressed=true], .vms-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vms-chip.active i, .vms-chip[aria-pressed=true] i { color: var(--green-hi); }
.vms-chip.green, .chip.green { background: rgba(31,157,107,.1); border-color: rgba(31,157,107,.3); color: var(--green-lo); }
.vms-chip.warn, .chip.warn { background: var(--rose-soft); border-color: rgba(232,91,107,.25); color: var(--rose-lo); }
.vms-chip.on-navy, .chip.on-navy { background: rgba(255,255,255,.06); border-color: var(--line-on-navy); color: #fff; }
.vms-chip.on-navy i { color: var(--green-hi); }
.vms-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.vms-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.vms-dot--ok { background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,107,.2); } .vms-dot--warn { background: var(--amber); box-shadow: 0 0 0 3px rgba(255,177,0,.25); } .vms-dot--danger { background: var(--rose); box-shadow: 0 0 0 3px rgba(232,91,107,.22); }
.vms-dot--live { position: relative; } .vms-dot--live::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--green); animation: vms-ping 1.8s var(--ease) infinite; }
.vms-avatar {
--sz: 36px; width: var(--sz); height: var(--sz); border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
background: linear-gradient(135deg, var(--ink-2), var(--ink-3)); color: #fff; font-weight: 700; font-size: calc(var(--sz) * .38); letter-spacing: -.02em; overflow: hidden; text-transform: uppercase;
}
.vms-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vms-avatar--sm { --sz: 28px; } .vms-avatar--lg { --sz: 48px; } .vms-avatar--xl { --sz: 64px; }
.vms-avatar--green { background: var(--grad-green); } .vms-avatar--soft { background: var(--surface-3); color: var(--text); }
.vms-avatar--square { border-radius: 10px; }
.vms-user__avatar { --sz: 36px; width: var(--sz); height: var(--sz); border-radius: 50%; display: inline-grid; place-items: center; background: linear-gradient(135deg, var(--ink-2), var(--ink-3)); color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0; overflow: hidden; }
.vms-avatar-stack { display: inline-flex; } .vms-avatar-stack .vms-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface); } .vms-avatar-stack .vms-avatar:first-child { margin-left: 0; }
/* Forms */
.form-label, .vms-form label:not(.form-check-label):not(.btn) { font-weight: 600; font-size: .8rem; color: var(--text-2); margin-bottom: 6px; letter-spacing: .01em; }
.form-control, .form-select {
min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background-color: var(--surface); color: var(--text); font-family: var(--font); font-size: var(--t-sm); padding: 8px 14px;
box-shadow: var(--shadow-1); transition: border-color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.form-control::placeholder { color: var(--text-3); opacity: .8; }
.form-control:hover, .form-select:hover { border-color: rgba(0,20,51,.25); }
.form-control:focus, .form-select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--ring); background-color: var(--surface); color: var(--text); outline: 0; }
.form-control:disabled, .form-select:disabled { background: var(--surface-2); opacity: .8; }
.form-control-sm, .form-select-sm { min-height: 36px; padding: 4px 12px; font-size: var(--t-xs); border-radius: 8px; }
.form-control-lg, .form-select-lg { min-height: 52px; font-size: var(--t-base); border-radius: 12px; }
textarea.form-control { min-height: 100px; }
.form-select { background-image: url("data:image/svg+xml;utf8,"); background-size: 12px; }
[data-theme=dark] .form-select { background-image: url("data:image/svg+xml;utf8,"); }
.input-group { border-radius: 10px; }
.input-group-text { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3); border-radius: 10px; font-size: var(--t-sm); }
.input-group > .form-control, .input-group > .form-select { min-height: 44px; }
.input-group .btn { border-radius: 10px; padding: 8px 14px; transform: none; }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group:focus-within .input-group-text { border-color: var(--green); }
.form-text, .vms-help { font-size: .76rem; color: var(--text-3); }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid rgba(0,20,51,.3); background-color: var(--surface); margin-top: .18em; }
.form-check-input:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--ring); }
.form-check-input:checked { background-color: var(--green); border-color: var(--green); }
.form-check-label { font-size: var(--t-sm); color: var(--text); }
.form-switch { padding-left: 3.3em; min-height: 1.5em; } .form-switch .form-check-input { margin-left: -3.3em; margin-top: .1em; width: 2.6em; height: 1.45em; border-radius: 2em; background-color: var(--surface-3); border-color: var(--line); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e"); box-shadow: inset 0 1px 2px rgba(0,20,51,.12); transition: background-position var(--d-2) var(--ease), background-color var(--d-2) var(--ease); }
.form-switch .form-check-input:checked { background-color: var(--green); border-color: var(--green); box-shadow: 0 2px 8px rgba(31,157,107,.35); }
.vms-form .required::after { content: " *"; color: var(--rose); }
.vms-form .field-validation-error, .vms-form .text-danger, .invalid-feedback { font-size: .76rem; color: var(--rose-lo) !important; display: block; margin-top: 6px; font-weight: 500; }
.vms-form .input-validation-error, .form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--rose); background-image: none; }
.vms-form .input-validation-error:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(232,91,107,.2); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: var(--green); background-image: none; }
.vms-form .validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.vms-form .validation-summary-errors { color: var(--rose-lo); background: rgba(232,91,107,.08); border: 1px solid rgba(232,91,107,.25); border-radius: 10px; padding: 10px 14px; margin-bottom: var(--s-4); font-size: var(--t-sm); }
.vms-form .validation-summary-valid { display: none; }
.vms-form__actions { display: flex; gap: var(--s-2); justify-content: flex-end; margin-top: var(--s-5); flex-wrap: wrap; }
.vms-form .form-section { border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-4); }
.vms-form .form-section__title { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); font-weight: 600; margin-bottom: var(--s-3); }
.vms-field { position: relative; margin-bottom: var(--s-4); }
.vms-field > i.lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-size: 14px; }
.vms-field > i.lead ~ .form-control { padding-left: 40px; }
.vms-field .trail { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; cursor: pointer; }
.vms-field .trail:hover { background: var(--surface-2); color: var(--ink); }
.vms-field--float { padding-top: 0; }
.vms-field--float .form-control { min-height: 52px; padding: 20px 14px 6px; }
.vms-field--float > label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: var(--t-sm); color: var(--text-3); pointer-events: none; transition: all var(--d-2) var(--ease); font-weight: 500; margin: 0; }
.vms-field--float .form-control:focus ~ label, .vms-field--float .form-control:not(:placeholder-shown) ~ label { top: 9px; transform: none; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--green-lo); font-family: var(--mono); }
.vms-search { position: relative; }
.vms-search input { padding-left: 38px; border-radius: 999px; }
.vms-search > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; font-size: 13px; z-index: 3; }
.vms-search label + i { top: auto; bottom: 15px; transform: none; }
.vms-filterbar { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: flex-end; margin-bottom: var(--s-4); }
.vms-filterbar > * { min-width: 160px; }
.vms-filterbar .vms-filterbar__actions { margin-left: auto; display: flex; gap: var(--s-2); min-width: 0; }
.vms-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.vms-toolbar__spacer { flex: 1; }
.vms-segmented { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); gap: 2px; }
.vms-segmented > input { position: absolute; opacity: 0; width: 0; height: 0; }
.vms-segmented > label, .vms-segmented > button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--text-2); font: 600 var(--t-xs) var(--font); cursor: pointer; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); margin: 0; }
.vms-segmented > input:checked + label, .vms-segmented > .active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); }
.vms-segmented > input:focus-visible + label { outline: 2px solid var(--green); outline-offset: 2px; }
.vms-dropzone {
border: 2px dashed var(--line); border-radius: var(--radius); padding: var(--s-5); text-align: center; background: var(--surface-2); color: var(--text-3); cursor: pointer;
transition: border-color var(--d-2) var(--ease), background var(--d-2) var(--ease);
}
.vms-dropzone:hover, .vms-dropzone.is-over { border-color: var(--green); background: rgba(31,157,107,.06); }
.vms-dropzone i { font-size: 26px; color: var(--green); margin-bottom: 8px; display: block; }
.vms-dropzone strong { color: var(--text); display: block; }
.flatpickr-calendar { font-family: var(--font); border-radius: var(--radius); box-shadow: var(--shadow-3); border: 1px solid var(--line); background: var(--surface); color: var(--text); }
.flatpickr-day { color: var(--text); border-radius: 8px; }
.flatpickr-day:hover { background: var(--surface-3); border-color: var(--surface-3); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:hover { background: var(--green); border-color: var(--green); color: #fff; }
.flatpickr-day.inRange { background: rgba(31,157,107,.12); border-color: rgba(31,157,107,.12); box-shadow: -5px 0 0 rgba(31,157,107,.12), 5px 0 0 rgba(31,157,107,.12); }
.flatpickr-day.today { border-color: var(--green); }
.flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-weekday, span.flatpickr-weekday { color: var(--text); fill: var(--text); }
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--text-2); }
.vms-logo-preview { max-height: 72px; max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); padding: .25rem; background: #fff; }
.vms-photo { border-radius: var(--radius-sm); border: 1px solid var(--line); object-fit: cover; }
.vms-photo--lg { width: 160px; height: 200px; }
.vms-photo--sm { width: 44px; height: 44px; border-radius: 50%; }
.vms-kv { display: grid; grid-template-columns: minmax(120px, 35%) 1fr; gap: 8px 16px; font-size: var(--t-sm); }
.vms-kv dt { color: var(--text-3); font-weight: 500; margin: 0; }
.vms-kv dd { margin: 0; font-weight: 600; }
.vms-loading { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-3); }
[data-vms-modal-url], [data-vms-confirm] { cursor: pointer; }
/* ---------- 9. Modals · offcanvas · dropdowns ----------------------------- */
.modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--text); --bs-modal-border-radius: var(--radius-lg); }
.modal-backdrop { --bs-backdrop-bg: #001433; --bs-backdrop-opacity: .55; }
.modal.fade .modal-dialog { transform: translateY(12px) scale(.97); transition: transform var(--d-3) var(--ease-out), opacity var(--d-3) var(--ease); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-content { border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-3); background: var(--surface); color: var(--text); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(0,20,51,.05), rgba(0,20,51,.02)); padding: var(--s-4) var(--s-5); }
[data-theme=dark] .modal-header { background: rgba(255,255,255,.03); }
.modal-title { font-weight: 700; letter-spacing: -.02em; font-size: var(--t-md); display: flex; align-items: center; gap: 10px; }
.modal-title i { color: var(--green); font-size: .9em; }
.modal-body { padding: var(--s-5); }
.modal-footer { border-top: 1px solid var(--line); padding: var(--s-3) var(--s-5); gap: var(--s-2); background: var(--surface-2); }
.modal-footer > * { margin: 0; }
/* Drawer variant of the shared #modal (VMS.modal.load(url, { size: "drawer" }) / data-vms-modal-size="drawer") */
.modal.vms-modal--drawer .modal-dialog { position: fixed; top: 0; right: 0; bottom: 0; margin: 0; width: min(600px, 100vw); max-width: none; height: 100%; display: flex; align-items: stretch; transform: translateX(40px); }
.modal.vms-modal--drawer.show .modal-dialog { transform: none; }
.modal.vms-modal--drawer .modal-dialog.modal-lg, .modal.vms-modal--drawer .modal-dialog.modal-xl { width: min(760px, 100vw); }
.modal.vms-modal--drawer .modal-content { height: 100%; border-radius: 0; border: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.modal.vms-modal--drawer .modal-content > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.modal.vms-modal--drawer .modal-body { flex: 1; overflow-y: auto; }
.modal.vms-modal--drawer .modal-header { background: var(--grad-navy); color: #fff; border-bottom: 0; padding: var(--s-5); }
.modal.vms-modal--drawer .modal-title { color: #fff; }
.modal.vms-modal--drawer .modal-title i, .modal.vms-modal--drawer .modal-title .text-primary { color: var(--green-hi) !important; }
.modal.vms-modal--drawer .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal.vms-modal--drawer .modal-footer { position: sticky; bottom: 0; }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text); --bs-offcanvas-width: 420px; border: 0 !important; box-shadow: var(--shadow-3); }
.offcanvas-header { border-bottom: 1px solid var(--line); padding: var(--s-4) var(--s-5); }
.offcanvas-title { font-weight: 700; letter-spacing: -.02em; }
.offcanvas-body { padding: var(--s-5); }
.dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-active-bg: var(--ink); border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-3); padding: 8px; font-size: var(--t-sm); animation: vms-pop var(--d-2) var(--ease-out); }
.dropdown-item { border-radius: 8px; padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.dropdown-item i { width: 16px; text-align: center; color: var(--text-3); }
.dropdown-item:hover i { color: var(--green); }
.dropdown-divider { border-color: var(--line); }
.tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-color: #fff; --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: 12px; --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 6px; font-family: var(--font); }
.popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--line); --bs-popover-border-radius: var(--radius); box-shadow: var(--shadow-3); font-family: var(--font); }
[data-vms-tip] { position: relative; }
[data-vms-tip]::after { content: attr(data-vms-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 4px); background: var(--ink); color: #fff; font: 500 12px/1.3 var(--font); padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--d-2) var(--ease), transform var(--d-2) var(--ease); z-index: 20; }
[data-vms-tip]:hover::after, [data-vms-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* ---------- 10. Toasts · SweetAlert2 theme ------------------------------- */
.swal2-container { z-index: 2000 !important; }
.swal2-popup { font-family: var(--font) !important; border-radius: var(--radius-lg) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: var(--shadow-3) !important; border: 1px solid var(--line); padding: var(--s-6) var(--s-5) var(--s-5) !important; }
.swal2-title { font-weight: 700 !important; letter-spacing: -.02em !important; font-size: var(--t-lg) !important; color: var(--text) !important; }
.swal2-html-container { color: var(--text-2) !important; font-size: var(--t-sm) !important; line-height: 1.55 !important; }
.swal2-icon { border-width: 3px !important; margin: 0 auto var(--s-4) !important; }
.swal2-icon.swal2-warning { border-color: var(--amber) !important; color: var(--amber-lo) !important; }
.swal2-icon.swal2-question { border-color: var(--blue) !important; color: var(--blue) !important; }
.swal2-icon.swal2-error { border-color: var(--rose) !important; } .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background: var(--rose) !important; }
.swal2-icon.swal2-success { border-color: var(--green) !important; color: var(--green) !important; } .swal2-icon.swal2-success [class^=swal2-success-line] { background: var(--green) !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(31,157,107,.35) !important; }
.swal2-icon.swal2-info { border-color: var(--info) !important; color: var(--info) !important; }
.swal2-actions { gap: var(--s-2) !important; margin-top: var(--s-5) !important; }
.swal2-styled { margin: 0 !important; }
.swal2-styled.swal2-confirm, .vms-swal__confirm { background: var(--green) !important; color: #fff !important; border-radius: 999px !important; padding: 12px 24px !important; font-weight: 600 !important; font-size: var(--t-sm) !important; box-shadow: var(--glow-green) !important; transition: transform var(--d-1) var(--ease), background var(--d-2) var(--ease) !important; }
.swal2-styled.swal2-confirm:hover { background: var(--green-hi) !important; transform: translateY(-1px); }
.vms-swal--danger .swal2-styled.swal2-confirm { background: var(--rose) !important; box-shadow: 0 6px 20px rgba(232,91,107,.28) !important; }
.vms-swal--warn .swal2-styled.swal2-confirm { background: var(--amber) !important; color: #1a1a1a !important; box-shadow: 0 6px 20px rgba(255,177,0,.3) !important; }
.vms-swal--navy .swal2-styled.swal2-confirm { background: var(--ink) !important; box-shadow: none !important; }
.swal2-styled.swal2-cancel, .vms-swal__cancel { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-radius: 999px !important; padding: 12px 22px !important; font-weight: 600 !important; font-size: var(--t-sm) !important; }
.swal2-styled.swal2-cancel:hover { background: var(--surface-2) !important; border-color: var(--ink) !important; }
[data-theme=dark] .swal2-styled.swal2-cancel { color: var(--text) !important; }
.swal2-styled:focus { box-shadow: 0 0 0 3px var(--ring) !important; }
.swal2-loader { border-color: var(--green) transparent var(--green) transparent !important; }
.swal2-input, .swal2-textarea, .swal2-select { border: 1px solid var(--line) !important; border-radius: 10px !important; font-family: var(--font) !important; background: var(--surface) !important; color: var(--text) !important; box-shadow: none !important; }
.swal2-input:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--ring) !important; }
.swal2-timer-progress-bar { background: var(--green) !important; height: 3px !important; }
.swal2-show { animation: vms-pop var(--d-3) var(--ease-out) !important; }
.swal2-hide { animation: vms-pop-out var(--d-2) var(--ease) forwards !important; }
/* toast */
.swal2-toast.vms-toast, .swal2-popup.swal2-toast {
--bar: var(--green); padding: 12px 16px 12px 18px !important; border-radius: 14px !important; min-width: 300px; max-width: 420px;
background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
box-shadow: var(--shadow-3) !important; border: 1px solid var(--line) !important; overflow: hidden; position: relative;
}
[data-theme=dark] .swal2-popup.swal2-toast { background: rgba(15,27,54,.86) !important; }
.swal2-popup.swal2-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bar); }
.swal2-popup.swal2-toast .swal2-title { font-size: 14px !important; font-weight: 600 !important; margin: 0 0 0 8px !important; text-align: left; letter-spacing: 0 !important; }
.swal2-popup.swal2-toast .swal2-html-container { font-size: 12.5px !important; margin: 2px 0 0 8px !important; text-align: left; }
.swal2-popup.swal2-toast .swal2-icon { width: 30px !important; height: 30px !important; min-width: 30px; margin: 0 !important; border-width: 2px !important; font-size: 13px; }
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content { font-size: 18px; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--bar) !important; opacity: .8; }
.vms-toast--success { --bar: var(--green); } .vms-toast--error { --bar: var(--rose); } .vms-toast--warning { --bar: var(--amber); } .vms-toast--info { --bar: var(--info); }
.swal2-popup.swal2-toast.vms-toast-show { animation: vms-toast-in var(--d-3) var(--ease-out) !important; }
.swal2-popup.swal2-toast.vms-toast-hide { animation: vms-toast-out var(--d-2) var(--ease) forwards !important; }
.swal2-popup.swal2-toast .swal2-close { color: var(--text-3) !important; font-size: 20px; margin-left: 8px; }
.swal2-popup.swal2-toast .swal2-close:hover { color: var(--text) !important; }
/* inline alerts */
.vms-alert { border-radius: 12px; border: 1px solid var(--line); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); background: var(--surface-2); color: var(--text); position: relative; overflow: hidden; }
.vms-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--text-3); }
.vms-alert > i { font-size: 16px; margin-top: 2px; color: var(--text-3); }
.vms-alert strong { display: block; }
.vms-alert--ok { background: rgba(31,157,107,.08); border-color: rgba(31,157,107,.3); } .vms-alert--ok::before, .vms-alert--ok > i { background: var(--green); color: var(--green-lo); }
.vms-alert--danger { background: rgba(232,91,107,.08); border-color: rgba(232,91,107,.3); } .vms-alert--danger::before, .vms-alert--danger > i { background: var(--rose); color: var(--rose-lo); }
.vms-alert--warn { background: rgba(255,177,0,.1); border-color: rgba(255,177,0,.4); } .vms-alert--warn::before, .vms-alert--warn > i { background: var(--amber); color: var(--amber-lo); }
.vms-alert--info { background: rgba(47,111,237,.08); border-color: rgba(47,111,237,.3); } .vms-alert--info::before, .vms-alert--info > i { background: var(--info); color: var(--info); }
.vms-alert--ok > i, .vms-alert--danger > i, .vms-alert--warn > i, .vms-alert--info > i { background: transparent; }
.alert { border-radius: 12px; border: 1px solid var(--line); font-size: var(--t-sm); }
/* ---------- 11. Timeline · empty · skeleton · progress · tabs ------------- */
.vms-timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.vms-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--line), var(--line-2)); border-radius: 2px; }
.vms-timeline__item { position: relative; padding: 0 0 18px 4px; }
.vms-timeline__item:last-child { padding-bottom: 0; }
.vms-timeline__item::before { content: ""; position: absolute; left: -25px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--blue); box-shadow: 0 0 0 3px var(--surface); }
.vms-timeline__item--ok::before { border-color: var(--green); } .vms-timeline__item--warn::before { border-color: var(--amber); } .vms-timeline__item--danger::before { border-color: var(--rose); } .vms-timeline__item--info::before { border-color: var(--blue); }
.vms-timeline__item--live::before { animation: vms-ping-border 1.8s var(--ease) infinite; }
.vms-timeline__time { font-family: var(--mono); font-size: .72rem; color: var(--text-3); letter-spacing: .04em; }
.vms-timeline__title { font-weight: 600; font-size: var(--t-sm); color: var(--text); }
.vms-timeline__text { font-size: var(--t-xs); color: var(--text-3); margin: 0; }
.vms-list { list-style: none; margin: 0; padding: 0; }
.vms-list__item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); }
.vms-list__item:last-child { border-bottom: 0; }
.vms-list__item .grow { flex: 1; min-width: 0; }
.vms-list__item .title { font-weight: 600; font-size: var(--t-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vms-list__item .sub { font-size: var(--t-xs); color: var(--text-3); }
.vms-list__item .meta { font-family: var(--mono); font-size: .72rem; color: var(--text-3); white-space: nowrap; }
.vms-list--hover .vms-list__item { margin: 0 calc(var(--s-3) * -1); padding-left: var(--s-3); padding-right: var(--s-3); border-radius: 10px; transition: background var(--d-2) var(--ease); }
.vms-list--hover .vms-list__item:hover { background: var(--surface-2); }
.vms-empty { text-align: center; padding: var(--s-7) var(--s-5); color: var(--text-3); display: flex; flex-direction: column; align-items: center; }
.vms-empty__art { width: 132px; height: 96px; margin-bottom: var(--s-4); }
.vms-empty__art .a { fill: var(--surface-3); } .vms-empty__art .b { fill: var(--surface); stroke: var(--line); } .vms-empty__art .c { fill: var(--green); } .vms-empty__art .d { stroke: var(--text-3); opacity: .5; }
.vms-empty__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--surface-2); display: grid; place-items: center; font-size: 24px; color: var(--text-2); margin-bottom: var(--s-3); }
.vms-empty__title { font-weight: 700; color: var(--text); margin-bottom: 4px; font-size: var(--t-md); letter-spacing: -.02em; }
.vms-empty__text { max-width: 420px; margin: 0 auto var(--s-4); font-size: var(--t-sm); color: var(--text-3); }
.vms-empty--sm { padding: var(--s-5); } .vms-empty--sm .vms-empty__art { width: 96px; height: 70px; }
.vms-skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: 8px; color: transparent !important; min-height: 1em; }
.vms-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: vms-shimmer 1.4s var(--ease) infinite; }
[data-theme=dark] .vms-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.vms-skeleton--text { height: 12px; margin: 6px 0; } .vms-skeleton--title { height: 20px; width: 40%; } .vms-skeleton--circle { border-radius: 50%; width: 40px; height: 40px; } .vms-skeleton--block { height: 120px; }
.vms-skeleton-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; }
.vms-skeleton-row .vms-skeleton--text { flex: 1; margin: 0; }
.progress, .vms-progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress-bar, .vms-progress__bar { background: var(--grad-green); border-radius: 999px; transition: width var(--d-4) var(--ease-out); }
.vms-progress__bar { height: 100%; display: block; }
.vms-progress--striped .vms-progress__bar, .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent), var(--grad-green); background-size: 1rem 1rem, 100% 100%; animation: vms-stripes 1s linear infinite; }
.vms-progress--navy .vms-progress__bar { background: linear-gradient(90deg, var(--ink-3), var(--ink-2)); } .vms-progress--amber .vms-progress__bar { background: linear-gradient(90deg, #ffd66b, #ffb100); } .vms-progress--rose .vms-progress__bar { background: linear-gradient(90deg, #f18a95, #e85b6b); }
.vms-progress--lg { height: 12px; } .vms-progress--sm { height: 5px; }
.vms-meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: var(--t-xs); }
.vms-meter .lbl { font-weight: 600; color: var(--text); } .vms-meter .val { font-family: var(--mono); color: var(--text-3); }
.vms-meter .vms-progress { grid-column: 1 / -1; }
.nav-tabs, .vms-tabs { border-bottom: 1px solid var(--line); gap: 4px; }
.nav-tabs .nav-link, .vms-tabs .nav-link { color: var(--text-3); font-weight: 600; font-size: var(--t-sm); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 14px; margin-bottom: -1px; transition: color var(--d-2) var(--ease), border-color var(--d-2) var(--ease); }
.nav-tabs .nav-link:hover, .vms-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--line); }
.nav-tabs .nav-link.active, .vms-tabs .nav-link.active { color: var(--green-lo); border-bottom-color: var(--green); background: transparent; }
.nav-pills, .vms-pills { gap: 4px; }
.nav-pills .nav-link, .vms-pills .nav-link { border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: var(--t-xs); padding: 8px 14px; }
.nav-pills .nav-link.active, .vms-pills .nav-link.active { background: var(--ink); color: #fff; }
.accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--radius); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-bg: var(--surface-2); --bs-accordion-active-color: var(--green-lo); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--ring); }
.accordion-button { font-weight: 600; }
.vms-steps { display: flex; align-items: center; gap: 0; counter-reset: step; }
.vms-steps__item { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); font-weight: 600; color: var(--text-3); position: relative; }
.vms-steps__item::before { counter-increment: step; content: counter(step); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); transition: all var(--d-2) var(--ease); }
.vms-steps__item + .vms-steps__item { margin-left: 8px; padding-left: 40px; }
.vms-steps__item + .vms-steps__item::after { content: ""; position: absolute; left: 4px; top: 13px; width: 28px; height: 2px; background: var(--line); border-radius: 2px; }
.vms-steps__item.active { color: var(--text); } .vms-steps__item.active::before { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 0 0 4px rgba(31,157,107,.2); }
.vms-steps__item.done::before { background: var(--ink); color: #fff; border-color: var(--ink); content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; }
.vms-steps__item.done + .vms-steps__item::after { background: var(--green); }
.vms-health { display: flex; flex-wrap: wrap; gap: 10px; }
.vms-health__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); min-width: 190px; flex: 1; }
.vms-health__item .name { font-weight: 600; font-size: var(--t-xs); color: var(--text); display: block; }
.vms-health__item .meta { font-family: var(--mono); font-size: .68rem; color: var(--text-3); }
.vms-health__item .vms-dot { margin-left: auto; }
.vms-ribbon { position: absolute; top: 12px; right: -34px; transform: rotate(45deg); background: var(--green); color: #fff; font: 700 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 40px; box-shadow: var(--shadow-2); }
.vms-grid { display: grid; gap: var(--s-4); }
.vms-grid > * { min-width: 0; max-width: 100%; } /* grid items must be allowed to shrink below their content (charts/tables) or the page overflows and ApexCharts resize-redraw loops */
.vms-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vms-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vms-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vms-grid--main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
@media (max-width: 1100px) { .vms-grid--3, .vms-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vms-grid--main { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .vms-grid--2, .vms-grid--3, .vms-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.vms-scroll { max-height: 420px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.vms-scroll::-webkit-scrollbar { width: 8px; } .vms-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
/* ---------- 12. Charts ----------------------------------------------------- */
/* Before DataTables initialises, a server-rendered table shows only its first page so a 2000-row body never flashes full height */
table[data-vms-table]:not([data-vms-table-ready]) > tbody > tr:nth-child(n+26) { display: none; }
.vms-chart { position: relative; min-height: 240px; min-width: 0; width: 100%; max-width: 100%; overflow: hidden; contain: inline-size; }
.vms-chart > .apexcharts-canvas, .vms-chart svg.apexcharts-svg { max-width: 100%; }
.vms-card { min-width: 0; }
.row > * { min-width: 0; }
.vms-chart--sm { min-height: 160px; }
.apexcharts-canvas { font-family: var(--font) !important; }
.apexcharts-tooltip.vms-apex-tooltip, .apexcharts-tooltip { background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; box-shadow: var(--shadow-3) !important; font-family: var(--font) !important; font-size: 12px !important; }
.apexcharts-tooltip-title { background: rgba(255,255,255,.08) !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; font-weight: 600 !important; font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: .06em; }
.apexcharts-tooltip-series-group { padding: 2px 10px !important; }
.apexcharts-tooltip-text-y-value, .apexcharts-tooltip-text-goals-value { font-family: var(--mono) !important; font-weight: 600 !important; }
.apexcharts-xaxistooltip { background: var(--ink) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; font-family: var(--mono) !important; font-size: 11px !important; }
.apexcharts-xaxistooltip::before, .apexcharts-xaxistooltip::after { border-bottom-color: var(--ink) !important; }
.apexcharts-legend-text { color: var(--text-2) !important; font-family: var(--font) !important; font-size: 12px !important; font-weight: 500 !important; }
.apexcharts-legend-marker { border-radius: 4px !important; }
.apexcharts-gridline { stroke: var(--line-2) !important; }
.apexcharts-xaxis-label, .apexcharts-yaxis-label { fill: var(--text-3) !important; font-family: var(--mono) !important; font-size: 10.5px !important; }
.apexcharts-datalabel-label, .apexcharts-datalabel-value { fill: var(--text) !important; font-family: var(--mono) !important; }
.apexcharts-menu { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; color: var(--text) !important; }
.apexcharts-menu-item:hover { background: var(--surface-2) !important; }
.apexcharts-toolbar { z-index: 3 !important; }
.vms-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--t-xs); color: var(--text-2); }
.vms-legend span { display: inline-flex; align-items: center; gap: 6px; } .vms-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* ---------- 13. Kiosk ------------------------------------------------------ */
.vms-kiosk {
min-height: 100vh; display: flex; flex-direction: column; position: relative; isolation: isolate;
background: var(--grad-navy); color: #fff; font-size: 1.1rem; -webkit-tap-highlight-color: transparent; user-select: none;
}
.vms-kiosk::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 50% -10%, rgba(31,157,107,.28), transparent 65%), radial-gradient(700px 500px at 100% 100%, rgba(93,107,169,.22), transparent 60%); animation: vms-breathe 10s ease-in-out infinite; }
.vms-kiosk::after { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 75%); pointer-events: none; }
.vms-kiosk *:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.vms-kiosk-topbar { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--gutter); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,20,51,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vms-kiosk-topbar img { height: 40px; }
.vms-kiosk-topbar .vms-topnav__mark { width: 40px; height: 40px; }
.vms-kiosk-topbar__brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; white-space: nowrap; }
.vms-kiosk-topbar__brand:hover { color: #fff; }
.vms-kiosk-topbar__brand > span > strong { font-size: 15px; letter-spacing: -.02em; display: block; line-height: 1; }
.vms-kiosk-topbar__brand > span > span { font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--green-hi); }
.vms-kiosk-topbar__site { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-size: .95rem; }
.vms-kiosk-topbar__site i { color: var(--green-hi); }
.vms-kiosk-topbar__clock { margin-left: auto; font-family: var(--mono); font-size: 1.15rem; font-weight: 600; color: #fff; letter-spacing: .04em; }
.vms-kiosk-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: var(--s-5) var(--gutter) 8rem; width: 100%; }
.vms-kiosk-welcome { text-align: center; margin-bottom: var(--s-5); }
.vms-kiosk-welcome h1 { color: #fff; font-size: var(--t-2xl); letter-spacing: -.03em; margin: 6px 0; }
.vms-kiosk-welcome .vms-eyebrow { color: var(--green-hi); }
.vms-kiosk-welcome .clock { font-family: var(--mono); color: var(--text-on-navy-2); font-size: 1rem; }
.vms-kiosk-welcome p { color: var(--text-on-navy-2); }
.vms-kiosk-group { width: 100%; max-width: 980px; margin-bottom: var(--s-5); }
.vms-kiosk-group__label { display: flex; align-items: center; gap: 10px; color: var(--text-on-navy-2); font: 500 .72rem var(--mono); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.vms-kiosk-group__label i { color: var(--green-hi); }
.vms-kiosk-group__label::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }
.vms-kiosk-panel {
width: 100%; max-width: 960px; background: var(--surface); color: var(--text); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06); padding: var(--s-6); position: relative;
animation: vms-rise var(--d-4) var(--ease-out);
}
.vms-kiosk-title { font-size: var(--t-xl); font-weight: 700; text-align: center; margin: 0 0 6px; color: var(--text); letter-spacing: -.03em; display: flex; align-items: center; justify-content: center; gap: 12px; }
.vms-kiosk-title i { color: var(--green); font-size: .8em; }
.vms-kiosk-sub { text-align: center; color: var(--text-3); margin-bottom: var(--s-5); font-size: var(--t-base); }
.vms-kiosk .btn, .vms-kiosk-btn, .vms-kiosk .form-control, .vms-kiosk .form-select { min-height: var(--touch); font-size: 1.1rem; border-radius: 16px; }
.vms-kiosk .form-control, .vms-kiosk .form-select { padding: 10px 18px; }
.vms-kiosk .btn { padding: 14px 28px; font-weight: 700; }
.vms-kiosk .btn-sm { min-height: 44px; font-size: .95rem; padding: 8px 18px; }
.vms-kiosk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: 14px 28px; font-weight: 700; border: 0; cursor: pointer; transition: transform var(--d-1) var(--ease), background var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); }
.vms-kiosk-btn:active { transform: scale(.97); }
.vms-kiosk-btn--primary { background: var(--green); color: #fff; box-shadow: var(--glow-green); }
.vms-kiosk-btn--primary:hover { background: var(--green-hi); color: #fff; }
.vms-kiosk-btn--ghost { background: var(--surface-3); color: var(--text); }
.vms-kiosk-btn--danger { background: var(--rose); color: #fff; }
.vms-kiosk-btn--block { width: 100%; }
.vms-kiosk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); width: 100%; }
.vms-kiosk-tile {
position: relative; min-height: 168px; border-radius: 22px; background: var(--surface); color: var(--text); text-decoration: none; overflow: hidden;
display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: var(--s-5);
box-shadow: 0 16px 40px rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease);
}
.vms-kiosk-tile::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad-green); }
.vms-kiosk-tile--out::before { background: linear-gradient(90deg, #f18a95, #e85b6b); }
.vms-kiosk-tile::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 22px; bottom: 24px; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); color: var(--ink); display: grid; place-items: center; font-size: 14px; transition: background var(--d-2) var(--ease), color var(--d-2) var(--ease), transform var(--d-2) var(--ease); }
.vms-kiosk-tile:hover, .vms-kiosk-tile:active { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,.4); color: var(--text); }
.vms-kiosk-tile:hover::after { background: var(--green); color: #fff; transform: translateX(3px); }
.vms-kiosk-tile i { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 22px; background: rgba(31,157,107,.12); color: var(--green-lo); margin-bottom: auto; }
.vms-kiosk-tile--out i { background: rgba(232,91,107,.12); color: var(--rose-lo); }
.vms-kiosk-tile span { font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.vms-kiosk-tile small { color: var(--text-3); font-size: .92rem; font-weight: 500; max-width: 80%; }
.vms-kiosk-stepper { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto var(--s-5); max-width: 720px; }
.vms-kiosk-stepper .step { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; flex: 1; font: 600 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.vms-kiosk-stepper .step .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--line); color: var(--text-3); font-size: 13px; transition: all var(--d-3) var(--ease); }
.vms-kiosk-stepper .step + .step::before { content: ""; position: absolute; left: -50%; right: 50%; top: 17px; height: 2px; background: var(--line); z-index: 0; }
.vms-kiosk-stepper .step .n { position: relative; z-index: 1; }
.vms-kiosk-stepper .step.active .n { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 0 0 6px rgba(31,157,107,.18); transform: scale(1.1); }
.vms-kiosk-stepper .step.active { color: var(--green-lo); }
.vms-kiosk-stepper .step.done .n { background: var(--ink); border-color: var(--ink); color: #fff; font-size: 0; }
.vms-kiosk-stepper .step.done + .step::before { background: var(--green); }
.vms-kiosk-stepper .step.done .n::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; }
.vms-kiosk-steps { display: flex; justify-content: center; gap: 8px; margin: 0 0 var(--s-4); }
.vms-kiosk-steps .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--surface-3); border: 2px solid var(--line); transition: all var(--d-3) var(--ease); }
.vms-kiosk-steps .dot.active { background: var(--green); border-color: var(--green); width: 28px; }
.vms-kiosk-steps .dot.done { background: var(--ink); border-color: var(--ink); }
.vms-kiosk-controls {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: flex; gap: var(--s-3); justify-content: space-between; align-items: center;
padding: var(--s-4) var(--gutter); background: rgba(0,20,51,.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.1);
}
.vms-kiosk-controls .btn { min-width: 160px; }
.vms-kiosk-controls .btn-secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: #fff; }
.vms-kiosk-controls .btn-secondary:hover { background: rgba(255,255,255,.18); }
.vms-kiosk-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4); }
.vms-kiosk-mode__btn { border: 2px solid var(--line); background: var(--surface-2); border-radius: 18px; padding: var(--s-5) var(--s-4); min-height: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; color: var(--text); cursor: pointer; transition: all var(--d-2) var(--ease); }
.vms-kiosk-mode__btn i { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: var(--text-2); background: var(--surface); box-shadow: var(--shadow-1); }
.vms-kiosk-mode__btn:hover, .vms-kiosk-mode__btn.active { border-color: var(--green); background: rgba(31,157,107,.08); transform: translateY(-2px); }
.vms-kiosk-mode__btn.active i { background: var(--green); color: #fff; }
.vms-kiosk-reason { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
.vms-kiosk .form-label, .vms-kiosk .vms-form label:not(.form-check-label) { font-size: .95rem; }
.vms-kiosk-reason .reason-card, .vms-kiosk-reason label.reason-card { font-size: 1.05rem !important; color: var(--text); margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; min-height: var(--touch); padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface-2); font-weight: 600; cursor: pointer; transition: all var(--d-2) var(--ease); }
.vms-kiosk-reason .reason-card.active, .vms-kiosk-reason input:checked + .reason-card { border-color: var(--green); background: rgba(31,157,107,.1); color: var(--green-lo); box-shadow: 0 0 0 4px rgba(31,157,107,.12); }
.vms-kiosk-reason input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; }
.vms-kiosk-scanbox { border: 2px dashed var(--line); border-radius: 20px; padding: var(--s-6) var(--s-5); text-align: center; background: var(--surface-2); margin-bottom: var(--s-4); position: relative; overflow: hidden; }
.vms-kiosk-scanbox i { font-size: 44px; color: var(--ink-3); }
.vms-kiosk-scanbox.is-waiting { border-color: rgba(31,157,107,.5); }
.vms-kiosk-scanbox.is-waiting i { animation: vms-pulse 1.4s ease-in-out infinite; color: var(--green); }
.vms-kiosk-scanbox.is-waiting::after { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--green-hi), transparent); animation: vms-scanline 2.2s var(--ease) infinite; }
.vms-kiosk-photo { width: 100%; max-width: 420px; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; background: var(--surface-3); display: block; margin: 0 auto; box-shadow: var(--shadow-2); }
.vms-kiosk video { width: 100%; max-width: 420px; border-radius: 20px; display: block; margin: 0 auto; }
.vms-kiosk-review { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.vms-kiosk-review .vms-kv { font-size: 1rem; }
.vms-kiosk-idle { position: fixed; right: var(--gutter); top: 84px; font-family: var(--mono); font-size: .78rem; color: var(--text-on-navy-2); z-index: 1050; background: rgba(0,20,51,.5); padding: 4px 10px; border-radius: 999px; }
.vms-kiosk-idle:empty { display: none; }
.vms-kiosk-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.vms-kiosk-keypad button { min-height: 68px; font-size: 1.5rem; border-radius: 16px; font-family: var(--mono); font-weight: 600; }
.vms-kiosk-code { font-family: var(--mono); font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 600; letter-spacing: .3em; text-align: center; color: var(--text); background: var(--surface-2); border: 2px solid var(--line); border-radius: 20px; padding: 18px 12px 18px 24px; min-height: 96px; }
.vms-kiosk-code:focus { border-color: var(--green); box-shadow: 0 0 0 5px var(--ring); }
.vms-kiosk .table { color: var(--text); }
.vms-kiosk .card { border-radius: 16px; border: 1px solid var(--line); }
/* full-screen result states */
.vms-kiosk-result { position: fixed; inset: 0; z-index: 1060; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--s-6); color: #fff; animation: vms-fade var(--d-3) var(--ease); }
.vms-kiosk-result--ok { background: radial-gradient(800px 600px at 50% 40%, rgba(37,184,125,.45), transparent 70%), var(--grad-navy); }
.vms-kiosk-result--error { background: radial-gradient(800px 600px at 50% 40%, rgba(232,91,107,.45), transparent 70%), var(--grad-navy); }
.vms-kiosk-result h1 { color: #fff; font-size: var(--t-2xl); margin: var(--s-5) 0 var(--s-2); letter-spacing: -.03em; }
.vms-kiosk-result p { color: var(--text-on-navy); font-size: var(--t-md); max-width: 52ch; }
.vms-kiosk-result .code { font-family: var(--mono); font-size: var(--t-xl); letter-spacing: .2em; margin: var(--s-4) 0; color: #fff; }
.vms-kiosk-result__icon { width: 140px; height: 140px; }
.vms-kiosk-result__icon circle { fill: none; stroke: currentColor; stroke-width: 4; stroke-dasharray: 440; stroke-dashoffset: 440; animation: vms-draw 1s var(--ease-out) forwards; }
.vms-kiosk-result__icon path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: vms-draw .6s var(--ease-out) .5s forwards; }
.vms-kiosk-result--ok .vms-kiosk-result__icon { color: var(--green-hi); filter: drop-shadow(0 0 24px rgba(37,184,125,.6)); }
.vms-kiosk-result--error .vms-kiosk-result__icon { color: #ff8a98; filter: drop-shadow(0 0 24px rgba(232,91,107,.6)); }
@media (max-width: 640px) {
.vms-kiosk-panel { padding: var(--s-4); border-radius: 18px; }
.vms-kiosk-controls .btn { min-width: 0; flex: 1; }
.vms-kiosk-body { padding: var(--s-4) var(--s-4) 8rem; }
.vms-kiosk-stepper .step span { display: none; }
.vms-kiosk-topbar__site { display: none; }
.vms-kiosk-topbar__brand > span { display: none; }
.vms-kiosk-topbar { padding: 12px 16px; }
}
/* ---------- 14. Portal (mobile-first) ------------------------------------- */
.vms-portal { min-height: 100vh; background: var(--body-bg); display: flex; flex-direction: column; }
.vms-portal-header { background: var(--grad-navy); color: #fff; padding: 12px 16px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 1020; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 4px 20px rgba(0,20,51,.2); }
.vms-portal-header img, .vms-portal-header .vms-topnav__mark { height: 32px; width: 32px; }
.vms-portal-header__title { font-weight: 700; margin: 0; font-size: 1rem; letter-spacing: -.02em; color: #fff; }
.vms-portal-header__sub { font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green-hi); display: block; }
.vms-portal-body { flex: 1; padding: 16px; max-width: 720px; width: 100%; margin: 0 auto; padding-bottom: 6rem; }
.vms-portal-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 1030; }
[data-theme=dark] .vms-portal-nav { background: rgba(15,27,54,.9); }
.vms-portal-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .68rem; font-weight: 600; color: var(--text-3); text-decoration: none; min-width: 72px; min-height: 52px; justify-content: center; border-radius: 14px; transition: color var(--d-2) var(--ease); position: relative; }
.vms-portal-nav a i { font-size: 1.15rem; width: 44px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: background var(--d-2) var(--ease); }
.vms-portal-nav a.active { color: var(--green-lo); }
.vms-portal-nav a.active i { background: rgba(31,157,107,.14); }
.vms-portal .btn { min-height: 48px; }
.vms-portal .vms-card { padding: 16px; margin-bottom: 14px; }
.vms-portal-hero { border-radius: var(--radius-lg); padding: 20px; background: var(--grad-navy); color: #fff; margin-bottom: 16px; box-shadow: var(--shadow-3); }
.vms-portal-hero h2 { color: #fff; font-size: var(--t-lg); margin: 4px 0 4px; }
.vms-portal-hero p { color: var(--text-on-navy-2); margin: 0; font-size: var(--t-sm); }
/* ---------- 15. Access (login) ------------------------------------------- */
.vms-access { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--body-bg); }
.vms-access__hero {
position: relative; overflow: hidden; background: var(--grad-navy); color: #fff; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; isolation: isolate;
}
.vms-access__hero::before { content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: -20vmax; top: -10vmax; border-radius: 50%; background: radial-gradient(circle, rgba(31,157,107,.42) 0%, rgba(31,157,107,0) 60%); animation: vms-float 12s ease-in-out infinite; }
.vms-access__hero::after { content: ""; position: absolute; z-index: -1; width: 50vmax; height: 50vmax; right: -20vmax; bottom: -20vmax; border-radius: 50%; background: radial-gradient(circle, rgba(93,107,169,.35) 0%, rgba(93,107,169,0) 60%); animation: vms-float 14s ease-in-out -6s infinite reverse; }
.vms-access__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 30% 40%, rgba(0,0,0,.7), transparent 70%); }
.vms-access__watermark { position: absolute; right: -8%; bottom: -10%; width: clamp(320px, 42vw, 620px); opacity: .07; z-index: -1; pointer-events: none; }
.vms-access__watermark .m-a, .vms-access__watermark .m-b { fill: #fff; }
.vms-access__brand { display: inline-flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.vms-access__brand .vms-topnav__mark { width: 48px; height: 48px; }
.vms-access__brand > span > strong { display: block; font-size: 17px; letter-spacing: -.02em; line-height: 1; }
.vms-access__brand > span > span { display: block; font: 500 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--green-hi); margin-top: 5px; }
.vms-access__hero-body { margin: auto 0; padding: var(--s-7) 0; max-width: 560px; }
.vms-access__hero-body .vms-eyebrow { color: var(--green-hi); margin-bottom: var(--s-4); }
.vms-access__headline { font-size: var(--t-2xl); line-height: 1.05; letter-spacing: -.035em; color: #fff; margin-bottom: var(--s-4); }
.vms-access__headline em { font-style: normal; color: var(--green-hi); }
.vms-access__lead { color: var(--text-on-navy); font-size: var(--t-md); max-width: 46ch; }
.vms-access__creds { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vms-access__creds li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.vms-access__creds i { color: var(--green-hi); font-size: 11px; }
.vms-access__stats { display: flex; gap: var(--s-6); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,.12); }
.vms-access__stats b { display: block; font-family: var(--mono); font-size: var(--t-lg); font-weight: 600; letter-spacing: -.02em; color: #fff; }
.vms-access__stats span { font-size: var(--t-xs); color: var(--text-on-navy-2); }
.vms-access__hero-foot { display: flex; flex-wrap: wrap; gap: var(--s-4); font-size: var(--t-xs); color: var(--text-on-navy-2); }
.vms-access__hero-foot a { color: var(--text-on-navy); }
.vms-access__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 56px) var(--gutter); position: relative; }
.vms-access__panel-top { position: absolute; top: 20px; right: 24px; display: flex; gap: 8px; }
.vms-access__card { width: 100%; max-width: 440px; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); animation: vms-rise var(--d-4) var(--ease-out); }
.vms-access__logo { display: none; }
.vms-access__title { font-size: var(--t-xl); letter-spacing: -.03em; margin-bottom: 4px; }
.vms-access__sub { color: var(--text-3); margin-bottom: var(--s-5); font-size: var(--t-sm); }
.vms-access .form-control { min-height: 48px; border-radius: 12px; font-size: var(--t-base); }
.vms-access .input-group > .form-control { min-height: 48px; }
.vms-access .input-group-text { min-width: 46px; justify-content: center; border-radius: 12px; }
.vms-access .input-group .btn { border-radius: 12px; min-height: 48px; }
.vms-access .btn-primary.w-100 { min-height: 50px; font-size: var(--t-base); }
.vms-access__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); font-size: var(--t-xs); }
.vms-access__row a { color: var(--green-lo); font-weight: 600; }
.vms-access__footer { text-align: center; color: var(--text-3); font-size: .76rem; margin-top: var(--s-5); }
.vms-access__footer a { color: var(--text-2); }
.vms-access__status { display: inline-flex; align-items: center; gap: 8px; font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.vms-access__mark-lg { width: 72px; height: 72px; margin: 0 auto var(--s-4); }
.vms-access--single { grid-template-columns: 1fr; }
.vms-access--single .vms-access__panel { background: var(--grad-navy); }
.vms-access--kiosk .vms-access__card { max-width: 480px; text-align: center; }
.vms-access--kiosk .form-control { min-height: 84px; font-size: 2.2rem; letter-spacing: .5em; text-align: center; font-family: var(--mono); padding-left: .5em; }
.vms-access--kiosk .btn-primary.w-100 { min-height: 64px; font-size: var(--t-md); }
@media (max-width: 991.98px) {
.vms-access { grid-template-columns: 1fr; }
.vms-access__hero { min-height: 0; padding: 24px 20px; }
.vms-access__hero-body { padding: var(--s-5) 0 var(--s-2); }
.vms-access__headline { font-size: var(--t-xl); }
.vms-access__stats, .vms-access__hero-foot, .vms-access__watermark, .vms-access__lead { display: none; }
.vms-access__hero-body { padding: var(--s-4) 0 var(--s-2); }
.vms-access__creds { gap: 6px; margin-top: var(--s-3); } .vms-access__creds li { padding: 6px 10px; font-size: 9.5px; }
.vms-access__panel { padding: 24px 16px 40px; margin-top: -18px; }
.vms-access__panel-top { position: static; margin-bottom: 12px; align-self: flex-end; }
}
.skip-link:focus { position: fixed !important; left: 16px; top: 12px; width: auto; height: auto; padding: 10px 16px; margin: 0; clip: auto; overflow: visible; background: var(--ink); color: #fff; border-radius: 999px; z-index: 4000; text-decoration: none; }
.vms-access--single .vms-access__footer, .vms-access--single .vms-access__footer a, .vms-access--single .vms-access__status { color: var(--text-on-navy-2); }
.vms-access--single .vms-access__panel-top .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
/* ---------- 16. Motion --------------------------------------------------- */
@keyframes vms-spin { to { transform: rotate(360deg); } }
@keyframes vms-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes vms-ping { 0% { box-shadow: 0 0 0 0 rgba(232,91,107,.55); } 70% { box-shadow: 0 0 0 8px rgba(232,91,107,0); } 100% { box-shadow: 0 0 0 0 rgba(232,91,107,0); } }
@keyframes vms-ping-border { 0% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 3px rgba(31,157,107,.5); } 100% { box-shadow: 0 0 0 3px var(--surface), 0 0 0 12px rgba(31,157,107,0); } }
@keyframes vms-shimmer { to { transform: translateX(100%); } }
@keyframes vms-stripes { to { background-position: 1rem 0, 0 0; } }
@keyframes vms-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%, 4%) scale(1.06); } }
@keyframes vms-breathe { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes vms-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes vms-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vms-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vms-pop-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes vms-toast-in { from { opacity: 0; transform: translateX(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vms-toast-out { to { opacity: 0; transform: translateX(24px) scale(.96); } }
@keyframes vms-draw { to { stroke-dashoffset: 0; } }
@keyframes vms-scanline { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes vms-route { 0% { width: 0; } 50% { width: 65%; } 85% { width: 88%; } 100% { width: 92%; } }
.vms-page-enter { animation: vms-rise var(--d-4) var(--ease-out) both; }
[data-reveal] { opacity: 0; transition: opacity var(--d-4) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); } /* opacity only: a translateY reveal shifts layout while Chrome is anchoring scroll */
[data-reveal].in, .reveal.in { opacity: 1; transform: none; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.vms-route-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--green), var(--green-hi)); box-shadow: 0 0 10px rgba(37,184,125,.8); z-index: 3000; opacity: 0; transition: opacity var(--d-2) var(--ease); pointer-events: none; }
.vms-route-progress.is-active { opacity: 1; animation: vms-route 6s var(--ease-out) forwards; }
.vms-route-progress.is-done { width: 100% !important; animation: none; transition: width var(--d-2) var(--ease), opacity var(--d-3) var(--ease) var(--d-2); opacity: 0; }
.vms-lift { transition: transform var(--d-2) var(--ease), box-shadow var(--d-2) var(--ease); } .vms-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
[data-reveal], .reveal, .vms-page-enter { opacity: 1 !important; transform: none !important; }
.vms-route-progress { display: none; }
}
/* ---------- 17. Print ---------------------------------------------------- */
@media print {
body { background: #fff !important; color: #000; font-size: 11pt; }
.vms-topnav, .vms-footer, .vms-drawer-backdrop, .vms-route-progress, .btn, .vms-page-header__actions, .vms-filterbar, .dt-search, .dt-length, .dt-paging, .dt-info, .no-print, .vms-portal-nav, .vms-kiosk-controls { display: none !important; }
.vms-main { padding: 0; }
.vms-card, .vms-stat, .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
.vms-hero { background: #fff !important; color: #000 !important; border: 1px solid #ccc; box-shadow: none; }
.vms-hero h1, .vms-hero h2, .vms-hero p { color: #000 !important; }
.vms-table thead th { background: #eee !important; color: #000; position: static; }
a[href]::after { content: none !important; }
}
.vms-print { font-family: var(--font); color: #000; background: #fff; padding: 1.5rem; }
.vms-print__header { display: flex; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--ink); padding-bottom: .75rem; margin-bottom: 1rem; }
.vms-print__header img { height: 40px; }
.vms-print__meta { font-size: .8rem; color: #444; text-align: right; }
.vms-print table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.vms-print th { background: var(--ink); color: #fff; padding: .4rem .5rem; text-align: left; }
.vms-print td { padding: .35rem .5rem; border-bottom: 1px solid #ddd; }
.vms-print tr:nth-child(even) td { background: #f5f7fa; }
/* ---------- 18. Compatibility shim (Metronic classes that may linger) ---- */
.btn-light-primary { background: rgba(31,157,107,.1); color: var(--green-lo); border-color: transparent; } .btn-light-primary:hover { background: var(--green); color: #fff; }
.btn-light-success { background: rgba(31,157,107,.1); color: var(--green-lo); border-color: transparent; } .btn-light-success:hover { background: var(--green); color: #fff; }
.btn-light-danger { background: rgba(232,91,107,.1); color: var(--rose-lo); border-color: transparent; } .btn-light-danger:hover { background: var(--rose); color: #fff; }
.btn-light-info { background: rgba(93,107,169,.12); color: #3f4c8c; border-color: transparent; } .btn-light-info:hover { background: var(--blue); color: #fff; }
.btn-light-warning { background: rgba(255,177,0,.16); color: #7a5300; border-color: transparent; } .btn-light-warning:hover { background: var(--amber); color: #1a1a1a; }
.badge { border-radius: 999px; font-weight: 600; padding: .3em .7em; font-size: .72rem; }
.badge-light-primary, .badge-light-success { background: rgba(31,157,107,.12); color: var(--green-lo); }
.badge-light-danger { background: rgba(232,91,107,.12); color: var(--rose-lo); }
.badge-light-warning { background: rgba(255,177,0,.16); color: #7a5300; }
.badge-light-info { background: rgba(93,107,169,.12); color: #3f4c8c; }
.badge-light, .badge-light-dark { background: var(--surface-3); color: var(--text-2); }
.badge-neutral { background: var(--surface-3); color: var(--text-2); } .badge-ok { background: rgba(31,157,107,.12); color: var(--green-lo); } .badge-warn { background: rgba(255,177,0,.16); color: #7a5300; } .badge-danger { background: rgba(232,91,107,.12); color: var(--rose-lo); } .badge-info { background: rgba(93,107,169,.12); color: #3f4c8c; }
.symbol { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; }
.symbol .symbol-label { display: grid; place-items: center; width: 100%; height: 100%; background: var(--surface-3); color: var(--ink); font-weight: 700; border-radius: 10px; }
.symbol-35px { width: 35px; height: 35px; } .symbol-40px { width: 40px; height: 40px; } .symbol-45px { width: 45px; height: 45px; } .symbol-50px { width: 50px; height: 50px; } .symbol-circle, .symbol-circle .symbol-label { border-radius: 50%; }
.card-flush { box-shadow: none; border: 0; }
.text-gray-500 { color: var(--text-3) !important; } .text-gray-600 { color: var(--text-3) !important; } .text-gray-700 { color: var(--text-2) !important; } .text-gray-800, .text-gray-900, .text-dark { color: var(--text) !important; }
.fs-1 { font-size: var(--t-2xl) !important; } .fs-2 { font-size: var(--t-xl) !important; } .fs-3 { font-size: var(--t-lg) !important; } .fs-4 { font-size: var(--t-md) !important; } .fs-5 { font-size: var(--t-base) !important; } .fs-6 { font-size: var(--t-sm) !important; } .fs-7 { font-size: var(--t-xs) !important; }
.fw-bolder { font-weight: 800 !important; } .fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; }
.min-w-100px { min-width: 100px; } .min-w-125px { min-width: 125px; } .min-w-150px { min-width: 150px; } .min-w-200px { min-width: 200px; }
.svg-icon { display: inline-flex; align-items: center; } .svg-icon svg { width: 1.2em; height: 1.2em; }
.menu-sub, .menu-sub-dropdown { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-3); }
.separator { border-bottom: 1px solid var(--line); }
.rounded-4 { border-radius: var(--radius) !important; }
.info-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow-1); }
.table-header-navy th { background: var(--ink) !important; color: #fff !important; }
.text-primary { color: var(--green-lo) !important; } .bg-primary { background: var(--ink) !important; }
.text-success { color: var(--green-lo) !important; } .text-danger { color: var(--rose-lo) !important; } .text-warning { color: var(--amber-lo) !important; } .text-info { color: var(--info) !important; }
.text-white-50 { color: rgba(255,255,255,.6) !important; }
body.modal-open { overflow: hidden; }
.vms-shell.is-nav-open .vms-topnav__nav { transform: none; }
.vms-burger, .vms-sidebar, .vms-topbar { display: none; }
/* ---------- 19. Legacy token aliases (per-view :root blocks moved here) --- */
:root {
--admin-accent: var(--ink-3); --admin-accent-2: var(--green); --admin-accent-soft: var(--surface);
--am-navy: var(--ink-2); --am-purple: var(--ink-3); --am-purple-2: var(--ink-2); --am-purple-soft: var(--surface);
--amber-soft: var(--surface-2); --bg: var(--surface); --blue-soft: var(--surface-2); --cyan: var(--info);
--gray-soft: var(--surface); --green-soft: var(--surface-2); --muted: var(--text-3); --muted-2: var(--text-3);
--navy: var(--ink-2); --navy-600: var(--ink-3); --navy-700: var(--ink-3); --navy-800: var(--ink-2); --navy-900: var(--ink);
--panel: var(--surface); --panel-border: var(--line); --panel-br: var(--surface-3); --purple-soft: var(--surface-2);
--radius-md: var(--radius); --radius-xl: var(--radius-lg); --red-soft: var(--surface); --ring-legacy: 0 0 0 .2rem rgba(31,157,107,.18);
--royal: var(--ink-3); --royal-light: var(--info);
--sg-amber: var(--amber); --sg-bg: var(--body-bg); --sg-bg-soft: var(--surface); --sg-blue: var(--info); --sg-blue-2: var(--info); --sg-border: var(--line); --sg-border-soft: var(--line-2);
--sg-cyan: var(--info); --sg-green: var(--green); --sg-muted: var(--text-3); --sg-navy: var(--ink); --sg-navy-2: var(--ink-2); --sg-navy-3: var(--ink-3); --sg-panel: var(--surface);
--sg-purple: var(--blue); --sg-purple-2: var(--ink-3); --sg-radius: var(--radius); --sg-red: var(--rose); --sg-shadow: var(--shadow-2); --sg-shadow-lg: var(--shadow-3); --sg-text: var(--text);
--shadow-lg: var(--shadow-3); --shadow-md: var(--shadow-2); --shadow-sm: var(--shadow-1); --teal: var(--green-hi);
}
/* ---- stacked (secondary) modals: opened from inside #modal ---- */
.modal.vms-modal--stacked { z-index: 1075; }
.modal-backdrop.vms-modal-backdrop--stacked { z-index: 1070; }