/* =============================================================================
   GHIDAS PORTAL — Design System v4 (TailAdmin / Compliance parity)

   This stylesheet is a 1:1 mirror of the design system used in
   /opt/compliance (Tailwind v4 + TailAdmin). It exposes the exact same
   color scales, fonts, shadows, radii and component patterns, then
   overrides Bootstrap + WorkDo legacy selectors so every page of
   /opt/portal renders identically to the compliance portal.

   Source of truth: /opt/compliance/resources/css/app.css (@theme block).
   Loaded last on every layout: admin, admin-v2, auth, welcome, public form.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Cairo:wght@200..1000&display=swap");

/* ════════════════════════════════════════════════════════════════════════════
   0. TAILWIND PREFLIGHT COEXISTENCE
   tailwind-compliance.css ships Tailwind's preflight reset (button styling
   stripped, link decoration removed, etc.). Bootstrap markup relies on
   these defaults — restore them so .btn, .form-control, .table etc. don't
   regress, then let our component overrides below take over.
   ════════════════════════════════════════════════════════════════════════════ */
button, [type="button"], [type="submit"], [type="reset"] {
    background-image: none;
    -webkit-appearance: button;
}
button:not(.btn):not(.dropdown-toggle):not(.nav-link):not(.page-link):not(.btn-close) {
    background-color: initial;
}
.btn, .btn-close { -webkit-appearance: none; appearance: none; }
.table { border-collapse: separate; }
ol, ul { list-style: revert; padding-inline-start: revert; }
.list-unstyled, .breadcrumb, .pagination, .nav, .navbar-nav,
.dropdown-menu, .list-group, .dash-navbar, .dash-submenu,
.sidebar-list, .menu, .pct-customizer ul { list-style: none; padding-inline-start: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }
img, svg, video, canvas, audio, iframe, embed, object { display: revert; vertical-align: revert; }
hr { border-top: 1px solid var(--color-gray-200, #e4e7ec); }

/* ════════════════════════════════════════════════════════════════════════════
   1. TOKENS — color scales identical to /opt/compliance @theme
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Fonts ───────────────────────────────────────────────────────── */
    --font-outfit: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont,
                   'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-arabic: 'Cairo', 'Noto Naskh Arabic', 'Segoe UI', Tahoma, sans-serif;
    --font-mono:   ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo,
                   Consolas, monospace;
    --font-sans:   var(--font-outfit);

    /* ── Brand scale (indigo-blue, brand-500 = #465fff) ──────────────── */
    --color-brand-25:  #f2f7ff;
    --color-brand-50:  #ecf3ff;
    --color-brand-100: #dde9ff;
    --color-brand-200: #c2d6ff;
    --color-brand-300: #9cb9ff;
    --color-brand-400: #7592ff;
    --color-brand-500: #465fff;
    --color-brand-600: #3641f5;
    --color-brand-700: #2a31d8;
    --color-brand-800: #252dae;
    --color-brand-900: #262e89;
    --color-brand-950: #161950;

    /* ── Gray scale (cool, TailAdmin) ────────────────────────────────── */
    --color-gray-25:   #fcfcfd;
    --color-gray-50:   #f9fafb;
    --color-gray-100:  #f2f4f7;
    --color-gray-200:  #e4e7ec;
    --color-gray-300:  #d0d5dd;
    --color-gray-400:  #98a2b3;
    --color-gray-500:  #667085;
    --color-gray-600:  #475467;
    --color-gray-700:  #344054;
    --color-gray-800:  #1d2939;
    --color-gray-900:  #101828;
    --color-gray-950:  #0c111d;
    --color-gray-dark: #1a2231;
    --color-black:     #101828;

    /* ── Success (green) ─────────────────────────────────────────────── */
    --color-success-25:  #f6fef9;
    --color-success-50:  #ecfdf3;
    --color-success-100: #d1fadf;
    --color-success-200: #a6f4c5;
    --color-success-300: #6ce9a6;
    --color-success-400: #32d583;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-success-900: #054f31;
    --color-success-950: #053321;

    /* ── Error (red) ─────────────────────────────────────────────────── */
    --color-error-25:   #fffbfa;
    --color-error-50:   #fef3f2;
    --color-error-100:  #fee4e2;
    --color-error-200:  #fecdca;
    --color-error-300:  #fda29b;
    --color-error-400:  #f97066;
    --color-error-500:  #f04438;
    --color-error-600:  #d92d20;
    --color-error-700:  #b42318;
    --color-error-800:  #912018;
    --color-error-900:  #7a271a;
    --color-error-950:  #55160c;

    /* ── Warning (amber-yellow) ──────────────────────────────────────── */
    --color-warning-25:  #fffcf5;
    --color-warning-50:  #fffaeb;
    --color-warning-100: #fef0c7;
    --color-warning-200: #fedf89;
    --color-warning-300: #fec84b;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;
    --color-warning-900: #7a2e0e;
    --color-warning-950: #4e1d09;

    /* ── Orange (accent) ─────────────────────────────────────────────── */
    --color-orange-50:  #fff6ed;
    --color-orange-100: #ffead5;
    --color-orange-500: #fb6514;
    --color-orange-600: #ec4a0a;
    --color-orange-700: #c4320a;

    /* ── Blue-light (info) ───────────────────────────────────────────── */
    --color-blue-light-50:  #f0f9ff;
    --color-blue-light-100: #e0f2fe;
    --color-blue-light-500: #0ba5ec;
    --color-blue-light-600: #0086c9;
    --color-blue-light-700: #026aa2;

    /* ── Theme/title type ramp (compliance values) ───────────────────── */
    --text-theme-xs: 12px;     --lh-theme-xs: 18px;
    --text-theme-sm: 14px;     --lh-theme-sm: 20px;
    --text-theme-xl: 20px;     --lh-theme-xl: 30px;
    --text-title-sm: 30px;     --lh-title-sm: 38px;
    --text-title-md: 36px;     --lh-title-md: 44px;
    --text-title-lg: 48px;     --lh-title-lg: 60px;
    --text-title-xl: 60px;     --lh-title-xl: 72px;
    --text-title-2xl: 72px;    --lh-title-2xl: 90px;

    /* ── Shadows (compliance theme-* values) ─────────────────────────── */
    --shadow-theme-xs: 0px 1px 2px 0px rgba(16,24,40,.05);
    --shadow-theme-sm: 0px 1px 3px 0px rgba(16,24,40,.10), 0px 1px 2px 0px rgba(16,24,40,.06);
    --shadow-theme-md: 0px 4px 8px -2px rgba(16,24,40,.10), 0px 2px 4px -2px rgba(16,24,40,.06);
    --shadow-theme-lg: 0px 12px 16px -4px rgba(16,24,40,.08), 0px 4px 6px -2px rgba(16,24,40,.03);
    --shadow-theme-xl: 0px 20px 24px -4px rgba(16,24,40,.08), 0px 8px 8px -4px rgba(16,24,40,.03);
    --shadow-focus-ring: 0px 0px 0px 4px rgba(70,95,255,.12);
    --shadow-tooltip:    0px 4px 6px -2px rgba(16,24,40,.05), -8px 0px 20px 8px rgba(16,24,40,.05);

    /* ── Border radius (Tailwind defaults used by compliance) ─────────── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius:      8px;     /* rounded */
    --radius-md:   8px;     /* rounded-md */
    --radius-lg:   8px;     /* rounded-lg — TailAdmin uses this for menu */
    --radius-xl:   12px;    /* rounded-xl */
    --radius-2xl:  16px;    /* rounded-2xl — cards */
    --radius-3xl:  24px;
    --radius-full: 9999px;

    /* ── Spacing (4px base, Tailwind scale) ──────────────────────────── */
    --space-0:  0;
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-7:  28px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ── Z-index scale (compliance values) ───────────────────────────── */
    --z-1:       1;
    --z-9:       9;
    --z-99:      99;
    --z-999:     999;
    --z-9999:    9999;
    --z-99999:   99999;
    --z-999999:  999999;

    /* ── Motion ──────────────────────────────────────────────────────── */
    --dur-fast: 150ms;
    --dur-base: 200ms;
    --dur-slow: 300ms;
    --ease-out: cubic-bezier(.16,.84,.44,1);
    --ease-in-out: cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════════════════════
   2. SEMANTIC TOKENS — what components reference (theme-aware)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
    /* Primary action = brand-500 (same as /opt/compliance) */
    --color-primary:        var(--color-brand-500);
    --color-primary-hover:  var(--color-brand-600);
    --color-primary-active: var(--color-brand-700);
    --color-primary-soft:   var(--color-brand-50);
    --color-primary-muted:  var(--color-brand-100);
    --color-primary-fg:     #ffffff;
    --color-primary-rgb:    70, 95, 255;
    --color-primary-gradient: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-brand-700) 100%);

    /* Surfaces */
    --color-canvas:      var(--color-gray-50);   /* page bg — matches compliance body bg */
    --color-surface:     #ffffff;
    --color-surface-alt: var(--color-gray-25);
    --color-subtle:      var(--color-gray-100);
    --color-overlay:     rgba(16,24,40,.50);
    --color-scrim:       rgba(16,24,40,.40);

    /* Foreground */
    --color-fg:           var(--color-gray-700);  /* body text */
    --color-fg-strong:    var(--color-gray-900);  /* headings */
    --color-fg-muted:     var(--color-gray-500);
    --color-fg-subtle:    var(--color-gray-400);
    --color-fg-disabled:  var(--color-gray-300);
    --color-fg-on-primary: #ffffff;
    --color-fg-link:      var(--color-brand-500);
    --color-fg-link-hover: var(--color-brand-600);

    /* Borders */
    --color-border:        var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-muted:  var(--color-gray-100);
    --color-border-focus:  var(--color-brand-500);

    /* Feedback */
    --color-success:      var(--color-success-500);
    --color-success-soft: var(--color-success-50);
    --color-success-rgb:  18, 183, 106;

    --color-warning:      var(--color-warning-500);
    --color-warning-soft: var(--color-warning-50);
    --color-warning-rgb:  247, 144, 9;

    --color-danger:       var(--color-error-500);
    --color-danger-soft:  var(--color-error-50);
    --color-danger-rgb:   240, 68, 56;

    --color-info:         var(--color-blue-light-500);
    --color-info-soft:    var(--color-blue-light-50);
    --color-info-rgb:     11, 165, 236;

    /* Bootstrap variable harmonization → libraries inherit theme */
    --bs-primary:           var(--color-primary);
    --bs-primary-rgb:       var(--color-primary-rgb);
    --bs-secondary:         var(--color-gray-500);
    --bs-secondary-rgb:     102,112,133;
    --bs-success:           var(--color-success);
    --bs-success-rgb:       var(--color-success-rgb);
    --bs-warning:           var(--color-warning);
    --bs-warning-rgb:       var(--color-warning-rgb);
    --bs-danger:            var(--color-danger);
    --bs-danger-rgb:        var(--color-danger-rgb);
    --bs-info:              var(--color-info);
    --bs-info-rgb:          var(--color-info-rgb);
    --bs-light:             var(--color-gray-100);
    --bs-dark:              var(--color-gray-900);
    --bs-body-color:        var(--color-fg);
    --bs-body-bg:           var(--color-canvas);
    --bs-border-color:      var(--color-border);
    --bs-link-color:        var(--color-fg-link);
    --bs-link-hover-color:  var(--color-fg-link-hover);
    --bs-font-sans-serif:   var(--font-outfit);
    --bs-body-font-family:  var(--font-outfit);
    --bs-body-font-size:    var(--text-theme-sm);
    --bs-body-line-height:  1.5;

    /* Legacy --gp-* aliases (pages already use these) */
    --gp-primary:        var(--color-primary);
    --gp-primary-rgb:    var(--color-primary-rgb);
    --gp-primary-dark:   var(--color-primary-hover);
    --gp-primary-light:  var(--color-brand-400);
    --gp-primary-soft:   var(--color-primary-soft);
    --gp-accent:         var(--color-primary);
    --gp-accent-rgb:     var(--color-primary-rgb);
    --gp-gradient:       var(--color-primary-gradient);
    --gp-gradient-soft:  linear-gradient(135deg, rgba(70,95,255,.08) 0%, rgba(70,95,255,.04) 100%);
    --gp-surface:        var(--color-surface);
    --gp-surface-alt:    var(--color-surface-alt);
    --gp-bg:             var(--color-canvas);
    --gp-border:         var(--color-border);
    --gp-border-strong:  var(--color-border-strong);
    --gp-black:          var(--color-gray-900);
    --gp-text:           var(--color-fg);
    --gp-text-strong:    var(--color-fg-strong);
    --gp-text-muted:     var(--color-fg-muted);
    --gp-text-subtle:    var(--color-fg-subtle);
    --gp-success:        var(--color-success);
    --gp-success-rgb:    var(--color-success-rgb);
    --gp-success-soft:   var(--color-success-soft);
    --gp-warning:        var(--color-warning);
    --gp-warning-rgb:    var(--color-warning-rgb);
    --gp-warning-soft:   var(--color-warning-soft);
    --gp-danger:         var(--color-danger);
    --gp-danger-rgb:     var(--color-danger-rgb);
    --gp-danger-soft:    var(--color-danger-soft);
    --gp-info:           var(--color-info);
    --gp-info-rgb:       var(--color-info-rgb);
    --gp-info-soft:      var(--color-info-soft);
    --gp-radius-sm:      var(--radius-sm);
    --gp-radius:         var(--radius-lg);
    --gp-radius-lg:      var(--radius-2xl);
    --gp-radius-xl:      var(--radius-2xl);
    --gp-radius-pill:    var(--radius-full);
    --gp-shadow-sm:      var(--shadow-theme-xs);
    --gp-shadow:         var(--shadow-theme-sm);
    --gp-shadow-md:      var(--shadow-theme-md);
    --gp-shadow-lg:      var(--shadow-theme-lg);
    --gp-shadow-hero:    var(--shadow-theme-xl);
    --gp-focus-ring:     var(--shadow-focus-ring);
    --gp-font-sans:      var(--font-outfit);
    --gp-font-ar:        var(--font-arabic);
    --gp-font-mono:      var(--font-mono);
    --gp-fs-xs:          var(--text-theme-xs);
    --gp-fs-sm:          var(--text-theme-sm);
    --gp-fs-base:        var(--text-theme-sm);
    --gp-fs-md:          15px;
    --gp-fs-lg:          17px;
    --gp-fs-xl:          var(--text-theme-xl);
    --gp-fs-2xl:         var(--text-title-sm);
    --gp-fs-3xl:         var(--text-title-md);
}

[dir="rtl"] {
    --font-outfit: var(--font-arabic);
    --font-sans:   var(--font-arabic);
    --bs-font-sans-serif: var(--font-arabic);
    --gp-font-sans: var(--font-arabic);
}

/* ════════════════════════════════════════════════════════════════════════════
   3. DARK MODE — mirrors /opt/compliance `.dark` class
   ════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"], .dark, body.dark-mode, body[data-bs-theme="dark"] {
    --color-canvas:      var(--color-gray-900);
    --color-surface:     var(--color-gray-900);
    --color-surface-alt: var(--color-gray-800);
    --color-subtle:      rgba(255,255,255,.05);
    --color-overlay:     rgba(0,0,0,.65);

    --color-fg:           #e4e7ec;
    --color-fg-strong:    #ffffff;
    --color-fg-muted:     var(--color-gray-400);
    --color-fg-subtle:    var(--color-gray-500);
    --color-fg-disabled:  var(--color-gray-600);
    --color-fg-link:      var(--color-brand-400);
    --color-fg-link-hover: var(--color-brand-300);

    --color-border:        var(--color-gray-800);
    --color-border-strong: rgba(255,255,255,.14);
    --color-border-muted:  rgba(255,255,255,.06);

    --color-primary-soft:  rgba(70,95,255,.18);
    --color-success-soft:  rgba(18,183,106,.18);
    --color-warning-soft:  rgba(247,144,9,.18);
    --color-danger-soft:   rgba(240,68,56,.18);
    --color-info-soft:     rgba(11,165,236,.18);

    --shadow-theme-xs: 0px 1px 2px 0px rgba(0,0,0,.4);
    --shadow-theme-sm: 0px 1px 3px 0px rgba(0,0,0,.55);
    --shadow-theme-md: 0px 6px 18px rgba(0,0,0,.6);
    --shadow-theme-lg: 0px 14px 36px rgba(0,0,0,.7);
    --shadow-theme-xl: 0px 28px 60px rgba(0,0,0,.8);
}

/* ════════════════════════════════════════════════════════════════════════════
   4. BASE / RESET  — typography + accessibility
   ════════════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-outfit);
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color-scheme: light dark;
    scroll-behavior: smooth;
    tab-size: 4;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--color-canvas) !important;
    color: var(--color-fg);
    font-family: var(--font-outfit);
    font-size: var(--text-theme-sm);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

/* Apply Outfit to widgets that hard-code their own font-family */
body, .dash-container, .dash-content, .dash-sidebar, .dash-header,
.card, .card-body, .card-header, .card-footer,
.modal-content, .modal-title, .modal-body, .modal-header, .modal-footer,
.dropdown-menu, .dropdown-item,
.btn, .form-control, .form-select, .form-label, .input-group-text,
.nav, .nav-link, .nav-item, .breadcrumb,
.table, .table th, .table td,
.alert, .badge, .toast,
.swal2-popup, .swal2-title, .swal2-html-container,
.select2-container, .select2-results__option, .select2-selection__rendered,
.choices, .choices__inner, .choices__list,
.note-editor, .note-editor .note-editable,
.ql-editor, .ql-toolbar, .CodeMirror,
input, select, textarea, button, optgroup, option {
    font-family: var(--font-outfit) !important;
}
/* Preserve icon fonts */
.ti, [class^="ti-"], [class*=" ti-"] { font-family: "tabler-icons" !important; }
.fa, .fas, .far, .fab, .fal, [class^="fa-"], [class*=" fa-"] { font-family: inherit !important; }

/* Headings — title ramp */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 0 var(--space-2);
    color: var(--color-fg-strong);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
    font-family: var(--font-outfit);
}
h1, .h1 { font-size: var(--text-title-sm); line-height: var(--lh-title-sm); }
h2, .h2 { font-size: var(--text-theme-xl); line-height: var(--lh-theme-xl); font-weight: 600; }
h3, .h3 { font-size: 18px; line-height: 28px; }
h4, .h4 { font-size: 16px; line-height: 24px; }
h5, .h5 { font-size: var(--text-theme-sm); line-height: var(--lh-theme-sm); font-weight: 600; }
h6, .h6 { font-size: var(--text-theme-xs); line-height: var(--lh-theme-xs); font-weight: 600; }
p { margin: 0 0 var(--space-3); line-height: 1.6; }
small, .small { font-size: var(--text-theme-xs); line-height: var(--lh-theme-xs); }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .9em; }

/* Selection */
::selection { background: rgba(var(--color-primary-rgb),.18); color: var(--color-fg-strong); }

/* Custom scrollbars (compliance custom-scrollbar) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 9999px; }
::-webkit-scrollbar-thumb { background: var(--color-gray-200); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-300); }
.dark ::-webkit-scrollbar-thumb { background: var(--color-gray-700); }
* { scrollbar-color: var(--color-gray-200) transparent; scrollbar-width: thin; }

/* Links */
a { color: var(--color-fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--color-fg-link-hover); }

/* Focus — compliance focus-ring (4px brand-500 @ 12% opacity) */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring) !important;
    border-radius: var(--radius-lg);
}

/* Skip link */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: var(--z-999999);
    background: var(--color-primary); color: #fff; padding: 12px 16px;
    border-radius: var(--radius-lg); font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Tabular numerals for data */
.table td, .table th, .gp-stat-val, .gp-num,
[class*="amount"], [class*="price"], [class*="count"] {
    font-variant-numeric: tabular-nums;
}

/* High-contrast preference */
@media (prefers-contrast: more) {
    :root {
        --color-border: var(--color-gray-500);
        --color-border-strong: var(--color-gray-700);
        --color-fg-muted: var(--color-gray-700);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   5. TYPOGRAPHY HELPERS — TailAdmin text-theme-* scale exposed
   ════════════════════════════════════════════════════════════════════════════ */
.text-theme-xs   { font-size: var(--text-theme-xs); line-height: var(--lh-theme-xs); }
.text-theme-sm   { font-size: var(--text-theme-sm); line-height: var(--lh-theme-sm); }
.text-theme-xl   { font-size: var(--text-theme-xl); line-height: var(--lh-theme-xl); }
.text-title-sm   { font-size: var(--text-title-sm); line-height: var(--lh-title-sm); font-weight: 600; }
.text-title-md   { font-size: var(--text-title-md); line-height: var(--lh-title-md); font-weight: 600; }
.text-title-lg   { font-size: var(--text-title-lg); line-height: var(--lh-title-lg); font-weight: 600; }

.text-xs    { font-size: var(--text-theme-xs); line-height: var(--lh-theme-xs); }
.text-sm    { font-size: var(--text-theme-sm); line-height: var(--lh-theme-sm); }
.text-base  { font-size: var(--text-theme-sm); }
.text-md    { font-size: 15px; }
.text-lg    { font-size: 17px; }
.text-xl    { font-size: var(--text-theme-xl); line-height: var(--lh-theme-xl); }
.text-2xl   { font-size: 22px; }
.text-3xl   { font-size: var(--text-title-sm); }

.fw-normal   { font-weight: 400 !important; }
.fw-medium   { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold     { font-weight: 700 !important; }

.text-uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.text-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-balance   { text-wrap: balance; }
.text-mono      { font-family: var(--font-mono); }

/* Text colors (compliance semantic) */
.text-default { color: var(--color-fg) !important; }
.text-strong  { color: var(--color-fg-strong) !important; font-weight: 600; }
.text-muted, .small.text-muted { color: var(--color-fg-muted) !important; }
.text-subtle  { color: var(--color-fg-subtle) !important; }
.text-primary { color: var(--color-primary) !important; }
.text-brand   { color: var(--color-primary) !important; }
.text-success { color: var(--color-success-600) !important; }
.text-warning { color: var(--color-warning-600) !important; }
.text-danger  { color: var(--color-error-600) !important; }
.text-error   { color: var(--color-error-600) !important; }
.text-info    { color: var(--color-info) !important; }
.text-fg      { color: var(--color-fg) !important; }
/* `.text-white` intentionally has NO !important — Tailwind defines the same
   rule, and our `!important` was clobbering pages that need text-color to be
   overridden by a later utility (e.g. `dark:text-slate-900` on a card that
   ALSO carries the legacy `text-white` class). Result of that override was
   white-on-white on the home cards. */
.text-white   { color: #fff; }
.text-gray-400 { color: var(--color-gray-400) !important; }
.text-gray-500 { color: var(--color-gray-500) !important; }
.text-gray-600 { color: var(--color-gray-600) !important; }
.text-gray-700 { color: var(--color-gray-700) !important; }
.text-gray-900 { color: var(--color-gray-900) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   6. LAYOUT PRIMITIVES
   ════════════════════════════════════════════════════════════════════════════ */
.gp-container { max-width: 1440px; margin-inline: auto; padding: var(--space-6); }
@media (max-width: 768px) { .gp-container { padding: var(--space-4); } }

/* EXACT compliance page header — mb-6, h1 text-2xl sm:text-3xl
   font-semibold tracking-tight text-gray-900, description text-sm
   leading-relaxed text-gray-500, eyebrow text-[11px] uppercase
   tracking-[0.2em] text-gray-400 */
.gp-page-header, .page-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px !important;                  /* mb-6 */
    flex-wrap: wrap;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.gp-page-header__text, .page-header-wrp { flex: 1; min-width: 0; }
.gp-page-header__breadcrumb, .page-header .breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--color-gray-500);
    margin: 0 0 12px;                                /* mb-3 */
    list-style: none; padding: 0;
}
.gp-page-header__breadcrumb a, .page-header .breadcrumb a {
    color: var(--color-gray-500); text-decoration: none;
}
.gp-page-header__breadcrumb a:hover, .page-header .breadcrumb a:hover {
    color: var(--color-gray-900);
}
.dark .gp-page-header__breadcrumb a:hover { color: #fff; }
.gp-page-title, .gp-page-header__title,
.page-header-title h4, .page-header-title h1, .page-header-title h2, .page-header-title h3,
.page-header h1, .page-header h2 {
    font-size: 24px !important;                      /* text-2xl */
    font-weight: 600 !important;                     /* font-semibold */
    color: var(--color-gray-900) !important;         /* text-gray-900 */
    margin: 0 !important;
    letter-spacing: -0.018em;                        /* tracking-tight */
    line-height: 1.2;
}
.dark .gp-page-title, .dark .gp-page-header__title,
.dark .page-header-title h4 { color: #fff !important; }
@media (min-width: 640px) {
    .gp-page-title, .gp-page-header__title,
    .page-header-title h4, .page-header-title h1, .page-header-title h2 {
        font-size: 30px !important;                  /* sm:text-3xl */
    }
}
.gp-page-sub, .gp-page-header__subtitle {
    font-size: 14px;                                 /* text-sm */
    color: var(--color-gray-500);                    /* text-gray-500 */
    margin: 4px 0 0;
    line-height: 1.625;                              /* leading-relaxed */
    max-width: 768px;                                /* max-w-3xl */
}
.gp-page-eyebrow {
    font-size: 11px;                                 /* text-[11px] */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;                           /* tracking-[0.2em] */
    color: var(--color-gray-400);
    margin: 0 0 4px;
    display: block;
}
.gp-page-header__actions, .page-header-icon {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    flex-wrap: wrap;
}
/* Make the legacy .page-block exit the .card wrapping the title (compliance
   doesn't wrap headers in cards) */
.page-block { background: transparent !important; padding: 0 !important; border: none !important; }
.page-header-wrp h4.mb-0 { line-height: 1.2 !important; }

.gp-section { margin-block: var(--space-8); }
.gp-section__title { font-size: 17px; font-weight: 600; margin: 0 0 var(--space-3); color: var(--color-fg-strong); }

.gp-divider { height: 1px; background: var(--color-border); margin-block: var(--space-4); border: none; }
.gp-divider--strong { background: var(--color-border-strong); }

.gp-stack    > * + * { margin-top: var(--space-3); }
.gp-stack-2  > * + * { margin-top: var(--space-2); }
.gp-stack-4  > * + * { margin-top: var(--space-4); }
.gp-stack-6  > * + * { margin-top: var(--space-6); }
.gp-hstack   { display: inline-flex; gap: var(--space-3); align-items: center; }
.gp-cluster  { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gp-grid     { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gp-grid-stat{ display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ════════════════════════════════════════════════════════════════════════════
   7. CARDS — EXACT compliance specs (rounded-2xl, gray-200 border,
              px-6 py-5 header, p-4 sm:p-6 body, gray-100 inner border)
   ════════════════════════════════════════════════════════════════════════════ */
.card {
    background: #ffffff !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 16px !important;     /* rounded-2xl */
    box-shadow: none;
    color: var(--color-fg);
    overflow: hidden;
}
.dark .card { background: rgba(255,255,255,.03) !important; border-color: var(--color-gray-800) !important; }
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--color-gray-100) !important;   /* gray-100, NOT gray-200 */
    padding: 20px 24px !important;                                /* px-6 py-5 */
    display: flex; align-items: center; gap: 12px;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}
.dark .card-header { border-bottom-color: var(--color-gray-800) !important; }
.card-title, .card-header .card-title, .card-header h5, .card-header h4, .card-header h3 {
    color: var(--color-gray-800) !important;     /* gray-800, not gray-900 */
    font-weight: 500 !important;                  /* font-medium, NOT semibold */
    font-size: 16px !important;                   /* text-base */
    line-height: 1.5;
    margin: 0 !important;
}
.dark .card-title, .dark .card-header h5, .dark .card-header h4, .dark .card-header h3 {
    color: rgba(255,255,255,.9) !important;
}
.card-body { padding: 16px !important; }                /* p-4 base */
@media (min-width: 640px) {
    .card-body { padding: 24px !important; }            /* sm:p-6 */
}
.card-footer {
    padding: 16px 24px !important;
    border-top: 1px solid var(--color-gray-100) !important;
    background: var(--color-gray-50) !important;
}
.dark .card-footer { background: rgba(255,255,255,.02) !important; border-top-color: var(--color-gray-800) !important; }
.card--interactive, .card.is-interactive {
    cursor: pointer;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}
.card--interactive:hover, .card.is-interactive:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-theme-md);
}
.card--elevated { box-shadow: var(--shadow-theme-sm); border-color: transparent !important; }

/* ════════════════════════════════════════════════════════════════════════════
   8. BUTTONS — EXACT compliance specs
       Primary CTA = gray-900 background with white text (NOT brand blue).
       h-10 (40px) · gap-1.5 (6px) · rounded-lg (8px) · text-sm · font-semibold
   ════════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;                                /* gap-1.5 */
    height: 40px;                            /* h-10 */
    min-height: 40px;
    padding: 0 16px;                         /* px-4 */
    font-family: var(--font-outfit);
    font-size: 14px;                         /* text-sm */
    font-weight: 600;                        /* font-semibold (compliance) */
    line-height: 1;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    border-radius: 8px;                      /* rounded-lg */
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    white-space: nowrap;
}
.btn:focus-visible { box-shadow: var(--shadow-focus-ring) !important; }
.btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-sm { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 8px; gap: 6px; }
.btn-lg { height: 48px; min-height: 48px; padding: 0 20px; font-size: 15px; }
.btn-xl { height: 56px; min-height: 56px; padding: 0 24px; font-size: 16px; }
.btn-block, .btn.w-100 { display: flex; width: 100%; }

/* Primary — gray-900 (compliance default CTA), hover→gray-800 */
.btn-primary, .btn.btn-primary {
    background: var(--color-gray-900) !important;
    border-color: var(--color-gray-900) !important;
    color: #ffffff !important;
    box-shadow: none;
}
.btn-primary:hover, .btn.btn-primary:hover {
    background: var(--color-gray-800) !important;
    border-color: var(--color-gray-800) !important;
}
.btn-primary:active, .btn.btn-primary:active {
    background: var(--color-gray-950) !important;
    border-color: var(--color-gray-950) !important;
}
/* `btn-brand` keeps the indigo blue when explicitly chosen */
.btn-brand, .btn.btn-brand {
    background: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
    color: #fff !important;
}
.btn-brand:hover, .btn.btn-brand:hover {
    background: var(--color-brand-600) !important;
    border-color: var(--color-brand-600) !important;
}

.btn-success, .btn.btn-success {
    background: var(--color-success-500) !important; border-color: var(--color-success-500) !important;
    color: #fff !important; box-shadow: var(--shadow-theme-xs);
}
.btn-success:hover, .btn.btn-success:hover {
    background: var(--color-success-600) !important; border-color: var(--color-success-600) !important;
}

.btn-warning, .btn.btn-warning {
    background: var(--color-warning-500) !important; border-color: var(--color-warning-500) !important;
    color: #fff !important; box-shadow: var(--shadow-theme-xs);
}
.btn-warning:hover, .btn.btn-warning:hover {
    background: var(--color-warning-600) !important; border-color: var(--color-warning-600) !important;
}

.btn-danger, .btn.btn-danger {
    background: var(--color-error-500) !important; border-color: var(--color-error-500) !important;
    color: #fff !important; box-shadow: var(--shadow-theme-xs);
}
.btn-danger:hover, .btn.btn-danger:hover {
    background: var(--color-error-600) !important; border-color: var(--color-error-600) !important;
}

.btn-info, .btn.btn-info {
    background: var(--color-info) !important; border-color: var(--color-info) !important;
    color: #fff !important;
}
.btn-info:hover, .btn.btn-info:hover {
    background: var(--color-blue-light-600) !important; border-color: var(--color-blue-light-600) !important;
}

/* Secondary — TailAdmin white with gray border */
.btn-secondary, .btn.btn-secondary, .btn-light, .btn.btn-light {
    background: var(--color-surface) !important;
    border-color: var(--color-gray-300) !important;
    color: var(--color-gray-700) !important;
    box-shadow: var(--shadow-theme-xs);
}
.btn-secondary:hover, .btn.btn-secondary:hover,
.btn-light:hover, .btn.btn-light:hover {
    background: var(--color-gray-50) !important; color: var(--color-gray-900) !important;
}
.btn-dark, .btn.btn-dark {
    background: var(--color-gray-900) !important; border-color: var(--color-gray-900) !important;
    color: #fff !important;
}

/* Outline */
.btn-outline-primary, .btn.btn-outline-primary {
    color: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
    background: transparent !important;
}
.btn-outline-primary:hover { background: var(--color-brand-50) !important; color: var(--color-brand-600) !important; }
.btn-outline-secondary {
    color: var(--color-gray-700) !important; border-color: var(--color-gray-300) !important;
    background: transparent !important;
}
.btn-outline-secondary:hover { background: var(--color-gray-50) !important; color: var(--color-gray-900) !important; }
.btn-outline-success { color: var(--color-success-600) !important; border-color: var(--color-success-500) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--color-success-50) !important; }
.btn-outline-warning { color: var(--color-warning-700) !important; border-color: var(--color-warning-500) !important; background: transparent !important; }
.btn-outline-warning:hover { background: var(--color-warning-50) !important; }
.btn-outline-danger  { color: var(--color-error-600)   !important; border-color: var(--color-error-500)   !important; background: transparent !important; }
.btn-outline-danger:hover  { background: var(--color-error-50)   !important; }
.btn-outline-info    { color: var(--color-info)        !important; border-color: var(--color-info)        !important; background: transparent !important; }
.btn-outline-info:hover    { background: var(--color-blue-light-50) !important; }

/* Soft */
.btn-soft-primary, .btn-light-primary {
    background: var(--color-brand-50) !important; border-color: transparent !important;
    color: var(--color-brand-700) !important;
}
.btn-soft-primary:hover, .btn-light-primary:hover {
    background: var(--color-brand-100) !important; color: var(--color-brand-800) !important;
}
.btn-soft-success { background: var(--color-success-50) !important; color: var(--color-success-700) !important; border-color: transparent !important; }
.btn-soft-warning { background: var(--color-warning-50) !important; color: var(--color-warning-700) !important; border-color: transparent !important; }
.btn-soft-danger  { background: var(--color-error-50)   !important; color: var(--color-error-700)   !important; border-color: transparent !important; }
.btn-soft-info    { background: var(--color-blue-light-50) !important; color: var(--color-blue-light-700) !important; border-color: transparent !important; }

/* Ghost */
.btn-ghost, .btn--ghost {
    background: transparent !important; border-color: transparent !important;
    color: var(--color-gray-500) !important;
}
.btn-ghost:hover, .btn--ghost:hover {
    background: var(--color-gray-100) !important; color: var(--color-gray-900) !important;
}

/* Icon button */
.btn-icon, .gp-icon-btn {
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--radius-lg);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--color-gray-200);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover, .gp-icon-btn:hover {
    background: var(--color-gray-100); color: var(--color-gray-900);
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon.btn-lg { width: 48px; height: 48px; }
.btn-icon.btn-borderless { border-color: transparent; }

.btn-group { gap: 0; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
.btn-group .btn:last-child  { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
.btn-group .btn:not(:first-child) { border-left-width: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   9. FORMS — TailAdmin inputs (rounded-lg, gray-300 border, focus brand-500)
   ════════════════════════════════════════════════════════════════════════════ */
/* EXACT compliance input — h-11 px-4 py-2.5 rounded-lg text-sm
   shadow-theme-xs border-gray-300, transparent bg, gray-800 text,
   focus: ring-3 brand-500/20 + border-brand-300 */
.form-control, .form-select, .form-input {
    display: block;
    width: 100%;
    height: 44px;                            /* h-11 */
    padding: 10px 16px;                      /* px-4 py-2.5 */
    background: transparent !important;       /* bg-transparent */
    color: var(--color-gray-800);             /* text-gray-800 */
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;                       /* rounded-lg */
    font-size: 14px;                          /* text-sm */
    line-height: 20px;
    font-family: var(--font-outfit);
    box-shadow: var(--shadow-theme-xs);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    appearance: none;
    -webkit-appearance: none;
}
textarea.form-control { height: auto; padding: 10px 16px; min-height: 96px; }
.form-control::placeholder, .form-input::placeholder, .form-select::placeholder {
    color: var(--color-gray-400) !important; opacity: 1;
}
.form-control:hover, .form-select:hover { border-color: var(--color-gray-400); }
.form-control:focus, .form-select:focus {
    border-color: var(--color-brand-300) !important;                /* focus:border-brand-300 */
    box-shadow: 0 0 0 3px rgba(70,95,255,.20) !important;            /* focus:ring-3 ring-brand-500/20 */
    outline: none;
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
    background: var(--color-gray-50) !important;
    color: var(--color-gray-400) !important;
    cursor: not-allowed;
    border-color: var(--color-gray-200);
}
.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--color-error-300) !important;
}
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(240,68,56,.20) !important; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--color-success-300) !important; }
.form-control.is-valid:focus { box-shadow: 0 0 0 3px rgba(18,183,106,.20) !important; }
.dark .form-control, .dark .form-select, .dark .form-input {
    color: rgba(255,255,255,.9);
    border-color: var(--color-gray-700);
}
.dark .form-control::placeholder, .dark .form-input::placeholder { color: rgba(255,255,255,.30) !important; }
.dark .form-control:focus, .dark .form-select:focus { border-color: var(--color-brand-800) !important; }

/* Label — mb-1.5 block text-sm font-medium text-gray-700 */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--color-gray-700);
    margin-bottom: 6px;                       /* mb-1.5 */
}
.dark .form-label { color: var(--color-gray-400); }
.form-label--required::after { content: " *"; color: var(--color-error-500); }
.form-text, .form-help {
    margin-top: 6px; font-size: 12px; line-height: 18px;
    color: var(--color-gray-500);
}
.invalid-feedback, .form-error {
    margin-top: 6px; font-size: 12px; line-height: 18px;
    color: var(--color-error-600);
}

/* Input groups */
.input-group-text {
    background: var(--color-gray-50); color: var(--color-gray-500);
    border-color: var(--color-gray-300); font-size: var(--text-theme-sm);
    border-radius: var(--radius-lg);
}

/* Checkbox / radio */
.form-check-input {
    width: 18px; height: 18px;
    border: 1.5px solid var(--color-gray-300);
    background: var(--color-surface);
    cursor: pointer;
    border-radius: var(--radius-xs);
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:focus {
    border-color: var(--color-brand-500); box-shadow: var(--shadow-focus-ring);
}
.form-check-input:checked {
    background-color: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
}
.form-check-label { color: var(--color-fg); font-size: var(--text-theme-sm); }
.tableCheckbox:checked ~ span span { opacity: 1; }
.tableCheckbox:checked ~ span { border-color: var(--color-brand-500); background: var(--color-brand-500); }

/* Switch */
.form-switch .form-check-input,
.gp-switch input[type="checkbox"] {
    width: 36px; height: 20px; border-radius: 9999px;
    background-image: none !important;
    background-color: var(--color-gray-300) !important;
    border-color: transparent !important;
    position: relative;
    appearance: none; -webkit-appearance: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out);
}
.form-switch .form-check-input::before,
.gp-switch input[type="checkbox"]::before {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: var(--shadow-theme-xs);
    transition: left var(--dur-fast) var(--ease-out);
}
.form-switch .form-check-input:checked,
.gp-switch input[type="checkbox"]:checked {
    background-color: var(--color-brand-500) !important;
}
.form-switch .form-check-input:checked::before,
.gp-switch input[type="checkbox"]:checked::before { left: 18px; }

/* File */
.form-control[type="file"] { padding: 7px 14px; }
.form-control[type="file"]::file-selector-button {
    background: var(--color-gray-50); border: none;
    padding: 7px 12px; margin-right: 12px;
    border-radius: var(--radius); color: var(--color-gray-700);
    font-weight: 500; cursor: pointer;
}

/* Date / time — hide compliance-style native icons in custom date inputs */
input[type='date']::-webkit-inner-spin-button,
input[type='time']::-webkit-inner-spin-button {
    display: none; -webkit-appearance: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   10. BADGES, PILLS, STATUS DOTS (compliance soft-color badges)
   ════════════════════════════════════════════════════════════════════════════ */
/* EXACT compliance badge — uppercase tracking-wide font-semibold rounded-full
   px-2.5 py-0.5 text-[11px] gap-1.5 with optional 1.5×1.5 leading dot */
.badge {
    display: inline-flex; align-items: center; gap: 6px;        /* gap-1.5 */
    padding: 2px 10px;                                            /* px-2.5 py-0.5 */
    border-radius: 9999px;
    font-size: 11px;                                              /* text-[11px] */
    font-weight: 600;                                             /* font-semibold */
    line-height: 1.4;
    letter-spacing: 0.04em;                                       /* tracking-wide */
    text-transform: uppercase;                                    /* compliance does uppercase */
    border: 1px solid transparent;
}
.badge.bg-primary, .badge.bg-primary-subtle, .badge-primary {
    background: var(--color-brand-50) !important; color: var(--color-brand-700) !important;
    border-color: var(--color-brand-100) !important;
}
.badge.bg-info, .badge.bg-info-subtle, .badge-info {
    background: var(--color-blue-light-50) !important; color: var(--color-blue-light-700) !important;
    border-color: var(--color-blue-light-100) !important;
}
.badge.bg-success, .badge.bg-success-subtle, .badge-success, .badge-complete, .badge-accepted, .badge-checkin {
    background: var(--color-success-50) !important; color: var(--color-success-700) !important;
    border-color: var(--color-success-100) !important;
}
.badge.bg-warning, .badge.bg-warning-subtle, .badge-warning, .badge-pending, .badge-checkout {
    background: var(--color-warning-50) !important; color: var(--color-warning-700) !important;
    border-color: var(--color-warning-100) !important;
}
.badge.bg-danger, .badge.bg-danger-subtle, .badge-danger, .badge-rejected {
    background: var(--color-error-50) !important; color: var(--color-error-700) !important;
    border-color: var(--color-error-100) !important;
}
.badge.bg-secondary, .badge.bg-light, .badge.bg-dark, .badge-secondary, .badge-white, .badge-blue {
    background: var(--color-gray-100) !important; color: var(--color-gray-700) !important;
    border-color: var(--color-gray-200) !important;
}
.badge-sm { font-size: 10px; padding: 2px 6px; }

/* gp-pill (legacy) */
.gp-pill {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-brand-50); color: var(--color-brand-700);
    padding: 3px 10px; border-radius: 9999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--color-brand-100);
}
.gp-pill.is-info    { background: var(--color-brand-50);    color: var(--color-brand-700);    border-color: var(--color-brand-100); }
.gp-pill.is-success { background: var(--color-success-50);  color: var(--color-success-700);  border-color: var(--color-success-100); }
.gp-pill.is-warning { background: var(--color-warning-50);  color: var(--color-warning-700);  border-color: var(--color-warning-100); }
.gp-pill.is-danger  { background: var(--color-error-50);    color: var(--color-error-700);    border-color: var(--color-error-100); }
.gp-pill.is-neutral { background: var(--color-gray-100);    color: var(--color-gray-700);     border-color: var(--color-gray-200); }

/* Status dot */
.gp-status-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--color-gray-400);
    box-shadow: 0 0 0 2px var(--color-surface);
}
.gp-status-dot--success { background: var(--color-success-500); }
.gp-status-dot--warning { background: var(--color-warning-500); }
.gp-status-dot--danger  { background: var(--color-error-500); }
.gp-status-dot--info    { background: var(--color-info); }
.gp-status-dot--pulse   { animation: gp-pulse 1.8s var(--ease-in-out) infinite; }
@keyframes gp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.85); }
}

/* Background utilities */
.bg-primary, .bg-brand { background-color: var(--color-brand-500) !important; color: #fff !important; }
.bg-info    { background-color: var(--color-info) !important; color: #fff !important; }
.bg-success { background-color: var(--color-success-500) !important; color: #fff !important; }
.bg-warning { background-color: var(--color-warning-500) !important; color: #fff !important; }
.bg-danger  { background-color: var(--color-error-500)   !important; color: #fff !important; }
.bg-light   { background-color: var(--color-gray-100) !important; color: var(--color-gray-700) !important; }
.bg-dark    { background-color: var(--color-gray-900) !important; color: #fff !important; }
/* Same fix as `.text-white` — Tailwind already defines this rule, and our
   `!important` was clobbering cards that legitimately layer `bg-slate-900`
   over `bg-white` (e.g. the primary card on /). Result was white-on-white. */
.bg-white   { background-color: #fff; }
.bg-primary-subtle, .bg-info-subtle { background-color: var(--color-brand-50) !important; color: var(--color-brand-700) !important; }
.bg-success-subtle { background-color: var(--color-success-50) !important; color: var(--color-success-700) !important; }
.bg-warning-subtle { background-color: var(--color-warning-50) !important; color: var(--color-warning-700) !important; }
.bg-danger-subtle  { background-color: var(--color-error-50)   !important; color: var(--color-error-700)   !important; }
.bg-secondary-subtle { background-color: var(--color-gray-100) !important; color: var(--color-gray-700) !important; }
.bg-gray-50 { background-color: var(--color-gray-50) !important; }
.bg-gray-100 { background-color: var(--color-gray-100) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   11. TABLES — EXACT compliance specs
       Wrapper:  rounded-2xl border-gray-200 bg-white shadow-sm
       Header strip: border-b border-gray-100 px-5 py-3 sm:px-6
       thead: bg-gray-50/60 text-[10px] uppercase tracking-[0.18em] text-gray-500
       td: px-5 py-3 sm:px-6 (first) · px-3 py-3 (others)
   ════════════════════════════════════════════════════════════════════════════ */
.table, .table-default {
    width: 100%;
    color: var(--color-gray-700);
    font-size: 14px;                                  /* text-sm */
    line-height: 20px;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
}
.table > :not(caption) > * > * {
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);   /* row separator gray-100 */
    padding: 12px 12px;                                /* px-3 py-3 base */
    vertical-align: middle;
    background-color: transparent;
}
.table > :not(caption) > * > *:first-child,
.table > :not(caption) > * > th:first-child {
    padding-left: 20px;                                /* px-5 first col */
}
.table > :not(caption) > * > *:last-child { padding-right: 20px; }
@media (min-width: 640px) {
    .table > :not(caption) > * > *:first-child,
    .table > :not(caption) > * > th:first-child { padding-left: 24px; }   /* sm:px-6 */
    .table > :not(caption) > * > *:last-child { padding-right: 24px; }
}
.table thead th, .thead-light th {
    background: rgba(249,250,251,.60) !important;       /* bg-gray-50/60 */
    color: var(--color-gray-500) !important;
    font-weight: 600;
    font-size: 10px !important;                          /* text-[10px] */
    text-transform: uppercase;
    letter-spacing: 0.18em;                              /* tracking-[0.18em] */
    border-bottom: 1px solid var(--color-gray-100) !important;
    border-top: none !important;
    white-space: nowrap;
    padding: 12px 12px;                                  /* py-3 px-3 */
    text-align: start;
}
.dark .table thead th, .dark .thead-light th {
    background: rgba(17,21,27,.40) !important;
    color: var(--color-gray-400) !important;
    border-bottom-color: var(--color-gray-800) !important;
}
.dark .table > :not(caption) > * > * {
    color: rgba(255,255,255,.9);
    border-bottom-color: var(--color-gray-800);
}
.table-hover tbody tr:hover td,
.table tbody tr:hover td { background: rgba(249,250,251,.50); }
.dark .table-hover tbody tr:hover td { background: rgba(255,255,255,.03); }
.table-striped tbody tr:nth-child(odd) td { background: var(--color-gray-25); }
.table-bordered { border: 1px solid var(--color-gray-200); }
.table-sm > :not(caption) > * > * { padding: 8px 12px; }
.table-sticky thead th { position: sticky; top: 0; z-index: 1; }
.table .table-num { text-align: end; font-variant-numeric: tabular-nums; }

/* Wrapper — compliance ships table inside rounded-2xl border-gray-200 bg-white shadow-sm */
.table-wrap, .gp-table-wrap, .dataTable-wrapper, .card > .table-responsive,
.card > .table {
    background: #ffffff;
    border: 1px solid var(--color-gray-200);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-theme-xs);
}
.dark .table-wrap, .dark .gp-table-wrap, .dark .dataTable-wrapper { background: rgba(255,255,255,.03); border-color: var(--color-gray-800); }
.table-wrap > .table, .gp-table-wrap > .table { margin: 0; }

/* Toolbar / "All users" strip above table */
.table-toolbar, .gp-table-toolbar,
.card-header.table-strip {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--color-gray-100);
    padding: 12px 20px;
}
@media (min-width: 640px) {
    .table-toolbar, .gp-table-toolbar, .card-header.table-strip {
        padding-left: 24px; padding-right: 24px;
    }
}
.table-toolbar h3, .gp-table-toolbar h3,
.table-toolbar .toolbar-title {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-gray-500);
    margin: 0;
}
.table-toolbar .toolbar-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--color-gray-500);
}

/* ════════════════════════════════════════════════════════════════════════════
   12. MODALS, DRAWERS, DROPDOWNS, TOOLTIPS
   ════════════════════════════════════════════════════════════════════════════ */
.modal-content {
    background: var(--color-surface);
    color: var(--color-fg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-theme-xl);
    overflow: hidden;
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-gray-100);
}
.modal-title { font-size: 16px; font-weight: 600; color: var(--color-fg-strong); }
.modal-body { padding: 24px; }
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-25);
    gap: 8px;
}
.modal-backdrop.show { opacity: .55; background: var(--color-overlay); }
.btn-close {
    background-size: 12px; opacity: .65;
    border-radius: var(--radius-sm);
}
.btn-close:hover { opacity: 1; }

/* Drawer */
.gp-drawer {
    position: fixed; top: 0; bottom: 0; right: 0;
    width: min(420px, 100vw);
    background: var(--color-surface);
    box-shadow: var(--shadow-theme-xl);
    z-index: var(--z-99999);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    display: flex; flex-direction: column;
}
.gp-drawer.is-open { transform: translateX(0); }
.gp-drawer__header { padding: 20px 24px; border-bottom: 1px solid var(--color-gray-100); display: flex; align-items: center; justify-content: space-between; }
.gp-drawer__body { flex: 1; overflow-y: auto; padding: 24px; }
.gp-drawer__footer { padding: 16px 24px; border-top: 1px solid var(--color-gray-100); background: var(--color-gray-25); }
[dir="rtl"] .gp-drawer { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .gp-drawer.is-open { transform: translateX(0); }

/* Dropdowns */
.dropdown-menu {
    background: var(--color-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-theme-lg);
    padding: 8px;
    min-width: 200px;
    color: var(--color-fg);
}
.dropdown-item {
    padding: 8px 12px;
    border-radius: var(--radius);
    color: var(--color-gray-700);
    font-size: var(--text-theme-sm);
    font-weight: 500;
    display: flex; align-items: center; gap: 12px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: var(--color-gray-100); color: var(--color-gray-900);
}
.dropdown-item.active, .dropdown-item:active {
    background: var(--color-brand-50); color: var(--color-brand-500);
}
.dropdown-divider { border-color: var(--color-gray-100); margin: 8px 0; }
.dropdown-header {
    color: var(--color-gray-400); font-size: var(--text-theme-xs);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 8px 12px;
}

/* Tooltips */
.tooltip-inner, .tooltip > .tooltip-inner {
    background: var(--color-gray-900); color: #fff;
    font-size: var(--text-theme-xs); font-weight: 500;
    border-radius: var(--radius);
    padding: 8px 12px; box-shadow: var(--shadow-tooltip);
}
.tooltip .tooltip-arrow::before { border-color: var(--color-gray-900); }

.popover {
    background: var(--color-surface); border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-theme-lg);
}
.popover-header { background: var(--color-gray-50); border-bottom-color: var(--color-gray-100); font-weight: 600; }
.popover-body { color: var(--color-fg); }

/* ════════════════════════════════════════════════════════════════════════════
   13. TABS, ACCORDION, BREADCRUMB, PAGINATION
   ════════════════════════════════════════════════════════════════════════════ */
.nav-tabs {
    border-bottom: 1px solid var(--color-gray-200);
    gap: 0;
}
.nav-tabs .nav-link {
    color: var(--color-gray-500);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 16px;
    font-weight: 500; font-size: var(--text-theme-sm);
    background: transparent !important;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-tabs .nav-link:hover { color: var(--color-gray-900); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color: var(--color-brand-500) !important;
    border-bottom-color: var(--color-brand-500) !important;
    font-weight: 600;
}

.nav-pills .nav-link {
    color: var(--color-gray-600);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    background: transparent;
    font-weight: 500;
    font-size: var(--text-theme-sm);
}
.nav-pills .nav-link:hover { background: var(--color-gray-100); color: var(--color-gray-900); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background: var(--color-brand-50) !important; color: var(--color-brand-500) !important;
}

/* Segmented */
.gp-segmented {
    display: inline-flex; padding: 3px;
    background: var(--color-gray-100); border-radius: var(--radius-lg);
}
.gp-segmented__item {
    padding: 6px 12px; font-size: var(--text-theme-xs);
    border-radius: var(--radius); cursor: pointer;
    color: var(--color-gray-600); border: none; background: transparent;
    transition: all var(--dur-fast) var(--ease-out);
    font-weight: 500;
}
.gp-segmented__item:hover { color: var(--color-gray-900); }
.gp-segmented__item.is-active, .gp-segmented__item[aria-pressed="true"] {
    background: var(--color-surface); color: var(--color-gray-900);
    box-shadow: var(--shadow-theme-xs);
}

/* Accordion */
.accordion-item {
    background: var(--color-surface); border-color: var(--color-gray-200) !important;
    border-radius: var(--radius-xl) !important; overflow: hidden;
    margin-bottom: 8px;
}
.accordion-button {
    background: transparent; color: var(--color-fg-strong);
    font-weight: 500; padding: 14px 16px;
    border-radius: var(--radius-xl) !important;
    font-size: var(--text-theme-sm);
}
.accordion-button:not(.collapsed) {
    background: var(--color-brand-50); color: var(--color-brand-700);
    box-shadow: none;
}
.accordion-button:focus { box-shadow: var(--shadow-focus-ring); }
.accordion-body { padding: 16px; color: var(--color-fg); }

/* Breadcrumb */
.breadcrumb {
    background: transparent; padding: 0;
    font-size: var(--text-theme-sm); color: var(--color-gray-500);
    margin: 0; gap: 4px;
}
.breadcrumb-item a { color: var(--color-gray-500); }
.breadcrumb-item a:hover { color: var(--color-brand-500); }
.breadcrumb-item.active { color: var(--color-gray-700); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before {
    content: "›"; color: var(--color-gray-300); padding: 0 8px;
}

/* Pagination */
.pagination { gap: 2px; }
.page-link {
    color: var(--color-gray-700); background: transparent;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius) !important;
    padding: 8px 12px;
    font-size: var(--text-theme-sm); font-weight: 500;
    transition: all var(--dur-fast) var(--ease-out);
}
.page-link:hover {
    background: var(--color-gray-50); color: var(--color-gray-900);
}
.page-item.active .page-link {
    background: var(--color-brand-500) !important;
    border-color: var(--color-brand-500) !important;
    color: #fff !important;
}
.page-item.disabled .page-link {
    color: var(--color-gray-300); background: transparent;
}

/* ════════════════════════════════════════════════════════════════════════════
   14. ALERTS, TOASTS, PROGRESS
   ════════════════════════════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    background: var(--color-surface);
    color: var(--color-fg);
    padding: 14px 16px;
    font-size: var(--text-theme-sm);
    display: flex; align-items: flex-start; gap: 12px;
}
.alert-primary, .alert-info {
    background: var(--color-brand-50) !important;
    color: var(--color-brand-700) !important;
    border-color: var(--color-brand-100) !important;
}
.alert-success {
    background: var(--color-success-50) !important;
    color: var(--color-success-700) !important;
    border-color: var(--color-success-100) !important;
}
.alert-warning {
    background: var(--color-warning-50) !important;
    color: var(--color-warning-700) !important;
    border-color: var(--color-warning-100) !important;
}
.alert-danger {
    background: var(--color-error-50) !important;
    color: var(--color-error-700) !important;
    border-color: var(--color-error-100) !important;
}
.alert-link { font-weight: 600; color: inherit; text-decoration: underline; }

/* Toast */
.toast, .gp-toast {
    background: var(--color-surface) !important;
    color: var(--color-fg) !important;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-theme-lg);
    font-size: var(--text-theme-sm);
    min-width: 280px;
}
.toast-header { background: transparent; border-bottom-color: var(--color-gray-100); font-weight: 600; }
.toast-body { padding: 12px 14px; }
.toast.bg-primary, .toast.bg-success, .toast.bg-info { background: var(--color-success-500) !important; color: #fff !important; }
.toast.bg-danger { background: var(--color-error-500) !important; color: #fff !important; }
.toast.bg-warning { background: var(--color-warning-500) !important; color: #fff !important; }
.alert-bs-notify { box-shadow: var(--shadow-theme-lg); border-radius: var(--radius-lg); }

/* Progress */
.progress {
    background: var(--color-gray-100);
    border-radius: 9999px;
    overflow: hidden;
    height: 8px;
}
.progress-bar {
    background: var(--color-brand-500) !important;
    border-radius: 9999px;
}
.progress-bar.bg-success { background: var(--color-success-500) !important; }
.progress-bar.bg-warning { background: var(--color-warning-500) !important; }
.progress-bar.bg-danger  { background: var(--color-error-500)   !important; }

/* ════════════════════════════════════════════════════════════════════════════
   15. SKELETON, SPINNER, EMPTY STATE
   ════════════════════════════════════════════════════════════════════════════ */
.gp-skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-100) 0%,
        var(--color-gray-200) 50%,
        var(--color-gray-100) 100%);
    background-size: 200% 100%;
    animation: gp-shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: var(--radius);
    display: block;
    color: transparent !important;
    pointer-events: none;
}
@keyframes gp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.gp-skeleton--text { height: 0.9em; margin-block: 4px; }
.gp-skeleton--title { height: 1.4em; width: 60%; }
.gp-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.gp-skeleton--card { height: 120px; border-radius: var(--radius-2xl); }

.gp-spinner, .spinner-border {
    display: inline-block; width: 1.25em; height: 1.25em;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: gp-spin .7s linear infinite;
    vertical-align: middle;
}
.gp-spinner--lg { width: 2em; height: 2em; border-width: 3px; }
@keyframes gp-spin { to { transform: rotate(360deg); } }

.gp-empty, .empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-gray-500);
}
.gp-empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--color-gray-50);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-gray-400); font-size: 26px;
}
.gp-empty__title {
    color: var(--color-gray-900); font-size: 16px;
    font-weight: 600; margin: 0 0 4px;
}
.gp-empty__desc {
    font-size: var(--text-theme-sm); margin: 0 auto 16px;
    max-width: 360px; line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   16. AVATARS, STAT CARDS, HERO
   ════════════════════════════════════════════════════════════════════════════ */
.gp-avatar {
    border-radius: 50%;
    background: var(--color-brand-500);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; flex-shrink: 0;
    overflow: hidden;
    font-variant-numeric: tabular-nums;
}
.gp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp-avatar-xs { width: 20px; height: 20px; font-size: 9px; }
.gp-avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.gp-avatar-md { width: 36px; height: 36px; font-size: 12px; }
.gp-avatar-lg { width: 48px; height: 48px; font-size: 14px; }
.gp-avatar-xl { width: 64px; height: 64px; font-size: 18px; }
.gp-avatar.is-placeholder {
    background: transparent; border: 1.5px dashed var(--color-gray-300);
    color: var(--color-gray-400);
}
.gp-avatar-group { display: inline-flex; }
.gp-avatar-group > .gp-avatar + .gp-avatar { margin-left: -8px; border: 2px solid var(--color-surface); }

.gp-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-2xl);
    padding: 20px 24px;
    display: flex; gap: 16px; align-items: center;
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.gp-stat-card:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-theme-md);
}
.gp-stat-ico {
    width: 48px; height: 48px; border-radius: var(--radius-xl);
    display: grid; place-items: center; font-size: 22px;
    color: var(--color-brand-500); flex-shrink: 0;
    background: var(--color-brand-50);
}
.gp-stat-ico.is-info    { background: var(--color-brand-50);   color: var(--color-brand-500); }
.gp-stat-ico.is-success { background: var(--color-success-50); color: var(--color-success-500); }
.gp-stat-ico.is-warning { background: var(--color-warning-50); color: var(--color-warning-500); }
.gp-stat-ico.is-danger  { background: var(--color-error-50);   color: var(--color-error-500); }
.gp-stat-val { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--color-gray-900); }
.gp-stat-lbl {
    font-size: var(--text-theme-sm); color: var(--color-gray-500); margin-top: 4px;
    font-weight: 500;
}
.gp-stat-trend {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--text-theme-xs); font-weight: 500;
}
.gp-stat-trend--up   { color: var(--color-success-600); }
.gp-stat-trend--down { color: var(--color-error-600); }

/* Hero — flat, brand-500 gradient (compliance does not use heavy hero shadow) */
.gp-hero {
    background: var(--color-primary-gradient);
    color: #fff;
    border-radius: var(--radius-2xl);
    padding: 24px 32px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-theme-md);
    position: relative; overflow: hidden;
}
.gp-hero::before { content: ""; position: absolute; inset: auto -60px -60px auto; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.06); pointer-events: none; }
.gp-hero::after  { content: ""; position: absolute; inset: -40px auto auto -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.04); pointer-events: none; }
.gp-hero h1, .gp-hero h2, .gp-hero h3, .gp-hero h4, .gp-hero h5, .gp-hero h6, .gp-hero .gp-hero-title { color: #fff !important; margin: 0; font-weight: 600; letter-spacing: -.01em; }
.gp-hero p, .gp-hero .gp-hero-sub { margin: 4px 0 0; opacity: .85; font-size: var(--text-theme-sm); }
.gp-hero-ico {
    width: 48px; height: 48px; border-radius: var(--radius-xl);
    background: rgba(255,255,255,.15);
    display: grid; place-items: center; font-size: 22px; color: #fff;
    backdrop-filter: blur(8px);
}
.gp-hero .btn, .gp-hero .gp-hero-btn {
    background: rgba(255,255,255,.14) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #fff !important;
    border-radius: var(--radius-lg); padding: 8px 16px;
    font-size: var(--text-theme-sm); font-weight: 500;
}
.gp-hero .btn:hover, .gp-hero .gp-hero-btn:hover {
    background: rgba(255,255,255,.24) !important; color: #fff !important;
}
.gp-hero .gp-hero-btn.is-primary {
    background: #fff !important; color: var(--color-brand-500) !important;
    border-color: #fff !important; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════════════
   17. THIRD-PARTY HARMONIZATION — Select2, Choices, editors, datepicker, SweetAlert
   ════════════════════════════════════════════════════════════════════════════ */
/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--color-surface);
    border-color: var(--color-gray-300) !important;
    min-height: 44px; padding: 6px 10px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-theme-xs);
}
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--color-brand-500) !important; box-shadow: var(--shadow-focus-ring);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--color-brand-500) !important; color: #fff !important;
}
.select2-dropdown {
    border-color: var(--color-gray-200) !important;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-theme-lg);
    background: var(--color-surface);
}
.select2-container .select2-selection--single .select2-selection__rendered { color: var(--color-fg); padding-inline-start: 8px; }
.select2-search--dropdown .select2-search__field { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-gray-300); border-radius: var(--radius); }

/* Choices */
.choices__inner {
    background: var(--color-surface);
    border-color: var(--color-gray-300) !important;
    border-radius: var(--radius-lg);
    min-height: 44px; padding: 6px 12px;
    box-shadow: var(--shadow-theme-xs);
}
.choices.is-focused .choices__inner { border-color: var(--color-brand-500) !important; box-shadow: var(--shadow-focus-ring); }
.choices__list--dropdown { background: var(--color-surface); border-color: var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-theme-lg); }
.choices__item--selectable.is-highlighted { background: var(--color-brand-50) !important; }
.choices[data-type*=select-multiple] .choices__item {
    background: var(--color-brand-50); border-color: var(--color-brand-100);
    color: var(--color-brand-700); border-radius: var(--radius);
}

/* Summernote / Quill / CodeMirror */
.note-editor.note-frame, .ql-toolbar, .ql-container, .CodeMirror {
    border-color: var(--color-gray-300) !important;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.note-toolbar, .ql-toolbar { background: var(--color-gray-50); border-bottom-color: var(--color-gray-100) !important; }
.note-editable, .ql-editor { color: var(--color-fg); background: var(--color-surface); }

/* Flatpickr — compliance datepicker shadow */
.flatpickr-calendar {
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-theme-lg); border: 1px solid var(--color-gray-200);
    font-family: var(--font-outfit);
}
.flatpickr-day.selected { background: var(--color-brand-500) !important; border-color: var(--color-brand-500) !important; color: #fff !important; }
.flatpickr-day.today { border-color: var(--color-brand-500) !important; color: var(--color-brand-500); }
.flatpickr-day:hover { background: var(--color-brand-50); }

/* SweetAlert2 */
.swal2-popup {
    background: var(--color-surface) !important;
    color: var(--color-fg) !important;
    border-radius: var(--radius-2xl) !important;
    font-family: var(--font-outfit) !important;
    box-shadow: var(--shadow-theme-xl) !important;
}
.swal2-title { color: var(--color-gray-900) !important; font-weight: 600 !important; }
.swal2-html-container { color: var(--color-fg) !important; }
.swal2-styled.swal2-confirm {
    background: var(--color-brand-500) !important;
    border-radius: var(--radius-lg) !important;
    font-weight: 500 !important; box-shadow: none !important;
}
.swal2-styled.swal2-confirm:focus { box-shadow: var(--shadow-focus-ring) !important; }
.swal2-styled.swal2-cancel {
    background: var(--color-gray-100) !important; color: var(--color-gray-700) !important;
    border-radius: var(--radius-lg) !important;
}
.swal2-icon.swal2-success .swal2-success-ring,
.swal2-icon.swal2-success [class^="swal2-success-line"] { border-color: var(--color-success-500) !important; }
.swal2-icon.swal2-warning { color: var(--color-warning-500) !important; border-color: var(--color-warning-500) !important; }
.swal2-icon.swal2-error { border-color: var(--color-error-500) !important; }

/* ApexCharts (compliance also uses apex) — match gray-100 gridline + gray-700 legend */
.apexcharts-legend-text { color: var(--color-gray-700) !important; fill: var(--color-gray-700) !important; }
.apexcharts-text { fill: var(--color-gray-700) !important; }
.apexcharts-gridline { stroke: var(--color-gray-100) !important; }
.apexcharts-tooltip.apexcharts-theme-light {
    border-color: var(--color-gray-200) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-theme-sm) !important;
    padding: 12px;
}

/* ════════════════════════════════════════════════════════════════════════════
   17.5  PAGE CONTAINER  — match compliance space-y-6 rhythm
   ════════════════════════════════════════════════════════════════════════════ */
.dash-container, .dash-content {
    background: var(--color-gray-50) !important;
}
.dash-content {
    padding: 24px;                                    /* p-6 */
}
@media (min-width: 1024px) {
    .dash-content { padding: 32px; }                  /* lg:p-8 */
}
.dark .dash-container, .dark .dash-content { background: var(--color-gray-900) !important; }

/* Compliance uses space-y-6 on the content wrapper. We emulate it by
   giving consecutive top-level children 24px top margin. */
.dash-content > * + *,
.dash-content > .row + .row,
.dash-content > .card + .card,
main > * + * { margin-top: 24px; }

/* Bootstrap row gutter — compliance uses gap-6 (24px) on grids */
.row { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }

/* ════════════════════════════════════════════════════════════════════════════
   18. LEGACY DASH-* SIDEBAR / TOPBAR — themed to compliance white-sidebar look
   ════════════════════════════════════════════════════════════════════════════ */
/* EXACT compliance sidebar — bg-white border-r border-gray-200,
   menu items: relative flex items-center w-full gap-3 px-3 py-2
   font-medium rounded-lg text-[13px] tracking-tight
   active: bg-gray-900 text-white shadow-sm
   (Do NOT force padding on .dash-sidebar itself — the minimenu
   collapse animation depends on WorkDo's width transition.) */
.dash-sidebar {
    background: #ffffff !important;
    border-right: 1px solid var(--color-gray-200) !important;
}
.dark .dash-sidebar {
    background: var(--color-gray-900) !important;
    border-right-color: var(--color-gray-800) !important;
}
.dash-header {
    background: #ffffff !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    border-right: none;
}
.dark .dash-header {
    background: var(--color-gray-900) !important;
    border-bottom-color: var(--color-gray-800) !important;
}
/* ── Sidebar items (vertical menu) — full-width row ─────────────────── */
.dash-sidebar .dash-link,
.mobile-menu-wrapper .nav-link {
    color: var(--color-gray-600) !important;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.01em;
    padding: 8px 12px !important;
    gap: 12px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center;
    width: 100%;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.dark .dash-sidebar .dash-link { color: var(--color-gray-400) !important; }
.dash-sidebar .dash-link:hover,
.mobile-menu-wrapper .nav-link:hover {
    color: var(--color-gray-900) !important;
    background: var(--color-gray-100) !important;
}
.dark .dash-sidebar .dash-link:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,.05) !important;
}
.dash-sidebar .dash-link i,
.dash-sidebar .dash-link svg {
    color: var(--color-gray-400) !important;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-out);
}
.dash-sidebar .dash-link:hover i,
.dash-sidebar .dash-link:hover svg {
    color: var(--color-gray-700) !important;
}
.dark .dash-sidebar .dash-link i, .dark .dash-sidebar .dash-link svg { color: var(--color-gray-500) !important; }

/* ── Topbar header — horizontal layout, NOT full-width ──
   Let WorkDo set the header height; we only adjust internals. */
.dash-header .header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.dash-header .dash-head-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    color: var(--color-gray-600) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.dash-header .dash-head-link:hover,
.dash-header .dash-head-link:focus {
    color: var(--color-gray-900) !important;
    background: var(--color-gray-100) !important;
}
.dark .dash-header .dash-head-link { color: var(--color-gray-300) !important; }
.dark .dash-header .dash-head-link:hover { color: #ffffff !important; background: rgba(255,255,255,.05) !important; }
.dash-header .dash-head-link i, .dash-header .dash-head-link svg {
    color: var(--color-gray-500) !important;
    flex-shrink: 0;
}
.dark .dash-header .dash-head-link i, .dark .dash-header .dash-head-link svg { color: var(--color-gray-400) !important; }
/* Hide the bootstrap built-in dropdown caret (compliance uses its own SVG/chevron) */
.dash-header .dropdown-toggle.arrow-none::after,
.dash-header .arrow-none::after { display: none !important; }
.dash-header .drp-arrow { font-size: 14px; opacity: .65; }

/* Header user avatar — keep circular */
.dash-header .theme-avtar,
.dash-header .header-avatar {
    width: 36px; height: 36px;
    border-radius: 50% !important;
    overflow: hidden;
    display: inline-block;
    flex-shrink: 0;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
}
.dash-header .theme-avtar img,
.dash-header .header-avatar {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Header lists — clean reset (compliance has no list bullets in header) */
.dash-header ul, .dash-header .list-unstyled {
    list-style: none; margin: 0; padding: 0;
    display: inline-flex; align-items: center; gap: 8px;
}
.dash-header .dash-h-item { list-style: none; }

/* Sidebar toggle button + hamburger: leave WorkDo's original animations
   alone (style.css line 15732+ defines the .hamburger--arrowturn rotate
   animation; custom.css line 2845 styles the SVG icon). Only restore
   the SVG fill that Tailwind preflight might affect. */
.dash-header .sidebar-toggle-btn { color: inherit; }
.dash-header .sidebar-toggle-btn svg path { fill: var(--color-gray-700); }
.dark .dash-header .sidebar-toggle-btn svg path { fill: #ffffff; }

/* Header dropdown menu — match compliance theme */
.dash-header .dash-h-dropdown {
    margin-top: 8px;
    border-radius: 12px;
    box-shadow: var(--shadow-theme-lg);
    border: 1px solid var(--color-gray-200);
    min-width: 220px;
    padding: 8px;
}
.dash-header .dash-h-dropdown .dropdown-item {
    border-radius: 6px;
    padding: 8px 12px;
    color: var(--color-gray-700);
    font-size: 13px;
    font-weight: 500;
    display: flex; align-items: center; gap: 10px;
}
.dash-header .dash-h-dropdown .dropdown-item:hover {
    background: var(--color-gray-100); color: var(--color-gray-900);
}
.dash-header .dash-h-dropdown .dropdown-item i {
    color: var(--color-gray-400); font-size: 16px;
}

/* "Hi, Name" greeting hide-mob already handled by Bootstrap */
.dash-header .hide-mob { font-size: 13px; }

/* Custom-header for public pages — keep its own pattern */
.custom-header .nav-link {
    color: var(--color-gray-600) !important;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.005em;
    padding: 8px 12px !important;
    border-radius: 8px;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.custom-header .nav-link:hover {
    color: var(--color-gray-900) !important; background: var(--color-gray-100);
}

/* Active sidebar item — gray-900 bg + white text + shadow-sm */
.dash-sidebar .dash-item.active > .dash-link,
.dash-sidebar .dash-item:active > .dash-link,
.dash-sidebar .dash-item:focus > .dash-link {
    background: var(--color-gray-900) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px 0 rgba(16,24,40,.05) !important;
    font-weight: 600;
}
.dash-sidebar .dash-item.active > .dash-link i,
.dash-sidebar .dash-item.active > .dash-link svg {
    color: #ffffff !important;
}
.dark .dash-sidebar .dash-item.active > .dash-link {
    background: #ffffff !important;
    color: var(--color-gray-900) !important;
}
.dark .dash-sidebar .dash-item.active > .dash-link i,
.dark .dash-sidebar .dash-item.active > .dash-link svg {
    color: var(--color-gray-900) !important;
}

/* Section captions — text-gray-400 uppercase tracking-wider text-xs */
.dash-sidebar .dash-caption {
    color: var(--color-gray-400) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;                           /* tracking-wider */
    font-size: 11px;
    font-weight: 600;
    padding: 12px 12px 4px !important;
    margin-top: 8px;
}
.custom-header .nav-item.active .nav-link,
.custom-header .nav-item .nav-link:focus,
.custom-header .nav-item.active a {
    color: var(--color-brand-500) !important; font-weight: 600;
}

/* Force body.theme-N + body.custom-color to brand */
body[class*="theme-"], body.custom-color {
    background: var(--color-canvas) !important; color: var(--color-fg) !important;
    font-family: var(--font-outfit) !important;
}
body[class*="theme-"] .bg-primary, body.custom-color .bg-primary {
    background: var(--color-brand-500) !important;
}
body[class*="theme-"] .text-primary, body.custom-color .text-primary { color: var(--color-brand-500) !important; }
body[class*="theme-"] .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link,
body[class*="theme-"] .dash-sidebar.light-sidebar .dash-navbar > .dash-item:active > .dash-link,
body[class*="theme-"] .dash-sidebar.light-sidebar .dash-navbar > .dash-item:focus > .dash-link,
body[class*="theme-"] .dash-sidebar.light-sidebar .dash-navbar > .dash-item:hover > .dash-link,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.active > .dash-link,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item:active > .dash-link,
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item:focus > .dash-link,
body.custom-color .dash-sidebar.light-sidebar .dash-navbar > .dash-item.active > .dash-link,
body.custom-color .dash-sidebar .dash-navbar > .dash-item.active > .dash-link {
    background: var(--color-gray-900) !important;
    color: #fff !important;
    box-shadow: var(--shadow-theme-xs) !important;
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item:hover > .dash-link {
    background: var(--color-gray-100) !important;
    color: var(--color-gray-900) !important;
    box-shadow: none !important;
}
body[class*="theme-"] .dash-sidebar .dash-navbar > .dash-item.active > .dash-link i,
body.custom-color .dash-sidebar .dash-navbar > .dash-item.active > .dash-link i { color: #fff !important; }
body[class*="theme-"] .dash-header .drp-language .drp-text,
body[class*="theme-"] .dash-header .dash-head-link > i:not(.nocolor),
body.custom-color .dash-header .dash-head-link > i:not(.nocolor) { color: var(--color-gray-700) !important; }
body[class*="theme-"] a:not([class]), body.custom-color a:not([class]) { color: var(--color-brand-500) !important; }
body[class*="theme-"] .btn-primary, body.custom-color .btn-primary {
    background: var(--color-brand-500) !important; border-color: var(--color-brand-500) !important; color: #fff !important;
}
body[class*="theme-"] .page-item.active .page-link, body.custom-color .page-item.active .page-link {
    background: var(--color-brand-500) !important; border-color: var(--color-brand-500) !important;
}
body[class*="theme-"] .nav-pills .nav-link.active, body.custom-color .nav-pills .nav-link.active {
    background: var(--color-brand-50) !important; color: var(--color-brand-500) !important;
}
body[class*="theme-"] .form-check-input:checked, body.custom-color .form-check-input:checked {
    background-color: var(--color-brand-500) !important; border-color: var(--color-brand-500) !important;
}
body[class*="theme-"] .list-group-item.active, body.custom-color .list-group-item.active {
    background: var(--color-brand-500) !important; border-color: var(--color-brand-500) !important; color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   19. UTILITIES
   ════════════════════════════════════════════════════════════════════════════ */
.gp-m-0 { margin: 0 !important; }
.gp-mb-1 { margin-bottom: 4px !important; }
.gp-mb-2 { margin-bottom: 8px !important; }
.gp-mb-3 { margin-bottom: 12px !important; }
.gp-mb-4 { margin-bottom: 16px !important; }
.gp-mb-6 { margin-bottom: 24px !important; }
.gp-mt-1 { margin-top: 4px !important; }
.gp-mt-2 { margin-top: 8px !important; }
.gp-mt-3 { margin-top: 12px !important; }
.gp-mt-4 { margin-top: 16px !important; }
.gp-mt-6 { margin-top: 24px !important; }
.gp-p-2 { padding: 8px !important; }
.gp-p-3 { padding: 12px !important; }
.gp-p-4 { padding: 16px !important; }
.gp-p-5 { padding: 20px !important; }
.gp-p-6 { padding: 24px !important; }

.gp-flex { display: flex; }
.gp-flex-col { display: flex; flex-direction: column; }
.gp-items-center { align-items: center; }
.gp-justify-between { justify-content: space-between; }
.gp-justify-end { justify-content: flex-end; }
.gp-gap-2 { gap: 8px; }
.gp-gap-3 { gap: 12px; }
.gp-gap-4 { gap: 16px; }
.gp-shrink-0 { flex-shrink: 0; }

.gp-rounded    { border-radius: var(--radius-lg); }
.gp-rounded-lg { border-radius: var(--radius-2xl); }
.gp-rounded-full { border-radius: 9999px; }
.gp-border     { border: 1px solid var(--color-gray-200); }

.gp-shadow-sm { box-shadow: var(--shadow-theme-xs); }
.gp-shadow    { box-shadow: var(--shadow-theme-md); }
.gp-shadow-lg { box-shadow: var(--shadow-theme-lg); }

.gp-sr-only, .visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.gp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-clickable { cursor: pointer; }
.gp-no-select { user-select: none; -webkit-user-select: none; }

/* ════════════════════════════════════════════════════════════════════════════
   20. PRINT + REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .dash-sidebar, .dash-header, .page-header-breadcrumb,
    .btn, .gp-hero-btn, .pct-customizer, .gp-icon-btn { display: none !important; }
    .gp-hero { background: #fff !important; color: #000 !important; box-shadow: none; border: 1px solid #ccc; }
    .gp-hero h1, .gp-hero h2, .gp-hero h3 { color: #000 !important; }
    .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    a { color: #000 !important; text-decoration: underline; }
    .badge { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   21. DASHBOARDS — unified pattern for all 6 portal dashboards
        (main · DMS · changes · users · risk · policies)
   Targets every existing class so view files don't need editing:
     dash-* · gh-* · dms-* · accent-* · dashboard-page-*
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Dashboard color tokens — one color per role across every dashboard ───── */
:root {
    --dash-c-brand:     var(--color-brand-500);     /* #465fff — primary */
    --dash-c-brand-bg:  var(--color-brand-50);
    --dash-c-sky:       var(--color-blue-light-500); /* info */
    --dash-c-sky-bg:    var(--color-blue-light-50);
    --dash-c-emerald:   var(--color-success-500);   /* success/positive */
    --dash-c-emerald-bg: var(--color-success-50);
    --dash-c-amber:     var(--color-warning-500);   /* warning/pending */
    --dash-c-amber-bg:  var(--color-warning-50);
    --dash-c-rose:      var(--color-error-500);     /* danger/overdue */
    --dash-c-rose-bg:   var(--color-error-50);
    --dash-c-violet:    #7a5af8;                    /* accent (compliance theme-purple-500) */
    --dash-c-violet-bg: #f4f1ff;
    --dash-c-indigo:    var(--color-brand-600);
    --dash-c-indigo-bg: var(--color-brand-100);
    --dash-c-pink:      #ee46bc;                    /* compliance theme-pink-500 */
    --dash-c-pink-bg:   #fdf2fb;
    --dash-c-orange:    var(--color-orange-500);
    --dash-c-orange-bg: var(--color-orange-50);

    /* Card grid baseline */
    --dash-card-radius: var(--radius-2xl);
    --dash-card-border: 1px solid var(--color-gray-200);
    --dash-card-shadow: var(--shadow-theme-xs);
    --dash-card-shadow-hover: var(--shadow-theme-md);
    --dash-card-bg:     var(--color-surface);
    --dash-card-pad:    20px 24px;
    --dash-gap:         16px;
}

/* ── Dashboard page wrapper ──────────────────────────────────────────────── */
.dashboard-page-wrp, .dashboard-page-card {
    background: transparent !important;
}
.dashboard-page-card { padding: 0 !important; margin-bottom: 24px !important; }

/* ── Section heading inside dashboards ───────────────────────────────────── */
.dash-section-head, .gh-section h2, .gh-section h3, .gh-section-head {
    font-size: 18px; font-weight: 600; color: var(--color-gray-900);
    margin: 0 0 4px; letter-spacing: -0.018em; line-height: 1.3;
}
.dash-section-sub, .gh-section-sub {
    font-size: var(--text-theme-sm); color: var(--color-gray-500);
    margin: 0 0 16px; line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════════════════
   21.1  HERO BANNER — used by every dashboard top section
        Selectors: .dash-welcome · .gh-hero · .dms-hero · .gh-dash-hero
   ════════════════════════════════════════════════════════════════════════════ */
/* EXACT compliance hero — light gradient (not solid blue), gray text,
   rounded-2xl, shadow-sm. Matches dashboard/qms.blade.php section 1. */
.dash-welcome, .gh-hero, .dms-hero, .gh-dash-hero, .dash-hero {
    background: linear-gradient(135deg,
        var(--color-blue-light-50) 0%,
        #ffffff 50%,
        rgba(70,95,255,.04) 100%) !important;
    color: var(--color-gray-700) !important;
    border-radius: 16px !important;                 /* rounded-2xl */
    border: 1px solid var(--color-gray-200) !important;
    padding: 24px !important;                        /* p-6 base */
    margin-bottom: 24px !important;
    box-shadow: var(--shadow-theme-xs);
    position: relative; overflow: hidden;
}
@media (min-width: 640px) {
    .dash-welcome, .gh-hero, .dms-hero, .gh-dash-hero, .dash-hero { padding: 32px !important; }
}
.dark .dash-welcome, .dark .gh-hero, .dark .dms-hero, .dark .gh-dash-hero, .dark .dash-hero {
    background: linear-gradient(135deg,
        rgba(11,165,236,.06) 0%,
        rgba(0,0,0,0) 50%,
        rgba(70,95,255,.04) 100%) !important;
    border-color: var(--color-gray-800) !important;
}
.dash-welcome::before, .gh-hero::before, .dms-hero::before, .gh-dash-hero::before, .dash-hero::before,
.dash-welcome::after, .gh-hero::after, .dms-hero::after, .gh-dash-hero::after, .dash-hero::after {
    display: none;                                   /* compliance does NOT use blob decorations */
}
.dash-welcome h1, .dash-welcome h2,
.gh-hero h1, .gh-hero h2,
.dms-hero h1, .dms-hero h2,
.gh-dash-hero h1, .gh-dash-hero h2,
.dash-welcome-text h1, .dash-welcome-text h2 {
    color: var(--color-gray-900) !important;         /* text-gray-900 */
    font-size: 24px !important;                       /* text-2xl */
    font-weight: 600 !important;
    letter-spacing: -0.018em;
    margin: 4px 0 0 !important;
    line-height: 1.2;
}
.dark .dash-welcome h1, .dark .gh-hero h1, .dark .dms-hero h1 { color: #fff !important; }
@media (min-width: 640px) {
    .dash-welcome h1, .dash-welcome h2,
    .gh-hero h1, .gh-hero h2,
    .dms-hero h1, .dms-hero h2 { font-size: 30px !important; }
}
.dash-welcome h3, .dash-welcome h4, .dash-welcome h5,
.gh-hero h3, .gh-hero h4, .gh-hero h5,
.dms-hero h3, .dms-hero h4, .dms-hero h5 {
    color: var(--color-gray-900) !important;
    font-weight: 600 !important;
}
.dark .dash-welcome h3, .dark .dash-welcome h4, .dark .dash-welcome h5,
.dark .gh-hero h3, .dark .gh-hero h4, .dark .gh-hero h5,
.dark .dms-hero h3, .dark .dms-hero h4, .dark .dms-hero h5 { color: #fff !important; }
.dash-welcome p, .gh-hero p, .dms-hero p,
.dash-welcome-text p, .gh-hero-meta, .dms-hero p {
    color: var(--color-gray-600);
    font-size: 14px;
    line-height: 1.625;                              /* leading-relaxed */
    margin: 4px 0 0;
    max-width: 768px;
}
.dark .dash-welcome p, .dark .gh-hero p, .dark .dms-hero p { color: var(--color-gray-400); }

/* Hero "eyebrow" — Quality and Training Department style */
.dash-welcome-eyebrow, .gh-hero-eyebrow, .dms-hero-eyebrow {
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.22em;
    color: var(--color-gray-400);
    display: block;
    margin: 0 0 4px;
}

/* Hero icon — drops to soft brand tile (no white-on-blue glass) */
.dash-welcome-icon, .gh-hero-avatar, .dms-hero-icon {
    width: 48px; height: 48px;
    border-radius: 12px;                              /* rounded-xl */
    background: var(--color-brand-50) !important;
    display: grid; place-items: center;
    font-size: 22px;
    color: var(--color-brand-600) !important;
    flex-shrink: 0;
    border: 1px solid var(--color-brand-100);
}
.dark .dash-welcome-icon, .dark .gh-hero-avatar, .dark .dms-hero-icon {
    background: rgba(70,95,255,.12) !important;
    border-color: rgba(70,95,255,.20);
    color: var(--color-brand-400) !important;
}

/* Hero CTA buttons — solid gray-900 (compliance) */
.dash-welcome .btn-primary, .gh-hero .btn-primary, .dms-hero .btn-primary,
.dms-hero-cta {
    background: var(--color-gray-900) !important;
    border-color: var(--color-gray-900) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 0 16px !important;
    height: 40px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: none !important;
    display: inline-flex; align-items: center; gap: 6px;
}
.dash-welcome .btn-primary:hover, .gh-hero .btn-primary:hover, .dms-hero .btn-primary:hover,
.dms-hero-cta:hover {
    background: var(--color-gray-800) !important; color: #fff !important;
}
.dash-welcome .btn:not(.btn-primary), .gh-hero .btn:not(.btn-primary), .dms-hero .btn:not(.btn-primary) {
    background: rgba(255,255,255,.7) !important;
    border: 1px solid var(--color-gray-200) !important;
    color: var(--color-gray-700) !important;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dash-welcome .btn:not(.btn-primary):hover,
.gh-hero .btn:not(.btn-primary):hover,
.dms-hero .btn:not(.btn-primary):hover {
    background: #fff !important; color: var(--color-gray-900) !important;
}

/* Hero stat strip (DMS) */
.dms-hero-stats, .gh-hero-stats {
    display: flex; flex-wrap: wrap; gap: 24px;
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.18);
}
.dms-hero-stats > *, .gh-hero-stats > * {
    color: #fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   21.2  KPI / STAT CARDS — used everywhere
        Selectors: .dash-stat · .dash-card · .gh-kpi · .gh-card · .dash-stat--*
                   .accent-* · .dms-owner-stat
   ════════════════════════════════════════════════════════════════════════════ */

/* EXACT compliance KPI card — rounded-2xl border-gray-200 bg-white p-5,
   no shadow by default, no hover lift (compliance is calm/static),
   metric value text-2xl font-semibold text-gray-900, label text-sm
   font-medium text-gray-500. */
.dash-card, .gh-card, .dms-card,
.dash-stat, .gh-kpi {
    background: #ffffff !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 16px !important;                  /* rounded-2xl */
    box-shadow: none;
    color: var(--color-gray-700);
    padding: 20px !important;                         /* p-5 */
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    position: relative;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .dash-card, .gh-card, .dms-card,
    .dash-stat, .gh-kpi { padding: 24px !important; }   /* lg:p-6 */
}
.dark .dash-card, .dark .gh-card, .dark .dms-card,
.dark .dash-stat, .dark .gh-kpi {
    background: rgba(255,255,255,.03) !important;
    border-color: var(--color-gray-800) !important;
}
.dash-card:hover, .gh-card:hover, .dms-card:hover,
.dash-stat:hover, .gh-kpi:hover {
    border-color: var(--color-gray-300) !important;
    box-shadow: var(--shadow-theme-xs);
    transform: none;                                  /* no lift — calm UI */
}
.gh-card-header { padding: 0 0 16px; border-bottom: 1px solid var(--color-gray-100); margin-bottom: 16px; }
.gh-card-body   { padding: 0; }

/* Stat layout — compliance puts icon at top-right (not left), so we
   allow either pattern via flex-row layout */
.dash-stat-row, .gh-kpi {
    display: flex; align-items: center; gap: 16px;
}
.dash-stat-icon, .gh-kpi-icon {
    width: 48px; height: 48px;
    border-radius: 12px;                              /* rounded-xl */
    display: grid; place-items: center;
    font-size: 22px;
    flex-shrink: 0;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-100);
}
.dark .dash-stat-icon, .dark .gh-kpi-icon {
    background: rgba(70,95,255,.12);
    border-color: rgba(70,95,255,.20);
    color: var(--color-brand-400);
}
.dash-stat-label, .gh-kpi-text > .gp-stat-lbl, .gh-kpi small {
    font-size: 14px;                                  /* text-sm */
    font-weight: 500;
    color: var(--color-gray-500) !important;
    margin: 0;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
}
.dark .dash-stat-label, .dark .gh-kpi small { color: var(--color-gray-400) !important; }
.dash-stat-value, .gh-kpi-text > .gp-stat-val, .gh-kpi strong,
.gh-kpi-text h3, .gh-kpi-text h4, .gh-kpi-text h5 {
    font-size: 24px;                                  /* text-2xl */
    font-weight: 600;                                 /* font-semibold */
    color: var(--color-gray-900) !important;
    line-height: 1.2;
    margin: 4px 0 0;
    letter-spacing: -0.018em;
    font-variant-numeric: tabular-nums;
}
.dark .dash-stat-value, .dark .gh-kpi strong, .dark .gh-kpi-text h3,
.dark .gh-kpi-text h4, .dark .gh-kpi-text h5 { color: #fff !important; }
.dash-stat-trend {
    margin-top: 6px;
    font-size: var(--text-theme-xs); font-weight: 500;
    color: var(--color-gray-500);
    display: inline-flex; align-items: center; gap: 4px;
}
.dash-stat-trend.up, .dash-stat-trend--up { color: var(--color-success-600); }
.dash-stat-trend.down, .dash-stat-trend--down { color: var(--color-error-600); }

/* Color variants — `dash-stat--brand`, etc. */
.dash-stat--brand   .dash-stat-icon { background: var(--dash-c-brand-bg);   color: var(--dash-c-brand); }
.dash-stat--sky     .dash-stat-icon { background: var(--dash-c-sky-bg);     color: var(--dash-c-sky); }
.dash-stat--emerald .dash-stat-icon { background: var(--dash-c-emerald-bg); color: var(--dash-c-emerald); }
.dash-stat--amber   .dash-stat-icon { background: var(--dash-c-amber-bg);   color: var(--dash-c-amber); }
.dash-stat--rose    .dash-stat-icon { background: var(--dash-c-rose-bg);    color: var(--dash-c-rose); }
.dash-stat--violet  .dash-stat-icon { background: var(--dash-c-violet-bg);  color: var(--dash-c-violet); }
.dash-stat--indigo  .dash-stat-icon { background: var(--dash-c-indigo-bg);  color: var(--dash-c-indigo); }

/* Accent variants — `gh-kpi.accent-*` (changes, users, risk, policies use this) */
.gh-kpi.accent-primary  .gh-kpi-icon { background: var(--dash-c-brand-bg);   color: var(--dash-c-brand); }
.gh-kpi.accent-info     .gh-kpi-icon { background: var(--dash-c-sky-bg);     color: var(--dash-c-sky); }
.gh-kpi.accent-success  .gh-kpi-icon { background: var(--dash-c-emerald-bg); color: var(--dash-c-emerald); }
.gh-kpi.accent-warning  .gh-kpi-icon { background: var(--dash-c-amber-bg);   color: var(--dash-c-amber); }
.gh-kpi.accent-danger   .gh-kpi-icon { background: var(--dash-c-rose-bg);    color: var(--dash-c-rose); }
.gh-kpi.accent-indigo   .gh-kpi-icon { background: var(--dash-c-indigo-bg);  color: var(--dash-c-indigo); }
.gh-kpi.accent-violet   .gh-kpi-icon { background: var(--dash-c-violet-bg);  color: var(--dash-c-violet); }
.gh-kpi.accent-pink     .gh-kpi-icon { background: var(--dash-c-pink-bg);    color: var(--dash-c-pink); }
.gh-kpi.accent-orange   .gh-kpi-icon { background: var(--dash-c-orange-bg);  color: var(--dash-c-orange); }

/* Compliance does NOT use left-edge accent stripes — removed for parity */
.dash-stat::before, .gh-kpi::before { display: none; }

/* Legacy `card.open-tickets` — same flat compliance card chrome, no lift */
.card.open-tickets, .card.close-tickets, .card.total-category {
    background: #ffffff !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 16px !important;
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.card.open-tickets:hover, .card.close-tickets:hover, .card.total-category:hover {
    border-color: var(--color-gray-300) !important;
    box-shadow: var(--shadow-theme-xs);
    transform: none;
}
.card-icon-wrp { gap: 12px !important; align-items: flex-start !important; }
.card-icon {
    width: 48px !important; height: 48px !important;
    border-radius: var(--radius-xl) !important;
    display: grid; place-items: center;
    font-size: 22px !important;
    background: var(--dash-c-brand-bg);
    color: var(--dash-c-brand);
}
.card.open-tickets   .card-icon { background: var(--dash-c-amber-bg); color: var(--dash-c-amber); }
.card.close-tickets  .card-icon { background: var(--dash-c-emerald-bg); color: var(--dash-c-emerald); }
.card.total-category .card-icon { background: var(--dash-c-brand-bg); color: var(--dash-c-brand); }
.card-content h4, .card-content h5 {
    color: var(--color-gray-900) !important; font-weight: 700 !important;
    font-size: 24px !important; margin: 0 !important;
    font-variant-numeric: tabular-nums;
}
.card-content p, .card-content small {
    color: var(--color-gray-500) !important; margin: 0 !important;
    font-size: var(--text-theme-sm); font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════════
   21.3  CHART PANELS — apex / chartjs containers
        Selectors: .dash-chart-* · .gh-chart · .gh-chart-empty · .dash-chart-icon
   ════════════════════════════════════════════════════════════════════════════ */
.gh-chart, .dash-chart-body {
    background: var(--color-surface) !important;
    border: var(--dash-card-border) !important;
    border-radius: var(--dash-card-radius) !important;
    box-shadow: var(--dash-card-shadow);
    padding: 20px 24px !important;
}
.dash-chart-head {
    display: flex; align-items: center; gap: 12px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--color-gray-100);
    margin-bottom: 16px;
}
.dash-chart-icon {
    width: 36px; height: 36px; border-radius: var(--radius-lg);
    background: var(--color-brand-50); color: var(--color-brand-500);
    display: grid; place-items: center; font-size: 18px;
    flex-shrink: 0;
}
.dash-chart-sub {
    font-size: var(--text-theme-sm); color: var(--color-gray-500);
    margin: 4px 0 0; line-height: 1.4;
}
.gh-chart-empty {
    text-align: center; padding: 48px 24px;
    color: var(--color-gray-500); font-size: var(--text-theme-sm);
}

/* ════════════════════════════════════════════════════════════════════════════
   21.4  BAR LISTS & MICRO-METERS
        Selectors: .dash-bar-* · .dms-microbar · .dms-segbar · .dash-team-meter
   ════════════════════════════════════════════════════════════════════════════ */
.dash-bar-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--color-gray-100);
}
.dash-bar-row:last-child { border-bottom: none; }
.dash-bar-name {
    flex: 1; min-width: 0;
    font-size: var(--text-theme-sm); font-weight: 500;
    color: var(--color-gray-700);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-bar-count {
    font-size: var(--text-theme-xs); color: var(--color-gray-500);
    font-weight: 600; font-variant-numeric: tabular-nums;
    min-width: 32px; text-align: end;
}
.dash-bar-track, .dms-microbar {
    flex: 0 0 120px; height: 6px;
    background: var(--color-gray-100);
    border-radius: 9999px; overflow: hidden;
}
.dash-bar-fill, .dms-microbar > * {
    height: 100%; background: var(--color-brand-500);
    border-radius: 9999px;
    transition: width var(--dur-base) var(--ease-out);
}
.dash-bar-fill.success, .dash-bar-fill--success { background: var(--color-success-500); }
.dash-bar-fill.warning, .dash-bar-fill--warning { background: var(--color-warning-500); }
.dash-bar-fill.danger,  .dash-bar-fill--danger  { background: var(--color-error-500); }
.dash-bar-fill.info,    .dash-bar-fill--info    { background: var(--color-blue-light-500); }

/* Segmented bar (DMS) */
.dms-segbar {
    display: flex; height: 8px; border-radius: 9999px; overflow: hidden;
    background: var(--color-gray-100);
}
.dms-segbar > * { height: 100%; }
.dms-seglegend {
    display: flex; flex-wrap: wrap; gap: 12px 18px;
    font-size: var(--text-theme-xs); color: var(--color-gray-500);
    margin-top: 10px;
}
.dms-seglegend > * { display: inline-flex; align-items: center; gap: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   21.5  TEAM / OWNER ROWS — DMS + main dashboard
        Selectors: .dash-team-* · .dms-owner-*
   ════════════════════════════════════════════════════════════════════════════ */
.dash-team-card {
    background: var(--color-surface) !important;
    border: var(--dash-card-border) !important;
    border-radius: var(--dash-card-radius) !important;
    padding: 16px !important;
    box-shadow: var(--dash-card-shadow);
}
.dash-team-name {
    font-size: var(--text-theme-sm); font-weight: 600;
    color: var(--color-gray-900);
}
.dash-team-mini {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--color-gray-500); font-weight: 500;
}
.dash-team-mini-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-gray-400);
}
.dash-team-meter {
    height: 6px; background: var(--color-gray-100);
    border-radius: 9999px; overflow: hidden;
    margin-top: 8px;
}
.dash-team-meter > * {
    height: 100%; background: var(--color-brand-500);
    border-radius: 9999px;
}

.dms-owner-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--color-gray-100);
}
.dms-owner-row:last-child { border-bottom: none; }
.dms-owner-av {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-brand-500); color: #fff;
    display: grid; place-items: center;
    font-size: 13px; font-weight: 600; flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
}
.dms-owner-av img { width: 100%; height: 100%; object-fit: cover; }
.dms-owner-stat {
    font-size: var(--text-theme-xs); color: var(--color-gray-500);
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════════════
   21.6  ACTIVITY FEED & GAUGES
        Selectors: .dms-act* · .dms-gauge · .dms-forecast · .dms-crit-*
   ════════════════════════════════════════════════════════════════════════════ */
.dms-activity { padding: 0; }
.dms-act {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--color-gray-100);
}
.dms-act:last-child { border-bottom: none; }
.dms-act-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-brand-500); margin-top: 6px;
    flex-shrink: 0; box-shadow: 0 0 0 3px var(--color-brand-50);
}
.dms-act-dot.success, .dms-act-dot--success { background: var(--color-success-500); box-shadow: 0 0 0 3px var(--color-success-50); }
.dms-act-dot.warning, .dms-act-dot--warning { background: var(--color-warning-500); box-shadow: 0 0 0 3px var(--color-warning-50); }
.dms-act-dot.danger,  .dms-act-dot--danger  { background: var(--color-error-500);   box-shadow: 0 0 0 3px var(--color-error-50); }
.dms-act-body {
    flex: 1; font-size: var(--text-theme-sm); color: var(--color-gray-700);
    line-height: 1.5;
}
.dms-act-body small, .dms-act-body .meta {
    display: block; font-size: 11px; color: var(--color-gray-400);
    margin-top: 2px;
}

.dms-gauge {
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
    padding: 12px; margin: 8px 0;
}
.dms-forecast {
    background: var(--color-brand-50);
    border-radius: var(--radius-xl);
    padding: 14px 16px; color: var(--color-brand-700);
    font-size: var(--text-theme-sm);
}
.dms-forecast-info { font-weight: 600; color: var(--color-brand-700); }
.dms-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dms-fin-item {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    border: 1px solid var(--color-gray-100);
}

/* Critical / attention rows (red emphasis) */
.dms-crit-row, .gh-attention {
    background: var(--color-error-50);
    border: 1px solid var(--color-error-100);
    border-radius: var(--radius-lg);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    color: var(--color-error-700);
}
.dms-crit-icon {
    color: var(--color-error-600); font-size: 18px;
    flex-shrink: 0;
}
.dms-crit-meta {
    font-size: var(--text-theme-xs); color: var(--color-error-600);
    margin: 2px 0 0;
}
.dms-days {
    font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--color-error-700);
}

/* ════════════════════════════════════════════════════════════════════════════
   21.7  PILLS, LINK BUTTONS, SKELETONS USED INSIDE DASHBOARDS
   ════════════════════════════════════════════════════════════════════════════ */
.gh-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    background: var(--color-brand-50);
    color: var(--color-brand-700);
    border: 1px solid var(--color-brand-100);
    border-radius: 9999px;
    font-size: 11px; font-weight: 500;
}
.gh-pill.is-success { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.gh-pill.is-warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-100); }
.gh-pill.is-danger  { background: var(--color-error-50);   color: var(--color-error-700);   border-color: var(--color-error-100); }
.gh-pill.is-neutral { background: var(--color-gray-100);   color: var(--color-gray-700);    border-color: var(--color-gray-200); }

.gh-link-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-brand-500); font-size: var(--text-theme-sm);
    font-weight: 500;
    padding: 6px 10px; border-radius: var(--radius);
    transition: background var(--dur-fast) var(--ease-out);
}
.gh-link-btn:hover {
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    text-decoration: none;
}

.dash-skeleton {
    background: linear-gradient(90deg,
        var(--color-gray-100) 0%,
        var(--color-gray-200) 50%,
        var(--color-gray-100) 100%);
    background-size: 200% 100%;
    animation: gp-shimmer 1.4s var(--ease-in-out) infinite;
    border-radius: var(--radius);
    color: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   21.8  DASHBOARD GRID — consistent row/col spacing across all 6 dashboards
   ════════════════════════════════════════════════════════════════════════════ */
.gh-dash .row, .dash-grid, .dashboard-page-card.row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}
.gh-section { margin-bottom: 24px; }
.gh-section > h2, .gh-section > h3 {
    color: var(--color-gray-900); font-size: 18px; font-weight: 600;
    margin: 0 0 4px;
}

/* Dark-mode tweaks for dashboards */
.dark .dash-card, .dark .gh-card, .dark .dms-card,
.dark .dash-stat, .dark .gh-kpi,
.dark .gh-chart, .dark .dash-chart-body,
.dark .dash-team-card,
.dark .card.open-tickets, .dark .card.close-tickets, .dark .card.total-category {
    background: var(--color-gray-900) !important;
    border-color: var(--color-gray-800) !important;
}
.dark .dash-stat-value, .dark .gh-kpi strong, .dark .card-content h4,
.dark .dash-section-head, .dark .gh-section h2 {
    color: #fff !important;
}
.dark .dash-stat-label, .dark .gh-kpi small, .dark .dash-section-sub,
.dark .card-content p {
    color: var(--color-gray-400) !important;
}

/* Responsive — collapse hero pad + stat layout on mobile */
@media (max-width: 640px) {
    .dash-welcome, .gh-hero, .dms-hero, .gh-dash-hero {
        padding: 20px !important;
    }
    .dash-card, .gh-card, .dash-stat, .gh-kpi { padding: 16px !important; }
    .dash-stat-value, .gh-kpi strong, .card-content h4 { font-size: 20px !important; }
    .dms-hero-stats { gap: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   END — 100% parity with /opt/compliance design system.
   Brand #465fff · Outfit font · TailAdmin grays · shadow-theme-* elevation.
   ════════════════════════════════════════════════════════════════════════════ */