/* ==========================================================================
   GRAPEVINE DESIGN SYSTEM
   The single stylesheet for Grapevine application UI.

   Spec: /DESIGN_STYLE_GUIDE.md  (read it before editing this file)

   RULES
   -----
   1. This is the ONLY stylesheet for application UI. Do not create new CSS
      files, <style> blocks, or inline style attributes. Extend this file.
   2. It loads LAST in the gulp `app.css` bundle, after Bootstrap 4 and the
      third-party widget stylesheets. Source order lets it own application UI
      without !important.
   3. Do NOT wrap this file in @layer. The third-party stylesheets are
      unlayered, so layered application rules would lose every conflict.
   4. Colour comes from tokens only. No raw hex outside the token blocks.
   5. Purple is an accent, never a neutral. Structure is grey.

   CONTENTS
   --------
    1. Fonts
    2. Tokens - light
    3. Tokens - dark
    4. Role chrome accents
    5. Base and typography
    6. Chrome (first-party shell)
    7. Page structure - header, title, breadcrumbs
    8. Surfaces - card, box, panel, well
    9. Tables and DataTables
   10. Forms and controls
   11. Buttons
   12. Accent engine - badges, alerts, callouts, progress
   13. Navigation - tabs, pills, pagination
   14. Overlays - dropdown, modal, tooltip, popover
   15. Data display - stat tiles, key/value, empty states
   16. Page components - login, account, dashboard, sys, health
   17. Utilities
   18. Print and reduced motion
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   Inter Variable is self-hosted via @fontsource-variable/inter and copied by
   gulp to /assets/fonts/inter/. The legacy 'Inter UI' faces are retained as
   a fallback so the app renders correctly before `npm install` is run.
   ========================================================================== */

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    src: url('/assets/fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    src: url('/assets/fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-display: swap;
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    src: url('/assets/fonts/inter/inter-latin-wght-italic.woff2') format('woff2-variations');
}

/* Legacy fallback. Remove once Inter Variable is confirmed deployed. */
@font-face {
    font-display: swap;
    font-family: 'Inter UI';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/interui/Inter-UI-Regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter UI';
    font-style: italic;
    font-weight: 400;
    src: url('/assets/fonts/interui/Inter-UI-Italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter UI';
    font-style: normal;
    font-weight: 600 700;
    src: url('/assets/fonts/interui/Inter-UI-Bold.woff2') format('woff2');
}

/* Branded display face. Login and marketing entry points only. */
@font-face {
    font-display: swap;
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/exo2/exo-2-v10-latin-ext_latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/exo2/exo-2-v10-latin-ext_latin-700.woff2') format('woff2');
}

/* Monospace for codes, identifiers and amounts. */
@font-face {
    font-display: swap;
    font-family: 'Source Code Pro';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/source-code-pro/source-code-pro-v11-latin-regular.woff2') format('woff2');
}

/* Application icon font (grape mark and related glyphs). */
@font-face {
    font-display: block;
    font-family: 'grapevine';
    font-style: normal;
    font-weight: normal;
    src: url('/assets/fonts/grapevine/grapevine.woff') format('woff'),
         url('/assets/fonts/grapevine/grapevine.ttf') format('truetype');
}

/* ==========================================================================
   2. TOKENS - LIGHT
   `:root` is light by default. Dark is applied by an explicit
   html[data-theme="dark"], which _header.inc emits from the gv_theme cookie.
   ========================================================================== */

:root,
:root[data-theme='light'] {
    color-scheme: light;

    /* --- Neutral scale. Structure, text, borders, backgrounds. No hue. --- */
    --gv-neutral-0: #ffffff;
    --gv-neutral-25: #fcfcfd;
    --gv-neutral-50: #f7f7f8;
    --gv-neutral-100: #eff0f1;
    --gv-neutral-200: #e3e4e6;
    --gv-neutral-300: #cbccd0;
    --gv-neutral-400: #a0a2a8;
    --gv-neutral-500: #74767d;
    --gv-neutral-600: #565860;
    --gv-neutral-700: #3f4148;
    --gv-neutral-800: #2a2c32;
    --gv-neutral-900: #1a1b1f;
    --gv-neutral-950: #0f1013;

    /* --- Grape scale. Brand and interaction ONLY. Never structure. --- */
    --gv-purple-50: #f8f3f9;
    --gv-purple-100: #ede2ef;
    --gv-purple-200: #dac6de;
    --gv-purple-300: #c2a2c8;
    --gv-purple-400: #a575ae;
    --gv-purple-500: #783484;
    --gv-purple-600: #672c71;
    --gv-purple-700: #54245c;
    --gv-purple-800: #421c48;
    --gv-purple-900: #2a142e;
    --gv-purple-950: #200924;

    /* --- Text --- */
    --gv-color-text: var(--gv-neutral-900);
    --gv-color-text-strong: var(--gv-neutral-950);
    --gv-color-text-muted: var(--gv-neutral-600);
    --gv-color-text-subtle: var(--gv-neutral-500);
    --gv-color-text-inverse: var(--gv-neutral-0);

    /* --- Surfaces --- */
    --gv-color-background: var(--gv-neutral-100);
    --gv-color-surface: var(--gv-neutral-0);
    --gv-color-surface-subtle: var(--gv-neutral-50);
    --gv-color-surface-sunken: var(--gv-neutral-100);
    --gv-color-surface-raised: var(--gv-neutral-0);
    --gv-color-surface-glass: rgba(255, 255, 255, 0.96);

    /* --- Borders --- */
    --gv-color-border: var(--gv-neutral-200);
    --gv-color-border-strong: var(--gv-neutral-300);
    --gv-color-control-border: var(--gv-neutral-300);
    --gv-color-divider: var(--gv-neutral-100);

    /* --- Brand and primary interaction --- */
    --gv-color-brand: var(--gv-purple-500);
    --gv-color-brand-dark: var(--gv-purple-900);
    --gv-color-primary: var(--gv-purple-500);
    --gv-color-primary-hover: var(--gv-purple-600);
    --gv-color-primary-active: var(--gv-purple-700);
    --gv-color-primary-text: var(--gv-purple-500);
    --gv-color-primary-soft: var(--gv-purple-50);
    --gv-color-primary-border: var(--gv-purple-200);
    --gv-color-on-primary: #ffffff;
    --gv-color-on-brand: #ffffff;
    --gv-color-primary-overlay: rgba(120, 52, 132, 0.95);
    --gv-color-link: var(--gv-purple-500);
    --gv-color-link-hover: var(--gv-purple-700);
    --gv-color-focus: var(--gv-purple-500);
    --gv-color-selected-bg: var(--gv-purple-50);
    --gv-color-selected-border: var(--gv-purple-300);

    /* --- Semantic accents. Seven-token contract each:
           base / hover / active / text / soft / border / on-*  --- */
    --gv-color-default: var(--gv-neutral-700);
    --gv-color-default-hover: var(--gv-neutral-800);
    --gv-color-default-active: var(--gv-neutral-900);
    --gv-color-default-text: var(--gv-neutral-700);
    --gv-color-default-soft: var(--gv-neutral-100);
    --gv-color-default-border: var(--gv-neutral-300);
    --gv-color-on-default: #ffffff;

    --gv-color-secondary: var(--gv-purple-600);
    --gv-color-secondary-hover: var(--gv-purple-700);
    --gv-color-secondary-active: var(--gv-purple-800);
    --gv-color-secondary-text: var(--gv-purple-600);
    --gv-color-secondary-soft: var(--gv-purple-50);
    --gv-color-secondary-border: var(--gv-purple-200);
    --gv-color-on-secondary: #ffffff;

    --gv-color-success: #18794e;
    --gv-color-success-hover: #11633f;
    --gv-color-success-active: #0d4f34;
    --gv-color-success-text: #146742;
    --gv-color-success-soft: #e9f7ef;
    --gv-color-success-border: #9fd6b9;
    --gv-color-on-success: #ffffff;

    --gv-color-warning: #8a5b00;
    --gv-color-warning-hover: #704900;
    --gv-color-warning-active: #593900;
    --gv-color-warning-text: #7a5000;
    --gv-color-warning-soft: #fff4ce;
    --gv-color-warning-border: #e4c45e;
    --gv-color-on-warning: #ffffff;

    --gv-color-danger: #b42318;
    --gv-color-danger-hover: #941b12;
    --gv-color-danger-active: #75160f;
    --gv-color-danger-text: #a81f15;
    --gv-color-danger-soft: #fdecea;
    --gv-color-danger-border: #e9a29c;
    --gv-color-on-danger: #ffffff;

    --gv-color-info: #1769aa;
    --gv-color-info-hover: #11588f;
    --gv-color-info-active: #0d4672;
    --gv-color-info-text: #155f9b;
    --gv-color-info-soft: #e8f2fb;
    --gv-color-info-border: #9fc6e6;
    --gv-color-on-info: #ffffff;

    /* `danger` is action-oriented, `error` is message-oriented. Same palette. */
    --gv-color-error: var(--gv-color-danger);
    --gv-color-error-hover: var(--gv-color-danger-hover);
    --gv-color-error-active: var(--gv-color-danger-active);
    --gv-color-error-text: var(--gv-color-danger-text);
    --gv-color-error-soft: var(--gv-color-danger-soft);
    --gv-color-error-border: var(--gv-color-danger-border);
    --gv-color-on-error: var(--gv-color-on-danger);

    /* --- Chrome: sidebar, top bar, logo block. --- */
    --gv-chrome-bg: var(--gv-neutral-25);
    --gv-chrome-bg-subtle: var(--gv-neutral-50);
    --gv-chrome-fg: var(--gv-neutral-700);
    --gv-chrome-fg-muted: var(--gv-neutral-500);
    --gv-chrome-border: var(--gv-neutral-200);
    --gv-chrome-hover-bg: var(--gv-neutral-50);
    --gv-chrome-active-bg: var(--gv-neutral-100);
    --gv-chrome-active-fg: var(--gv-neutral-950);
    --gv-chrome-accent: var(--gv-color-primary);

    /* --- Typography --- */
    --gv-font-sans: 'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --gv-font-display: 'Exo 2', var(--gv-font-sans);
    --gv-font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo,
        Monaco, Consolas, 'Liberation Mono', monospace;

    --gv-font-size-xs: 11px;
    --gv-font-size-sm: 12px;
    --gv-font-size-md: 13px;
    --gv-font-size-lg: 15px;
    --gv-font-size-xl: 17px;
    --gv-font-size-2xl: 20px;
    --gv-font-size-3xl: 24px;
    --gv-font-size-4xl: 30px;

    --gv-font-weight-regular: 400;
    --gv-font-weight-medium: 500;
    --gv-font-weight-semibold: 600;
    --gv-font-weight-bold: 700;

    --gv-line-height-tight: 1.25;
    --gv-line-height-normal: 1.5;
    --gv-line-height-relaxed: 1.65;

    /* --- Spacing. 4px rhythm. --- */
    --gv-space-1: 4px;
    --gv-space-2: 8px;
    --gv-space-3: 12px;
    --gv-space-4: 16px;
    --gv-space-5: 20px;
    --gv-space-6: 24px;
    --gv-space-7: 32px;
    --gv-space-8: 40px;
    --gv-space-9: 48px;

    /* Component density. Overridden by .gv-comfortable. */
    --gv-density-control-height: 30px;
    --gv-density-control-padding-y: 5px;
    --gv-density-control-padding-x: 10px;
    --gv-density-cell-padding-y: 7px;
    --gv-density-cell-padding-x: 10px;
    --gv-density-card-padding: var(--gv-space-4);

    /* --- Shape --- */
    --gv-radius-sm: 3px;
    --gv-radius-md: 6px;
    --gv-radius-lg: 10px;
    --gv-radius-pill: 999px;

    /* --- Depth. Three shadows. Floating layers only. --- */
    --gv-shadow-dropdown: 0 4px 12px rgba(15, 16, 19, 0.10), 0 1px 3px rgba(15, 16, 19, 0.06);
    --gv-shadow-modal: 0 16px 48px rgba(15, 16, 19, 0.18), 0 4px 12px rgba(15, 16, 19, 0.10);
    --gv-shadow-popover: 0 8px 24px rgba(15, 16, 19, 0.12), 0 2px 6px rgba(15, 16, 19, 0.08);
    --gv-shadow-focus-ring: 0 0 0 3px rgba(120, 52, 132, 0.28);
    --gv-backdrop: rgba(15, 16, 19, 0.5);

    /* --- Motion --- */
    --gv-transition-fast: 120ms ease-out;
    --gv-transition-normal: 300ms ease-in-out;
    --gv-transition-medium: 200ms ease-out;

    /* DataTables 2.x paints selected rows with
       `box-shadow: inset 0 0 0 9999px rgb(var(--dt-row-selected))` on each
       cell, which overrides any background we set on the row. It expects a
       bare "r, g, b" triple, so these are stated as components, not hex. */
    --dt-row-selected: 248, 243, 249;
    --dt-row-selected-text: 26, 27, 31;
    --dt-row-hover: 247, 247, 248;

    /* --- Deprecated aliases. Kept so existing markup does not break.
           Do not use in new code. --- */
    --gv-surface: var(--gv-color-surface);
    --gv-surface-subtle: var(--gv-color-surface-subtle);
    --gv-text-muted: var(--gv-color-text-muted);
    --gv-shadow-card: none;
    --gv-shadow-raised: var(--gv-shadow-modal);
}

/* ==========================================================================
   3. TOKENS - DARK
   Neutral darks. Purple stays an accent at night too.
   Primary lightens to purple-400 with dark foreground -- brand purple at
   #783484 sits at only ~2.3:1 against a near-black surface and would not
   read as a control.
   ========================================================================== */

:root[data-theme='dark'] {
    color-scheme: dark;

    --gv-color-text: #f2f3f4;
    --gv-color-text-strong: #ffffff;
    --gv-color-text-muted: var(--gv-neutral-400);
    --gv-color-text-subtle: #8a8c93;
    --gv-color-text-inverse: var(--gv-neutral-950);

    --gv-color-background: #0f1013;
    --gv-color-surface: #1a1b1f;
    --gv-color-surface-subtle: #16171a;
    --gv-color-surface-sunken: #0b0c0e;
    --gv-color-surface-raised: #24262b;
    --gv-color-surface-glass: rgba(26, 27, 31, 0.96);

    --gv-color-border: #35373d;
    --gv-color-border-strong: #4a4d55;
    --gv-color-control-border: #4a4d55;
    --gv-color-divider: #2a2c32;

    --gv-color-brand: var(--gv-purple-400);
    --gv-color-brand-dark: #0f1013;
    --gv-color-primary: var(--gv-purple-400);
    --gv-color-primary-hover: #b98fc1;
    --gv-color-primary-active: var(--gv-purple-300);
    --gv-color-primary-text: var(--gv-purple-300);
    --gv-color-primary-soft: rgba(165, 117, 174, 0.16);
    --gv-color-primary-border: rgba(165, 117, 174, 0.45);
    --gv-color-on-primary: #16171a;
    --gv-color-on-brand: #16171a;
    --gv-color-primary-overlay: rgba(26, 27, 31, 0.96);
    --gv-color-link: var(--gv-purple-300);
    --gv-color-link-hover: #d8c2dc;
    --gv-color-focus: var(--gv-purple-300);
    --gv-color-selected-bg: rgba(165, 117, 174, 0.14);
    --gv-color-selected-border: var(--gv-purple-400);

    --gv-color-default: var(--gv-neutral-300);
    --gv-color-default-hover: #dcdde0;
    --gv-color-default-active: var(--gv-neutral-400);
    --gv-color-default-text: var(--gv-neutral-300);
    --gv-color-default-soft: rgba(203, 204, 208, 0.12);
    --gv-color-default-border: #55575e;
    --gv-color-on-default: #16171a;

    --gv-color-secondary: var(--gv-purple-300);
    --gv-color-secondary-hover: #d5bdd9;
    --gv-color-secondary-active: var(--gv-purple-400);
    --gv-color-secondary-text: var(--gv-purple-300);
    --gv-color-secondary-soft: rgba(194, 162, 200, 0.14);
    --gv-color-secondary-border: rgba(194, 162, 200, 0.4);
    --gv-color-on-secondary: #16171a;

    --gv-color-success: #55d98d;
    --gv-color-success-hover: #6ee3a1;
    --gv-color-success-active: #3cc477;
    --gv-color-success-text: #6ee3a1;
    --gv-color-success-soft: rgba(41, 168, 99, 0.16);
    --gv-color-success-border: #347f55;
    --gv-color-on-success: #06180f;

    --gv-color-warning: #ffd166;
    --gv-color-warning-hover: #ffdc85;
    --gv-color-warning-active: #e6b84d;
    --gv-color-warning-text: #ffdc85;
    --gv-color-warning-soft: rgba(218, 161, 35, 0.16);
    --gv-color-warning-border: #8d6b22;
    --gv-color-on-warning: #1f1704;

    --gv-color-danger: #ff7b72;
    --gv-color-danger-hover: #ff968f;
    --gv-color-danger-active: #e9655d;
    --gv-color-danger-text: #ff968f;
    --gv-color-danger-soft: rgba(224, 76, 66, 0.16);
    --gv-color-danger-border: #93443e;
    --gv-color-on-danger: #200705;

    --gv-color-info: #65b7ff;
    --gv-color-info-hover: #86c7ff;
    --gv-color-info-active: #4aa3f0;
    --gv-color-info-text: #86c7ff;
    --gv-color-info-soft: rgba(56, 139, 217, 0.16);
    --gv-color-info-border: #2f6491;
    --gv-color-on-info: #04141f;

    --gv-color-error: var(--gv-color-danger);
    --gv-color-error-hover: var(--gv-color-danger-hover);
    --gv-color-error-active: var(--gv-color-danger-active);
    --gv-color-error-text: var(--gv-color-danger-text);
    --gv-color-error-soft: var(--gv-color-danger-soft);
    --gv-color-error-border: var(--gv-color-danger-border);
    --gv-color-on-error: var(--gv-color-on-danger);

    --gv-chrome-bg: #16171a;
    --gv-chrome-bg-subtle: #1a1b1f;
    --gv-chrome-fg: var(--gv-neutral-300);
    --gv-chrome-fg-muted: var(--gv-neutral-500);
    --gv-chrome-border: #2a2c32;
    --gv-chrome-hover-bg: #1f2125;
    --gv-chrome-active-bg: #24262b;
    --gv-chrome-active-fg: #ffffff;

    --gv-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
    --gv-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
    --gv-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
    --gv-shadow-focus-ring: 0 0 0 3px rgba(194, 162, 200, 0.32);
    --gv-backdrop: rgba(0, 0, 0, 0.65);

    --dt-row-selected: 42, 36, 48;
    --dt-row-selected-text: 242, 243, 244;
    --dt-row-hover: 31, 33, 37;
}

/* OS preference is the default when the user has expressed no choice.
   The cookie-driven data-theme attribute always wins over this. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) {
        color-scheme: dark;

        --gv-color-text: #f2f3f4;
        --gv-color-text-strong: #ffffff;
        --gv-color-text-muted: var(--gv-neutral-400);
        --gv-color-text-subtle: #8a8c93;
        --gv-color-text-inverse: var(--gv-neutral-950);

        --gv-color-background: #0f1013;
        --gv-color-surface: #1a1b1f;
        --gv-color-surface-subtle: #16171a;
        --gv-color-surface-sunken: #0b0c0e;
        --gv-color-surface-raised: #24262b;
        --gv-color-surface-glass: rgba(26, 27, 31, 0.96);

        --gv-color-border: #35373d;
        --gv-color-border-strong: #4a4d55;
        --gv-color-control-border: #4a4d55;
        --gv-color-divider: #2a2c32;

        --gv-color-brand: var(--gv-purple-400);
        --gv-color-brand-dark: #0f1013;
        --gv-color-primary: var(--gv-purple-400);
        --gv-color-primary-hover: #b98fc1;
        --gv-color-primary-active: var(--gv-purple-300);
        --gv-color-primary-text: var(--gv-purple-300);
        --gv-color-primary-soft: rgba(165, 117, 174, 0.16);
        --gv-color-primary-border: rgba(165, 117, 174, 0.45);
        --gv-color-on-primary: #16171a;
        --gv-color-on-brand: #16171a;
        --gv-color-primary-overlay: rgba(26, 27, 31, 0.96);
        --gv-color-link: var(--gv-purple-300);
        --gv-color-link-hover: #d8c2dc;
        --gv-color-focus: var(--gv-purple-300);
        --gv-color-selected-bg: rgba(165, 117, 174, 0.14);
        --gv-color-selected-border: var(--gv-purple-400);

        --gv-color-default: var(--gv-neutral-300);
        --gv-color-default-hover: #dcdde0;
        --gv-color-default-active: var(--gv-neutral-400);
        --gv-color-default-text: var(--gv-neutral-300);
        --gv-color-default-soft: rgba(203, 204, 208, 0.12);
        --gv-color-default-border: #55575e;
        --gv-color-on-default: #16171a;

        --gv-color-secondary: var(--gv-purple-300);
        --gv-color-secondary-hover: #d5bdd9;
        --gv-color-secondary-active: var(--gv-purple-400);
        --gv-color-secondary-text: var(--gv-purple-300);
        --gv-color-secondary-soft: rgba(194, 162, 200, 0.14);
        --gv-color-secondary-border: rgba(194, 162, 200, 0.4);
        --gv-color-on-secondary: #16171a;

        --gv-color-success: #55d98d;
        --gv-color-success-hover: #6ee3a1;
        --gv-color-success-active: #3cc477;
        --gv-color-success-text: #6ee3a1;
        --gv-color-success-soft: rgba(41, 168, 99, 0.16);
        --gv-color-success-border: #347f55;
        --gv-color-on-success: #06180f;

        --gv-color-warning: #ffd166;
        --gv-color-warning-hover: #ffdc85;
        --gv-color-warning-active: #e6b84d;
        --gv-color-warning-text: #ffdc85;
        --gv-color-warning-soft: rgba(218, 161, 35, 0.16);
        --gv-color-warning-border: #8d6b22;
        --gv-color-on-warning: #1f1704;

        --gv-color-danger: #ff7b72;
        --gv-color-danger-hover: #ff968f;
        --gv-color-danger-active: #e9655d;
        --gv-color-danger-text: #ff968f;
        --gv-color-danger-soft: rgba(224, 76, 66, 0.16);
        --gv-color-danger-border: #93443e;
        --gv-color-on-danger: #200705;

        --gv-color-info: #65b7ff;
        --gv-color-info-hover: #86c7ff;
        --gv-color-info-active: #4aa3f0;
        --gv-color-info-text: #86c7ff;
        --gv-color-info-soft: rgba(56, 139, 217, 0.16);
        --gv-color-info-border: #2f6491;
        --gv-color-on-info: #04141f;

        --gv-color-error: var(--gv-color-danger);
        --gv-color-error-hover: var(--gv-color-danger-hover);
        --gv-color-error-active: var(--gv-color-danger-active);
        --gv-color-error-text: var(--gv-color-danger-text);
        --gv-color-error-soft: var(--gv-color-danger-soft);
        --gv-color-error-border: var(--gv-color-danger-border);
        --gv-color-on-error: var(--gv-color-on-danger);

        --gv-chrome-bg: #16171a;
        --gv-chrome-bg-subtle: #1a1b1f;
        --gv-chrome-fg: var(--gv-neutral-300);
        --gv-chrome-fg-muted: var(--gv-neutral-500);
        --gv-chrome-border: #2a2c32;
        --gv-chrome-hover-bg: #1f2125;
        --gv-chrome-active-bg: #24262b;
        --gv-chrome-active-fg: #ffffff;

        --gv-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
        --gv-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
        --gv-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
        --gv-shadow-focus-ring: 0 0 0 3px rgba(194, 162, 200, 0.32);
        --gv-backdrop: rgba(0, 0, 0, 0.65);

        --dt-row-selected: 42, 36, 48;
        --dt-row-selected-text: 242, 243, 244;
        --dt-row-hover: 31, 33, 37;
    }
}

/* ==========================================================================
   4. ROLE CHROME ACCENTS
   _header.inc emits
   skin-blue | skin-purple | skin-green | skin-yellow; here those classes set
   one accent token instead of repainting the whole shell.
   ========================================================================== */

body.skin-blue,
body.skin-blue-light { --gv-chrome-accent: #1769aa; }
body.skin-purple,
body.skin-purple-light { --gv-chrome-accent: var(--gv-purple-500); }
body.skin-green,
body.skin-green-light { --gv-chrome-accent: #18794e; }
body.skin-yellow,
body.skin-yellow-light { --gv-chrome-accent: #8a5b00; }
body.skin-red,
body.skin-red-light { --gv-chrome-accent: #b42318; }
body.skin-black,
body.skin-black-light { --gv-chrome-accent: var(--gv-neutral-700); }

:root[data-theme='dark'] body.skin-blue,
:root[data-theme='dark'] body.skin-blue-light { --gv-chrome-accent: #65b7ff; }
:root[data-theme='dark'] body.skin-purple,
:root[data-theme='dark'] body.skin-purple-light { --gv-chrome-accent: var(--gv-purple-300); }
:root[data-theme='dark'] body.skin-green,
:root[data-theme='dark'] body.skin-green-light { --gv-chrome-accent: #55d98d; }
:root[data-theme='dark'] body.skin-yellow,
:root[data-theme='dark'] body.skin-yellow-light { --gv-chrome-accent: #ffd166; }
:root[data-theme='dark'] body.skin-red,
:root[data-theme='dark'] body.skin-red-light { --gv-chrome-accent: #ff7b72; }
:root[data-theme='dark'] body.skin-black,
:root[data-theme='dark'] body.skin-black-light { --gv-chrome-accent: var(--gv-neutral-300); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-blue { --gv-chrome-accent: #65b7ff; }
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-purple { --gv-chrome-accent: var(--gv-purple-300); }
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-green { --gv-chrome-accent: #55d98d; }
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-yellow { --gv-chrome-accent: #ffd166; }
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-red { --gv-chrome-accent: #ff7b72; }
    :root:not([data-theme='light']):not([data-theme='dark']) body.skin-black { --gv-chrome-accent: var(--gv-neutral-300); }
}

/* ==========================================================================
   5. BASE AND TYPOGRAPHY
   ========================================================================== */

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

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    font-size: var(--gv-font-size-md);
    min-height: 100%;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background-color: var(--gv-color-background);
    color: var(--gv-color-text);
    font-family: var(--gv-font-sans);
    font-weight: var(--gv-font-weight-regular);
    line-height: var(--gv-line-height-normal);
    overflow-x: hidden;
    overflow-y: auto;
}

/* Comfortable density. Opt in per page or per region on form-heavy screens. */
.gv-comfortable {
    --gv-density-control-height: 36px;
    --gv-density-control-padding-y: 8px;
    --gv-density-control-padding-x: 12px;
    --gv-density-cell-padding-y: 10px;
    --gv-density-cell-padding-x: 14px;
    --gv-density-card-padding: var(--gv-space-6);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--gv-color-text-strong);
    font-family: var(--gv-font-sans);
    font-weight: var(--gv-font-weight-semibold);
    line-height: var(--gv-line-height-tight);
    margin: 0 0 var(--gv-space-3);
}

h1, .h1 { font-size: var(--gv-font-size-3xl); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--gv-font-size-2xl); letter-spacing: -0.015em; }
h3, .h3 { font-size: var(--gv-font-size-xl); letter-spacing: -0.01em; }
h4, .h4 { font-size: var(--gv-font-size-lg); }
h5, .h5 { font-size: var(--gv-font-size-md); }
h6, .h6 {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

p {
    margin: 0 0 var(--gv-space-3);
}

small,
.small {
    font-size: var(--gv-font-size-sm);
}

strong,
b {
    font-weight: var(--gv-font-weight-semibold);
}

hr {
    border: 0;
    border-top: 1px solid var(--gv-color-border);
    margin: var(--gv-space-5) 0;
}

a {
    color: var(--gv-color-link);
    text-decoration: none;
    transition: color var(--gv-transition-fast);
}

a:hover,
a:focus {
    color: var(--gv-color-link-hover);
    text-decoration: none;
}

/* Links in running prose must be underlined. Colour alone is not enough.
   Scoped deliberately narrowly: a bare `li > a` would match the sidebar,
   pagination, tabs, pills and every dropdown item. Use .gv-prose for
   body copy that contains lists. */
p > a,
.gv-prose a,
.gv-prose li > a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* One focus treatment, everywhere. Never remove it without a replacement. */
:focus-visible {
    outline: 2px solid var(--gv-color-focus);
    outline-offset: 2px;
}

::selection {
    background: var(--gv-color-selected-bg);
    color: var(--gv-color-text-strong);
}

code,
kbd,
samp,
pre {
    font-family: var(--gv-font-mono);
    font-size: 0.92em;
}

code {
    background: var(--gv-color-surface-sunken);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text);
    padding: 0.15em 0.35em;
}

pre {
    background: var(--gv-color-surface-sunken);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text);
    padding: var(--gv-space-3);
}

pre code {
    background: none;
    padding: 0;
}

/* Numerals align in columns. Critical for amount and quantity columns. */
.gv-numeric,
table td.gv-numeric,
.gv-table td,
table.table td,
table.dataTable td {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.gv-mono {
    font-family: var(--gv-font-mono);
}

.text-muted {
    color: var(--gv-color-text-muted) !important;
}

/* ==========================================================================
   6. CHROME - FIRST-PARTY APPLICATION SHELL
   This section owns both layout and appearance. Behaviour is implemented by
   webroot/assets/js/grapevine-shell.js with gv-* state classes.
   ========================================================================== */

html,
body {
    min-height: 100%;
}

body.gv-shell {
    overflow-x: hidden;
}

.wrapper {
    background: var(--gv-color-background);
    min-height: 100vh;
    position: relative;
}

.wrapper::before,
.wrapper::after {
    content: ' ';
    display: table;
}

.wrapper::after {
    clear: both;
}

.content-wrapper,
.right-side,
.main-footer {
    margin-left: 230px;
    position: relative;
    transition: margin-left var(--gv-transition-normal), transform var(--gv-transition-normal);
}

.content-wrapper,
.right-side {
    background-color: var(--gv-color-background);
    color: var(--gv-color-text);
    min-height: calc(100vh - 104px);
    /* Keep this stacking context at `auto`: modals live here, while Bootstrap
       appends their backdrops to body. */
}

/* --- Top bar --- */

.main-header {
    border-bottom: 1px solid var(--gv-chrome-border);
    max-height: none;
    min-height: 50px;
    position: relative;
    z-index: 1030;
}

.main-header .navbar,
.main-header > .navbar {
    background-color: var(--gv-chrome-bg);
    border: 0;
    border-radius: 0;
    display: block;
    margin: 0 0 0 230px;
    min-height: 50px;
    padding: 0;
    transition: margin-left var(--gv-transition-normal);
}

/* The role accent lives here: a hairline of colour above the top bar. */
.main-header::before {
    background: var(--gv-chrome-accent, var(--gv-color-primary));
    content: '';
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1001;
}

.main-header .logo {
    background-color: var(--gv-chrome-bg);
    border-bottom: 0;
    border-right: 1px solid var(--gv-chrome-border);
    color: var(--gv-color-text-strong);
    font-family: var(--gv-font-sans);
    font-size: var(--gv-font-size-xl);
    font-weight: var(--gv-font-weight-semibold);
    display: block;
    float: left;
    height: 50px;
    letter-spacing: -0.02em;
    line-height: 50px;
    overflow: hidden;
    padding: 0 15px;
    text-align: center;
    transition: width var(--gv-transition-normal);
    width: 230px;
}

.main-header .logo:hover {
    background-color: var(--gv-chrome-hover-bg);
}

.main-header .logo .logo-lg,
.main-header .logo .logo-mini {
    align-items: center;
    height: 50px;
    justify-content: center;
}

.main-header .logo .logo-lg {
    display: flex;
}

.main-header .logo .logo-mini {
    display: none;
}

.main-header .logo .gv-header-logo {
    display: block;
    height: auto;
    max-height: 28px;
    max-width: 170px;
    object-fit: contain;
    width: auto;
}

.main-header .logo .logo-mini .gv-header-logo {
    max-height: 30px;
    max-width: 30px;
}

.main-header .logo .gv-header-logo--dark {
    display: none;
}

:root[data-theme='dark'] .main-header .logo .gv-header-logo--light {
    display: none;
}

:root[data-theme='dark'] .main-header .logo .gv-header-logo--dark {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) .main-header .logo .gv-header-logo--light {
        display: none;
    }

    :root:not([data-theme='light']):not([data-theme='dark']) .main-header .logo .gv-header-logo--dark {
        display: block;
    }
}

.main-header .navbar .nav > li > a,
.main-header .navbar-custom-menu .nav > li > a {
    color: var(--gv-chrome-fg);
    display: block;
    line-height: 26px;
    padding: var(--gv-space-3) var(--gv-space-4);
    position: relative;
    transition: background-color var(--gv-transition-fast), color var(--gv-transition-fast);
}

.main-header .navbar-custom-menu {
    float: right;
}

.navbar-custom-menu > .navbar-nav {
    flex-direction: row;
    margin: 0;
}

.navbar-custom-menu > .navbar-nav > li {
    position: relative;
}

.navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
    left: auto;
    position: absolute;
    right: 0;
}

.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus {
    background: var(--gv-chrome-hover-bg);
    color: var(--gv-chrome-active-fg);
}

.main-header .navbar .sidebar-toggle {
    background: transparent;
    border: 0;
    color: var(--gv-chrome-fg);
    cursor: pointer;
    float: left;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    height: 50px;
    line-height: 26px;
    margin: 0;
    padding: var(--gv-space-3) var(--gv-space-4);
}

.main-header .navbar .sidebar-toggle::before {
    content: '\f0c9';
}

.main-header .navbar .sidebar-toggle:hover {
    background: var(--gv-chrome-hover-bg);
    color: var(--gv-chrome-active-fg);
}

.main-header .navbar .nav > li > a > .label,
.main-header .navbar .nav > li > a > .badge {
    background: var(--gv-color-danger);
    border-radius: var(--gv-radius-pill);
    color: var(--gv-color-on-danger);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-semibold);
    padding: 2px 6px;
}

/* Badge centring fix carried forward from custom.css. */
.navbar-custom-menu > .navbar-nav > li.dropdown > a.dropdown-toggle > span.badge {
    left: 50%;
    margin-top: -16px;
    position: absolute;
    top: 50%;
}

/* --- Sidebar --- */

.main-sidebar,
.left-side {
    background-color: var(--gv-chrome-bg);
    border-right: 1px solid var(--gv-chrome-border);
    left: 0;
    min-height: 100%;
    padding-top: 50px;
    position: absolute;
    top: 0;
    transition: transform var(--gv-transition-normal), width var(--gv-transition-normal);
    width: 230px;
    z-index: 810;
}

.sidebar {
    padding-bottom: var(--gv-space-7);
}

.sidebar span.fa-stack {
    height: 14px;
    width: 20px;
}

.sidebar span.fa-stack i:nth-child(1) {
    margin-left: -0.5em;
    margin-top: -1em;
}

.sidebar span.fa-stack i:nth-child(2) {
    margin-top: -0.4em;
}

.sidebar .search-result {
    background-color: var(--gv-chrome-active-bg);
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
}

.sidebar-menu:hover,
.sidebar-menu:focus-within {
    overflow: visible;
}

.sidebar-menu > li {
    margin: 0;
    padding: 0;
    position: relative;
}

.sidebar-menu > li > a,
.sidebar-menu > li > .gv-treeview-toggle {
    align-items: center;
    background: transparent;
    border-left: 3px solid transparent;
    border-bottom: 0;
    border-right: 0;
    border-top: 0;
    color: var(--gv-chrome-fg);
    cursor: pointer;
    display: flex;
    font-size: var(--gv-font-size-md);
    font-weight: var(--gv-font-weight-medium);
    line-height: 24px;
    padding: 9px var(--gv-space-4) 9px 13px;
    position: relative;
    text-align: left;
    transition: background-color var(--gv-transition-fast), color var(--gv-transition-fast);
    width: 100%;
}

.sidebar-menu > li > a:hover,
.sidebar-menu > li > .gv-treeview-toggle:hover,
.sidebar-menu > li:hover > a,
.sidebar-menu > li:hover > .gv-treeview-toggle,
.sidebar-menu > li.gv-treeview-open > .gv-treeview-toggle {
    background: var(--gv-chrome-hover-bg);
    color: var(--gv-chrome-active-fg);
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.active:hover > a {
    background: var(--gv-chrome-active-bg);
    border-left-color: var(--gv-chrome-accent, var(--gv-color-primary));
    color: var(--gv-chrome-active-fg);
    font-weight: var(--gv-font-weight-semibold);
}

.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .fab,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .glyphicon,
.sidebar-menu > li > a > .ion {
    color: var(--gv-chrome-fg-muted);
    width: 20px;
}

.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
.sidebar-menu > li.active > a > .fab,
.sidebar-menu > li.active > a > .far {
    color: var(--gv-chrome-accent, var(--gv-color-primary));
}

.sidebar-menu > li > .gv-treeview-toggle > .fa,
.sidebar-menu > li > .gv-treeview-toggle > .fas,
.sidebar-menu > li > .gv-treeview-toggle > .fab,
.sidebar-menu > li > .gv-treeview-toggle > .far {
    color: var(--gv-chrome-fg-muted);
    flex: 0 0 20px;
    width: 20px;
}

.sidebar-menu li > a > img,
.sidebar-menu li > .gv-treeview-toggle > img {
    height: 14px;
    object-fit: contain;
    width: 20px;
}

.sidebar-menu li > a > .icon,
.sidebar-menu li > .gv-treeview-toggle > .icon {
    display: inline-block;
    fill: var(--gv-chrome-fg-muted);
    height: 14px;
    width: 20px;
}

.sidebar-menu .gv-treeview-menu {
    background: var(--gv-chrome-bg-subtle);
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    padding-left: 0;
}

.sidebar-menu .gv-treeview-open > .gv-treeview-menu {
    display: block;
}

.sidebar-menu .gv-treeview-menu > li > a {
    color: var(--gv-chrome-fg-muted);
    display: block;
    font-size: var(--gv-font-size-sm);
    padding: 6px 5px 6px 40px;
}

.sidebar-menu .gv-treeview-menu > li > a:hover {
    color: var(--gv-chrome-active-fg);
}

.sidebar-menu .gv-treeview-menu > li.active > a {
    color: var(--gv-chrome-accent, var(--gv-color-primary));
    font-weight: var(--gv-font-weight-semibold);
}

.sidebar-menu .float-right-container {
    margin-left: auto;
    transition: transform var(--gv-transition-fast);
}

.sidebar-menu .gv-treeview-open > .gv-treeview-toggle > .float-right-container {
    transform: rotate(-90deg);
}

@media (min-width: 768px) {
    body.gv-sidebar-collapsed .content-wrapper,
    body.gv-sidebar-collapsed .right-side,
    body.gv-sidebar-collapsed .main-footer {
        margin-left: 50px;
    }

    body.gv-sidebar-collapsed .main-sidebar {
        transform: translate(0, 0);
        width: 50px;
        z-index: 850;
    }

    body.gv-sidebar-collapsed .main-header .logo {
        width: 50px;
    }

    body.gv-sidebar-collapsed .main-header .navbar {
        margin-left: 50px;
    }

    body.gv-sidebar-collapsed .main-header .logo > .logo-mini {
        align-items: center;
        display: flex;
        margin-left: -15px;
        margin-right: -15px;
    }

    body.gv-sidebar-collapsed .main-header .logo > .logo-lg,
    body.gv-sidebar-collapsed .sidebar-form,
    body.gv-sidebar-collapsed .sidebar-menu > li > a > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li > a > .badge,
    body.gv-sidebar-collapsed .sidebar-menu > li > .gv-treeview-toggle > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li > .gv-treeview-toggle > .float-right-container,
    body.gv-sidebar-collapsed .sidebar-menu > li > .gv-treeview-menu,
    body.gv-sidebar-collapsed .sidebar-menu > li.header {
        display: none;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li:hover,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within {
        z-index: 860;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li:hover > a > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > a > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:hover > .gv-treeview-toggle > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > .gv-treeview-toggle > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:hover > .gv-treeview-menu,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > .gv-treeview-menu {
        display: block;
        left: 49px;
        position: absolute;
        background: var(--gv-color-surface-raised);
        border-color: var(--gv-color-border);
        color: var(--gv-color-text);
        width: 220px;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li:hover > a > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > a > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:hover > .gv-treeview-toggle > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > .gv-treeview-toggle > .sidebar-item-label {
        border: 1px solid var(--gv-color-border);
        border-radius: 0 var(--gv-radius-md) var(--gv-radius-md) 0;
        box-shadow: none;
        box-sizing: border-box;
        font-weight: var(--gv-font-weight-semibold);
        height: 42px;
        padding: 11px var(--gv-space-3);
        top: 0;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li.gv-treeview:hover > .gv-treeview-toggle > .sidebar-item-label,
    body.gv-sidebar-collapsed .sidebar-menu > li.gv-treeview:focus-within > .gv-treeview-toggle > .sidebar-item-label {
        border-bottom-right-radius: 0;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li:hover > .gv-treeview-menu,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > .gv-treeview-menu {
        border: 1px solid var(--gv-color-border);
        border-top: 0;
        border-radius: 0 0 var(--gv-radius-md) var(--gv-radius-md);
        box-shadow: none;
        padding: var(--gv-space-1) 0;
        top: 42px;
    }

    body.gv-sidebar-collapsed .sidebar-menu > li:hover > .gv-treeview-menu > li > a,
    body.gv-sidebar-collapsed .sidebar-menu > li:focus-within > .gv-treeview-menu > li > a {
        padding: var(--gv-space-2) var(--gv-space-3);
    }
}

.gv-sidebar-backdrop {
    display: none;
}

@media (max-width: 767.98px) {
    .main-header {
        min-height: 100px;
    }

    .main-header .logo,
    .main-header .navbar {
        float: none;
        margin-left: 0;
        width: 100%;
    }

    .main-sidebar,
    .left-side {
        padding-top: 100px;
        transform: translate(-230px, 0);
    }

    .content-wrapper,
    .right-side,
    .main-footer {
        margin-left: 0;
    }

    body.gv-sidebar-open {
        overflow: hidden;
    }

    body.gv-sidebar-open .main-sidebar {
        transform: translate(0, 0);
    }

    body.gv-sidebar-open .gv-sidebar-backdrop {
        background: var(--gv-backdrop);
        border: 0;
        bottom: 0;
        cursor: pointer;
        display: block;
        left: 0;
        position: fixed;
        right: 0;
        top: 100px;
        z-index: 805;
    }

    .navbar-custom-menu > .navbar-nav > li {
        position: static;
    }

    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        left: auto;
        right: var(--gv-space-3);
    }
}

.sidebar-menu > li.header {
    background: transparent;
    color: var(--gv-chrome-fg-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.08em;
    padding: var(--gv-space-5) var(--gv-space-4) var(--gv-space-2);
    text-transform: uppercase;
}

.sidebar-form {
    border: 0;
    margin: var(--gv-space-3) var(--gv-space-3) var(--gv-space-2);
}

.sidebar-form input[type='text'],
.sidebar-form .btn {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-md);
    box-shadow: none;
    color: var(--gv-color-text);
    height: var(--gv-density-control-height);
}

.user-panel {
    border-bottom: 1px solid var(--gv-chrome-border);
    padding: var(--gv-space-3) var(--gv-space-4);
}

.user-panel > .info,
.user-panel > .info > p {
    color: var(--gv-color-text);
    font-weight: var(--gv-font-weight-semibold);
}

/* --- Footer --- */

.main-footer {
    background: var(--gv-color-surface);
    border-top: 1px solid var(--gv-color-border);
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    padding: var(--gv-space-4);
}

/* ==========================================================================
   7. PAGE STRUCTURE - HEADER, TITLE, BREADCRUMBS
   ========================================================================== */

.content-header {
    background: transparent;
    padding: var(--gv-space-5) var(--gv-space-5) var(--gv-space-3);
    position: relative;
}

.content-header > h1,
.content-header > h2,
.content-header > .h1 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-3xl);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: -0.02em;
    margin: 0;
}

.content-header > h1 > small,
.content-header > h2 > small {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-md);
    font-weight: var(--gv-font-weight-regular);
    margin-left: var(--gv-space-2);
}

h2.page-title,
.gv-page-title {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-3xl);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: -0.02em;
    margin: 0 0 var(--gv-space-2);
}

.gv-page-subtitle {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-lg);
    margin: 0 0 var(--gv-space-5);
    max-width: 68ch;
}

/* Page header block: title, subtitle and actions on one row. */
.gv-page-header {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-4);
    justify-content: space-between;
    margin-bottom: var(--gv-space-5);
}

.gv-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-2);
}

.gv-eyebrow {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.1em;
    margin: 0 0 var(--gv-space-2);
    text-transform: uppercase;
}

.content {
    padding: var(--gv-space-5);
}

/* --- Breadcrumbs --- */

.breadcrumb,
.content-header > .breadcrumb {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    margin: 0;
    padding: 0;
}

.content-header > .breadcrumb {
    position: static;
}

.breadcrumb > li,
.breadcrumb-item {
    color: var(--gv-color-text-muted);
    display: inline-block;
}

.breadcrumb > li > a,
.breadcrumb-item > a {
    color: var(--gv-color-text-muted);
    text-decoration: none;
}

.breadcrumb > li > a:hover,
.breadcrumb-item > a:hover {
    color: var(--gv-color-link);
    text-decoration: none;
}

.breadcrumb > li + li::before,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--gv-color-text-subtle);
    content: '/';
    padding: 0 var(--gv-space-2);
}

.breadcrumb > .active,
.breadcrumb-item.active {
    color: var(--gv-color-text);
    font-weight: var(--gv-font-weight-medium);
}

/* Breadcrumbs sit above the title, not floated into the corner. */
.gv-breadcrumbs {
    margin-bottom: var(--gv-space-2);
}

/* ==========================================================================
   8. SURFACES - CARD, BOX, PANEL, WELL
   .card (Bootstrap 4), .box (legacy) and .panel (Bootstrap 3 leftover) all
   resolve to one visual treatment: flat, hairline-bordered, no drop shadow.
   ========================================================================== */

.card,
.box,
.panel,
.info-box,
.small-box {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    border-top: 1px solid var(--gv-color-border);
    box-shadow: none;
    color: var(--gv-color-text);
    margin-bottom: var(--gv-space-4);
}

.box {
    position: relative;
    width: 100%;
}

.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
    display: none;
}

.card-header,
.box-header,
.panel-heading {
    align-items: center;
    background: transparent;
    border-bottom: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md) var(--gv-radius-md) 0 0;
    color: var(--gv-color-text-strong);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-3);
    justify-content: space-between;
    padding: var(--gv-space-3) var(--gv-density-card-padding);
}

.card-header > .card-title,
.box-header > .box-title,
.panel-heading > .panel-title,
.card-header h3,
.box-header h3,
.card-header h4,
.box-header h4 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-lg);
    font-weight: var(--gv-font-weight-semibold);
    line-height: var(--gv-line-height-tight);
    margin: 0;
}

.card-body,
.box-body,
.panel-body {
    color: var(--gv-color-text);
    display: flow-root;
    padding: var(--gv-density-card-padding);
}

.card-footer,
.box-footer,
.panel-footer {
    background: var(--gv-color-surface-subtle);
    border-top: 1px solid var(--gv-color-border);
    border-radius: 0 0 var(--gv-radius-md) var(--gv-radius-md);
    color: var(--gv-color-text-muted);
    padding: var(--gv-space-3) var(--gv-density-card-padding);
}

.card-title {
    margin-bottom: 0;
}

/* Legacy coloured box variants become a left accent edge, not a fill. */
.box.box-primary { border-top-color: var(--gv-color-border); border-left: 3px solid var(--gv-color-primary); }
.box.box-success { border-top-color: var(--gv-color-border); border-left: 3px solid var(--gv-color-success); }
.box.box-info { border-top-color: var(--gv-color-border); border-left: 3px solid var(--gv-color-info); }
.box.box-warning { border-top-color: var(--gv-color-border); border-left: 3px solid var(--gv-color-warning); }
.box.box-danger { border-top-color: var(--gv-color-border); border-left: 3px solid var(--gv-color-danger); }
.box.box-default { border-top-color: var(--gv-color-border); }

.box-header .box-tools .btn-box-tool {
    color: var(--gv-color-text-muted);
}

.box-header .box-tools .btn-box-tool:hover {
    color: var(--gv-color-text);
}

.box-header > .box-tools {
    margin-left: auto;
}

.box.box-solid > .box-header {
    background: var(--gv-color-surface-subtle);
    color: var(--gv-color-text-strong);
}

/* Loading overlay. */
.box.box-primary > .overlay,
.box > .overlay,
.overlay-wrapper > .overlay {
    background: var(--gv-color-surface-glass);
}

.box > .overlay,
.overlay-wrapper > .overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 50;
}

.box > .overlay > .fa,
.overlay-wrapper > .overlay > .fa {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.well {
    background: var(--gv-color-surface-sunken);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: none;
    color: var(--gv-color-text);
    padding: var(--gv-density-card-padding);
}

.jumbotron {
    background: var(--gv-color-surface-sunken);
    border-radius: var(--gv-radius-lg);
    color: var(--gv-color-text);
}

.gv-surface {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text);
}

.gv-brand-surface {
    background: var(--gv-color-brand-dark);
    color: var(--gv-color-on-brand);
}

/* ==========================================================================
   9. TABLES AND DATATABLES
   ========================================================================== */

.table,
table.dataTable,
.gv-table {
    background: transparent;
    border-collapse: collapse;
    color: var(--gv-color-text);
    width: 100%;
}

.table > thead > tr > th,
.table thead th,
table.dataTable thead th,
.gv-table thead th {
    background: var(--gv-color-surface-subtle);
    border-bottom: 1px solid var(--gv-color-border-strong);
    border-top: 0;
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.04em;
    padding: var(--gv-density-cell-padding-y) var(--gv-density-cell-padding-x);
    text-align: left;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table tbody td,
table.dataTable tbody td,
.gv-table tbody td {
    border-top: 1px solid var(--gv-color-divider);
    color: var(--gv-color-text);
    padding: var(--gv-density-cell-padding-y) var(--gv-density-cell-padding-x);
    vertical-align: top;
}

.table > tfoot > tr > td,
.table tfoot th {
    background: var(--gv-color-surface-subtle);
    border-top: 1px solid var(--gv-color-border-strong);
    color: var(--gv-color-text);
    font-weight: var(--gv-font-weight-semibold);
    padding: var(--gv-density-cell-padding-y) var(--gv-density-cell-padding-x);
}

.table-hover > tbody > tr:hover,
table.dataTable.table-hover tbody tr:hover {
    background: var(--gv-color-surface-subtle);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--gv-color-surface-subtle);
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
    border: 1px solid var(--gv-color-border);
}

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td,
.table-condensed > tbody > tr > td {
    padding: 4px var(--gv-space-2);
}

.table-responsive,
.gv-table-group {
    border: 0;
    overflow-x: auto;
    overflow-y: auto;
}

/* Selected rows use the brand tint. This is one of the few purple surfaces. */
table.dataTable tbody tr.selected,
.table > tbody > tr.selected,
.table > tbody > tr.active {
    background: var(--gv-color-selected-bg);
    box-shadow: inset 3px 0 0 var(--gv-color-primary);
}

table.dataTable tbody tr.selected td,
.table > tbody > tr.selected td {
    color: var(--gv-color-text);
}

table.dataTable tbody tr.selected a {
    color: var(--gv-color-link);
    text-decoration: none;
}

/* Contextual row colours keep meaning but lose the heavy fill. */
.table > tbody > tr.success,
.table > tbody > tr > td.success { background: var(--gv-color-success-soft); }
.table > tbody > tr.warning,
.table > tbody > tr > td.warning { background: var(--gv-color-warning-soft); }
.table > tbody > tr.danger,
.table > tbody > tr > td.danger { background: var(--gv-color-danger-soft); }
.table > tbody > tr.info,
.table > tbody > tr > td.info { background: var(--gv-color-info-soft); }

/* --- DataTables chrome --- */

.dataTables_wrapper {
    color: var(--gv-color-text);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
}

.dataTables_wrapper .dataTables_processing {
    background: var(--gv-color-surface-glass);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: var(--gv-shadow-dropdown);
    color: var(--gv-color-text);
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    cursor: pointer;
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    color: var(--gv-color-text);
}

table.dataTable tr.dtrg-group td {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-text);
    font-weight: var(--gv-font-weight-semibold);
}

.gv-table-controls {
    background-color: var(--gv-color-surface-subtle);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    margin-bottom: var(--gv-space-3);
    padding: var(--gv-space-2);
}

.gv-table-controls label {
    margin: 0;
    width: 100%;
}

/* Page-local visibility filter used by list and report tables. */
.gv-show-all-filter {
    align-items: center;
    display: none;
}

.gv-show-all-filter.gv-show-all-filter--placed {
    display: inline-flex;
    margin: 0 var(--gv-space-2) 0 0;
    vertical-align: middle;
}

.dataTables_filter > .gv-show-all-filter.gv-show-all-filter--placed {
    margin-bottom: var(--gv-space-1);
    margin-right: var(--gv-space-3);
}

.gv-show-all-filter__label {
    align-items: center;
    color: var(--gv-color-text-muted);
    cursor: pointer;
    display: inline-flex;
    gap: var(--gv-space-1);
    margin: 0;
    white-space: nowrap;
    width: auto;
}

.gv-show-all-filter__input {
    flex: 0 0 auto;
    margin: 0 var(--gv-space-1) 0 0;
}

.gv-show-all-filter__title {
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-medium);
}

.gv-show-all-filter__info {
    color: var(--gv-color-text-subtle);
    font-size: var(--gv-font-size-xs);
}

.gv-show-all-filter__label:hover,
.gv-show-all-filter__label:focus-within {
    color: var(--gv-color-text);
}

/* Ad-hoc invoice: many fields wrapped into one row. */
table.gv-table.flexify tr {
    display: flex;
    flex-wrap: wrap;
}

table.gv-table.flexify thead {
    display: none;
}

table.gv-table.flexify td::before {
    content: attr(title) ': ';
}

table.gv-table.flexify td:nth-child(1)::before {
    content: '';
}

/* ==========================================================================
   10. FORMS AND CONTROLS
   ========================================================================== */

label,
.control-label {
    color: var(--gv-color-text);
    display: inline-block;
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-semibold);
    margin-bottom: var(--gv-space-1);
}

.form-group {
    margin-bottom: var(--gv-space-4);
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.gv-control {
    background-color: var(--gv-color-surface);
    background-image: none;
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    box-shadow: none;
    color: var(--gv-color-text);
    font-family: inherit;
    font-size: var(--gv-font-size-md);
    height: var(--gv-density-control-height);
    line-height: var(--gv-line-height-normal);
    padding: var(--gv-density-control-padding-y) var(--gv-density-control-padding-x);
    transition: border-color var(--gv-transition-fast), box-shadow var(--gv-transition-fast);
    width: 100%;
}

textarea.form-control,
.gv-textarea {
    height: auto;
    min-height: calc(var(--gv-density-control-height) * 2);
    padding-bottom: var(--gv-space-2);
    padding-top: var(--gv-space-2);
}

.form-control:focus,
.custom-select:focus,
.gv-control:focus {
    background-color: var(--gv-color-surface);
    border-color: var(--gv-color-primary);
    box-shadow: var(--gv-shadow-focus-ring);
    color: var(--gv-color-text);
    outline: none;
}

.form-control::placeholder {
    color: var(--gv-color-text-subtle);
    opacity: 1;
}

.form-control:disabled,
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: var(--gv-color-surface-sunken);
    color: var(--gv-color-text-muted);
    cursor: not-allowed;
    opacity: 1;
}

.form-control-sm,
.input-sm {
    font-size: var(--gv-font-size-sm);
    height: 26px;
    padding: 3px var(--gv-space-2);
}

.form-control-lg,
.input-lg {
    font-size: var(--gv-font-size-lg);
    height: 40px;
    padding: var(--gv-space-2) var(--gv-space-3);
}

.form-text,
.help-block {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    margin-top: var(--gv-space-1);
}

/* Validation. Bootstrap 4 and the legacy .has-error pattern both supported. */
.is-invalid,
.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--gv-color-danger);
}

.is-invalid:focus,
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px var(--gv-color-danger-soft);
}

.invalid-feedback,
.has-error .help-block,
.has-error .control-label {
    color: var(--gv-color-danger-text);
}

.is-valid,
.form-control.is-valid,
.has-success .form-control {
    border-color: var(--gv-color-success);
}

.valid-feedback,
.has-success .help-block {
    color: var(--gv-color-success-text);
}

.gv-err {
    color: var(--gv-color-danger-text);
    display: none;
    font-size: var(--gv-font-size-sm);
}

.has-error .gv-err {
    display: inline-block;
}

/* --- Input groups --- */

.input-group-text,
.input-group-addon {
    background: var(--gv-color-surface-sunken);
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-md);
    padding: var(--gv-density-control-padding-y) var(--gv-density-control-padding-x);
}

/* --- Checkboxes and radios --- */

.form-check-input,
input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--gv-color-primary);
}

.form-check-label,
.checkbox label,
.radio label {
    font-weight: var(--gv-font-weight-regular);
}

/* --- select2 --- */

.select2-container .select2-selection--single {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    /* Match native control height so col-md-* rows do not wrap. */
    height: var(--gv-density-control-height);
    min-height: var(--gv-density-control-height);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gv-color-text);
    line-height: calc(var(--gv-density-control-height) - 2px);
    padding-left: var(--gv-density-control-padding-x);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--gv-density-control-height) - 2px);
}

.select2-container--default .select2-selection--multiple {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    min-height: var(--gv-density-control-height);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--gv-color-primary-soft);
    border: 1px solid var(--gv-color-primary-border);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-primary-text);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gv-color-primary);
    box-shadow: var(--gv-shadow-focus-ring);
}

.select2-dropdown {
    background: var(--gv-color-surface-raised);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: var(--gv-shadow-dropdown);
}

.select2-container--default .select2-results__option {
    color: var(--gv-color-text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--gv-color-primary);
    color: var(--gv-color-on-primary);
}

.select2-container--default .select2-results__option[aria-selected='true'] {
    background: var(--gv-color-selected-bg);
    color: var(--gv-color-text);
}

.select2-search--dropdown .select2-search__field {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text);
}

.has-error .select2-container--default .select2-selection--single {
    border-color: var(--gv-color-danger);
}

/* --- bootstrap-datepicker --- */

.datepicker,
.datepicker-dropdown {
    background: var(--gv-color-surface-raised);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: var(--gv-shadow-dropdown);
    color: var(--gv-color-text);
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text);
}

.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: var(--gv-color-surface-sunken);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--gv-color-primary);
    background-image: none;
    color: var(--gv-color-on-primary);
    text-shadow: none;
}

.datepicker table tr td.today {
    background: var(--gv-color-warning-soft);
    background-image: none;
    color: var(--gv-color-warning-text);
}

.datepicker table tr td.old,
.datepicker table tr td.new {
    color: var(--gv-color-text-subtle);
}

/* --- dropzone --- */

.dropzone {
    background: var(--gv-color-surface-subtle);
    border: 2px dashed var(--gv-color-border-strong);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text-muted);
}

.dropzone:hover {
    border-color: var(--gv-color-primary);
}

.dropzone .dz-image img {
    width: 120px;
}

/* ==========================================================================
   11. BUTTONS
   ========================================================================== */

/* Deliberately inline-block, not inline-flex. Flex turns every inline child
   and text node into a separate flex item, so `gap` visibly splits legacy
   markup like <u>N</u>ew or <i class="fa"></i> Save. Inline-block preserves
   the literal whitespace those markup patterns already rely on. */
.btn {
    background: var(--gv-color-surface);
    background-image: none;
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-sm);
    box-shadow: none;
    color: var(--gv-color-text);
    display: inline-block;
    font-family: inherit;
    font-size: var(--gv-font-size-md);
    font-weight: var(--gv-font-weight-semibold);
    line-height: var(--gv-line-height-normal);
    padding: var(--gv-density-control-padding-y) var(--gv-space-3);
    text-align: center;
    text-decoration: none;
    transition: background-color var(--gv-transition-fast),
        border-color var(--gv-transition-fast), color var(--gv-transition-fast);
    vertical-align: middle;
    white-space: nowrap;
}

.btn:hover {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-text);
    text-decoration: none;
}

.btn:focus-visible {
    box-shadow: var(--gv-shadow-focus-ring);
    outline: 2px solid var(--gv-color-focus);
    outline-offset: 1px;
}

.btn:active,
.btn.active {
    background: var(--gv-color-surface-sunken);
    box-shadow: none;
}

.btn:disabled,
.btn.disabled,
fieldset[disabled] .btn {
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.btn-sm,
.btn-xs {
    font-size: var(--gv-font-size-sm);
    min-height: 26px;
    padding: 3px var(--gv-space-2);
}

.btn-xs {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-lg {
    font-size: var(--gv-font-size-lg);
    min-height: 40px;
    padding: var(--gv-space-2) var(--gv-space-5);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-link {
    background: none;
    border-color: transparent;
    color: var(--gv-color-link);
    font-weight: var(--gv-font-weight-medium);
}

.btn-link:hover {
    background: none;
    color: var(--gv-color-link-hover);
    text-decoration: none;
}

.btn-group > .btn-xs:not(:last-child) {
    border-right: 1px solid var(--gv-color-border-strong);
}

/* The primary action. One per region. */
.btn.btn-primary,
.btn.gv-btn-primary {
    background: var(--gv-color-primary);
    border-color: var(--gv-color-primary);
    color: var(--gv-color-on-primary);
}

.btn.btn-primary:hover,
.btn.gv-btn-primary:hover {
    background: var(--gv-color-primary-hover);
    border-color: var(--gv-color-primary-hover);
    color: var(--gv-color-on-primary);
}

/* Bootstrap states these as .btn-primary:not(:disabled):not(.disabled).active
   (specificity 0,4,0). Matching that pattern is required, or its blue wins. */
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn.btn-primary.dropdown-toggle,
.btn.gv-btn-primary:not(:disabled):not(.disabled):active,
.btn.gv-btn-primary:not(:disabled):not(.disabled).active {
    background: var(--gv-color-primary-active);
    border-color: var(--gv-color-primary-active);
    color: var(--gv-color-on-primary);
}

/* The outlined brand button. Must not compete with the primary action. */
.btn.gv-btn-secondary,
.btn.btn-outline-primary {
    background: transparent;
    border-color: var(--gv-color-primary);
    color: var(--gv-color-primary-text);
}

.btn.gv-btn-secondary:hover,
.btn.btn-outline-primary:hover {
    background: var(--gv-color-primary-soft);
    border-color: var(--gv-color-primary);
    color: var(--gv-color-primary-text);
}

/* Legacy flat/app buttons lose their gradients and heavy borders. */
.btn.btn-flat,
.btn.btn-app {
    border-radius: var(--gv-radius-sm);
    box-shadow: none;
}

.btn.btn-app {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    color: var(--gv-color-text);
}

/* topActions region: emphasised toolbar buttons. */
span.topActions .btn,
.gv-top-actions .btn {
    font-weight: var(--gv-font-weight-semibold);
}

/* ==========================================================================
   12. ACCENT ENGINE - BADGES, ALERTS, CALLOUTS, PROGRESS
   One contract drives every semantic role. Set the role with either
   data-gv-accent="danger" or .gv-accent--danger; legacy Bootstrap classes
   (.btn-danger, .badge-success, .alert-info ...) map onto the same tokens.
   ========================================================================== */

:is([data-gv-accent='primary'], .gv-accent--primary, .gv-btn-primary,
    .gv-badge-primary, .gv-callout-primary, .btn-primary, .badge-primary,
    .alert-primary, .progress-bar-primary) {
    --gv-accent-color: var(--gv-color-primary);
    --gv-accent-hover: var(--gv-color-primary-hover);
    --gv-accent-active: var(--gv-color-primary-active);
    --gv-accent-text: var(--gv-color-primary-text);
    --gv-accent-soft: var(--gv-color-primary-soft);
    --gv-accent-border: var(--gv-color-primary-border);
    --gv-accent-on: var(--gv-color-on-primary);
}

:is([data-gv-accent='default'], .gv-accent--default, .gv-btn-default,
    .gv-badge-default, .gv-callout-default, .btn-default, .badge-secondary,
    .btn-secondary) {
    --gv-accent-color: var(--gv-color-default);
    --gv-accent-hover: var(--gv-color-default-hover);
    --gv-accent-active: var(--gv-color-default-active);
    --gv-accent-text: var(--gv-color-default-text);
    --gv-accent-soft: var(--gv-color-default-soft);
    --gv-accent-border: var(--gv-color-default-border);
    --gv-accent-on: var(--gv-color-on-default);
}

:is([data-gv-accent='secondary'], .gv-accent--secondary,
    .gv-btn-secondary-accent, .gv-badge-secondary, .gv-callout-secondary) {
    --gv-accent-color: var(--gv-color-secondary);
    --gv-accent-hover: var(--gv-color-secondary-hover);
    --gv-accent-active: var(--gv-color-secondary-active);
    --gv-accent-text: var(--gv-color-secondary-text);
    --gv-accent-soft: var(--gv-color-secondary-soft);
    --gv-accent-border: var(--gv-color-secondary-border);
    --gv-accent-on: var(--gv-color-on-secondary);
}

:is([data-gv-accent='success'], .gv-accent--success, .gv-btn-success,
    .gv-badge-success, .gv-callout-success, .btn-success, .badge-success,
    .alert-success, .progress-bar-success, .label-success) {
    --gv-accent-color: var(--gv-color-success);
    --gv-accent-hover: var(--gv-color-success-hover);
    --gv-accent-active: var(--gv-color-success-active);
    --gv-accent-text: var(--gv-color-success-text);
    --gv-accent-soft: var(--gv-color-success-soft);
    --gv-accent-border: var(--gv-color-success-border);
    --gv-accent-on: var(--gv-color-on-success);
}

:is([data-gv-accent='warning'], .gv-accent--warning, .gv-btn-warning,
    .gv-badge-warning, .gv-callout-warning, .btn-warning, .badge-warning,
    .alert-warning, .progress-bar-warning, .label-warning) {
    --gv-accent-color: var(--gv-color-warning);
    --gv-accent-hover: var(--gv-color-warning-hover);
    --gv-accent-active: var(--gv-color-warning-active);
    --gv-accent-text: var(--gv-color-warning-text);
    --gv-accent-soft: var(--gv-color-warning-soft);
    --gv-accent-border: var(--gv-color-warning-border);
    --gv-accent-on: var(--gv-color-on-warning);
}

:is([data-gv-accent='danger'], [data-gv-accent='error'], .gv-accent--danger,
    .gv-accent--error, .gv-btn-danger, .gv-badge-danger, .gv-callout-danger,
    .btn-danger, .badge-danger, .alert-danger, .progress-bar-danger,
    .label-danger) {
    --gv-accent-color: var(--gv-color-danger);
    --gv-accent-hover: var(--gv-color-danger-hover);
    --gv-accent-active: var(--gv-color-danger-active);
    --gv-accent-text: var(--gv-color-danger-text);
    --gv-accent-soft: var(--gv-color-danger-soft);
    --gv-accent-border: var(--gv-color-danger-border);
    --gv-accent-on: var(--gv-color-on-danger);
}

:is([data-gv-accent='info'], .gv-accent--info, .gv-btn-info, .gv-badge-info,
    .gv-callout-info, .btn-info, .badge-info, .alert-info,
    .progress-bar-info, .label-info) {
    --gv-accent-color: var(--gv-color-info);
    --gv-accent-hover: var(--gv-color-info-hover);
    --gv-accent-active: var(--gv-color-info-active);
    --gv-accent-text: var(--gv-color-info-text);
    --gv-accent-soft: var(--gv-color-info-soft);
    --gv-accent-border: var(--gv-color-info-border);
    --gv-accent-on: var(--gv-color-on-info);
}

/* --- Filled buttons consume the accent --- */

.btn.gv-btn-accent,
.btn.gv-btn-default,
.btn.gv-btn-success,
.btn.gv-btn-warning,
.btn.gv-btn-danger,
.btn.gv-btn-info,
.btn.btn-success,
.btn.btn-warning,
.btn.btn-danger,
.btn.btn-info,
.btn.btn-secondary,
.btn.btn-default {
    background: var(--gv-accent-color);
    background-image: none;
    border-color: var(--gv-accent-color);
    color: var(--gv-accent-on);
}

.btn.gv-btn-accent:hover,
.btn.gv-btn-default:hover,
.btn.gv-btn-success:hover,
.btn.gv-btn-warning:hover,
.btn.gv-btn-danger:hover,
.btn.gv-btn-info:hover,
.btn.btn-success:hover,
.btn.btn-warning:hover,
.btn.btn-danger:hover,
.btn.btn-info:hover,
.btn.btn-secondary:hover,
.btn.btn-default:hover {
    background: var(--gv-accent-hover);
    border-color: var(--gv-accent-hover);
    color: var(--gv-accent-on);
}

.btn.gv-btn-accent:not(:disabled):not(.disabled):active,
.btn.gv-btn-accent:not(:disabled):not(.disabled).active,
.btn.btn-success:not(:disabled):not(.disabled):active,
.btn.btn-success:not(:disabled):not(.disabled).active,
.btn.btn-warning:not(:disabled):not(.disabled):active,
.btn.btn-warning:not(:disabled):not(.disabled).active,
.btn.btn-danger:not(:disabled):not(.disabled):active,
.btn.btn-danger:not(:disabled):not(.disabled).active,
.btn.btn-info:not(:disabled):not(.disabled):active,
.btn.btn-info:not(:disabled):not(.disabled).active,
.btn.btn-secondary:not(:disabled):not(.disabled):active,
.btn.btn-secondary:not(:disabled):not(.disabled).active {
    background: var(--gv-accent-active);
    border-color: var(--gv-accent-active);
    color: var(--gv-accent-on);
}

/* .btn-default is the neutral control, so its pressed state is a grey step,
   not an accent fill. Stated at Bootstrap's specificity for the same reason. */
.btn.btn-default:not(:disabled):not(.disabled):active,
.btn.btn-default:not(:disabled):not(.disabled).active {
    background: var(--gv-color-surface-sunken);
    border-color: var(--gv-color-border-strong);
    color: var(--gv-color-text);
}

/* .btn-default is the neutral control, not a filled accent. */
.btn.btn-default {
    background: var(--gv-color-surface);
    border-color: var(--gv-color-control-border);
    color: var(--gv-color-text);
}

.btn.btn-default:hover {
    background: var(--gv-color-surface-sunken);
    border-color: var(--gv-color-border-strong);
    color: var(--gv-color-text);
}

/* --- Badges and labels --- */

.badge,
.label,
.gv-badge {
    background: var(--gv-accent-soft, var(--gv-color-surface-sunken));
    border: 1px solid var(--gv-accent-border, var(--gv-color-border));
    border-radius: var(--gv-radius-pill);
    color: var(--gv-accent-text, var(--gv-color-text-muted));
    display: inline-flex;
    align-items: center;
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-semibold);
    gap: var(--gv-space-1);
    letter-spacing: 0.01em;
    line-height: 1.4;
    padding: 2px var(--gv-space-2);
    text-shadow: none;
    vertical-align: baseline;
    white-space: nowrap;
}

/* Solid badge when the count must shout (header counters, alerts). */
.badge.gv-badge-solid,
.gv-badge--solid {
    background: var(--gv-accent-color, var(--gv-color-default));
    border-color: var(--gv-accent-color, var(--gv-color-default));
    color: var(--gv-accent-on, #ffffff);
}

/* --- Alerts and callouts --- */

.alert,
.gv-callout,
.callout {
    background: var(--gv-accent-soft, var(--gv-color-surface-sunken));
    border: 1px solid var(--gv-accent-border, var(--gv-color-border));
    border-left: 3px solid var(--gv-accent-color, var(--gv-color-border-strong));
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text);
    margin-bottom: var(--gv-space-4);
    padding: var(--gv-space-3) var(--gv-space-4);
}

.alert > :first-child,
.gv-callout > :first-child,
.callout > :first-child {
    margin-top: 0;
}

.alert > :last-child,
.gv-callout > :last-child {
    margin-bottom: 0;
}

.alert h4,
.gv-callout__title,
.callout h4 {
    color: var(--gv-accent-text, var(--gv-color-text-strong));
    font-size: var(--gv-font-size-md);
    font-weight: var(--gv-font-weight-semibold);
    margin: 0 0 var(--gv-space-1);
}

.alert .close {
    color: var(--gv-color-text-muted);
    opacity: 0.7;
    text-shadow: none;
}

/* --- Progress --- */

.progress {
    background: var(--gv-color-surface-sunken);
    border-radius: var(--gv-radius-pill);
    box-shadow: none;
    height: 8px;
    overflow: hidden;
}

.progress-bar {
    background-color: var(--gv-accent-color, var(--gv-color-primary));
    background-image: none;
    box-shadow: none;
}

/* --- Accent utility classes --- */

.gv-accent-text { color: var(--gv-accent-text) !important; }
.gv-accent-surface { background: var(--gv-accent-soft); border: 1px solid var(--gv-accent-border); }
.gv-accent-edge { border-left: 3px solid var(--gv-accent-color) !important; }
.gv-accent-icon { color: var(--gv-accent-text); }

.gv-text-primary { color: var(--gv-color-primary-text) !important; }
.gv-text-default { color: var(--gv-color-default-text) !important; }
.gv-text-secondary { color: var(--gv-color-secondary-text) !important; }
.gv-text-success { color: var(--gv-color-success-text) !important; }
.gv-text-warning { color: var(--gv-color-warning-text) !important; }
.gv-text-danger,
.gv-text-error { color: var(--gv-color-danger-text) !important; }
.gv-text-info { color: var(--gv-color-info-text) !important; }

.gv-surface-default { background: var(--gv-color-default-soft); border: 1px solid var(--gv-color-default-border); }
.gv-surface-secondary { background: var(--gv-color-secondary-soft); border: 1px solid var(--gv-color-secondary-border); }
.gv-surface-success { background: var(--gv-color-success-soft); border: 1px solid var(--gv-color-success-border); }
.gv-surface-warning { background: var(--gv-color-warning-soft); border: 1px solid var(--gv-color-warning-border); }
.gv-surface-danger,
.gv-surface-error { background: var(--gv-color-danger-soft); border: 1px solid var(--gv-color-danger-border); }
.gv-surface-info { background: var(--gv-color-info-soft); border: 1px solid var(--gv-color-info-border); }

/* Bootstrap text-* helpers follow the same palette. */
.text-primary { color: var(--gv-color-primary-text) !important; }
.text-success { color: var(--gv-color-success-text) !important; }
.text-warning { color: var(--gv-color-warning-text) !important; }
.text-danger { color: var(--gv-color-danger-text) !important; }
.text-info { color: var(--gv-color-info-text) !important; }

/* ==========================================================================
   13. NAVIGATION - TABS, PILLS, PAGINATION
   ========================================================================== */

.nav-tabs {
    border-bottom: 1px solid var(--gv-color-border);
}

.nav-tabs > li > a,
.nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--gv-color-text-muted);
    font-weight: var(--gv-font-weight-semibold);
    margin-bottom: -1px;
    padding: var(--gv-space-2) var(--gv-space-4);
    transition: color var(--gv-transition-fast), border-color var(--gv-transition-fast);
}

.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover {
    background: transparent;
    border-color: transparent;
    border-bottom-color: var(--gv-color-border-strong);
    color: var(--gv-color-text);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs .nav-link.active {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--gv-color-primary);
    color: var(--gv-color-primary-text);
}

/* Legacy nav-tabs-custom box. */
.nav-tabs-custom {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: none;
}

.nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--gv-color-border);
}

.nav-tabs-custom > .nav-tabs > li.active > a {
    background: transparent;
    border-top-color: transparent;
}

.nav-pills > li > a,
.nav-pills .nav-link {
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text-muted);
    font-weight: var(--gv-font-weight-semibold);
    padding: var(--gv-space-2) var(--gv-space-3);
}

.nav-pills > li > a:hover,
.nav-pills .nav-link:hover {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-text);
}

.nav-pills > li.active > a,
.nav-pills .nav-link.active {
    background: var(--gv-color-primary);
    color: var(--gv-color-on-primary);
}

.pagination {
    gap: var(--gv-space-1);
}

.pagination > li > a,
.pagination > li > span,
.page-link {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-sm);
    padding: var(--gv-space-1) var(--gv-space-2);
}

.pagination > li > a:hover,
.page-link:hover {
    background: var(--gv-color-surface-sunken);
    border-color: var(--gv-color-border-strong);
    color: var(--gv-color-text);
}

.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--gv-color-primary) !important;
    border-color: var(--gv-color-primary) !important;
    color: var(--gv-color-on-primary) !important;
}

.pagination > .disabled > span,
.page-item.disabled .page-link {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-text-subtle);
}

/* ==========================================================================
   14. OVERLAYS - DROPDOWN, MODAL, TOOLTIP, POPOVER
   The only elements permitted to cast a shadow.
   ========================================================================== */

.dropdown-menu {
    background: var(--gv-color-surface-raised);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: var(--gv-shadow-dropdown);
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-md);
    padding: var(--gv-space-1);
}

.dropdown-menu > li > a,
.dropdown-item {
    border-radius: var(--gv-radius-sm);
    color: var(--gv-color-text);
    padding: var(--gv-space-2) var(--gv-space-3);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-text-strong);
}

.dropdown-item.active,
.dropdown-menu > .active > a {
    background: var(--gv-color-primary);
    color: var(--gv-color-on-primary);
}

.dropdown-divider,
.dropdown-menu .divider {
    background: var(--gv-color-border);
    margin: var(--gv-space-1) 0;
}

.dropdown-header {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.08em;
    padding: var(--gv-space-2) var(--gv-space-3);
    text-transform: uppercase;
}

/* Header dropdown menus (tasks, notifications, messages). */
.navbar-custom-menu .dropdown-menu {
    left: auto;
    overflow: hidden;
    right: 0;
    width: 320px;
}

.navbar-nav > .user-menu > .dropdown-menu {
    padding: 0;
    width: 320px;
}

.navbar-nav > .user-menu .user-image {
    border-radius: var(--gv-radius-pill);
    float: left;
    height: 25px;
    margin-right: var(--gv-space-2);
    margin-top: -1px;
    object-fit: cover;
    width: 25px;
}

.navbar-custom-menu .dropdown-menu .dropdown-header {
    background: var(--gv-color-surface-subtle);
    border-bottom: 1px solid var(--gv-color-border);
    color: var(--gv-color-text-muted);
}

.navbar-custom-menu .dropdown-menu .dropdown-item {
    border-radius: 0;
    white-space: normal;
}

.navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > a > h3,
.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    align-items: center;
    background: var(--gv-color-surface-subtle);
    color: var(--gv-color-text);
    display: grid;
    gap: var(--gv-space-3);
    grid-template-columns: 64px minmax(0, 1fr);
    height: auto;
    padding: var(--gv-space-4);
    text-align: left;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    border: 1px solid var(--gv-color-border-strong);
    height: 64px;
    width: 64px;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header p {
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-md);
    margin: 0;
    min-width: 0;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    border-top: 1px solid var(--gv-color-border);
    background: var(--gv-color-surface-subtle);
    gap: var(--gv-space-2);
    padding: var(--gv-space-3);
}

.modal-content {
    background: var(--gv-color-surface-raised);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-lg);
    box-shadow: var(--gv-shadow-modal);
    color: var(--gv-color-text);
}

.modal-header {
    border-bottom: 1px solid var(--gv-color-border);
    padding: var(--gv-space-4) var(--gv-space-5);
}

.modal-title {
    font-size: var(--gv-font-size-xl);
    font-weight: var(--gv-font-weight-semibold);
    margin: 0;
}

.modal-body {
    padding: var(--gv-space-5);
}

.modal-footer {
    border-top: 1px solid var(--gv-color-border);
    gap: var(--gv-space-2);
    padding: var(--gv-space-3) var(--gv-space-5);
}

.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show {
    background: var(--gv-backdrop);
    opacity: 1;
}

.close {
    color: var(--gv-color-text-muted);
    opacity: 0.8;
    text-shadow: none;
}

.close:hover {
    color: var(--gv-color-text);
    opacity: 1;
}

.tooltip-inner {
    background: var(--gv-neutral-900);
    border-radius: var(--gv-radius-sm);
    color: #ffffff;
    font-size: var(--gv-font-size-sm);
    max-width: 280px;
    padding: var(--gv-space-1) var(--gv-space-2);
}

.tooltip .arrow::before,
.tooltip .tooltip-arrow {
    border-top-color: var(--gv-neutral-900);
    border-bottom-color: var(--gv-neutral-900);
}

.popover {
    background: var(--gv-color-surface-raised);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    box-shadow: var(--gv-shadow-popover);
    color: var(--gv-color-text);
    font-family: inherit;
    font-size: var(--gv-font-size-md);
}

.popover-header,
.popover-title {
    background: var(--gv-color-surface-subtle);
    border-bottom: 1px solid var(--gv-color-border);
    color: var(--gv-color-text-strong);
    font-weight: var(--gv-font-weight-semibold);
}

.popover-body,
.popover-content {
    color: var(--gv-color-text);
}

/* ==========================================================================
   15. DATA DISPLAY - STAT TILES, KEY/VALUE, EMPTY STATES
   ========================================================================== */

.gv-stat-grid {
    display: grid;
    gap: var(--gv-space-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: var(--gv-space-5);
}

.gv-stat {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--gv-space-1);
    padding: var(--gv-space-4);
}

.gv-stat__label {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gv-stat__value {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-3xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--gv-font-weight-bold);
    line-height: 1.1;
}

.gv-stat__meta {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
}

.gv-stat--accent {
    border-left: 3px solid var(--gv-accent-color, var(--gv-color-primary));
}

/* Key/value description list. */
.gv-list {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
}

.gv-list-item {
    display: contents;
}

.gv-list-item label,
.gv-list-item > span {
    border-bottom: 1px solid var(--gv-color-border);
    display: block;
    margin: 0;
    padding: var(--gv-space-2) var(--gv-space-3);
    text-align: left;
    width: auto;
}

.gv-list-item label {
    background: var(--gv-color-surface-subtle);
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-semibold);
}

.gv-list-item > span {
    color: var(--gv-color-text);
    overflow-wrap: anywhere;
}

.gv-empty-state {
    align-items: center;
    border: 1px dashed var(--gv-color-border-strong);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text-muted);
    display: flex;
    flex-direction: column;
    gap: var(--gv-space-2);
    padding: var(--gv-space-8) var(--gv-space-5);
    text-align: center;
}

.gv-empty-state__title {
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-lg);
    font-weight: var(--gv-font-weight-semibold);
}

/* ==========================================================================
   16. PAGE COMPONENTS
   Screens with structure the shared components do not cover. Keep this
   section small -- prefer promoting a pattern into sections 8-15.
   ========================================================================== */

/* --- Reusable login component --- */

.gv-login-component {
    color: var(--gv-color-text);
    margin: var(--gv-space-4) auto;
    max-width: 30rem;
    width: 100%;
}

.gv-login-component.card {
    background: var(--gv-color-surface);
    border-color: var(--gv-color-border);
}

.gv-login-component:not(.card) {
    margin-top: 0;
}

.gv-login-component__body {
    padding: var(--gv-space-6);
}

.gv-login-component:not(.card) .gv-login-component__body {
    padding: var(--gv-space-4) 0;
}

.gv-login-component h3 {
    color: var(--gv-color-text-strong);
    font-weight: var(--gv-font-weight-semibold);
    margin-bottom: var(--gv-space-5);
    text-align: center;
}

.gv-login-component [hidden] {
    display: none !important;
}

.gv-login-component .form-control {
    border: 1px solid var(--gv-color-control-border);
    border-radius: var(--gv-radius-md);
    height: auto;
    min-height: 44px;
    padding: var(--gv-space-3);
}

.gv-login-component .btn {
    border-radius: var(--gv-radius-md);
    min-height: 44px;
    width: 100%;
}

.gv-login-component__primary,
.gv-login-component__passkey {
    background: var(--gv-color-primary);
    border: 1px solid var(--gv-color-primary);
    color: var(--gv-color-on-primary);
}

.gv-login-component__primary:hover,
.gv-login-component__primary:focus,
.gv-login-component__passkey:hover,
.gv-login-component__passkey:focus {
    background: var(--gv-color-primary-hover);
    border-color: var(--gv-color-primary-hover);
    color: var(--gv-color-on-primary);
}

.gv-login-component__primary:active,
.gv-login-component__passkey:active {
    background: var(--gv-color-primary-active);
    border-color: var(--gv-color-primary-active);
}

.gv-login-component__help,
.gv-login-component .text-muted {
    color: var(--gv-color-text-muted) !important;
}

.gv-login-component .text-dark {
    color: var(--gv-color-text) !important;
}

.gv-login-component__link {
    background: none;
    border: 0;
    color: var(--gv-color-link);
    cursor: pointer;
    padding: 0;
}

.gv-login-component__accounts {
    display: grid;
    gap: var(--gv-space-2);
}

.gv-login-component__account,
.gv-login-component__add-account {
    border-radius: var(--gv-radius-md);
    cursor: pointer;
    min-height: 44px;
    text-align: left;
    width: 100%;
}

.gv-login-component__account {
    background: var(--gv-color-primary-soft);
    border: 1px solid var(--gv-color-primary-border);
    color: var(--gv-color-primary-text);
    display: block;
    padding: var(--gv-space-2) var(--gv-space-3);
}

.gv-login-component__account--enhanced {
    align-items: center;
    display: grid;
    gap: var(--gv-space-3);
    grid-template-columns: 32px minmax(0, 1fr) auto;
}

.gv-login-component__account > .fa:first-child {
    align-items: center;
    background: var(--gv-color-surface);
    border-radius: var(--gv-radius-pill);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.gv-login-component__account-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gv-login-component__account-details strong {
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gv-login-component__account-details small {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
}

.gv-login-component__account > .fa:last-child {
    font-size: var(--gv-font-size-xs);
}

.gv-login-component__account:hover,
.gv-login-component__account:focus,
.gv-login-component__add-account:hover,
.gv-login-component__add-account:focus {
    background: var(--gv-color-primary-soft);
    border-color: var(--gv-color-primary);
}

.gv-login-component__add-account {
    background: transparent;
    border: 0;
    color: var(--gv-color-link);
    font-weight: var(--gv-font-weight-semibold);
    margin-top: var(--gv-space-2);
    padding: var(--gv-space-2) var(--gv-space-1);
}

.gv-login-component__divider {
    align-items: center;
    color: var(--gv-color-text-muted);
    display: flex;
    font-size: var(--gv-font-size-sm);
    gap: var(--gv-space-3);
    margin: var(--gv-space-4) 0;
    text-transform: uppercase;
}

.gv-login-component__divider::before,
.gv-login-component__divider::after {
    background: var(--gv-color-border);
    content: '';
    flex: 1;
    height: 1px;
}

/* --- Branded login page --- */

body.gv-login-page {
    -webkit-font-smoothing: antialiased;
    background-attachment: fixed;
    background-color: var(--gv-color-brand-dark);
    background-image: var(--gv-login-background-image, none);
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--gv-color-text);
    font-family: var(--gv-font-display);
}

.login-card {
    backdrop-filter: blur(10px);
    background: var(--gv-color-surface-glass);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-lg);
    box-shadow: var(--gv-shadow-modal);
    color: var(--gv-color-text);
}

.login-card > .card-body {
    padding: var(--gv-space-7);
}

.login-logo {
    display: block;
    height: auto;
    margin: auto;
    max-width: 250px;
    width: 100%;
}

.login-hartex-logo {
    display: block;
    height: auto;
    margin: var(--gv-space-6) auto 0;
    max-width: 180px;
    width: 72%;
}

.login-language {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    padding-top: var(--gv-space-4);
    text-align: center;
}

.login-language a {
    color: var(--gv-color-link);
}

@media (min-width: 768px) {
    .login-logo-column {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .login-logo {
        margin: 0 auto;
    }

    .login-hartex-logo {
        margin-top: var(--gv-space-1);
    }
}

/* Logos need help against dark surfaces. Partner marks are never recoloured. */
:root[data-theme='dark'] .login-logo,
:root[data-theme='dark'] .account-brand__grapevine {
    filter:
        drop-shadow(1px 0 0 rgba(255, 255, 255, 0.95))
        drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95))
        drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.95));
}

:root[data-theme='dark'] .login-hartex-logo,
:root[data-theme='dark'] .account-brand__hartex {
    filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']):not([data-theme='dark']) .login-logo,
    :root:not([data-theme='light']):not([data-theme='dark']) .account-brand__grapevine {
        filter:
            drop-shadow(1px 0 0 rgba(255, 255, 255, 0.95))
            drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95))
            drop-shadow(0 1px 0 rgba(255, 255, 255, 0.95))
            drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.95));
    }

    :root:not([data-theme='light']):not([data-theme='dark']) .login-hartex-logo,
    :root:not([data-theme='light']):not([data-theme='dark']) .account-brand__hartex {
        filter: brightness(0) invert(1);
    }
}

/* --- Account settings page --- */

body.users-page {
    background: var(--gv-color-background);
    color: var(--gv-color-text);
    font-family: var(--gv-font-sans);
    margin: 0;
}

.account-topbar {
    background: var(--gv-color-surface);
    border-bottom: 1px solid var(--gv-color-border);
}

.account-topbar__inner,
.account-main,
.account-footer__inner {
    margin: 0 auto;
    max-width: 1180px;
    padding-left: var(--gv-space-6);
    padding-right: var(--gv-space-6);
}

.account-topbar__inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 72px;
}

.account-brand {
    align-items: center;
    display: flex;
    gap: var(--gv-space-4);
}

.account-brand__grapevine {
    height: auto;
    width: 180px;
}

.account-brand__divider {
    background: var(--gv-color-border);
    height: 30px;
    width: 1px;
}

.account-brand__hartex {
    height: auto;
    max-width: 112px;
}

.account-back-link {
    align-items: center;
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-link);
    display: inline-flex;
    font-weight: var(--gv-font-weight-semibold);
    gap: var(--gv-space-2);
    padding: var(--gv-space-2) var(--gv-space-3);
    text-decoration: none;
}

.account-back-link:hover {
    background: var(--gv-color-primary-soft);
    color: var(--gv-color-link-hover);
    text-decoration: none;
}

.account-main {
    padding-bottom: var(--gv-space-9);
    padding-top: var(--gv-space-7);
}

.account-intro {
    margin-bottom: var(--gv-space-6);
}

.account-intro__eyebrow {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.1em;
    margin-bottom: var(--gv-space-2);
    text-transform: uppercase;
}

.account-intro h1 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-4xl);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: -0.025em;
    margin: 0 0 var(--gv-space-2);
}

.account-intro p {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-lg);
    margin: 0;
    max-width: 68ch;
}

#app_container {
    min-height: 520px;
}

.account-footer {
    background: var(--gv-color-surface-sunken);
    border-top: 1px solid var(--gv-color-border);
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
}

.account-footer__inner {
    align-items: center;
    display: flex;
    gap: var(--gv-space-6);
    justify-content: space-between;
    min-height: 76px;
}

.account-footer__legal {
    display: flex;
    gap: var(--gv-space-5);
}

.account-footer a {
    color: var(--gv-color-link);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

@media (max-width: 575px) {
    .account-topbar__inner,
    .account-main,
    .account-footer__inner {
        padding-left: var(--gv-space-4);
        padding-right: var(--gv-space-4);
    }

    .account-topbar__inner { min-height: 64px; }
    .account-brand { gap: var(--gv-space-2); }
    .account-brand__grapevine { width: 118px; }
    .account-brand__hartex,
    .account-brand__divider { display: none; }
    .account-back-link span { display: none; }

    .account-main {
        padding-bottom: var(--gv-space-7);
        padding-top: var(--gv-space-5);
    }

    .account-footer__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--gv-space-3);
        padding-bottom: var(--gv-space-5);
        padding-top: var(--gv-space-5);
    }
}

/* --- Dashboard --- */

body.gv-dashboard-page .content-wrapper,
body.gv-vendor-page .content-wrapper,
body.gv-sys-page .content-wrapper {
    background: var(--gv-color-background);
}

body.gv-dashboard-page .content,
body.gv-vendor-page .content {
    padding: 0;
}

.gv-dashboard {
    color: var(--gv-color-text);
    margin: 0 auto;
    max-width: 1440px;
    padding: var(--gv-space-6);
}

.gv-dashboard__hero {
    align-items: flex-start;
    display: flex;
    gap: var(--gv-space-6);
    justify-content: space-between;
    margin-bottom: var(--gv-space-7);
}

.gv-dashboard__eyebrow {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.1em;
    margin: 0 0 var(--gv-space-2);
    text-transform: uppercase;
}

.gv-dashboard__hero h1 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-4xl);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: -0.025em;
    line-height: var(--gv-line-height-tight);
    margin: 0 0 var(--gv-space-2);
}

.gv-dashboard__hero p:not(.gv-dashboard__eyebrow) {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-lg);
    margin: 0;
    max-width: 68ch;
}

.gv-dashboard__hero-actions {
    align-items: flex-end;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--gv-space-3);
}

.gv-dashboard__refreshed,
.gv-dashboard-card__freshness {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
}

.gv-dashboard__region {
    margin-bottom: var(--gv-space-7);
}

.gv-dashboard__region-header {
    align-items: end;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--gv-space-3);
}

.gv-dashboard__region-header h2 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-xl);
    font-weight: var(--gv-font-weight-semibold);
    margin: 0 0 var(--gv-space-1);
}

.gv-dashboard__region-header p {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    margin: 0;
}

.gv-dashboard__grid {
    display: grid;
    gap: var(--gv-space-4);
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gv-dashboard-card {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    display: flex;
    flex-direction: column;
    grid-column: span 6;
    min-width: 0;
    overflow: hidden;
}

.gv-dashboard-card--wide {
    grid-column: 1 / -1;
}

.gv-dashboard-card--attention {
    border-left: 3px solid var(--gv-color-primary);
}

.gv-dashboard-card__header {
    align-items: flex-start;
    display: flex;
    gap: var(--gv-space-3);
    padding: var(--gv-space-4) var(--gv-space-4) var(--gv-space-3);
}

.gv-dashboard-card__icon {
    align-items: center;
    background: var(--gv-color-primary-soft);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-primary-text);
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
}

.gv-dashboard-card__header h3 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-lg);
    font-weight: var(--gv-font-weight-semibold);
    margin: 0 0 var(--gv-space-1);
}

.gv-dashboard-card__header p {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    line-height: var(--gv-line-height-normal);
    margin: 0;
}

.gv-dashboard-card__stats {
    display: grid;
    gap: var(--gv-space-3);
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
    padding: 0 var(--gv-space-4) var(--gv-space-3);
}

.gv-dashboard-card__stats div {
    background: var(--gv-color-surface-subtle);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    display: flex;
    flex-direction: column-reverse;
    padding: var(--gv-space-3);
}

.gv-dashboard-card__stats dt {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gv-dashboard-card__stats dd {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-3xl);
    font-variant-numeric: tabular-nums;
    font-weight: var(--gv-font-weight-bold);
    margin: 0 0 var(--gv-space-1);
}

.gv-dashboard-card__items {
    list-style: none;
    margin: 0;
    padding: 0 var(--gv-space-4) var(--gv-space-3);
}

.gv-dashboard-card__items li + li {
    border-top: 1px solid var(--gv-color-divider);
}

.gv-dashboard-card__items a {
    align-items: center;
    color: var(--gv-color-text);
    display: flex;
    gap: var(--gv-space-3);
    padding: var(--gv-space-3) 0;
    text-decoration: none;
}

.gv-dashboard-card__items a:hover strong {
    color: var(--gv-color-link);
}

.gv-dashboard-card__item-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.gv-dashboard-card__item-copy strong {
    font-size: var(--gv-font-size-md);
    font-weight: var(--gv-font-weight-semibold);
    overflow-wrap: anywhere;
}

.gv-dashboard-card__item-copy small {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    margin-top: 2px;
}

.gv-dashboard-card__item-icon {
    align-items: center;
    background: var(--gv-color-primary-soft);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-primary-text);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
}

.gv-dashboard-card__item-arrow {
    color: var(--gv-color-text-subtle);
    flex: 0 0 auto;
    font-size: var(--gv-font-size-xs);
}

.gv-dashboard-card__empty {
    color: var(--gv-color-text-muted);
    padding: 0 var(--gv-space-4) var(--gv-space-3);
}

.gv-dashboard-card__footer {
    align-items: center;
    background: var(--gv-color-surface-subtle);
    border-top: 1px solid var(--gv-color-border);
    display: flex;
    gap: var(--gv-space-4);
    justify-content: space-between;
    margin-top: auto;
    padding: var(--gv-space-3) var(--gv-space-4);
}

.gv-dashboard-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-2);
}

.gv-dashboard--compact .gv-dashboard-card__header {
    padding-bottom: var(--gv-space-3);
    padding-top: var(--gv-space-3);
}

.gv-dashboard--compact .gv-dashboard-card__items a {
    padding-bottom: var(--gv-space-2);
    padding-top: var(--gv-space-2);
}

.gv-environment-badge {
    background: var(--gv-color-surface-subtle);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-pill);
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.08em;
    padding: var(--gv-space-1) var(--gv-space-3);
    text-transform: uppercase;
}

.gv-environment-badge--production { border-color: var(--gv-color-danger); color: var(--gv-color-danger-text); }
.gv-environment-badge--test { border-color: var(--gv-color-info); color: var(--gv-color-info-text); }
.gv-environment-badge--dev { border-color: var(--gv-color-success); color: var(--gv-color-success-text); }

/* --- Integration health --- */

.gv-health-overview {
    align-items: stretch;
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    display: grid;
    grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(260px, 2fr);
    margin-bottom: var(--gv-space-7);
    overflow: hidden;
}

.gv-health-overview__count {
    align-items: center;
    border-right: 1px solid var(--gv-color-border);
    display: flex;
    gap: var(--gv-space-2);
    padding: var(--gv-space-4);
}

.gv-health-overview__count strong {
    font-size: var(--gv-font-size-3xl);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.gv-health-overview__count span {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-semibold);
}

.gv-health-overview__count--critical strong { color: var(--gv-color-danger-text); }
.gv-health-overview__count--warning strong { color: var(--gv-color-warning-text); }
.gv-health-overview__count--healthy strong { color: var(--gv-color-success-text); }

.gv-health-overview > p {
    align-items: center;
    color: var(--gv-color-text-muted);
    display: flex;
    font-size: var(--gv-font-size-sm);
    gap: var(--gv-space-2);
    margin: 0;
    padding: var(--gv-space-4);
}

.gv-health-grid {
    display: grid;
    gap: var(--gv-space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.gv-health-card {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-left-width: 3px;
    border-radius: var(--gv-radius-md);
    display: flex;
    flex-direction: column;
    min-height: 210px;
    padding: var(--gv-space-4);
}

.gv-health-card--healthy { border-left-color: var(--gv-color-success); }
.gv-health-card--warning { border-left-color: var(--gv-color-warning); }
.gv-health-card--critical { border-left-color: var(--gv-color-danger); }
.gv-health-card--loading { border-left-color: var(--gv-color-border); gap: var(--gv-space-3); }

.gv-health-skeleton {
    animation: gv-health-pulse 1.25s ease-in-out infinite alternate;
    background: var(--gv-color-surface-sunken);
    border-radius: var(--gv-radius-sm);
    display: block;
    height: 10px;
}

.gv-health-skeleton--icon { height: 32px; width: 32px; }
.gv-health-skeleton--title { margin-top: var(--gv-space-1); width: 45%; }
.gv-health-skeleton--metric { height: 18px; width: 62%; }
.gv-health-skeleton--detail { width: 88%; }
.gv-health-empty { color: var(--gv-color-text-muted); font-size: var(--gv-font-size-md); margin: 0; }

@keyframes gv-health-pulse {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

.gv-health-card__topline { align-items: flex-start; display: flex; justify-content: space-between; }
.gv-health-card__topline .gv-dashboard-card__icon { height: 32px; width: 32px; flex-basis: 32px; }

.gv-health-status {
    align-items: center;
    background: var(--gv-accent-soft, var(--gv-color-surface-sunken));
    border-radius: var(--gv-radius-pill);
    color: var(--gv-accent-text, var(--gv-color-text-muted));
    display: inline-flex;
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    gap: var(--gv-space-1);
    letter-spacing: 0.04em;
    padding: 2px var(--gv-space-2);
    text-transform: uppercase;
}

.gv-health-status i { font-size: 6px; }
.gv-health-status--healthy { background: var(--gv-color-success-soft); color: var(--gv-color-success-text); }
.gv-health-status--warning { background: var(--gv-color-warning-soft); color: var(--gv-color-warning-text); }
.gv-health-status--critical { background: var(--gv-color-danger-soft); color: var(--gv-color-danger-text); }

.gv-health-card__body { flex: 1; padding: var(--gv-space-4) 0; }
.gv-health-card h3 { color: var(--gv-color-text-strong); font-size: var(--gv-font-size-md); font-weight: var(--gv-font-weight-semibold); margin: 0 0 var(--gv-space-1); }
.gv-health-card strong { color: var(--gv-color-text-strong); display: block; font-size: var(--gv-font-size-2xl); font-variant-numeric: tabular-nums; line-height: 1.3; }
.gv-health-card p { color: var(--gv-color-text-muted); font-size: var(--gv-font-size-sm); line-height: var(--gv-line-height-normal); margin: var(--gv-space-2) 0 0; }
.gv-health-card__action { align-items: center; color: var(--gv-color-link); display: inline-flex; font-size: var(--gv-font-size-sm); font-weight: var(--gv-font-weight-semibold); gap: var(--gv-space-1); }
.gv-health-card__action:hover { color: var(--gv-color-link-hover); }
.gv-health-card__action--text { color: var(--gv-color-text-muted); }

.gv-health-card__diagnostics {
    border-top: 1px solid var(--gv-color-divider);
    margin-bottom: var(--gv-space-3);
    padding-top: var(--gv-space-3);
}

.gv-health-card__diagnostics summary {
    color: var(--gv-color-link);
    cursor: pointer;
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-semibold);
}

.gv-health-card__diagnostics dl {
    display: grid;
    font-size: var(--gv-font-size-xs);
    gap: var(--gv-space-1) var(--gv-space-2);
    grid-template-columns: max-content minmax(0, 1fr);
    margin: var(--gv-space-3) 0 0;
}

.gv-health-card__diagnostics dt {
    color: var(--gv-color-text-muted);
    font-weight: var(--gv-font-weight-semibold);
}

.gv-health-card__diagnostics dd {
    color: var(--gv-color-text);
    font-family: var(--gv-font-mono);
    margin: 0;
    overflow-wrap: anywhere;
}

.gv-health-reconciliation {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    overflow: hidden;
}

.gv-health-summary { align-items: center; border-bottom: 1px solid var(--gv-color-border); display: flex; gap: var(--gv-space-2); padding: var(--gv-space-4); }
.gv-health-summary--healthy { background: var(--gv-color-success-soft); color: var(--gv-color-success-text); }
.gv-health-summary--warning { background: var(--gv-color-warning-soft); color: var(--gv-color-warning-text); }
.gv-health-summary--critical { background: var(--gv-color-danger-soft); color: var(--gv-color-danger-text); }
.gv-health-group { padding: var(--gv-space-4); }
.gv-health-group + .gv-health-group { border-top: 1px solid var(--gv-color-border); }
.gv-health-group h3 { color: var(--gv-color-text-strong); font-size: var(--gv-font-size-lg); margin: 0 0 var(--gv-space-3); }
.gv-health-group h3 span { color: var(--gv-color-text-muted); font-size: var(--gv-font-size-sm); margin-left: var(--gv-space-1); }
.gv-health-group ul { list-style: none; margin: 0; padding: 0; }
.gv-health-group li { align-items: flex-start; color: var(--gv-color-text-muted); display: flex; gap: var(--gv-space-3); padding: var(--gv-space-2) 0; }
.gv-health-group li + li { border-top: 1px solid var(--gv-color-divider); }
.gv-health-group li > i { color: var(--gv-color-primary-text); margin-top: 2px; }
.gv-health-group li span { display: flex; flex-direction: column; }
.gv-health-group li strong { color: var(--gv-color-text); font-size: var(--gv-font-size-md); }
.gv-health-group li small { color: var(--gv-color-text-muted); }

/* --- System diagnostics (/sys) --- */

.gv-sys {
    max-width: 1600px;
}

.gv-sys__navigation {
    display: grid;
    gap: var(--gv-space-4);
    margin-bottom: var(--gv-space-7);
}

.gv-sys__nav-primary,
.gv-sys__health-links,
.gv-sys__module {
    background: var(--gv-color-surface);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
}

.gv-sys__nav-primary {
    align-items: stretch;
    display: flex;
    min-width: 0;
    overflow-x: auto;
    padding: var(--gv-space-3);
}

.gv-sys__nav-home,
.gv-sys__nav-links a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text-muted);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--gv-font-size-sm);
    font-weight: var(--gv-font-weight-semibold);
    gap: var(--gv-space-1);
    padding: var(--gv-space-2) var(--gv-space-3);
    text-decoration: none;
    white-space: nowrap;
}

.gv-sys__nav-home {
    align-self: flex-end;
    margin-right: var(--gv-space-2);
}

.gv-sys__nav-group {
    border-left: 1px solid var(--gv-color-border);
    min-width: max-content;
    padding: 0 var(--gv-space-2);
}

.gv-sys__nav-group h2,
.gv-sys__health-links h2 {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-xs);
    font-weight: var(--gv-font-weight-bold);
    letter-spacing: 0.08em;
    margin: 0 0 var(--gv-space-1);
    text-transform: uppercase;
}

.gv-sys__nav-links {
    display: flex;
    gap: 2px;
}

.gv-sys__nav-home:hover,
.gv-sys__nav-links a:hover,
.gv-sys__nav-home:focus,
.gv-sys__nav-links a:focus {
    background: var(--gv-color-surface-sunken);
    color: var(--gv-color-link);
    text-decoration: none;
}

.gv-sys__nav-home.is-active,
.gv-sys__nav-links a.is-active {
    background: var(--gv-color-primary-soft);
    border-color: var(--gv-color-primary-border);
    color: var(--gv-color-primary-text);
}

.gv-sys__health-links {
    align-items: center;
    display: flex;
    gap: var(--gv-space-4);
    justify-content: space-between;
    padding: var(--gv-space-3) var(--gv-space-4);
}

.gv-sys__health-links p {
    color: var(--gv-color-text-muted);
    font-size: var(--gv-font-size-sm);
    margin: 0;
}

.gv-sys__health-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-2);
    justify-content: flex-end;
}

.gv-sys__health-actions a {
    align-items: center;
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text);
    display: flex;
    gap: var(--gv-space-2);
    min-width: 190px;
    padding: var(--gv-space-2) var(--gv-space-3);
    text-decoration: none;
}

.gv-sys__health-actions a > i { color: var(--gv-color-primary-text); }
.gv-sys__health-actions a span { display: flex; flex-direction: column; }
.gv-sys__health-actions strong { font-size: var(--gv-font-size-md); font-weight: var(--gv-font-weight-semibold); }
.gv-sys__health-actions small { color: var(--gv-color-text-muted); font-size: var(--gv-font-size-xs); }

.gv-sys__health-actions a:hover,
.gv-sys__health-actions a:focus,
.gv-sys__health-actions a.is-active {
    background: var(--gv-color-primary-soft);
    border-color: var(--gv-color-primary-border);
    color: var(--gv-color-primary-text);
    text-decoration: none;
}

.gv-sys__module-header { align-items: flex-start; }
.gv-sys__module-header h2 { font-size: var(--gv-font-size-2xl); }

.gv-sys__audience {
    align-items: center;
    color: var(--gv-color-text-muted) !important;
    display: flex;
    font-size: var(--gv-font-size-xs) !important;
    font-weight: var(--gv-font-weight-bold);
    gap: var(--gv-space-1);
    letter-spacing: 0.08em;
    margin-bottom: var(--gv-space-1) !important;
    text-transform: uppercase;
}

.gv-sys__module {
    min-width: 0;
    overflow: hidden;
    padding: var(--gv-space-4);
}

.gv-sys__module > h2:first-child,
.gv-sys__module > h3:first-child {
    display: none;
}

.gv-sys__module .card,
.gv-sys__module .box {
    border-color: var(--gv-color-border);
}

.gv-sys__module .card-header,
.gv-sys__module .box-header {
    background: var(--gv-color-surface-subtle);
    border-color: var(--gv-color-border);
}

.gv-sys__module .card-header h5,
.gv-sys__module .box-header h5,
.gv-sys__module h4 {
    color: var(--gv-color-text-strong);
    font-size: var(--gv-font-size-lg);
    margin: 0 0 var(--gv-space-3);
}

.gv-sys__module .card-header h5,
.gv-sys__module .box-header h5 {
    margin: 0;
}

.gv-sys__module .table-responsive,
.gv-sys__module .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

.gv-sys__module table {
    color: var(--gv-color-text);
    margin-bottom: var(--gv-space-3);
    width: 100% !important;
}

.gv-sys__module pre {
    background: var(--gv-color-surface-sunken);
    border-color: var(--gv-color-border);
    color: var(--gv-color-text);
    font-size: var(--gv-font-size-sm);
    margin: 0;
    max-width: 680px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.gv-sys__module .gv-list-item > span {
    font-family: var(--gv-font-mono);
}

/* Header counters on /sys keep fixed meaning across themes. */
body.gv-sys-page .main-header .issues-menu > a > .badge {
    background: var(--gv-color-info);
    border-color: var(--gv-color-info);
    color: var(--gv-color-on-info);
}

body.gv-sys-page .main-header .notifications-menu > a > .badge {
    background: var(--gv-color-warning);
    border-color: var(--gv-color-warning);
    color: var(--gv-color-on-warning);
}

body.gv-sys-page .main-header .tasks-menu > a > .badge {
    background: var(--gv-color-danger);
    border-color: var(--gv-color-danger);
    color: var(--gv-color-on-danger);
}

/* --- Dashboard and sys responsive --- */

@media (max-width: 1199px) {
    .gv-sys__health-links {
        align-items: flex-start;
        flex-direction: column;
    }

    .gv-sys__health-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 991px) {
    .gv-dashboard__hero {
        align-items: stretch;
        flex-direction: column;
    }

    .gv-dashboard__hero-actions {
        align-items: flex-start;
    }

    .gv-dashboard-card {
        grid-column: 1 / -1;
    }

    .gv-health-overview { grid-template-columns: repeat(3, 1fr); }
    .gv-health-overview > p { border-top: 1px solid var(--gv-color-border); grid-column: 1 / -1; }
}

@media (max-width: 575px) {
    .gv-dashboard { padding: var(--gv-space-4); }
    .gv-dashboard__hero { gap: var(--gv-space-5); }
    .gv-dashboard__hero-actions .btn { width: 100%; }

    .gv-health-overview { grid-template-columns: 1fr; }
    .gv-health-overview__count { border-bottom: 1px solid var(--gv-color-border); border-right: 0; }
    .gv-health-overview > p { border-top: 0; grid-column: auto; }

    .gv-dashboard-card__header,
    .gv-dashboard-card__footer,
    .gv-dashboard-card__items,
    .gv-dashboard-card__stats {
        padding-left: var(--gv-space-4);
        padding-right: var(--gv-space-4);
    }

    .gv-dashboard-card__footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .gv-sys__nav-primary { padding: var(--gv-space-2); }
    .gv-sys__health-actions,
    .gv-sys__health-actions a { width: 100%; }
    .gv-sys__module { padding: var(--gv-space-4); }

    .gv-list { display: block; }
    .gv-list-item { display: block; margin-bottom: var(--gv-space-3); }
    .gv-list-item label,
    .gv-list-item > span { border: 1px solid var(--gv-color-border); }
    .gv-list-item > span { border-top: 0; }
}

/* ==========================================================================
   17. UTILITIES
   Small, single-purpose helpers. !important is correct here.
   ========================================================================== */

.gv-hidden { display: none !important; }
.gv-block { display: block !important; }
.gv-inline-block { display: inline-block !important; }

.nowrap,
.gv-truncate {
    max-width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nowrap-inline {
    display: inline-block;
    max-width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Application icon font glyphs. */
[class^='icon-']::before,
[class*=' icon-']::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: 'grapevine';
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1em;
    margin-left: 0.2em;
    margin-right: 0.2em;
    speak: none;
    text-align: center;
    text-decoration: inherit;
    text-transform: none;
    width: 1em;
}

.icon-grapevine::before {
    content: '\900';
    font-size: 100px;
    margin: -0.25em 0 0 0;
    width: auto;
}

h1.logo {
    font-weight: var(--gv-font-weight-bold);
}

.avatar {
    background-position: top center;
    background-size: cover;
    border: 1px solid var(--gv-color-border);
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.2em;
    vertical-align: middle;
}

.gv-thumbnail {
    display: inline-block;
    margin: var(--gv-space-4);
    width: 200px;
}

.gv-code {
    background: var(--gv-color-surface-sunken);
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-md);
    color: var(--gv-color-text);
    font-family: var(--gv-font-mono);
    font-size: var(--gv-font-size-md);
    height: 340px;
    line-height: 20px;
    padding: var(--gv-space-3);
    tab-size: 4;
}

.gv-clipboard {
    cursor: pointer;
}

.gv-clipboard code {
    background-color: var(--gv-color-surface-sunken);
    color: var(--gv-color-danger-text);
    font-family: var(--gv-font-mono);
    font-size: 90%;
    font-weight: var(--gv-font-weight-semibold);
    padding: 0.2em;
}

.gv-clipboard::after {
    color: var(--gv-color-text-muted);
    content: '\f0ea';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    padding-left: 0.3em;
}

/* Indian licence plate rendering. */
.license-plate {
    max-height: 4rem;
    max-width: 6rem;
    position: relative;
}

.license-plate span {
    background-color: #fafafa;
    border: 2px solid #000000;
    border-radius: 0.3em;
    color: #000000;
    display: inline-block;
    font-weight: var(--gv-font-weight-bold);
    font-size: 0.8em;
    padding: 0.2rem 0.5rem 0.2rem 1rem;
    text-align: center;
    width: 100%;
}

.license-plate span::before {
    border-radius: 5px 0 0 5px;
    color: #009ad3;
    content: 'IN';
    display: block;
    font-size: 0.5em;
    height: 100%;
    left: 0.6rem;
    line-height: 1em;
    position: absolute;
    text-align: center;
    top: 1.8rem;
    width: 1rem;
}

.license-plate span::after {
    background-color: #cccccc;
    content: '';
    display: block;
    height: 1rem;
    left: 0.6rem;
    position: absolute;
    top: 0.6rem;
    width: 1rem;
}

/* Summary vs detail rendering inside table cells. */
.d-summary { display: none; }
table.table td .d-summary { display: inline-block; }
.d-detail { display: inherit; }
table.table td .d-detail { display: none; }

/* --- Design system gallery (/ui/design-system.php) ---
   These exist so the gallery needs no inline styles. Nothing else uses them. */

.gv-swatch-grid {
    display: grid;
    gap: var(--gv-space-3);
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
}

.gv-swatch {
    display: flex;
    flex-direction: column;
    gap: var(--gv-space-1);
}

.gv-swatch__chip {
    border: 1px solid var(--gv-color-border);
    border-radius: var(--gv-radius-sm);
    display: block;
    height: 44px;
}

.gv-swatch__label {
    color: var(--gv-color-text-muted);
    font-family: var(--gv-font-mono);
    font-size: var(--gv-font-size-xs);
}

.gv-swatch__chip--neutral-0 { background: var(--gv-neutral-0); }
.gv-swatch__chip--neutral-25 { background: var(--gv-neutral-25); }
.gv-swatch__chip--neutral-50 { background: var(--gv-neutral-50); }
.gv-swatch__chip--neutral-100 { background: var(--gv-neutral-100); }
.gv-swatch__chip--neutral-200 { background: var(--gv-neutral-200); }
.gv-swatch__chip--neutral-300 { background: var(--gv-neutral-300); }
.gv-swatch__chip--neutral-400 { background: var(--gv-neutral-400); }
.gv-swatch__chip--neutral-500 { background: var(--gv-neutral-500); }
.gv-swatch__chip--neutral-600 { background: var(--gv-neutral-600); }
.gv-swatch__chip--neutral-700 { background: var(--gv-neutral-700); }
.gv-swatch__chip--neutral-800 { background: var(--gv-neutral-800); }
.gv-swatch__chip--neutral-900 { background: var(--gv-neutral-900); }
.gv-swatch__chip--neutral-950 { background: var(--gv-neutral-950); }

.gv-swatch__chip--purple-50 { background: var(--gv-purple-50); }
.gv-swatch__chip--purple-100 { background: var(--gv-purple-100); }
.gv-swatch__chip--purple-200 { background: var(--gv-purple-200); }
.gv-swatch__chip--purple-300 { background: var(--gv-purple-300); }
.gv-swatch__chip--purple-400 { background: var(--gv-purple-400); }
.gv-swatch__chip--purple-500 { background: var(--gv-purple-500); }
.gv-swatch__chip--purple-600 { background: var(--gv-purple-600); }
.gv-swatch__chip--purple-700 { background: var(--gv-purple-700); }
.gv-swatch__chip--purple-800 { background: var(--gv-purple-800); }
.gv-swatch__chip--purple-900 { background: var(--gv-purple-900); }
.gv-swatch__chip--purple-950 { background: var(--gv-purple-950); }

.gv-type-sample {
    align-items: baseline;
    border-bottom: 1px solid var(--gv-color-divider);
    display: flex;
    gap: var(--gv-space-3);
    justify-content: space-between;
    margin: 0;
    padding: var(--gv-space-2) 0;
}

.gv-type-sample--4xl { font-size: var(--gv-font-size-4xl); font-weight: var(--gv-font-weight-semibold); }
.gv-type-sample--3xl { font-size: var(--gv-font-size-3xl); font-weight: var(--gv-font-weight-semibold); }
.gv-type-sample--2xl { font-size: var(--gv-font-size-2xl); font-weight: var(--gv-font-weight-semibold); }
.gv-type-sample--xl { font-size: var(--gv-font-size-xl); font-weight: var(--gv-font-weight-semibold); }
.gv-type-sample--lg { font-size: var(--gv-font-size-lg); font-weight: var(--gv-font-weight-semibold); }
.gv-type-sample--md { font-size: var(--gv-font-size-md); }
.gv-type-sample--sm { font-size: var(--gv-font-size-sm); }
.gv-type-sample--xs { font-size: var(--gv-font-size-xs); }

.gv-button-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gv-space-2);
    margin-bottom: var(--gv-space-5);
}

.gv-progress-60 { width: 60%; }

/* Theme toggle control. Wire it to the gv_theme cookie. */
.gv-theme-toggle {
    background: transparent;
    border: 0;
    border-radius: var(--gv-radius-md);
    color: var(--gv-chrome-fg);
    cursor: pointer;
    line-height: 1;
    padding: var(--gv-space-2);
}

.gv-theme-toggle:hover {
    background: var(--gv-chrome-hover-bg);
    color: var(--gv-chrome-active-fg);
}

/* ==========================================================================
   18. PRINT AND REDUCED MOTION
   ========================================================================== */

@media print {
    .main-header,
    .main-sidebar,
    .main-footer,
    .control-sidebar,
    .no-print,
    .gv-page-header__actions,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }

    .content-wrapper,
    .right-side,
    body {
        background: #ffffff !important;
        color: #000000 !important;
        margin-left: 0 !important;
    }

    .card,
    .box,
    .panel {
        border: 1px solid #cccccc !important;
        break-inside: avoid;
    }

    a {
        color: #000000 !important;
        text-decoration: underline;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}