/*
 * globals.css
 *
 * 0.  IMPORTS & FONTS
 * 1.  THEME & CSS VARIABLES
 * 2.  RESET & BASE
 * 3.  UTILITY CLASSES
 * 4.  SHELL LAYOUT
 *       4.1  App Bar
 *       4.2  Workspace
 *       4.3  Sidebar  (overlay — slides OVER content, no layout shift)
 *       4.4  Main Container
 *       4.5  Status Bar
 * 5.  PAGE HEADER & BREADCRUMBS
 * 6.  FORMS & INPUTS
 * 7.  BUTTONS & DROPDOWNS
 *       7.1  Action Button
 *       7.2  Mini / Menu / Avatar Buttons
 *       7.3  Dropdown Panel
 *       7.4  Custom Form Component Labels
 * 8.  COMPLEX COMPONENTS
 *       8.1  Lookup / Filter / Dialog
 *       8.2  TsfSideBarMenu
 *       8.3  TsfTableGrid
 *       8.4  TsfLookup Dropdown
 *       8.5  TsfDisplay
 *       8.6  TsfTabs
 *       8.7  TsfDataForm Two-Column Layout
 *       8.8  Message Box
 * 9.  AG GRID & ERP OVERRIDES (use ag-theme-timetracker — not stock Quartz/Bootstrap themes)
 * 10. DYNAMIC STATES & ANIMATIONS
 * 11. RESPONSIVE
 */


/* ─────────────────────────────────────────────────────────────────────
 * 0. IMPORTS & FONTS
 * ───────────────────────────────────────────────────────────────────── */

/*@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');*/
/* Note: self-hosted /fonts/* files are not part of this deploy package.
   Use system fallbacks from theme font-family stacks to avoid 404s. */


/* ─────────────────────────────────────────────────────────────────────
 * 1. THEME & CSS VARIABLES
 * ───────────────────────────────────────────────────────────────────── */

/* Default: VS Cool Breeze Light */
:root {
    --vs-font-family:    "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7656rem;

    --vs-color-scheme: light;
    --vs-bg-app-bar:   #CDD6E0;
    --vs-bg-header:    #DCE4EC;
    --vs-bg-main:      #F5F7FA;
    --vs-bg-sidebar:   #EAEFF4;
    --vs-bg-input:     #F5F9FF;
    --vs-bg-hover:     #E2E8F0;
    --vs-bg-selected:  #BEE3F8;
    --vs-bg-overlay:   rgba(51, 65, 85, 0.4);

    --vs-border-main:  #A8B6C8;
    --vs-border-light: #C5D0DC;
    --vs-border-focus: #3B82F6;

    --vs-text-default: #1E293B;
    --vs-text-bright:  #0F172A;
    /* Form fields / inputs (use on --vs-bg-input); falls back where corporate themes omit it */
    --vs-text-input:   var(--vs-text-default);
    --vs-text-muted:   #64748B;
    --vs-text-info:    #2563EB;

    --vs-accent:         #3B82F6;
    --vs-status-bg:      #334155;
    --vs-status-accent:  #3B82F6;

    --vs-header-height:  60px;
    --vs-footer-height:  22px;
    --vs-sidebar-width:  280px;

    --vs-grid-cell-text-color: var(--vs-text-default);

    --vs-color-info:    var(--vs-text-info);
    --vs-color-success: #16a34a;
    --vs-color-warning: #d97706;
    --vs-color-error:   #dc2626;
    --vs-color-success-muted: color-mix(in srgb, var(--vs-color-success) 22%, var(--vs-bg-main));
    --vs-color-warning-muted: color-mix(in srgb, var(--vs-color-warning) 22%, var(--vs-bg-main));

    /* Secondary content surface — slightly different from main bg for visual
       hierarchy inside panels/grids. Defaults to sidebar bg for all themes;
       override in themes where sidebar is a navigation colour (e.g. Nexelus). */
    --vs-bg-surface: var(--vs-bg-sidebar);

    /* Card / panel body background. Defaults to header bg (dark themes look
       great with this); override to white in light-content themes. */
    --vs-bg-card: var(--vs-bg-header);
}

/* Explicit light theme (same tokens as :root; use on app shell wrapper) */
.theme-light {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7656rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #F5F7FA;
    --vs-bg-sidebar: #EAEFF4;
    --vs-bg-header: #DCE4EC;
    --vs-bg-surface: #EAEFF4;
    --vs-bg-card: #DCE4EC;
    --vs-bg-input: #F5F9FF;
    --vs-bg-hover: #E2E8F0;
    --vs-bg-selected: #BEE3F8;
    --vs-bg-overlay: rgba(51, 65, 85, 0.4);

    /* Text */
    --vs-text-default: #1E293B;
    --vs-text-bright: #0F172A;
    --vs-text-on-app-bar: #0F172A;
    --vs-text-on-header: #0F172A;
    --vs-text-muted: #64748B;
    --vs-text-input: #1E293B;
    --vs-text-label: #0F172A;
    --vs-text-nav: #1E293B;
    --vs-text-info: #2563EB;
    --vs-grid-cell-text-color: #1E293B;

    /* Borders */
    --vs-border-main: #A8B6C8;
    --vs-border-focus: #3B82F6;

    /* Accent & status */
    --vs-accent: #3B82F6;
    --vs-status-accent: #3B82F6;
    --vs-color-info: #2563EB;
    --vs-color-success: #16a34a;
    --vs-color-success-muted: #C4E5D3;
    --vs-color-warning: #d97706;
    --vs-color-warning-muted: #EFDBC4;
    --vs-color-error: #dc2626;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #CDD6E0;
    --vs-border-light: #C5D0DC;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #334155;
}

.theme-dark {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7656rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #1e1e1e;
    --vs-bg-sidebar: #252526;
    --vs-bg-header: #1a1a1a;
    --vs-bg-surface: #252526;
    --vs-bg-card: #1a1a1a;
    --vs-bg-input: #333337;
    --vs-bg-hover: #37373d;
    --vs-bg-selected: #094771;
    --vs-bg-overlay: rgba(0, 0, 0, 0.6);

    /* Text */
    --vs-text-default: #cccccc;
    --vs-text-bright: #ffffff;
    --vs-text-on-app-bar: #ffffff;
    --vs-text-on-header: #ffffff;
    --vs-text-muted: #888888;
    --vs-text-input: #cccccc;
    --vs-text-label: #ffffff;
    --vs-text-nav: #cccccc;
    --vs-text-info: #569cd6;
    --vs-grid-cell-text-color: #ffffff;

    /* Borders */
    --vs-border-main: #3e3e42;
    --vs-border-focus: #007acc;

    /* Accent & status */
    --vs-accent: #007acc;
    --vs-status-accent: #1f8ad2;
    --vs-color-info: #569cd6;
    --vs-color-success: #22c55e;
    --vs-color-success-muted: #1F3928;
    --vs-color-warning: #fbbf24;
    --vs-color-warning-muted: #41381F;
    --vs-color-error: #f87171;

    /* Misc */
    --vs-color-scheme: dark;

    /* Other */
    --vs-bg-app-bar: #000000;
    --vs-border-light: #454545;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #007acc;
}

.theme-cool-slate {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7656rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #334155;
    --vs-bg-sidebar: #243041;
    --vs-bg-header: #293548;
    --vs-bg-surface: #243041;
    --vs-bg-card: #293548;
    --vs-bg-input: #475569;
    --vs-bg-hover: #4F5E74;
    --vs-bg-selected: #475569;
    --vs-bg-overlay: rgba(15, 23, 42, 0.6);

    /* Text */
    --vs-text-default: #CBD5E1;
    --vs-text-bright: #F1F5F9;
    --vs-text-on-app-bar: #F1F5F9;
    --vs-text-on-header: #F1F5F9;
    --vs-text-muted: #A8BAC8;
    --vs-text-input: #CBD5E1;
    --vs-text-label: #F1F5F9;
    --vs-text-nav: #CBD5E1;
    --vs-text-info: #60A5FA;
    --vs-grid-cell-text-color: #F1F5F9;

    /* Borders */
    --vs-border-main: #475569;
    --vs-border-focus: #60A5FA;

    /* Accent & status */
    --vs-accent: #3B82F6;
    --vs-status-accent: #60A5FA;
    --vs-color-info: #60A5FA;
    --vs-color-success: #22c55e;
    --vs-color-success-muted: #305656;
    --vs-color-warning: #f97316;
    --vs-color-warning-muted: #53494B;
    --vs-color-error: #fb7185;

    /* Misc */
    --vs-color-scheme: dark;

    /* Other */
    --vs-bg-app-bar: #1E293B;
    --vs-border-light: #404D61;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #3B82F6;
}

.theme-juicy-plum {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7656rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #2A2139;
    --vs-bg-sidebar: #2F2540;
    --vs-bg-header: #352A48;
    --vs-bg-surface: #241C32;
    --vs-bg-card: #352A48;
    --vs-bg-input: #413A53;
    --vs-bg-hover: #4A4161;
    --vs-bg-selected: #6A4B9C;
    --vs-bg-overlay: rgba(42, 33, 57, 0.6);

    /* Text */
    --vs-text-default: #D9CFF0;
    --vs-text-bright: #F3E8FF;
    --vs-text-on-app-bar: #F3E8FF;
    --vs-text-on-header: #F3E8FF;
    --vs-text-muted: #A295B7;
    --vs-text-input: #D9CFF0;
    --vs-text-label: #F3E8FF;
    --vs-text-nav: #D9CFF0;
    --vs-text-info: #D67AE2;
    --vs-grid-cell-text-color: #F3E8FF;

    /* Borders */
    --vs-border-main: #4A3769;
    --vs-border-focus: #E93D82;

    /* Accent & status */
    --vs-accent: #E93D82;
    --vs-status-accent: #6D5494;
    --vs-color-info: #D67AE2;
    --vs-color-success: #34d399;
    --vs-color-success-muted: #2C3D48;
    --vs-color-warning: #fbbf24;
    --vs-color-warning-muted: #4B3A36;
    --vs-color-error: #fb7185;

    /* Misc */
    --vs-color-scheme: dark;

    /* Other */
    --vs-bg-app-bar: #21182B;
    --vs-border-light: #3F3456;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #4A3769;
}

.theme-mango-paradise {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7875rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #FFFBEB;
    --vs-bg-sidebar: #FFEBCD;
    --vs-bg-header: #FFDAB9;
    --vs-bg-surface: #EAEFF4;
    --vs-bg-card: #DCE4EC;
    --vs-bg-input: #FFFDF5;
    --vs-bg-hover: #FFF0D9;
    --vs-bg-selected: #FFD180;
    --vs-bg-overlay: rgba(124, 77, 25, 0.3);

    /* Text */
    --vs-text-default: #5D4037;
    --vs-text-bright: #4E342E;
    --vs-text-on-app-bar: #4E342E;
    --vs-text-on-header: #4E342E;
    --vs-text-muted: #8D6E63;
    --vs-text-input: #5D4037;
    --vs-text-label: #4E342E;
    --vs-text-nav: #5D4037;
    --vs-text-info: #E65100;
    --vs-grid-cell-text-color: #5D4037;

    /* Borders */
    --vs-border-main: #F0A030;
    --vs-border-focus: #F57C00;

    /* Accent & status */
    --vs-accent: #F57C00;
    --vs-status-accent: #FB8C00;
    --vs-color-info: #E65100;
    --vs-color-success: #2e7d32;
    --vs-color-success-muted: #D1DFC2;
    --vs-color-warning: #f59e0b;
    --vs-color-warning-muted: #FDE7BA;
    --vs-color-error: #d84315;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #FFA500;
    --vs-border-light: #FFB84D;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #F57C00;
}

/*
 * ── CORPORATE US THEMES ────────────────────────────────────────────────────
 *
 *  theme-executive-navy   Deep navy + gold — Finance, Consulting, Legal
 *                         (Goldman Sachs, Deloitte, McKinsey aesthetic)
 *
 *  theme-federal-gray     Cool charcoal + arctic white — Government, Healthcare,
 *                         Enterprise SaaS (Salesforce, ServiceNow aesthetic)
 *
 *  theme-corporate        NetSuite-style blue — Professional Services, Enterprise Tech
 *                         (Microsoft Dynamics, SAP Fiori aesthetic)
 * ───────────────────────────────────────────────────────────────────────── */

/* Executive Navy — deep navy with champagne-gold accents */
.theme-executive-navy {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7875rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #F4F6F9;
    --vs-bg-sidebar: #0D1B34;
    --vs-bg-header: #112240;
    --vs-bg-surface: #EAEFF4;
    --vs-bg-card: #F4F6F9;
    --vs-bg-input: #FBFAF5;
    --vs-bg-hover: #E8EDF4;
    --vs-bg-selected: #C9D8F0;
    --vs-bg-overlay: rgba(10, 22, 40, 0.55);

    /* Text */
    --vs-text-default: #1A2B45;
    --vs-text-bright: #0D1B34;
    --vs-text-on-app-bar: #E8EEF7;
    --vs-text-on-header: #E8EEF7;
    --vs-text-muted: #6B7E96;
    --vs-text-input: #1A2B45;
    --vs-text-label: #1A2B45;
    --vs-text-nav: #C8D6E8;
    --vs-text-info: #B8963E;
    --vs-grid-cell-text-color: #1A2B45;

    /* Borders */
    --vs-border-main: #A5B5C8;
    --vs-border-focus: #B8963E;

    /* Accent & status */
    --vs-accent: #B8963E;
    --vs-status-accent: #B8963E;
    --vs-color-info: #2563EB;
    --vs-color-success: #15803d;
    --vs-color-success-muted: #C3DCD0;
    --vs-color-warning: #b45309;
    --vs-color-warning-muted: #E6D2C4;
    --vs-color-error: #b91c1c;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #0A1628;
    --vs-border-light: #C0CCDA;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #0A1628;
}

/* Federal Gray — monochrome: pure neutral greys (R=G=B) and near-black chrome,
   no colour cast anywhere. Status colours (success/warning/error) stay
   chromatic on purpose -- they carry meaning, not decoration. */
.theme-federal-gray {
    /* Typography */
    --vs-font-family: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-base: 0.7875rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Inter", "Segoe UI", sans-serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #F2F2F2;
    --vs-bg-sidebar: #E6E6E6;
    --vs-bg-header: #2B2B2B;
    --vs-bg-surface: #F7F7F7;
    --vs-bg-card: #FAFAFA;
    --vs-bg-input: #FFFFFF;
    --vs-bg-hover: #DCDCDC;
    --vs-bg-selected: #C8C8C8;
    --vs-bg-overlay: rgba(0, 0, 0, 0.5);

    /* Text */
    --vs-text-default: #1F1F1F;
    --vs-text-bright: #111111;
    --vs-text-on-app-bar: #EDEDED;
    --vs-text-on-header: #EDEDED;
    --vs-text-muted: #6B6B6B;
    --vs-text-input: #1F1F1F;
    --vs-text-label: #1F1F1F;
    --vs-text-nav: #1F1F1F;
    --vs-text-info: #4A4A4A;
    --vs-grid-cell-text-color: #1F1F1F;

    /* Borders */
    --vs-border-main: #B0B0B0;
    --vs-border-focus: #4A4A4A;

    /* Accent & status */
    --vs-accent: #3A3A3A;
    --vs-status-accent: #C4C4C4;
    --vs-color-info: #5A5A5A;
    --vs-color-success: #107C41;
    --vs-color-success-muted: #BFD9CE;
    --vs-color-warning: #C19B00;
    --vs-color-warning-muted: #E6E0C0;
    --vs-color-error: #C4262E;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #1A1A1A;
    --vs-border-light: #D0D0D0;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #1A1A1A;
}

/* Corporate -- colours sampled from an Oracle NetSuite screenshot supplied by
   the user: white page and content area, pale grey-blue section-header bands,
   slate-blue top nav, NetSuite-blue links. Font stack is Helvetica/Arial, which
   is what NetSuite renders for users without Oracle Sans licensed. */
.theme-corporate {
    /* Typography */
    --vs-font-family: "Oracle Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --vs-font-size-base: 0.8125rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Oracle Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --vs-font-size-app-title:   0.9375rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   1.25rem;
    --vs-font-weight-form-title: 400;
    --vs-font-size-section-title:   0.75rem;
    --vs-font-weight-section-title: 700;
    --vs-text-transform-section-title: none;
    --vs-letter-spacing-section-title: normal;
    --vs-font-size-menu: 0.8125rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label: 0.6875rem;
    --vs-font-weight-label: 400;
    --vs-text-transform-label: uppercase;
    --vs-letter-spacing-label: 0.02em;
    --vs-font-size-body: 0.8125rem;
    --vs-font-size-grid: 0.75rem;
    --vs-font-size-small: 0.75rem;
    --vs-font-size-footer:   0.7rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #FFFFFF;
    --vs-bg-sidebar: #F5F6F7;
    --vs-bg-header: #3E5975;
    --vs-bg-surface: #FFFFFF;
    --vs-bg-card: #FFFFFF;
    --vs-bg-input: #FFFFFF;
    --vs-bg-hover: #EEF3F8;
    --vs-bg-selected: #DDE7F0;
    --vs-bg-overlay: rgba(62, 89, 117, 0.5);

    /* Text */
    --vs-text-default: #333333;
    --vs-text-bright: #1A3A5C;
    --vs-text-on-app-bar: #1A3A5C;
    --vs-avatar-color: #1B5FAA;
    --vs-avatar-color-hover: #14487F;
    --vs-text-on-header: #FFFFFF;
    /* Breadcrumb row matches the page (white with dark text); only the title
       row below it carries the blue band. */
    --vs-bg-breadcrumb: #FFFFFF;
    --vs-text-on-breadcrumb: #1A3A5C;
    --vs-breadcrumb-opacity: 1;
    /* Reversed layout: white top bar, blue form header carrying the title and
       breadcrumbs. Section bands stay a pale grey-blue below it. */
    --vs-bg-section-header: #D8DFE6;
    --vs-text-on-section-header: #1A3A5C;
    --vs-form-header-height: 48px;
    --vs-text-muted: #666666;
    --vs-text-input: #333333;
    --vs-text-label: #333333;
    --vs-text-nav: #1F2937;
    --vs-text-info: #1B5FAA;
    --vs-grid-cell-text-color: #333333;

    /* Borders */
    --vs-border-main: #C4CDD5;
    --vs-border-focus: #1B5FAA;

    /* Accent & status */
    --vs-accent: #1B5FAA;
    --vs-status-accent: #A8C4DE;
    --vs-color-info: #1B5FAA;
    --vs-color-success: #166534;
    --vs-color-success-muted: #C2D7CC;
    --vs-color-warning: #92400E;
    --vs-color-warning-muted: #DDCFC4;
    --vs-color-error: #991B1B;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #FFFFFF;
    --vs-border-light: #C4CDD5;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #3E5975;
}


/* Nexelus — dark navy header + orange accent, light content area
 * Mirrors the visual style of the classic Nexelus MediaPlan master page:
 * dark navy top bar, clean light content, amber/orange interactive accents. */
.theme-classical {
    /* Typography */
    --vs-font-family: "Segoe UI", "Georgia", "Times New Roman", serif;
    --vs-font-size-base: 0.7656rem;

    /* Section typography — one family per theme, sizes/weights per section */
    --vs-font-family-heading: "Segoe UI", "Georgia", "Times New Roman", serif;
    --vs-font-size-app-title:   0.7875rem;
    --vs-font-weight-app-title: 600;
    --vs-font-size-form-title:   0.875rem;
    --vs-font-weight-form-title: 600;
    --vs-font-size-section-title:   0.7175rem;
    --vs-font-weight-section-title: 600;
    --vs-font-size-menu:   0.7438rem;
    --vs-font-weight-menu: 400;
    --vs-font-size-label:   0.7438rem;
    --vs-font-weight-label: 400;
    --vs-font-size-body:  0.7656rem;
    --vs-font-size-grid:  0.7175rem;
    --vs-font-size-small: 0.6825rem;
    --vs-font-size-footer:   0.6125rem;
    --vs-font-weight-footer: 400;

    /* Backgrounds */
    --vs-bg-main: #F0F3F7;
    --vs-bg-sidebar: #343434;
    --vs-bg-header: #1E2D3D;
    --vs-bg-surface: #E8ECF2;
    --vs-bg-card: #FFFFFF;
    --vs-bg-input: #FFFFFF;
    --vs-bg-hover: #E8ECF2;
    --vs-bg-selected: rgba(230, 126, 34, 0.15);
    --vs-bg-overlay: rgba(26, 37, 51, 0.55);

    /* Text */
    --vs-text-default: #2C3E50;
    --vs-text-bright: #1A2B45;
    --vs-text-on-app-bar: #F0F3F7;
    --vs-text-on-header: #F0F3F7;
    --vs-bg-section-header: #5B6068;
    --vs-text-on-section-header: #ECF0F1;
    --vs-text-muted: #6B7C8D;
    --vs-text-input: #2C3E50;
    --vs-text-label: #4A5A6B;
    --vs-text-nav: #ECF0F1;
    --vs-text-info: #2980B9;
    --vs-grid-cell-text-color: #2C3E50;

    /* Borders */
    --vs-border-main: #C8D3DF;
    --vs-border-focus: #E67E22;

    /* Accent & status */
    --vs-accent: #E67E22;
    --vs-status-accent: #E67E22;
    --vs-color-info: #2980B9;
    --vs-color-success: #27AE60;
    --vs-color-success-muted: #C4E4D6;
    --vs-color-warning: #F39C12;
    --vs-color-warning-muted: #F1E0C5;
    --vs-color-error: #C0392B;

    /* Misc */
    --vs-color-scheme: light;

    /* Other */
    --vs-bg-app-bar: #343434;
    --vs-border-light: #E0E7EF;
    --vs-footer-height: 22px;
    --vs-header-height: 60px;
    --vs-sidebar-width: 280px;
    --vs-status-bg: #2D3038;
}

/* Nexelus: form header is light (matches legacy white breadcrumb area). */

/* Nexelus win-div: dark gray section header matching legacy "Campaign(s)" style. */
.theme-classical .win-div-header {
    background-color: #5B6068 !important;
    border-bottom-color: #4A4F55 !important;
    color: #ECF0F1 !important;
}
.theme-classical .win-div-title {
    color: #ECF0F1;
}
.theme-classical .win-div-icon {
    color: #ECF0F1;
}

/* Corporate themes: give win-div-header a light surface so it sits naturally in the
 * light content area, and use dark text to match. */
.theme-executive-navy .win-div-header,
.theme-federal-gray .win-div-header,

/* ── Nexelus button overrides ────────────────────────────────────────
 * Matches the classic Nexelus / Bootstrap-3 flat-button aesthetic:
 * squared corners, solid fills, orange primary, no gradient.
 * ─────────────────────────────────────────────────────────────────── */

/* Default action button — white body, slate border */
.theme-classical .vs-action-btn {
    background: #ffffff;
    background-image: none;
    border: 1px solid #b0bec8;
    border-radius: 3px;
    color: #2C3E50;
    height: 28px;
    font-size: 12px;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.theme-classical .vs-action-btn:hover:not(:disabled) {
    background: #f0f3f7;
    border-color: #8a9baa;
    color: #1A252F;
    filter: none;
    box-shadow: none;
}
.theme-classical .vs-action-btn:active:not(:disabled) {
    background: #e4e9ef;
    border-color: #7a8b9a;
    transform: none;
    filter: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
    transition-duration: 50ms;
}

/* Primary — orange solid */
.theme-classical .vs-action-btn.primary {
    background: #E67E22;
    background-image: none;
    border-color: #CA6F1E;
    color: #ffffff;
    box-shadow: none;
}
.theme-classical .vs-action-btn.primary:hover:not(:disabled) {
    background: #D4711F;
    border-color: #B5601A;
    filter: none;
}
.theme-classical .vs-action-btn.primary:active:not(:disabled) {
    background: #BF6419;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);
}

/* Danger — consistent with Nexelus error red */
.theme-classical .vs-action-btn.danger {
    background: #C0392B;
    background-image: none;
    border-color: #a93226;
    color: #ffffff;
    box-shadow: none;
}
.theme-classical .vs-action-btn.danger:hover:not(:disabled) {
    background: #a93226;
    border-color: #922b21;
    filter: none;
}

/* Button group — match Nexelus 3px outer radius */
.theme-classical .vs-btn-group .vs-action-btn:first-child { border-radius: 3px 0 0 3px; }
.theme-classical .vs-btn-group .vs-action-btn:last-child  { border-radius: 0 3px 3px 0; }
.theme-classical .vs-btn-group .vs-action-btn:only-child  { border-radius: 3px; }

/* win-div link button — orange text, squared corners */
.theme-classical .win-div-link-btn {
    border-radius: 3px;
    font-size: 0.78rem;
}

/* Nexelus tab strip — dark blue, matching legacy MediaPlan navigation tabs */
.theme-classical .tsf-tabs-nav {
    background-color: #1A4882;
    border-bottom: 2px solid #1A4882;
}
.theme-classical .tsf-tab-item {
    color: rgba(255, 255, 255, 0.8);
    border-right-color: rgba(255, 255, 255, 0.15);
    border-top-color: transparent;
    font-size: 0.8rem;
}
.theme-classical .tsf-tab-item:hover:not(.disabled):not(.active) {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
}
.theme-classical .tsf-tab-item.active {
    background-color: var(--vs-bg-main);
    color: var(--vs-text-default);
    font-weight: 600;
    border-top: 2px solid var(--vs-accent);
    border-bottom: 1px solid var(--vs-bg-main);
}
.theme-classical .tsf-tabs-content {
    background-color: var(--vs-bg-main);
}
/* Mobile scroll-fade edges must match this theme's hardcoded #1A4882 nav background,
   not the var(--vs-bg-sidebar) the default theme's fade uses. */
.theme-classical .tsf-tab-fade.right { background: linear-gradient(to right, transparent, #1A4882 78%); }
.theme-classical .tsf-tab-fade.left  { background: linear-gradient(to left,  transparent, #1A4882 78%); }

/* Menu / avatar buttons on the dark header */
.theme-classical .vs-menu-btn,
.theme-classical .vs-avatar-btn {
    color: #b0bec8;
    border-radius: 3px;
}
.theme-classical .vs-menu-btn:hover,
.theme-classical .vs-avatar-btn:hover {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
}
.theme-classical .vs-avatar-btn.active {
    background-color: #E67E22;
    color: #ffffff;
}

/* ── Nexelus sidebar menu ─────────────────────────────────────────────
 * Sidebar is dark charcoal — icons and hover must use light colours.  */
.theme-classical .vs-icon { color: var(--vs-text-nav); }
.theme-classical .vs-menu-link { color: var(--vs-text-nav); }
.theme-classical .vs-menu-link:hover:not(.active-link),
.theme-classical .vs-menu-link.expanded {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}
.theme-classical .vs-menu-link:hover .vs-icon,
.theme-classical .vs-menu-link.expanded .vs-icon,
.theme-classical .vs-menu-link.active-link .vs-icon { color: #ffffff !important; }
.theme-classical .vs-menu-link.active-link {
    background-color: rgba(230,126,34,0.25) !important;
    color: #ffffff !important;
}
.theme-classical .vs-sidebar-title { color: var(--vs-text-nav); }

/* ── Nexelus edit controls ───────────────────────────────────────────
 * Read-only fields sit on the light content area — must not be dark.  */
.theme-classical input:read-only,
.theme-classical textarea:read-only,
.theme-classical .form-control:read-only {
    background-color: #E8ECF2 !important;
    color: var(--vs-text-muted) !important;
}

/* ── Nexelus TsfLookup ───────────────────────────────────────────────
 * Lookup filter bar and dialog header reuse --vs-bg-header (dark navy);
 * override to the same dark-gray used by win-div-header.              */
.theme-classical .lookup-filter-bar {
    background-color: #5B6068;
    color: #ECF0F1;
}
.theme-classical .grid-footer {
    background-color: #5B6068;
    color: #ECF0F1;
    border-top-color: #4A4F55;
}
.theme-classical .footer-info,
.theme-classical .footer-info strong,
.theme-classical .pager-label,
.theme-classical .pager-label strong { color: #ECF0F1; opacity: 1; }
.theme-classical .page-btn {
    color: #ECF0F1;
    border-color: rgba(236, 240, 241, 0.35);
}
.theme-classical .page-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border-color: rgba(236, 240, 241, 0.7);
}
.theme-classical .erp-table thead th {
    background-color: var(--vs-bg-main);
    color: #1F2937;
    font-weight: 700;
    border-bottom-color: var(--vs-border-main);
}
.theme-classical .erp-table thead th:hover {
    background-color: var(--vs-bg-hover);
    color: #111827;
}
/* Leave Calendar — week view headers sit on dark --vs-bg-header, need light text */
.theme-classical .leave-cal-week-header .leave-cal-dow  { color: rgba(236,240,241,0.65) !important; }
.theme-classical .leave-cal-week-header .leave-cal-daynum { color: #ECF0F1 !important; }
.theme-classical .lookup-filter-bar .filter-popup-header h5 { color: #ECF0F1; }
/* Table stripes: --vs-bg-sidebar is dark charcoal in Nexelus — use light hover instead */
.theme-classical .lookup-grid-container table.table-striped tbody tr:nth-of-type(even) {
    background-color: #E8ECF2 !important;
    opacity: 1 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * 2. RESET & BASE
 * ───────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body, #root {
    height: 100%;
    width:100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: var(--vs-bg-main) !important;
    color: var(--vs-text-default) !important;
    font-family: var(--vs-font-family);
    transition: background-color 0.2s ease;
}

/* Deliberately NOT on `html`: --vs-font-size-base is a rem value, so setting it
   on the root element made the root size itself (16px * 0.875 = 14px) and then
   every other rem in the app resolved against that shrunken root. Applying it
   below the root keeps 1rem === 16px, so theme font sizes mean what they say. */
body, #root {
    font-size: var(--vs-font-size-base);
}

/* The theme class sits on a wrapper div inside #root, so the rule above always
   resolves against the light :root defaults. Re-apply the themed values here so
   text that inherits its colour (rather than setting its own) follows the active
   theme -- otherwise it stays dark-on-dark on every dark theme. */
[class*="theme-"] {
    background-color: var(--vs-bg-main);
    color: var(--vs-text-default);
    /* Font must be re-applied here too: the html/body rule is unscoped, so it
       always resolves the :root defaults and no theme's family/size ever won. */
    font-family: var(--vs-font-family);
    font-size: var(--vs-font-size-base);
}


/* Sidebar scrollbar */
.sidebar-scroll-wrapper::-webkit-scrollbar { width: 3px; }
.sidebar-scroll-wrapper::-webkit-scrollbar-track { background-color: var(--vs-bg-sidebar); }
.sidebar-scroll-wrapper::-webkit-scrollbar-thumb { background-color: var(--vs-bg-sidebar); border-radius: 10px; }
.sidebar-scroll-wrapper:hover::-webkit-scrollbar-thumb { background-color: var(--vs-border-main); }
.sidebar-scroll-wrapper:hover::-webkit-scrollbar-thumb:hover { background-color: var(--vs-accent); }

/* Content scrollbar */
.vs-content-body::-webkit-scrollbar,
.vs-content-body0::-webkit-scrollbar { width: 6px; }
.vs-content-body::-webkit-scrollbar-track,
.vs-content-body0::-webkit-scrollbar-track { background-color: var(--vs-bg-main); }
.vs-content-body::-webkit-scrollbar-thumb,
.vs-content-body0::-webkit-scrollbar-thumb { background-color: var(--vs-bg-main); border-radius: 10px; }
.vs-content-body:hover::-webkit-scrollbar-thumb,
.vs-content-body0:hover::-webkit-scrollbar-thumb { background-color: var(--vs-border-main); }
.vs-content-body:hover::-webkit-scrollbar-thumb:hover,
.vs-content-body0:hover::-webkit-scrollbar-thumb:hover { background-color: var(--vs-accent); }

/* Route transition — floating popup over visible page + menu */
.vs-route-outlet {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.route-pending-popup-layer {
    position: absolute;
    inset: 0;
    z-index: 250;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: auto;
    animation: routePopupLayerIn 0.18s ease-out both;
}

.route-pending-popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem 1.75rem;
    border-radius: 16px;
    background: var(--vs-bg-main);
    border: 1px solid color-mix(in srgb, var(--vs-accent) 35%, var(--vs-border-main));
    box-shadow:
        0 4px 6px color-mix(in srgb, var(--vs-accent) 8%, transparent),
        0 24px 64px color-mix(in srgb, #000 28%, transparent),
        0 0 0 1px color-mix(in srgb, var(--vs-bg-main) 60%, transparent) inset;
    animation: routePopupIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    pointer-events: auto;
    max-width: calc(100vw - 2rem);
}

.route-pending-visual {
    position: relative;
    width: 88px;
    height: 88px;
}

.route-pending-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
}

.route-pending-ring--outer {
    border-top-color: var(--vs-accent);
    border-right-color: color-mix(in srgb, var(--vs-accent) 45%, transparent);
    animation: routeRingSpin 1.1s cubic-bezier(0.55, 0.1, 0.35, 1) infinite;
}

.route-pending-ring--inner {
    inset: 12px;
    border-bottom-color: color-mix(in srgb, var(--vs-accent) 70%, #fff 30%);
    border-left-color: color-mix(in srgb, var(--vs-accent) 25%, transparent);
    animation: routeRingSpinReverse 0.85s linear infinite;
}

.route-pending-core {
    position: absolute;
    inset: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--vs-accent) 22%, var(--vs-bg-main)),
        var(--vs-bg-main)
    );
    color: var(--vs-accent);
    font-size: 1.35rem;
    box-shadow: 0 0 24px color-mix(in srgb, var(--vs-accent) 35%, transparent);
    animation: routeCorePulse 1.6s ease-in-out infinite;
}

.route-pending-sat {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--vs-accent);
    box-shadow: 0 0 10px var(--vs-accent);
    transform: rotate(var(--sat-angle, 0deg)) translateY(-44px);
    animation: routeSatOrbit 1.4s linear infinite;
    animation-delay: var(--sat-delay, 0s);
}

.route-pending-sat--1 { --sat-angle: 0deg;   --sat-delay: 0s; }
.route-pending-sat--2 { --sat-angle: 120deg; --sat-delay: -0.47s; }
.route-pending-sat--3 { --sat-angle: 240deg; --sat-delay: -0.93s; }

.route-pending-label {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--vs-text-default);
}

.route-pending-ellipsis span {
    animation: routeEllipsis 1.2s ease-in-out infinite;
}

.route-pending-ellipsis span:nth-child(2) { animation-delay: 0.15s; }
.route-pending-ellipsis span:nth-child(3) { animation-delay: 0.3s; }

.route-pending-track {
    width: 160px;
    height: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vs-border-main) 80%, transparent);
    overflow: hidden;
}

.route-pending-track-bar {
    display: block;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent,
        var(--vs-accent),
        color-mix(in srgb, var(--vs-accent) 60%, #fff),
        transparent
    );
    animation: routeTrackSlide 1.1s ease-in-out infinite;
}

/* Route / render error fallback */
.route-error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    background: var(--vs-bg-main);
}

.route-error-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(520px, 100%);
    padding: 2rem 2.25rem;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, #ef4444 35%, var(--vs-border-main));
    background: var(--vs-bg-main);
    box-shadow: 0 24px 64px color-mix(in srgb, #000 20%, transparent);
    text-align: center;
}

.route-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, #ef4444 12%, var(--vs-bg-main));
    color: #ef4444;
    font-size: 1.5rem;
}

.route-error-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--vs-text-default);
}

.route-error-message {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: color-mix(in srgb, var(--vs-text-default) 80%, transparent);
    word-break: break-word;
}

.route-error-stack {
    width: 100%;
    max-height: 12rem;
    overflow: auto;
    margin: 0;
    padding: 0.75rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--vs-border-main) 30%, var(--vs-bg-main));
    font-size: 0.72rem;
    line-height: 1.4;
    text-align: left;
    white-space: pre-wrap;
    color: var(--vs-text-default);
}

.route-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.route-error-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--vs-border-main);
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.route-error-btn--primary {
    border-color: color-mix(in srgb, var(--vs-accent) 50%, var(--vs-border-main));
    background: var(--vs-accent);
    color: #fff;
}

.route-error-btn:hover {
    filter: brightness(1.05);
}

@keyframes routePopupLayerIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes routePopupIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes routeRingSpin {
    to { transform: rotate(360deg); }
}

@keyframes routeRingSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes routeCorePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 20px color-mix(in srgb, var(--vs-accent) 30%, transparent);
    }
    50% {
        transform: scale(1.06);
        box-shadow: 0 0 28px color-mix(in srgb, var(--vs-accent) 50%, transparent);
    }
}

@keyframes routeSatOrbit {
    to { transform: rotate(calc(var(--sat-angle, 0deg) + 360deg)) translateY(-44px); }
}

@keyframes routeEllipsis {
    0%, 20%  { opacity: 0.15; transform: translateY(0); }
    40%      { opacity: 1;    transform: translateY(-2px); }
    100%     { opacity: 0.15; transform: translateY(0); }
}

@keyframes routeTrackSlide {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}


/* ─────────────────────────────────────────────────────────────────────
 * 3. UTILITY CLASSES
 * ───────────────────────────────────────────────────────────────────── */

.d-flex            { display: flex !important; }
.d-none            { display: none !important; }
.flex-grow-1       { flex-grow: 1 !important; }
.flex-column       { flex-direction: column !important; }
.justify-content-center { justify-content: center !important; }
.align-items-center     { align-items: center !important; }
.align-items-end        { align-items: flex-end !important; }
.text-center       { text-align: center !important; }
.text-decoration-none { text-decoration: none !important; }
.w-100  { width: 100% !important; }
.h-100  { height: 100% !important; }
.me-1   { margin-right: 0.25rem !important; }
.me-2   { margin-right: 0.5rem !important; }
.me-3   { margin-right: 1rem !important; }
.ms-1   { margin-left: 0.25rem !important; }
.ms-2   { margin-left: 0.5rem !important; }
.mb-1   { margin-bottom: 0.25rem !important; }
.mb-2   { margin-bottom: 0.5rem !important; }
.mb-3   { margin-bottom: 1rem !important; }
.mx-2   { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.px-2   { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.py-0   { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-3   { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-3    { padding: 1rem !important; }
.position-relative { position: relative !important; }
.fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.fw-bold  { font-weight: 700 !important; }
.fw-light { font-weight: 300 !important; }
.opacity-50 { opacity: 0.5 !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important; }
.extra-small { font-size: 0.75rem; }
.text-muted     { color: var(--vs-text-muted)    !important; }
.text-danger    { color: var(--vs-color-error)   !important; }
.text-success   { color: var(--vs-color-success) !important; }
.text-primary   { color: var(--vs-accent)        !important; }
.text-secondary { color: var(--vs-text-muted)    !important; }
.text-info      { color: var(--vs-text-info)     !important; }
.text-dark      { color: var(--vs-text-bright)   !important; }
.text-white     { color: #ffffff                 !important; }
.text-end       { text-align: end                !important; }
.text-break     { word-break: break-word !important; overflow-wrap: break-word !important; }

.bg-primary   { background-color: var(--vs-accent)        !important; }
.bg-secondary { background-color: var(--vs-text-muted)    !important; }
.bg-success   { background-color: var(--vs-color-success) !important; }
.bg-info      { background-color: var(--vs-text-info)     !important; }
.bg-danger    { background-color: var(--vs-color-error)   !important; }
.bg-warning   { background-color: var(--vs-color-warning) !important; }
.bg-light     { background-color: var(--vs-bg-surface)    !important; }

.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem  !important; }
.mt-3 { margin-top: 1rem    !important; }
.ms-3 { margin-left: 1rem   !important; }
.me-auto { margin-right: auto !important; }
.ms-auto { margin-left:  auto !important; }
.pt-3 { padding-top: 1rem   !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem  !important; padding-bottom: 0.5rem  !important; }
.py-4 { padding-top: 1.5rem  !important; padding-bottom: 1.5rem  !important; }

.d-block        { display: block        !important; }
.d-inline       { display: inline       !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex  { display: inline-flex  !important; }
.flex-wrap      { flex-wrap: wrap       !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem  !important; }
.gap-3 { gap: 1rem    !important; }

.rounded      { border-radius: 0.375rem !important; }
.rounded-circle { border-radius: 50%   !important; }
.rounded-pill { border-radius: 9999px  !important; }

/* Badge — inline status chip */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.55em;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: 0.3em;
    color: #fff;
    background-color: var(--vs-text-muted);
    white-space: nowrap;
    line-height: 1;
}

/* Table utilities */
.table-sm th,
.table-sm td    { padding: 0.25rem 0.4rem !important; }
.table-bordered,
.table-bordered th,
.table-bordered td { border: 1px solid var(--vs-border-light) !important; }
.table-responsive  { overflow-x: auto; }
.table-hover tbody tr:hover { background-color: var(--vs-bg-hover) !important; }

/* Form utilities */
.form-select {
    padding: 0.375rem 2rem 0.375rem 0.5rem !important;
    background-color: var(--vs-bg-input) !important;
    border: 1px solid var(--vs-border-main) !important;
    color: var(--vs-text-input, var(--vs-text-default)) !important;
    font-size: 0.85rem !important;
    border-radius: 2px;
    appearance: auto;
}
.form-control-sm,
.form-select-sm { font-size: 0.8rem !important; padding: 0.2rem 0.4rem !important; }
.form-check { display: flex; align-items: center; gap: 0.4rem; min-height: 1.5rem; }
.form-check-input { width: 1em; height: 1em; cursor: pointer; accent-color: var(--vs-accent); }
.form-check-label { font-size: 0.85rem; color: var(--vs-text-default); cursor: pointer; }

.sticky-top { z-index: 200 !important; }

.tsf-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.tsf-form-col-label,
.tsf-form-col-input { flex-basis: 100%; }
.tsf-form-col-label { margin-bottom: 0.25rem; }

@media (min-width: 768px) {
    .tsf-form-row { align-items: center; }
    .tsf-form-col-label  { flex: 0 0 160px; max-width: 160px; margin-bottom: 0; }
    .tsf-form-col-input  { flex: 1 1 0; min-width: 0; }
    .d-md-block { display: block !important; }
}

.tsf-button-edit-wrapper { position: relative; width: 100%; }
.tsf-button-edit-btn {
    position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    min-width: 32px; height: 32px; padding: 4px 8px;
    border: 1px solid var(--vs-border-main);
}

.tsf-input-container {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

/* TsfHtmlEdit: pasted HTML often carries inline black/white; force theme foreground (readable in dark themes) */
.tsf-html-edit-body-wrap [contenteditable="true"] {
    color: var(--vs-text-input, var(--vs-text-default)) !important;
}
.tsf-html-edit-body-wrap [contenteditable="true"] * {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}
.tsf-html-edit-body-wrap [contenteditable="true"] a {
    color: var(--vs-accent) !important;
    -webkit-text-fill-color: currentColor;
    text-decoration: underline;
}


/* ─────────────────────────────────────────────────────────────────────
 * 4. SHELL LAYOUT
 * ───────────────────────────────────────────────────────────────────── */

/* 4.0  Root */
.vs-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    background-color: var(--vs-bg-main) !important;
}

/* 4.1  App Bar — fixed strip at very top */
.vs-app-bar {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--vs-header-height);
    background-color: var(--vs-bg-app-bar) !important;
    border-bottom: 1px solid var(--vs-border-light);
    z-index: 3000;
}

.vs-app-title {
    /* Sits on the app bar, not the page -- must contrast with --vs-bg-app-bar,
       which is dark on some themes and light on others. */
    color: var(--vs-text-on-app-bar);
    font-size: var(--vs-font-size-app-title, 0.875rem);
    font-weight: var(--vs-font-weight-app-title, 600);
    white-space: nowrap;
}

.vs-app-title--link {
    cursor: pointer;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 0.15s ease;
}
.vs-app-title--link:hover,
.vs-app-title--link:focus-visible {
    background-color: color-mix(in srgb, var(--vs-text-on-app-bar) 12%, transparent);
    outline: none;
}

/* 4.2  Workspace — fills everything below the AppBar */
.vs-workspace {
    position: fixed;
    top: var(--vs-header-height);
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;   /* sidebar | main — sidebar OVERLAYS, not pushes */
    overflow: hidden;
}

/* 4.3  Sidebar — absolute overlay, slides over content */
.vs-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;          /* above content, below app-bar (3000) */
    width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: var(--vs-bg-sidebar) !important;
    border-right: 1px solid var(--vs-border-main);
    box-shadow: none;
}

.vs-sidebar.open {
    width: var(--vs-sidebar-width);
    box-shadow: 4px 0 20px var(--vs-bg-overlay);
}

/* Dim overlay — shown when sidebar is open, click it to close */
.vs-workspace::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.vs-workspace.sidebar-open::before {
    opacity: 1;
    pointer-events: auto;
}

.vs-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--vs-bg-sidebar);
    border-bottom: 1px solid var(--vs-border-main);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: bold;
    color: var(--vs-text-muted);
    letter-spacing: 1px;
}

.vs-sidebar-title {
    /* Sits on the sidebar, not the page -- track the nav colour so it stays
       legible whether the sidebar is dark or light. */
    color: var(--vs-text-nav);
    font-size: 0.875rem;
}

.vs-sidebar-content {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--vs-bg-sidebar);
}

/* 4.4  Main container — always full width (sidebar overlays it) */
.vs-main-container {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--vs-bg-main);
    position: relative;
}

/* Drawer slot: above footer, below form header; content (e.g. AI Leveling) slides in from right */
.vs-main-drawer-slot {
    position: absolute;
    right: 0;
    top: var(--vs-form-header-height, 56px);
    bottom: var(--vs-footer-height, 22px);
    width: 420px;
    max-width: 90vw;
    z-index: 100;
    pointer-events: none;
}
.vs-main-drawer-slot > * {
    pointer-events: auto;
}

.vs-content-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

.vs-content-body0 {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    min-width: 0;
}

/* 4.5  Status bar — pinned at bottom of main container (flex child) */
.vs-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;   /* flex child — NOT fixed */
    height: var(--vs-footer-height);
    background-color: var(--vs-status-bg);
    color: white;
    font-size: var(--vs-font-size-footer, 11px);
    border-top: 1px solid var(--vs-border-main);
}

.vs-status-left,
.vs-status-right {
    display: flex;
    align-items: center;
}

.vs-status-item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
}
.vs-status-item:hover { background-color: rgba(255,255,255,0.1); }

.vs-status-accent { background-color: var(--vs-status-accent); }

.vs-status-item-separator {
    padding: 0 4px;
    color: rgba(255,255,255,0.3);
    opacity: 0.3;
}

/* Sidebar loading overlay */
.sidebar-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--vs-text-muted);
    font-size: 0.8rem;
    background-color: var(--vs-bg-sidebar);
}

.loading-spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--vs-border-main);
    border-top-color: var(--vs-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.vs-loader-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
}


/* ─────────────────────────────────────────────────────────────────────
 * 5. PAGE HEADER & BREADCRUMBS
 * ───────────────────────────────────────────────────────────────────── */

/* Form header (TsfPageHeader in TsfBaseForm) — static with page; scroll container (vs-content-body0) is below it */
.vs-form-header {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-height: var(--vs-form-header-height, 56px);
    padding: 4px 12px 0;
    background-color: var(--vs-bg-header);
    border-bottom: 1px solid var(--vs-border-main);
}

.vs-breadcrumb-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 0.72rem;
    /* The breadcrumb row has its own surface so a theme can separate it from the
       form-header band. Both default to the form header, so themes that don't
       set them look exactly as before. The negative margins pull the row out to
       the header's edges -- including the 4px top padding, which would otherwise
       leave a strip of the header colour above the breadcrumbs. */
    background-color: var(--vs-bg-breadcrumb, var(--vs-bg-header));
    color: var(--vs-text-on-breadcrumb, var(--vs-text-on-header));
    padding: 6px 12px 2px;
    margin: -4px -12px 0;
}

.vs-breadcrumb-link {
    color: var(--vs-text-on-breadcrumb, var(--vs-text-on-header));
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: var(--vs-breadcrumb-opacity, 0.85);
}
.vs-breadcrumb-link:hover { text-decoration: underline; }

.vs-breadcrumb-separator {
    color: var(--vs-text-on-breadcrumb, var(--vs-text-on-header));
    opacity: calc(var(--vs-breadcrumb-opacity, 0.85) * 0.7);
    margin: 0 2px;
}

.vs-breadcrumb-current {
    color: var(--vs-text-on-breadcrumb, var(--vs-text-on-header));
    opacity: 1;
    font-weight: 500;
}

.vs-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    width: 100%;
}

.vs-title-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vs-form-title {
    margin: 0;
    padding: 0;
    font-size: var(--vs-font-size-form-title, 1rem);
    font-weight: var(--vs-font-weight-form-title, 600);
    /* Sits on .vs-form-header (--vs-bg-header), which is dark on several themes
       even where the page body is light -- so it cannot use --vs-text-bright. */
    color: var(--vs-text-on-header);
}

.vs-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
    background: transparent;
    color: var(--vs-text-on-header);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.vs-back-btn:hover:not(:disabled) {
    background: var(--vs-accent);
    color: #fff;
    border-color: var(--vs-accent);
}
.vs-back-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.vs-data-actions-area {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Below the mobile breakpoint, New/Save/Delete/Cancel/Search/Print would
   otherwise overflow a phone-width title bar as full text-label buttons.
   Collapse them to icon-only, flat (no gradient/border/shadow) buttons —
   the icon plus the native title/aria-label carries the meaning. Scoped to
   this toolbar only; .vs-action-btn elsewhere (e.g. "Remove line" in a
   voucher card) is untouched. */
@media (max-width: 767.98px) {
    /* Caption gets its own full-width row (shrunk, wrapping, never truncated)
       and the action buttons drop to a second row below it, still right-
       aligned via justify-content on their own row. */
    .vs-title-bar {
        flex-wrap: wrap;
    }
    .vs-title-left {
        flex: 1 1 100%;
        min-width: 0;
    }
    .vs-form-title {
        font-size: 0.75rem;
        white-space: normal;
        overflow-wrap: break-word;
    }
    .vs-header-extra {
        flex: 1 1 100%;
        margin-left: 0;
    }
    .vs-data-actions-area {
        flex: 1 1 100%;
        justify-content: flex-end;
    }

    .vs-data-actions-area .vs-action-btn {
        width: 32px;
        padding: 0;
        justify-content: center;
        background: transparent;
        background-image: none;
        border-color: transparent;
        color: var(--vs-text-on-header);
        box-shadow: none;
    }
    .vs-data-actions-area .vs-action-btn:hover:not(:disabled) {
        background: color-mix(in srgb, var(--vs-text-on-header) 12%, transparent);
        background-image: none;
        border-color: transparent;
        box-shadow: none;
        filter: none;
    }
    .vs-data-actions-area .vs-action-btn:active:not(:disabled) {
        box-shadow: none;
    }
    .vs-data-actions-area .vs-action-btn i {
        margin-right: 0 !important;
        font-size: 0.95em;
        opacity: 1;
    }
    .vs-data-actions-area .vs-action-btn-label {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * 6. FORMS & INPUTS
 * ───────────────────────────────────────────────────────────────────── */

.form-label {
    font-size: var(--vs-font-size-label, 0.8125rem);
    font-weight: var(--vs-font-weight-label, 500);
    text-transform: var(--vs-text-transform-label, none);
    letter-spacing: var(--vs-letter-spacing-label, normal);
    color: var(--vs-text-muted);
}

.tsf-form-label {
    font-weight: var(--vs-font-weight-label, 400);
    font-size: var(--vs-font-size-label, 0.85rem);
    display: block;
    text-align: right;
    margin-right: 10px;
    /*opacity: 0.8;*/
    color: var(--vs-text-label, var(--vs-text-bright));
}
/* Below 768px .tsf-form-row stacks the label above the input instead of
   beside it (see the min-width: 768px rule below) — right-aligned text
   reads backwards sitting alone above a left-aligned input, so flip it. */
@media (max-width: 767.98px) {
    .tsf-form-label {
        text-align: left;
        margin-right: 0;
    }
}

input, select, textarea, .form-control {
    padding: 0.375rem 0.5rem !important;
    background-color: var(--vs-bg-input) !important;
    border: 1px solid var(--vs-border-main) !important;
    color: var(--vs-text-input, var(--vs-text-default)) !important;
    font-size: 0.85rem !important;
    border-radius: 2px;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
    outline: none !important;
    border-color: var(--vs-border-focus) !important;
}
.theme-dark input:focus,
.theme-dark textarea:focus { background-color: #333337 !important; }

input:read-only, textarea:read-only, .form-control:read-only {
    background-color: var(--vs-bg-sidebar) !important;
    color: var(--vs-text-muted) !important;
    cursor: not-allowed;
}
input:read-only:hover, textarea:read-only:hover, .form-control:read-only:hover {
    border-color: var(--vs-border-main) !important;
}

/* TsfSelect — custom listbox dropdown (button trigger + portal popup)
   instead of a native <select>. Native <select> popups on mobile are
   drawn by the OS/browser at a fixed system font size that page CSS
   cannot reach; rendering our own popup keeps it under app control. */
.tsf-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    background-color: var(--vs-bg-input);
    border: 1px solid var(--vs-border-main);
    color: var(--vs-text-input, var(--vs-text-default));
    font-size: 0.85rem;
    font-family: inherit;
    border-radius: 2px;
    cursor: pointer;
    text-align: left;
}
.tsf-select-trigger:focus {
    outline: none;
    border-color: var(--vs-border-focus);
}
.tsf-select-trigger:disabled {
    background-color: var(--vs-bg-sidebar);
    color: var(--vs-text-muted);
    cursor: not-allowed;
}
.tsf-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tsf-select-placeholder {
    color: var(--vs-text-muted);
}
.tsf-select-caret {
    flex-shrink: 0;
    font-size: 0.7em;
    color: var(--vs-text-muted);
}

.tsf-select-popup {
    background-color: var(--vs-bg-input);
    color: var(--vs-text-bright);
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--vs-border-main);
    border-radius: var(--vs-radius, 4px);
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.tsf-select-option {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--vs-text-bright);
    border-bottom: 1px solid var(--vs-border-light);
}
.tsf-select-option:last-child { border-bottom: none; }
.tsf-select-option.highlighted { background-color: var(--vs-bg-hover); }
.tsf-select-option.selected { font-weight: 600; }

@media (max-width: 767.98px) {
    .tsf-select-trigger {
        font-size: 0.8rem;
    }
    .tsf-select-option {
        font-size: 0.78rem;
    }
}

.vs-search-placeholder { color: var(--vs-text-default); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 0.5rem;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 0.5rem;
}
.form-grid-compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 0.75rem;
}


/* ─────────────────────────────────────────────────────────────────────
 * 7. BUTTONS & DROPDOWNS
 * ───────────────────────────────────────────────────────────────────── */

/* 7.1  Action Button */
.vs-logo { width: 200px; 
 margin-left:50px}

.vs-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 12px;
    height: 26px;
    background: linear-gradient(180deg, var(--vs-bg-input) 0%, var(--vs-bg-hover) 100%);
    border: 1px solid var(--vs-border-main);
    border-bottom-color: rgba(0,0,0,0.3);
    color: var(--vs-text-default);
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 1px 2px rgba(0,0,0,0.18);
    transition: filter 0.1s ease, transform 0.08s ease, box-shadow 0.1s ease;
}
.vs-action-btn i { font-size: 0.8em; opacity: 0.85; }
.vs-action-btn:hover:not(:disabled) {
    border-color: var(--vs-border-focus);
    color: var(--vs-text-default);
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 2px 5px rgba(0,0,0,0.22);
}
.vs-action-btn:active:not(:disabled) {
    transform: scale(0.97) translateY(1px);
    filter: brightness(0.94);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
    transition-duration: 50ms;
}
.vs-action-btn.primary {
    background: linear-gradient(180deg, var(--vs-accent) 0%, var(--vs-accent) 100%);
    border-color: var(--vs-accent);
    color: #fff;
}
.vs-action-btn.primary:hover:not(:disabled) { filter: brightness(1.12); }
.vs-action-btn.danger {
    background: linear-gradient(180deg, var(--vs-color-error) 0%, var(--vs-color-error) 100%);
    border-color: var(--vs-color-error);
    color: #fff;
}
.vs-action-btn.danger:hover:not(:disabled) { filter: brightness(1.1); }
.vs-action-btn.sm {
    height: 22px;
    padding: 0 8px;
    font-size: 11px;
}
.vs-action-btn.outline {
    background: var(--vs-bg-input);
    background-image: none;
    color: var(--vs-accent);
    border-color: var(--vs-accent);
}
.vs-action-btn.outline:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vs-accent) 12%, var(--vs-bg-input));
}
.vs-action-btn.info {
    background: var(--vs-bg-input);
    background-image: none;
    color: var(--vs-text-info);
    border-color: var(--vs-text-info);
}
.vs-action-btn.info:hover:not(:disabled) {
    background: color-mix(in srgb, var(--vs-text-info) 12%, var(--vs-bg-input));
}
.vs-action-btn.link {
    background: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    height: auto;
    padding: 0 4px;
    min-width: 0;
}
.vs-action-btn.link:hover:not(:disabled) {
    background: var(--vs-bg-hover);
    box-shadow: none;
    filter: none;
}
.vs-action-btn.link.danger { color: var(--vs-color-error); }

/* Remaining variants — added so the pages that previously used the Bootstrap
   .btn-* names have a native equivalent for every one of them. */
.vs-action-btn.success {
    background: linear-gradient(180deg, var(--vs-color-success) 0%, var(--vs-color-success) 100%);
    border-color: var(--vs-color-success);
    color: #fff;
}
.vs-action-btn.success:hover:not(:disabled) { filter: brightness(1.1); }

/* Quiet/neutral button — the app's default treatment with no accent colour. */
.vs-action-btn.ghost {
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: var(--vs-text-default);
    border-color: var(--vs-border-main);
}
.vs-action-btn.ghost:hover:not(:disabled) {
    background: var(--vs-bg-hover);
    filter: none;
}

.vs-action-btn.outline-primary   { background: transparent; background-image: none; color: var(--vs-accent);        border-color: var(--vs-accent); }
.vs-action-btn.outline-secondary { background: transparent; background-image: none; color: var(--vs-text-default);  border-color: var(--vs-border-main); }
.vs-action-btn.outline-success   { background: transparent; background-image: none; color: var(--vs-color-success); border-color: var(--vs-color-success); }
.vs-action-btn.outline-danger    { background: transparent; background-image: none; color: var(--vs-color-error);   border-color: var(--vs-color-error); }

.vs-action-btn.outline-primary:hover:not(:disabled)   { background: color-mix(in srgb, var(--vs-accent) 12%, transparent); }
.vs-action-btn.outline-secondary:hover:not(:disabled) { background: var(--vs-bg-hover); }
.vs-action-btn.outline-success:hover:not(:disabled)   { background: color-mix(in srgb, var(--vs-color-success) 12%, transparent); }
.vs-action-btn.outline-danger:hover:not(:disabled)    { background: color-mix(in srgb, var(--vs-color-error) 12%, transparent); }

/* Neutral button that only turns destructive on hover (row delete actions). */
.vs-action-btn.danger-hover:hover:not(:disabled) {
    color: var(--vs-color-error);
    border-color: var(--vs-color-error);
}

.vs-action-btn.xs { height: 19px; padding: 0 6px; font-size: 10px; }
.vs-action-btn.lg { height: 32px; padding: 0 18px; font-size: 13px; }

.vs-action-btn.is-busy     { opacity: 0.65; cursor: default; pointer-events: none; }
.vs-action-btn:disabled,
.vs-action-btn.is-disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* Button Group — joined buttons, outer corners only */
.vs-btn-group {
    display: inline-flex;
    align-items: center;
}
.vs-btn-group .vs-action-btn {
    border-radius: 0;
    margin-left: -1px; /* collapse adjacent borders */
    position: relative;
}
.vs-btn-group .vs-action-btn:first-child {
    border-radius: 5px 0 0 5px;
    margin-left: 0;
}
.vs-btn-group .vs-action-btn:last-child {
    border-radius: 0 5px 5px 0;
}
.vs-btn-group .vs-action-btn:only-child {
    border-radius: 5px;
    margin-left: 0;
}
.vs-btn-group .vs-action-btn:hover,
.vs-btn-group .vs-action-btn:focus {
    z-index: 1; /* bring hovered button border to front */
}

/* 7.2  Mini / Menu / Avatar Buttons */
.vs-mini-btn {
    background: none;
    border: none;
    color: var(--vs-text-muted);
    cursor: pointer;
}
.vs-mini-btn:hover { color: var(--vs-text-bright); }

.vs-menu-btn, .vs-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    /* These sit on the app bar, so they follow its text colour -- not the page's. */
    color: var(--vs-text-on-app-bar);
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}
.vs-menu-btn   { width: 36px; height: 36px; }
.vs-avatar-btn { height: 32px; padding: 0 12px; border-radius: 16px; }
.vs-menu-btn i, .vs-avatar-btn i { font-size: 1.1rem; }
.vs-menu-btn:hover, .vs-avatar-btn:hover {
    background-color: color-mix(in srgb, var(--vs-text-on-app-bar) 14%, transparent);
    color: var(--vs-text-on-app-bar);
}
.vs-avatar-btn.active { background-color: var(--vs-accent); color: var(--vs-text-on-app-bar); }

/* Logged-in user: accent-tinted user icon, derived from the app-bar text colour
   so it stays visible whether the bar is dark or light. */
.vs-avatar-btn.vs-avatar-btn--logged-in:not(.active) {
    color: var(--vs-avatar-color, var(--vs-text-on-app-bar));
}
.vs-avatar-btn.vs-avatar-btn--logged-in:not(.active):hover {
    color: var(--vs-avatar-color-hover, var(--vs-text-on-app-bar));
}

/* 7.3  Dropdown Panel */
.vs-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background-color: var(--vs-bg-sidebar);
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    overflow: hidden;
}
.vs-dropdown-header { padding: 12px 16px; background-color: var(--vs-bg-section-header, var(--vs-bg-header)); }
.vs-dropdown-body   { padding: 8px 16px; }
.vs-info-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8rem;
}
.vs-info-row span:first-child { color: var(--vs-text-muted); }
.vs-dropdown-footer { padding: 8px; border-top: 1px solid var(--vs-border-main); }
.vs-dropdown-footer button { color: var(--vs-text-default) !important; }
.vs-dropdown-footer button:hover { background-color: var(--vs-bg-hover); }

/* ── User Menu Dropdown (umd-*) ─────────────────────────────────── */
.umd-wrapper { position: relative; }

.umd-dropdown { width: 280px; }

/* Header: avatar + name + current company */
.umd-user-header { display: flex; align-items: center; gap: 10px; }
.umd-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background-color: var(--vs-accent);
    color: var(--vs-text-bright);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; flex-shrink: 0;
}
.umd-user-info { display: flex; flex-direction: column; min-width: 0; }
.umd-user-name  { font-size: 0.8rem; font-weight: 600; color: var(--vs-text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.umd-user-company { font-size: 0.7rem; color: var(--vs-text-muted); }

/* Sections */
.umd-section { padding: 8px 12px; border-top: 1px solid var(--vs-border-main); }
.umd-section-label {
    display: block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--vs-text-muted); margin-bottom: 4px;
}

/* Company rows */
.umd-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 5px 6px; border-radius: 5px; border: none;
    background: transparent; cursor: pointer; text-align: left;
    color: var(--vs-text-default); font-size: 0.78rem; transition: background 0.12s;
}
.umd-item:hover               { background-color: var(--vs-bg-hover); }
.umd-item.active              { color: var(--vs-accent); font-weight: 600; }
.umd-item-icon                { width: 14px; text-align: center; font-size: 0.72rem; opacity: 0.75; flex-shrink: 0; }
.umd-item-label               { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Theme grid: 3 columns */
.umd-theme-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
.umd-theme-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px 4px; border-radius: 6px; border: 1px solid transparent;
    background: transparent; cursor: pointer; color: var(--vs-text-muted); font-size: 0.68rem;
    transition: border-color 0.12s, background 0.12s;
}
.umd-theme-btn:hover  { background-color: var(--vs-bg-hover); border-color: var(--vs-border-main); }
.umd-theme-btn.active { border-color: var(--vs-accent); color: var(--vs-text-default); background-color: var(--vs-bg-hover); }
.umd-theme-dot        { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); flex-shrink: 0; }
.umd-theme-label      { line-height: 1.1; text-align: center; }

/* ── App bar actions (license bell + user menu) ───────────────────── */
.vs-app-bar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── License warning bell ─────────────────────────────────────────── */
.license-warning-wrapper { position: relative; }

.vs-bell-btn { position: relative; }

.license-warning-dot {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vs-warning, #D97706);
    border: 1.5px solid var(--vs-bg-app-bar, #1e293b);
    pointer-events: none;
}
.license-warning-dot--danger { background: var(--vs-danger, #DC2626); }

.license-warning-dropdown {
    width: 220px;
    padding: 6px;
}

.license-warning-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-text-default);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.license-warning-menu-item:hover { background-color: var(--vs-bg-hover); }

.license-warning-menu-icon {
    color: var(--vs-warning, #D97706);
    font-size: 0.9rem;
    flex-shrink: 0;
}

.license-warning-dialog-body p {
    margin: 0 0 8px;
    line-height: 1.45;
}

.license-warning-dialog-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--vs-border-main);
}
.license-warning-dialog-links a {
    color: var(--vs-accent);
    font-weight: 600;
    text-decoration: none;
}
.license-warning-dialog-links a:hover { text-decoration: underline; }

/* ── Document approval bell ───────────────────────────────────────── */
.document-approval-bell-wrapper { position: relative; }

.document-approval-bell-btn { position: relative; }

.document-approval-bell-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vs-accent, #3B82F6);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

.document-approval-bell-dropdown {
    width: 240px;
    padding: 6px;
}

.document-approval-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-text-default);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}
.document-approval-menu-item:hover { background-color: var(--vs-bg-hover); }

.document-approval-menu-icon {
    color: var(--vs-accent, #3B82F6);
    font-size: 0.95rem;
}

.document-approval-menu-count { color: var(--vs-text-muted); font-weight: 500; }

/* ── Document approval inbox page ─────────────────────────────────── */
.approval-inbox-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 120px);
    min-height: 560px;
}

.approval-inbox-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--vs-border-main);
}

.approval-inbox-count {
    margin-left: auto;
    color: var(--vs-text-muted);
    font-size: 0.85rem;
}

.approval-inbox-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--vs-text-muted);
}

.approval-inbox-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
    padding: 12px;
}

.approval-inbox-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.approval-inbox-panel {
    background: var(--vs-bg-sidebar);
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.approval-inbox-panel-title {
    padding: 10px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vs-text-muted);
    border-bottom: 1px solid var(--vs-border-main);
}

.approval-tree {
    overflow: auto;
    padding: 8px 4px;
    max-height: 240px;
}

.approval-tree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
}

.approval-tree-row.is-selected { background: color-mix(in srgb, var(--vs-accent) 12%, transparent); border-radius: 4px; }

.approval-tree-toggle {
    width: 16px;
    border: none;
    background: transparent;
    color: var(--vs-text-muted);
    cursor: pointer;
    padding: 0;
}

.approval-tree-label {
    border: none;
    background: transparent;
    color: var(--vs-text-default);
    text-align: left;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.82rem;
}
.approval-tree-label.is-leaf { font-weight: 500; }
.approval-tree-label:hover { color: var(--vs-accent); }

.approval-inbox-list-panel { flex: 1; }

.approval-doc-list {
    overflow: auto;
    padding: 6px;
}

.approval-doc-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    margin-bottom: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--vs-text-default);
    cursor: pointer;
    text-align: left;
    font-size: 0.8rem;
}
.approval-doc-row:hover { background: var(--vs-bg-hover); }
.approval-doc-row.is-selected {
    border-color: var(--vs-accent);
    background: color-mix(in srgb, var(--vs-accent) 10%, transparent);
}

.approval-doc-number { font-weight: 600; }
.approval-doc-date { color: var(--vs-text-muted); white-space: nowrap; }

.approval-doc-action {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 999px;
}
.approval-doc-action--submit { background: color-mix(in srgb, var(--vs-accent) 18%, transparent); color: var(--vs-accent); }
.approval-doc-action--approve { background: color-mix(in srgb, var(--vs-warning, #D97706) 18%, transparent); color: var(--vs-warning, #D97706); }

.approval-inbox-right {
    display: grid;
    grid-template-columns: 1fr minmax(300px, 380px);
    gap: 12px;
    min-height: 0;
}

.approval-preview-panel { min-height: 0; }

.approval-preview-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.approval-preview-frame {
    width: 100%;
    flex: 1;
    min-height: 240px;
    border: none;
    background: #fff;
}

.approval-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 24px;
    color: var(--vs-text-muted);
    text-align: center;
}
.approval-preview-empty--error { color: var(--vs-danger, #DC2626); }

.approval-actions-panel {
    min-height: 0;
    overflow: hidden;
}

.approval-actions-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0 4px 8px;
}

.approval-actions-panel .form-div {
    margin-top: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.approval-actions-panel .win-div-header {
    display: none;
}

.trackelan-toast-stack {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 12000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px, calc(100vw - 32px));
}

.trackelan-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--vs-border-main);
    background: var(--vs-bg-sidebar);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    color: var(--vs-text-default);
}

.trackelan-toast--warning {
    border-color: color-mix(in srgb, var(--vs-warning, #D97706) 45%, var(--vs-border-main));
    background: color-mix(in srgb, var(--vs-warning, #D97706) 8%, var(--vs-bg-sidebar));
}

.trackelan-toast--info {
    border-color: color-mix(in srgb, var(--vs-accent) 45%, var(--vs-border-main));
}

.trackelan-toast--success {
    border-color: color-mix(in srgb, var(--vs-success, #16A34A) 45%, var(--vs-border-main));
}

.trackelan-toast-content p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--vs-text-muted);
}

.trackelan-toast-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.trackelan-toast-action,
.trackelan-toast-dismiss {
    border: none;
    background: transparent;
    color: var(--vs-accent);
    cursor: pointer;
    font-size: 0.85rem;
}

.trackelan-toast-dismiss {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--vs-text-muted);
}


/* ─────────────────────────────────────────────────────────────────────
 * 8. COMPLEX COMPONENTS
 * ───────────────────────────────────────────────────────────────────── */

/* 8.1  Lookup / Filter / Dialog */
.lookup-root {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    background-color: var(--vs-bg-main);
    color: var(--vs-text-default);
}

.lookup-grid-container {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.lookup-grid-container > .grid-wrapper {
    min-width: 0;
}
.lookup-grid-container.vs-grid-constrained {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    overflow: auto;
}
/* When table is wider than parent, scroll horizontally instead of squashing columns. */
.lookup-grid-container.vs-grid-constrained > table,
.lookup-grid-container.vs-grid-constrained table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}
.lookup-grid-container.vs-grid-constrained table th,
.lookup-grid-container.vs-grid-constrained table td {
    white-space: nowrap;
}

.vs-lookup-group { display: flex; align-items: center; }
.vs-lookup-group .form-control {
    flex: 1 1 auto;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.vs-lookup-group .vs-action-btn {
    margin-left: -1px;
    height: 29px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.lookup-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.lookup-input-wrapper .form-control {
    border: 1px solid var(--vs-border-main);
    background: var(--vs-bg-input);
    border-radius: 0;
}
.lookup-input-wrapper .lookup-icon {
    position: absolute;
    right: 0.75rem;
    font-size: 0.95rem;
    color: var(--vs-text-default) !important;
    cursor: pointer;
    transition: color 0.15s ease;
    z-index: 2;
}
.lookup-input-wrapper .lookup-icon:hover { color: var(--vs-accent) !important; }

.lookup-filter-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--vs-bg-section-header, var(--vs-bg-header));
    border-bottom: 1px solid var(--vs-border-main);
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
}
.filter-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.filter-badge-container { display: flex; flex-wrap: wrap; gap: 6px; flex-grow: 1; }
.filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background-color: var(--vs-bg-input);
    border: 1px solid var(--vs-border-main);
    color: var(--vs-text-default);
    border-radius: 12px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.filter-badge-remove {
    margin-left: 8px;
    padding: 2px;
    font-size: 0.8em;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s;
}
.filter-badge-remove:hover { background-color: var(--vs-bg-hover); color: var(--vs-text-bright); }

.filter-popup {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 44px;
    right: 8px;
    min-width: 450px;
    padding: 12px;
    background: var(--vs-bg-sidebar);
    border: 1px solid var(--vs-border-main);
    box-shadow: 0 5px 15px var(--vs-bg-overlay);
    z-index: 1100;
}
.lookup-filter-bar > .filter-popup { left: 8px; right: auto; }
.filter-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--vs-border-main);
}
.filter-popup-header h5 { margin: 0; font-size: 1rem; color: var(--vs-text-bright); }
.filter-popup-content  { flex: 1; overflow-y: auto; padding: 4px; }
.filter-popup-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--vs-border-main);
}
.filter-layout-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 10px;
    align-items: center;
}
.filter-layout-grid > label {
    text-align: right;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--vs-text-muted);
}
.filter-layout-grid.filter-grid-three-col { grid-template-columns: auto auto 1fr; }

.quick-filter-wrapper { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.quick-filter-value-input { flex-grow: 1; }
.tsf-quick-filter-select {
    height: 29px;
    padding: 0.2rem 0.4rem;
    background-color: var(--vs-bg-input);
    border: 1px solid var(--vs-border-main);
    border-radius: 2px;
    color: var(--vs-text-input, var(--vs-text-default));
    font-size: 0.8125rem;
}
.tsf-quick-filter-select:focus { outline: none; border-color: var(--vs-border-focus); }

.lookup-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--vs-bg-overlay);
    z-index: 4000;
}
.lookup-dialog {
    display: flex;
    flex-direction: column;
    width: min(960px, 95vw);
    max-height: 85vh;
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    box-shadow: 0 20px 40px var(--vs-bg-overlay);
}
.lookup-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header));
    border-bottom: 1px solid var(--vs-border-main);
}
.lookup-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
}
.lookup-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.lookup-dialog-close:hover {
    color: var(--vs-text-bright);
    background: color-mix(in srgb, var(--vs-text-bright) 18%, transparent);
}
.lookup-dialog-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}
.lookup-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.75rem 1rem;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header));
    border-top: 1px solid var(--vs-border-main);
}

/* 8.1b  App-wide alert/confirm/prompt dialog (DialogContext) — same visual
   language as .lookup-dialog-*, theme-aware via --vs-* variables. */
.app-dialog-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--vs-bg-overlay);
    z-index: 5000;
}
.app-dialog {
    display: flex;
    flex-direction: column;
    width: min(420px, 95vw);
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    box-shadow: 0 20px 40px var(--vs-bg-overlay);
    animation: app-dialog-in 0.15s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes app-dialog-in {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.app-dialog-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header));
    border-bottom: 1px solid var(--vs-border-main);
    border-radius: 8px 8px 0 0;
}
.app-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--vs-text-bright);
}
.app-dialog-header--warning .app-dialog-title i { color: #f59e0b; }
.app-dialog-header--error .app-dialog-title i   { color: #ef4444; }
.app-dialog-header--question .app-dialog-title i { color: var(--vs-accent); }
.app-dialog-header--information .app-dialog-title i { color: var(--vs-accent); }
.app-dialog-body {
    padding: 1rem;
    color: var(--vs-text-default);
    font-size: 0.9rem;
    line-height: 1.5;
}
.app-dialog-body p {
    margin: 0;
    white-space: pre-wrap;
}
.app-dialog-input {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.45rem 0.6rem;
    font-size: 0.875rem;
    color: var(--vs-text-input, var(--vs-text-default));
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
}
.app-dialog-input:focus {
    outline: none;
    border-color: var(--vs-border-focus, var(--vs-accent));
}
.app-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 0.75rem 1rem;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header));
    border-top: 1px solid var(--vs-border-main);
    border-radius: 0 0 8px 8px;
}
.app-dialog-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--vs-text-default);
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.app-dialog-btn:hover {
    background-color: color-mix(in srgb, var(--vs-text-bright) 8%, transparent);
}
.app-dialog-btn--primary {
    color: #fff;
    background-color: var(--vs-accent);
    border-color: var(--vs-accent);
}
.app-dialog-btn--primary:hover {
    background-color: color-mix(in srgb, var(--vs-accent) 85%, black);
}

/* 8.2  TsfSideBarMenu */
.sidebar-scroll-wrapper {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--vs-bg-sidebar);
    position: relative;
}

.vs-sidebar-nav { padding-top: 8px; background-color: var(--vs-bg-sidebar); }

.vs-menu-list, .vs-submenu { list-style: none; padding: 0; margin: 0; }

.vs-menu-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: var(--vs-text-nav, var(--vs-text-default));
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 4px;
    margin: 2px 8px;
    white-space: nowrap;
}
.vs-menu-link:hover  { background-color: var(--vs-bg-hover); color: var(--vs-text-label, var(--vs-text-bright)); }
.vs-menu-link.expanded { background-color: var(--vs-bg-selected); color: var(--vs-text-label, var(--vs-text-bright)); }
.vs-menu-link.active-link {
    background-color: var(--vs-bg-selected) !important;
    color: var(--vs-text-label, var(--vs-text-bright)) !important;
    border-left: 2px solid var(--vs-accent);
}
.vs-menu-link.active-link .vs-icon,
.vs-menu-link.active-link .vs-toggle-icon { color: var(--vs-text-label, var(--vs-text-bright)) !important; }

.vs-icon {
    width: 28px;
    text-align: center;
    margin-right: 8px;
    font-size: 1em;
    color: var(--vs-text-muted);
    transition: color 0.2s ease;
}
.vs-icon.transparent { opacity: 0; }
.vs-menu-link:hover .vs-icon,
.vs-menu-link.expanded .vs-icon { color: var(--vs-text-label, var(--vs-text-bright)); }

.vs-toggle-icon {
    font-size: 0.6em;
    width: 12px;
    text-align: center;
    margin-right: 10px;
    transition: transform 0.2s ease-in-out;
    color: var(--vs-text-nav, var(--vs-text-muted));
    flex-shrink: 0;
}
.vs-toggle-icon.rotated { transform: rotate(90deg); }
.vs-menu-link:hover .vs-toggle-icon,
.vs-menu-link.expanded .vs-toggle-icon { color: var(--vs-text-label, var(--vs-text-bright)); }

.vs-label { font-size: 0.875rem; flex: 1; overflow: hidden; text-overflow: ellipsis; }

.vs-submenu { overflow: hidden; max-height: 0; transition: max-height 0.25s ease-in-out; }
.vs-submenu.open { max-height: var(--vs-submenu-max-height, 4000px); }
.vs-submenu .vs-submenu.open { overflow: visible; }
.vs-submenu .vs-menu-link { font-size: 0.875rem; margin: 1px 8px 1px 0; }
.vs-submenu .vs-menu-link .vs-icon { font-size: 0.85em; }

/* 8.3  TsfTableGrid */
.grid-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.table-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
    min-height: 0;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
/* Lookup grid: horizontal scroll when column widths exceed viewport */
.table-scroll.table-scroll-x {
    overflow-x: auto;
    overflow-y: auto;
}

.erp-table {
    width: 100%;
    border-collapse: collapse;
}
.erp-table.erp-table-fixed {
    table-layout: fixed;
    font-size: 0.8125rem;
    color: var(--vs-text-default);
}
/* Width = sum of column widths (inline); grows past viewport → horizontal scroll */
.erp-table.erp-table-fixed.erp-table-resizable {
    width: auto;
    min-width: auto;
    max-width: none;
}
.erp-table.erp-table-resizable .cell-content {
    max-width: 100%;
}
.erp-table thead th.col-resizable {
    position: relative;
}
.erp-table thead th .th-inner {
    padding-right: 6px;
}
.erp-table .col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 3;
    touch-action: none;
}
.erp-table .col-resize-handle:hover {
    background-color: color-mix(in srgb, var(--vs-accent) 35%, transparent);
}
body.erp-col-resizing {
    cursor: col-resize !important;
    user-select: none;
}
body.erp-col-resizing * {
    cursor: col-resize !important;
}
.erp-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--vs-bg-sidebar);
    color: var(--vs-text-muted);
    border-bottom: 2px solid var(--vs-border-main);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.erp-table thead th:hover { background-color: var(--vs-bg-hover); color: var(--vs-text-default); }
.erp-table tbody tr {
    border-bottom: 1px solid var(--vs-border-light);
    cursor: pointer;
    transition: background-color 0.1s ease;
}
.erp-table tbody tr:hover { background-color: var(--vs-bg-hover); }
.erp-table tbody tr.selected td {
    background-color: var(--vs-bg-selected) !important;
    color: var(--vs-text-bright) !important;
}
.erp-table td {
    padding: 5px 10px;
    color: var(--vs-text-default);
    vertical-align: middle;
    white-space: nowrap;
}
.cell-content { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsf-inline-edit-grid .cell-content { max-width: none; overflow: visible; white-space: normal; }
.tsf-inline-edit-cell input[type="text"],
.tsf-inline-edit-cell input[type="date"] { width: 100%; min-width: 0; }
.tsf-inline-edit-actions { display: flex; gap: 2px; justify-content: flex-end; }
.tsf-inline-edit-toolbar { border-bottom: 1px solid var(--vs-border-main); background: var(--vs-bg-section-header, var(--vs-bg-header)); }
.sort-icon        { font-size: 10px; opacity: 0.3; margin-left: 4px; }
.sort-icon.active { opacity: 1; color: var(--vs-accent); }

.grid-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    padding: 4px 10px;
    background-color: var(--vs-bg-section-header, var(--vs-bg-section-header, var(--vs-bg-header)));
    border-top: 1px solid var(--vs-border-main);
    font-size: 0.75rem;
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
}
.footer-info strong { color: var(--vs-text-bright); }

/* 8.4  AG Grid — TimeTracker theme (matches erp-table / TsfTableGrid exactly) */
.ag-theme-timetracker {
    /* Core colours */
    --ag-background-color:              var(--vs-bg-main);
    --ag-foreground-color:              var(--vs-text-default);
    --ag-secondary-foreground-color:    var(--vs-text-muted);
    --ag-border-color:                  var(--vs-border-main);

    /* Header — matches erp-table thead th */
    --ag-header-background-color:       var(--vs-bg-sidebar);
    --ag-header-foreground-color:       var(--vs-text-muted);
    --ag-header-column-separator-color: var(--vs-border-main);

    /* Rows — matches erp-table tbody */
    --ag-odd-row-background-color:      var(--vs-bg-main);
    --ag-even-row-background-color:     var(--vs-bg-main);
    --ag-row-hover-color:               var(--vs-bg-hover);
    --ag-selected-row-background-color: var(--vs-bg-selected);
    --ag-row-border-color:              var(--vs-border-light);

    /* Chrome */
    --ag-input-focus-border-color:      var(--vs-accent);
    --ag-range-selection-border-color:  var(--vs-accent);
    --ag-font-size:                     var(--vs-font-size-base);
    --ag-font-family:                   var(--vs-font-family);
    --ag-row-height:                    30px;
    --ag-header-height:                 32px;
    --ag-cell-horizontal-padding:       10px;
}

/* ag-grid.css base stylesheet hardcodes #fff on these elements —
   override explicitly so our theme variables actually take effect */
.ag-theme-timetracker .ag-root-wrapper,
.ag-theme-timetracker .ag-root,
.ag-theme-timetracker .ag-body-viewport,
.ag-theme-timetracker .ag-center-cols-container,
.ag-theme-timetracker .ag-center-cols-viewport,
.ag-theme-timetracker .ag-body-horizontal-scroll-viewport,
.ag-theme-timetracker .ag-floating-bottom-container {
    background-color: var(--vs-bg-main) !important;
}
.ag-theme-timetracker .ag-header,
.ag-theme-timetracker .ag-header-row {
    background-color: var(--vs-bg-sidebar) !important;
    border-bottom: 2px solid var(--vs-border-main) !important;
}

/* Header text style — uppercase, tight tracking, matches erp-table thead th */
.ag-theme-timetracker .ag-header-cell-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vs-text-muted);
}
.ag-theme-timetracker .ag-header-cell:hover .ag-header-cell-label {
    color: var(--vs-text-default);
}

/* Row border — matches erp-table tbody tr border-bottom */
.ag-theme-timetracker .ag-row {
    border-bottom: 1px solid var(--vs-border-light);
    cursor: pointer;
}

/* Selected row */
.ag-theme-timetracker .ag-row-selected {
    background-color: var(--vs-bg-selected) !important;
    color: var(--vs-text-bright) !important;
}

/* Cell text */
.ag-theme-timetracker .ag-cell {
    color: var(--vs-text-default);
    font-size: 13px;
    display: flex;
    align-items: center;
}

/* Sort icon tint */
.ag-theme-timetracker .ag-sort-indicator-icon {
    color: var(--vs-accent);
}

/* Pagination bar — matches grid-footer */
.ag-theme-timetracker .ag-paging-panel {
    background-color: var(--vs-bg-section-header, var(--vs-bg-header));
    border-top: 1px solid var(--vs-border-main);
    font-size: 0.75rem;
    color: var(--vs-text-muted);
    height: 32px;
    padding: 0 10px;
}
.pager-controls { display: flex; align-items: center; gap: 2px; }
.pager-label { font-size: 0.75rem; color: var(--vs-text-bright); padding: 0 6px; opacity: 0.85; }
.pager-label strong { color: var(--vs-text-bright); opacity: 1; }
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 24px;
    background: none;
    border: 1px solid var(--vs-border-main);
    border-radius: 3px;
    color: var(--vs-text-bright);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.1s ease;
}
.page-btn:hover:not(:disabled) {
    background-color: var(--vs-bg-hover);
    color: var(--vs-text-label, var(--vs-text-bright));
    border-color: var(--vs-border-focus);
}
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* 8.4  TsfLookup dropdown */
.tsf-dropdown-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: transparent;
    z-index: 1000;
}
.advanced-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 550px;
    background: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    z-index: 1001;
    border-radius: 0 0 4px 4px;
    margin-top: 1px;
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--vs-border-light);
}
.filter-row:last-child { border-bottom: none; }
.filter-label {
    width: 140px;
    font-size: 11px;
    font-weight: 600;
    color: var(--vs-text-muted);
    text-align: right;
    flex-shrink: 0;
}
.mobile-filter  { display: none; }
.desktop-filter { display: flex; }

/* 8.5  TsfDisplay */
.tsf-form-row.colspan-2 { grid-column: span 2; }
.tsf-display-value {
    display: block;
    width: 100%;
    padding: 6px 12px;
    background-color: var(--vs-bg-input);
    border: 1px solid var(--vs-border-light);
    border-radius: 4px;
    font-size: 0.9em;
    min-height: 31px;
    color: var(--vs-text-default);
}

/* 8.6  TsfTabs */
.tsf-tabs-wrapper { display: flex; flex-direction: column; height: 100%; }
.tsf-tabs-wrapper.tsf-tabs-flow { height: auto; min-height: 0; }
/* .tsf-page-content's own overflow:hidden (below, section 8.x) clips any content taller than
   the viewport by design, for pages whose content manages its own internal scroll (e.g. a data
   grid). .tsf-tabs-flow opts a page into natural document flow instead (see TsfTabs stickyNav),
   but that's pointless if this ancestor still clips it - let it flow through to the real page
   scroll container (.vs-route-outlet) whenever a flow-mode TsfTabs is present.
   FormPageShell's flowContent prop adds --flow explicitly (works in every browser); the :has()
   version below is kept only as a harmless belt-and-suspenders for pages that forget the prop -
   :has() itself isn't supported before Firefox 121, so it must never be the only mechanism. */
.tsf-page-content.tsf-page-content--flow,
.tsf-page-content:has(> .tsf-tabs-wrapper.tsf-tabs-flow) { overflow: visible; }
.tsf-page-content--flow > .tsf-tabs-wrapper.tsf-tabs-flow,
.tsf-page-content:has(> .tsf-tabs-wrapper.tsf-tabs-flow) > .tsf-tabs-wrapper.tsf-tabs-flow {
    align-self: flex-start;
    width: 100%;
    flex: 0 0 auto;
}
.tsf-tabs-wrapper.tsf-tabs-flow .tsf-tabs-content { flex-grow: 0; }
.tsf-tabs-nav {
    display: flex;
    list-style: none;
    padding: 0; margin: 0;
    background-color: var(--vs-bg-sidebar);
    border-bottom: 1px solid var(--vs-border-main);
    height: 30px;
    align-items: flex-end;
}
.tsf-tabs-nav--sticky {
    position: sticky;
    top: 0;
    z-index: 25;
    background-color: var(--vs-bg-sidebar);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--vs-bg-overlay, #000) 18%, transparent);
}
.tsf-tab-item {
    display: flex;
    align-items: center;
    padding: 0 15px;
    height: 29px;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--vs-text-muted);
    border-right: 1px solid var(--vs-border-light);
    transition: all 0.1s ease;
    -webkit-user-select: none;
    user-select: none;
    border-top: 2px solid transparent;
}
.tsf-tab-item i { font-size: 0.8rem; margin-right: 6px; opacity: 0.8; }
.tsf-tab-item:hover:not(.disabled):not(.active) {
    background-color: var(--vs-bg-hover);
    color: var(--vs-text-label, var(--vs-text-bright));
}
.tsf-tab-item.active {
    background-color: var(--vs-bg-main);
    color: var(--vs-text-label, var(--vs-text-bright));
    font-weight: 500;
    border-top: 2px solid var(--vs-accent);
    border-bottom: 1px solid var(--vs-bg-main);
    margin-bottom: -1px;
    z-index: 5;
}
.tsf-tab-item.disabled { opacity: 0.4; cursor: not-allowed; }
.tsf-tabs-content { flex-grow: 1; background-color: var(--vs-bg-main); padding: 12px 0; }

/* Edge fade + swipe hint overlays for the mobile scrollable tab strip (below, section 11).
   Hidden/no-op by default so desktop is pixel-identical; the responsive block only adds
   scroll geometry to .tsf-tabs-nav/.tsf-tab-item and toggles these via the show-fade-left,
   show-fade-right, show-swipe-hint wrapper classes. */
.tsf-tabs-nav-wrap { position: relative; }
.tsf-tab-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 4;
}
.tsf-tab-fade.right { right: 0; background: linear-gradient(to right, transparent, var(--vs-bg-sidebar) 78%); }
.tsf-tab-fade.left  { left: 0;  background: linear-gradient(to left,  transparent, var(--vs-bg-sidebar) 78%); }
.tsf-tab-swipe-hint {
    position: absolute;
    right: 6px;
    bottom: 5px;
    display: none;
    align-items: center;
    gap: 3px;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--vs-text-muted);
    background: color-mix(in srgb, var(--vs-bg-main) 88%, transparent);
    padding: 2px 6px 2px 5px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 5;
}
.tsf-tab-swipe-hint svg { width: 9px; height: 9px; }

/* 8.7  TsfDataForm two-column layout */
.tsf-dataform-search { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.tsf-two-column {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    gap: 0;
}
.tsf-dataform-root > .tsf-two-column,
.tsf-dataform-root > .tsf-dataform-search {
    flex: 1 1 auto;
    min-height: 0;
}

.left-pane {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
    border-right: 1px solid var(--vs-border-main);
    background-color: var(--vs-bg-sidebar);
    overflow-y: auto;
    padding: 8px 0;
}
.tsf-form-actions-pane {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 0;
}
.right-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch; }

.action-nav { display: flex; flex-direction: column; }
.action-link {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    color: var(--vs-text-default);
    font-size: 0.825rem;
    text-decoration: none;
    cursor: pointer;
    border-radius: 3px;
    margin: 1px 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.action-link:hover { background-color: var(--vs-bg-hover); color: var(--vs-text-bright); }
.action-link.active {
    background-color: var(--vs-bg-hover);
    color: var(--vs-accent);
    font-weight: 600;
}
.action-link.disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }
.action-title { font-size: 0.825rem; }
.action-icon  { margin-right: 8px; }
.action-hint  { margin-left: 24px; font-size: 0.75rem; color: var(--vs-text-muted); }

/* 8.8  Message Box */
.messagebox-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--vs-bg-overlay);
    z-index: 4500;
}
.messagebox-window {
    width: min(420px, 90vw);
    background-color: var(--vs-bg-main);
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    box-shadow: 0 20px 40px var(--vs-bg-overlay);
    color: var(--vs-text-default);
    overflow: hidden;
}
.messagebox-window .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--vs-bg-header);
    border-bottom: 1px solid var(--vs-border-main);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.messagebox-window .close-btn {
    background: transparent; border: none;
    color: var(--vs-text-muted); font-size: 1rem; cursor: pointer;
}
.messagebox-window .close-btn:hover { color: var(--vs-text-bright); }
.messagebox-window .content  { display: flex; padding: 1rem; gap: 0.75rem; }
.messagebox-window .icon-area { flex-shrink: 0; }
.messagebox-window .icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    font-size: 1.25rem; font-weight: bold; color: #fff;
}
.messagebox-window .icon.info     { background-color: var(--vs-color-info); }
.messagebox-window .icon.warning  { background-color: var(--vs-color-warning); }
.messagebox-window .icon.error    { background-color: var(--vs-color-error); }
.messagebox-window .icon.question { background-color: var(--vs-color-success); }
.messagebox-window .message-text  { flex: 1; line-height: 1.4; }
.messagebox-window .button-bar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--vs-bg-header);
    border-top: 1px solid var(--vs-border-main);
}
.messagebox-window .win-btn {
    min-width: 80px;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    border: 1px solid var(--vs-border-main);
    background-color: var(--vs-bg-sidebar);
    color: var(--vs-text-default);
    font-size: 0.85rem;
    cursor: pointer;
}
.messagebox-window .win-btn:hover  { background-color: var(--vs-bg-hover); }
.messagebox-window .win-btn.default { border-color: var(--vs-border-focus); color: var(--vs-text-bright); }


/* ─────────────────────────────────────────────────────────────────────
 * 9. THIRD-PARTY & ERP OVERRIDES
 * ───────────────────────────────────────────────────────────────────── */

/* Syncfusion sidebar background overrides */
.e-sidebar.vs-sidebar,
.e-sidebar.vs-sidebar .e-sidebar-content,
.e-sidebar.vs-sidebar .e-sidebar-header,
.e-sidebar.vs-sidebar .e-sidebar-footer,
.e-sidebar.vs-sidebar .e-sidebar-wrapper,
.e-sidebar:has(> .vs-sidebar-header),
.e-sidebar:has(> .vs-sidebar-header) > .vs-sidebar-header,
.e-sidebar:has(> .vs-sidebar-header) > .vs-sidebar-content,
.e-sidebar > .vs-sidebar-header,
.e-sidebar > .vs-sidebar-content {
    background-color: var(--vs-bg-sidebar) !important;
}
.e-sidebar.vs-sidebar { overflow: hidden; }
.e-sidebar:has(> .vs-sidebar-header) { overflow-x: hidden; overflow-y: auto; }

/* Bootstrap / ERP table overrides */
.card.bg-light {
    background-color: var(--vs-bg-sidebar) !important;
    border: 1px solid var(--vs-border-main) !important;
    color: var(--vs-text-default) !important;
}
.table { margin-bottom: 0; color: var(--vs-text-default); }
.table thead th {
    background-color: var(--vs-bg-sidebar);
    color: var(--vs-text-muted);
    border-bottom: 2px solid var(--vs-border-main);
    font-size: 11px;
    text-transform: uppercase;
}
.table td { border-bottom: 1px solid var(--vs-border-light); vertical-align: middle; }

.win-div {
    border: 1px solid var(--vs-border-main);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
}
.win-div-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    padding: 6px 12px;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header)) !important;
    border-bottom: 1px solid var(--vs-border-main) !important;
    color: var(--vs-text-bright) !important;
}
.win-div-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.win-div-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.win-div-icon {
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
    font-size: 0.85rem;
}
.win-div-title {
    font-weight: var(--vs-font-weight-section-title, 600);
    font-size: var(--vs-font-size-section-title, 0.82rem);
    /* Sits on the section-header band (--vs-bg-header), not the page. */
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
    text-transform: var(--vs-text-transform-section-title, uppercase);
    letter-spacing: var(--vs-letter-spacing-section-title, 0.03em);
}
.win-div-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
    background: transparent;
    color: var(--vs-accent);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.win-div-link-btn:hover:not(.disabled):not(:disabled) {
    background: var(--vs-bg-hover);
}
.win-div-link-btn.disabled,
.win-div-link-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--vs-text-muted);
}
.win-div-content {
    padding: 14px 12px;
    background-color: var(--vs-bg-main) !important;
    color: var(--vs-text-default) !important;
}

/* QuickGrid striping */
.lookup-grid-container table.table-striped tbody tr:nth-of-type(odd)  { background-color: var(--vs-bg-main)    !important; }
.lookup-grid-container table.table-striped tbody tr:nth-of-type(even) { background-color: var(--vs-bg-sidebar) !important; opacity: 0.8; }
.lookup-grid-container table tbody tr:hover                            { background-color: var(--vs-bg-hover)   !important; }

/* Sub Toolbar */
.tsf-sub-toolbar {
    height: 30px;
    background-color: var(--vs-bg-section-header, var(--vs-bg-header)) !important;
    border-bottom: 1px solid var(--vs-border-main) !important;
    color: var(--vs-text-on-section-header, var(--vs-text-on-header)) !important;
}

/* WBS Tree Table */
.wbs-tree-table thead th {
    background-color: var(--vs-bg-sidebar) !important;
    color: var(--vs-text-muted) !important;
    border-bottom: 2px solid var(--vs-border-main) !important;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
    position: sticky; top: 0; z-index: 2;
}
.wbs-tree-table td {
    background-color: var(--vs-bg-main) !important;
    color: var(--vs-text-default) !important;
    border-bottom: 1px solid var(--vs-border-light) !important;
    border-right: 1px solid var(--vs-border-light) !important;
}
.wbs-tree-table tr:hover td { background-color: var(--vs-bg-hover) !important; }
.wbs-tree-table tr.selected td { background-color: var(--vs-bg-selected) !important; color: var(--vs-text-default) !important; }
.wbs-tree-table tr.wbs-row-done td { background-color: var(--vs-bg-main) !important; color: var(--vs-text-muted) !important; opacity: 0.72; }
.wbs-tree-table tr.wbs-row-done:hover td { opacity: 0.9; }
.wbs-tree-table tr.wbs-row-inactive td { background-color: var(--vs-bg-main) !important; color: var(--vs-text-muted) !important; opacity: 0.5; }
.wbs-tree-table tr.wbs-row-inactive:hover td { opacity: 0.7; }
.wbs-tree-table td.bg-light-subtle { background-color: var(--vs-bg-sidebar) !important; color: var(--vs-text-muted) !important; }
.wbs-tree-table tr.selected td.bg-light-subtle { background-color: var(--vs-bg-selected) !important; }
.wbs-tree-table input.form-control-plaintext,
.wbs-tree-table input[type="number"],
.wbs-tree-table input[type="date"],
.wbs-tree-table input[type="text"],
.wbs-tree-table select { background-color: transparent !important; color: var(--vs-text-default) !important; border: none !important; width: 100%; }
.wbs-tree-table input[type="date"],
.wbs-tree-table select { color-scheme: var(--vs-color-scheme); }
.wbs-tree-table tr.selected input,
.wbs-tree-table tr.selected select { color: var(--vs-text-default) !important; }
.wbs-tree-table tr.selected td textarea,
.wbs-tree-table tr.selected td.text-info,
.wbs-tree-table tr.selected td.text-primary { color: var(--vs-text-default) !important; }
.wbs-tree-table input:focus,
.wbs-tree-table select:focus { background-color: var(--vs-bg-input) !important; border: 1px solid var(--vs-border-focus) !important; outline: none !important; }
.wbs-tree-table select:disabled { opacity: 0.5; cursor: default; }
.wbs-taskgroup-select { cursor: pointer; font-size: 0.8125rem; padding: 0 0.25rem; }
.wbs-tree-table .cursor-pointer { cursor: pointer; color: var(--vs-text-muted); }
.wbs-tree-table .cursor-pointer:hover { color: var(--vs-accent); }
.wbs-tree-table .text-primary { color: var(--vs-text-info) !important; }

.planner-outer-wrapper { border: 1px solid var(--vs-border-main) !important; border-radius: 2px; }
.planner-grid-container { background-color: var(--vs-bg-main) !important; }
.sf-grid-slim { background-color: var(--vs-bg-main) !important; color: var(--vs-text-default) !important; }


/* ─────────────────────────────────────────────────────────────────────
 * 10. DYNAMIC STATES & ANIMATIONS
 * ───────────────────────────────────────────────────────────────────── */

.vs-app-bar.navbar-bg-alert   { background-color: var(--vs-color-error)   !important; transition: background-color 0.3s ease-in-out; }
.vs-app-bar.navbar-bg-success { background-color: var(--vs-color-success) !important; transition: background-color 0.3s ease-in-out; }
.vs-app-bar.navbar-bg-warning { background-color: var(--vs-color-warning) !important; transition: background-color 0.3s ease-in-out; }

.animate-fade-in { animation: vsFadeIn 0.2s ease-out; }
@keyframes vsFadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes spin { to { transform: rotate(360deg); } }

.vs-loader-active { cursor: wait !important; }
.vs-loader-active input { pointer-events: none; background-color: var(--vs-bg-hover) !important; }

/* Timesheet responsive stacking */
.ts-container { width: 100%; overflow-x: auto; }


/* ─────────────────────────────────────────────────────────────────────
 * 11. RESPONSIVE
 * ───────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
    .vs-content-body { padding: 1px !important; }
    .desktop-filter { display: none !important; }
    .mobile-filter  { display: flex !important; }

    .tsf-two-column { flex-direction: column; gap: 0; }
    .tsf-two-column .right-pane { order: 1; width: 100%; margin-left: 0; overflow-y: visible; }
    .tsf-two-column .right-pane .vs-content-body { padding: 1px; }
    .tsf-two-column .left-pane {
        order: 2;
        position: sticky;
        bottom: var(--vs-footer-height);
        width: 100%;
        padding: 0;
        background: var(--vs-bg-header);
        border-top: 1px solid var(--vs-border-main);
        max-height: none;
        overflow-y: hidden;
        z-index: 2000;
    }
    .tsf-two-column .left-pane .action-nav  { flex-direction: row; justify-content: space-around; width: 100%; }
    .tsf-two-column .left-pane .action-link { flex: 1; justify-content: center; padding: 12px 8px; color: var(--vs-text-muted); }
    .tsf-two-column .left-pane .action-link:hover { color: var(--vs-text-bright); }
    .tsf-two-column .left-pane .action-title { display: none; }
    .tsf-two-column .left-pane .action-link i { margin-right: 0; font-size: 1.2rem; }

    .ts-table thead { display: none; }
    .ts-table, .ts-table tbody, .ts-table tr.ts-table-row, .ts-table td.ts-table-cell { display: block; width: 100% !important; }
    .ts-table tr.ts-table-row {
        margin-bottom: 1rem;
        border: 1px solid var(--vs-border-main);
        border-radius: 4px;
        background: var(--vs-bg-sidebar);
        padding: 0.75rem;
    }
    .ts-table td.ts-table-cell {
        border: none !important;
        padding: 0.5rem 0 !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .ts-table td.ts-table-cell:before {
        content: attr(data-label);
        font-weight: bold;
        font-size: 0.7rem;
        color: var(--vs-text-muted);
        text-transform: uppercase;
        margin-bottom: 0.25rem;
    }
    .day-cell { width: 100% !important; border-top: 1px solid var(--vs-border-light) !important; margin-top: 5px; }

    /* TsfTabs — many top-level tabs (e.g. Item Master's 10) no longer shrink/clip to
       fit one row; the strip scrolls horizontally instead. Fade/hint overlay styles
       live above (section 8.6, hidden by default) — this only adds scroll geometry
       and toggles them visible via the show-fade-left, show-fade-right, show-swipe-hint
       wrapper classes TsfTabs.tsx sets from scroll position. */
    .tsf-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tsf-tabs-nav::-webkit-scrollbar { display: none; }
    .tsf-tab-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .tsf-tabs-nav-wrap.show-fade-left  .tsf-tab-fade.left  { opacity: 1; }
    .tsf-tabs-nav-wrap.show-fade-right .tsf-tab-fade.right { opacity: 1; }
    .tsf-tabs-nav-wrap.show-swipe-hint .tsf-tab-swipe-hint { display: flex; }
}



.tsf-page-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
    height: 100%;
}
.tsf-page-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}
.tsf-dataform-root {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.tsf-page-content .tsf-dataform-root,
.tsf-page-content .tsf-two-column,
.tsf-page-content .tsf-dataform-search {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.tsf-form-body {
    padding: 12px 16px;
}
.right-pane:has(.tsf-master-detail-layout) {
    overflow: hidden;
}
.tsf-form-body:has(.tsf-master-detail-layout) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 8px 12px;
}
.tsf-master-detail-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 6px;
    width: 100%;
}
.tsf-master-detail-master {
    flex: 0 0 auto;
}
.tsf-master-detail-hint {
    margin: 0 0 4px;
    font-size: 0.8rem;
}
.tsf-master-detail-detail {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.tsf-master-detail-detail-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}
.tsf-master-detail-detail-panel .win-div-content {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
}
.tsf-master-detail-detail-panel .win-div-header {
    padding: 4px 10px;
    min-height: 0;
}
.tsf-master-detail-detail-panel .tsf-inline-edit-grid {
    flex: 1 1 auto;
    min-height: 0;
}
.tsf-dataform-search,
.tsf-lookup-host {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}
.vs-content-body0 > .tsf-page-shell {
    height: 100%;
}

/* BI Analytics Chat — full-height split pane inside page shell */
.tsf-page-content > .bi-app {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Finance report pages: scrollable grid with summary pinned at bottom */
.tsf-page-content > .form-div.tsf-report-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.tsf-report-page .win-div-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 12px;
}

/* Pivot inquiry: fill remaining viewport; grid scrolls, chart fits */
.tsf-page-content > .tsf-pivot-inquiry,
.tsf-page-content > .form-div.tsf-pivot-inquiry {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
}
.tsf-pivot-inquiry .win-div-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 12px 10px;
}
.vs-header-extra {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0.75rem;
}
.tsf-pivot-inquiry-filters {
    flex: 0 0 auto;
}
.tsf-pivot-inquiry-header-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.85rem;
}
.tsf-pivot-inquiry-header-filters .tsf-form-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0;
}
.tsf-pivot-inquiry-header-filters .tsf-form-col-label {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
    margin-bottom: 0;
}
.tsf-pivot-inquiry-header-filters .tsf-form-col-input {
    flex: 0 0 auto;
    width: 138px;
    min-width: 120px;
}
.tsf-pivot-inquiry-header-filters .tsf-form-label {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--vs-form-title-color, var(--vs-text-bright));
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}
.tsf-pivot-inquiry-header-filters .tsf-datepicker-input,
.tsf-pivot-inquiry-header-filters .tsf-datepicker-wrap {
    min-height: 28px;
}
.tsf-pivot-inquiry-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 12px 10px;
}
.tsf-pivot-inquiry-body > .tsf-pivot {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.tsf-report-filters {
    flex: 0 0 auto;
}
.tsf-report-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tsf-report-main > .tsf-tabs-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.tsf-report-main .tsf-tabs-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 0 0;
}
.tsf-report-grid-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.tsf-report-grid-panel > .lookup-grid-container {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.tsf-report-summary {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    padding: 10px 12px;
    border-top: 1px solid var(--vs-border-main);
    background: var(--vs-bg-sidebar);
    font-size: 0.8125rem;
    color: var(--vs-text-muted);
}

/* Themed loading indicator (replaces the Bootstrap spinner) */
.tsf-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--vs-border-main);
    border-top-color: var(--vs-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
}
.tsf-spinner--sm {
    width: 0.875rem;
    height: 0.875rem;
}

.tsf-form-panel {
    padding: 1rem 1.25rem;
}

.tsf-form-grid {
    display: grid;
    gap: 0.75rem 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 1rem;
}

.vs-form-subtitle {
    color: var(--vs-text-muted);
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* JSON fields — Lookup Manager and similar */
.vs-json-editor {
    font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre;
    tab-size: 2;
}

.vs-user-label {
    color: var(--vs-text-bright);
    font-size: 0.85rem;
}

.vs-menu {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

/* Refresh action sits inside the input, matching the IDLookup search icon. */
.exchange-rate-field__input-row {
    position: relative;
}

/* Keep the right-aligned rate clear of the icon, and drop the native number
   spinners that would otherwise sit under it.
   !important to win over the global `input { padding: ... !important }` rule. */
.exchange-rate-field__input {
    padding-right: 26px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.exchange-rate-field__input::-webkit-outer-spin-button,
.exchange-rate-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.exchange-rate-field__refresh {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--vs-text-muted);
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.exchange-rate-field__refresh:hover:not(:disabled) {
    color: var(--vs-accent);
    background: var(--vs-bg-hover);
}

.exchange-rate-field__refresh:disabled {
    opacity: 0.4;
    cursor: default;
}

.exchange-rate-field__refresh--error {
    color: var(--vs-color-error);
}

/* Below the form breakpoint the label stacks above the input, so anchor the
   icon to the bottom (the input) instead of the centre of the whole block. */
@media (max-width: 767.98px) {
    .exchange-rate-field__refresh {
        top: auto;
        bottom: 6px;
        transform: none;
    }
}

/* ── SAP Coding Block — slim per-line account-assignment panel ────────────── */
.coding-block-layout {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.coding-block-layout__main {
    flex: 1 1 auto;
    min-width: 0;
}
/* Row selection for the lines grid paired with the coding block */
.cb-line-row { cursor: pointer; }
.cb-line-row--selected > td {
    background-color: var(--vs-bg-selected) !important;
    box-shadow: inset 2px 0 0 var(--vs-accent);
}
@media (max-width: 1100px) {
    .coding-block-layout { flex-direction: column; }
    .coding-block-layout .coding-block { width: 100%; flex-basis: auto; }
}
/* Pages whose mobile card view renders Account Assignment fields inline
   (see .voucher-line-card__fields-grid below) skip the separate sidebar
   on phones — it would just duplicate the same fields a second time. */
@media (max-width: 767.98px) {
    .coding-block-layout--cards-own-fields .coding-block { display: none; }
}

.coding-block {
    flex: 0 0 300px;
    width: 300px;
    box-sizing: border-box;
    /* Derive the surface from the page background so it always tracks the theme:
       lifts slightly on dark themes, darkens slightly on light themes — never a
       clashing white block. */
    background: color-mix(in srgb, var(--vs-bg-main) 94%, var(--vs-text-default) 6%);
    border: 1px solid var(--vs-border-main);
    border-radius: 6px;
    padding: 0.6rem 0.7rem 0.75rem;
}

.coding-block-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--vs-text-bright, var(--vs-text-default));
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--vs-border-light);
}

.coding-block-field {
    margin-bottom: 0.55rem;
}
.coding-block-field:last-child { margin-bottom: 0; }

.coding-block-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--vs-text-muted);
    margin-bottom: 0.15rem;
}

.coding-block-hint {
    font-size: 0.75rem;
    color: var(--vs-text-muted);
    margin: 0;
}

.coding-block--empty .coding-block-title {
    border-bottom: none;
    margin-bottom: 0.25rem;
}

/* ── Voucher line grids: card view below the mobile breakpoint ────────────
   Shared by Journal Voucher, Treasury Voucher and other documents that pair
   a debit/credit lines grid with the Coding Block panel above. Each page
   keeps its own <table> for desktop and renders this markup alongside it;
   only one of the two is visible at a time, split at the same 767.98px
   breakpoint used elsewhere in the app. */
.voucher-lines-cards { display: none; }
@media (max-width: 767.98px) {
    .voucher-lines-table-wrap { display: none; }
    .voucher-lines-cards {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.6rem;
    }
}
.voucher-line-card {
    border: 1px solid var(--vs-border-main);
    border-radius: 8px;
    background: var(--vs-bg-input);
    padding: 0.6rem 0.65rem;
    cursor: pointer;
}
.voucher-line-card--selected {
    border-color: var(--vs-accent);
    box-shadow: inset 2px 0 0 var(--vs-accent);
}
.voucher-line-card__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.voucher-line-card__num {
    flex: none;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--vs-bg-hover);
    color: var(--vs-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}
.voucher-line-card__acct { flex: 1 1 auto; min-width: 0; }
.voucher-line-card__expand-btn {
    flex: none;
    border: none;
    background: transparent;
    color: var(--vs-text-muted);
    font-size: 0.8rem;
    padding: 0.25rem 0.35rem;
    line-height: 1;
}
.voucher-line-card__amounts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
    cursor: default;
}
.voucher-line-card__amt label,
.voucher-line-card__field label {
    display: block;
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--vs-text-muted);
    margin-bottom: 0.15rem;
}
.voucher-line-card__amt--debit label { color: #1d4ed8; }
.voucher-line-card__amt--credit label { color: var(--vs-color-success); }
.voucher-line-card__details {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--vs-border-light);
    cursor: default;
}
/* One named section per field group (Narrative, Party, Account Assignment,
   Intercompany) — stacked, each separated by a dashed rule. */
.voucher-line-card__group + .voucher-line-card__group {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--vs-border-light);
}
.voucher-line-card__group-label {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vs-accent);
    margin: 0 0 0.4rem;
}
/* 2-up grid for a group's fields — also used to lay out the Account
   Assignment lookups (CodingBlockFields) inline inside the card. */
.voucher-line-card__fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 0.6rem;
}
.voucher-line-card__fields-grid .coding-block-field { margin-bottom: 0; }
.voucher-line-card__fields-grid .coding-block-field--full { grid-column: 1 / -1; }
.voucher-line-card__field--full { grid-column: 1 / -1; }
.voucher-line-card__field--inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.voucher-line-card__field--inline label { margin-bottom: 0; }
.voucher-line-card__remove-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--vs-border-light);
}

.metabase-report-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--vs-header-height) - 2rem);
    gap: 0.75rem;
}

.metabase-report-page__state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 240px;
    border: 1px dashed var(--vs-border-main);
    border-radius: 12px;
    background: color-mix(in srgb, var(--vs-bg-main) 92%, var(--vs-accent) 8%);
    padding: 1.5rem;
    text-align: center;
}

.metabase-report-page__state--error {
    border-color: color-mix(in srgb, #dc3545 35%, var(--vs-border-main));
}

.metabase-report-page__frame-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
}

.metabase-report-page__frame {
    width: 100%;
    flex: 1 1 auto;
    min-height: 640px;
    border: 1px solid var(--vs-border-main);
    border-radius: 12px;
    background: #fff;
}

.metabase-report-page__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Form section sidebar (Item Master, etc.) ───────────────────────── */
.form-sidebar-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 280px;
    border: 1px solid var(--vs-border-main);
    border-radius: 6px;
    overflow: hidden;
    background: var(--vs-bg-main);
}

.form-sidebar-layout--nested {
    border: none;
    border-radius: 0;
    min-height: 240px;
}

.form-sidebar-nav {
    flex: 0 0 220px;
    max-width: 260px;
    background-color: var(--vs-bg-sidebar);
    border-right: 1px solid var(--vs-border-main);
    overflow-y: auto;
}

.form-sidebar-layout--nested > .form-sidebar-nav {
    flex-basis: 240px;
}

.form-sidebar-nav-list {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
}

.form-sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--vs-text-muted);
    padding: 0.65rem 0.9rem;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.form-sidebar-nav-item i {
    flex: 0 0 auto;
    width: 1rem;
    text-align: center;
    opacity: 0.85;
}

.form-sidebar-nav-label {
    flex: 1 1 auto;
    text-transform: uppercase;
}

.form-sidebar-nav-item:hover:not(.disabled):not(.active) {
    background-color: var(--vs-bg-hover);
    color: var(--vs-text-label, var(--vs-text-bright));
}

.form-sidebar-nav-item.active {
    background-color: color-mix(in srgb, var(--vs-bg-main) 55%, var(--vs-bg-sidebar));
    color: var(--vs-text-bright, var(--vs-text-default));
    font-weight: 700;
}

.form-sidebar-nav-item.active .form-sidebar-nav-label {
    font-weight: 700;
}

.form-sidebar-nav-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.form-sidebar-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75rem 1rem 1rem;
    overflow: auto;
    background: var(--vs-bg-main);
}

@media (max-width: 900px) {
    .form-sidebar-layout {
        flex-direction: column;
    }
    .form-sidebar-nav {
        flex: 0 0 auto;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--vs-border-main);
    }
    .form-sidebar-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.15rem;
        padding: 0.4rem;
    }
    .form-sidebar-nav-item {
        width: auto;
        border-radius: 4px;
        padding: 0.45rem 0.65rem;
    }
}

/* Explanatory text under a form heading. Used ~584 times across the app but was
   never defined, so every hint rendered as unstyled body text. */
.form-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--vs-text-muted);
}

/* ── Alert Rules layout ──────────────────────────────────────────────────────
   Replaces the Bootstrap flex utilities these pages previously relied on;
   Bootstrap is not installed, so those classes rendered as no-ops. */

.alert-rule-condition-row {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.alert-rule-row-actions {
    display: inline-flex;
    gap: 0.25rem;
    justify-content: flex-end;
}

/* TsfTextBox with an action icon: reserve room so the value never runs beneath
   the glyph (mirrors the lookup field's own spacing). */
.tsf-textbox-icon-wrapper input {
    padding-right: 2rem !important;
}

/* ── Production Order Settlement ─────────────────────────────────────────────
   The order picker is a standard IDLookup (typeahead + browse dialog come from
   the component); only its width is constrained here. */

.prod-settlement-picker {
    position: relative;
    max-width: 640px;
    margin-bottom: 0.75rem;
}







/* Cost blocks sit side by side on wide screens, stacking on narrow ones. */
.prod-settlement-costs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1200px) {
    .prod-settlement-costs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Cards ───────────────────────────────────────────────────────────────────
   Reusable content card, styled to match the app's existing panel chrome
   (win-div-header). Replaces the Bootstrap .card/.card-header/.card-body
   classes used across several pages — Bootstrap is not installed, so those
   rendered as unstyled blocks. Every colour is a theme variable, so cards
   follow light/dark themes rather than hardcoding white surfaces. */

.tsf-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
    overflow: hidden;
}

.tsf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 6px 12px;
    background: var(--vs-bg-section-header, var(--vs-bg-header));
    border-bottom: 1px solid var(--vs-border-main);
    color: var(--vs-text-on-section-header, var(--vs-text-on-header));
}

.tsf-card-title {
    font-weight: 600;
    font-size: var(--vs-font-size-section-title, 0.82rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--vs-text-bright);
}

.tsf-card-header .tsf-card-icon {
    margin-right: 6px;
    color: var(--vs-accent);
    font-size: 0.85rem;
}

.tsf-card-body {
    flex: 1;
    min-height: 0;
    padding: 10px 12px;
}

/* Body variant for cards whose content is a grid/table that should reach the edges. */
.tsf-card-body--flush {
    padding: 0;
}

.tsf-card-text { color: var(--vs-text-default); }

.tsf-card-description {
    font-size: 0.8rem;
    color: var(--vs-text-muted);
}

.tsf-card-footer {
    padding: 6px 12px;
    border-top: 1px solid var(--vs-border-main);
    background: var(--vs-bg-header);
    color: var(--vs-text-default);
}

/* Key/value rows inside a card — the common "label … amount" cost layout. */
.tsf-card-rows {
    display: flex;
    flex-direction: column;
}

.tsf-card-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 5px 0;
    border-bottom: 1px solid var(--vs-border-muted, var(--vs-border-main));
}

.tsf-card-row:last-child {
    border-bottom: 0;
}

.tsf-card-row-label {
    color: var(--vs-text-default);
}

.tsf-card-row-value {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    color: var(--vs-text-bright);
}

/* Emphasised total row. */
.tsf-card-row--total .tsf-card-row-label,
.tsf-card-row--total .tsf-card-row-value {
    font-weight: 700;
}

.tsf-card-row--total {
    border-top: 1px solid var(--vs-border-main);
    border-bottom: 0;
    margin-top: 2px;
    padding-top: 7px;
}

.tsf-card-row-value--positive { color: var(--vs-color-success); }
.tsf-card-row-value--negative { color: var(--vs-color-error); }

/* Responsive card grid: use --tsf-card-cols to set the wide-screen column count. */
.tsf-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .tsf-card-grid {
        grid-template-columns: repeat(var(--tsf-card-cols, 3), minmax(0, 1fr));
    }
}

/* ── Buttons & notices ───────────────────────────────────────────────────────
   App-standard replacements for the Bootstrap .btn / .alert classes still used
   by some pages. Sized to match the app's inputs (0.375rem padding, 0.85rem
   font) so a button sitting beside a field lines up with it. */

.tsf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
    cursor: pointer;
}

.tsf-btn:hover:not(:disabled) { border-color: var(--vs-accent); }
.tsf-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.tsf-btn--primary {
    border-color: transparent;
    background: var(--vs-accent);
    color: #fff;
}

.tsf-btn--danger {
    border-color: transparent;
    background: var(--vs-color-error);
    color: #fff;
}

.tsf-btn--sm { padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.tsf-btn--lg { padding: 0.55rem 1.4rem; font-size: 0.95rem; }

.tsf-notice {
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--vs-border-main);
    border-left-width: 3px;
    border-radius: 4px;
    background: var(--vs-bg-surface);
    color: var(--vs-text-default);
    font-size: 0.85rem;
}

.tsf-notice--info    { border-left-color: var(--vs-color-info); }
.tsf-notice--warning { border-left-color: var(--vs-color-warning); }
.tsf-notice--error   { border-left-color: var(--vs-color-error); }
.tsf-notice--success { border-left-color: var(--vs-color-success); }
.tsf-notice--muted   { border-left-color: var(--vs-text-muted); }

/* Emphasised total row inside a plain table. */
.tsf-row-total td { font-weight: 700; border-top: 1px solid var(--vs-border-main); }

/* Generic utilities used across pages but previously undefined. */
.mb-0  { margin-bottom: 0 !important; }
.mb-4  { margin-bottom: 1.5rem !important; }
.border { border: 1px solid var(--vs-border-main) !important; }
.align-middle { vertical-align: middle !important; }

/* ── Utility completions ─────────────────────────────────────────────────────
   The app already ships a hand-maintained Bootstrap-compatible utility shim
   (see section 1). These entries complete it for classes that were in use
   across ~79 pages but had no definition, so they silently did nothing.
   Every value maps to a theme variable — no hardcoded light/dark colours. */

/* Text */
.small          { font-size: 0.8rem; }
.text-warning   { color: var(--vs-color-warning) !important; }
.text-start     { text-align: start !important; }
.text-nowrap    { white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.fw-semibold    { font-weight: 600 !important; }
.fs-4           { font-size: 1.25rem !important; }
.font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; }
.align-baseline { vertical-align: baseline !important; }

/* Spacing */
.m-0  { margin: 0 !important; }
.mt-4 { margin-top: 1.5rem !important; }
.p-0  { padding: 0 !important; }
.p-2  { padding: 0.5rem !important; }
.p-4  { padding: 1.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }

/* Layout helpers */
.justify-content-between { justify-content: space-between !important; }
.list-unstyled { list-style: none; padding-left: 0; margin: 0; }

/* Borders */
.border-3       { border-width: 3px !important; }
.border-start   { border-left: 1px solid var(--vs-border-main) !important; }
.border-bottom  { border-bottom: 1px solid var(--vs-border-main) !important; }
.border-primary { border-color: var(--vs-accent) !important; }
.border-info    { border-color: var(--vs-color-info) !important; }
.shadow-sm      { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; }

/* Surfaces. bg-* must carry a matching foreground or text disappears on the
   themes whose page background is the opposite polarity. */
.bg-white { background-color: var(--vs-bg-main) !important; color: var(--vs-text-default) !important; }
.bg-dark  { background-color: var(--vs-bg-sidebar) !important; color: var(--vs-text-bright) !important; }

/* Bootstrap-style buttons mapped onto the app's own button treatment. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 1rem;
    font-size: 0.85rem;
    border: 1px solid var(--vs-border-main);
    border-radius: 4px;
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
    cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--vs-accent); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-sm { padding: 0.2rem 0.6rem; font-size: 0.78rem; }
.btn-xs { padding: 0.1rem 0.4rem; font-size: 0.72rem; }
.btn-lg { padding: 0.55rem 1.4rem; font-size: 0.95rem; }

.btn-primary   { border-color: transparent; background: var(--vs-accent);        color: #fff; }
.btn-secondary { border-color: transparent; background: var(--vs-bg-hover);      color: var(--vs-text-default); }
.btn-success   { border-color: transparent; background: var(--vs-color-success); color: #fff; }
.btn-danger    { border-color: transparent; background: var(--vs-color-error);   color: #fff; }

.btn-outline-primary   { border-color: var(--vs-accent);        color: var(--vs-accent); background: transparent; }
.btn-outline-secondary { border-color: var(--vs-border-main);   color: var(--vs-text-default); background: transparent; }
.btn-outline-success   { border-color: var(--vs-color-success); color: var(--vs-color-success); background: transparent; }
.btn-outline-danger    { border-color: var(--vs-color-error);   color: var(--vs-color-error); background: transparent; }

.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--vs-accent);
    text-decoration: underline;
    cursor: pointer;
}
.link-primary { color: var(--vs-accent); }

/* Inline notices. */
.alert {
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--vs-border-main);
    border-left-width: 3px;
    border-radius: 4px;
    background: var(--vs-bg-surface);
    color: var(--vs-text-default);
    font-size: 0.85rem;
}
.alert-info      { border-left-color: var(--vs-color-info); }
.alert-success   { border-left-color: var(--vs-color-success); }
.alert-warning   { border-left-color: var(--vs-color-warning); }
.alert-danger    { border-left-color: var(--vs-color-error); }
.alert-secondary { border-left-color: var(--vs-text-muted); }

/* Status pill variants. `.badge` itself is already defined above — these only
   add the colour variants, so the existing badge styling is not overridden. */
.badge-default {
    background: var(--vs-bg-hover) !important;
    color: var(--vs-text-default) !important;
}
.badge-primary   { background: var(--vs-accent) !important;        color: #fff !important; }
.badge-secondary { background: var(--vs-text-muted) !important;    color: #fff !important; }
.badge-info      { background: var(--vs-color-info) !important;    color: #fff !important; }
.badge-warning   { background: var(--vs-color-warning) !important; color: #000 !important; }
.badge-danger    { background: var(--vs-color-error) !important;   color: #fff !important; }
.badge-light     { background: var(--vs-bg-surface) !important;    color: var(--vs-text-default) !important; }

/* Misc form/table helpers. */
.form-text     { font-size: 0.78rem; color: var(--vs-text-muted); }
.form-field    { margin-bottom: 0.75rem; }
.form-subtitle { font-weight: 600; font-size: 0.85rem; color: var(--vs-text-bright); margin-bottom: 0.4rem; }
.table-light td, .table-light th { background: var(--vs-bg-surface) !important; }
.card-title       { font-weight: 600; color: var(--vs-text-bright); }
.card-description { font-size: 0.8rem; color: var(--vs-text-muted); }

/* ── Grid utilities ──────────────────────────────────────────────────────────
   Tailwind-shaped grid classes used widely across the finance/production pages.
   Tailwind is not installed, so these rendered as no-ops and the "grids" were
   really just stacked blocks. Defined here with the same names so the existing
   markup works, and with the md:/lg: breakpoints those pages already assume. */

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-full { grid-column: 1 / -1; }

/* Single-column until the breakpoint, matching Tailwind's mobile-first order. */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:p-5 { padding: 1.25rem !important; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 992px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
}

@media (min-width: 1200px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Flex + spacing helpers that accompany the grids. */
.flex   { display: flex; }
.flex-1 { flex: 1 1 0%; }
.gap-6  { gap: 2rem !important; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.overflow-auto   { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.p-1  { padding: 0.25rem !important; }
.p-5  { padding: 2rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.py-6 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.ml-3 { margin-left: 1rem !important; }

/* Type scale. */
.text-xs   { font-size: 0.72rem; }
.text-sm   { font-size: 0.8rem; }
.text-base { font-size: 0.875rem; }
.text-lg   { font-size: 1rem; }
.text-xl   { font-size: 1.15rem; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* Bootstrap grid (row/col-*) still used by a few finance pages. */
.row { display: flex; flex-wrap: wrap; margin-left: -0.5rem; margin-right: -0.5rem; }
.row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
.col { flex: 1 0 0%; }
.g-2 { gap: 0.5rem; }
.g-3 { gap: 1rem; }
@media (min-width: 768px) {
    .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
    .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
    .col-lg-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
    .col-lg-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
    .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .col-sm-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
}
.col-6  { flex: 0 0 50%;  max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

.table-group-divider { border-top: 2px solid var(--vs-border-main); }
.list-group { display: flex; flex-direction: column; }
.list-group-item {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--vs-border-main);
    border-bottom: 0;
    background: var(--vs-bg-main);
    color: var(--vs-text-default);
}
.list-group-item:last-child { border-bottom: 1px solid var(--vs-border-main); }
.list-group-flush .list-group-item { border-left: 0; border-right: 0; }

/* ── Tailwind palette compatibility ──────────────────────────────────────────
   Several pages use Tailwind's numeric colour scale. Rather than hardcoding
   those hex values — which would break on dark themes exactly as bg-white did —
   each is mapped to the nearest semantic theme variable, so the intent
   (muted label, positive figure, accent surface) survives a theme change. */

/* Muted / secondary text */
.text-gray-500, .text-gray-600, .text-slate-600 { color: var(--vs-text-muted) !important; }
.text-gray-800, .text-slate-700               { color: var(--vs-text-default) !important; }

/* Semantic figures */
.text-green-600, .text-emerald-600 { color: var(--vs-color-success) !important; }
.text-red-600                      { color: var(--vs-color-error) !important; }
.text-amber-600, .text-amber-700, .text-amber-900, .text-orange-600 { color: var(--vs-color-warning) !important; }
.text-blue-600, .text-blue-700, .text-blue-800 { color: var(--vs-accent) !important; }
.text-purple-600, .text-indigo-600, .text-teal-600 { color: var(--vs-accent) !important; }

/* Subtle surfaces */
.bg-gray-50, .bg-slate-50, .bg-blue-50, .bg-amber-50 {
    background-color: var(--vs-bg-surface) !important;
    color: var(--vs-text-default) !important;
}
.bg-gray-100, .bg-gray-200, .bg-slate-100 {
    background-color: var(--vs-bg-hover) !important;
    color: var(--vs-text-default) !important;
}
.bg-slate-800, .bg-gray-600, .bg-gray-700, .bg-gray-500 {
    background-color: var(--vs-bg-sidebar) !important;
    color: var(--vs-text-bright) !important;
}

/* Solid accent / status fills — these carry white text by design. */
.bg-blue-600, .bg-blue-700, .bg-indigo-500, .bg-indigo-600, .bg-indigo-700 {
    background-color: var(--vs-accent) !important;
    color: #fff !important;
}
.bg-green-600, .bg-green-700, .bg-emerald-600 {
    background-color: var(--vs-color-success) !important;
    color: #fff !important;
}
.bg-red-600 { background-color: var(--vs-color-error) !important; color: #fff !important; }
.bg-amber-600 { background-color: var(--vs-color-warning) !important; color: #000 !important; }

.border-slate-200, .border-blue-200, .border-amber-200 { border-color: var(--vs-border-main) !important; }
.border-b { border-bottom: 1px solid var(--vs-border-main) !important; }
.border-t { border-top: 1px solid var(--vs-border-main) !important; }
.border-0 { border: 0 !important; }

/* Alignment, sizing and remaining Bootstrap/Tailwind leftovers. */
.text-left  { text-align: left !important; }
.text-right { text-align: right !important; }
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }
.w-12 { width: 3rem !important; }
.w-24 { width: 6rem !important; }
.w-28 { width: 7rem !important; }
.w-36 { width: 9rem !important; }
.w-48 { width: 12rem !important; }
.w-56 { width: 14rem !important; }
.h-10 { height: 2.5rem !important; }
.h-12 { height: 3rem !important; }
.h-16 { height: 4rem !important; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.fs-5 { font-size: 1.1rem !important; }
.card-text   { color: var(--vs-text-default); }
.card-footer {
    padding: 6px 12px;
    border-top: 1px solid var(--vs-border-main);
    background: var(--vs-bg-header);
    color: var(--vs-text-default);
}
.table-primary td, .table-primary th {
    background: color-mix(in srgb, var(--vs-accent) 14%, transparent) !important;
}
@media (min-width: 992px) {
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Final leftovers found in shared components (components/**). */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-reset  { color: inherit !important; }
.align-start { align-items: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.border-top  { border-top: 1px solid var(--vs-border-main) !important; }
.btn-outline { border-color: var(--vs-border-main); color: var(--vs-text-default); background: transparent; }
.badge-success { background: var(--vs-color-success) !important; color: #fff !important; }
.card-icon { color: var(--vs-accent); }
@media (min-width: 768px) { .d-md-inline { display: inline !important; } }