/* =============================================================================
   WorkGuru Design System  —  wg-components.css
   =============================================================================
   Single source of truth for tokens, surfaces, typography, components,
   and utilities across all WorkGuru screens.

   Loaded globally in _Layout.cshtml, after wg-theme.css and before WorkGuru.css.
   Per-page files should only contain colour themes and layout overrides.

   Contents:
     1. Design Tokens
     2. Reset / Base
     3. Layout
     4. Typography
     5. Surfaces & Cards
     6. Buttons
     7. Controls (inputs, selects, search)
     8. Chips & Status Pills
     9. Filter Bars & Toolbars
    10. KPI Widgets
    11. Tables
    12. Kanban Board
    13. Progress Bars
    14. Utilities
    15. Global Shell (header, sidebar, content area)
    16. Forms (form cards, form grid, form controls, editable tables)
    17. Modals
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   Tokens are bridged from wg-theme.css via var(--wg-*) references.
   Hex fallbacks ensure wg-reference.html still works standalone.
   When loaded alongside wg-theme.css, dark mode "just works" because
   the --wg-* tokens flip in [data-theme="dark"].
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* ── Page surfaces ── */
    --bg-page:             var(--wg-bg-body,        #F7F8FA);
    --bg-surface:          var(--wg-bg-card,         #FFFFFF);
    --bg-subtle:           var(--wg-bg-surface,      #FAFBFC);
    --border-default:      var(--wg-border,          #E6E8EC);
    --border-heavy:        var(--wg-border-heavy,    #cfd6e4);
    --border-brand:        var(--wg-brand-border,    #c7d2fe);

    /* ── Text ── */
    --text-heading:        var(--wg-text-heading,    #111827);
    --text-primary:        var(--wg-text-primary,    #1F2937);
    --text-secondary:      var(--wg-text-muted,      #6B7280);
    --text-muted:          var(--wg-text-faint,      #9CA3AF);
    --text-inverse:        var(--wg-text-inverse,    #FFFFFF);
    --text-disabled:       var(--wg-text-faint,      #9CA3AF);

    /* ── Primary (driven by --wg-brand semantic tokens for theme support) ── */
    --color-primary:       var(--wg-brand,            #6D5CF6);
    --color-primary-hover: var(--wg-brand-hover,      #5A4AE6);
    --color-primary-light: var(--wg-brand-light,      #EEEAFE);

    /* ── Success (green) ── */
    --color-success:       var(--wg-success,         #22C55E);
    --color-success-hover: var(--wg-green-600,       #16A34A);
    --color-success-light: var(--wg-success-light,   #EAFBF1);

    /* ── Danger (red) ── */
    --color-danger:        var(--wg-danger,          #EF4444);
    --color-danger-hover:  var(--wg-red-600,         #DC2626);
    --color-danger-light:  var(--wg-danger-light,    #FDECEC);

    /* ── Warning (orange) ── */
    --color-warning:       var(--wg-warning,         #F59E0B);
    --color-warning-hover: var(--wg-yellow-700,      #D97706);
    --color-warning-light: var(--wg-warning-light,   #FFF7E6);

    /* ── Info (blue) ── */
    --color-info:          var(--wg-info,            #3B82F6);
    --color-info-hover:    var(--wg-blue-600,        #2563EB);
    --color-info-light:    var(--wg-info-light,      #EAF2FF);

    /* ── Shadows ── */
    --shadow-none:         none;

    /* ── Radius ── */
    --radius-lg:           var(--wg-radius-lg,       20px);
    --radius-md:           var(--wg-radius-md,       12px);
    --radius-sm:           var(--wg-radius-sm,       6px);
    --radius-pill:         var(--wg-radius-full,     999px);

    /* ── Spacing ── */
    --space-1:  var(--wg-space-1,  4px);
    --space-2:  var(--wg-space-2,  8px);
    --space-3:  var(--wg-space-3,  12px);
    --space-4:  var(--wg-space-4,  16px);
    --space-5:  var(--wg-space-6,  24px);
    --space-6:  var(--wg-space-8,  32px);

    /* ── Controls ── */
    --control-height:      44px;
    --control-height-sm:   var(--wg-row-height, 36px);
    --card-padding:        20px;
    --section-gap:         24px;

    /* ── Font ── */
    --wg-font:  "Poppins", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* =============================================================================
   2. RESET / BASE
   ============================================================================= */

.wg-page {
    font-family: var(--wg-font);
    color: var(--text-primary);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =============================================================================
   3. LAYOUT
   ============================================================================= */

.wg-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}

.wg-page-header__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.wg-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.wg-section {
    margin-bottom: var(--section-gap);
}

.wg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.wg-section-body {
    /* container for content within a section */
}

.wg-grid {
    display: grid;
    gap: var(--space-4);
}

.wg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
    .wg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .wg-grid--4,
    .wg-grid--3,
    .wg-grid--2 { grid-template-columns: 1fr; }
}

.wg-stack {
    display: flex;
    flex-direction: column;
}

.wg-inline {
    display: flex;
    align-items: center;
}


/* =============================================================================
   4. TYPOGRAPHY
   ============================================================================= */

.wg-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.3;
    margin: 0;
}

.wg-page-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.wg-section-title {
    font-size: 18px;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

.wg-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.wg-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
}

.wg-meta {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.wg-muted {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}


/* =============================================================================
   5. SURFACES & CARDS
   ============================================================================= */

.wg-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--card-padding);
}

.wg-card--compact {
    padding: var(--space-4);
}

.wg-card--soft {
    background: var(--bg-subtle);
    border-color: transparent;
}

.wg-card--kpi {
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wg-card--kpi:hover {
    border-color: var(--wg-border-medium, #D1D5DB);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    transform: translateY(-1px);
}

.wg-card--kpi.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wg-panel {
    background: var(--bg-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}

.wg-surface-subtle {
    background: var(--bg-subtle);
}

/* Card inner dividers */
.wg-card__header {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.wg-card__body {
    /* main content area */
}

.wg-card__footer {
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-default);
}


/* =============================================================================
   6. BUTTONS
   ============================================================================= */

.wg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-family: var(--wg-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease;
}

.wg-btn:hover {
    text-decoration: none;
}

/* Primary */
.wg-btn--primary {
    background: var(--color-primary);
    color: var(--text-inverse, #fff);
    box-shadow: 0 4px 12px rgba(109, 92, 246, 0.25);
}

.wg-btn--primary:hover {
    background: var(--color-primary-hover);
    color: var(--text-inverse, #fff);
    box-shadow: 0 6px 16px rgba(109, 92, 246, 0.35);
}

/* Secondary */
.wg-btn--secondary {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.wg-btn--secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--wg-border-medium, #D1D5DB);
    color: var(--text-primary);
}

/* Ghost */
.wg-btn--ghost {
    background: transparent;
    color: var(--text-secondary);
}

.wg-btn--ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

/* Danger */
.wg-btn--danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border-color: transparent;
}

.wg-btn--danger:hover {
    background: var(--color-danger);
    color: var(--text-inverse, #fff);
}

/* Success */
.wg-btn--success {
    background: var(--color-success-light);
    color: var(--color-success);
    border-color: transparent;
}

.wg-btn--success:hover {
    background: var(--color-success);
    color: var(--text-inverse, #fff);
}

/* Small */
.wg-btn--sm {
    min-height: var(--control-height-sm);
    padding: 0 var(--space-3);
    font-size: 13px;
}

/* Icon-only */
.wg-btn--icon {
    width: var(--control-height);
    min-height: var(--control-height);
    padding: 0;
}

.wg-btn--icon.wg-btn--sm {
    width: var(--control-height-sm);
    min-height: var(--control-height-sm);
}

/* Disabled */
.wg-btn:disabled,
.wg-btn.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* =============================================================================
   7. CONTROLS  (inputs, selects, search)
   ============================================================================= */

.wg-control {
    height: var(--control-height);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--wg-font);
    font-size: 14px;
    padding: 0 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    width: 100%;
}

.wg-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

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

.wg-control--sm {
    height: var(--control-height-sm);
    font-size: 13px;
    padding: 0 var(--space-3);
}

/* Input */
.wg-input {
    /* extends .wg-control — apply both classes, or compose */
}

/* Select */
.wg-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Search group */
.wg-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 320px;
}

.wg-search .wg-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.wg-search .wg-btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-width: var(--control-height);
}

/* Control group (joined controls) */
.wg-control-group {
    display: flex;
    align-items: stretch;
}

.wg-control-group > *:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wg-control-group > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

/* Select2 harmonisation */
.wg-page .select2-container .select2-selection--single {
    height: var(--control-height) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-surface) !important;
}

.wg-page .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--control-height) - 2px) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    padding-left: 14px !important;
    font-family: var(--wg-font) !important;
}

.wg-page .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--control-height) - 2px) !important;
}

.wg-page .select2-container--focus .select2-selection,
.wg-page .select2-container--open .select2-selection {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}


/* =============================================================================
   8. CHIPS & STATUS PILLS
   ============================================================================= */

.wg-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: var(--radius-pill);
    font-family: var(--wg-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    white-space: nowrap;
}

.wg-chip--sm {
    min-height: 24px;
    padding: 0 8px;
    font-size: 11px;
}

.wg-chip--primary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.wg-chip--success {
    background: var(--color-success-light);
    color: var(--color-success);
}

.wg-chip--danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.wg-chip--warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
}

.wg-chip--info {
    background: var(--color-info-light);
    color: var(--color-info);
}

.wg-chip--neutral {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

/* Interactive chip (tab filters, toggle chips) */
.wg-chip--interactive {
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.wg-chip--interactive:hover {
    background: var(--bg-subtle);
    color: var(--text-primary);
}

.wg-chip--interactive.is-active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Badge (count bubble) */
.wg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}


/* =============================================================================
   9. FILTER BARS & TOOLBARS
   ============================================================================= */

.wg-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    flex-wrap: wrap;
}

.wg-filter-bar__left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.wg-filter-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex-wrap: wrap;
}

.wg-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
}

/* Toggle / segmented control */
.wg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    padding: 3px;
    border: 1px solid var(--border-default);
}

.wg-toggle__item {
    padding: 8px 14px;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}

.wg-toggle__item:hover {
    color: var(--text-primary);
}

.wg-toggle__item--active,
.wg-toggle__item.is-active {
    background: var(--bg-surface);
    color: var(--color-primary);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}


/* =============================================================================
   10. KPI WIDGETS
   ============================================================================= */

.wg-kpi {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--card-padding);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wg-kpi:hover {
    border-color: var(--wg-border-medium, #D1D5DB);
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
    transform: translateY(-1px);
}

.wg-kpi.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wg-kpi__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    font-size: 18px;
}

.wg-kpi__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.wg-kpi__value {
    font-size: 36px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.wg-kpi__meta {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* KPI colour themes */
.wg-kpi--primary .wg-kpi__icon  { background: var(--color-primary-light); color: var(--color-primary); }
.wg-kpi--primary .wg-kpi__value { color: var(--color-primary); }

.wg-kpi--success .wg-kpi__icon  { background: var(--color-success-light); color: var(--color-success); }
.wg-kpi--success .wg-kpi__value { color: var(--color-success); }

.wg-kpi--danger .wg-kpi__icon   { background: var(--color-danger-light); color: var(--color-danger); }
.wg-kpi--danger .wg-kpi__value  { color: var(--color-danger); }

.wg-kpi--warning .wg-kpi__icon  { background: var(--color-warning-light); color: var(--color-warning); }
.wg-kpi--warning .wg-kpi__value { color: var(--color-warning); }

.wg-kpi--info .wg-kpi__icon     { background: var(--color-info-light); color: var(--color-info); }
.wg-kpi--info .wg-kpi__value    { color: var(--color-info); }

.wg-kpi--neutral .wg-kpi__icon  { background: var(--bg-subtle); color: var(--text-secondary); }
.wg-kpi--neutral .wg-kpi__value { color: var(--text-secondary); }


/* -----------------------------------------------------------------------------
   10a. LEGACY WIDGET GRID  (nd-widgets-grid / .dashboard-widget)
   ─────────────────────────────────────────────────────────────────────────────
   Shared layout + card structure used by all existing dashboard pages.
   Migrated from NewDashboardsTable.css so it loads globally.
   ----------------------------------------------------------------------------- */

/* 4-column responsive grid */
.nd-widgets-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

@media (max-width: 1199.98px) {
    .nd-widgets-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .nd-widgets-grid {
        grid-template-columns: 1fr;
    }
}

/* Widget card baseline */
.nd-widgets-grid .dashboard-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    justify-items: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
}

    .nd-widgets-grid .dashboard-widget:hover {
        border-color: var(--border-default);
        box-shadow: 0 8px 22px rgba(20, 30, 60, 0.08);
        transform: translateY(-1px);
    }

/* Icon circle */
.nd-widgets-grid .widget-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 18px;
}

/* Title */
.nd-widgets-grid .widget-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
}

/* Value (the big number) */
.nd-widgets-grid .widget-value {
    font-size: 36px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    color: var(--text-primary);
    text-align: center;
}

/* Subtext / caption */
.nd-widgets-grid .widget-subtext {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
    text-align: center;
    min-height: 0;
}

button.dashboard-widget i {
    margin-right: 0px !important;
}


/* -----------------------------------------------------------------------------
   10a-ii. STATUS PILL BASE
   ─────────────────────────────────────────────────────────────────────────────
   Base .status-pill structure. Colour variants in section 10b below.
   ----------------------------------------------------------------------------- */

.status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}


/* -----------------------------------------------------------------------------
   10b. UNIFIED WIDGET ICON COLOUR THEMES
   ─────────────────────────────────────────────────────────────────────────────
   These classes work with the EXISTING dashboard markup:
     <div class="dashboard-widget theme-success">
       <div class="widget-icon"><i class="fa fa-check"></i></div>
       ...
     </div>

   They also provide standalone icon utilities (.wg-icon, .wg-icon--*) for
   use anywhere else (tables, cards, list items, etc.).

   RULES (from design spec):
   ─ Icons are MUTED by default — colour indicates MEANING, not decoration
   ─ Always pair light tinted background + strong foreground
   ─ Never use solid filled backgrounds for icon containers
   ─ The same semantic colour must map to the same meaning app-wide
   ─ Do NOT randomly colour each widget for visual variety
   ----------------------------------------------------------------------------- */

/* ── Theme classes for .dashboard-widget (nd-widgets-grid) ── */

.nd-widgets-grid .dashboard-widget.theme-success .widget-icon { background: var(--color-success-light); color: var(--color-success); }
.nd-widgets-grid .dashboard-widget.theme-success .widget-value { color: var(--color-success); }

.nd-widgets-grid .dashboard-widget.theme-danger .widget-icon  { background: var(--color-danger-light); color: var(--color-danger); }
.nd-widgets-grid .dashboard-widget.theme-danger .widget-value  { color: var(--color-danger); }

.nd-widgets-grid .dashboard-widget.theme-warning .widget-icon { background: var(--color-warning-light); color: var(--color-warning); }
.nd-widgets-grid .dashboard-widget.theme-warning .widget-value { color: var(--color-warning); }

.nd-widgets-grid .dashboard-widget.theme-info .widget-icon    { background: var(--color-info-light); color: var(--color-info); }
.nd-widgets-grid .dashboard-widget.theme-info .widget-value    { color: var(--color-info); }

.nd-widgets-grid .dashboard-widget.theme-primary .widget-icon { background: var(--color-primary-light); color: var(--color-primary); }
.nd-widgets-grid .dashboard-widget.theme-primary .widget-value { color: var(--color-primary); }

.nd-widgets-grid .dashboard-widget.theme-neutral .widget-icon { background: var(--bg-subtle); color: var(--text-secondary); }
.nd-widgets-grid .dashboard-widget.theme-neutral .widget-value { color: var(--text-secondary); }


/* ── Standalone icon container utility ── */

.wg-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    /* Default: muted */
    background: var(--bg-subtle);
    color: var(--text-secondary);
}

.wg-icon--sm {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.wg-icon--lg {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

/* Semantic colour variants */
.wg-icon--primary  { background: var(--color-primary-light); color: var(--color-primary); }
.wg-icon--success  { background: var(--color-success-light); color: var(--color-success); }
.wg-icon--danger   { background: var(--color-danger-light);  color: var(--color-danger); }
.wg-icon--warning  { background: var(--color-warning-light); color: var(--color-warning); }
.wg-icon--info     { background: var(--color-info-light);    color: var(--color-info); }
.wg-icon--neutral  { background: var(--bg-subtle);           color: var(--text-secondary); }
.wg-icon--muted    { background: transparent;                color: var(--text-muted); }


/* ── Inline icon (no background, just coloured) ── */

.wg-icon-color--primary { color: var(--color-primary); }
.wg-icon-color--success { color: var(--color-success); }
.wg-icon-color--danger  { color: var(--color-danger); }
.wg-icon-color--warning { color: var(--color-warning); }
.wg-icon-color--info    { color: var(--color-info); }
.wg-icon-color--muted   { color: var(--text-muted); }


/* ── Status pill colour variants ── */

.status-pill--neutral  { background: var(--bg-subtle) !important;            color: var(--text-secondary) !important; }
.status-pill--primary  { background: var(--color-primary-light) !important;  color: var(--color-primary) !important; }
.status-pill--success  { background: var(--color-success-light) !important;  color: var(--color-success) !important; }
.status-pill--danger   { background: var(--color-danger-light) !important;   color: var(--color-danger) !important; }
.status-pill--warning  { background: var(--color-warning-light) !important;  color: var(--color-warning) !important; }
.status-pill--info     { background: var(--color-info-light) !important;     color: var(--color-info) !important; }


/* ── Progress bar unified colours ── */

.wg-progress__fill,
.project-progress__fill {
    transition: width 0.3s ease;
}

.wg-progress--primary .wg-progress__fill { background: var(--color-primary); }
.wg-progress--success .wg-progress__fill { background: var(--color-success); }
.wg-progress--warning .wg-progress__fill { background: var(--color-warning); }
.wg-progress--danger .wg-progress__fill  { background: var(--color-danger); }


/* -----------------------------------------------------------------------------
   10b. DASHBOARD TABLE STACKED CELLS
   ─────────────────────────────────────────────────────────────────────────────
   Primary/secondary pattern for dashboard widget tables.  Combines related
   data (e.g. project number + client) into a single column to save space.
   ----------------------------------------------------------------------------- */

.db-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
    min-width: 0;
}

.db-cell-stack__primary {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.db-cell-stack__primary a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.db-cell-stack__primary a:hover {
    text-decoration: underline;
}

.db-cell-stack__secondary {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.3;
}


/* -----------------------------------------------------------------------------
   10c. DASHBOARD PORTLET KPI VALUES
   ─────────────────────────────────────────────────────────────────────────────
   Used by ViewComponent KPI widgets rendered inside m-portlet cards on the
   main Dashboard page.  Replaces legacy inline style="color: green" etc.
   ----------------------------------------------------------------------------- */

.db-kpi-value {
    font-size: 36px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0;
    padding: 8px 0;
}

.db-kpi-value--success { color: var(--color-success) !important; }
.db-kpi-value--danger  { color: var(--color-danger) !important; }
.db-kpi-value--warning { color: var(--color-warning) !important; }
.db-kpi-value--info    { color: var(--color-info) !important; }
.db-kpi-value--primary { color: var(--color-primary) !important; }
.db-kpi-value--neutral { color: var(--text-secondary) !important; }

.db-kpi-value a { color: inherit !important; text-decoration: none; }
.db-kpi-value a:hover { opacity: 0.85; }

.db-kpi-meta {
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
    margin-top: 4px;
}


/* =============================================================================
   11. TABLES
   ============================================================================= */

.wg-table-wrap {
    padding: 0 var(--card-padding) var(--card-padding);
}

.wg-table {
    width: 100%;
    border-collapse: collapse;
}

.wg-table thead th {
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    text-align: left;
    white-space: nowrap;
}

.wg-table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-primary);
}

.wg-table tbody tr:hover td {
    background: var(--bg-subtle);
}

/* Right-aligned data columns */
.wg-table .wg-table__cell--right,
.wg-table .wg-table__cell--right * {
    text-align: right;
}

/* Row metadata */
.wg-table__meta {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Row actions */
.wg-table__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    justify-content: flex-end;
}

/* Stacked cell (primary + secondary lines) */
.wg-table__stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wg-table__stack-primary {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.wg-table__stack-primary a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

.wg-table__stack-primary a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.wg-table__stack-secondary {
    font-size: 13px;
    color: var(--text-secondary);
}

.wg-table__stack-meta {
    font-size: 12px;
    color: var(--text-muted);
}

/* Table bottom bar (pagination, info) */
.wg-table-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--card-padding);
    flex-wrap: wrap;
}

.wg-table-bottom .dataTables_info {
    color: var(--text-muted);
    font-size: 13px;
}

.wg-table-bottom .dataTables_length label {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
}

.wg-table-bottom .dataTables_length select {
    height: var(--control-height-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-2);
}


/* =============================================================================
   12. KANBAN BOARD
   ============================================================================= */

.wg-board {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-4);
    min-height: 400px;
}

.wg-board__column {
    flex: 0 0 320px;
    min-width: 320px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 160px);
    border-top: 4px solid var(--column-color, var(--text-muted));
}

.wg-board__column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.wg-board__column-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.wg-board__column-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--column-color, var(--text-muted));
    flex-shrink: 0;
}

.wg-board__count {
    font-size: 12px;
    font-weight: 600;
    padding: var(--space-1) 9px;
    border-radius: var(--radius-pill);
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.wg-board__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.wg-board__card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 14px;
    cursor: grab;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    border-top: 4px solid var(--column-color, var(--text-muted));
}

.wg-board__card:hover {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}

.wg-board__card.is-dragging {
    opacity: 0.85;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
    cursor: grabbing;
}

.wg-board__card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
    margin-bottom: var(--space-2);
}

.wg-board__card-title a {
    color: inherit;
    text-decoration: none;
}

.wg-board__card-title a:hover {
    color: var(--color-primary);
}

.wg-board__card-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--text-secondary);
}

.wg-board__card-meta-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wg-board__card-meta-row i {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
}

.wg-board__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}


/* =============================================================================
   13. PROGRESS BARS
   ============================================================================= */

.wg-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wg-progress__track {
    flex: 1;
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--border-default);
    overflow: hidden;
    position: relative;
}

.wg-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width 0.3s ease;
}

.wg-progress__fill--success { background: var(--color-success); }
.wg-progress__fill--danger  { background: var(--color-danger); }
.wg-progress__fill--warning { background: var(--color-warning); }

.wg-progress__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}


/* =============================================================================
   14. UTILITIES
   ============================================================================= */

/* Gap helpers */
.wg-gap-4  { gap: var(--space-1) !important; }
.wg-gap-8  { gap: var(--space-2) !important; }
.wg-gap-12 { gap: var(--space-3) !important; }
.wg-gap-16 { gap: var(--space-4) !important; }
.wg-gap-24 { gap: var(--space-5) !important; }
.wg-gap-32 { gap: var(--space-6) !important; }

/* Display */
.wg-flex       { display: flex !important; }
.wg-flex-col   { flex-direction: column !important; }
.wg-flex-wrap  { flex-wrap: wrap !important; }
.wg-flex-1     { flex: 1 !important; }
.wg-inline     { display: inline-flex !important; align-items: center !important; }

/* Alignment */
.wg-align-between  { justify-content: space-between !important; }
.wg-align-center   { align-items: center !important; }
.wg-align-start    { align-items: flex-start !important; }
.wg-align-end      { justify-content: flex-end !important; }

/* Text */
.wg-text-center { text-align: center !important; }
.wg-text-right  { text-align: right !important; }
.wg-text-left   { text-align: left !important; }
.wg-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* State */
.wg-is-muted      { opacity: 0.5; }
.wg-is-scrollable  { overflow-y: auto; }
.wg-is-hidden      { display: none !important; }

/* Margin/Padding helpers (most common) */
.wg-mb-0  { margin-bottom: 0 !important; }
.wg-mb-8  { margin-bottom: var(--space-2) !important; }
.wg-mb-16 { margin-bottom: var(--space-4) !important; }
.wg-mb-24 { margin-bottom: var(--space-5) !important; }
.wg-mt-0  { margin-top: 0 !important; }
.wg-mt-8  { margin-top: var(--space-2) !important; }
.wg-mt-16 { margin-top: var(--space-4) !important; }
.wg-ml-auto { margin-left: auto !important; }

/* Colour helpers (for one-off icon/value tinting) */
.wg-color-primary  { color: var(--color-primary) !important; }
.wg-color-success  { color: var(--color-success) !important; }
.wg-color-danger   { color: var(--color-danger) !important; }
.wg-color-warning  { color: var(--color-warning) !important; }
.wg-color-info     { color: var(--color-info) !important; }
.wg-color-muted    { color: var(--text-muted) !important; }

.wg-bg-primary-light  { background: var(--color-primary-light) !important; }
.wg-bg-success-light  { background: var(--color-success-light) !important; }
.wg-bg-danger-light   { background: var(--color-danger-light) !important; }
.wg-bg-warning-light  { background: var(--color-warning-light) !important; }
.wg-bg-info-light     { background: var(--color-info-light) !important; }


/* =============================================================================
   15. GLOBAL SHELL
   =============================================================================
   Token-based overrides for the Metronic 4.x app shell (header, sidebar,
   content area). These target existing Metronic selectors so no markup
   changes are needed. As pages migrate to .wg-* components, these
   overrides can be trimmed.
   ============================================================================= */


/* ── 15a. Header Bar ── */

.m-header {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04) !important;
}

/* Brand / logo area */
.m-brand {
    background: var(--bg-surface) !important;
}

/* Remove the Metronic rainbow gradient top line */
.m-header .m-header__top {
    border-top: none !important;
}

/* Topbar icons */
.m-topbar .m-nav__link-icon {
    color: var(--text-secondary) !important;
}

.m-topbar .m-nav__link-icon:hover {
    color: var(--color-primary) !important;
}

/* Topbar username */
span.m-topbar__username {
    color: var(--text-secondary) !important;
    font-weight: 600;
    font-size: 13px;
}

/* Search input in header */
#globalSearch {
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    font-size: 13px !important;
    height: 36px !important;
}

#globalSearch:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px var(--color-primary-light) !important;
    background: var(--bg-surface) !important;
}

#globalSearchBtn {
    height: 36px !important;
    border-radius: 0 8px 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-left: -1px !important;
}

/* Butt the input and button together as a seamless pair */
#globalSearch {
    border-radius: 8px 0 0 8px !important;
}

/* ── Global search results dropdown ── */
.global-search-wrapper {
    position: relative !important;
}

.global-search-dropdown {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    width: 320px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 1000000;
    background: var(--bg-surface, #ffffff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);
    padding: 12px;
    margin-top: 6px;
}

[data-mode="dark"] .global-search-dropdown {
    background: var(--bg-surface, #1a1d27);
    border-color: var(--border-default, #3f4452);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.global-search-dropdown h6 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
    margin: 12px 0 6px;
    padding: 0 4px;
}

.global-search-dropdown h6:first-child {
    margin-top: 0;
}

.global-search-dropdown hr {
    border: none;
    border-top: 1px solid var(--border-default, #e2e8f0);
    margin: 8px 0;
}

[data-mode="dark"] .global-search-dropdown hr {
    border-top-color: var(--border-default, #3f4452);
}

.global-search-result-line {
    padding: 6px 8px;
    border-radius: 8px;
    margin-bottom: 2px;
    transition: background 0.12s;
}

.global-search-result-line:hover {
    background: var(--bg-subtle, #f8fafc);
}

[data-mode="dark"] .global-search-result-line:hover {
    background: var(--bg-subtle, #22252f);
}

.global-search-result-line a {
    text-decoration: none;
    color: var(--color-primary, #5867dd);
    font-weight: 600;
    font-size: 14px;
}

.global-search-result-line a:hover {
    text-decoration: underline;
}

.global-search-result-line a h6 {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: inherit;
    margin: 0;
    padding: 0;
}

.global-search-result-line span {
    display: block;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin-top: 2px;
}

/* Scrollbar for search dropdown */
.global-search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.global-search-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.global-search-dropdown::-webkit-scrollbar-thumb {
    background: var(--border-default, #e2e8f0);
    border-radius: 3px;
}

/* Header dropdown arrow */
.m-topbar .m-dropdown__arrow {
    color: var(--text-muted) !important;
}

/* ── Add/Edit Project form spacing fixes ── */

/* Prevent Select2 containers from overflowing their grid column */
.wg-form .form-group .select2-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Give "Add" buttons breathing room from adjacent selects and match input height */
.wg-form #AddNewClientButton,
.wg-form #CreateContactButton,
.wg-form #AddAssetButton {
    max-width: calc(100% - 8px) !important;
    margin-left: 8px !important;
    height: 44px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--wg-input-radius, 12px) !important;
}

/* Match height and rounding on standalone action buttons in wg-form */
.wg-form #addTemplateToProjectButton {
    height: 44px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--wg-input-radius, 12px) !important;
}


/* ── 15b. Sidebar Navigation ── */

/* Sidebar background */
.m-aside-left {
    background: var(--bg-surface) !important;
    border-right: 1px solid var(--border-default) !important;
}

/* Menu nav container */
.m-aside-menu {
    background: transparent !important;
}

/* Menu item link — default state */
.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link {
    color: var(--text-secondary) !important;
}

.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon {
    color: var(--text-muted) !important;
}

.m-aside-menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text {
    color: var(--text-secondary) !important;
    font-weight: 400;
}

/* Menu item — hover */
.m-aside-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link,
.m-aside-menu .m-menu__nav > .m-menu__item.m-menu__item--hover > .m-menu__link {
    background: var(--bg-subtle) !important;
}

.m-aside-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon,
.m-aside-menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-text {
    color: var(--text-primary) !important;
}

/* Menu item — active (replaces #ededfd from metronic-customize.css) */
.m-aside-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading {
    background: var(--color-primary-light) !important;
}

.m-aside-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
    color: var(--color-primary) !important;
}

.m-aside-menu .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: var(--color-primary) !important;
    font-weight: 600;
}

/* Submenu items — default */
.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
    color: var(--text-secondary) !important;
    font-weight: 500;
}

/* Submenu items — hover */
.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-text {
    color: var(--text-primary) !important;
}

/* Submenu items — active (replaces #ededfd from metronic-customize.css) */
.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link,
.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading {
    background: var(--color-primary-light) !important;
}

.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: var(--color-primary) !important;
    font-weight: 600;
}

.m-aside-menu .m-menu__nav .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
    color: var(--color-primary) !important;
}

/* Submenu arrow indicators */
.m-aside-menu .m-menu__nav .m-menu__ver-arrow {
    color: var(--text-muted) !important;
}

/* Section headings in menu (if any) */
.m-aside-menu .m-menu__nav > .m-menu__section .m-menu__section-text {
    color: var(--text-muted) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 11px;
}


/* ── 15b-dark. Sidebar Navigation — Dark Mode ──
   Selectors include .m-aside-menu--skin-light to beat metronic-customize.css
   specificity (0,8,0+). The [data-mode="dark"] prefix ensures these only
   apply in dark mode. */

/* Sidebar background */
[data-mode="dark"] .m-aside-left {
    background: var(--bg-surface, #22252f) !important;
    border-right-color: var(--border-default, #353946) !important;
}

/* Menu item link — default text in dark */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-text,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item .m-menu__link .m-menu__link-icon {
    color: var(--text-muted, #8b92a5) !important;
}

/* Menu item — hover in dark */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item:hover > .m-menu__link {
    background-color: var(--bg-hover, #2a2e3a) !important;
}

[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item:hover > .m-menu__link .m-menu__link-text,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item:hover > .m-menu__link .m-menu__link-icon {
    color: var(--text-primary, #e2e4ea) !important;
}

/* Menu item — active (toned-down brand tint instead of bright #EEEAFE) */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__heading {
    background-color: color-mix(in srgb, var(--color-primary, #6D5CF6) 15%, transparent) !important;
}

[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text {
    color: var(--color-primary, #6D5CF6) !important;
}

/* Submenu items — default in dark */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__submenu .m-menu__item > .m-menu__link .m-menu__link-text {
    color: var(--text-muted, #8b92a5) !important;
}

/* Submenu items — hover in dark */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__submenu .m-menu__item:hover > .m-menu__link {
    background-color: var(--bg-hover, #2a2e3a) !important;
}

[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__submenu .m-menu__item:hover > .m-menu__link .m-menu__link-text {
    color: var(--text-primary, #e2e4ea) !important;
}

/* Submenu items — active in dark (toned-down brand tint) */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__heading {
    background-color: color-mix(in srgb, var(--color-primary, #6D5CF6) 15%, transparent) !important;
}

[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-text,
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav > .m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active > .m-menu__link .m-menu__link-icon {
    color: var(--color-primary, #6D5CF6) !important;
}

/* Submenu background in dark */
[data-mode="dark"] .m-aside-menu.m-aside-menu--skin-light .m-menu__nav .m-menu__item .m-menu__submenu {
    background: var(--bg-surface, #22252f) !important;
}

/* Section headings in dark */
[data-mode="dark"] .m-aside-menu .m-menu__nav > .m-menu__section .m-menu__section-text {
    color: var(--text-faint, #6b7280) !important;
}

/* Arrow indicators in dark */
[data-mode="dark"] .m-aside-menu .m-menu__nav .m-menu__ver-arrow {
    color: var(--text-muted, #8b92a5) !important;
}


/* ── 15c. Content Area ── */

/* Page background */
.m-body,
.m-wrapper {
    background: var(--bg-page) !important;
}

/* Content padding (consistent spacing) */
.m-content {
    padding: 20px !important;
}

/* Subheader / breadcrumb area */
.m-subheader {
    padding: 16px 20px 0 20px !important;
    background: transparent !important;
}

.m-subheader .m-subheader__title {
    color: var(--text-primary) !important;
    font-weight: 700;
}

.m-subheader .m-subheader__desc,
.m-subheader .m-section__sub {
    color: var(--text-muted) !important;
}


/* ── 15d. Subscription Warning Bar ── */

.subscription-info {
    background: var(--color-warning-light) !important;
    color: var(--color-warning) !important;
    border-bottom: 1px solid var(--color-warning) !important;
    font-weight: 500;
}


/* ── 15e. Scroll-to-top / Scroll-to-bottom ── */

.m-scroll-top {
    background: var(--color-primary) !important;
}

.m-scroll-top:hover {
    background: var(--color-primary-hover) !important;
}


/* =============================================================================
   16. FORMS
   ─────────────────────────────────────────────────────────────────────────────
   Modern form styling for WG pages.
   Wrap any form area with .wg-form to opt in.
   Works alongside Bootstrap .form-control / .form-group, doesn't replace them.
   ============================================================================= */

/* ── 16a. Form Card (replaces m-portlet visually) ── */

.wg-form-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}

.wg-form-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 20px 28px;
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
}

.wg-form-card__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0;
}

.wg-form-card__body {
    padding: 28px;
}

/* ── 16b. Form Grid ── */

.wg-form-grid {
    display: grid;
    gap: 20px 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
    .wg-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .wg-form-grid { grid-template-columns: 1fr; }
}

.wg-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wg-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Span modifiers */
.wg-col-span-2 { grid-column: span 2; }
.wg-col-span-3 { grid-column: span 3; }
.wg-col-span-4 { grid-column: span 4; }
.wg-col-full   { grid-column: 1 / -1; }

/* ── 16c. Form Group (label + input pair) ── */

.wg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wg-form-group > label,
.wg-form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
    margin: 0;
}

/* ── 16d. Modernised form-control within .wg-form scope ── */
/* Overrides Bootstrap's .form-control when inside a WG form context.
   Rounded corners, softer border, cleaner focus ring.                 */

.wg-form .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]),
.wg-form-card .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]) {
    height: var(--control-height);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    padding: 0 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wg-form .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]):focus,
.wg-form-card .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}

.wg-form .form-control:not(.btn)::placeholder,
.wg-form-card .form-control:not(.btn)::placeholder {
    color: var(--text-muted);
}

/* Checkboxes & radios — keep natural size, add accent colour */
.wg-form .form-control[type="checkbox"],
.wg-form-card .form-control[type="checkbox"],
.wg-form .form-control[type="radio"],
.wg-form-card .form-control[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary);
    cursor: pointer;
    border: none;
    box-shadow: none;
    padding: 0;
    vertical-align: middle;
    display: block;
    margin: 0 auto;
}

/* Textarea gets auto-height instead of fixed */
.wg-form textarea.form-control:not(.btn):not([type="checkbox"]):not([type="radio"]),
.wg-form-card textarea.form-control:not(.btn):not([type="checkbox"]):not([type="radio"]) {
    height: auto;
    min-height: 80px;
    padding: 10px 14px;
    resize: vertical;
}

/* Select2 within WG forms */
.wg-form .select2-container--default .select2-selection--single,
.wg-form-card .select2-container--default .select2-selection--single {
    height: var(--control-height) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    display: flex !important;
    align-items: center !important;
}

.wg-form .select2-container--default .select2-selection--single .select2-selection__rendered,
.wg-form-card .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    color: var(--text-primary) !important;
    padding-left: 14px !important;
    padding-right: 28px !important;
    font-size: 14px !important;
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.wg-form .select2-container--default .select2-selection--single .select2-selection__arrow,
.wg-form-card .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.wg-form .select2-container--default.select2-container--open .select2-selection--single,
.wg-form-card .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* Select2 focus class can stick after selection — only show ring when truly open */
.wg-form .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single,
.wg-form-card .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single {
    border-color: var(--border-default) !important;
    box-shadow: none !important;
}

/* Select2 multiple (e.g. Phases, Tags) within WG forms */
.wg-form .select2-container--default .select2-selection--multiple,
.wg-form-card .select2-container--default .select2-selection--multiple {
    min-height: var(--control-height) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    padding: 4px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

.wg-form .select2-container--default .select2-selection--multiple .select2-selection__choice,
.wg-form-card .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--color-primary-light) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
}

.wg-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.wg-form-card .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--color-primary) !important;
    margin-right: 4px !important;
}

.wg-form .select2-container--default .select2-selection--multiple .select2-search__field,
.wg-form-card .select2-container--default .select2-selection--multiple .select2-search__field {
    font-size: 14px !important;
    margin-top: 0 !important;
    height: 32px !important;
}

.wg-form .select2-container--default.select2-container--open .select2-selection--multiple,
.wg-form-card .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.wg-form .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--multiple,
.wg-form-card .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--multiple {
    border-color: var(--border-default) !important;
    box-shadow: none !important;
}

/* Native <select> within WG forms */
.wg-form select.form-control,
.wg-form-card select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* ── 16d-ii. Modernised buttons within WG forms ── */
/* Rounded, consistent height, cleaner hover/focus states.
   Works with existing .btn .btn-primary / .btn-secondary classes. */

.wg-form .btn,
.wg-form-card .btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wg-form .btn-primary,
.wg-form-card .btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-inverse, #fff);
}

.wg-form .btn-primary:hover,
.wg-form-card .btn-primary:hover {
    background: var(--color-primary-dark, #3730a3);
    border-color: var(--color-primary-dark, #3730a3);
}

.wg-form .btn-primary:focus,
.wg-form-card .btn-primary:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wg-form .btn-secondary,
.wg-form-card .btn-secondary {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}

.wg-form .btn-secondary:hover,
.wg-form-card .btn-secondary:hover {
    background: var(--bg-subtle);
    border-color: var(--border-heavy);
}

/* ── 16e. Form Sections (horizontal dividers within a form) ── */

.wg-form-section {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--border-default);
}

.wg-form-section__title {
    font-size: 16px;
    font-weight: 650;
    color: var(--text-primary);
    margin: 0 0 16px 0;
}

/* ── 16f. Form Actions (save/cancel bar) ── */

.wg-form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: 24px;
    margin-top: 28px;
    border-top: 1px solid var(--border-default);
    flex-wrap: wrap;
}

/* ── 16g. Inline editable tables within forms (Tasks/Products) ── */

.wg-form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.wg-form-table thead th {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
}

.wg-form-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-default);
    vertical-align: middle;
}

.wg-form-table .form-control {
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    padding: 0 10px !important;
}

.wg-form-table .btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.15s ease;
}

.wg-form-table .btn-add-row:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-light);
}

/* ── 16h. Summary row at bottom of form tables ── */

.wg-form-summary {
    display: flex;
    justify-content: flex-end;
    gap: 32px;
    padding: 16px 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.wg-form-summary strong {
    color: var(--text-primary);
}

/* ── 16i. Action dropdown menus within form headers ── */

.wg-form-card .wg-actions-menu {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    background: var(--bg-surface) !important;
    padding: 6px !important;
    min-width: 240px !important;
}

.wg-form-card .wg-actions-menu .wg-actions-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease;
    text-align: left;
    white-space: nowrap;
}

.wg-form-card .wg-actions-menu .wg-actions-item:hover {
    background: var(--bg-subtle);
}

.wg-form-card .wg-actions-menu .wg-actions-item:active {
    background: var(--color-primary-light);
}

.wg-form-card .wg-actions-menu .wg-actions-item:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.wg-form-card .wg-actions-menu .wg-actions-item i {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    font-size: 13px;
}


/* =============================================================================
   17. MODALS
   ============================================================================= */

/* ── 17a. Modal dialog container ── */

.modal .modal-content {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

/* ── 17b. Modal header ── */

.modal .modal-header {
    padding: 20px 28px !important;
    border-bottom: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
}

.modal .modal-header .modal-title {
    font-size: 18px !important;
    font-weight: 650 !important;
    color: var(--text-heading) !important;
}

.modal .modal-header .close {
    font-size: 22px;
    opacity: 0.4;
    color: var(--text-muted);
    transition: opacity 0.15s ease;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    line-height: 1;
}

.modal .modal-header .close:hover {
    opacity: 0.8;
}

/* ── 17c. Modal body (inherits wg-form for modern controls) ── */

.modal .modal-body {
    padding: 24px 28px !important;
    background: var(--bg-surface) !important;
}

/* Form controls inside modals — same as .wg-form overrides */
.modal .modal-body .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]) {
    height: var(--control-height);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    padding: 0 14px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.modal .modal-body .form-control:not(.btn):not([type="checkbox"]):not([type="radio"]):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
    outline: none;
}

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

.modal .modal-body textarea.form-control:not(.btn):not([type="checkbox"]):not([type="radio"]) {
    height: auto;
    min-height: 80px;
    padding: 10px 14px;
    resize: vertical;
}

.modal .modal-body select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239CA3AF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Select2 single inside modals */
.modal .modal-body .select2-container--default .select2-selection--single {
    height: var(--control-height) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    background: var(--bg-surface) !important;
    display: flex !important;
    align-items: center !important;
}

.modal .modal-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: normal !important;
    color: var(--text-primary) !important;
    padding-left: 14px !important;
    padding-right: 28px !important;
    font-size: 14px !important;
    flex: 1 !important;
}

.modal .modal-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal .modal-body .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.modal .modal-body .select2-container--default.select2-container--focus:not(.select2-container--open) .select2-selection--single {
    border-color: var(--border-default) !important;
    box-shadow: none !important;
}

/* Labels inside modals */
.modal .modal-body label,
.modal .modal-body .control-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* ── 17d. Modal footer ── */

.modal .modal-footer {
    padding: 16px 28px !important;
    border-top: 1px solid var(--border-default) !important;
    background: var(--bg-page) !important;
    gap: 10px;
}

.modal .modal-footer .btn {
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 20px;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.modal .modal-footer .btn-primary,
.modal .modal-footer .save-button {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
}

.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .save-button:hover {
    background: var(--color-primary-dark, #3730a3) !important;
    border-color: var(--color-primary-dark, #3730a3) !important;
}

.modal .modal-footer .btn-primary:focus,
.modal .modal-footer .save-button:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.modal .modal-footer .btn-secondary,
.modal .modal-footer .close-button {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

.modal .modal-footer .btn-secondary:hover,
.modal .modal-footer .close-button:hover {
    background: var(--bg-subtle) !important;
    border-color: var(--border-heavy) !important;
}

/* ── 17e. Modal backdrop ── */

.modal-backdrop.show,
.modal-backdrop.in {
    opacity: 0.35 !important;
}

/* ── 17f. jstree dark-mode fixes (Permissions modal etc.) ── */

[data-mode="dark"] .jstree-checkbox {
    filter: invert(0.9) hue-rotate(180deg) !important;
}

/* =========================================================
   18. DASHBOARD PAGES  (.wg-dashboard)
   Shared rules for old-style dashboard Index pages that
   still use btn-brand, green-meadow, actionToggle etc.
========================================================= */

/* ── 18a. Actions toggle button ── */

.wg-dashboard #actionToggle {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

.wg-dashboard #actionToggle:hover {
    background: var(--bg-subtle) !important;
    border-color: var(--border-heavy) !important;
}

.wg-dashboard #actionToggle:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
    border-color: var(--color-primary) !important;
}

.wg-dashboard #actionToggle i {
    margin-right: 6px;
}

/* ── 18b. Actions dropdown menu ── */

.wg-dashboard #dropDownActions {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    background: var(--bg-surface) !important;
    padding: 8px !important;
    min-width: 220px !important;
}

.wg-dashboard #dropDownActions .dropdown-item,
.wg-dashboard #dropDownActions a.btn,
.wg-dashboard #dropDownActions button.btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    background: transparent !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background 0.12s ease !important;
    text-align: left !important;
    white-space: nowrap !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.wg-dashboard #dropDownActions .dropdown-item:hover,
.wg-dashboard #dropDownActions a.btn:hover,
.wg-dashboard #dropDownActions button.btn:hover {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
}

/* Override green-meadow inside dashboard actions */
.wg-dashboard .green-meadow {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
}

.wg-dashboard .green-meadow:hover {
    background: var(--bg-subtle) !important;
}

/* ── 18c. Dashboard table card (portlet) ── */

.wg-dashboard .m-portlet {
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
    overflow: hidden !important;
    background: var(--bg-surface) !important;
}

.wg-dashboard .m-portlet__head {
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--border-default) !important;
    background: var(--bg-surface) !important;
    display: flex !important;
    align-items: center !important;
}

.wg-dashboard .m-portlet__head h4 {
    font-size: 18px !important;
    font-weight: 650 !important;
    color: var(--text-heading) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.wg-dashboard .m-portlet__head .m-portlet__head-caption {
    flex: 1 !important;
}

/* ── 18d. Dashboard search bar ── */

.wg-dashboard .m-portlet__head .input-group,
.wg-dashboard .m-portlet__body .input-group {
    max-width: 360px;
    margin-left: auto !important;
}

.wg-dashboard .input-group .form-control.m-input {
    height: 40px !important;
    border: 1px solid var(--border-default) !important;
    border-right: 0 !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    padding: 0 14px !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease !important;
}

.wg-dashboard .input-group .form-control.m-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: none !important;
}

.wg-dashboard .input-group .input-group-btn .btn,
.wg-dashboard .input-group .btn-primary[type="button"],
.wg-dashboard .input-group .btn-primary[type="submit"] {
    height: 40px !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    background: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    transition: background 0.15s ease !important;
}

.wg-dashboard .input-group .input-group-btn .btn:hover,
.wg-dashboard .input-group .btn-primary[type="button"]:hover,
.wg-dashboard .input-group .btn-primary[type="submit"]:hover {
    background: var(--color-primary-dark, #4338ca) !important;
    border-color: var(--color-primary-dark, #4338ca) !important;
}

/* ── 18e. Dashboard subheader ── */

.wg-dashboard .m-subheader {
    margin-bottom: 8px;
}

.wg-dashboard .m-subheader__title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--text-heading) !important;
    letter-spacing: -0.02em !important;
}

/* ── 18f. Switch-view dropdown ── */

.wg-dashboard .dropdown-toggle.link {
    color: var(--text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    background: transparent !important;
}

.wg-dashboard .dropdown-toggle.link:hover {
    color: var(--color-primary) !important;
}

.wg-dashboard .dropdown-menu {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    background: var(--bg-surface) !important;
    padding: 6px !important;
}

.wg-dashboard .dropdown-menu .dropdown-item {
    border-radius: var(--radius-sm) !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    transition: background 0.12s ease !important;
}

.wg-dashboard .dropdown-menu .dropdown-item:hover {
    background: var(--bg-subtle) !important;
}


/* ===================================================================
   19. THEME PICKER  (.wg-theme-picker)
   =================================================================== */

.wg-theme-picker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.wg-theme-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    padding: 0;
    outline: none;
}

.wg-theme-swatch:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.wg-theme-swatch.is-active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--text-primary);
}

.wg-theme-swatch .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Mode toggle (light / dark) ── */

.wg-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    outline: none;
}

.wg-mode-toggle:hover {
    background: var(--bg-subtle);
    border-color: var(--color-primary);
}

.wg-mode-toggle .wg-mode-icon {
    font-size: 18px;
    line-height: 1;
}

.wg-mode-toggle.is-dark {
    background: var(--wg-bg-card, #22252f);
    border-color: var(--wg-border-default, #3f4452);
    color: var(--wg-text-body, #e2e4ea);
}

.wg-mode-toggle.is-dark:hover {
    background: var(--wg-bg-surface, #2a2e3a);
}

/* ── Radius toggle (rounded / sharp) ── */

.wg-radius-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.wg-radius-toggle:hover {
    background: var(--bg-subtle);
    border-color: var(--color-primary);
}

.wg-radius-toggle .wg-radius-icon {
    font-size: 18px;
    line-height: 1;
}

.wg-radius-toggle.is-sharp {
    border-radius: 2px;
}


/* ===================================================================
   20. GLOBAL THEME OVERRIDES  — Metronic / Bootstrap → tokens
   ─────────────────────────────────────────────────────────────────
   These rules ensure Metronic btn-primary, btn-brand, links, and
   header elements follow the active colour theme.
   =================================================================== */

/* ── Buttons ── */
.btn.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn.btn-primary:focus {
    box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

.btn.btn-brand {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

.btn.btn-brand:hover,
.btn.btn-brand:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn.btn-brand:active,
.btn.btn-brand.active,
.show > .btn.btn-brand.dropdown-toggle {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* ── Links ── */
a {
    color: var(--wg-link);
}

a:hover {
    color: var(--wg-link-hover);
}

/* ── Header search icon ── */
.m-topbar .m-topbar__nav .m-nav__link .m-nav__link-badge.m-badge--brand,
.m-badge--brand {
    background-color: var(--color-primary) !important;
}

/* ── Metronic brand border-top accent ── */
.m--border-top-primary {
    border-top-color: var(--color-primary) !important;
}

/* ── Active tab underlines (if used) ── */
.nav-link.active,
.m-tabs__link.active {
    border-bottom-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ── Checkbox/radio brand colour ── */
.m-checkbox > input:checked ~ span:after {
    border-color: var(--color-primary) !important;
}

.m-radio > input:checked ~ span:after {
    background: var(--color-primary) !important;
}

/* ── 20b. Dark-mode button softening ──
   Reduces btn-primary / btn-brand saturation in dark mode so they
   don't blast the user with a solid block of bright colour.
   btn-default / btn-outline get dark surface treatment.            */

[data-mode="dark"] .btn.btn-primary,
[data-mode="dark"] .btn.btn-brand {
    background-color: color-mix(in srgb, var(--color-primary) 70%, #1a1d28) !important;
    border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
    color: #fff !important;
}

[data-mode="dark"] .btn.btn-primary:hover,
[data-mode="dark"] .btn.btn-primary:focus,
[data-mode="dark"] .btn.btn-brand:hover,
[data-mode="dark"] .btn.btn-brand:focus {
    background-color: color-mix(in srgb, var(--color-primary) 85%, #1a1d28) !important;
    border-color: color-mix(in srgb, var(--color-primary) 60%, transparent) !important;
}

[data-mode="dark"] .btn.btn-default,
[data-mode="dark"] .btn.btn-outline-secondary,
[data-mode="dark"] .btn.cancel {
    background-color: var(--bg-surface, #22252f) !important;
    color: var(--text-primary, #e2e4ea) !important;
    border-color: var(--border-default, #353946) !important;
}

[data-mode="dark"] .btn.btn-default:hover,
[data-mode="dark"] .btn.btn-default:focus,
[data-mode="dark"] .btn.btn-outline-secondary:hover,
[data-mode="dark"] .btn.cancel:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
    color: var(--text-heading, #f1f3f9) !important;
    border-color: var(--border-heavy, #464b5c) !important;
}

[data-mode="dark"] .btn.btn-success {
    background-color: color-mix(in srgb, #22c55e 70%, #1a1d28) !important;
    border-color: color-mix(in srgb, #22c55e 50%, transparent) !important;
    color: #fff !important;
}

/* ── 20c-i. Right-align numeric inputs globally ── */
input[type="number"],
input.Quantity,
input.UnitAmount,
input.Discount,
input.LineTotal,
input.MarkUp,
input.PercentageLineAmount,
input.PercentageTaxAmount,
input.PercentageValue,
input.lineCost,
input.rounding,
input.taxRounding,
input.ExchangeRate,
input[readonly][class*="Amount"],
input[readonly][class*="Total"],
input[name$="UnitAmount"],
input[name$="Quantity"],
input[name$="Discount"],
input[name$="LineTotal"],
input[name$="LineAmount"] {
    text-align: right !important;
}

/* ── 20c. Dark-mode form input overrides ──
   Ensures all text inputs, selects, textareas get dark backgrounds.
   Specifically targets line-total / total columns that stay white.  */

[data-mode="dark"] input.form-control,
[data-mode="dark"] textarea.form-control,
[data-mode="dark"] select.form-control,
[data-mode="dark"] .form-control,
[data-mode="dark"] input[type="text"],
[data-mode="dark"] input[type="number"],
[data-mode="dark"] input[type="email"],
[data-mode="dark"] input[type="tel"],
[data-mode="dark"] input[type="date"],
[data-mode="dark"] input[type="password"] {
    background-color: var(--bg-surface, #22252f) !important;
    color: var(--text-primary, #e2e4ea) !important;
    border-color: var(--border-default, #353946) !important;
}

[data-mode="dark"] input.form-control:focus,
[data-mode="dark"] textarea.form-control:focus,
[data-mode="dark"] select.form-control:focus,
[data-mode="dark"] .form-control:focus {
    background-color: var(--bg-surface, #22252f) !important;
    border-color: var(--color-primary, #6D5CF6) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
}

[data-mode="dark"] .m-checkbox > span,
[data-mode="dark"] .m-radio > span {
    background-color: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #353946) !important;
}

/* ── Native checkbox / radio dark mode ──
   color-scheme: dark tells the browser to render the native control
   with a dark background. accent-color brands the checked state.    */

[data-mode="dark"] input[type="checkbox"],
[data-mode="dark"] input[type="radio"] {
    color-scheme: dark !important;
    accent-color: var(--color-primary, #6D5CF6) !important;
}

/* ── 20d. Dark-mode unstyled / plain buttons ──
   Catches bare <button> elements and the .button class used on
   Add Task, Add Product, Add Surcharge etc. that have no Bootstrap class. */

[data-mode="dark"] button:not([class]),
[data-mode="dark"] button.button,
[data-mode="dark"] button.left,
[data-mode="dark"] .m-aside-left-close {
    background-color: var(--bg-surface, #22252f) !important;
    color: var(--text-primary, #e2e4ea) !important;
    border: 1px solid var(--border-default, #353946) !important;
    border-radius: 4px;
    padding: 6px 16px;
    cursor: pointer;
}

[data-mode="dark"] button:not([class]):hover,
[data-mode="dark"] button.button:hover,
[data-mode="dark"] button.left:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
    color: var(--text-heading, #f1f3f9) !important;
    border-color: var(--border-heavy, #464b5c) !important;
}


/* ═══════════════════════════════════════════════════════════
   21. Global Metronic Portlet / Card Overrides
   Ensures ALL m-portlet instances (including main dashboard)
   respond to colour themes and dark mode.
   ═══════════════════════════════════════════════════════════ */

/* Body background — prevents white leaking through transparent areas */
body {
    background-color: var(--bg-page, #f2f3f8) !important;
}

.m-portlet {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}

.m-portlet__head {
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.m-portlet__head-text,
.m-portlet__head .m-portlet__head-title h3 {
    color: var(--text-heading) !important;
}

.m-portlet__body {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* ── DataTables inside portlets ── */
.m-portlet .dataTables_wrapper .dataTables_filter input {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
}

.m-portlet .dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--color-primary) !important;
}

.m-portlet .dataTables_wrapper .dataTables_info {
    color: var(--text-muted) !important;
}

.m-portlet .dataTables_wrapper .dataTables_length label,
.m-portlet .dataTables_wrapper .dataTables_length select {
    color: var(--text-secondary) !important;
}

.m-portlet .dataTables_wrapper .dataTables_length select {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
}

/* ── Table rows inside portlets ── */
.m-portlet table thead th {
    background: var(--bg-subtle) !important;
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-default) !important;
}

.m-portlet table tbody td {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-default) !important;
}

.m-portlet table tbody tr:hover td {
    background: var(--bg-subtle) !important;
}

/* ── Dark mode — remove bright alternating rows on ALL tables ── */
[data-mode="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-mode="dark"] .table-striped tbody tr:nth-of-type(even),
[data-mode="dark"] .table-striped tbody tr,
[data-mode="dark"] table.table-striped tbody tr {
    background-color: transparent !important;
}

[data-mode="dark"] .table-striped tbody tr:hover,
[data-mode="dark"] table.table-striped tbody tr:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
}

/* Catch DataTable .odd/.even classes and table-bordered/hover inside portlets */
[data-mode="dark"] .m-portlet table tbody tr,
[data-mode="dark"] .m-portlet table tbody tr.odd,
[data-mode="dark"] .m-portlet table tbody tr.even {
    background-color: transparent !important;
}

[data-mode="dark"] .m-portlet table tbody tr:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
}

/* Also catch line-item rows used on Quote/Project/Invoice edit forms */
[data-mode="dark"] tr.lineItem,
[data-mode="dark"] tr.quoteTaskLineItem,
[data-mode="dark"] tr.quoteProductLineItem {
    background-color: transparent !important;
}

[data-mode="dark"] tr.lineItem td,
[data-mode="dark"] tr.quoteTaskLineItem td,
[data-mode="dark"] tr.quoteProductLineItem td {
    background-color: transparent !important;
    border-bottom-color: var(--border-default, #353946) !important;
}

/* ── Percentage / Surcharge-Discount table column widths ── */
#PercentageTable th:nth-child(1),
#PercentageTable td:nth-child(1) { width: 130px; min-width: 130px; }   /* Type */
#PercentageTable th:nth-child(3),
#PercentageTable td:nth-child(3) { width: 100px; min-width: 90px; }    /* % */

#PercentageTable .PercentageType {
    min-width: 110px;
}

/* Dark-mode: percentage template search results dropdown */
[data-mode="dark"] .percentageTemplateSearchResults {
    background: var(--bg-surface, #22252f) !important;
    border: 1px solid var(--border-default, #353946) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
    color: var(--text-primary, #e2e4ea) !important;
}
[data-mode="dark"] .percentageTemplateSearchResults .search-result-item:hover,
[data-mode="dark"] .percentageTemplateSearchResults div:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
}

/* ── Pagination inside portlets ── */
.m-portlet .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}

.m-portlet .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
    border-color: var(--color-primary) !important;
}

.m-portlet .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* ── Global form controls ── */
.form-control {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.form-control:focus {
    border-color: var(--color-primary) !important;
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* ── Select2 global ── */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}

.select2-dropdown {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}

.select2-results__option {
    color: var(--text-primary) !important;
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
}

/* ── Modal dialogs ── */
.modal-content {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.modal-header {
    border-bottom-color: var(--border-default) !important;
    background: var(--bg-surface) !important;
}

.modal-header .modal-title {
    color: var(--text-heading) !important;
}

.modal-footer {
    border-top-color: var(--border-default) !important;
    background: var(--bg-surface) !important;
}

/* ── Dropdowns ── */
.dropdown-menu {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

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

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu li:hover,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background-color: var(--bg-subtle) !important;
    color: var(--text-heading) !important;
}

/* ── Tooltips / Popovers ── */
.tooltip-inner {
    background-color: var(--wg-bg-card, #1a1d27) !important;
    color: var(--text-inverse, #fff) !important;
}

.popover {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}

.popover-header {
    background-color: var(--bg-subtle) !important;
    color: var(--text-heading) !important;
    border-bottom-color: var(--border-default) !important;
}

.popover-body {
    color: var(--text-primary) !important;
}

/* ── Calendar widget ── */
.fc-unthemed td,
.fc-unthemed th {
    border-color: var(--border-default) !important;
}

.fc-unthemed .fc-today {
    background: var(--color-primary-light) !important;
}

.fc-unthemed .fc-toolbar h2 {
    color: var(--text-heading) !important;
}

.fc-button-primary {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.fc-button-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

/* ── Edit mode backgrounds (dashboard) ── */
.m-wrapper.editing-mode {
    background-color: color-mix(in srgb, var(--wg-brand) 4%, var(--bg-page)) !important;
}

.dashboard-row.editing {
    background-color: color-mix(in srgb, var(--wg-brand) 3%, transparent) !important;
}


/* ═══════════════════════════════════════════════════════════
   22. DataTables / Table Dark Mode Fixes
   Overrides Metronic and DataTables hardcoded white backgrounds
   for row striping, table bg, and Flot chart legends.
   ═══════════════════════════════════════════════════════════ */

/* Table element itself */
table.dataTable,
table.table,
.m-portlet table,
.dataTables_wrapper table {
    background-color: var(--bg-surface) !important;
}

/* Row striping — DataTables adds .odd / .even classes */
table.dataTable tbody tr.odd,
table.dataTable tbody tr.odd > td,
table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.odd > .sorting_2,
table.dataTable tbody tr.odd > .sorting_3 {
    background-color: var(--bg-subtle) !important;
}

table.dataTable tbody tr.even,
table.dataTable tbody tr.even > td,
table.dataTable tbody tr.even > .sorting_1,
table.dataTable tbody tr.even > .sorting_2,
table.dataTable tbody tr.even > .sorting_3 {
    background-color: var(--bg-surface) !important;
}

/* Hover state for all DataTable rows */
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td {
    background-color: var(--bg-subtle) !important;
}

/* DataTables wrapper controls (search, length, info) */
.dataTables_wrapper .dataTables_filter input {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

.dataTables_wrapper .dataTables_filter label {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_length label {
    color: var(--text-secondary) !important;
}

.dataTables_wrapper .dataTables_length select {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

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

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
    border-color: var(--color-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    background: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* ── Flot chart legend ── */
/* Flot sets inline background-color on the legend div, so we need !important */
.legend > div {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-sm) !important;
    opacity: 0.95 !important;
}

[data-mode="dark"] .legend > div {
    background-color: transparent !important;
    border: none !important;
    opacity: 1 !important;
}

.legend table {
    color: var(--text-primary) !important;
}

.legend td.legendLabel {
    color: var(--text-secondary) !important;
    padding: 3px 8px !important;
}

[data-mode="dark"] .legend td.legendLabel {
    color: var(--text-muted, #8b92a5) !important;
}

/* ── Flot axis tick labels ── */
.flot-tick-label {
    color: var(--text-muted) !important;
}

/* ── Native select elements ── */
select.form-control,
select.m-input {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

/* ── Bootstrap .btn-secondary dark mode ── */
.btn-secondary {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--bg-subtle) !important;
    color: var(--text-heading) !important;
    border-color: var(--border-default) !important;
}

.btn-secondary.active,
.btn-secondary:active {
    background-color: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
    border-color: var(--color-primary) !important;
}

/* ── .bg-white utility override ── */
.bg-white {
    background-color: var(--bg-surface) !important;
}

/* ── 22b. DataTables export / toolbar buttons — dark mode ──
   Targets CSV, PDF, Excel, Column-visibility buttons in both
   the dt-toolbar (top) and dt-bottom (footer) areas.
   Ported from wg-dark-override.css (old [data-theme] selectors). */

[data-mode="dark"] .dt-button,
[data-mode="dark"] .dt-toolbar .dt-button.dt-toolbar-btn,
[data-mode="dark"] .dt-toolbar .dt-button.dt-colvis-btn,
[data-mode="dark"] .dt-colvis-btn,
[data-mode="dark"] .buttons-csv,
[data-mode="dark"] .buttons-pdf,
[data-mode="dark"] .buttons-excel,
[data-mode="dark"] .buttons-colvis {
    background: var(--bg-surface, #22252f) !important;
    border: 1px solid var(--border-default, #353946) !important;
    color: var(--text-muted, #8b92a5) !important;
    border-radius: 6px;
}

[data-mode="dark"] .dt-button:hover,
[data-mode="dark"] .dt-toolbar .dt-button.dt-toolbar-btn:hover,
[data-mode="dark"] .dt-toolbar .dt-button.dt-colvis-btn:hover,
[data-mode="dark"] .dt-colvis-btn:hover,
[data-mode="dark"] .buttons-csv:hover,
[data-mode="dark"] .buttons-pdf:hover,
[data-mode="dark"] .buttons-excel:hover,
[data-mode="dark"] .buttons-colvis:hover {
    background: var(--bg-hover, #2a2e3a) !important;
    color: var(--text-heading, #f1f3f9) !important;
    border-color: var(--border-heavy, #464b5c) !important;
}

/* Column visibility dropdown panel */
[data-mode="dark"] div.dt-button-collection {
    background: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #353946) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}

[data-mode="dark"] div.dt-button-collection .dt-button {
    color: var(--text-primary, #e2e4ea) !important;
    background: transparent !important;
}

[data-mode="dark"] div.dt-button-collection .dt-button:hover {
    background: var(--bg-hover, #2a2e3a) !important;
    color: var(--text-heading, #f1f3f9) !important;
}

[data-mode="dark"] div.dt-button-collection .dt-button.active {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
    color: var(--color-primary, #6D5CF6) !important;
}


/* ═══════════════════════════════════════════════════════════════
   22b-ii. BOOTSTRAP CARDS — Dark Mode
   Cards used in Workflows, and anywhere else Bootstrap .card appears.
   ═══════════════════════════════════════════════════════════════ */

[data-mode="dark"] .card {
    background-color: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #353946) !important;
    color: var(--text-primary, #e2e4ea) !important;
}
[data-mode="dark"] .card-header {
    background-color: var(--bg-page, #181a23) !important;
    border-bottom-color: var(--border-default, #353946) !important;
    color: var(--text-heading, #f1f3f9) !important;
}
[data-mode="dark"] .card-body {
    background-color: var(--bg-surface, #22252f) !important;
    color: var(--text-primary, #e2e4ea) !important;
}
[data-mode="dark"] .card-footer {
    background-color: var(--bg-page, #181a23) !important;
    border-top-color: var(--border-default, #353946) !important;
}

/* ── Summernote rich-text editor — Dark Mode ── */
[data-mode="dark"] .note-toolbar,
[data-mode="dark"] .note-toolbar.panel-heading {
    background-color: var(--bg-page, #181a23) !important;
    border-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-editable {
    background-color: var(--bg-surface, #22252f) !important;
    color: var(--text-primary, #e2e4ea) !important;
    border-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-editor.note-frame {
    border-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-editor .note-statusbar {
    background-color: var(--bg-page, #181a23) !important;
    border-top-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-editor .note-statusbar .note-resizebar .note-icon-bar {
    border-top-color: var(--text-faint, #6b7280) !important;
}
[data-mode="dark"] .note-btn.dropdown-toggle::after {
    color: var(--text-muted, #8b92a5) !important;
}
[data-mode="dark"] .note-dropdown-menu {
    background-color: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-dropdown-menu .note-dropdown-item:hover {
    background-color: var(--bg-hover, #2a2e3a) !important;
}
[data-mode="dark"] .note-color-palette .note-color-btn {
    border-color: var(--border-default, #353946) !important;
}
[data-mode="dark"] .note-modal-content {
    background-color: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #353946) !important;
    color: var(--text-primary, #e2e4ea) !important;
}

/* ═══════════════════════════════════════════════════════════════
   22c. FULLCALENDAR / GANTT — Dark Mode
   Overrides FullCalendar's default light theme for the Gantt /
   Project Schedule / Calendar pages.
   ═══════════════════════════════════════════════════════════════ */

/* ── Grid borders ── FC uses #ddd everywhere */
[data-mode="dark"] .fc-theme-standard td,
[data-mode="dark"] .fc-theme-standard th,
[data-mode="dark"] .fc-theme-standard .fc-scrollgrid {
    border-color: var(--wg-border, #353946) !important;
}

/* ── Header cells (date row, resource column header) ── */
[data-mode="dark"] .fc th,
[data-mode="dark"] .fc .fc-col-header-cell,
[data-mode="dark"] .fc .fc-datagrid-cell,
[data-mode="dark"] .fc .fc-timeline-slot-label {
    background-color: var(--wg-bg-card, #1a1d27) !important;
    color: var(--wg-text-muted, #8b92a5) !important;
    border-color: var(--wg-border, #353946) !important;
}

/* ── Body / lane backgrounds ── */
[data-mode="dark"] .fc td,
[data-mode="dark"] .fc .fc-timeline-lane,
[data-mode="dark"] .fc .fc-datagrid-body td {
    background-color: var(--wg-bg-card, #1a1d27) !important;
    color: var(--wg-text-primary, #e2e4ea) !important;
    border-color: var(--wg-border, #353946) !important;
}

/* ── Row separators — explicit border-bottom so resource lanes are visually distinct in dark mode ── */
[data-mode="dark"] .fc .fc-timeline-lane {
    border-bottom: 1px solid var(--wg-border, #353946) !important;
}

[data-mode="dark"] .fc .fc-datagrid-body .fc-datagrid-row {
    border-bottom: 1px solid var(--wg-border, #353946) !important;
}

/* ── Shaded cells (weekend columns, dividers) ── */
[data-mode="dark"] .fc .fc-cell-shaded,
[data-mode="dark"] .fc .fc-day-disabled,
[data-mode="dark"] .fc-resource-timeline-divider {
    background-color: var(--wg-bg-surface, #22252f) !important;
    border-color: var(--wg-border, #353946) !important;
}

/* ── FC buttons (prev/next, today, month toggles) ── */
[data-mode="dark"] .fc .fc-button-primary {
    background-color: var(--wg-bg-surface, #22252f) !important;
    border-color: var(--wg-border, #353946) !important;
    color: var(--wg-text-primary, #e2e4ea) !important;
}

[data-mode="dark"] .fc .fc-button-primary:hover {
    background-color: var(--wg-bg-hover, #2a2e3a) !important;
    border-color: var(--wg-border-heavy, #464b5c) !important;
    color: var(--wg-text-heading, #f1f3f9) !important;
}

[data-mode="dark"] .fc .fc-button-primary:not(:disabled).fc-button-active,
[data-mode="dark"] .fc .fc-button-primary:not(:disabled):active {
    background-color: color-mix(in srgb, var(--wg-brand, #6D5CF6) 25%, var(--wg-bg-surface, #22252f)) !important;
    border-color: var(--wg-brand, #6D5CF6) !important;
    color: var(--wg-brand, #6D5CF6) !important;
}

[data-mode="dark"] .fc .fc-button-primary:disabled {
    background-color: var(--wg-bg-surface, #22252f) !important;
    border-color: var(--wg-border, #353946) !important;
    color: var(--wg-text-faint, #6b7280) !important;
    opacity: 0.6;
}

/* ── Gantt event bars — dark mode ──
   .project_due_event  = project-level bars (too transparent in dark)
   .user_task           = task-level bars (too bright blue in dark)
   Uses !important to beat WorkGuru.css specificity on a.project_due_event etc. */

[data-mode="dark"] a.project_due_event,
[data-mode="dark"] .project_due_event {
    background-color: color-mix(in srgb, var(--wg-brand, #6D5CF6) 40%, var(--wg-bg-surface, #22252f)) !important;
    border: 1px solid color-mix(in srgb, var(--wg-brand, #6D5CF6) 55%, transparent) !important;
    color: var(--wg-text-heading, #f1f3f9) !important;
}

[data-mode="dark"] a.user_task,
[data-mode="dark"] .user_task {
    background-color: var(--wg-sched-task-bg, #0e7490) !important;
    border: 1px solid var(--wg-sched-task-border, #0891b2) !important;
    color: var(--wg-sched-task-text, #fff) !important;
}

[data-mode="dark"] .user_task.draft {
    background-color: color-mix(in srgb, var(--wg-cyan-600) 35%, var(--wg-bg-surface, #22252f)) !important;
    opacity: 0.75;
}

/* Generic FC event text colour in dark mode */
[data-mode="dark"] .fc-event .fc-event-main,
[data-mode="dark"] .fc-event .fc-event-title {
    color: #fff !important;
}

/* Project event title specifically */
[data-mode="dark"] .project_due_event .fc-event-title {
    color: var(--wg-text-heading, #f1f3f9) !important;
}

/* ── Resource / project names in the left column ── */
[data-mode="dark"] .fc .fc-datagrid-cell-main {
    color: var(--wg-text-primary, #e2e4ea) !important;
}

/* ── Today highlight ── */
[data-mode="dark"] .fc .fc-day-today {
    background-color: color-mix(in srgb, var(--wg-brand, #6D5CF6) 8%, transparent) !important;
}

/* ── Toolbar title (month/year heading) ── */
[data-mode="dark"] .fc-toolbar-title {
    color: var(--wg-text-heading, #f1f3f9) !important;
}

/* ── Dropdown actions panel (inline style override) ── */
[data-mode="dark"] #dropDownActions {
    background: var(--wg-bg-surface, #22252f) !important;
    border: 1px solid var(--wg-border, #353946) !important;
}


/* ═══════════════════════════════════════════════════════════════
   22b. STAFF SCHEDULE — Modernised event cards, dark mode
   ═══════════════════════════════════════════════════════════════ */

/* Event card harnesses */
[data-mode="dark"] a.fc-event.wg-event--task-harness,
[data-mode="dark"] a.fc-event.user_task {
    background-color: var(--wg-sched-task-bg) !important;
    border-color: var(--wg-sched-task-border) !important;
    color: var(--wg-sched-task-text) !important;
}

[data-mode="dark"] a.fc-event.wg-event--schedule-harness,
[data-mode="dark"] a.fc-event.user_schedule {
    background-color: var(--wg-sched-event-bg) !important;
    border-color: var(--wg-sched-event-border) !important;
}

[data-mode="dark"] a.fc-event.wg-event--project-harness,
[data-mode="dark"] a.fc-event.project_due_event_staff_view {
    background-color: var(--wg-sched-project-bg) !important;
    color: var(--wg-sched-project-text) !important;
}

[data-mode="dark"] a.fc-event.wg-event--todo-harness,
[data-mode="dark"] a.fc-event.todo_item {
    background-color: var(--wg-bg-surface) !important;
    border-color: var(--wg-border) !important;
}

/* Event card inner content */
[data-mode="dark"] .wg-event--task {
    background: var(--wg-sched-task-bg);
    color: var(--wg-sched-task-text);
    border-color: var(--wg-sched-task-border);
}

[data-mode="dark"] .wg-event--schedule {
    background: var(--wg-sched-event-bg);
    color: var(--wg-sched-event-text);
    border-color: var(--wg-sched-event-border);
}

[data-mode="dark"] .wg-event--schedule .wg-event__badge {
    background: color-mix(in srgb, var(--wg-purple-600) 20%, transparent);
    color: color-mix(in srgb, var(--wg-purple-400) 80%, white);
    border-color: color-mix(in srgb, var(--wg-purple-500) 30%, transparent);
}

[data-mode="dark"] .wg-event--schedule .wg-event__hours,
[data-mode="dark"] .wg-event--schedule .wg-event__edit {
    color: color-mix(in srgb, var(--wg-purple-400) 80%, white);
}

[data-mode="dark"] .wg-event--schedule .wg-event__delete {
    color: var(--wg-purple-400);
}

[data-mode="dark"] .wg-event--project {
    background: var(--wg-sched-project-bg);
    color: var(--wg-sched-project-text);
}

[data-mode="dark"] .wg-event--todo {
    background: var(--wg-bg-surface);
    color: var(--wg-text-heading);
    border-color: var(--wg-border);
}

/* Resource sidebar */
[data-mode="dark"] .wg-resource__name {
    color: var(--wg-text-heading);
}

[data-mode="dark"] .wg-resource__subtitle {
    color: var(--wg-text-muted);
}

[data-mode="dark"] .wg-resource__avatar {
    background: color-mix(in srgb, var(--wg-amber-500) 20%, var(--wg-bg-surface));
    color: var(--wg-amber-500);
}

[data-mode="dark"] .wg-resource__icon--projects {
    background: color-mix(in srgb, var(--wg-purple-600) 15%, transparent);
    color: var(--wg-purple-400);
}

[data-mode="dark"] .wg-resource__icon--unassigned {
    background: color-mix(in srgb, var(--wg-cyan-600) 15%, transparent);
    color: var(--wg-cyan-400);
}

[data-mode="dark"] .wg-resource__icon--todos {
    background: var(--wg-bg-surface-alt);
    color: var(--wg-text-muted);
}

[data-mode="dark"] .wg-resource-lane--task {
    color: var(--wg-cyan-400);
}

[data-mode="dark"] .wg-resource-lane--schedule {
    color: var(--wg-purple-400);
}

/* Lane backgrounds */
[data-mode="dark"] .wg-lane--unassigned {
    background-color: var(--wg-sched-task-lane) !important;
}

[data-mode="dark"] .wg-lane--projects {
    background-color: rgba(139, 92, 246, 0.04) !important;
}

/* Schedule card header */
[data-mode="dark"] .wg-schedule-card {
    background: var(--wg-card-bg);
    border-color: var(--wg-card-border);
    box-shadow: var(--wg-card-shadow);
}

[data-mode="dark"] .wg-schedule-breadcrumb {
    color: var(--wg-text-muted);
}

/* Calendar container */
[data-mode="dark"] #calendar .fc {
    background: var(--wg-bg-card);
    border-color: var(--wg-border-light);
}


/* ═══════════════════════════════════════════════════════════════
   23. PIVOT REPORTS — Index Page & Individual Report Dark Mode
   ═══════════════════════════════════════════════════════════════ */

/* --- Pivot Reports Index: override .bg-white on tab panes --- */
.tab-pane.bg-white {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* --- Nav pills (category sidebar) --- */
.nav-pills-custom .nav-link {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}

.nav-pills-custom .nav-link.active {
    background-color: var(--color-primary) !important;
    color: var(--text-inverse, #fff) !important;
    border-color: var(--color-primary) !important;
}

.nav-pills-custom .nav-link:not(.active):hover {
    background-color: var(--bg-subtle) !important;
}

/* --- Report list links and text --- */
.reportContainer h4 a {
    color: var(--color-primary) !important;
}

.reportContainer h4 a:hover {
    color: var(--color-primary-hover, var(--color-primary)) !important;
}

.reportContainer hr {
    border-color: var(--border-default) !important;
}

/* --- pvtTable (legacy pivot.css) dark mode overrides --- */
.pvtUi {
    color: var(--text-primary) !important;
}

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

table.pvtTable thead tr th,
table.pvtTable tbody tr th {
    background-color: var(--bg-subtle) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

.pvtAxisContainer,
.pvtVals {
    border-color: var(--border-default) !important;
    background-color: var(--bg-surface) !important;
}

.pvtAxisContainer li span.pvtAttr {
    background: var(--bg-subtle) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.pvtFilterBox {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.pvtCheckContainer {
    border-color: var(--border-default) !important;
}

/* --- NrecoPivotTable dark mode overrides --- */
.pvtFixedHeaderOuterContainer {
    border-color: var(--border-default) !important;
}

table.pvtTable.pvtFixedHeader th > div.pvtFixedHeader {
    background-color: var(--bg-subtle) !important;
    border-color: var(--border-default) !important;
    color: var(--text-primary) !important;
}

.pvtValDrillDown .pvtVal:hover,
.pvtValDrillDown .pvtTotal:hover {
    background-color: var(--bg-subtle) !important;
}

/* --- Report results card (shared pivot body) --- */
.report-results-card {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.report-results-title {
    color: var(--text-heading);
}

.report-results-subtitle {
    color: var(--text-muted);
}

.report-results-divider {
    border-color: var(--border-default);
}

.report-view-btn {
    color: var(--text-secondary);
    background-color: var(--bg-surface);
    border-color: var(--border-default);
}

.report-view-btn.active {
    color: var(--text-inverse, #fff);
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* --- Report criteria portlet --- */
.report-criteria-portlet {
    background-color: var(--bg-surface);
    border-color: var(--border-default);
}

/* --- Tab content headings in pivot index --- */
.tab-content h2 {
    color: var(--text-heading) !important;
}

.tab-content hr {
    border-color: var(--border-default) !important;
}

/* ==========================================================================
   24. PROJECT & TASK BOARDS — Dark Mode Overrides
   ========================================================================== */

/* --- Toolbar controls (search box, dropdowns, settings button) --- */
[data-mode="dark"] .wg-search,
[data-mode="dark"] .wg-control {
    background: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #3f4452) !important;
    color: var(--text-heading, #e2e4ea) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-mode="dark"] .wg-search:focus {
    border-color: var(--color-primary, #7c3aed) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15) !important;
}

[data-mode="dark"] .wg-search::placeholder {
    color: var(--text-muted, #9ca3af) !important;
}

/* --- Board columns --- */
[data-mode="dark"] .wg-column {
    background: var(--bg-subtle, #1a1d27) !important;
    border-color: var(--border-default, #3f4452) !important;
}

/* --- Cards --- */
[data-mode="dark"] .wg-card {
    border-color: var(--border-default, #3f4452) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-mode="dark"] .wg-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    border-color: var(--border-heavy, #4a5060) !important;
}

/* --- "+ Add project" button --- */
[data-mode="dark"] .wg-add-card {
    background: transparent !important;
    border-color: var(--border-default, #3f4452) !important;
    color: var(--text-muted, #9ca3af) !important;
}

[data-mode="dark"] .wg-add-card:hover {
    background: var(--bg-surface, #22252f) !important;
    border-color: var(--border-heavy, #4a5060) !important;
    color: var(--text-secondary, #b0b4bc) !important;
}

/* --- Sortable drag placeholder --- */
[data-mode="dark"] .ui-sortable-placeholder {
    background: rgba(30, 33, 48, 0.5) !important;
    border-color: var(--border-heavy, #4a5060) !important;
}

/* --- Dropdown menu --- */
[data-mode="dark"] .wg-board-page .dropdown-menu {
    background: var(--bg-surface, #22252f) !important;
    border-color: var(--border-default, #3f4452) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-mode="dark"] .wg-board-page .dropdown-item {
    color: var(--text-primary, #d1d4dc) !important;
}

[data-mode="dark"] .wg-board-page .dropdown-item:hover {
    background: var(--bg-subtle, #1a1d27) !important;
    color: var(--text-heading, #e2e4ea) !important;
}

/* --- Size select dropdown arrow for dark mode --- */
[data-mode="dark"] .wg-size-select {
    color: var(--text-heading, #e2e4ea) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M3 5l3 3 3-3'/%3E%3C/svg%3E") !important;
}

/* ══════════════════════════════════════════════════════════════
   10d — Table-bordered dark-mode borders
   ══════════════════════════════════════════════════════════════ */
.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--border-default) !important;
}

/* Timesheet daily-summary rows — <th> inside <tbody> should look
   like emphasised data rows, not column headers                 */
#TimesheetsDailySummary tbody tr.odd th {
    background: var(--bg-subtle) !important;
    color: var(--text-heading) !important;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   10e — Nav-tabs inside portlets (Timesheets, etc.)
   ══════════════════════════════════════════════════════════════ */
.m-portlet .nav-tabs {
    border-bottom-color: var(--border-default) !important;
}

.m-portlet .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
}

.m-portlet .nav-tabs .nav-link.active {
    color: var(--color-primary) !important;
    background-color: var(--bg-surface) !important;
    border-color: var(--border-default) var(--border-default) var(--bg-surface) !important;
}

.m-portlet .nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent !important;
    color: var(--text-primary) !important;
}