/* ================================
   CSS Custom Properties for Theme Support
   ================================ */
:root {
    /* ================================
       Tetra Tech brand palette (source of truth)
       ================================ */
    --tt-blue: #005596;        /* Tetra Tech primary blue */
    --tt-blue-dark: #003d6b;
    --tt-blue-deep: #002542;
    --tt-navy: #002d62;
    --tt-sky: #e8f2f9;         /* light blue tint */
    --tt-sky-deep: #d0e4f2;
    --tt-accent: #00a3c9;      /* cyan accent */
    --tt-ink: #1b2838;         /* primary text */
    --tt-muted: #5a6b7c;       /* secondary text */
    --tt-border: #b8cfe0;
    --tt-success: #2e7d46;
    --tt-success-tint: #e6f4ea;
    --tt-warning: #b9770a;
    --tt-warning-tint: #fff8e6;
    --tt-error: #b00020;
    --tt-error-tint: #fbe9ec;
    --tt-blue-gradient: linear-gradient(135deg, #005596 0%, #00447c 100%);

    /* ---- Surfaces & text ---- */
    --bg-primary: #ffffff;        /* cards / elevated surfaces */
    --bg-secondary: #f4f8fb;      /* app background (sky-tinted neutral) */
    --bg-tertiary: #e8f2f9;       /* subtle fills, hover rows */
    --text-primary: var(--tt-ink);
    --text-secondary: var(--tt-muted);
    --text-muted: #93a3b2;
    --border-color: #dde7f0;
    --border-hover: var(--tt-border);
    --shadow-color: rgba(0, 39, 77, 0.10);
    --hover-bg: rgba(0, 85, 150, 0.05);
    --focus-ring: rgba(0, 85, 150, 0.35);

    /* ---- Accent (Tetra Tech blue) ---- */
    --accent: var(--tt-blue);
    --accent-hover: var(--tt-blue-dark);
    --accent-active: var(--tt-blue-deep);
    --accent-soft: var(--tt-sky);       /* tint background */
    --accent-soft-border: var(--tt-border);
    --accent-contrast: #ffffff;

    /* ---- Semantic solids ---- */
    --success: var(--tt-success);
    --warning: var(--tt-warning);
    --danger: var(--tt-error);
    --info: var(--tt-accent);

    /* Alert colors - light mode */
    --alert-success-bg: var(--tt-success-tint);
    --alert-success-text: #1c5730;
    --alert-danger-bg: var(--tt-error-tint);
    --alert-danger-text: #8a0019;
    --alert-warning-bg: var(--tt-warning-tint);
    --alert-warning-text: #855405;
    --alert-info-bg: var(--tt-sky);
    --alert-info-text: var(--tt-blue-dark);

    /* Button variants */
    --btn-close-filter: none;

    /* ---- Brand palette (wordmark / legacy) ---- */
    --brand-navy: var(--tt-navy);
    --brand-blue: var(--tt-blue);
    --brand-deep-blue: var(--tt-blue-deep);
    --brand-light-blue: #f4f8fb;  /* neutral app bg */
    --brand-gradient: var(--tt-blue-gradient);
    --brand-wordmark-gradient: linear-gradient(135deg, #003a79 0%, #005eb8 60%, #1b89d0 100%);

    /* ---- Radius scale ---- */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* ---- Elevation (soft, layered) ---- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12), 0 4px 10px rgba(15, 23, 42, 0.06);
    --shadow-focus: 0 0 0 3px var(--focus-ring);

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 140ms;
    --transition: 200ms;

    /* ---- Typography ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Dark mode colors (Tetra Tech aligned dark) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0f1b26;      /* elevated surface (navy-tinted) */
        --bg-secondary: #0a141d;    /* app background */
        --bg-tertiary: #16283a;
        --text-primary: #e6eef5;
        --text-secondary: #9db2c4;
        --text-muted: #6e8299;
        --border-color: #223648;
        --border-hover: #33506b;
        --shadow-color: rgba(0, 0, 0, 0.5);
        --hover-bg: rgba(255, 255, 255, 0.06);
        --focus-ring: rgba(74, 163, 217, 0.45);

        --accent: #4aa3d9;          /* lightened Tetra Tech blue for contrast */
        --accent-hover: #6cb8e3;
        --accent-active: #2f8bc4;
        --accent-soft: #10283b;
        --accent-soft-border: #1d3a52;

        --success: #4cc97e;
        --warning: #e0a53a;
        --danger: #f0787f;
        --info: #35c0dd;

        --brand-light-blue: var(--bg-secondary);
        --brand-blue: #4aa3d9;
        --brand-navy: #0f1b26;

        /* Alert colors - dark mode */
        --alert-success-bg: #10281d;
        --alert-success-text: #7ee2a8;
        --alert-danger-bg: #2a1416;
        --alert-danger-text: #f4a3a9;
        --alert-warning-bg: #2a2110;
        --alert-warning-text: #f7d488;
        --alert-info-bg: #10242c;
        --alert-info-text: #8fd8ea;

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);

        /* Button variants */
        --btn-close-filter: brightness(0) invert(1);
    }
}

/* Manual dark mode toggle support */
[data-theme="dark"] {
    --bg-primary: #0f1b26;
    --bg-secondary: #0a141d;
    --bg-tertiary: #16283a;
    --text-primary: #e6eef5;
    --text-secondary: #9db2c4;
    --text-muted: #6e8299;
    --border-color: #223648;
    --border-hover: #33506b;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --hover-bg: rgba(255, 255, 255, 0.06);
    --focus-ring: rgba(74, 163, 217, 0.45);

    --accent: #4aa3d9;
    --accent-hover: #6cb8e3;
    --accent-active: #2f8bc4;
    --accent-soft: #10283b;
    --accent-soft-border: #1d3a52;

    --success: #4cc97e;
    --warning: #e0a53a;
    --danger: #f0787f;
    --info: #35c0dd;

    --brand-light-blue: var(--bg-secondary);
    --brand-blue: #4aa3d9;
    --brand-navy: #0f1b26;

    --alert-success-bg: #10281d;
    --alert-success-text: #7ee2a8;
    --alert-danger-bg: #2a1416;
    --alert-danger-text: #f4a3a9;
    --alert-warning-bg: #2a2110;
    --alert-warning-text: #f7d488;
    --alert-info-bg: #10242c;
    --alert-info-text: #8fd8ea;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.6);

    --btn-close-filter: brightness(0) invert(1);
}

/* ================================
   Universal Theme Application
   ================================ */

/* ================================
   Base Styles
   ================================ */

/* Main body styling with theme-aware background and smooth transitions */
body {
    background-color: var(--brand-light-blue);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
    letter-spacing: -0.018em;
    font-weight: 700;
}

/* Dark mode body background */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg-secondary) !important;
    }
}

[data-theme="dark"] {
    --brand-light-blue: var(--bg-secondary);
}

[data-theme="dark"] body {
    background-color: var(--bg-secondary) !important;
}

/* ================================
   Card Components
   ================================ */

/* Card container with rounded corners, shadow, and hover effects */
.card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: visible; /* Changed to visible for sticky headers - rounded corners handled by card-body */
    transition: transform var(--transition) var(--ease-out), box-shadow var(--transition) var(--ease-out), border-color var(--transition) var(--ease-out);
}

/* Standardized Tetra Tech blue header - applied uniformly to ALL card headers,
   neutralizing Bootstrap's contextual bg-* colors so the whole app is cohesive. */
.card-header:not(.action-card-header):not(.activity-card-header),
.card-header.bg-primary:not(.action-card-header):not(.activity-card-header),
.card-header.bg-secondary:not(.action-card-header):not(.activity-card-header),
.card-header.bg-info:not(.action-card-header):not(.activity-card-header),
.card-header.bg-success:not(.action-card-header):not(.activity-card-header),
.card-header.bg-danger:not(.action-card-header):not(.activity-card-header),
.card-header.bg-warning:not(.action-card-header):not(.activity-card-header),
.card-header.bg-dark:not(.action-card-header):not(.activity-card-header),
.card-header.bg-light:not(.action-card-header):not(.activity-card-header) {
    background: var(--tt-blue) !important;
    color: #ffffff !important;
    border-bottom: none;
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 1rem 1.5rem;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

/* Ensure all header content (icons, muted text, links) stays white/legible.
   Custom rich headers (admin action/activity cards) keep their own dark-on-light styling. */
.card-header:not(.action-card-header):not(.activity-card-header),
.card-header:not(.action-card-header):not(.activity-card-header) h1,
.card-header:not(.action-card-header):not(.activity-card-header) h2,
.card-header:not(.action-card-header):not(.activity-card-header) h3,
.card-header:not(.action-card-header):not(.activity-card-header) h4,
.card-header:not(.action-card-header):not(.activity-card-header) h5,
.card-header:not(.action-card-header):not(.activity-card-header) h6,
.card-header:not(.action-card-header):not(.activity-card-header) i,
.card-header:not(.action-card-header):not(.activity-card-header) svg,
.card-header:not(.action-card-header):not(.activity-card-header) a,
.card-header:not(.action-card-header):not(.activity-card-header) .text-muted,
.card-header:not(.action-card-header):not(.activity-card-header) small,
.card-header:not(.action-card-header):not(.activity-card-header) .text-white-50 {
    color: #ffffff !important;
}

.card-header .text-muted,
.card-header .text-white-50,
.card-header small {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Standardize card header text size - all h5 and h6 should have consistent sizing */
/* Card Header Text Standardization - Apply to ALL header tags (h1-h6) */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.card-header h1.mb-0,
.card-header h2.mb-0,
.card-header h3.mb-0,
.card-header h4.mb-0,
.card-header h5.mb-0,
.card-header h6.mb-0 {
    margin-bottom: 0 !important;
}

.card-body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 1.5rem;
    overflow: visible !important; /* Critical for sticky headers to work */
    border-radius: 0 0 var(--radius-lg) var(--radius-lg); /* Maintain rounded corners at bottom */
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-hover);
}

/* ================================
   Table Components
   ================================ */

/* Base table styling using CSS variables for theme support */
.table {
    color: var(--text-primary) !important;
    --bs-table-bg: var(--bg-primary);
    background-color: var(--bg-primary);
}

    .table th,
    .table thead th {
        background: var(--tt-sky) !important;
        color: var(--tt-blue-dark) !important;
        border-color: var(--tt-border);
        text-transform: uppercase;
        letter-spacing: 0.045em;
        font-size: 0.75rem;
        font-weight: 700;
        position: sticky;
        top: 0; /* Required for stickiness - sticks to viewport top */
        z-index: 10;
        box-shadow: inset 0 -1px 0 var(--tt-border);
    }

    /* Neutralize Bootstrap's table-dark so it matches other tables */
    .table-dark th,
    .table-dark thead th,
    .table thead.table-dark th,
    .table > :not(caption) > * > .table-dark {
        background: var(--tt-sky) !important;
        color: var(--tt-blue-dark) !important;
        border-color: var(--tt-border) !important;
    }

    /* Dark mode support for table headers */
    [data-theme="dark"] .table th,
    [data-theme="dark"] .table thead th {
        background: #1e2c3e !important;
        color: #cfe0f0 !important;
        border-color: var(--border-color) !important;
        border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
    }
    
    @media (prefers-color-scheme: dark) {
        .table th,
        .table thead th {
            background: #1e2c3e !important;
            color: #cfe0f0 !important;
            border-color: var(--border-color) !important;
            border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
        }
    }

    .table td,
    .table tbody td {
        background-color: var(--bg-primary) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color);
    }

.table-hover tbody tr:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(37, 99, 235, 0.035) !important;
}

    .table-striped > tbody > tr:nth-of-type(odd) > td {
        background-color: transparent !important;
        color: var(--text-primary) !important;
    }

.table-striped > tbody > tr:nth-of-type(even) > td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Table enhancements - sticky headers for better readability on scroll */
/* Sticky headers work with main page scroll, not table container scroll */
.table {
    border-collapse: separate;
    position: relative;
    width: 100%;
}

.table thead {
    position: relative;
}

/* ============================================
   STICKY TABLE HEADERS FOR MAIN PAGE SCROLL
   ============================================
   Critical: For sticky to work with main page scroll:
   1. NO parent container can have overflow: hidden/auto/scroll
   2. table-responsive must NOT create scroll context
   3. Headers stick to viewport, not parent container
   ============================================ */

/* Ensure body and html don't interfere with sticky positioning */
html, body {
    overflow-x: visible !important;
    overflow-y: auto !important; /* Allow main page scroll */
}

/* Ensure container-fluid doesn't create scroll context */
.container-fluid {
    overflow: visible !important; /* Critical: no overflow restrictions */
}

/* Card body should allow overflow for sticky headers */
.card-body {
    overflow: visible !important; /* Critical: no overflow restrictions for sticky */
}

/* CRITICAL: table-responsive - let DataTables handle scrolling */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important; /* Let DataTables handle vertical scroll */
    position: relative !important;
}

/* When table-responsive contains a DataTable, remove its own scrollbar */
.dataTables_wrapper .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important; /* DataTables will handle vertical scroll */
    max-height: none !important; /* Remove max-height to prevent container scrollbar */
}

/* Prevent collapse functionality on cards without data-bs-toggle attribute */
.card .card-header:not([data-bs-toggle="collapse"]) {
    cursor: default !important;
    pointer-events: auto !important;
}

/* Ensure card headers without collapse don't have hover effects */
.card .card-header:not([data-bs-toggle="collapse"]):hover {
    background-color: var(--tt-blue) !important;
}

/* Sticky headers - stick to top of table-responsive container */
.table thead th {
    position: sticky !important;
    top: 0 !important; /* Sticks to top of table-responsive container */
    z-index: 1020 !important; /* High z-index to stay above content */
    background: var(--tt-sky) !important;
    background-color: var(--tt-sky) !important; /* Ensure solid background */
    color: var(--tt-blue-dark) !important;
    box-shadow: inset 0 -1px 0 var(--tt-border);
    font-size: 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

/* When table-responsive is used, headers stick to top of scrollable container */
.table-responsive .table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1020 !important;
    background: var(--tt-sky) !important;
    background-color: var(--tt-sky) !important;
    color: var(--tt-blue-dark) !important;
}

/* Dark mode support for sticky headers */
[data-theme="dark"] .table thead th,
[data-theme="dark"] .table-responsive .table thead th {
    background: #1e2c3e !important;
    background-color: #1e2c3e !important;
    color: #cfe0f0 !important;
    border-color: var(--border-color) !important;
    border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
}

@media (prefers-color-scheme: dark) {
    .table thead th,
    .table-responsive .table thead th {
        background: #1e2c3e !important;
        background-color: #1e2c3e !important;
        color: #cfe0f0 !important;
        border-color: var(--border-color) !important;
        border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
    }
}

/* Ensure thead itself doesn't interfere */
.table thead {
    position: relative !important;
}

/* Additional fix: Ensure table itself doesn't create scroll context */
.table {
    position: relative !important;
}

/* Ensure no parent wrapper creates scroll context that would break sticky */
.table-wrapper,
.table-container {
    overflow: visible !important;
}


/* Ensure tables wrapped in .table-responsive allow scrolling with sticky headers */
/* Note: overflow-y is visible so sticky headers work with main page scroll */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important; /* Critical: allows sticky headers to work with main scroll */
    box-shadow: inset 0 0 0 1px var(--border-color);
    border-radius: 0.5rem;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.table-responsive .table {
    margin-bottom: 0;
}

.table tbody tr:last-of-type td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    box-shadow: inset 0 0 0 999px rgba(0, 94, 184, 0.08);
}

.table td,
.table tbody td {
    font-size: 0.8rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    min-width: fit-content; /* Allow content-based width calculation */
    max-width: none; /* Remove max-width restriction */
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Reduce padding for specific columns to make room for action icons */
.table td:not(.action-column),
.table th:not(:has(.action-column)) {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Decrease overall table font size */
.table,
.table th,
.table td {
    font-size: 0.8rem;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
    font-size: 0.8rem;
}

.table td i,
.table td svg,
.table th i,
.table th svg {
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
}

.table .btn i,
.table .btn svg {
    font-size: 0.72rem;
    margin-right: 0.3rem;
}

/* DataTables specific - using CSS variables */
.dataTables_wrapper {
    color: var(--text-primary);
}

.dataTables_filter input {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-primary);
}

.dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 4px;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    position: sticky;
    top: 0; /* Sticks to viewport top when scrolling main page */
    z-index: 10;
    background: var(--tt-sky) !important;
    color: var(--tt-blue-dark) !important;
    font-weight: 700;
    font-size: 0.78rem;
    box-shadow: inset 0 -1px 0 var(--tt-border);
}

/* Light-mode: neutralize Bootstrap table-light headers to the sky style */
.table-light th,
thead.table-light th,
.table thead.table-light th {
    background: var(--tt-sky) !important;
    background-color: var(--tt-sky) !important;
    color: var(--tt-blue-dark) !important;
    border-color: var(--tt-border) !important;
}

/* Dark mode support for table headers - elevated slate, clearly above rows */
[data-theme="dark"] .table th,
[data-theme="dark"] .table thead th,
[data-theme="dark"] table thead th,
[data-theme="dark"] .table-responsive .table thead th,
[data-theme="dark"] .table-responsive table thead th,
[data-theme="dark"] .dataTables_wrapper table.dataTable thead th {
    background: #1e2c3e !important;
    background-color: #1e2c3e !important;
    color: #cfe0f0 !important;
    border-color: var(--border-color) !important;
    border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
}

/* Dark mode support for table-light headers */
[data-theme="dark"] .table-light th,
[data-theme="dark"] thead.table-light th,
[data-theme="dark"] .table thead.table-light th {
    background: #1e2c3e !important;
    background-color: #1e2c3e !important;
    color: #cfe0f0 !important;
    border-color: var(--border-color) !important;
    border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
}

@media (prefers-color-scheme: dark) {
    .table th,
    .table thead th,
    table thead th,
    .table-responsive .table thead th,
    .table-responsive table thead th {
        background: #1e2c3e !important;
        background-color: #1e2c3e !important;
        color: #cfe0f0 !important;
        border-color: var(--border-color) !important;
        border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
    }
    
    .table-light th,
    thead.table-light th,
    .table thead.table-light th {
        background: #1e2c3e !important;
        background-color: #1e2c3e !important;
        color: #cfe0f0 !important;
        border-color: var(--border-color) !important;
        border-bottom: 2px solid rgba(0, 163, 201, 0.35) !important;
    }
}

/* ============================================================
   Dark mode: contextual highlighted rows/cells
   Bootstrap keeps light pastel backgrounds on these classes even
   in dark mode, which collides with the light body text and makes
   highlighted rows unreadable (light-on-light). Force dark semantic
   tints with light text so they stay clear. Applies to rows AND
   in-table bg-* utility highlights (scoped to .table to avoid
   touching badges/buttons).
   ============================================================ */
[data-theme="dark"] .table tr.table-success,
[data-theme="dark"] .table tr.table-success > *,
[data-theme="dark"] .table td.table-success,
[data-theme="dark"] .table th.table-success,
[data-theme="dark"] .table tr.bg-success,
[data-theme="dark"] .table tr.bg-success > *,
[data-theme="dark"] .table td.bg-success,
[data-theme="dark"] .table th.bg-success {
    background-color: rgba(46, 125, 70, 0.28) !important;
    color: #d7f0de !important;
    border-color: rgba(46, 125, 70, 0.4) !important;
}

[data-theme="dark"] .table tr.table-warning,
[data-theme="dark"] .table tr.table-warning > *,
[data-theme="dark"] .table td.table-warning,
[data-theme="dark"] .table th.table-warning,
[data-theme="dark"] .table tr.bg-warning,
[data-theme="dark"] .table tr.bg-warning > *,
[data-theme="dark"] .table td.bg-warning,
[data-theme="dark"] .table th.bg-warning {
    background-color: rgba(185, 119, 10, 0.30) !important;
    color: #f6e2bf !important;
    border-color: rgba(185, 119, 10, 0.4) !important;
}

[data-theme="dark"] .table tr.table-info,
[data-theme="dark"] .table tr.table-info > *,
[data-theme="dark"] .table td.table-info,
[data-theme="dark"] .table th.table-info,
[data-theme="dark"] .table tr.bg-info,
[data-theme="dark"] .table tr.bg-info > *,
[data-theme="dark"] .table td.bg-info,
[data-theme="dark"] .table th.bg-info {
    background-color: rgba(0, 163, 201, 0.24) !important;
    color: #cdeef6 !important;
    border-color: rgba(0, 163, 201, 0.4) !important;
}

[data-theme="dark"] .table tr.table-danger,
[data-theme="dark"] .table tr.table-danger > *,
[data-theme="dark"] .table td.table-danger,
[data-theme="dark"] .table th.table-danger,
[data-theme="dark"] .table tr.bg-danger,
[data-theme="dark"] .table tr.bg-danger > *,
[data-theme="dark"] .table td.bg-danger,
[data-theme="dark"] .table th.bg-danger {
    background-color: rgba(176, 0, 32, 0.30) !important;
    color: #f6cdd4 !important;
    border-color: rgba(176, 0, 32, 0.4) !important;
}

[data-theme="dark"] .table tr.table-primary,
[data-theme="dark"] .table tr.table-primary > *,
[data-theme="dark"] .table td.table-primary,
[data-theme="dark"] .table th.table-primary {
    background-color: rgba(0, 85, 150, 0.32) !important;
    color: #cfe0f0 !important;
    border-color: rgba(0, 85, 150, 0.45) !important;
}

[data-theme="dark"] .table tr.table-active,
[data-theme="dark"] .table tr.table-active > *,
[data-theme="dark"] .table td.table-active,
[data-theme="dark"] .table th.table-active,
[data-theme="dark"] .table tr.table-secondary,
[data-theme="dark"] .table tr.table-secondary > *,
[data-theme="dark"] .table td.table-secondary,
[data-theme="dark"] .table th.table-secondary {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: var(--text-primary) !important;
}

@media (prefers-color-scheme: dark) {
    .table tr.table-success,
    .table tr.table-success > *,
    .table td.table-success,
    .table th.table-success,
    .table tr.bg-success,
    .table tr.bg-success > *,
    .table td.bg-success,
    .table th.bg-success {
        background-color: rgba(46, 125, 70, 0.28) !important;
        color: #d7f0de !important;
        border-color: rgba(46, 125, 70, 0.4) !important;
    }

    .table tr.table-warning,
    .table tr.table-warning > *,
    .table td.table-warning,
    .table th.table-warning,
    .table tr.bg-warning,
    .table tr.bg-warning > *,
    .table td.bg-warning,
    .table th.bg-warning {
        background-color: rgba(185, 119, 10, 0.30) !important;
        color: #f6e2bf !important;
        border-color: rgba(185, 119, 10, 0.4) !important;
    }

    .table tr.table-info,
    .table tr.table-info > *,
    .table td.table-info,
    .table th.table-info,
    .table tr.bg-info,
    .table tr.bg-info > *,
    .table td.bg-info,
    .table th.bg-info {
        background-color: rgba(0, 163, 201, 0.24) !important;
        color: #cdeef6 !important;
        border-color: rgba(0, 163, 201, 0.4) !important;
    }

    .table tr.table-danger,
    .table tr.table-danger > *,
    .table td.table-danger,
    .table th.table-danger,
    .table tr.bg-danger,
    .table tr.bg-danger > *,
    .table td.bg-danger,
    .table th.bg-danger {
        background-color: rgba(176, 0, 32, 0.30) !important;
        color: #f6cdd4 !important;
        border-color: rgba(176, 0, 32, 0.4) !important;
    }

    .table tr.table-primary,
    .table tr.table-primary > *,
    .table td.table-primary,
    .table th.table-primary {
        background-color: rgba(0, 85, 150, 0.32) !important;
        color: #cfe0f0 !important;
        border-color: rgba(0, 85, 150, 0.45) !important;
    }

    .table tr.table-active,
    .table tr.table-active > *,
    .table td.table-active,
    .table th.table-active,
    .table tr.table-secondary,
    .table tr.table-secondary > *,
    .table td.table-secondary,
    .table th.table-secondary {
        background-color: rgba(255, 255, 255, 0.06) !important;
        color: var(--text-primary) !important;
    }
}

.dataTables_wrapper table.dataTable {
    width: 100% !important;
}

/* Note: .dataTables_scrollBody scrolling is handled in rules below */

.pagination .page-link {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    .pagination .page-link:hover {
        background-color: var(--hover-bg);
        border-color: var(--border-hover);
        color: var(--text-primary);
    }

.pagination .page-item.active .page-link {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #ffffff;
}

/* ================================
   Form Components
   ================================ */

/* Form inputs and selects with theme-aware styling */
.form-control,
.form-select {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out);
}

    .form-control:hover,
    .form-select:hover {
        border-color: var(--border-hover);
    }

    .form-control:focus,
    .form-select:focus {
        background-color: var(--bg-primary);
        color: var(--text-primary);
        border-color: var(--accent);
        box-shadow: var(--shadow-focus);
    }

    .form-control::placeholder {
        color: var(--text-muted);
    }

.input-group-text {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}

/* Form labels */
.form-label {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.35rem;
}

/* Checkboxes / radios adopt the accent */
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.form-check-input:focus {
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}

.form-switch .form-check-input:focus {
    box-shadow: var(--shadow-focus);
}

/* ================================
   Navigation Bar
   ================================ */

/* Primary navbar with refined navy brand surface */
.navbar.bg-primary,
.navbar-dark.bg-primary {
    background-color: var(--brand-navy) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.06));
    box-shadow: var(--shadow-sm);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    /* White text for excellent contrast on blue background - works in both light and dark modes */
    .navbar.bg-primary .navbar-brand,
    .navbar.bg-primary .nav-link,
    .navbar.bg-primary .navbar-text,
    .navbar.bg-primary .dropdown-toggle {
        color: rgba(255, 255, 255, 0.9) !important;
        font-weight: 500;
        letter-spacing: 0.005em;
    }

    .navbar.bg-primary i.fas,
    .navbar.bg-primary i.far,
    .navbar.bg-primary i.fab,
    .navbar.bg-primary i.bi {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    .navbar.bg-primary .nav-link {
        border-radius: var(--radius-md);
        transition: background-color var(--transition-fast) var(--ease-out),
                    color var(--transition-fast) var(--ease-out);
    }

        .navbar.bg-primary .nav-link:hover,
        .navbar.bg-primary .nav-link:focus,
        .navbar.bg-primary .dropdown-toggle:hover {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.14) !important;
        }

        .navbar.bg-primary .nav-link.active {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.18) !important;
        }

.navbar-dark,
.navbar[class*="bg-"]:not(.bg-primary) {
    background-color: var(--bg-secondary) !important;
}

.navbar-brand,
.navbar-nav .nav-link,
.navbar-text {
    color: var(--text-primary) !important;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background-color: var(--hover-bg) !important;
        color: var(--text-primary) !important;
    }

.navbar-toggler {
    border-color: var(--border-color);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================================
   Dropdown Menus
   ================================ */

/* Dropdown menu styling with theme support */
.dropdown-menu {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.35rem;
    z-index: 9999 !important; /* Ensure dropdown overlays everything */
    position: absolute !important;
}

.dropdown-item {
    border-radius: var(--radius-sm);
}

/* Dropdown items should not truncate text */
.dropdown-menu .dropdown-item {
    white-space: nowrap !important;
    min-width: max-content;
}

/* When dropdown is shown, ensure it's on top */
.dropdown-menu.show {
    z-index: 10001 !important;
}

/* Action column dropdowns - open horizontally beside icon with high z-index */
.table td.action-column .dropdown-menu,
.action-buttons-grid-2x2 .dropdown-menu {
    z-index: 10050 !important;
    position: absolute !important;
    min-width: auto !important;
    width: auto !important;
    top: 0 !important;
    bottom: auto !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
    border-radius: 0.375rem !important;
}

.table td.action-column .dropdown-menu.show,
.action-buttons-grid-2x2 .dropdown-menu.show {
    z-index: 10050 !important; /* High z-index to appear above sticky header */
    top: 0 !important;
    bottom: auto !important;
    left: 100% !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
}

/* Make dropdown items display horizontally */
.action-buttons-grid-2x2 .dropdown-menu {
    list-style: none !important;
    margin: 0 !important;
    padding: 0.25rem !important;
}

.action-buttons-grid-2x2 .dropdown-menu .dropdown-item {
    white-space: nowrap !important;
    padding: 0.5rem 0.75rem !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    border-radius: 0.25rem !important;
    margin: 0 !important;
}

.action-buttons-grid-2x2 .dropdown-menu li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-item {
    color: var(--text-primary);
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--hover-bg);
        color: var(--text-primary);
    }

/* Dropdown menu icons - ensure they are visible regardless of navbar text color */
.navbar.bg-primary .dropdown-menu .dropdown-item i,
.navbar.bg-primary .dropdown-menu .dropdown-item i.fas,
.navbar.bg-primary .dropdown-menu .dropdown-item i.far,
.navbar.bg-primary .dropdown-menu .dropdown-item i.fab {
    color: var(--text-primary) !important;
}

.navbar.bg-primary .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

.navbar.bg-primary .dropdown-menu .dropdown-item:hover,
.navbar.bg-primary .dropdown-menu .dropdown-item:focus {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

    .navbar.bg-primary .dropdown-menu .dropdown-item:hover i,
    .navbar.bg-primary .dropdown-menu .dropdown-item:focus i {
        color: var(--text-primary) !important;
    }

/* Dark mode dropdown menu improvements */
@media (prefers-color-scheme: dark) {
    .dropdown-menu {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    }

    .dropdown-item {
        color: var(--text-primary) !important;
    }

    .dropdown-item i,
    .dropdown-item .fas,
    .dropdown-item .far,
    .dropdown-item .fab {
        color: var(--text-primary) !important;
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--hover-bg) !important;
        color: var(--text-primary) !important;
    }

    .dropdown-item:hover i,
    .dropdown-item:focus i,
    .dropdown-item:hover .fas,
    .dropdown-item:focus .fas {
        color: var(--text-primary) !important;
    }

    /* Ensure navbar dropdowns are visible in dark mode */
    .navbar.bg-primary .dropdown-menu {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
    }

    .navbar.bg-primary .dropdown-menu .dropdown-item {
        color: var(--text-primary) !important;
    }

    .navbar.bg-primary .dropdown-menu .dropdown-item i {
        color: var(--text-primary) !important;
    }
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item i,
[data-theme="dark"] .dropdown-item .fas,
[data-theme="dark"] .dropdown-item .far,
[data-theme="dark"] .dropdown-item .fab {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .dropdown-item:hover i,
[data-theme="dark"] .dropdown-item:focus i {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar.bg-primary .dropdown-menu {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .navbar.bg-primary .dropdown-menu .dropdown-item {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar.bg-primary .dropdown-menu .dropdown-item i {
    color: var(--text-primary) !important;
}

/* ================================
   Alert Components
   ================================ */

/* Success alert with theme-aware colors */
.alert-success {
    background-color: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-color: var(--alert-success-text);
}

.alert-danger {
    background-color: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-text);
}

.alert-warning {
    background-color: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-text);
}

.alert-info {
    background-color: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-color: var(--alert-info-text);
}

/* ================================
   Modal Components
   ================================ */

/* Modal dialog styling with theme support */
.modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.modal-header {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

/* Colored modal headers standardized to Tetra Tech blue */
.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header.bg-info,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-warning,
.modal-header.bg-dark {
    background-color: var(--tt-blue) !important;
    color: #ffffff !important;
    border-bottom: none;
}

.modal-header[class*="bg-"] .btn-close {
    filter: brightness(0) invert(1);
}

.modal-footer {
    border-top-color: var(--border-color);
}

/* Button close */
.btn-close {
    filter: var(--btn-close-filter);
}

/* ================================
   Button Components
   ================================ */

/* Outline primary button - maintains Bootstrap styling with theme adaptation */
.btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

    .btn-outline-primary:hover {
        background-color: var(--accent);
        border-color: var(--accent);
    }

/* ================================
   Badge Components
   ================================ */

/* Badge styling - white text for readability on colored backgrounds */
.badge {
    color: #fff; /* Keep badges readable */
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.35em 0.65em;
    border-radius: var(--radius-pill);
}

/* ================================
   Custom Input Components
   ================================ */

/* Custom search input field with theme support */
#searchInput {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

    #searchInput:focus {
        border-color: var(--accent);
        box-shadow: var(--shadow-focus);
    }

/* ================================
   List Group Components
   ================================ */

/* List group items with hover effects */
.list-group-item {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

    .list-group-item:hover {
        background-color: var(--hover-bg);
    }

/* ================================
   Progress and Loading Components
   ================================ */

/* Progress bars - keep original colors for visibility */
.progress {
    background-color: var(--bg-secondary);
}

/* Spinners and loading indicators - brand blue for visibility */
.spinner-border {
    color: var(--brand-blue); /* Keep visible in both modes */
}

/* ================================
   Theme Toggle Component
   ================================ */

/* Theme toggle button styling (if implemented) */
.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .theme-toggle:hover {
        background-color: var(--hover-bg);
        border-color: var(--border-hover);
    }

/* ================================
   Utility Classes
   ================================ */

/* Text muted utility - theme-aware muted text color */
.text-muted {
    color: var(--text-muted) !important;
}

/* Border utility - theme-aware border color */
.border {
    border-color: var(--border-color) !important;
}

/* Global smooth transitions for theme changes */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ================================
   Custom Color Utilities
   ================================ */

/* Orange color utility for consumed budget amounts */
.text-orange {
    color: #ff8c00 !important;
}

/* Copper color utility for warning states */
.text-copper {
    color: #b87333 !important;
}

/* Darker warning color utility */
.text-warning-darker {
    color: #d4a017 !important;
}

/* Badge variant for darker warning states */
.badge.bg-warning-darker {
    background-color: #d4a017 !important;
    color: #000 !important;
    font-weight: 600;
}

/* Orange badge for nearly consumed budget (90-99% consumption) */
.badge.bg-orange {
    background-color: #ff8c00 !important; /* Dark orange */
    color: #fff !important;
    font-weight: 600;
}

/* ================================
   Update Blue Theme - Navbar & Matching Blue Elements
   ================================ */

/* Primary color utilities - aligns all primary elements with brand blue */
.bg-primary {
    background-color: var(--brand-blue) !important;
}

.text-primary {
    color: var(--brand-blue) !important;
}

/* Base button styling - modern rounded rect with subtle interactions */
.btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    letter-spacing: -0.005em;
    padding: 0.5rem 1.1rem;
    transition: transform var(--transition-fast) var(--ease-out),
                box-shadow var(--transition-fast) var(--ease-out),
                background-color var(--transition-fast) var(--ease-out),
                border-color var(--transition-fast) var(--ease-out);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.btn:active {
    transform: translateY(0);
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-lg);
}

/* Primary button - solid modern accent with soft lift */
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: var(--accent-contrast) !important;
    box-shadow: var(--shadow-xs);
}

    .btn-primary:hover,
    .btn-primary:focus {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        background: var(--accent-hover) !important;
        border-color: var(--accent-hover) !important;
    }

    .btn-primary:active {
        background: var(--accent-active) !important;
        border-color: var(--accent-active) !important;
        box-shadow: none;
    }

.btn-outline-primary {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background-color: transparent !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background: var(--accent) !important;
        border-color: var(--accent) !important;
        color: var(--accent-contrast) !important;
        box-shadow: var(--shadow-xs);
    }

.border-primary {
    border-color: var(--brand-blue) !important;
}

/* Card headers with primary color - solid Tetra Tech blue (uniform) */
.card-header.bg-primary {
    background: var(--tt-blue) !important;
}

/* Badge primary color */
.badge.bg-primary {
    background-color: var(--brand-blue) !important;
}

/* ================================
   Semantic colors aligned to Tetra Tech palette
   (kept meaningful, retuned hues for cohesion)
   ================================ */
.btn-success {
    background-color: var(--tt-success) !important;
    border-color: var(--tt-success) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #256b3b !important;
    border-color: #256b3b !important;
}
.btn-danger {
    background-color: var(--tt-error) !important;
    border-color: var(--tt-error) !important;
    color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #97001b !important;
    border-color: #97001b !important;
}
.btn-warning {
    background-color: var(--tt-warning) !important;
    border-color: var(--tt-warning) !important;
    color: #fff !important;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #a06708 !important;
    border-color: #a06708 !important;
    color: #fff !important;
}
.btn-info {
    background-color: var(--tt-accent) !important;
    border-color: var(--tt-accent) !important;
    color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
    background-color: #008cae !important;
    border-color: #008cae !important;
    color: #fff !important;
}
.btn-secondary {
    background-color: var(--tt-muted) !important;
    border-color: var(--tt-muted) !important;
    color: #fff !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #4a5966 !important;
    border-color: #4a5966 !important;
}

.btn-outline-success { color: var(--tt-success) !important; border-color: var(--tt-success) !important; }
.btn-outline-success:hover, .btn-outline-success:focus { background-color: var(--tt-success) !important; color: #fff !important; }
.btn-outline-danger { color: var(--tt-error) !important; border-color: var(--tt-error) !important; }
.btn-outline-danger:hover, .btn-outline-danger:focus { background-color: var(--tt-error) !important; color: #fff !important; }
.btn-outline-info { color: #0a7f9c !important; border-color: var(--tt-accent) !important; }
.btn-outline-info:hover, .btn-outline-info:focus { background-color: var(--tt-accent) !important; color: #fff !important; }

/* Badges */
.badge.bg-success { background-color: var(--tt-success) !important; }
.badge.bg-danger { background-color: var(--tt-error) !important; }
.badge.bg-warning { background-color: var(--tt-warning) !important; color: #fff !important; }
.badge.bg-info { background-color: var(--tt-accent) !important; color: #fff !important; }
.badge.bg-secondary { background-color: var(--tt-muted) !important; }

/* Text + border utility semantic colors (stat cards, labels) */
.text-success { color: var(--tt-success) !important; }
.text-danger { color: var(--tt-error) !important; }
.text-warning { color: var(--tt-warning) !important; }
.text-info { color: #0a7f9c !important; }
.border-success { border-color: var(--tt-success) !important; }
.border-danger { border-color: var(--tt-error) !important; }
.border-warning { border-color: var(--tt-warning) !important; }
.border-info { border-color: var(--tt-accent) !important; }

/* Solid contextual backgrounds (panels/pills) aligned to palette */
.bg-success { background-color: var(--tt-success) !important; }
.bg-danger { background-color: var(--tt-error) !important; }
.bg-warning { background-color: var(--tt-warning) !important; }
.bg-info { background-color: var(--tt-accent) !important; }
.bg-secondary { background-color: var(--tt-muted) !important; }

/* Soft/subtle contextual tints (bg-*-subtle) aligned to palette */
.bg-success-subtle { background-color: var(--tt-success-tint) !important; }
.bg-danger-subtle { background-color: var(--tt-error-tint) !important; }
.bg-warning-subtle { background-color: var(--tt-warning-tint) !important; }
.bg-info-subtle { background-color: var(--tt-sky) !important; }
.bg-primary-subtle { background-color: var(--tt-sky) !important; }

/* Links with primary color */
a.text-primary {
    color: var(--brand-blue) !important;
}

    a.text-primary:hover {
        color: var(--accent-active) !important;
    }

/* Pagination */
.page-link {
    color: var(--accent);
    border-color: var(--border-color);
    background-color: var(--bg-primary);
}

    .page-link:hover {
        color: var(--accent-hover);
        background-color: var(--bg-secondary);
        border-color: var(--border-hover);
    }

    .page-link:focus {
        box-shadow: var(--shadow-focus);
    }

/* Pagination active state */
.pagination .page-item.active .page-link {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

    .pagination .page-item.active .page-link:hover {
        background-color: var(--accent-hover) !important;
        border-color: var(--accent-hover) !important;
    }

/* ================================
   Nav tabs / pills (modern)
   ================================ */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

    .nav-tabs .nav-link {
        color: var(--text-secondary);
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        font-weight: 500;
        padding: 0.6rem 1rem;
        transition: color var(--transition-fast) var(--ease-out),
                    border-color var(--transition-fast) var(--ease-out);
    }

    .nav-tabs .nav-link:hover {
        color: var(--text-primary);
        border-bottom-color: var(--border-hover);
        background-color: transparent;
    }

    .nav-tabs .nav-link.active {
        color: var(--accent);
        background-color: transparent;
        border-bottom-color: var(--accent);
    }

.nav-pills .nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    font-weight: 500;
}

    .nav-pills .nav-link.active {
        background-color: var(--accent);
        color: #ffffff;
    }

/* Spinner/loading with primary color */
.spinner-border.text-primary {
    color: var(--brand-blue) !important;
}

/* Alert primary */
.alert-primary {
    background-color: var(--accent-soft) !important;
    border-color: var(--accent-soft-border) !important;
    color: var(--accent-active) !important;
}

/* Modern alert base - soft, rounded */
.alert {
    border-radius: var(--radius-md);
    border-width: 1px;
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: var(--shadow-focus) !important;
}

/* Orange badge for nearly consumed budget (90-99%) */
.badge.bg-orange {
    background-color: #ff8c00 !important;
    color: #fff !important;
    font-weight: 600;
}

/* ================================
   Select2 Dark Mode Support (Global)
   ================================ */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 1.5;
    padding: 0;
    display: flex;
    align-items: center;
    min-height: 1.5em;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-primary) transparent transparent transparent;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-primary) transparent;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    min-height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0.25rem 0.5rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-primary);
    margin-right: 0.25rem;
}

.select2-dropdown {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.select2-container--default .select2-results__option {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
}

@media (prefers-color-scheme: dark) {
    .select2-dropdown,
    .select2-container--default .select2-results__option {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .select2-container--default .select2-results__option {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ================================
   Global Layout & Wrapping Fixes
   ================================ */
.card, .card-body, .card-header, .alert, .badge, .info-box {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    overflow-x: hidden;
    max-width: 100%;
}

/* Data tables - allow word wrapping based on content, but don't break words */
.table td, .table th {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* Don't break words in the middle - only break at spaces or hyphens */
    overflow: visible;
    text-overflow: clip;
    min-width: fit-content;
    max-width: none;
    line-height: 1.5;
}

/* Ensure tables can expand beyond viewport width for horizontal scrolling */
.table {
    width: auto !important;
    min-width: 100%;
    table-layout: auto;
}

/* Ensure table-responsive containers allow horizontal scrolling - consolidated rule */
/* CRITICAL: overflow-y: visible allows sticky headers to work with main page scroll */
.table-responsive,
div.table-responsive,
.table-responsive-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important; /* Must be visible for sticky headers to work with main scroll */
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    display: block;
    position: relative;
    scrollbar-width: thin; /* Firefox - always show thin scrollbar */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1; /* Firefox */
}

/* Ensure all table headers are sticky when scrolling main page */
.table thead th,
table thead th,
.table-responsive .table thead th,
.table-responsive table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #f0f4f8 !important;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode override for sticky headers */
[data-theme="dark"] .table thead th,
[data-theme="dark"] table thead th,
[data-theme="dark"] .table-responsive .table thead th,
[data-theme="dark"] .table-responsive table thead th {
    background: var(--brand-gradient) !important;
    background-color: #2a4a6b !important;
    color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
    .table thead th,
    table thead th,
    .table-responsive .table thead th,
    .table-responsive table thead th {
        background: var(--brand-gradient) !important;
        background-color: #2a4a6b !important;
        color: #ffffff !important;
    }
}

/* Ensure all tables can expand and scroll horizontally */
.table,
table.table,
table {
    width: auto !important;
    min-width: 100%;
    table-layout: auto;
    max-width: none !important;
}

/* DataTables specific - allow wrapping for all columns based on content */
table.dataTable td, 
table.dataTable th,
.table.dataTable td,
.table.dataTable th {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal; /* Don't break words in the middle */
    overflow: visible;
    text-overflow: clip;
    min-width: fit-content;
    max-width: none;
    line-height: 1.5;
}

/* Allow wrapping for text-wrap-column in DataTables */
table.dataTable td.text-wrap-column,
table.dataTable th.text-wrap-column,
.table.dataTable td.text-wrap-column,
.table.dataTable th.text-wrap-column {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    max-width: none !important;
}

/* Allow wrapping for long text columns like Project Name */
.table td.text-wrap-column,
.table th.text-wrap-column,
.table td.allow-wrap,
.table th.allow-wrap,
.table td.forecast-period-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important; /* Don't break words in the middle - only break at spaces or hyphens */
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: auto !important; /* Allow content-based sizing */
    max-width: none !important; /* Remove max-width to allow content-based sizing */
    line-height: 1.5 !important; /* Better line spacing for wrapped text */
}

/* DataTables specific - allow wrapping for designated columns */
table.dataTable td.text-wrap-column,
table.dataTable th.text-wrap-column,
.table.dataTable td.text-wrap-column,
.table.dataTable th.text-wrap-column {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important; /* Don't break words in the middle - only break at spaces or hyphens */
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: auto !important; /* Allow content-based sizing */
    max-width: none !important; /* Remove max-width to allow content-based sizing */
    line-height: 1.5 !important; /* Better line spacing for wrapped text */
}

/* Action buttons column - 2x2 grid */
.table td.action-column,
.table td:has(.action-buttons-grid-2x2),
table.dataTable td.action-column,
table.dataTable td:has(.action-buttons-grid-2x2) {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
}

/* Ensure table-responsive container handles overflow properly */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    position: relative;
    max-width: 100%;
    width: 100%;
}

/* Allow horizontal scrolling for all data tables */
.dataTables_wrapper .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important; /* Let DataTables scrollBody handle vertical scroll */
    max-height: none !important; /* Remove max-height to prevent container scrollbar */
    width: 100%;
}

/* Ensure tables can scroll horizontally when content exceeds viewport */
table.dataTable {
    width: 100% !important;
    min-width: 100%;
}

/* All DataTables should have horizontal scrolling enabled by default */
.dataTables_wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    position: relative;
    display: block;
}

.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    display: block;
}

.dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: auto !important; /* Enable vertical scroll for records */
    width: 100%;
    max-height: 60vh !important; /* Set height for scrollable area */
}

/* Ensure DataTables wrapper allows horizontal scrolling */
.dataTables_wrapper .table-responsive,
.dataTables_wrapper .dataTables_scrollHeadInner {
    overflow-x: auto !important;
    overflow-y: visible !important; /* No vertical scroll on these containers */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1; /* Firefox */
}

/* scrollBody - only used when scrollY is enabled (currently disabled, using pagination) */
.dataTables_wrapper .dataTables_scrollBody {
    overflow-x: auto !important;
    overflow-y: visible !important; /* No vertical scroll when using pagination */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1; /* Firefox */
}

/* DataTables scrollbar styling */
.dataTables_wrapper .table-responsive::-webkit-scrollbar,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    display: block !important;
}

.dataTables_wrapper .table-responsive::-webkit-scrollbar-track,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.dataTables_wrapper .table-responsive::-webkit-scrollbar-thumb,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 2px solid #f1f1f1;
}

.dataTables_wrapper .table-responsive::-webkit-scrollbar-thumb:hover,
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Ensure table wrapper allows horizontal scrolling with visible scrollbar */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1; /* Firefox */
}

/* Wrap long text in DataTable columns */
.dataTable td.text-wrap-column,
.dataTable th.text-wrap-column {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important; /* Don't break words in the middle - only break at spaces or hyphens */
    min-width: auto !important; /* Allow content-based sizing */
    max-width: none !important; /* Remove max-width to allow content-based sizing */
    line-height: 1.5 !important; /* Better line spacing for wrapped text */
}

/* Allow wrapping for specific columns that need it */
.dataTable td:has(.text-wrap-column),
.dataTable td.text-wrap-column {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important; /* Don't break words in the middle */
    line-height: 1.5 !important; /* Better line spacing */
}

/* Show scrollbar when needed - ALWAYS VISIBLE when content overflows */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent; /* Firefox */
}

/* Webkit browsers (Chrome, Safari, Edge) - Always show scrollbar */
.table-responsive::-webkit-scrollbar {
    height: 12px;
    width: 12px;
    display: block !important; /* Always show */
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 6px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 2px solid #f1f1f1;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Horizontal scrollbar specifically */
.table-responsive::-webkit-scrollbar:horizontal {
    height: 12px;
    display: block !important;
}

/* Allow horizontal scrolling on body/html when needed for tables */
body {
    overflow-x: auto;
    overflow-y: auto;
}

html {
    overflow-x: auto;
}

/* Remove scrollbar from billing calendar alert */
.billing-calendar-alert {
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden;
}

.billing-calendar-alert::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.billing-calendar-alert {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.billing-calendar-alert * {
    overflow: visible;
}

/* Always show scrollbar when content overflows - removed hidden scrollbar code */

/* Sticky action column on desktop (optional - can be enabled if needed) */
@media (min-width: 768px) {
    .table-responsive {
        overflow-x: auto !important;
        max-width: 100%;
    }
    
    /* Ensure action buttons column is always visible */
    .table td:has(.btn-group),
    .table td:has(.btn),
    table.dataTable td:has(.btn-group),
    table.dataTable td:has(.btn) {
        position: relative;
        z-index: 1;
        white-space: nowrap !important;
    }
    
/* Action buttons 2x2 grid container */
.table .action-buttons-grid-2x2,
table.dataTable .action-buttons-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    width: 100%;
}
}

/* Improve table wrapper to contain content within viewport */
.dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.dataTables_wrapper .table-responsive {
    max-width: 100%;
    overflow-x: auto !important;
}

/* Specific fix for forecast period text - prevent vertical display */
.forecast-period-text,
td.forecast-period-text,
.forecast-badge {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

.forecast-period-text strong,
td.forecast-period-text strong,
.forecast-badge * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    display: inline !important;
}

/* Prevent text from appearing vertically on mobile */
@media (max-width: 767px) {
    * {
        word-spacing: normal !important;
        letter-spacing: normal !important;
    }

    .card, .card-body, .alert, .badge, .table td {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fix text that appears vertically */
    span, small, strong, p, div {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
    }

    /* Ensure forecast period text wraps normally */
    .badge, small.text-muted, .form-text {
        white-space: normal !important;
        display: inline-block !important;
        max-width: 100% !important;
    }
    
    /* Specific fix for forecast period text */
    .forecast-period-text,
    .forecast-period-text *,
    .forecast-badge,
    .forecast-badge * {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        display: inline !important;
    }
    
    /* Force table cells with forecast text to wrap properly */
    .table td.forecast-period-text,
    .table td.forecast-period-text strong {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
    }
}

/* ================================
   Icon Standardization (Global - Proper Sizing)
   ================================ */
/* Base icon styles - keep minimal but proper spacing */
i.fas, i.far, i.fab, i.fal, i.bi {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: auto;
    height: auto;
}

/* Button icons - decreased sizes with proper spacing */
.btn i, .btn svg, .btn i.fas, .btn i.far {
    font-size: 0.7rem;
    vertical-align: middle;
    line-height: 1;
    margin-right: 0.25rem;
}

/* Action buttons 2x2 grid layout - 2 icons per row */
.action-buttons-grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    width: 100%;
    min-width: 80px;
    max-width: 100px;
    position: relative;
    z-index: 1;
}

.action-btn-large {
    width: 100%;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0.375rem;
    overflow: hidden !important; /* Prevent overflow and scrollbars */
    box-sizing: border-box !important;
    /* Remove scrollbars */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Remove scrollbars from action button (webkit browsers) */
.action-btn-large::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.action-btn-large i {
    margin: 0 !important;
    font-size: 1.1rem !important;
    line-height: 1;
}

/* Comment count - switch between icon and count */
.action-btn-large .comment-icon {
    display: inline-block;
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.action-btn-large .comment-count {
    display: none !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 0.25em 0.5em !important;
    min-width: 1.5em !important;
    max-width: 2.5em !important; /* Limit width to prevent overflow */
    height: 1.5em !important;
    line-height: 1 !important;
    border-radius: 0.5rem !important;
    background-color: var(--bs-danger) !important;
    color: #ffffff !important;
    border: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
    /* Remove any scrollbars */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Remove any scrollbars from comment count (webkit browsers) */
.action-btn-large .comment-count::-webkit-scrollbar,
.action-btn-large::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Remove scrollbars from action button containers */
.action-btn-large {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Ensure button content doesn't overflow - but be careful with badges */
.action-btn-large i,
.action-btn-large .comment-icon {
    overflow: visible !important;
    white-space: normal !important;
}

/* Badge should have proper overflow handling */
.action-btn-large .badge,
.action-btn-large .comment-count {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* When count is shown, hide icon */
.action-btn-large .comment-count:not([style*="display: none"]) ~ .comment-icon,
.action-btn-large .comment-count[style*="display: block"] ~ .comment-icon,
.action-btn-large .comment-count[style*="display: flex"] ~ .comment-icon,
.action-btn-large .comment-count[style*="display: inline-flex"] ~ .comment-icon {
    display: none !important;
}

/* When count is shown, display it */
.action-btn-large .comment-count:not([style*="display: none"]),
.action-btn-large .comment-count[style*="display: block"],
.action-btn-large .comment-count[style*="display: flex"],
.action-btn-large .comment-count[style*="display: inline-flex"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.action-buttons-grid-2x2 .btn-group {
    width: 100%;
    height: 2.5rem;
    position: relative;
    z-index: 1000;
}

.action-buttons-grid-2x2 .btn-group .dropdown-toggle {
    width: 100%;
    height: 100%;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
}

.action-buttons-grid-2x2 .btn-group .dropdown-toggle i {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

.action-buttons-grid-2x2 .btn-group .dropdown-toggle::after {
    display: none;
}

/* Fix dropdown menu positioning - ensure it appears above other elements */
.action-buttons-grid-2x2 .dropdown-menu {
    position: absolute !important;
    z-index: 10000 !important; /* Increased z-index to overlay everything */
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    min-width: 200px !important; /* Ensure dropdown items don't truncate */
    white-space: nowrap !important; /* Prevent text truncation */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    top: auto !important;
    bottom: 100% !important;
    transform: none !important;
}

/* Force dropup behavior for action grid dropdowns - prevent Bootstrap from flipping */
.action-buttons-grid-2x2 .btn-group.dropup .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 5px !important;
    transform: none !important;
    left: auto !important;
    right: 0 !important;
}

.action-buttons-grid-2x2 .btn-group.dropup .dropdown-menu.show {
    top: auto !important;
    bottom: 100% !important;
    transform: none !important;
}

/* Ensure dropdown doesn't get cut off by table boundaries */
.table-responsive {
    position: relative;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1; /* Firefox */
}

/* Fix sticky header z-index to allow dropdowns above */
.table thead th,
.dataTables_wrapper table.dataTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4) !important;
}

/* Dropdown menu should appear above sticky headers */
.action-buttons-grid-2x2 .dropdown-menu.show {
    z-index: 10001 !important; /* Even higher when shown */
}

/* Action column styling */
.action-column {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    padding: 0.5rem !important;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

/* Ensure action column stays visible when scrolling */
.action-column,
.table td.action-column {
    position: sticky;
    right: 0;
    background-color: var(--bg-primary) !important;
    z-index: 5;
}

/* When row is hovered, ensure action column background matches */
.table tbody tr:hover td.action-column {
    background-color: rgba(0, 94, 184, 0.08) !important;
}

/* Dropdown menu styling */
.table td .dropdown-menu {
    min-width: 200px;
    font-size: 0.875rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.table td .dropdown-menu .dropdown-item {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    white-space: nowrap !important; /* Prevent text truncation in dropdown items */
    white-space: nowrap;
}

.table td .dropdown-menu .dropdown-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
}

.table td .dropdown-menu .dropdown-item:hover {
    background-color: var(--hover-bg);
}

/* Ensure action column is properly sized */
.table td.action-column,
table.dataTable td.action-column {
    white-space: nowrap !important;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem !important;
}

/* Icon-only buttons - only for mobile */
@media (max-width: 767px) {
    .btn-icon-only {
        padding: 0.375rem 0.5rem !important;
        min-width: 2rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .btn-icon-only i {
        margin: 0 !important;
        font-size: 0.75rem;
    }
}

/* Export/search/clear icons - standardized */
.btn .fas.fa-file-excel,
.btn .fas.fa-search,
.btn .fas.fa-times,
.btn .fas.fa-eraser,
.export-icon,
.search-icon,
.clear-icon {
    font-size: 0.7rem !important;
}

.btn i:last-child, .btn i:only-child {
    margin-right: 0;
    margin-left: 0.25rem;
}

.btn i:only-child {
    margin-left: 0;
    margin-right: 0;
}

.btn-sm i, .btn-sm svg, .btn-sm i.fas, .btn-sm i.far {
    font-size: 0.625rem;
    margin-right: 0.25rem;
}

.btn-sm i:last-child {
    margin-right: 0;
}

.btn-lg i, .btn-lg svg, .btn-lg i.fas, .btn-lg i.far {
    font-size: 0.875rem;
    margin-right: 0.375rem;
}

/* Nav link icons - decreased sizes */
.nav-link i, .nav-link svg, .nav-link i.fas, .nav-link i.far {
    font-size: 0.75rem;
    vertical-align: middle;
    line-height: 1;
    margin-right: 0.5rem;
    width: auto;
}

/* Card header icons - decreased sizes */
.card-header i, .card-header svg, .card-header i.fas, .card-header i.far {
    font-size: 0.75rem;
    vertical-align: middle;
    line-height: 1;
    margin-right: 0.5rem;
}

/* Table icons - decreased sizes */
.table i, .table svg, .table i.fas, .table i.far {
    font-size: 0.625rem;
    vertical-align: middle;
    line-height: 1;
}

@media (max-width: 767px) {
    .btn i, .btn svg {
        font-size: 0.625rem;
    }

    .nav-link i, .nav-link svg {
        font-size: 0.6875rem;
        margin-right: 0.375rem;
    }

    .card-header i, .card-header svg {
        font-size: 0.6875rem;
    }

    .table i, .table svg {
        font-size: 0.5625rem;
    }
}

/* ================================
   Global Collapsible Boxes (All Cards)
   ================================ */
.card:not(.no-collapse) {
    position: relative;
}

/* All collapsible card headers - add arrow indicator */
.card-header:not(.no-collapse):not([data-no-collapse])[data-bs-toggle="collapse"],
.card-header:not(.no-collapse):not([data-no-collapse]):not(.collapse-icon-added) {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 2.5rem;
    transition: background-color 0.2s ease;
}

.card-header:not(.no-collapse):not([data-no-collapse]):not(.action-card-header):not(.activity-card-header)[data-bs-toggle="collapse"]:hover,
.card-header:not(.no-collapse):not([data-no-collapse]):not(.action-card-header):not(.activity-card-header):not(.collapse-icon-added):hover {
    background-color: var(--tt-blue-dark) !important;
}

[data-theme="dark"] .card-header:not(.no-collapse):not([data-no-collapse]):not(.action-card-header):not(.activity-card-header)[data-bs-toggle="collapse"]:hover,
[data-theme="dark"] .card-header:not(.no-collapse):not([data-no-collapse]):not(.action-card-header):not(.activity-card-header):not(.collapse-icon-added):hover {
    background-color: var(--accent-hover) !important;
}

/* Ensure all collapsible headers have proper positioning for arrow */
.card-header[data-bs-toggle="collapse"]:not(.no-collapse):not([data-no-collapse]) {
    position: relative !important;
    padding-right: 2.5rem !important;
}

/* Arrow icon styling for ALL collapsible headers - position on right */
.card-header .collapse-icon {
    position: absolute !important;
    right: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(180deg) !important;
    transition: transform 0.3s ease !important;
    font-size: 0.75rem !important;
    pointer-events: none !important;
    z-index: 1 !important;
    margin: 0 !important;
}

/* Arrow icon CSS fallback using ::after for headers without .collapse-icon */
.card-header:not(.no-collapse):not([data-no-collapse])[data-bs-toggle="collapse"]:not(:has(.collapse-icon))::after {
    content: "\f078";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    transition: transform 0.3s ease;
    color: inherit;
    font-size: 0.75rem;
    pointer-events: none;
    z-index: 1;
}

/* Rotate arrow icons when collapsed */
.card-header[aria-expanded="false"] .collapse-icon,
.card-header.collapsed .collapse-icon,
.card-header[data-bs-toggle="collapse"][aria-expanded="false"]::after,
.card-header[data-bs-toggle="collapse"].collapsed::after {
    transform: translateY(-50%) rotate(0deg) !important;
}

/* Rotate arrow icons when expanded */
.card-header[aria-expanded="true"] .collapse-icon,
.card-header[data-bs-toggle="collapse"][aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* Mobile Responsiveness Improvements */
@media (max-width: 991.98px) {
    .navbar {
        min-height: 70px;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .navbar-collapse {
        margin-top: 1rem;
    }

    .nav-main-menu .nav-link,
    .nav-utility-link {
        padding: 1rem 1.25rem;
        margin-bottom: 0.25rem;
        font-size: 1rem;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 767px) {
    .btn {
        padding: 0.625rem 1.125rem;
        font-size: 0.9375rem;
    }

    .btn-sm {
        padding: 0.5rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* Colored card headers (bg utilities) keep white text/icons in all themes.
   Plain .card-header uses the theme text color (set on the base .card-header rule). */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-info,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-dark {
    color: #ffffff !important;
}

.card-header.bg-primary i, .card-header.bg-primary svg,
.card-header.bg-secondary i, .card-header.bg-secondary svg,
.card-header.bg-info i, .card-header.bg-info svg,
.card-header.bg-success i, .card-header.bg-success svg,
.card-header.bg-danger i, .card-header.bg-danger svg,
.card-header.bg-dark i, .card-header.bg-dark svg {
    color: #ffffff !important;
}

/* ================================
   Invoice History Modal Table Scrolling
   ================================ */

/* Make the invoice history table container scrollable */
#invoiceHistoryModal .modal-body .table-responsive {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
    display: block;
}

/* Ensure the table has proper styling within the scrollable container */
#invoiceHistoryModal .modal-body .table-responsive table {
    margin-bottom: 0;
}

/* Sticky header for the invoice history table */
#invoiceHistoryModal .modal-body .table-responsive table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f0f4f8;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

/* Custom scrollbar for invoice history table */
#invoiceHistoryModal .modal-body .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) #f1f1f1;
}

#invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Dark mode adjustments for invoice history table scrollbar */
@media (prefers-color-scheme: dark) {
    #invoiceHistoryModal .modal-body .table-responsive {
        scrollbar-color: rgba(255, 255, 255, 0.3) #2a2a2a;
    }
    
    #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-track {
        background: #2a2a2a;
    }
    
    #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
    }
    
    #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    #invoiceHistoryModal .modal-body .table-responsive table thead th {
        background-color: #2a2a2a;
    }
}

[data-theme="dark"] #invoiceHistoryModal .modal-body .table-responsive {
    scrollbar-color: rgba(255, 255, 255, 0.3) #2a2a2a;
}

[data-theme="dark"] #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-track {
    background: #2a2a2a;
}

[data-theme="dark"] #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] #invoiceHistoryModal .modal-body .table-responsive::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] #invoiceHistoryModal .modal-body .table-responsive table thead th {
    background-color: #2a2a2a;
}

/* ================================
   CLEAN360 Upgrade: accessibility + shared components
   ================================ */

/* Skip-to-content link: visually hidden until focused (keyboard users). */
.clean360-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--accent);
    color: #fff;
    border-radius: 0 0 6px 0;
    text-decoration: none;
    font-weight: 600;
}
.clean360-skip-link:focus {
    left: 0;
    outline: 3px solid #ffc107;
    outline-offset: 2px;
}

/* Shared empty-state block for grids/lists that would otherwise show a bare alert(). */
.clean360-empty-state {
    text-align: center;
    padding: 2.25rem 1rem;
    color: var(--text-secondary, #6c757d);
}
.clean360-empty-state__icon {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
    opacity: 0.65;
}
.clean360-empty-state__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary, #212529);
}
.clean360-empty-state__hint {
    font-size: 0.9rem;
}

/* ================================
   CLEAN360 notification center (header bell + dropdown)
   ================================ */
.clean360-notif {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: visible !important;
}
.nav-utility-menu .nav-item:has(.clean360-notif) {
    overflow: visible !important;
}
.clean360-notif__bell {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}
.clean360-notif.has-unread .clean360-notif__bell > i.fa-bell {
    color: #ff6b7a !important;
}
.clean360-notif__badge {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 20;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem !important;
    font-weight: 700;
    line-height: 1;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.28em;
    border-radius: 999px;
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: 2px solid #003a79;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.clean360-notif__badge[hidden] {
    display: none !important;
}
.navbar.collapsed .clean360-notif__badge {
    top: 0;
    right: -3px;
    font-size: 0.58rem !important;
    min-width: 1.05rem;
    height: 1.05rem;
}
.clean360-notif__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    width: 340px;
    max-width: 92vw;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-color, rgba(0, 0, 0, 0.15));
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* The [hidden] attribute must win over the flex display above, otherwise the panel stays
   permanently open showing its initial "Loading…" content. (Learned in Survey 360.) */
.clean360-notif__panel[hidden] {
    display: none !important;
}
.clean360-notif__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    font-weight: 600;
}
.clean360-notif__markall {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}
.clean360-notif__list {
    max-height: 380px;
    overflow-y: auto;
}
.clean360-notif__empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-secondary, #6c757d);
    font-size: 0.9rem;
}
.clean360-notif__item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color, #f0f0f0);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.clean360-notif__item:hover {
    background: var(--hover-bg, rgba(0, 0, 0, 0.04));
}
.clean360-notif__item.is-unread {
    background: rgba(220, 53, 69, 0.08);
    border-left: 3px solid #dc3545;
}
.clean360-notif__icon {
    color: var(--accent);
    margin-top: 2px;
}
.clean360-notif__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.clean360-notif__item-title {
    font-weight: 600;
    font-size: 0.88rem;
}
.clean360-notif__item-msg {
    font-size: 0.82rem;
    color: var(--text-secondary, #6c757d);
}
.clean360-notif__time {
    font-size: 0.72rem;
    color: var(--text-muted, #adb5bd);
    margin-top: 2px;
}

/* ---- CLEAN360 global search -------------------------------------------------
   Lives in the navy navbar, so colors are set explicitly (not inherited) to stay
   readable regardless of theme. The dropdown is a solid white card. */
.clean360-search {
    position: relative;
    display: inline-block;
    margin-right: 0.35rem;
}
.clean360-search__box {
    position: relative;
    display: flex;
    align-items: center;
}
.clean360-search__icon {
    position: absolute;
    left: 12px;
    font-size: 0.8rem;
    color: #6c757d;
    pointer-events: none;
    z-index: 1;
}
.clean360-search__input {
    width: 220px;
    max-width: 46vw;
    height: 34px;
    padding: 6px 12px 6px 32px;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 999px;
    background: #ffffff;
    color: #212529;
    outline: none;
    transition: width 0.15s ease, box-shadow 0.15s ease;
}
.clean360-search__input::placeholder {
    color: #8a939b;
}
.clean360-search__input:focus {
    width: 300px;
    border-color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}
.clean360-search__results {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 360px;
    max-width: 92vw;
    max-height: 440px;
    overflow-y: auto;
    background: #ffffff;
    color: #212529;
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    z-index: 2000;
    padding: 4px 0;
}
.clean360-search__results[hidden] {
    display: none;
}
.clean360-search__group-label {
    padding: 8px 14px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    background: #f8f9fa;
}
.clean360-search__group-label i {
    margin-right: 6px;
}
.clean360-search__item {
    display: flex;
    flex-direction: column;
    padding: 9px 14px;
    text-decoration: none;
    color: #212529;
    border-top: 1px solid #f1f3f5;
}
.clean360-search__item:first-of-type {
    border-top: none;
}
.clean360-search__item:hover,
.clean360-search__item.is-active {
    background: #eef4ff;
    text-decoration: none;
    color: #0b3d91;
}
.clean360-search__item-title {
    font-size: 0.85rem;
    font-weight: 600;
}
.clean360-search__item-sub {
    font-size: 0.75rem;
    color: #6c757d;
}
/* Multi-action rows (e.g. a project offering Details + Budget). */
.clean360-search__item--multi {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.clean360-search__item-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.clean360-search__item-main .clean360-search__item-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.clean360-search__item-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.clean360-search__action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    color: #0b3d91;
    background: #eef4ff;
    border: 1px solid #d3e0fb;
    border-radius: 999px;
    white-space: nowrap;
    transition: background 0.12s ease, color 0.12s ease;
}
.clean360-search__action:hover,
.clean360-search__action:focus {
    background: #0b3d91;
    color: #ffffff;
    text-decoration: none;
}
.clean360-search__empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 0.82rem;
    color: #6c757d;
}

/* ---- CLEAN360 offline banner ----------------------------------------------- */
.clean360-offline-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 8px 16px;
    text-align: center;
    font-size: 0.85rem;
    color: #fff;
    background: #b02a37;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
}
.clean360-offline-banner[hidden] {
    display: none;
}
.clean360-offline-banner i {
    margin-right: 6px;
}

/* ---- Theme toggle (navbar utility) ----------------------------------------- */
.clean360-theme-toggle {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-fast) var(--ease-standard);
}
.clean360-theme-toggle:hover,
.clean360-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
}

/* Desktop ribbon navbar body offset (height set via --navbar-expanded-h in clean360-navbar.js) */
@media (min-width: 992px) {
    body.navbar-collapsed {
        padding-top: 50px;
        transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    body.navbar-expanded {
        padding-top: var(--navbar-expanded-h, 110px);
        transition: padding-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ---- CLEAN360 KPI grid (shared dashboard cards) ----------------------------- */
.clean360-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.65rem;
}
.clean360-kpi-grid--dashboard {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.clean360-kpi {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    box-shadow: var(--shadow-xs);
    min-height: 100%;
}
.clean360-kpi--link {
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast) var(--ease-standard), box-shadow var(--transition-fast) var(--ease-standard);
}
.clean360-kpi--link:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
}
.clean360-kpi--primary { border-top: 3px solid var(--accent); }
.clean360-kpi--success { border-top: 3px solid var(--success); }
.clean360-kpi--warning { border-top: 3px solid var(--warning); }
.clean360-kpi--info { border-top: 3px solid var(--info); }
.clean360-kpi__icon {
    color: var(--accent);
    font-size: 1.35rem;
    line-height: 1;
    opacity: 0.85;
    flex-shrink: 0;
}
.clean360-kpi__icon i.fas,
.clean360-kpi__icon i.far,
.clean360-mywork h2 i.fas,
.clean360-mywork .card-header i.fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    display: inline-block;
}
.clean360-kpi--success .clean360-kpi__icon { color: var(--success); }
.clean360-kpi--warning .clean360-kpi__icon { color: var(--warning); }
.clean360-kpi--info .clean360-kpi__icon { color: var(--info); }
.clean360-kpi__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    font-weight: 600;
}
.clean360-kpi__value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
}

/* ---- My Work inbox --------------------------------------------------------- */
.clean360-mywork-inbox__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.clean360-mywork-inbox__row.is-unread {
    background: var(--accent-soft);
}
.clean360-mywork-inbox__category {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.clean360-mywork-inbox__title {
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}
.clean360-mywork-inbox__title:hover { color: var(--accent); }
.clean360-mywork-inbox__sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}
.clean360-mywork-inbox__time {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ---- Upcoming billing card (token-based; replaces inline hex) -------------- */
.upcoming-billing-card .upcoming-billing-title {
    color: var(--text-primary);
}
.upcoming-billing-card .upcoming-billing-meta,
.upcoming-billing-card .upcoming-billing-section {
    color: var(--text-secondary) !important;
    border-left-color: var(--border-color) !important;
}
.upcoming-billing-card .upcoming-billing-progress {
    border-color: var(--border-color);
    background-color: var(--bg-tertiary);
}

/* ---- Dark mode: global search dropdown ------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .clean360-search__input {
        background: var(--bg-primary);
        color: var(--text-primary);
        border-color: rgba(255, 255, 255, 0.25);
    }
    :root:not([data-theme="light"]) .clean360-search__results {
        background: var(--bg-primary);
        color: var(--text-primary);
        border-color: var(--border-color);
    }
    :root:not([data-theme="light"]) .clean360-search__group-label {
        background: var(--bg-tertiary);
        color: var(--text-secondary);
    }
    :root:not([data-theme="light"]) .clean360-search__item {
        color: var(--text-primary);
        border-top-color: var(--border-color);
    }
    :root:not([data-theme="light"]) .clean360-search__item:hover,
    :root:not([data-theme="light"]) .clean360-search__item.is-active {
        background: var(--accent-soft);
        color: var(--accent);
    }
    :root:not([data-theme="light"]) .clean360-search__item-sub {
        color: var(--text-secondary);
    }
    :root:not([data-theme="light"]) .clean360-search__action {
        color: var(--accent);
        background: var(--accent-soft);
        border-color: var(--accent-soft-border);
    }
}
[data-theme="dark"] .clean360-search__input {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.25);
}
[data-theme="dark"] .clean360-search__results {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] .clean360-search__group-label {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
[data-theme="dark"] .clean360-search__item {
    color: var(--text-primary);
    border-top-color: var(--border-color);
}
[data-theme="dark"] .clean360-search__item:hover,
[data-theme="dark"] .clean360-search__item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}
[data-theme="dark"] .clean360-search__item-sub {
    color: var(--text-secondary);
}
[data-theme="dark"] .clean360-search__action {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
}

/* Token-based search dropdown (light mode defaults) */
.clean360-search__results {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.clean360-search__group-label {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.clean360-search__item {
    color: var(--text-primary);
    border-top-color: var(--border-color);
}
.clean360-search__item:hover,
.clean360-search__item.is-active {
    background: var(--accent-soft);
    color: var(--accent);
}
.clean360-search__item-sub {
    color: var(--text-secondary);
}
.clean360-search__action {
    color: var(--accent);
    background: var(--accent-soft);
    border-color: var(--accent-soft-border);
}
.clean360-search__input {
    background: var(--bg-primary);
    color: var(--text-primary);
}