/* ============================================================
   🌿 DIGITAL GREENHOUSE — Design System CSS
   ERP Hoa Linh — Creative North Star: "The Digital Greenhouse"
   
   Transforms rigid ERP into an organic, breathable workspace
   through tonal layering, editorial typography, and atmospheric depth.
   ============================================================ */

/* ===== 1. DESIGN TOKENS ===== */
/* ➤ Nguồn duy nhất: app/config/system/theme.php (SSOT)
   Mọi biến --gh-* dưới đây chỉ là "view" của token --gh-t-*
   (do ui_head_injector tự sinh). Fallback giữ nguyên giá trị
   hiện tại để an toàn khi helper chưa chạy. */
:root {
    /* ── Surface Hierarchy (Tonal Architecture) ── */
    --gh-bg: var(--gh-t-bg, #f6faff); /* Canvas / Background */
    --gh-surface: var(--gh-t-surface, #f0f5f1); /* Base surface */
    --gh-surface-low: var(
        --gh-t-surface-low,
        #e8f0e9
    ); /* Secondary areas (sidebar) */
    --gh-surface-highest: var(
        --gh-t-surface-highest,
        #dce8dd
    ); /* High-priority interactive */
    --gh-surface-lowest: var(
        --gh-t-surface-lowest,
        #ffffff
    ); /* Floating cards / active paper */
    --gh-surface-tint: var(
        --gh-t-surface-tint,
        rgba(13, 71, 161, 0.05)
    ); /* Subtle brand presence */

    /* ── Primary (Transport Blue) ── */
    --gh-primary: var(--gh-t-primary, #0d47a1);
    --gh-primary-container: var(--gh-t-primary-container, #1565c0);
    --gh-primary-fixed: var(--gh-t-primary-fixed, #90caf9);
    --gh-on-primary: var(--gh-t-on-primary, #ffffff);
    --gh-on-primary-container: var(--gh-t-on-primary-container, #e3f2fd);

    /* ── Secondary (Sage) ── */
    --gh-secondary: var(--gh-t-secondary, #4e6354);
    --gh-secondary-container: var(
        --gh-t-secondary-container,
        rgba(196, 216, 199, 0.3)
    );
    --gh-on-secondary-container: var(--gh-t-on-secondary-container, #0c1f12);

    /* ── Tertiary (Mint-Teal) ── */
    --gh-tertiary: var(--gh-t-tertiary, #3a6568);
    --gh-tertiary-container: var(--gh-t-tertiary-container, #bcebee);
    --gh-on-tertiary-container: var(--gh-t-on-tertiary-container, #002022);

    /* ── Error ── */
    --gh-error: var(--gh-t-error, #ba1a1a);
    --gh-error-container: var(--gh-t-error-container, #ffdad6);
    --gh-on-error: var(--gh-t-on-error, #ffffff);

    /* ── Text / Content ── */
    --gh-on-surface: var(--gh-t-on-surface, #0d1d27);
    --gh-on-surface-variant: var(--gh-t-on-surface-variant, #40484c);
    --gh-text-muted: var(--gh-t-text-muted, #6b7a80);

    /* ── Outline (Ghost Borders) ── */
    --gh-outline: var(--gh-t-outline, #70787c);
    --gh-outline-variant: var(
        --gh-t-outline-variant,
        rgba(188, 202, 187, 0.15)
    ); /* 15% opacity — RULE */

    /* ── Typography ── */
    --gh-font: var(
        --gh-t-typography-font,
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif
    );

    /* ── Spacing & Radius ── */
    --gh-radius-sm: var(--gh-t-radius-sm, 4px);
    --gh-radius: var(--gh-t-radius-md, 8px);
    --gh-radius-md: var(--gh-t-radius-lg, 12px);
    --gh-radius-lg: var(--gh-t-radius-xl, 16px);
    --gh-radius-xl: var(--gh-t-radius-2xl, 24px);
    --gh-spacing-1: var(--gh-t-spacing-1, 0.25rem);
    --gh-spacing-2: var(--gh-t-spacing-2, 0.5rem);
    --gh-spacing-3: var(--gh-t-spacing-3, 0.75rem);
    --gh-spacing-4: var(--gh-t-spacing-4, 1rem);
    --gh-spacing-5: var(--gh-t-spacing-5, 1.25rem);
    --gh-spacing-6: var(--gh-t-spacing-6, 1.5rem);

    /* ── Elevation (Ambient Shadows) ── */
    --gh-shadow-sm: var(--gh-t-shadow-sm, 0 2px 8px rgba(13, 29, 39, 0.04));
    --gh-shadow: var(--gh-t-shadow-md, 0 8px 32px rgba(13, 29, 39, 0.06));
    --gh-shadow-lg: var(--gh-t-shadow-lg, 0 16px 48px rgba(13, 29, 39, 0.1));
    --gh-shadow-hover: var(
        --gh-t-shadow-lg,
        0 12px 40px rgba(13, 29, 39, 0.09)
    );

    /* ── Glassmorphism ── */
    --gh-glass-bg: rgba(255, 255, 255, 0.6);
    --gh-glass-blur: blur(20px);
    --gh-glass-border: 1px solid rgba(255, 255, 255, 0.25);

    /* ── Transitions ── */
    --gh-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --gh-transition-fast: 0.15s ease;

    /* ── Dynamic User UI Customizer Variables ── */
    --app-font-scale: 1;
    --app-base-font-size: calc(14px * var(--app-font-scale));
    --sidebar-width: 260px;
    --header-height: 50px;
    --footer-height: 35px;
    --table-cell-padding: 0.5rem 0.75rem;
}

/* Base HTML font scaling */
html {
    font-size: var(--app-base-font-size, 14px) !important;
}

/* UI Density Modes */
[data-ui-density="compact"] {
    --table-cell-padding: 0.25rem 0.4rem;
}
[data-ui-density="compact"] .table td,
[data-ui-density="compact"] .table th {
    padding: var(--table-cell-padding) !important;
    font-size: 0.95em;
}
[data-ui-density="compact"] .form-control,
[data-ui-density="compact"] .form-select,
[data-ui-density="compact"] .btn {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
    font-size: 0.92em;
}

[data-ui-density="spacious"] {
    --table-cell-padding: 0.85rem 1rem;
}
[data-ui-density="spacious"] .table td,
[data-ui-density="spacious"] .table th {
    padding: var(--table-cell-padding) !important;
}
[data-ui-density="spacious"] .form-control,
[data-ui-density="spacious"] .form-select,
[data-ui-density="spacious"] .btn {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

/* Theme Modes: Dark & High Contrast (Universal Coverage) */
[data-ui-theme="dark"] {
    --gh-bg: #0f172a;
    --gh-surface: #1e293b;
    --gh-surface-low: #1e293b;
    --gh-surface-lowest: #1e293b;
    --gh-on-surface: #f8fafc;
    --gh-on-surface-variant: #cbd5e1;
    --gh-text-muted: #94a3b8;
    --ns-bg-body: #0f172a;
    --ns-sidebar-bg: #1e293b;
    --ns-text-main: #f8fafc;
    --ns-border-color: #334155;
}

/* 1. Body & Layout Backgrounds */
[data-ui-theme="dark"] body,
[data-ui-theme="dark"] #wrapper,
[data-ui-theme="dark"] #page-content-wrapper,
[data-ui-theme="dark"] .main-content,
[data-ui-theme="dark"] .container-fluid,
[data-ui-theme="dark"] .content-wrapper,
[data-ui-theme="dark"] footer,
[data-ui-theme="dark"] .portal-bottom-nav,
[data-ui-theme="dark"] .pur-bottom-nav {
    background-color: var(--gh-bg) !important;
    color: var(--gh-on-surface) !important;
}

/* 2. Overriding Bootstrap Light/White Utilities */
[data-ui-theme="dark"] .bg-white,
[data-ui-theme="dark"] .bg-light,
[data-ui-theme="dark"] .bg-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* 3. Cards, Panels & Boxes */
[data-ui-theme="dark"] .card,
[data-ui-theme="dark"] .card-header,
[data-ui-theme="dark"] .card-body,
[data-ui-theme="dark"] .card-footer,
[data-ui-theme="dark"] .box,
[data-ui-theme="dark"] .panel,
[data-ui-theme="dark"] .border {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* 4. Tables, DataTables & Lists */
[data-ui-theme="dark"] .table,
[data-ui-theme="dark"] .table > :not(caption) > * > *,
[data-ui-theme="dark"] .table td,
[data-ui-theme="dark"] .table th,
[data-ui-theme="dark"] .table-light,
[data-ui-theme="dark"] .table-responsive,
[data-ui-theme="dark"] .dataTables_wrapper {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-ui-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #1a2332 !important;
    color: #f8fafc !important;
}
[data-ui-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: #283548 !important;
    color: #ffffff !important;
}

/* 5. Sidebar & Top Navbars */
[data-ui-theme="dark"] #sidebar-wrapper,
[data-ui-theme="dark"] .sidebar,
[data-ui-theme="dark"] .sidebar-nav,
[data-ui-theme="dark"] .sidebar-link,
[data-ui-theme="dark"] #topnav-menu-bar,
[data-ui-theme="dark"] .navbar {
    background-color: #161e2e !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-ui-theme="dark"] .sidebar-link:hover,
[data-ui-theme="dark"] .sidebar-item.active > .sidebar-link {
    background-color: #1e293b !important;
    color: #64b5f6 !important;
}

/* 6. Form Controls, Selects, Input Groups */
[data-ui-theme="dark"] .form-control,
[data-ui-theme="dark"] .form-select,
[data-ui-theme="dark"] .input-group-text,
[data-ui-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-ui-theme="dark"] .select2-dropdown,
[data-ui-theme="dark"] .select2-results__option {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
[data-ui-theme="dark"] .form-control:focus,
[data-ui-theme="dark"] .form-select:focus {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
}

/* 7. Dropdown Menus, Modals & Offcanvas Drawers */
[data-ui-theme="dark"] .dropdown-menu,
[data-ui-theme="dark"] .dropdown-item,
[data-ui-theme="dark"] .modal-content,
[data-ui-theme="dark"] .modal-header,
[data-ui-theme="dark"] .modal-body,
[data-ui-theme="dark"] .modal-footer,
[data-ui-theme="dark"] .offcanvas,
[data-ui-theme="dark"] .offcanvas-body {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-ui-theme="dark"] .dropdown-item:hover,
[data-ui-theme="dark"] .dropdown-item:focus {
    background-color: #334155 !important;
    color: #ffffff !important;
}

/* 8. Text Utilities */
[data-ui-theme="dark"] .text-dark,
[data-ui-theme="dark"] .text-secondary,
[data-ui-theme="dark"] .text-muted,
[data-ui-theme="dark"] .text-black,
[data-ui-theme="dark"] label {
    color: #cbd5e1 !important;
}
[data-ui-theme="dark"] a:not(.btn):not(.nav-link) {
    color: #38bdf8;
}

/* 9. Executive Dashboard & Custom Module Cards Override */
[data-ui-theme="dark"] .exec-kpi-card,
[data-ui-theme="dark"] .chart-card,
[data-ui-theme="dark"] .module-link-card,
[data-ui-theme="dark"] .dashboard-card,
[data-ui-theme="dark"] .kpi-card,
[data-ui-theme="dark"] .stat-card,
[data-ui-theme="dark"] .info-box,
[data-ui-theme="dark"] .small-box {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-ui-theme="dark"] .kpi-value,
[data-ui-theme="dark"] .chart-card .chart-title,
[data-ui-theme="dark"] .mod-name,
[data-ui-theme="dark"] h1,
[data-ui-theme="dark"] h2,
[data-ui-theme="dark"] h3,
[data-ui-theme="dark"] h4,
[data-ui-theme="dark"] h5,
[data-ui-theme="dark"] h6 {
    color: #f8fafc !important;
}

[data-ui-theme="dark"] .kpi-label,
[data-ui-theme="dark"] .kpi-sub,
[data-ui-theme="dark"] .mod-desc,
[data-ui-theme="dark"] .section-title,
[data-ui-theme="dark"] .last-updated {
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}

/* 10. Deep Overrides for Inline Backgrounds & Text Colors */
[data-ui-theme="dark"] [style*="background: #fff"],
[data-ui-theme="dark"] [style*="background:#fff"],
[data-ui-theme="dark"] [style*="background: #ffffff"],
[data-ui-theme="dark"] [style*="background:#ffffff"],
[data-ui-theme="dark"] [style*="background-color: #fff"],
[data-ui-theme="dark"] [style*="background-color:#fff"],
[data-ui-theme="dark"] [style*="background-color: #ffffff"],
[data-ui-theme="dark"] [style*="background-color:#ffffff"],
[data-ui-theme="dark"] [style*="background: white"],
[data-ui-theme="dark"] [style*="background-color: white"] {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

[data-ui-theme="dark"] [style*="color: #1e2d45"],
[data-ui-theme="dark"] [style*="color:#1e2d45"],
[data-ui-theme="dark"] [style*="color: #1e293b"],
[data-ui-theme="dark"] [style*="color: #000"],
[data-ui-theme="dark"] [style*="color: black"],
[data-ui-theme="dark"] [style*="color: #333"] {
    color: #f8fafc !important;
}

/* ☀️ HIGH CONTRAST THEME SYSTEM (For outdoor crane / field operators) */
[data-ui-theme="high_contrast"] {
    --gh-bg: #ffffff;
    --gh-on-surface: #000000;
    --ns-bg-body: #ffffff;
    --ns-text-main: #000000;
    --ns-border-color: #000000;
}
[data-ui-theme="high_contrast"] body,
[data-ui-theme="high_contrast"] #wrapper,
[data-ui-theme="high_contrast"] #page-content-wrapper,
[data-ui-theme="high_contrast"] .main-content {
    background-color: #ffffff !important;
    color: #000000 !important;
    font-weight: 600;
}
[data-ui-theme="high_contrast"] .card,
[data-ui-theme="high_contrast"] .table,
[data-ui-theme="high_contrast"] .btn,
[data-ui-theme="high_contrast"] .form-control,
[data-ui-theme="high_contrast"] .form-select,
[data-ui-theme="high_contrast"] .dropdown-menu,
[data-ui-theme="high_contrast"] .modal-content,
[data-ui-theme="high_contrast"] .offcanvas {
    border: 2px solid #000000 !important;
    color: #000000 !important;
    background-color: #ffffff !important;
}
[data-ui-theme="high_contrast"] .text-dark,
[data-ui-theme="high_contrast"] .text-secondary,
[data-ui-theme="high_contrast"] .text-muted {
    color: #000000 !important;
    font-weight: 700;
}

/* ===== 2. TYPOGRAPHY SCALE ===== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

/* Display — Dashboard summaries */
.gh-display-md {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: var(--gh-on-surface);
}
.gh-display-sm {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.25px;
    color: var(--gh-on-surface);
}

/* Headline — Section headers */
.gh-headline-lg {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gh-on-surface);
}
.gh-headline-md {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gh-on-surface);
}

/* Title — Data anchors */
.gh-title-lg {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gh-on-surface);
}
.gh-title-md {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gh-on-surface);
}
.gh-title-sm {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gh-on-surface);
}

/* Body — Workhorse */
.gh-body-lg {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}
.gh-body-md {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
}
.gh-body-sm {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
}

/* Label — Metadata, micro-copy */
.gh-label-lg {
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.gh-label-md {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3px;
}
.gh-label-sm {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ===== 3. ANIMATIONS ===== */
@keyframes ghFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes ghSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes ghPulseGlow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(13, 71, 161, 0.15);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(13, 71, 161, 0);
    }
}
@keyframes ghShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

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

.gh-animate {
    animation: ghFadeIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.gh-animate-d1 {
    animation-delay: 0.05s;
}
.gh-animate-d2 {
    animation-delay: 0.1s;
}
.gh-animate-d3 {
    animation-delay: 0.15s;
}
.gh-animate-d4 {
    animation-delay: 0.2s;
}
.gh-animate-d5 {
    animation-delay: 0.25s;
}
.gh-animate-d6 {
    animation-delay: 0.3s;
}

/* ===== 4. BOOTSTRAP 5 OVERRIDES ===== */

/* ── 4a. Base Resets ── */
body {
    font-family: var(--gh-font);
    color: var(--gh-on-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--gh-primary);
    transition: color var(--gh-transition-fast);
}
a:hover {
    color: var(--gh-primary-container);
}

::selection {
    background: rgba(13, 71, 161, 0.15);
    color: var(--gh-on-surface);
}

/* ── 4b. Buttons ── */
.btn {
    border-radius: var(--gh-radius);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.15rem;
    transition: all var(--gh-transition);
    border: none;
    letter-spacing: 0.2px;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        var(--gh-primary) 0%,
        var(--gh-primary-container) 100%
    );
    color: var(--gh-on-primary);
    box-shadow: 0 2px 8px rgba(13, 71, 161, 0.2);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(
        135deg,
        var(--gh-primary-container) 0%,
        var(--gh-primary) 100%
    );
    box-shadow: var(--gh-shadow);
    transform: translateY(-1px);
    color: var(--gh-on-primary);
}
.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--gh-shadow-sm);
}

.btn-outline-primary {
    background: transparent;
    border: 1.5px solid var(--gh-primary);
    color: var(--gh-primary);
}
.btn-outline-primary:hover {
    background: var(--gh-primary);
    color: var(--gh-on-primary);
    box-shadow: 0 4px 12px rgba(13, 71, 161, 0.2);
}

.btn-secondary {
    background: var(--gh-glass-bg);
    backdrop-filter: var(--gh-glass-blur);
    -webkit-backdrop-filter: var(--gh-glass-blur);
    color: var(--gh-on-surface);
    border: var(--gh-glass-border);
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.8);
    color: var(--gh-on-surface);
    box-shadow: var(--gh-shadow-sm);
}

.btn-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: #fff;
    border: none;
}
.btn-success:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, var(--gh-error) 0%, #dc2626 100%);
    color: #fff;
    border: none;
}
.btn-danger:hover {
    box-shadow: 0 4px 12px rgba(186, 26, 26, 0.3);
    transform: translateY(-1px);
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #1a1a1a;
    border: none;
}

.btn-info {
    background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
    color: #fff;
    border: none;
}
.btn-info:hover {
    box-shadow: 0 4px 12px rgba(14, 116, 144, 0.3);
    transform: translateY(-1px);
}

.btn-light {
    background: var(--gh-surface-lowest);
    color: var(--gh-on-surface);
    border: 1px solid var(--gh-outline-variant);
}
.btn-light:hover {
    background: var(--gh-surface);
}

.btn-sm {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--gh-radius-sm);
}
.btn-lg {
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    border-radius: var(--gh-radius-md);
}

/* ── 4c. Form Controls ── */
.form-control,
.form-select {
    background-color: var(--gh-surface-highest);
    border: none;
    border-bottom: 2px solid var(--gh-outline-variant);
    border-radius: var(--gh-radius) var(--gh-radius) 0 0;
    color: var(--gh-on-surface);
    font-size: 0.875rem;
    padding: 0.6rem 0.85rem;
    transition:
        border-color var(--gh-transition),
        box-shadow var(--gh-transition);
}
.form-control:focus,
.form-select:focus {
    background-color: var(--gh-surface-highest);
    border-bottom-color: var(--gh-primary);
    box-shadow: 0 2px 0 0 var(--gh-primary);
    color: var(--gh-on-surface);
}
.form-control::placeholder {
    color: var(--gh-text-muted);
    opacity: 0.7;
}

.form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gh-on-surface-variant);
    letter-spacing: 0.3px;
    margin-bottom: 0.35rem;
}

.input-group-text {
    background-color: var(--gh-surface-highest);
    border: none;
    border-bottom: 2px solid var(--gh-outline-variant);
    color: var(--gh-on-surface-variant);
    border-radius: var(--gh-radius) 0 0 0;
}
.input-group .form-control {
    border-radius: 0 var(--gh-radius) 0 0;
}

.form-check-input:checked {
    background-color: var(--gh-primary);
    border-color: var(--gh-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.15);
}

.form-switch .form-check-input:checked {
    background-color: var(--gh-primary);
}

/* ── 4d. Cards ── */
.card {
    background: var(--gh-surface-lowest);
    border: none;
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow-sm);
    transition:
        box-shadow var(--gh-transition),
        transform var(--gh-transition);
}
.card:hover {
    box-shadow: var(--gh-shadow);
}

.card-header {
    background: var(--gh-surface);
    border-bottom: 1px solid var(--gh-outline-variant);
    border-radius: var(--gh-radius-md) var(--gh-radius-md) 0 0 !important;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--gh-on-surface);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--gh-surface);
    border-top: 1px solid var(--gh-outline-variant);
    border-radius: 0 0 var(--gh-radius-md) var(--gh-radius-md) !important;
}

/* ── 4e. Tables ── */
.table {
    color: var(--gh-on-surface);
    font-size: 0.84rem;
}

.table > thead > tr > th {
    background: var(--gh-surface);
    color: var(--gh-on-surface-variant);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--gh-outline-variant) !important;
    padding: 0.75rem 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--gh-outline-variant);
    vertical-align: middle;
}

.table > tbody > tr {
    transition: background-color var(--gh-transition-fast);
}
.table > tbody > tr:hover {
    background-color: var(--gh-secondary-container) !important;
}

/* table-dark is applied TO the <thead>, not a parent wrapper */
thead.table-dark > tr > th,
.table-dark > thead > tr > th {
    background: var(--gh-on-surface);
    color: var(--gh-surface-lowest);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    padding: 0.65rem 0.85rem;
    vertical-align: middle;
    border-bottom: none !important;
}

/* Contextual thead overrides */
thead.table-warning > tr > th {
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}

thead.table-danger > tr > th {
    background: rgba(186, 26, 26, 0.08);
    color: #7f1d1d;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(186, 26, 26, 0.15) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: rgba(13, 71, 161, 0.02);
}

/* Sticky table headers (used with .table-container scrollable wrapper) */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ── 4f. Modals ── */
.modal-content {
    background: var(--gh-glass-bg);
    backdrop-filter: var(--gh-glass-blur);
    -webkit-backdrop-filter: var(--gh-glass-blur);
    border: var(--gh-glass-border);
    border-radius: var(--gh-radius-lg);
    box-shadow: var(--gh-shadow-lg);
}

.modal-header {
    background: transparent;
    border-bottom: 1px solid var(--gh-outline-variant);
    padding: 1.15rem 1.5rem;
}
.modal-header .modal-title {
    font-weight: 700;
    color: var(--gh-on-surface);
}
.modal-header .btn-close {
    opacity: 0.6;
}
.modal-header .btn-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    background: transparent;
    border-top: 1px solid var(--gh-outline-variant);
    padding: 1rem 1.5rem;
}

.modal-backdrop.show {
    backdrop-filter: blur(4px);
}

/* ── 4g. Badges & Chips ── */
.badge {
    font-weight: 600;
    font-size: 0.72rem;
    padding: 0.35rem 0.65rem;
    border-radius: var(--gh-radius);
    letter-spacing: 0.3px;
}

.badge.bg-primary:not([class*="bg-opacity-"]) {
    background: var(--gh-primary) !important;
}
.badge.bg-success:not([class*="bg-opacity-"]) {
    background: linear-gradient(135deg, #10b981, #34d399) !important;
}
.badge.bg-danger:not([class*="bg-opacity-"]) {
    background: var(--gh-error) !important;
}
.badge.bg-warning:not([class*="bg-opacity-"]) {
    background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
    color: #1a1a1a !important;
}
.badge.bg-info:not([class*="bg-opacity-"]) {
    background: linear-gradient(135deg, #0e7490, #0891b2) !important;
    color: #fff !important;
}
.badge.bg-secondary:not([class*="bg-opacity-"]) {
    background: var(--gh-on-surface-variant) !important;
}

/* Badge tinted variants (bg-X bg-opacity-10 / bg-opacity-25 text-X) — ensure readability */
.badge.bg-info.bg-opacity-10,
.badge.bg-info.bg-opacity-25 {
    background: rgba(14, 116, 144, 0.12) !important;
    color: #0e7490 !important;
}
.badge.bg-primary.bg-opacity-10,
.badge.bg-primary.bg-opacity-25 {
    background: rgba(13, 71, 161, 0.12) !important;
    color: var(--gh-primary) !important;
}
.badge.bg-success.bg-opacity-10,
.badge.bg-success.bg-opacity-25 {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #059669 !important;
}
.badge.bg-danger.bg-opacity-10,
.badge.bg-danger.bg-opacity-25 {
    background: rgba(186, 26, 26, 0.08) !important;
    color: var(--gh-error) !important;
}
.badge.bg-warning.bg-opacity-10,
.badge.bg-warning.bg-opacity-25 {
    background: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
}
.badge.bg-secondary.bg-opacity-10,
.badge.bg-secondary.bg-opacity-25 {
    background: rgba(64, 72, 76, 0.08) !important;
    color: var(--gh-on-surface-variant) !important;
}

/* Status Chips — high chroma for dense tables */
.gh-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.7rem;
    border-radius: var(--gh-radius);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.gh-chip-success {
    background: var(--gh-tertiary-container);
    color: var(--gh-on-tertiary-container);
}
.gh-chip-error {
    background: var(--gh-error-container);
    color: var(--gh-error);
}
.gh-chip-warning {
    background: #fef3c7;
    color: #92400e;
}
.gh-chip-info {
    background: #e0f2fe;
    color: #075985;
}
.gh-chip-neutral {
    background: var(--gh-surface);
    color: var(--gh-on-surface-variant);
}

/* ── 4h. Alerts ── */
.alert {
    border: none;
    border-radius: var(--gh-radius-md);
    font-size: 0.85rem;
    padding: 1rem 1.25rem;
}
.alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
}
.alert-danger {
    background: rgba(186, 26, 26, 0.08);
    color: #7f1d1d;
}
.alert-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #78350f;
}
.alert-info {
    background: rgba(8, 145, 178, 0.08);
    color: #164e63;
}
.alert-primary {
    background: rgba(13, 71, 161, 0.08);
    color: #0a3579;
}

/* ── 4i. Dropdowns ── */
.dropdown-menu {
    background: var(--gh-glass-bg);
    backdrop-filter: var(--gh-glass-blur);
    -webkit-backdrop-filter: var(--gh-glass-blur);
    border: var(--gh-glass-border);
    border-radius: var(--gh-radius-md);
    box-shadow: var(--gh-shadow);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: var(--gh-radius);
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
    color: var(--gh-on-surface);
    transition: background var(--gh-transition-fast);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--gh-secondary-container);
    color: var(--gh-on-surface);
}
.dropdown-item.active,
.dropdown-item:active {
    background: var(--gh-primary);
    color: var(--gh-on-primary);
}
.dropdown-divider {
    border-color: var(--gh-outline-variant);
}

/* ── 4j. Nav Tabs & Pills ── */
.nav-tabs {
    border-bottom: 2px solid var(--gh-outline-variant);
}
.nav-tabs .nav-link {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gh-on-surface-variant);
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.65rem 1.15rem;
    margin-bottom: -2px;
    transition: all var(--gh-transition-fast);
    border-radius: 0;
}
.nav-tabs .nav-link:hover {
    color: var(--gh-primary);
    border-bottom-color: rgba(13, 71, 161, 0.3);
    background: transparent;
}
.nav-tabs .nav-link.active {
    color: var(--gh-primary);
    border-bottom-color: var(--gh-primary);
    background: transparent;
    font-weight: 700;
}

.nav-pills .nav-link {
    border-radius: var(--gh-radius);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gh-on-surface-variant);
    padding: 0.5rem 1rem;
}
.nav-pills .nav-link.active {
    background: var(--gh-primary);
    color: var(--gh-on-primary);
}

/* ── 4k. Pagination ── */
.pagination {
    gap: 4px;
}
.page-link {
    border: none;
    border-radius: var(--gh-radius) !important;
    color: var(--gh-on-surface-variant);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.45rem 0.75rem;
    transition: all var(--gh-transition-fast);
    background: transparent;
}
.page-link:hover {
    background: var(--gh-secondary-container);
    color: var(--gh-primary);
}
.page-item.active .page-link {
    background: var(--gh-primary);
    color: var(--gh-on-primary);
    box-shadow: 0 2px 6px rgba(13, 71, 161, 0.2);
}
.page-item.disabled .page-link {
    color: var(--gh-text-muted);
    opacity: 0.5;
}

/* ── 4l. Tooltips & Popovers ── */
.tooltip-inner {
    background: var(--gh-on-surface);
    border-radius: var(--gh-radius);
    font-size: 0.78rem;
    padding: 0.45rem 0.85rem;
}

/* ── 4m. Progress Bars ── */
.progress {
    border-radius: var(--gh-radius);
    background: var(--gh-surface);
    height: 8px;
}
.progress-bar {
    background: linear-gradient(
        90deg,
        var(--gh-primary),
        var(--gh-primary-fixed)
    );
    border-radius: var(--gh-radius);
}

/* ── 4n. List Groups ── */
.list-group-item {
    border: none;
    border-bottom: 1px solid var(--gh-outline-variant);
    color: var(--gh-on-surface);
    padding: 0.75rem 1rem;
    transition: background var(--gh-transition-fast);
}
.list-group-item:hover {
    background: var(--gh-secondary-container);
}
.list-group-item.active {
    background: var(--gh-primary);
    border-color: var(--gh-primary);
    color: var(--gh-on-primary);
}

/* ── 4o. Breadcrumbs ── */
.breadcrumb {
    font-size: 0.78rem;
    color: var(--gh-text-muted);
    margin-bottom: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--gh-text-muted);
}
.breadcrumb-item.active {
    color: var(--gh-on-surface-variant);
}

/* ── 4p. Bootstrap Contextual Text Color Overrides ── */
.text-primary {
    color: var(--gh-primary) !important;
}
.text-info {
    color: #0e7490 !important;
}
.text-success {
    color: #059669 !important;
}
.text-danger {
    color: var(--gh-error) !important;
}
.text-warning {
    color: #b45309 !important;
}
.text-secondary {
    color: var(--gh-on-surface-variant) !important;
}
.text-dark {
    color: var(--gh-on-surface) !important;
}
.text-muted {
    color: var(--gh-text-muted) !important;
}

/* ── 4q. Bootstrap Contextual BG Overrides ── */
/* Use --bs-*-rgb to preserve bg-opacity-* support */
.bg-primary {
    --bs-primary-rgb: 0, 107, 50;
    background-color: rgba(
        var(--bs-primary-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.bg-info {
    --bs-info-rgb: 14, 116, 144;
    background-color: rgba(
        var(--bs-info-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.bg-success {
    --bs-success-rgb: 5, 150, 105;
    background-color: rgba(
        var(--bs-success-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.bg-danger {
    --bs-danger-rgb: 186, 26, 26;
    background-color: rgba(
        var(--bs-danger-rgb),
        var(--bs-bg-opacity, 1)
    ) !important;
}
.bg-light {
    background-color: var(--gh-surface) !important;
}
.bg-dark {
    background-color: var(--gh-on-surface) !important;
}

/* ===== 5. UTILITY CLASSES ===== */

/* Surface utilities */
.gh-surface {
    background: var(--gh-surface);
}
.gh-surface-low {
    background: var(--gh-surface-low);
}
.gh-surface-high {
    background: var(--gh-surface-highest);
}
.gh-surface-card {
    background: var(--gh-surface-lowest);
}
.gh-surface-tint {
    background: var(--gh-surface-tint);
}

/* Glass panel (for floating elements) */
.gh-glass {
    background: var(--gh-glass-bg);
    backdrop-filter: var(--gh-glass-blur);
    -webkit-backdrop-filter: var(--gh-glass-blur);
    border: var(--gh-glass-border);
}

/* Ghost border (accessibility fallback) */
.gh-ghost-border {
    border: 1px solid var(--gh-outline-variant) !important;
}

/* Ambient shadow */
.gh-shadow {
    box-shadow: var(--gh-shadow);
}
.gh-shadow-sm {
    box-shadow: var(--gh-shadow-sm);
}
.gh-shadow-lg {
    box-shadow: var(--gh-shadow-lg);
}

/* Text colors */
.gh-text-primary {
    color: var(--gh-primary) !important;
}
.gh-text-muted {
    color: var(--gh-text-muted) !important;
}
.gh-text-surface {
    color: var(--gh-on-surface) !important;
}

/* Gradient text */
.gh-gradient-text {
    background: linear-gradient(
        135deg,
        var(--gh-primary),
        var(--gh-primary-container)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== 6. CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(13, 71, 161, 0.15);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(13, 71, 161, 0.25);
}

/* ===== 7. SELECT2 & DROPDOWN OVERRIDES (PREMIUM ELEVATED DROPDOWNS) ===== */

/* Base Native Form Select Upgrades */
.form-select {
    height: 42px;
    font-size: 0.875rem;
    border: 1px solid #d1d3e2;
    border-radius: 0.45rem;
    padding: 0.45rem 2.25rem 0.45rem 0.85rem;
    color: #2d3748;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234a5568' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.85rem center;
    background-size: 14px 12px;
    cursor: pointer;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out;
}

.form-select-sm {
    height: 34px !important;
    padding: 0.25rem 1.85rem 0.25rem 0.65rem !important;
    font-size: 0.8rem !important;
}

.form-select:focus {
    border-color: #0d47a1 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* Select2 Container & Single Selection Trigger */
.select2-container .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection--single,
.select2-container--bootstrap-5 .select2-selection {
    height: 42px !important;
    padding: 0.4rem 0.85rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #d1d3e2 !important;
    border-radius: 0.45rem !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease-in-out !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__rendered {
    color: #2d3748 !important;
    font-weight: 500 !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
}

.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__placeholder {
    color: #a0aec0 !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #0d47a1 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.15) !important;
}

/* Select2 Custom Arrow Icon */
.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-color: #4a5568 transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
}
.select2-container--bootstrap-5.select2-container--open
    .select2-selection--single
    .select2-selection__arrow
    b {
    border-color: transparent transparent #0d47a1 transparent !important;
    border-width: 0 4px 5px 4px !important;
}

/* Floating Elevated Dropdown Popup Box */
.select2-container--bootstrap-5 .select2-dropdown,
.select2-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 0.65rem !important;
    box-shadow:
        0 12px 28px -4px rgba(0, 0, 0, 0.14),
        0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    padding: 6px !important;
    background-color: #ffffff !important;
    margin-top: 4px !important;
    z-index: 1060 !important;
}

/* Search Box Inside Dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown {
    padding: 6px 4px 8px 4px !important;
}

.select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field {
    border-radius: 0.4rem !important;
    border: 1px solid #cbd5e1 !important;
    padding: 7px 12px !important;
    font-size: 0.85rem !important;
    background-color: #f8fafc !important;
    transition: all 0.15s ease !important;
}

.select2-container--bootstrap-5
    .select2-search--dropdown
    .select2-search__field:focus {
    border-color: #0d47a1 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 0.15rem rgba(13, 71, 161, 0.15) !important;
    outline: none !important;
}

/* Result Option Pill Items */
.select2-container--bootstrap-5 .select2-results__options {
    max-height: 250px !important;
    padding: 2px !important;
}

.select2-container--bootstrap-5 .select2-results__option {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    border-radius: 0.375rem !important;
    margin-bottom: 2px !important;
    transition: all 0.12s ease-in-out !important;
}

/* Option Hover / Focus state */
.select2-container--bootstrap-5
    .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #e3f2fd !important;
    color: #0d47a1 !important;
    font-weight: 600 !important;
}

/* Option Selected state */
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: #0d47a1 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Validation Red Border Sync */
.select2-container--bootstrap-5.is-invalid .select2-selection,
.was-validated
    select.is-invalid
    + .select2-container--bootstrap-5
    .select2-selection,
select.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

/* ===== 7.1. PREMIUM FORM INPUT CONTROLS & INPUT GROUPS ===== */

/* Base Input Controls (.form-control, textarea) */
.form-control,
textarea.form-control {
    height: 42px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #d1d3e2;
    border-radius: 0.45rem;
    padding: 0.45rem 0.85rem;
    color: #2d3748;
    background-color: #ffffff;
    transition:
        border-color 0.15s ease-in-out,
        box-shadow 0.15s ease-in-out,
        background-color 0.15s ease-in-out;
}

textarea.form-control {
    height: auto !important;
    min-height: 80px;
    padding: 0.65rem 0.85rem;
    line-height: 1.5;
}

.form-control-sm {
    height: 34px !important;
    padding: 0.25rem 0.65rem !important;
    font-size: 0.8rem !important;
    border-radius: 0.375rem !important;
}

.form-control-lg {
    height: 48px !important;
    padding: 0.65rem 1rem !important;
    font-size: 1rem !important;
    border-radius: 0.5rem !important;
}

/* Hover state */
.form-control:hover:not(:focus):not([readonly]):not(:disabled),
textarea.form-control:hover:not(:focus):not([readonly]):not(:disabled) {
    border-color: #a0aec0;
    background-color: #fafcf9;
}

/* Focus state */
.form-control:focus,
textarea.form-control:focus {
    border-color: #0d47a1 !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 71, 161, 0.15) !important;
    background-color: #ffffff !important;
    outline: none !important;
}

/* Placeholder styling */
.form-control::placeholder,
textarea.form-control::placeholder {
    color: #a0aec0;
    font-weight: 400;
    opacity: 1;
}

/* Readonly & Disabled state */
.form-control:disabled,
.form-control[readonly],
textarea.form-control:disabled,
textarea.form-control[readonly] {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed;
    opacity: 0.85;
}

/* Input Group Addons & Text */
.input-group {
    border-radius: 0.45rem;
    transition: all 0.15s ease-in-out;
}

.input-group .input-group-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #4a5568;
    background-color: #f8fafc;
    border: 1px solid #d1d3e2;
    padding: 0.45rem 0.85rem;
}

.input-group > .form-control:focus ~ .input-group-text,
.input-group > .input-group-text:has(~ .form-control:focus) {
    border-color: #0d47a1;
}

.input-group .btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
}

/* Form Labels & Helper Text */
.form-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 0.4rem;
}

.required:after,
.form-label.required:after {
    content: " *";
    color: #dc3545;
    font-weight: 700;
}

.form-text {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.35rem;
}

/* Input Error Validation State */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.15) !important;
}

.invalid-feedback {
    font-size: 0.78rem;
    font-weight: 600;
    color: #dc3545;
    margin-top: 0.3rem;
}

/* ===== 8. SWEETALERT2 OVERRIDES ===== */
.swal2-popup {
    border-radius: var(--gh-radius-lg) !important;
    font-family: var(--gh-font) !important;
}
.swal2-confirm {
    background: linear-gradient(
        135deg,
        var(--gh-primary),
        var(--gh-primary-container)
    ) !important;
    border-radius: var(--gh-radius) !important;
}
.swal2-cancel {
    border-radius: var(--gh-radius) !important;
}

/* ===== 8b. DASHBOARD UTILITIES ===== */

/* Stat Card V2 — icon circle left, metric right */
.stat-card-v2 {
    border: 1px solid transparent;
    border-radius: var(--gh-radius-lg);
    transition: all var(--gh-transition-fast);
}
.stat-card-v2:hover {
    border-color: var(--gh-primary-container);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(13, 71, 161, 0.08);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    color: #fff;
}
/* Stat-icon color variants — explicit backgrounds, no dependency on bg-opacity */
.stat-icon.bg-primary.bg-opacity-10 {
    background: rgba(13, 71, 161, 0.12) !important;
    color: var(--gh-primary) !important;
}
.stat-icon.bg-success.bg-opacity-10 {
    background: rgba(5, 150, 105, 0.12) !important;
    color: #059669 !important;
}
.stat-icon.bg-danger.bg-opacity-10 {
    background: rgba(186, 26, 26, 0.12) !important;
    color: var(--gh-error) !important;
}
.stat-icon.bg-warning.bg-opacity-10 {
    background: rgba(217, 119, 6, 0.12) !important;
    color: #b45309 !important;
}
.stat-icon.bg-info.bg-opacity-10 {
    background: rgba(14, 116, 144, 0.12) !important;
    color: #0e7490 !important;
}
.stat-icon.bg-secondary.bg-opacity-10 {
    background: rgba(108, 117, 125, 0.12) !important;
    color: #6c757d !important;
}
.stat-trend {
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
}

/* Feature Card — dark green surface (mockup "HR Daily Focus") */
.feature-card-dark {
    background: linear-gradient(135deg, var(--gh-primary) 0%, #0a3579 100%);
    color: #fff;
    border-radius: var(--gh-radius-lg);
    position: relative;
    overflow: hidden;
}
.feature-card-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 19px,
            rgba(255, 255, 255, 0.03) 19px,
            rgba(255, 255, 255, 0.03) 20px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 19px,
            rgba(255, 255, 255, 0.03) 19px,
            rgba(255, 255, 255, 0.03) 20px
        );
    pointer-events: none;
}
.feature-card-dark .card-body {
    position: relative;
    z-index: 1;
}
.feature-card-dark .task-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--gh-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.feature-card-dark .task-item:last-child {
    margin-bottom: 0;
}
.feature-card-dark .task-progress {
    height: 4px;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.feature-card-dark .task-progress-bar {
    height: 100%;
    background: var(--gh-primary-fixed, #90caf9);
    border-radius: 2px;
    transition: width 0.6s ease;
}

/* Dashboard Section spacing */
.dashboard-section {
    margin-bottom: 2rem;
}
.dashboard-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--gh-on-surface);
    margin-bottom: 0.25rem;
}
.dashboard-section-sub {
    font-size: 0.8rem;
    color: var(--gh-on-surface-variant);
}

/* Card with left accent border */
.card-accent-left {
    border-left: 4px solid var(--gh-primary) !important;
}
.card-accent-left.accent-danger {
    border-left-color: #ba1a1a !important;
}
.card-accent-left.accent-warning {
    border-left-color: #b45309 !important;
}
.card-accent-left.accent-info {
    border-left-color: #0e7490 !important;
}

/* ===== 9. RESPONSIVE — Comprehensive Breakpoints ===== */

/* ── 9a. Large Desktop / Tablet Landscape (≤1200px) ── */
@media (max-width: 1200px) {
    .btn {
        font-size: 0.82rem;
        padding: 0.45rem 1rem;
    }
    .card-body {
        padding: 1.1rem;
    }

    /* Action button groups — allow wrapping */
    .card-header .d-flex,
    .d-flex.justify-content-between,
    .d-flex.gap-2 {
        flex-wrap: wrap;
    }
}

/* ── 9b. Tablet Portrait / Small Laptop (≤992px) ── */
@media (max-width: 992px) {
    .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.85rem;
    }
    .btn-sm {
        font-size: 0.72rem;
        padding: 0.3rem 0.65rem;
    }
    .card-body {
        padding: 1rem;
    }
    .card-header {
        padding: 0.75rem 1rem;
    }
    .modal-body {
        padding: 1.15rem;
    }

    /* Tables: horizontal scroll wrapper */
    .table-responsive,
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Filter rows — wrap into multiple lines */
    .row.g-2,
    .row.g-3,
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-wrap: wrap !important;
    }

    /* Filter input/select minimum widths */
    .form-control,
    .form-select {
        min-width: 0;
        font-size: 0.82rem;
    }

    /* Card headers with action buttons — stack on narrow */
    .card-header .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Action button groups — flex-wrap */
    .card-header .btn-group,
    .card-header .d-flex.gap-2,
    .card-header .ms-auto {
        flex-wrap: wrap;
        gap: 0.35rem !important;
    }

    /* Stat cards responsive */
    .stat-card-v2 {
        margin-bottom: 0.5rem;
    }
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Feature card (dark) */
    .feature-card-dark .d-flex.align-items-center.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.75rem;
    }
}

/* ── 9c. Mobile (≤768px) ── */
@media (max-width: 768px) {
    .btn {
        font-size: 0.78rem;
        padding: 0.4rem 0.8rem;
    }
    .btn-sm {
        font-size: 0.7rem;
        padding: 0.28rem 0.5rem;
    }
    .btn-lg {
        font-size: 0.85rem;
        padding: 0.5rem 1.1rem;
    }
    .card-body {
        padding: 0.85rem;
    }
    .card-header {
        padding: 0.7rem 0.85rem;
    }
    .modal-body {
        padding: 1rem;
    }

    /* Typography scale down */
    .gh-display-md {
        font-size: 1.5rem;
    }
    .gh-display-sm {
        font-size: 1.25rem;
    }
    .gh-headline-lg {
        font-size: 1.25rem;
    }
    .gh-headline-md {
        font-size: 1.1rem;
    }

    /* Filter rows — stack vertically */
    .row.g-2 > [class*="col-"],
    .row.g-3 > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Preserve 2-col for col-6 items (stat cards) */
    .row.g-3 > .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Tables: smaller font, tighter padding */
    .table {
        font-size: 0.78rem;
    }
    .table > thead > tr > th {
        font-size: 0.68rem;
        padding: 0.5rem 0.6rem;
    }
    .table > tbody > tr > td {
        padding: 0.5rem 0.6rem;
    }

    /* Hide less important table columns on mobile */
    .table .d-none-mobile {
        display: none !important;
    }

    /* Breadcrumb compact */
    .breadcrumb {
        font-size: 0.7rem;
    }

    /* Pagination compact */
    .page-link {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }

    /* Card header action buttons — stack fully */
    .card-header .d-flex.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .card-header .btn-group,
    .card-header .d-flex.gap-2 {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Select2 compact */
    .select2-container--bootstrap-5 .select2-selection {
        min-height: 34px;
    }

    /* Nav tabs — scroll horizontal */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 0.5rem 0.85rem;
    }
}

/* ── 9d. Small Mobile (≤576px) ── */
@media (max-width: 576px) {
    .btn {
        font-size: 0.75rem;
        padding: 0.35rem 0.7rem;
    }

    /* All flex containers should wrap */
    .d-flex {
        flex-wrap: wrap;
    }

    /* Modal full-width on small screens */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .gh-display-md {
        font-size: 1.25rem;
    }
    .gh-display-sm {
        font-size: 1.1rem;
    }

    /* Cards - reduce radius for edge-to-edge feel */
    .card {
        border-radius: var(--gh-radius);
    }

    /* Stat cards — more compact */
    .stat-card-v2 .card-body {
        padding: 0.75rem;
    }
    .stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* ===== 10. NESTED DROPDOWN (ACCORDION & HOVER SUBMENU) ===== */
.dropdown-menu li {
    position: relative;
}
.dropdown-menu .dropdown-submenu {
    display: none;
    position: static;
    margin-top: 0;
    border: 0;
    box-shadow: none;
    background-color: transparent;
    padding-left: 0.75rem;
    width: 100%;
    border-left: 2px solid var(--gh-outline-variant, #e9ecef);
    margin-left: 0.5rem;
}
.dropdown-menu .dropdown-submenu.open {
    display: block;
}
.dept-toggle-btn {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.dept-toggle-btn:hover {
    background: #e9ecef;
}
.dept-toggle-btn i {
    transition: transform 0.2s;
    font-size: 0.65em;
}
.dept-toggle-btn.expanded i {
    transform: rotate(90deg);
}
.dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
.dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.dropdown-menu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Required label indicator */
.form-label.required:after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}