/* ===============================
                               RED THEME
                  =============================== */
body.red-mode .btn-custom-green,
body.red-mode .search-button,
body.red-mode .page-btn.active {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: white !important;
}

    body.red-mode .btn-custom-green:hover,
    body.red-mode .search-button:hover {
        background-color: #a93226 !important;
    }

body.red-mode .form-control:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 0.25rem rgba(192,57,43,0.3) !important;
}

body.red-mode .page-btn:hover {
    border-color: #c0392b !important;
}

body.red-mode .download-link {
    color: #c0392b !important;
}

body.red-mode .theme-picker-item.active-theme {
    color: #c0392b !important;
}

body.red-mode .logout-confirm {
    background: #c0392b !important;
}

/* ===============================
                               OCEAN THEME
                           =============================== */
body.ocean-mode .btn-custom-green,
body.ocean-mode .search-button,
body.ocean-mode .page-btn.active {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
    color: white !important;
}

    body.ocean-mode .btn-custom-green:hover,
    body.ocean-mode .search-button:hover {
        background-color: #005f8e !important;
    }

body.ocean-mode .form-control:focus {
    border-color: #0077b6 !important;
    box-shadow: 0 0 0 0.25rem rgba(0,119,182,0.3) !important;
}

body.ocean-mode .page-btn:hover {
    border-color: #0077b6 !important;
}

body.ocean-mode .download-link {
    color: #0077b6 !important;
}

body.ocean-mode .theme-picker-item.active-theme {
    color: #0077b6 !important;
}

body.ocean-mode .logout-confirm {
    background: #0077b6 !important;
}
/* ===============================
                       MICROSOFT DARK TEAL (DEEP)
                   =============================== */

body.green-mode .btn-custom-green,
body.green-mode .search-button,
body.green-mode .page-btn.active {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
    color: #ffffff !important;
}

    body.green-mode .btn-custom-green:hover,
    body.green-mode .search-button:hover {
        background-color: #092622 !important;
    }

body.green-mode .form-control:focus {
    border-color: #0D332D !important;
    box-shadow: 0 0 0 0.25rem rgba(13,51,45,0.35) !important;
}

body.green-mode .page-btn:hover {
    border-color: #0D332D !important;
}

body.green-mode .download-link {
    color: #0D332D !important;
}

body.green-mode .theme-picker-item.active-theme {
    color: #0D332D !important;
}

body.green-mode .logout-confirm {
    background: #0D332D !important;
}


/* ===============================
                               RED THEME
                           =============================== */
body.red-mode .btn-custom-green,
body.red-mode .top-btn-filled,
body.red-mode .search-button,
body.red-mode .apply-btn,
body.red-mode .pagination-buttons button.active {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: white !important;
}

body.red-mode .top-btn-outline,
body.red-mode .top-btn {
    color: #c0392b !important;
    border-color: #c0392b !important;
}

body.red-mode .bi-pencil-fill,
body.red-mode .bi-trash-fill,
body.red-mode .bi-arrow-right,
body.red-mode .bi-arrow-left-right {
    color: #c0392b !important;
}

body.red-mode .drawer-header,
body.red-mode .theme-picker-item.active-theme {
    color: #c0392b !important;
}

body.red-mode .dropzone.drag-over {
    border-color: #c0392b !important;
    background: #fdf2f2 !important;
}

/* ===============================
                               OCEAN THEME
                           =============================== */
body.ocean-mode .btn-custom-green,
body.ocean-mode .top-btn-filled,
body.ocean-mode .search-button,
body.ocean-mode .apply-btn,
body.ocean-mode .pagination-buttons button.active {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
    color: white !important;
}

body.ocean-mode .top-btn-outline,
body.ocean-mode .top-btn {
    color: #0077b6 !important;
    border-color: #0077b6 !important;
}

body.ocean-mode .bi-pencil-fill,
body.ocean-mode .bi-trash-fill,
body.ocean-mode .bi-arrow-right,
body.ocean-mode .bi-arrow-left-right {
    color: #0077b6 !important;
}

body.ocean-mode .drawer-header,
body.ocean-mode .theme-picker-item.active-theme {
    color: #0077b6 !important;
}

body.ocean-mode .dropzone.drag-over {
    border-color: #0077b6 !important;
    background: #f0f8ff !important;
}
/* ===============================
                            DARK GREEN THEME
                   =============================== */

body.green-mode .btn-custom-green,
body.green-mode .top-btn-filled,
body.green-mode .search-button,
body.green-mode .apply-btn,
body.green-mode .pagination-buttons button.active {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
    color: white !important;
}

body.green-mode .top-btn-outline,
body.green-mode .top-btn {
    color: #0D332D !important;
    border-color: #0D332D !important;
}

body.green-mode .bi-pencil-fill,
body.green-mode .bi-trash-fill,
body.green-mode .bi-arrow-right,
body.green-mode .bi-arrow-left-right {
    color: #0D332D !important;
}

body.green-mode .drawer-header,
body.green-mode .theme-picker-item.active-theme {
    color: #0D332D !important;
}

body.green-mode .dropzone.drag-over {
    border-color: #0D332D !important;
    background: #EAF4F2 !important; /* soft teal tint */
}


/* ===============================
                               RED THEME - REMAINING COMPONENTS
                           =============================== */
body.red-mode .filter-icon-btn,
body.red-mode .fullscreen-btn,
body.red-mode .fullscreen-wrapper-btn {
    color: #c0392b !important;
    border-color: #c0392b !important;
}

body.red-mode .fixed-height-autocomplete .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #c0392b !important;
}

body.red-mode .mud-popover .mud-list-item:hover,
body.red-mode .mud-popover .mud-list-item.mud-selected-item {
    background-color: #fdf2f2 !important;
    color: #c0392b !important;
}

body.red-mode .filterselectedvalue {
    background-color: #fdf2f2 !important;
}

/* ===============================
                               OCEAN THEME - REMAINING COMPONENTS
                           =============================== */
body.ocean-mode .filter-icon-btn,
body.ocean-mode .fullscreen-btn,
body.ocean-mode .fullscreen-wrapper-btn {
    color: #0077b6 !important;
    border-color: #0077b6 !important;
}

body.ocean-mode .fixed-height-autocomplete .mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #0077b6 !important;
}

body.ocean-mode .mud-popover .mud-list-item:hover,
body.ocean-mode .mud-popover .mud-list-item.mud-selected-item {
    background-color: #f0f8ff !important;
    color: #0077b6 !important;
}

body.ocean-mode .filterselectedvalue {
    background-color: #e8f4fd !important;
}
/* ===============================
                        DARK GREEN THEME - REMAINING COMPONENTS
                   =============================== */

body.green-mode .filter-icon-btn,
body.green-mode .fullscreen-btn,
body.green-mode .fullscreen-wrapper-btn {
    color: #0D332D !important;
    border-color: #0D332D !important;
}

body.green-mode .fixed-height-autocomplete
.mud-input-outlined:focus-within
.mud-input-outlined-border {
    border-color: #0D332D !important;
}

body.green-mode .mud-popover .mud-list-item:hover,
body.green-mode .mud-popover .mud-list-item.mud-selected-item {
    background-color: #EAF4F2 !important; /* soft teal tint */
    color: #0D332D !important;
}

body.green-mode .filterselectedvalue {
    background-color: #EAF4F2 !important; /* light teal highlight */
}
/* ==========================================================
                           SOFT TRANSPARENT THEMES (RED + OCEAN)
                           Professional Enterprise Style
                           ========================================================== */


/* ==============================
                           🔴 RED MODE
                           ============================== */

body.red-mode {
    /* Subtle page tint */
    --theme-bg-main: rgba(192,57,43,0.03);
    --theme-bg-header: rgba(192,57,43,0.05);
    --theme-bg-sidebar-top: rgba(192,57,43,0.15);
    --theme-bg-sidebar-bottom: rgba(192,57,43,0.08);
    --theme-accent: #c0392b;
    --theme-accent-hover: #a93226;
}

    /* Layout tint */
    body.red-mode .main-body {
        background: var(--theme-bg-main) !important;
    }

    body.red-mode .dashboard-header,
    body.red-mode footer {
        background: var(--theme-bg-header) !important;
    }


    /* ==============================
                       🔴 RED MODE – BALANCED SIDEBAR
                       ============================== */
    /* ==============================
                       🔴 RED SIDEBAR – FINAL CLEAN
                       ============================== */

    body.red-mode .sidebar,
    body.red-mode .sidebar-logo,
    body.red-mode .sidebar-toggle {
        background: #9e2f25 !important; /* muted PPT dark red tone */
    }

    /* Default menu text */
    body.red-mode .sidebar-module-item {
        color: #f5dcdc !important; /* soft light red text */
    }

    /* Icon container */
    body.red-mode .sidebar-module-icon {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
    }

    /* Hover state */
    body.red-mode .sidebar-module-item:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #ffffff !important; /* WHITE text on hover */
    }

        body.red-mode .sidebar-module-item:hover .sidebar-module-icon {
            background: rgba(255,255,255,0.20) !important;
            color: #ffffff !important;
        }

    /* Active module */
    body.red-mode .sidebar-module-item.active-module {
        background: rgba(255,255,255,0.25) !important;
        border-left: 3px solid #ffffff !important;
        color: #ffffff !important;
    }
    /* Buttons & accents */
    body.red-mode .btn-custom-green,
    body.red-mode .search-button,
    body.red-mode .page-btn.active,
    body.red-mode .apply-btn {
        background-color: var(--theme-accent) !important;
        border-color: var(--theme-accent) !important;
        color: #fff !important;
    }

        body.red-mode .btn-custom-green:hover,
        body.red-mode .search-button:hover {
            background-color: var(--theme-accent-hover) !important;
        }

    body.red-mode .download-link,
    body.red-mode .bi-pencil-fill,
    body.red-mode .bi-trash-fill {
        color: var(--theme-accent) !important;
    }


/* ==============================
                           🌊 OCEAN MODE
                           ============================== */

body.ocean-mode {
    --theme-bg-main: rgba(0,119,182,0.03);
    --theme-bg-header: rgba(0,119,182,0.05);
    --theme-bg-sidebar-top: rgba(0,119,182,0.15);
    --theme-bg-sidebar-bottom: rgba(0,119,182,0.08);
    --theme-accent: #0077b6;
    --theme-accent-hover: #005f8e;
}

    /* Layout tint */
    body.ocean-mode .main-body {
        background: var(--theme-bg-main) !important;
    }

    body.ocean-mode .dashboard-header,
    body.ocean-mode footer {
        background: var(--theme-bg-header) !important;
    }

    /* ==============================
                       🌊 OCEAN SIDEBAR – FINAL CLEAN
                       ============================== */

    body.ocean-mode .sidebar,
    body.ocean-mode .sidebar-logo,
    body.ocean-mode .sidebar-toggle {
        background: #023e8a !important; /* deep professional ocean blue */
    }

    /* Default menu text */
    body.ocean-mode .sidebar-module-item {
        color: #d6ecf7 !important; /* soft light blue text */
    }

    /* Icon container */
    body.ocean-mode .sidebar-module-icon {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
    }

    /* Hover state */
    body.ocean-mode .sidebar-module-item:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #ffffff !important; /* WHITE text on hover */
    }

        body.ocean-mode .sidebar-module-item:hover .sidebar-module-icon {
            background: rgba(255,255,255,0.20) !important;
            color: #ffffff !important;
        }

    /* Active module */
    body.ocean-mode .sidebar-module-item.active-module {
        background: rgba(255,255,255,0.25) !important;
        border-left: 3px solid #ffffff !important;
        color: #ffffff !important;
    }

    /* Buttons & accents */
    body.ocean-mode .btn-custom-green,
    body.ocean-mode .search-button,
    body.ocean-mode .page-btn.active,
    body.ocean-mode .apply-btn {
        background-color: var(--theme-accent) !important;
        border-color: var(--theme-accent) !important;
        color: #fff !important;
    }

        body.ocean-mode .btn-custom-green:hover,
        body.ocean-mode .search-button:hover {
            background-color: var(--theme-accent-hover) !important;
        }

    body.ocean-mode .download-link,
    body.ocean-mode .bi-pencil-fill,
    body.ocean-mode .bi-trash-fill {
        color: var(--theme-accent) !important;
    }

/* ==========================================================
                   SOFT TRANSPARENT THEME – DARK GREEN (Microsoft Deep Teal)
                   Professional Enterprise Style
                   ========================================================== */


/* ==============================
                   🌿 GREEN MODE
                   ============================== */

body.green-mode {
    /* Subtle page tint */
    --theme-bg-main: rgba(13,51,45,0.03);
    --theme-bg-header: rgba(13,51,45,0.05);
    --theme-bg-sidebar-top: rgba(13,51,45,0.15);
    --theme-bg-sidebar-bottom: rgba(13,51,45,0.08);
    --theme-accent: #0D332D;
    --theme-accent-hover: #092622;
}

    /* Layout tint */
    body.green-mode .main-body {
        background: var(--theme-bg-main) !important;
    }

    body.green-mode .dashboard-header,
    body.green-mode footer {
        background: var(--theme-bg-header) !important;
    }


    /* ==============================
                   🌿 GREEN SIDEBAR – FINAL CLEAN
                   ============================== */

    body.green-mode .sidebar,
    body.green-mode .sidebar-logo,
    body.green-mode .sidebar-toggle {
        background: #0D332D !important; /* deep microsoft teal */
    }

    /* Default menu text */
    body.green-mode .sidebar-module-item {
        color: #d7e6e3 !important; /* soft light teal text */
    }

    /* Icon container */
    body.green-mode .sidebar-module-icon {
        background: rgba(255,255,255,0.10) !important;
        color: #ffffff !important;
    }

    /* Hover state */
    body.green-mode .sidebar-module-item:hover {
        background: rgba(255,255,255,0.15) !important;
        color: #ffffff !important;
    }

        body.green-mode .sidebar-module-item:hover .sidebar-module-icon {
            background: rgba(255,255,255,0.20) !important;
            color: #ffffff !important;
        }

    /* Active module */
    body.green-mode .sidebar-module-item.active-module {
        background: rgba(255,255,255,0.25) !important;
        border-left: 3px solid #ffffff !important;
        color: #ffffff !important;
    }


    /* Buttons & accents */
    body.green-mode .btn-custom-green,
    body.green-mode .search-button,
    body.green-mode .page-btn.active,
    body.green-mode .apply-btn {
        background-color: var(--theme-accent) !important;
        border-color: var(--theme-accent) !important;
        color: #fff !important;
    }

        body.green-mode .btn-custom-green:hover,
        body.green-mode .search-button:hover {
            background-color: var(--theme-accent-hover) !important;
        }

    body.green-mode .download-link,
    body.green-mode .bi-pencil-fill,
    body.green-mode .bi-trash-fill {
        color: var(--theme-accent) !important;
    }

/* ==========================================================
                           🔴 RED THEME – TABLE + SEARCH + PAGINATION + DRAWER
                           ========================================================== */

/* Table container */
body.red-mode .data-table-container {
    border: 1px solid rgba(192,57,43,0.25) !important;
    background: rgba(192,57,43,0.02) !important;
}

/* Table header */
body.red-mode table.figma-table thead th,
body.red-mode table.figma-table thead th.actions-column {
    background: #faefed !important;
    color: #9e2f25 !important;
    border-bottom: 1px solid #ebc9c5;
}

/* Table hover */
body.red-mode table.figma-table tbody tr:hover,
body.red-mode .figma-table tbody tr:hover .actions-column {
    background: rgba(192,57,43,0.06) !important;
}

/* Table footer */
body.red-mode table.figma-table tfoot tr {
    background: rgba(192,57,43,0.06) !important;
}

/* Pagination footer */
body.red-mode .pagination-container {
    background: #faefed !important;
    border-top: 1px solid #ebc9c5;
}

/* Active page button */
body.red-mode .pagination-buttons button.active {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

/* Search input */
body.red-mode .data-table-header input {
    background: rgba(192,57,43,0.04) !important;
    border: 1px solid rgba(192,57,43,0.3) !important;
}

    body.red-mode .data-table-header input:focus {
        border-color: #c0392b !important;
        box-shadow: 0 0 0 0.2rem rgba(192,57,43,0.2) !important;
    }

/* Drawer header */
body.red-mode .drawer-header {
    background: rgba(192,57,43,0.07) !important;
    color: #7b241c !important;
}


/* ==========================================================
                           🌊 OCEAN BLUE THEME – TABLE + SEARCH + PAGINATION + DRAWER
                           ========================================================== */

/* Table container */
body.ocean-mode .data-table-container {
    border: 1px solid rgba(0,119,182,0.25) !important;
    background: rgba(0,119,182,0.02) !important;
}

/* Table header */
body.ocean-mode table.figma-table thead th,
body.ocean-mode table.figma-table thead th.actions-column {
    background: #edf5fa !important;
    color: #023e8a !important;
    border-bottom: 1px solid #cce3f1;
}

/* Table hover */
body.ocean-mode table.figma-table tbody tr:hover,
body.ocean-mode .figma-table tbody tr:hover .actions-column {
    background: rgba(0,119,182,0.06) !important;
}

/* Table footer */
body.ocean-mode table.figma-table tfoot tr {
    background: rgba(0,119,182,0.06) !important;
}

/* Pagination footer */
body.ocean-mode .pagination-container {
    background: #edf5fa !important;
    border-top: 1px solid #cce3f1;
}

/* Active page button */
body.ocean-mode .pagination-buttons button.active {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
    color: #fff !important;
}

/* Search input */
body.ocean-mode .data-table-header input {
    background: rgba(0,119,182,0.04) !important;
    border: 1px solid rgba(0,119,182,0.3) !important;
}

    body.ocean-mode .data-table-header input:focus {
        border-color: #0077b6 !important;
        box-shadow: 0 0 0 0.2rem rgba(0,119,182,0.2) !important;
    }

/* Drawer header */
body.ocean-mode .drawer-header {
    background: rgba(0,119,182,0.07) !important;
    color: #023e8a !important;
}
/* ==========================================================
                   🌿 DARK GREEN THEME – TABLE + SEARCH + PAGINATION + DRAWER
                   ========================================================== */

/* Table container */
body.green-mode .data-table-container {
    border: 1px solid rgba(13,51,45,0.25) !important;
    background: rgba(13,51,45,0.02) !important;
}

/* Table header */
body.green-mode table.figma-table thead th,
body.green-mode table.figma-table thead th.actions-column {
    background: #edf3f2 !important;
    color: #0D332D !important;
    border-bottom: 1px solid #d8e4e1 !important;
}

/* Table hover */
body.green-mode table.figma-table tbody tr:hover,
body.green-mode .figma-table tbody tr:hover .actions-column {
    background: rgba(13,51,45,0.06) !important;
}

/* Table footer */
body.green-mode table.figma-table tfoot tr {
    background: rgba(13,51,45,0.06) !important;
}

/* Pagination footer */
body.green-mode .pagination-container {
    background: #edf3f2 !important;
    border-top: 1px solid #d8e4e1 !important;
}

/* Active page button */
body.green-mode .pagination-buttons button.active {
    background: #0D332D !important;
    border-color: #0D332D !important;
    color: #fff !important;
}

/* Search input */
body.green-mode .data-table-header input {
    background: rgba(13,51,45,0.04) !important;
    border: 1px solid rgba(13,51,45,0.3) !important;
}

    body.green-mode .data-table-header input:focus {
        border-color: #0D332D !important;
        box-shadow: 0 0 0 0.2rem rgba(13,51,45,0.2) !important;
    }

/* Drawer header */
body.green-mode .drawer-header {
    background: rgba(13,51,45,0.07) !important;
    color: #092622 !important; /* slightly deeper tone for contrast */
}
/* ==========================================================
                           🔴 RED THEME – FILTER COMPONENT
                           ========================================================== */


/* Filter Header */
body.red-mode .filter-header {
    background: var(--theme-bg-main) !important;
    border-bottom: 1px solid rgba(192,57,43,0.25) !important;
}

/* Filter Title */
body.red-mode .filter-title {
    color: #9e2f25 !important;
}

/* Filter Sidebar */
body.red-mode .filter-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(192,57,43,0.2) !important;
}

/* Overlay */
body.red-mode .filter-overlay {
    background: rgba(192,57,43,0.15) !important;
}

/* Filter & Fullscreen Buttons */
body.red-mode .filter-icon-btn,
body.red-mode .fullscreen-btn {
    border-color: #c0392b !important;
    color: #c0392b !important;
}

    body.red-mode .filter-icon-btn:hover,
    body.red-mode .fullscreen-btn:hover {
        background: rgba(192,57,43,0.08) !important;
    }

/* Fullscreen Header */
body.red-mode .fullscreen-header {
    background: rgba(192,57,43,0.05) !important;
    border-bottom: 1px solid rgba(192,57,43,0.25) !important;
}

/* Fullscreen Sidebar */
body.red-mode .fullscreen-sidebar {
    border-right: 1px solid rgba(192,57,43,0.2) !important;
}

/* Fullscreen Overlay */
body.red-mode .fullscreen-overlay {
    background: rgba(192,57,43,0.18) !important;
}

/* Fullscreen Footer */
body.red-mode .fullscreen-footer {
    background: rgba(192,57,43,0.05) !important;
    border-top: 1px solid rgba(192,57,43,0.25) !important;
    color: #7b241c !important;
}


/* ==========================================================
                           🌊 OCEAN BLUE THEME – FILTER COMPONENT
                           ========================================================== */

/* Filter Header */
body.ocean-mode .filter-header {
    background: rgba(0,119,182,0.05) !important;
    border-bottom: 1px solid rgba(0,119,182,0.25) !important;
}

/* Filter Title */
body.ocean-mode .filter-title {
    color: #023e8a !important;
}

/* Filter Sidebar */
body.ocean-mode .filter-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0,119,182,0.2) !important;
}

/* Overlay */
body.ocean-mode .filter-overlay {
    background: rgba(0,119,182,0.15) !important;
}

/* Filter & Fullscreen Buttons */
body.ocean-mode .filter-icon-btn,
body.ocean-mode .fullscreen-btn {
    border-color: #0077b6 !important;
    color: #0077b6 !important;
}

    body.ocean-mode .filter-icon-btn:hover,
    body.ocean-mode .fullscreen-btn:hover {
        background: rgba(0,119,182,0.08) !important;
    }

/* Fullscreen Header */
body.ocean-mode .fullscreen-header {
    background: rgba(0,119,182,0.05) !important;
    border-bottom: 1px solid rgba(0,119,182,0.25) !important;
}

/* Fullscreen Sidebar */
body.ocean-mode .fullscreen-sidebar {
    border-right: 1px solid rgba(0,119,182,0.2) !important;
}

/* Fullscreen Overlay */
body.ocean-mode .fullscreen-overlay {
    background: rgba(0,119,182,0.18) !important;
}

/* Fullscreen Footer */
body.ocean-mode .fullscreen-footer {
    background: rgba(0,119,182,0.05) !important;
    border-top: 1px solid rgba(0,119,182,0.25) !important;
    color: #023e8a !important;
}
/* ==========================================================
                   🌿 DARK GREEN THEME – FILTER COMPONENT
                   ========================================================== */


/* Filter Header */
body.green-mode .filter-header {
    background: rgba(13,51,45,0.05) !important;
    border-bottom: 1px solid rgba(13,51,45,0.25) !important;
}

/* Filter Title */
body.green-mode .filter-title {
    color: #0D332D !important;
}

/* Filter Sidebar */
body.green-mode .filter-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(13,51,45,0.2) !important;
}

/* Overlay */
body.green-mode .filter-overlay {
    background: rgba(13,51,45,0.15) !important;
}

/* Filter & Fullscreen Buttons */
body.green-mode .filter-icon-btn,
body.green-mode .fullscreen-btn {
    border-color: #0D332D !important;
    color: #0D332D !important;
}

    body.green-mode .filter-icon-btn:hover,
    body.green-mode .fullscreen-btn:hover {
        background: rgba(13,51,45,0.08) !important;
    }


/* Fullscreen Header */
body.green-mode .fullscreen-header {
    background: rgba(13,51,45,0.05) !important;
    border-bottom: 1px solid rgba(13,51,45,0.25) !important;
}

/* Fullscreen Sidebar */
body.green-mode .fullscreen-sidebar {
    border-right: 1px solid rgba(13,51,45,0.2) !important;
}

/* Fullscreen Overlay */
body.green-mode .fullscreen-overlay {
    background: rgba(13,51,45,0.18) !important;
}

/* Fullscreen Footer */
body.green-mode .fullscreen-footer {
    background: rgba(13,51,45,0.05) !important;
    border-top: 1px solid rgba(13,51,45,0.25) !important;
    color: #092622 !important; /* slightly deeper for contrast */
}
/* ==========================================================
                           SOFT TABLE BACKGROUND – RED + OCEAN
                           Overrides white table-wrapper + tbody rows
                           ========================================================== */


/* ==============================
                           🔴 RED MODE TABLE BACKGROUND
                           ============================== */

body.red-mode .table-wrapper {
    background: rgba(192,57,43,0.03) !important;
}

body.red-mode table.figma-table tbody tr {
    background: rgba(192,57,43,0.025) !important;
}

    body.red-mode table.figma-table tbody tr:nth-child(even) {
        background: rgba(192,57,43,0.04) !important;
    }

    /* Hover stronger than base */
    body.red-mode table.figma-table tbody tr:hover,
    body.red-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(192,57,43,0.07) !important;
    }


/* ==============================
                           🌊 OCEAN MODE TABLE BACKGROUND
                           ============================== */

body.ocean-mode .table-wrapper {
    background: rgba(0,119,182,0.03) !important;
}

body.ocean-mode table.figma-table tbody tr {
    background: rgba(0,119,182,0.025) !important;
}

    body.ocean-mode table.figma-table tbody tr:nth-child(even) {
        background: rgba(0,119,182,0.04) !important;
    }

    /* Hover stronger than base */
    body.ocean-mode table.figma-table tbody tr:hover,
    body.ocean-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(0,119,182,0.07) !important;
    }
/* ==========================================================
                   🌿 DARK GREEN MODE TABLE BACKGROUND
                   Overrides white table-wrapper + tbody rows
                   ========================================================== */

body.green-mode .table-wrapper {
    background: rgba(13,51,45,0.03) !important;
}

body.green-mode table.figma-table tbody tr {
    background: rgba(13,51,45,0.025) !important;
}

    body.green-mode table.figma-table tbody tr:nth-child(even) {
        background: rgba(13,51,45,0.04) !important;
    }

    /* Hover stronger than base */
    body.green-mode table.figma-table tbody tr:hover,
    body.green-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(13,51,45,0.07) !important;
    }
/* ==========================================================
                           FIX: FILTER HEADER BACKGROUND (RED + OCEAN)
                           ========================================================== */

/* 🔴 RED MODE */
body.red-mode .filter-header,
body.red-mode .fullscreen-header {
    background: rgba(192,57,43,0.06) !important;
    border-bottom: 1px solid rgba(192,57,43,0.25) !important;
}

/* 🌊 OCEAN MODE */
body.ocean-mode .filter-header,
body.ocean-mode .fullscreen-header {
    background: rgba(0,119,182,0.06) !important;
    border-bottom: 1px solid rgba(0,119,182,0.25) !important;
}


/* ==========================================================
                           FIX: BUTTON BACKGROUND (ICON AREA)
                           ========================================================== */

/* 🔴 RED MODE BUTTONS */
body.red-mode .filter-icon-btn,
body.red-mode .fullscreen-btn {
    background: rgba(192,57,43,0.08) !important;
    border-color: #c0392b !important;
    color: #c0392b !important;
}

/* 🌊 OCEAN MODE BUTTONS */
body.ocean-mode .filter-icon-btn,
body.ocean-mode .fullscreen-btn {
    background: rgba(0,119,182,0.08) !important;
    border-color: #0077b6 !important;
    color: #0077b6 !important;
}


/* Hover */
body.red-mode .filter-icon-btn:hover,
body.red-mode .fullscreen-btn:hover {
    background: rgba(192,57,43,0.15) !important;
}

body.ocean-mode .filter-icon-btn:hover,
body.ocean-mode .fullscreen-btn:hover {
    background: rgba(0,119,182,0.15) !important;
}
/* ==========================================================
                   FIX: FILTER HEADER BACKGROUND (GREEN)
                   ========================================================== */

/* 🌿 GREEN MODE */
body.green-mode .filter-header,
body.green-mode .fullscreen-header {
    background: rgba(13,51,45,0.06) !important;
    border-bottom: 1px solid rgba(13,51,45,0.25) !important;
}


/* ==========================================================
                   FIX: BUTTON BACKGROUND (ICON AREA)
                   ========================================================== */

/* 🌿 GREEN MODE BUTTONS */
body.green-mode .filter-icon-btn,
body.green-mode .fullscreen-btn {
    background: rgba(13,51,45,0.08) !important;
    border-color: #0D332D !important;
    color: #0D332D !important;
}

    /* Hover */
    body.green-mode .filter-icon-btn:hover,
    body.green-mode .fullscreen-btn:hover {
        background: rgba(13,51,45,0.15) !important;
    }

/* ==========================================================
                           ACTIONS COLUMN + PAGINATION THEME FIX
                           RED + OCEAN
                           ========================================================== */


/* ==============================
                           🔴 RED MODE
                           ============================== */

/* Sticky Actions column */
/* Sticky Actions column */
body.red-mode .actions-column {
    background: #f6d6d8 !important;
}

/* Header */
body.red-mode table.figma-table thead th.actions-column {
    background: #f6d6d8 !important;
    color: #9e2f25 !important;
}

/* Hover */
body.red-mode .figma-table tbody tr:hover .actions-column {
    background: #f6d6d8 !important;
}
/* Pagination container */
/*  body.red-mode .pagination-container {
                    background: rgba(192,57,43,0.05) !important;
                    border-bottom: 1px solid rgba(192,57,43,0.15) !important;
                } */

/* Pagination buttons */
body.red-mode .pagination-buttons button {
    background: rgba(192,57,43,0.04) !important;
    border-color: rgba(192,57,43,0.25) !important;
    color: #c0392b !important;
}

    /* Active page */
    body.red-mode .pagination-buttons button.active {
        background: #c0392b !important;
        color: #fff !important;
        border-color: #c0392b !important;
    }

/* Page size dropdown */
body.red-mode .pagination-container select {
    background: rgba(192,57,43,0.04) !important;
    border-color: rgba(192,57,43,0.25) !important;
}



/* ==============================
                           🌊 OCEAN MODE
                           ============================== */

/* Sticky Actions column */
body.ocean-mode .actions-column {
    background: #d6e9f7 !important; /* subtle but cleaner */
}

/* Header */
body.ocean-mode table.figma-table thead th.actions-column {
    background: #d6e9f7 !important;
    color: #023e8a !important;
}

/* Hover */
body.ocean-mode .figma-table tbody tr:hover .actions-column {
    background: #d6e9f7 !important;
}
/* Pagination buttons */
body.ocean-mode .pagination-buttons button {
    background: rgba(0,119,182,0.04) !important;
    border-color: rgba(0,119,182,0.25) !important;
    color: #0077b6 !important;
}

    /* Active page */
    body.ocean-mode .pagination-buttons button.active {
        background: #0077b6 !important;
        color: #fff !important;
        border-color: #0077b6 !important;
    }

/* Page size dropdown */
/*  body.ocean-mode .pagination-container select {
                    background: rgba(0,119,182,0.04) !important;
                    border-color: rgba(0,119,182,0.25) !important;
                } */
/* ==========================================================
                   ACTIONS COLUMN + PAGINATION THEME FIX
                   🌿 GREEN MODE
                   ========================================================== */


/* ==============================
                   🌿 GREEN MODE
                   ============================== */

/* Sticky Actions column */
body.green-mode .actions-column {
    background: #d9e7e4 !important; /* soft teal tint */
}

/* Header */
body.green-mode table.figma-table thead th.actions-column {
    background: #d9e7e4 !important;
    color: #0D332D !important;
}

/* Hover */
body.green-mode .figma-table tbody tr:hover .actions-column {
    background: #d9e7e4 !important;
}

/* Pagination container */
/*  body.green-mode .pagination-container {
                    background: rgba(13,51,45,0.05) !important;
                    border-bottom: 1px solid rgba(13,51,45,0.15) !important;
                } */

/* Pagination buttons */
body.green-mode .pagination-buttons button {
    background: rgba(13,51,45,0.04) !important;
    border-color: rgba(13,51,45,0.25) !important;
    color: #0D332D !important;
}

    /* Active page */
    body.green-mode .pagination-buttons button.active {
        background: #0D332D !important;
        color: #fff !important;
        border-color: #0D332D !important;
    }

/* Page size dropdown */
body.green-mode .pagination-container select {
    background: rgba(13,51,45,0.04) !important;
    border-color: rgba(13,51,45,0.25) !important;
}
/* ==========================================================
                           FILTER SIDEBAR BOTTOM (Apply Filters Section)
                           RED + OCEAN
                           ========================================================== */


/* ==============================
                           🔴 RED MODE
                           ============================== */

body.red-mode .filter-actions {
    background: #f6d6d8 !important; /* solid red */
    border-top: 1px solid #c0392b !important;
}

/*  body.red-mode .filterselectedvalue {
                            background-color: rgba(192,57,43,0.08) !important;
                        } */

body.red-mode .btn-custom-green {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

    body.red-mode .btn-custom-green:hover {
        background-color: #a93226 !important;
        border-color: #a93226 !important;
    }

    body.red-mode .btn-custom-green:focus,
    body.red-mode .btn-custom-green:active {
        box-shadow: 0 0 0 0.25rem rgba(192,57,43,0.35) !important;
    }



/* ==============================
                           🌊 OCEAN MODE
                           ============================== */

body.ocean-mode .filter-actions {
    background: #d9edf9 !important; /* solid blue */
    border-top: 1px solid #0077b6 !important;
}

/*   body.ocean-mode .filterselectedvalue {
                            background-color: rgba(0,119,182,0.08) !important;
                        } */

body.ocean-mode .btn-custom-green {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
    color: #fff !important;
}

    body.ocean-mode .btn-custom-green:hover {
        background-color: #005f8e !important;
        border-color: #005f8e !important;
    }

    body.ocean-mode .btn-custom-green:focus,
    body.ocean-mode .btn-custom-green:active {
        box-shadow: 0 0 0 0.25rem rgba(0,119,182,0.35) !important;
    }
/* ==========================================================
                   FILTER SIDEBAR BOTTOM (Apply Filters Section)
                   🌿 GREEN MODE
                   ========================================================== */


/* ==============================
                   🌿 GREEN MODE
                   ============================== */

body.green-mode .filter-actions {
    background: #d9e7e4 !important; /* soft teal background */
    border-top: 1px solid #0D332D !important;
}

/* Optional selected value tint */
/*
                body.green-mode .filterselectedvalue {
                    background-color: rgba(13,51,45,0.08) !important;
                }
                */

body.green-mode .btn-custom-green {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
    color: #fff !important;
}

    body.green-mode .btn-custom-green:hover {
        background-color: #0a2924 !important; /* slightly darker hover */
        border-color: #0a2924 !important;
    }

    body.green-mode .btn-custom-green:focus,
    body.green-mode .btn-custom-green:active {
        box-shadow: 0 0 0 0.25rem rgba(13,51,45,0.35) !important;
    }
/* ==========================================================
                           FILTER SIDEBAR – FULL SOLID (NO TRANSPARENCY)
                           ========================================================== */

/* 🔴 RED MODE */
body.red-mode .filter-sidebar {
    background: #f6d6d8 !important; /* solid soft red */
    border-right: 1px solid #c0392b !important;
}

body.red-mode .filter-sidebar-inner {
    background: #f6d6d8 !important;
}


/* 🌊 OCEAN MODE */
body.ocean-mode .filter-sidebar {
    background: #d9edf9 !important; /* solid soft blue */
    border-right: 1px solid #0077b6 !important;
}

body.ocean-mode .filter-sidebar-inner {
    background: #d9edf9 !important;
}


/* Ensure overlay is stronger so background doesn't mix */
.filter-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}
/* ==========================================================
                   FILTER SIDEBAR – FULL SOLID (NO TRANSPARENCY)
                   🌿 GREEN MODE
                   ========================================================== */

/* 🌿 GREEN MODE */
body.green-mode .filter-sidebar {
    background: #d9e7e4 !important; /* solid soft teal */
    border-right: 1px solid #0D332D !important;
}

body.green-mode .filter-sidebar-inner {
    background: #d9e7e4 !important;
}

/* Overlay remains same (no change needed) */
.filter-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}


/* ==========================================================
                           MODAL + RR CARD + MAP – RED + OCEAN
                           ========================================================== */

/* 🔴 RED */
body.red-mode .btn-custom-save {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: white !important;
}

    body.red-mode .btn-custom-save:hover {
        background-color: #a93226 !important;
    }

    body.red-mode .btn-custom-save:focus,
    body.red-mode .btn-custom-save:active {
        box-shadow: 0 0 0 0.25rem rgba(192,57,43,0.35) !important;
    }

body.red-mode .rr-card {
    border-left-color: #c0392b !important;
}

body.red-mode .btn-reset {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

/* 🌊 OCEAN */
body.ocean-mode .btn-custom-save {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
    color: white !important;
}

    body.ocean-mode .btn-custom-save:hover {
        background-color: #005f8e !important;
    }

    body.ocean-mode .btn-custom-save:focus,
    body.ocean-mode .btn-custom-save:active {
        box-shadow: 0 0 0 0.25rem rgba(0,119,182,0.35) !important;
    }

body.ocean-mode .rr-card {
    border-left-color: #0077b6 !important;
}

body.ocean-mode .btn-reset {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
}
/* 🌿 GREEN */
body.green-mode .btn-custom-save {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
    color: white !important;
}

    body.green-mode .btn-custom-save:hover {
        background-color: #0a2924 !important; /* darker hover */
    }

    body.green-mode .btn-custom-save:focus,
    body.green-mode .btn-custom-save:active {
        box-shadow: 0 0 0 0.25rem rgba(13,51,45,0.35) !important;
    }

/* RR Card accent */
body.green-mode .rr-card {
    border-left-color: #0D332D !important;
}

/* Reset button */
body.green-mode .btn-reset {
    background: #0D332D !important;
    border-color: #0D332D !important;
}
/* 🔴 RED – beat component-level specificity */
body.red-mode .mud-popover-provider .mud-list-item-clickable:hover {
    background-color: #fdf2f2 !important;
    color: #c0392b !important;
}

/* 🌊 OCEAN */
body.ocean-mode .mud-popover-provider .mud-list-item-clickable:hover {
    background-color: #f0f8ff !important;
    color: #0077b6 !important;
}
/* MudBlazor popover hover */
body.green-mode .mud-popover-provider .mud-list-item-clickable:hover {
    background-color: #e4f1ee !important; /* soft teal hover */
    color: #0D332D !important;
}

/* ==========================================================
                           MODAL / POPUP BACKGROUNDS – RED + OCEAN
                           ========================================================== */

/* 🔴 RED */
body.red-mode .modal-content-custom,
body.red-mode .rr-popup-modal,
body.red-mode .map-popup-modal,
body.red-mode .notification-panel,
body.red-mode .rbac-dropdown-panel,
body.red-mode .theme-picker-panel,
body.red-mode .customize-modal {
    background: #fff5f5 !important;
    border: 1px solid rgba(192,57,43,0.15) !important;
}

body.red-mode .modal-header-draggable,
body.red-mode .rr-header,
body.red-mode .map-header,
body.red-mode .modal-footer-custom,
body.red-mode .notification-header,
body.red-mode .drawer-header {
    background: rgba(192,57,43,0.07) !important;
    border-color: rgba(192,57,43,0.2) !important;
}

body.red-mode .rr-content,
body.red-mode .modal-body-custom {
    background: rgba(192,57,43,0.03) !important;
}

body.red-mode .rr-card {
    border-left-color: #c0392b !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(192,57,43,0.1) !important;
}

body.red-mode .notification-search {
    background: rgba(192,57,43,0.05) !important;
    border-bottom: 1px solid rgba(192,57,43,0.2) !important;
}

body.red-mode .notification-card {
    border-color: rgba(192,57,43,0.2) !important;
}

    body.red-mode .notification-card:hover {
        box-shadow: 0 2px 8px rgba(192,57,43,0.15) !important;
    }

body.red-mode .btn-reset {
    background: #c0392b !important;
}

body.red-mode .btn-custom-save {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}

/* 🌊 OCEAN */
body.ocean-mode .modal-content-custom,
body.ocean-mode .rr-popup-modal,
body.ocean-mode .map-popup-modal,
body.ocean-mode .notification-panel,
body.ocean-mode .rbac-dropdown-panel,
body.ocean-mode .theme-picker-panel,
body.ocean-mode .customize-modal {
    background: #f0f8ff !important;
    border: 1px solid rgba(0,119,182,0.15) !important;
}

body.ocean-mode .modal-header-draggable,
body.ocean-mode .rr-header,
body.ocean-mode .map-header,
body.ocean-mode .modal-footer-custom,
body.ocean-mode .notification-header,
body.ocean-mode .drawer-header {
    background: rgba(0,119,182,0.07) !important;
    border-color: rgba(0,119,182,0.2) !important;
}

body.ocean-mode .rr-content,
body.ocean-mode .modal-body-custom {
    background: rgba(0,119,182,0.03) !important;
}

body.ocean-mode .rr-card {
    border-left-color: #0077b6 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,119,182,0.1) !important;
}

body.ocean-mode .notification-search {
    background: rgba(0,119,182,0.05) !important;
    border-bottom: 1px solid rgba(0,119,182,0.2) !important;
}

body.ocean-mode .notification-card {
    border-color: rgba(0,119,182,0.2) !important;
}

    body.ocean-mode .notification-card:hover {
        box-shadow: 0 2px 8px rgba(0,119,182,0.15) !important;
    }

body.ocean-mode .btn-reset {
    background: #0077b6 !important;
}

body.ocean-mode .btn-custom-save {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
}
/* ==========================================================
                   MODAL / POPUP BACKGROUNDS – GREEN MODE
                   ========================================================== */

/* 🌿 GREEN */
body.green-mode .modal-content-custom,
body.green-mode .rr-popup-modal,
body.green-mode .map-popup-modal,
body.green-mode .notification-panel,
body.green-mode .rbac-dropdown-panel,
body.green-mode .theme-picker-panel,
body.green-mode .customize-modal {
    background: #f1f7f6 !important; /* very soft teal tint */
    border: 1px solid rgba(13,51,45,0.15) !important;
}

body.green-mode .modal-header-draggable,
body.green-mode .rr-header,
body.green-mode .map-header,
body.green-mode .modal-footer-custom,
body.green-mode .notification-header,
body.green-mode .drawer-header {
    background: rgba(13,51,45,0.07) !important;
    border-color: rgba(13,51,45,0.2) !important;
}

body.green-mode .rr-content,
body.green-mode .modal-body-custom {
    background: rgba(13,51,45,0.03) !important;
}

/* RR card */
body.green-mode .rr-card {
    border-left-color: #0D332D !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(13,51,45,0.1) !important;
}

/* Notification search */
body.green-mode .notification-search {
    background: rgba(13,51,45,0.05) !important;
    border-bottom: 1px solid rgba(13,51,45,0.2) !important;
}

/* Notification card */
body.green-mode .notification-card {
    border-color: rgba(13,51,45,0.2) !important;
}

    body.green-mode .notification-card:hover {
        box-shadow: 0 2px 8px rgba(13,51,45,0.15) !important;
    }

/* Buttons */
body.green-mode .btn-reset {
    background: #0D332D !important;
}

body.green-mode .btn-custom-save {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
}
/* ==========================================================
                           FORM CONTROL BACKGROUNDS – RED + OCEAN
                           ========================================================== */

/* 🔴 RED */
body.red-mode .form-control,
body.red-mode .form-select,
body.red-mode input[type="text"],
body.red-mode input[type="number"],
body.red-mode input[type="email"],
body.red-mode input[type="password"],
body.red-mode input[type="date"],
body.red-mode input[type="search"],
body.red-mode input[type="tel"],
body.red-mode textarea,
body.red-mode select {
    background-color: #fff5f5 !important;
    border-color: rgba(192,57,43,0.3) !important;
}

    body.red-mode .form-control:focus,
    body.red-mode .form-select:focus,
    body.red-mode input[type="text"]:focus,
    body.red-mode input[type="number"]:focus,
    body.red-mode input[type="date"]:focus,
    body.red-mode input[type="tel"]:focus,
    body.red-mode textarea:focus,
    body.red-mode select:focus {
        background-color: #fff5f5 !important;
        border-color: #c0392b !important;
        box-shadow: 0 0 0 0.2rem rgba(192,57,43,0.2) !important;
    }

body.red-mode .search-input:focus {
    border-color: #c0392b !important;
}

body.red-mode .data-table-header input {
    background-color: #fff5f5 !important;
}

/* 🌊 OCEAN */
body.ocean-mode .form-control,
body.ocean-mode .form-select,
body.ocean-mode input[type="text"],
body.ocean-mode input[type="number"],
body.ocean-mode input[type="email"],
body.ocean-mode input[type="password"],
body.ocean-mode input[type="date"],
body.ocean-mode input[type="tel"],
body.ocean-mode input[type="search"],
body.ocean-mode textarea,
body.ocean-mode select {
    background-color: #f0f8ff !important;
    border-color: rgba(0,119,182,0.3) !important;
}

    body.ocean-mode .form-control:focus,
    body.ocean-mode .form-select:focus,
    body.ocean-mode input[type="text"]:focus,
    body.ocean-mode input[type="number"]:focus,
    body.ocean-mode input[type="tel"]:focus
    body.ocean-mode input[type="date"]:focus,
    body.ocean-mode textarea:focus,
    body.ocean-mode select:focus {
        background-color: #f0f8ff !important;
        border-color: #0077b6 !important;
        box-shadow: 0 0 0 0.2rem rgba(0,119,182,0.2) !important;
    }

body.ocean-mode .search-input:focus {
    border-color: #0077b6 !important;
}

body.ocean-mode .data-table-header input {
    background-color: #f0f8ff !important;
}
/* ==========================================================
                   FORM CONTROL BACKGROUNDS – GREEN MODE
                   ========================================================== */

/* 🌿 GREEN */
body.green-mode .form-control,
body.green-mode .form-select,
body.green-mode input[type="text"],
body.green-mode input[type="number"],
body.green-mode input[type="email"],
body.green-mode input[type="password"],
body.green-mode input[type="date"],
body.green-mode input[type="tel"],
body.green-mode input[type="search"],
body.green-mode textarea,
body.green-mode select {
    background-color: #f1f7f6 !important; /* soft teal tint */
    border-color: rgba(13,51,45,0.3) !important;
}

    body.green-mode .form-control:focus,
    body.green-mode .form-select:focus,
    body.green-mode input[type="text"]:focus,
    body.green-mode input[type="number"]:focus,
    body.green-mode input[type="date"]:focus,
    body.green-mode input[type="tel"]:focus
    body.green-mode textarea:focus,
    body.green-mode select:focus {
        background-color: #f1f7f6 !important;
        border-color: #0D332D !important;
        box-shadow: 0 0 0 0.2rem rgba(13,51,45,0.2) !important;
    }

body.green-mode .search-input:focus {
    border-color: #0D332D !important;
}

body.green-mode .data-table-header input {
    background-color: #f1f7f6 !important;
}
/* ==========================================================
                           INTROVIEW – KPI CARDS + CHARTS + MODULES – RED + OCEAN
                           ========================================================== */

/* 🔴 RED */
body.red-mode .kpi-card {
    background: #fff5f5 !important;
    border-color: rgba(192,57,43,0.2) !important;
}

body.red-mode .chart-card {
    background: #fff5f5 !important;
    border-color: rgba(192,57,43,0.2) !important;
}

body.red-mode .modules-container {
    background: rgba(192,57,43,0.04) !important;
}

body.red-mode .module-item:hover {
    background: rgba(192,57,43,0.08) !important;
    border-color: rgba(192,57,43,0.2) !important;
}

body.red-mode .module-icon {
    background: rgba(192,57,43,0.1) !important;
    color: #c0392b !important;
}

body.red-mode .kpi-card hr {
    border-color: rgba(192,57,43,0.15) !important;
}

body.red-mode .card-icon {
    background: rgba(192,57,43,0.08) !important;
    color: #c0392b !important;
}

/* 🌊 OCEAN */
body.ocean-mode .kpi-card {
    background: #f0f8ff !important;
    border-color: rgba(0,119,182,0.2) !important;
}

body.ocean-mode .chart-card {
    background: #f0f8ff !important;
    border-color: rgba(0,119,182,0.2) !important;
}

body.ocean-mode .modules-container {
    background: rgba(0,119,182,0.04) !important;
}

body.ocean-mode .module-item:hover {
    background: rgba(0,119,182,0.08) !important;
    border-color: rgba(0,119,182,0.2) !important;
}

body.ocean-mode .module-icon {
    background: rgba(0,119,182,0.1) !important;
    color: #0077b6 !important;
}

body.ocean-mode .kpi-card hr {
    border-color: rgba(0,119,182,0.15) !important;
}

body.ocean-mode .card-icon {
    background: rgba(0,119,182,0.08) !important;
    color: #0077b6 !important;
}
/* ==========================================================
                   INTROVIEW – KPI CARDS + CHARTS + MODULES – GREEN MODE
                   ========================================================== */

/* 🌿 GREEN */
body.green-mode .kpi-card {
    background: #f1f7f6 !important; /* soft teal tint */
    border-color: rgba(13,51,45,0.2) !important;
}

body.green-mode .chart-card {
    background: #f1f7f6 !important;
    border-color: rgba(13,51,45,0.2) !important;
}

body.green-mode .modules-container {
    background: rgba(13,51,45,0.04) !important;
}

body.green-mode .module-item:hover {
    background: rgba(13,51,45,0.08) !important;
    border-color: rgba(13,51,45,0.2) !important;
}

body.green-mode .module-icon {
    background: rgba(13,51,45,0.1) !important;
    color: #0D332D !important;
}

body.green-mode .kpi-card hr {
    border-color: rgba(13,51,45,0.15) !important;
}

body.green-mode .card-icon {
    background: rgba(13,51,45,0.08) !important;
    color: #0D332D !important;
}
body.dark-mode.green-mode .card-icon {
    background: rgba(22, 45, 45, 0.50) !important;
    color: #6db89a !important;
}
/* ==========================================================
                       THEME OVERRIDES – EYE ICON + SAVE BUTTON
                       ========================================================== */


/* ==============================
                       🔴 RED MODE
                       ============================== */

/* Eye Icon */
body.red-mode .view-icon i {
    color: #c0392b !important;
}

body.red-mode .view-icon:hover i {
    color: #a93226 !important;
}

/* Save Button */
body.red-mode .save-btn {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

    body.red-mode .save-btn:hover {
        background: #a93226 !important;
    }



/* ==============================
                       🌊 OCEAN MODE
                       ============================== */

/* Eye Icon */
body.ocean-mode .view-icon i {
    color: #0077b6 !important;
}

body.ocean-mode .view-icon:hover i {
    color: #005f8e !important;
}

/* Save Button */
body.ocean-mode .save-btn {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
}

    body.ocean-mode .save-btn:hover {
        background: #005f8e !important;
    }
/* ==============================
                   🌿 GREEN MODE
                   ============================== */

/* Eye Icon */
body.green-mode .view-icon i {
    color: #0D332D !important;
}

body.green-mode .view-icon:hover i {
    color: #0a2924 !important; /* darker hover */
}

/* Save Button */
body.green-mode .save-btn {
    background: #0D332D !important;
    border-color: #0D332D !important;
}

    body.green-mode .save-btn:hover {
        background: #0a2924 !important;
    }

/* ==========================================================
                       THEME OVERRIDES – PAGE HEADING + BREADCRUMB
                       ========================================================== */


/* ==============================
                       🔴 RED MODE
                       ============================== */

/* Page Heading */
body.red-mode .fullscreen-wrapper-title {
    color: #c0392b !important;
}

/* Breadcrumb clickable */
body.red-mode .breadcrumb-item {
    color: #c0392b !important;
}

    body.red-mode .breadcrumb-item:hover {
        color: #a93226 !important;
        text-decoration: underline;
    }

    /* Active breadcrumb */
    body.red-mode .breadcrumb-item.active {
        color: #8e2b20 !important;
    }

/* Separator */
body.red-mode .breadcrumb-separator {
    color: rgba(192,57,43,0.6) !important;
}



/* ==============================
                       🌊 OCEAN MODE
                       ============================== */

/* Page Heading */
body.ocean-mode .fullscreen-wrapper-title {
    color: #0077b6 !important;
}

/* Breadcrumb clickable */
body.ocean-mode .breadcrumb-item {
    color: #0077b6 !important;
}

    body.ocean-mode .breadcrumb-item:hover {
        color: #005f8e !important;
        text-decoration: underline;
    }

    /* Active breadcrumb */
    body.ocean-mode .breadcrumb-item.active {
        color: #004f73 !important;
    }

/* Separator */
body.ocean-mode .breadcrumb-separator {
    color: rgba(0,119,182,0.6) !important;
}
/* ==========================================================
                   THEME OVERRIDES – PAGE HEADING + BREADCRUMB
                   GREEN MODE
                   ========================================================== */


/* Page Heading */
body.green-mode .fullscreen-wrapper-title {
    color: #0D332D !important;
}

/* Breadcrumb clickable */
body.green-mode .breadcrumb-item {
    color: #0D332D !important;
}

    body.green-mode .breadcrumb-item:hover {
        color: #0a2924 !important;
        text-decoration: underline;
    }

    /* Active breadcrumb */
    body.green-mode .breadcrumb-item.active {
        color: #072521 !important; /* slightly deeper tone */
    }

/* Separator */
body.green-mode .breadcrumb-separator {
    color: rgba(13,51,45,0.6) !important;
}
/* ==========================================================
                       DASHBOARD + TABS THEME (RED + OCEAN)
                       Clean Professional – White Page + Soft Themed Cards
                       ========================================================== */


/* ==========================================================
                       🔴 RED MODE
                       ========================================================== */

/* Keep page white */
body.red-mode .main-body {
    background: #ffffff !important;
}

/* Dashboard main container */
body.red-mode .mainclass {
    background: rgba(192,57,43,0.05) !important;
    border: 1px solid rgba(192,57,43,0.20) !important;
    backdrop-filter: blur(2px);
}

/* KPI / Chart Cards */
body.red-mode .kpi-card,
body.red-mode .chart-card {
    background: rgba(192,57,43,0.05) !important;
    border: 1px solid rgba(192,57,43,0.20) !important;
}

/* Tabs */
body.red-mode .custom-tab-nav .nav-tab {
    border: 1px solid rgba(192,57,43,0.25) !important;
    color: #9e2f25 !important;
    background: #ffffff !important;
}

    body.red-mode .custom-tab-nav .nav-tab.active {
        background: #c0392b !important;
        color: #ffffff !important;
        border-color: #c0392b !important;
    }

    body.red-mode .custom-tab-nav .nav-tab:not(.active):hover {
        background: rgba(192,57,43,0.08) !important;
        color: #c0392b !important;
    }



/* ==========================================================
                       🌊 OCEAN MODE
                       ========================================================== */

/* Keep page white */
body.ocean-mode .main-body {
    background: #ffffff !important;
}

/* Dashboard main container */
body.ocean-mode .mainclass {
    background: rgba(0,119,182,0.05) !important;
    border: 1px solid rgba(0,119,182,0.20) !important;
    backdrop-filter: blur(2px);
}

/* KPI / Chart Cards */
body.ocean-mode .kpi-card,
body.ocean-mode .chart-card {
    background: rgba(0,119,182,0.05) !important;
    border: 1px solid rgba(0,119,182,0.20) !important;
}

/* Tabs */
body.ocean-mode .custom-tab-nav .nav-tab {
    border: 1px solid rgba(0,119,182,0.25) !important;
    color: #023e8a !important;
    background: #ffffff !important;
}

    body.ocean-mode .custom-tab-nav .nav-tab.active {
        background: #0077b6 !important;
        color: #ffffff !important;
        border-color: #0077b6 !important;
    }

    body.ocean-mode .custom-tab-nav .nav-tab:not(.active):hover {
        background: rgba(0,119,182,0.08) !important;
        color: #0077b6 !important;
    }
/* ==========================================================
                   DASHBOARD + TABS THEME – GREEN MODE
                   ========================================================== */

/* Keep page white */
body.green-mode .main-body {
    background: #ffffff !important;
}

/* Dashboard main container */
body.green-mode .mainclass {
    background: rgba(13,51,45,0.05) !important;
    border: 1px solid rgba(13,51,45,0.20) !important;
    backdrop-filter: blur(2px);
}

/* KPI / Chart Cards */
body.green-mode .kpi-card,
body.green-mode .chart-card {
    background: rgba(13,51,45,0.05) !important;
    border: 1px solid rgba(13,51,45,0.20) !important;
}

/* Tabs */
body.green-mode .custom-tab-nav .nav-tab {
    border: 1px solid rgba(13,51,45,0.25) !important;
    color: #0D332D !important;
    background: #ffffff !important;
}

    body.green-mode .custom-tab-nav .nav-tab.active {
        background: #0D332D !important;
        color: #ffffff !important;
        border-color: #0D332D !important;
    }

    body.green-mode .custom-tab-nav .nav-tab:not(.active):hover {
        background: rgba(13,51,45,0.08) !important;
        color: #0D332D !important;
    }



/* ==========================================================
                       NETWORK METER POPUP THEME OVERRIDE
                       (Replaces Green with Red / Ocean)
                       ========================================================== */


/* ==============================
                       🔴 RED MODE
                       ============================== */

/* Step circles */
body.red-mode .step-circle {
    border: 2px solid #c0392b !important;
    color: #c0392b !important;
}

body.red-mode .step-item.active .step-circle {
    background: #c0392b !important;
    color: #ffffff !important;
}

/* Step line */
body.red-mode .step-line {
    background: #c0392b !important;
}

/* Draft button */
body.red-mode .btn-draft {
    border: 1px solid #c0392b !important;
    color: #c0392b !important;
    background: #ffffff !important;
}

    body.red-mode .btn-draft:hover {
        background: #f9e2e0 !important;
    }

/* Next / Save button */
body.red-mode .btn-next,
body.red-mode .btn-custom-green {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #ffffff !important;
}

    body.red-mode .btn-next:hover,
    body.red-mode .btn-custom-green:hover {
        background: #a93226 !important;
    }

/* MSN dropdown hover */
body.red-mode .msn-list .list-group-item:hover {
    background: #f9e2e0 !important;
}

/* Focus highlight */
body.red-mode .form-control:focus {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 0.2rem rgba(192,57,43,0.25) !important;
}



/* ==============================
                       🌊 OCEAN MODE
                       ============================== */

/* Step circles */
body.ocean-mode .step-circle {
    border: 2px solid #0077b6 !important;
    color: #0077b6 !important;
}

body.ocean-mode .step-item.active .step-circle {
    background: #0077b6 !important;
    color: #ffffff !important;
}

/* Step line */
body.ocean-mode .step-line {
    background: #0077b6 !important;
}

/* Draft button */
body.ocean-mode .btn-draft {
    border: 1px solid #0077b6 !important;
    color: #0077b6 !important;
    background: #ffffff !important;
}

    body.ocean-mode .btn-draft:hover {
        background: #e3f2fb !important;
    }

/* Next / Save button */
body.ocean-mode .btn-next,
body.ocean-mode .btn-custom-green {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
    color: #ffffff !important;
}

    body.ocean-mode .btn-next:hover,
    body.ocean-mode .btn-custom-green:hover {
        background: #005f8e !important;
    }

/* MSN dropdown hover */
body.ocean-mode .msn-list .list-group-item:hover {
    background: #e3f2fb !important;
}

/* Focus highlight */
body.ocean-mode .form-control:focus {
    border-color: #0077b6 !important;
    box-shadow: 0 0 0 0.2rem rgba(0,119,182,0.25) !important;
}
/* ==========================================================
                   NETWORK METER POPUP – GREEN MODE
                   ========================================================== */

/* Step circles */
body.green-mode .step-circle {
    border: 2px solid #0D332D !important;
    color: #0D332D !important;
}

body.green-mode .step-item.active .step-circle {
    background: #0D332D !important;
    color: #ffffff !important;
}

/* Step line */
body.green-mode .step-line {
    background: #0D332D !important;
}

/* Draft button */
body.green-mode .btn-draft {
    border: 1px solid #0D332D !important;
    color: #0D332D !important;
    background: #ffffff !important;
}

    body.green-mode .btn-draft:hover {
        background: #e4f1ee !important;
    }

/* Next / Save button */
body.green-mode .btn-next,
body.green-mode .btn-custom-green {
    background: #0D332D !important;
    border-color: #0D332D !important;
    color: #ffffff !important;
}

    body.green-mode .btn-next:hover,
    body.green-mode .btn-custom-green:hover {
        background: #0a2924 !important;
    }

/* MSN dropdown hover */
body.green-mode .msn-list .list-group-item:hover {
    background: #e4f1ee !important;
}

/* Focus highlight */
body.green-mode .form-control:focus {
    border-color: #0D332D !important;
    box-shadow: 0 0 0 0.2rem rgba(13,51,45,0.25) !important;
}
/* ==========================================================
                       ADD BUTTON FIX – FORCE WHITE TEXT & REMOVE GREEN
                       ========================================================== */

/* 🔴 RED MODE */
body.red-mode .top-btn-filled,
body.red-mode .top-btn-filled span,
body.red-mode .top-btn-filled i {
    color: #ffffff !important;
}

    body.red-mode .top-btn-filled .icon-circle {
        background: #ffffff !important;
    }

        body.red-mode .top-btn-filled .icon-circle i {
            color: #c0392b !important;
        }

body.red-mode .bi-plus-lg::before {
    color: #c0392b !important;
}

body.red-mode .top-btn-filled .bi-plus-lg::before {
    color: #ffffff !important;
}



/* 🌊 OCEAN MODE */
body.ocean-mode .top-btn-filled,
body.ocean-mode .top-btn-filled span,
body.ocean-mode .top-btn-filled i {
    color: #ffffff !important;
}

    body.ocean-mode .top-btn-filled .icon-circle {
        background: #ffffff !important;
    }

        body.ocean-mode .top-btn-filled .icon-circle i {
            color: #0077b6 !important;
        }



    body.ocean-mode .top-btn-filled .bi-plus-lg::before {
        color: #ffffff !important;
    }

body.ocean-mode .bi-plus-lg::before {
    color: #0077b6 !important;
}
/* 🌿 GREEN MODE */
body.green-mode .top-btn-filled,
body.green-mode .top-btn-filled span,
body.green-mode .top-btn-filled i {
    color: #ffffff !important;
}

    body.green-mode .top-btn-filled .icon-circle {
        background: #ffffff !important;
    }

        body.green-mode .top-btn-filled .icon-circle i {
            color: #0D332D !important;
        }

body.green-mode .bi-plus-lg::before {
    color: #0D332D !important;
}

body.green-mode .top-btn-filled .bi-plus-lg::before {
    color: #ffffff !important;
}

/* Footer text color only */

/* 🔴 RED MODE */
body.red-mode footer {
    color: #c0392b !important;
}

/* 🌊 OCEAN MODE */
body.ocean-mode footer {
    color: #023e8a !important;
}

body.green-mode footer {
    color: #0D332D !important;
}

body.red-mode .sidebar-badges {
    border-bottom: 1px solid #c0392b !important;
}

/* 🌊 OCEAN MODE */
body.ocean-mode .sidebar-badges {
    border-bottom: 1px solid #0077b6 !important;
}

body.green-mode .sidebar-badges {
    border-bottom: 1px solid #0D332D !important;
}
/* ==========================================================
                       MODAL THEME OVERRIDE – RED + OCEAN
                       Light Header + Light Body + Left Border Accent
                       ========================================================== */

/* ==========================================================
                       EDIT CARD THEME OVERRIDE – RED + OCEAN
                       ========================================================== */


/* ==============================
                       🔴 RED MODE
                       ============================== */

body.red-mode .edit-card {
    background: #ffff !important;
    border-radius: 18px;
    border-left: 6px solid #c0392b !important;
    border-color: #c0392b !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%
}

body.red-mode .edit-card-header {
    padding: 14px 18px 8px 18px;
    color: #c0392b !important;
}

/* ==============================
                       🌊 OCEAN MODE
                       ============================== */

body.ocean-mode .edit-card {
    background: #ffff !important;
    border-radius: 18px;
    border-left: 6px solid #0077b6 !important;
    border-color: #0077b6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%
}

body.ocean-mode .edit-card-header {
    padding: 14px 18px 8px 18px;
    color: #0077b6 !important;
}
/* ==========================================================
                   EDIT CARD THEME OVERRIDE – GREEN MODE
                   ========================================================== */

body.green-mode .edit-card {
    background: #ffffff !important;
    border-radius: 18px;
    border-left: 6px solid #0D332D !important;
    border-color: #0D332D !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    height: 100%;
}

body.green-mode .edit-card-header {
    padding: 14px 18px 8px 18px;
    color: #0D332D !important;
}

/* ==========================================================
                       FIX: COMPONENT-LEVEL ICON COLOUR OVERRIDES
                       Beats LatestTableDynamic.razor local styles
                       RED + OCEAN
                       ========================================================== */

/* 🔴 RED – pencil, trash, plus icon */

body.red-mode .table-component .bi-plus-lg::before,
body.red-mode .top-btn-filled .bi-plus-lg::before {
    background: #ffffff !important; /* keep white circle */
    color: #c0392b !important; /* red icon inside */
    border-radius: 50px !important;
}

/* 🌊 OCEAN */
body.ocean-mode .table-component .bi-plus-lg::before,
body.ocean-mode .top-btn-filled .bi-plus-lg::before {
    background: #ffffff !important; /* keep white circle */
    color: #0077b6 !important; /* blue icon inside */
    border-radius: 50px !important;
}

body.green-mode .table-component .bi-plus-lg::before,
body.green-mode .top-btn-filled .bi-plus-lg::before {
    background: #ffffff !important; /* keep white circle */
    color: #0D332D !important; /* green icon inside */
    border-radius: 50px !important;
}


/* ==========================================================
                   LOADER THEME COLORS – RED + OCEAN
                   ========================================================== */

/* 🔴 RED MODE */
body.red-mode .loader-text {
    color: #c0392b !important;
}

body.red-mode .load {
    background-color: #c0392b !important;
}

    body.red-mode .load::before {
        background-color: #f3b5af !important; /* light red */
    }


/* 🌊 OCEAN MODE */
body.ocean-mode .loader-text {
    color: #0077b6 !important;
}

body.ocean-mode .load {
    background-color: #0077b6 !important;
}

    body.ocean-mode .load::before {
        background-color: #8ecae6 !important; /* light blue */
    }

body.red-mode .pagination-container
body.green-mode .loader-text {
    color: #0D332D !important;
}

body.green-mode .load {
    background-color: #0D332D !important;
}

    body.green-mode .load::before {
        background-color: #9fc5be !important; /* soft light teal */
    }
/*main layou icons*/
/* Red */
body.red-mode .header-icon {
    color: #9e2f25;
}

/* Ocean */
body.ocean-mode .header-icon {
    color: #023e8a;
}

/* Green */
body.green-mode .header-icon {
    color: #0D332D;
}


body.red-mode .fav-header-star-icon.filled,
body.red-mode .fav-page-star.active,
body.red-mode .fav-card-star.active {
    color: #c0392b !important;
}

body.ocean-mode .fav-header-star-icon.filled,
body.ocean-mode .fav-page-star.active,
body.ocean-mode .fav-card-star.active {
    color: #0077b6 !important;
}

body.green-mode .fav-header-star-icon.filled,
body.green-mode .fav-page-star.active,
body.green-mode .fav-card-star.active {
    color: #0D332D !important;
}

body.dark-mode.red-mode .fav-header-star-icon.filled,
body.dark-mode.red-mode .fav-page-star.active,
body.dark-mode.red-mode .fav-card-star.active {
    color: #e8a09a !important;
}

body.dark-mode.ocean-mode .fav-header-star-icon.filled,
body.dark-mode.ocean-mode .fav-page-star.active,
body.dark-mode.ocean-mode .fav-card-star.active {
    color: #90cdf4 !important;
}

body.dark-mode.green-mode .fav-header-star-icon.filled,
body.dark-mode.green-mode .fav-page-star.active,
body.dark-mode.green-mode .fav-card-star.active {
    color: #6db89a !important;
}
/* ==========================================================
                   TREE NODE – THEME OVERRIDES
                   ========================================================== */

/* ==============================
                   🔴 RED MODE
                   ============================== */

body.red-mode .tree-node-row:hover {
    background: rgba(192, 57, 43, 0.08) !important;
}

body.red-mode .tree-toggle-btn {
    border-color: #e8c5c1 !important;
}

    body.red-mode .tree-toggle-btn:hover {
        border-color: #c0392b !important;
        background: #fdf2f2 !important;
        color: #c0392b !important;
    }

body.red-mode .tree-checkbox:checked {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

body.red-mode .tree-checkbox:hover:not(:checked) {
    border-color: #c0392b !important;
}

body.red-mode .tree-node-row.is-checked {
    background: rgba(192, 57, 43, 0.07) !important;
}

    body.red-mode .tree-node-row.is-checked .tree-node-label {
        color: #9e2f25 !important;
    }

body.red-mode .tree-children {
    border-left-color: rgba(192, 57, 43, 0.25) !important;
}

    body.red-mode .tree-children::before {
        background: rgba(192, 57, 43, 0.3) !important;
    }

    body.red-mode .tree-children > .tree-node-item::before {
        background: rgba(192, 57, 43, 0.3) !important;
    }


/* ==============================
                   🌊 OCEAN MODE
                   ============================== */

body.ocean-mode .tree-node-row:hover {
    background: rgba(0, 119, 182, 0.08) !important;
}

body.ocean-mode .tree-toggle-btn {
    border-color: #cce3f1 !important;
}

    body.ocean-mode .tree-toggle-btn:hover {
        border-color: #0077b6 !important;
        background: #e8f4fd !important;
        color: #0077b6 !important;
    }

body.ocean-mode .tree-checkbox:checked {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
}

body.ocean-mode .tree-checkbox:hover:not(:checked) {
    border-color: #0077b6 !important;
}

body.ocean-mode .tree-node-row.is-checked {
    background: rgba(0, 119, 182, 0.07) !important;
}

    body.ocean-mode .tree-node-row.is-checked .tree-node-label {
        color: #023e8a !important;
    }

body.ocean-mode .tree-children {
    border-left-color: rgba(0, 119, 182, 0.25) !important;
}

    body.ocean-mode .tree-children::before {
        background: rgba(0, 119, 182, 0.3) !important;
    }

    body.ocean-mode .tree-children > .tree-node-item::before {
        background: rgba(0, 119, 182, 0.3) !important;
    }


/* ==============================
                   🌿 GREEN MODE
                   ============================== */

body.green-mode .tree-node-row:hover {
    background: rgba(13, 51, 45, 0.08) !important;
}

body.green-mode .tree-toggle-btn {
    border-color: #d8e4e1 !important;
}

    body.green-mode .tree-toggle-btn:hover {
        border-color: #0D332D !important;
        background: #e4f1ee !important;
        color: #0D332D !important;
    }

body.green-mode .tree-checkbox:checked {
    background: #0D332D !important;
    border-color: #0D332D !important;
}

body.green-mode .tree-checkbox:hover:not(:checked) {
    border-color: #0D332D !important;
}

body.green-mode .tree-node-row.is-checked {
    background: rgba(13, 51, 45, 0.07) !important;
}

    body.green-mode .tree-node-row.is-checked .tree-node-label {
        color: #0D332D !important;
    }

body.green-mode .tree-children {
    border-left-color: rgba(13, 51, 45, 0.25) !important;
}

    body.green-mode .tree-children::before {
        background: rgba(13, 51, 45, 0.3) !important;
    }

    body.green-mode .tree-children > .tree-node-item::before {
        background: rgba(13, 51, 45, 0.3) !important;
    }


/* ==============================
                   🌑 DARK MODE
                   ============================== */

body.dark-mode .tree-node-row:hover {
    background: rgba(175, 204, 109, 0.1) !important;
}

body.dark-mode .tree-toggle-btn {
    background: #1e1e1e !important;
    border-color: #444 !important;
    color: #aaa !important;
}

    body.dark-mode .tree-toggle-btn:hover {
        border-color: #AFCC6D !important;
        background: #2a3320 !important;
        color: #AFCC6D !important;
    }

body.dark-mode .tree-checkbox {
    background: #1e1e1e !important;
    border-color: #555 !important;
}

    body.dark-mode .tree-checkbox:checked {
        background: #94B44C !important;
        border-color: #94B44C !important;
    }

    body.dark-mode .tree-checkbox:hover:not(:checked) {
        border-color: #AFCC6D !important;
    }

body.dark-mode .tree-node-label {
    color: #c7c9d0 !important;
}

body.dark-mode .tree-node-parent > .tree-node-row > .tree-node-label {
    color: #e0e0e0 !important;
}

body.dark-mode .tree-node-leaf > .tree-node-row > .tree-node-label {
    color: #a0a4ad !important;
}

body.dark-mode .tree-node-row.is-checked {
    background: rgba(148, 180, 76, 0.12) !important;
}

    body.dark-mode .tree-node-row.is-checked .tree-node-label {
        color: #AFCC6D !important;
    }

body.dark-mode .tree-children {
    border-left-color: #333 !important;
}

    body.dark-mode .tree-children::before {
        background: #444 !important;
    }

    body.dark-mode .tree-children > .tree-node-item::before {
        background: #444 !important;
    }
/* ==========================================================
                   DARK + COLOUR COMBINED MODES
                   Dark mode backgrounds stay identical to plain dark mode.
                   Only accent colours change (buttons, links, active states).
                   ========================================================== */

/* ==============================
                   🌑+🔴 DARK + RED
                   ============================== */

/* Sidebar accent — active item uses red instead of green */
body.dark-mode.red-mode .sidebar-module-item.active-module {
    background: rgba(192,57,43,0.2) !important;
    border-left: 3px solid #c0392b !important;
    color: #e8a09a !important;
}

body.dark-mode.red-mode .nav-link.active {
    background: rgba(192,57,43,0.18) !important;
    color: #e8a09a !important;
}

body.dark-mode.red-mode .sidebar-module-item:hover,
body.dark-mode.red-mode .nav-link:hover {
    color: #e8a09a !important;
}

body.dark-mode.red-mode .sidebar-module-icon {
    color: #e8a09a !important;
}

/* Buttons */
body.dark-mode.red-mode .btn-custom-green,
body.dark-mode.red-mode .top-btn-filled,
body.dark-mode.red-mode .search-button,
body.dark-mode.red-mode .apply-btn,
body.dark-mode.red-mode .save-btn,
body.dark-mode.red-mode .btn-custom-save,
body.dark-mode.red-mode .btn-next,
body.dark-mode.red-mode .btn-reset,
body.dark-mode.red-mode .logout-confirm {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

    body.dark-mode.red-mode .btn-custom-green:hover,
    body.dark-mode.red-mode .search-button:hover {
        background-color: #a93226 !important;
    }

/* Pagination active */
body.dark-mode.red-mode .pagination-buttons button.active,
body.dark-mode.red-mode .page-btn.active {
    background: #c0392b !important;
    border-color: #c0392b !important;
    color: #fff !important;
}

body.dark-mode.red-mode .pagination-buttons button {
    color: #e8a09a !important;
    border-color: rgba(192,57,43,0.4) !important;
}

/* Links & icons */
body.dark-mode.red-mode .download-link {
    color: #e8a09a !important;
}

body.dark-mode.red-mode .bi-pencil-fill,
body.dark-mode.red-mode .bi-trash-fill,
body.dark-mode.red-mode .bi-arrow-right {
    color: #e8a09a !important;
}

/* Table header accent */
body.dark-mode.red-mode table.figma-table thead th {
    color: #e8a09a !important;
    border-bottom-color: rgba(192,57,43,0.4) !important;
}

/* Tabs */
body.dark-mode.red-mode .custom-tab-nav .nav-tab {
    color: #e8a09a !important;
    border-color: rgba(192,57,43,0.4) !important;
}

    body.dark-mode.red-mode .custom-tab-nav .nav-tab.active {
        background: #c0392b !important;
        border-color: #c0392b !important;
        color: #fff !important;
    }

/* Outlines / top buttons */
body.dark-mode.red-mode .top-btn-outline,
body.dark-mode.red-mode .top-btn {
    color: #e8a09a !important;
    border-color: #c0392b !important;
}

/* Filter & fullscreen buttons */
body.dark-mode.red-mode .filter-icon-btn,
body.dark-mode.red-mode .fullscreen-btn,
body.dark-mode.red-mode .fullscreen-wrapper-btn {
    color: #e8a09a !important;
    border-color: #c0392b !important;
}

/* Headings / breadcrumb */
body.dark-mode.red-mode .fullscreen-wrapper-title,
body.dark-mode.red-mode .breadcrumb-item {
    color: #e8a09a !important;
}

body.dark-mode.red-mode .drawer-header {
    color: #e8a09a !important;
}

/* Step wizard */
body.dark-mode.red-mode .step-circle {
    border-color: #c0392b !important;
    color: #e8a09a !important;
}

body.dark-mode.red-mode .step-item.active .step-circle {
    background: #c0392b !important;
    color: #fff !important;
}

body.dark-mode.red-mode .step-line {
    background: #c0392b !important;
}

/* Card left border accent */
body.dark-mode.red-mode .rr-card,
body.dark-mode.red-mode .edit-card {
    border-left-color: #c0392b !important;
}

body.dark-mode.red-mode .edit-card-header {
    color: #e8a09a !important;
}

/* Header icon tint */
body.dark-mode.red-mode .header-icon {
    color: #e8a09a !important;
}

/* Active theme label */
body.dark-mode.red-mode .theme-picker-item.active-theme {
    color: #e8a09a !important;
}

/* Tree */
body.dark-mode.red-mode .tree-checkbox:checked {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

body.dark-mode.red-mode .tree-node-row.is-checked .tree-node-label {
    color: #e8a09a !important;
}

/* Loader */
body.dark-mode.red-mode .loader-text {
    color: #e8a09a !important;
}

body.dark-mode.red-mode .load {
    background-color: #c0392b !important;
}

    body.dark-mode.red-mode .load::before {
        background-color: #f3b5af !important;
    }


/* ==============================
                   🌑+🌊 DARK + OCEAN
                   ============================== */

body.dark-mode.ocean-mode .sidebar-module-item.active-module {
    background: rgba(0,119,182,0.2) !important;
    border-left: 3px solid #0077b6 !important;
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .nav-link.active {
    background: rgba(0,119,182,0.18) !important;
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .sidebar-module-item:hover,
body.dark-mode.ocean-mode .nav-link:hover {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .sidebar-module-icon {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .btn-custom-green,
body.dark-mode.ocean-mode .top-btn-filled,
body.dark-mode.ocean-mode .search-button,
body.dark-mode.ocean-mode .apply-btn,
body.dark-mode.ocean-mode .save-btn,
body.dark-mode.ocean-mode .btn-custom-save,
body.dark-mode.ocean-mode .btn-next,
body.dark-mode.ocean-mode .btn-reset,
body.dark-mode.ocean-mode .logout-confirm {
    background-color: #0077b6 !important;
    border-color: #0077b6 !important;
    color: #fff !important;
}

    body.dark-mode.ocean-mode .btn-custom-green:hover,
    body.dark-mode.ocean-mode .search-button:hover {
        background-color: #005f8e !important;
    }

body.dark-mode.ocean-mode .pagination-buttons button.active,
body.dark-mode.ocean-mode .page-btn.active {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
    color: #fff !important;
}

body.dark-mode.ocean-mode .pagination-buttons button {
    color: #90cdf4 !important;
    border-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.ocean-mode .download-link {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .bi-pencil-fill,
body.dark-mode.ocean-mode .bi-trash-fill,
body.dark-mode.ocean-mode .bi-arrow-right {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode table.figma-table thead th {
    color: #90cdf4 !important;
    border-bottom-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.ocean-mode .custom-tab-nav .nav-tab {
    color: #90cdf4 !important;
    border-color: rgba(0,119,182,0.4) !important;
}

    body.dark-mode.ocean-mode .custom-tab-nav .nav-tab.active {
        background: #0077b6 !important;
        border-color: #0077b6 !important;
        color: #fff !important;
    }

body.dark-mode.ocean-mode .top-btn-outline,
body.dark-mode.ocean-mode .top-btn {
    color: #90cdf4 !important;
    border-color: #0077b6 !important;
}

body.dark-mode.ocean-mode .filter-icon-btn,
body.dark-mode.ocean-mode .fullscreen-btn,
body.dark-mode.ocean-mode .fullscreen-wrapper-btn {
    color: #90cdf4 !important;
    border-color: #0077b6 !important;
}

body.dark-mode.ocean-mode .fullscreen-wrapper-title,
body.dark-mode.ocean-mode .breadcrumb-item {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .drawer-header {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .step-circle {
    border-color: #0077b6 !important;
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .step-item.active .step-circle {
    background: #0077b6 !important;
    color: #fff !important;
}

body.dark-mode.ocean-mode .step-line {
    background: #0077b6 !important;
}

body.dark-mode.ocean-mode .rr-card,
body.dark-mode.ocean-mode .edit-card {
    border-left-color: #0077b6 !important;
}

body.dark-mode.ocean-mode .edit-card-header {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .header-icon {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .theme-picker-item.active-theme {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .tree-checkbox:checked {
    background: #0077b6 !important;
    border-color: #0077b6 !important;
}

body.dark-mode.ocean-mode .tree-node-row.is-checked .tree-node-label {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .loader-text {
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .load {
    background-color: #0077b6 !important;
}

    body.dark-mode.ocean-mode .load::before {
        background-color: #8ecae6 !important;
    }


/* ==============================
                   🌑+🌿 DARK + GREEN
                   ============================== */

body.dark-mode.green-mode .sidebar-module-item.active-module {
    background: rgba(13,51,45,0.35) !important;
    border-left: 3px solid #6db89a !important;
    color: #6db89a !important;
}

body.dark-mode.green-mode .nav-link.active {
    background: rgba(13,51,45,0.3) !important;
    color: #6db89a !important;
}

body.dark-mode.green-mode .sidebar-module-item:hover,
body.dark-mode.green-mode .nav-link:hover {
    color: #6db89a !important;
}

body.dark-mode.green-mode .sidebar-module-icon {
    color: #6db89a !important;
}

body.dark-mode.green-mode .btn-custom-green,
body.dark-mode.green-mode .top-btn-filled,
body.dark-mode.green-mode .search-button,
body.dark-mode.green-mode .apply-btn,
body.dark-mode.green-mode .save-btn,
body.dark-mode.green-mode .btn-custom-save,
body.dark-mode.green-mode .btn-next,
body.dark-mode.green-mode .btn-reset,
body.dark-mode.green-mode .logout-confirm {
    background-color: #0D332D !important;
    border-color: #0D332D !important;
    color: #fff !important;
}

    body.dark-mode.green-mode .btn-custom-green:hover,
    body.dark-mode.green-mode .search-button:hover {
        background-color: #0a2924 !important;
    }

body.dark-mode.green-mode .pagination-buttons button.active,
body.dark-mode.green-mode .page-btn.active {
    background: #0D332D !important;
    border-color: #0D332D !important;
    color: #fff !important;
}

body.dark-mode.green-mode .pagination-buttons button {
    color: #6db89a !important;
    border-color: rgba(13,51,45,0.4) !important;
}

body.dark-mode.green-mode .download-link {
    color: #6db89a !important;
}

body.dark-mode.green-mode .bi-pencil-fill,
body.dark-mode.green-mode .bi-trash-fill,
body.dark-mode.green-mode .bi-arrow-right {
    color: #6db89a !important;
}

body.dark-mode.green-mode table.figma-table thead th {
    color: #6db89a !important;
    border-bottom-color: rgba(13,51,45,0.4) !important;
}

body.dark-mode.green-mode .custom-tab-nav .nav-tab {
    color: #6db89a !important;
    border-color: rgba(13,51,45,0.4) !important;
}

    body.dark-mode.green-mode .custom-tab-nav .nav-tab.active {
        background: #0D332D !important;
        border-color: #0D332D !important;
        color: #fff !important;
    }

body.dark-mode.green-mode .top-btn-outline,
body.dark-mode.green-mode .top-btn {
    color: #6db89a !important;
    border-color: #0D332D !important;
}

body.dark-mode.green-mode .filter-icon-btn,
body.dark-mode.green-mode .fullscreen-btn,
body.dark-mode.green-mode .fullscreen-wrapper-btn {
    color: #6db89a !important;
    border-color: #0D332D !important;
}

body.dark-mode.green-mode .fullscreen-wrapper-title,
body.dark-mode.green-mode .breadcrumb-item {
    color: #6db89a !important;
}

body.dark-mode.green-mode .drawer-header {
    color: #6db89a !important;
}

body.dark-mode.green-mode .step-circle {
    border-color: #0D332D !important;
    color: #6db89a !important;
}

body.dark-mode.green-mode .step-item.active .step-circle {
    background: #0D332D !important;
    color: #fff !important;
}

body.dark-mode.green-mode .step-line {
    background: #0D332D !important;
}

body.dark-mode.green-mode .rr-card,
body.dark-mode.green-mode .edit-card {
    border-left-color: #0D332D !important;
}

body.dark-mode.green-mode .edit-card-header {
    color: #6db89a !important;
}

body.dark-mode.green-mode .header-icon {
    color: #6db89a !important;
}

body.dark-mode.green-mode .theme-picker-item.active-theme {
    color: #6db89a !important;
}

body.dark-mode.green-mode .tree-checkbox:checked {
    background: #0D332D !important;
    border-color: #0D332D !important;
}

body.dark-mode.green-mode .tree-node-row.is-checked .tree-node-label {
    color: #6db89a !important;
}

body.dark-mode.green-mode .loader-text {
    color: #6db89a !important;
}

body.dark-mode.green-mode .load {
    background-color: #0D332D !important;
}

    body.dark-mode.green-mode .load::before {
        background-color: #9fc5be !important;
    }

/* ==========================================================
               DARK + COLOR COMBINED – FULL DARK BACKGROUND OVERRIDES
               Covers: dark+red, dark+ocean, dark+green
               ========================================================== */

body.dark-mode.red-mode .main-body,
body.dark-mode.ocean-mode .main-body,
body.dark-mode.green-mode .main-body {
    background: #131313 !important;
}

body.dark-mode.red-mode .dashboard-header,
body.dark-mode.ocean-mode .dashboard-header,
body.dark-mode.green-mode .dashboard-header,
body.dark-mode.red-mode footer,
body.dark-mode.ocean-mode footer,
body.dark-mode.green-mode footer {
    background: #131313 !important;
    border-color: #444 !important;
}

body.dark-mode.red-mode footer {
    color: #e8a09a !important;
}

body.dark-mode.ocean-mode footer {
    color: #90cdf4 !important;
}

body.dark-mode.green-mode footer {
    color: #6db89a !important;
}

body.dark-mode.red-mode .sidebar,
body.dark-mode.red-mode .sidebar-logo,
body.dark-mode.red-mode .sidebar-toggle,
body.dark-mode.ocean-mode .sidebar,
body.dark-mode.ocean-mode .sidebar-logo,
body.dark-mode.ocean-mode .sidebar-toggle,
body.dark-mode.green-mode .sidebar,
body.dark-mode.green-mode .sidebar-logo,
body.dark-mode.green-mode .sidebar-toggle {
    background: #111111 !important;
}

/* Table headers */
body.dark-mode.red-mode table.figma-table thead th,
body.dark-mode.red-mode table.figma-table thead th.actions-column {
    background: #2a1a1a !important;
    color: #e8a09a !important;
    border-bottom-color: rgba(192,57,43,0.4) !important;
}

body.dark-mode.ocean-mode table.figma-table thead th,
body.dark-mode.ocean-mode table.figma-table thead th.actions-column {
    background: #1a2a35 !important;
    color: #90cdf4 !important;
    border-bottom-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.green-mode table.figma-table thead th,
body.dark-mode.green-mode table.figma-table thead th.actions-column {
    background: #1a2a25 !important;
    color: #6db89a !important;
    border-bottom-color: rgba(13,51,45,0.4) !important;
}

/* Table body rows */
body.dark-mode.red-mode table.figma-table tbody tr,
body.dark-mode.ocean-mode table.figma-table tbody tr,
body.dark-mode.green-mode table.figma-table tbody tr {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

    body.dark-mode.red-mode table.figma-table tbody tr:hover,
    body.dark-mode.red-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(192,57,43,0.15) !important;
    }

    body.dark-mode.ocean-mode table.figma-table tbody tr:hover,
    body.dark-mode.ocean-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(0,119,182,0.15) !important;
    }

    body.dark-mode.green-mode table.figma-table tbody tr:hover,
    body.dark-mode.green-mode .figma-table tbody tr:hover .actions-column {
        background: rgba(13,51,45,0.25) !important;
    }

/* Actions column */
body.dark-mode.red-mode .actions-column,
body.dark-mode.red-mode table.figma-table thead th.actions-column {
    background: #2a1a1a !important;
}

body.dark-mode.ocean-mode .actions-column,
body.dark-mode.ocean-mode table.figma-table thead th.actions-column {
    background: #1a2a35 !important;
}

body.dark-mode.green-mode .actions-column,
body.dark-mode.green-mode table.figma-table thead th.actions-column {
    background: #1a2a25 !important;
}

/* Table container & wrapper */
body.dark-mode.red-mode .data-table-container,
body.dark-mode.red-mode .table-wrapper,
body.dark-mode.ocean-mode .data-table-container,
body.dark-mode.ocean-mode .table-wrapper,
body.dark-mode.green-mode .data-table-container,
body.dark-mode.green-mode .table-wrapper {
    background: #1e1e1e !important;
}

body.dark-mode.red-mode .data-table-container {
    border-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .data-table-container {
    border-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .data-table-container {
    border-color: rgba(13,51,45,0.4) !important;
}

/* Pagination */
body.dark-mode.red-mode .pagination-container {
    background: #2a1a1a !important;
    border-top-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .pagination-container {
    background: #1a2a35 !important;
    border-top-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .pagination-container {
    background: #1a2a25 !important;
    border-top-color: rgba(13,51,45,0.4) !important;
}

/* Search inputs in table header */
body.dark-mode.red-mode .data-table-header input,
body.dark-mode.ocean-mode .data-table-header input,
body.dark-mode.green-mode .data-table-header input {
    background: #131313 !important;
    color: #e0e0e0 !important;
}

body.dark-mode.red-mode .data-table-header input {
    border-color: rgba(192,57,43,0.4) !important;
}

body.dark-mode.ocean-mode .data-table-header input {
    border-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.green-mode .data-table-header input {
    border-color: rgba(13,51,45,0.4) !important;
}

/* All form inputs */
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode.red-mode input[type="search"],
body.dark-mode.ocean-mode input[type="search"],
body.dark-mode.green-mode input[type="search"] {
    background-color: #343638 !important;
    color: #e4e6eb !important;
}

body.dark-mode.red-mode .form-control,
body.dark-mode.red-mode .form-select,
body.dark-mode.red-mode input[type="text"],
body.dark-mode.red-mode input[type="number"],
body.dark-mode.red-mode input[type="email"],
body.dark-mode.red-mode input[type="password"],
body.dark-mode.red-mode input[type="date"],
body.dark-mode.red-mode textarea,
body.dark-mode.red-mode select,
body.dark-mode.ocean-mode .form-control,
body.dark-mode.ocean-mode .form-select,
body.dark-mode.ocean-mode input[type="text"],
body.dark-mode.ocean-mode input[type="number"],
body.dark-mode.ocean-mode input[type="email"],
body.dark-mode.ocean-mode input[type="password"],
body.dark-mode.ocean-mode input[type="date"],
body.dark-mode.ocean-mode textarea,
body.dark-mode.ocean-mode select,
body.dark-mode.green-mode .form-control,
body.dark-mode.green-mode .form-select,
body.dark-mode.green-mode input[type="text"],
body.dark-mode.green-mode input[type="number"],
body.dark-mode.green-mode input[type="email"],
body.dark-mode.green-mode input[type="password"],
body.dark-mode.green-mode input[type="date"],
body.dark-mode.green-mode textarea,
body.dark-mode.green-mode select {
    background-color: #131313 !important;
    color: #e0e0e0 !important;
}

body.dark-mode.red-mode .form-control,
body.dark-mode.red-mode input[type="text"],
body.dark-mode.red-mode input[type="date"] {
    border-color: rgba(192,57,43,0.4) !important;
}

body.dark-mode.ocean-mode .form-control,
body.dark-mode.ocean-mode input[type="text"],
body.dark-mode.ocean-mode input[type="date"] {
    border-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.green-mode .form-control,
body.dark-mode.green-mode input[type="text"],
body.dark-mode.green-mode input[type="date"] {
    border-color: rgba(13,51,45,0.4) !important;
}

/* Modals / panels / popups */
body.dark-mode.red-mode .modal-content-custom,
body.dark-mode.red-mode .rr-popup-modal,
body.dark-mode.red-mode .map-popup-modal,
body.dark-mode.red-mode .notification-panel,
body.dark-mode.red-mode .rbac-dropdown-panel,
body.dark-mode.red-mode .theme-picker-panel,
body.dark-mode.red-mode .customize-modal,
body.dark-mode.ocean-mode .modal-content-custom,
body.dark-mode.ocean-mode .rr-popup-modal,
body.dark-mode.ocean-mode .map-popup-modal,
body.dark-mode.ocean-mode .notification-panel,
body.dark-mode.ocean-mode .rbac-dropdown-panel,
body.dark-mode.ocean-mode .theme-picker-panel,
body.dark-mode.ocean-mode .customize-modal,
body.dark-mode.green-mode .modal-content-custom,
body.dark-mode.green-mode .rr-popup-modal,
body.dark-mode.green-mode .map-popup-modal,
body.dark-mode.green-mode .notification-panel,
body.dark-mode.green-mode .rbac-dropdown-panel,
body.dark-mode.green-mode .theme-picker-panel,
body.dark-mode.green-mode .customize-modal {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode.red-mode .modal-content-custom,
body.dark-mode.red-mode .notification-panel,
body.dark-mode.red-mode .rbac-dropdown-panel {
    border-color: rgba(192,57,43,0.25) !important;
}

body.dark-mode.ocean-mode .modal-content-custom,
body.dark-mode.ocean-mode .notification-panel,
body.dark-mode.ocean-mode .rbac-dropdown-panel {
    border-color: rgba(0,119,182,0.25) !important;
}

body.dark-mode.green-mode .modal-content-custom,
body.dark-mode.green-mode .notification-panel,
body.dark-mode.green-mode .rbac-dropdown-panel {
    border-color: rgba(13,51,45,0.3) !important;
}

/* Modal / notification headers */
body.dark-mode.red-mode .modal-header-draggable,
body.dark-mode.red-mode .notification-header,
body.dark-mode.red-mode .drawer-header,
body.dark-mode.red-mode .rr-header,
body.dark-mode.red-mode .map-header,
body.dark-mode.red-mode .modal-footer-custom {
    background: #2a1a1a !important;
    border-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .modal-header-draggable,
body.dark-mode.ocean-mode .notification-header,
body.dark-mode.ocean-mode .drawer-header,
body.dark-mode.ocean-mode .rr-header,
body.dark-mode.ocean-mode .map-header,
body.dark-mode.ocean-mode .modal-footer-custom {
    background: #1a2a35 !important;
    border-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .modal-header-draggable,
body.dark-mode.green-mode .notification-header,
body.dark-mode.green-mode .drawer-header,
body.dark-mode.green-mode .rr-header,
body.dark-mode.green-mode .map-header,
body.dark-mode.green-mode .modal-footer-custom {
    background: #1a2a25 !important;
    border-color: rgba(13,51,45,0.4) !important;
}

/* Notification search + cards */
body.dark-mode.red-mode .notification-search,
body.dark-mode.ocean-mode .notification-search,
body.dark-mode.green-mode .notification-search {
    background: #1a1a1a !important;
}

body.dark-mode.red-mode .notification-search {
    border-bottom-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .notification-search {
    border-bottom-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .notification-search {
    border-bottom-color: rgba(13,51,45,0.4) !important;
}

body.dark-mode.red-mode .notification-card,
body.dark-mode.ocean-mode .notification-card,
body.dark-mode.green-mode .notification-card {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode.red-mode .notification-card {
    border-color: rgba(192,57,43,0.25) !important;
}

body.dark-mode.ocean-mode .notification-card {
    border-color: rgba(0,119,182,0.25) !important;
}

body.dark-mode.green-mode .notification-card {
    border-color: rgba(13,51,45,0.3) !important;
}

/* Filter sidebar */
body.dark-mode.red-mode .filter-sidebar,
body.dark-mode.red-mode .filter-sidebar-inner,
body.dark-mode.red-mode .filter-actions {
    background: #2a1a1a !important;
    border-color: rgba(192,57,43,0.4) !important;
}

body.dark-mode.ocean-mode .filter-sidebar,
body.dark-mode.ocean-mode .filter-sidebar-inner,
body.dark-mode.ocean-mode .filter-actions {
    background: #1a2a35 !important;
    border-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.green-mode .filter-sidebar,
body.dark-mode.green-mode .filter-sidebar-inner,
body.dark-mode.green-mode .filter-actions {
    background: #1a2a25 !important;
    border-color: rgba(13,51,45,0.4) !important;
}

/* Filter / fullscreen headers */
body.dark-mode.red-mode .filter-header,
body.dark-mode.red-mode .fullscreen-header {
    background: #2a1a1a !important;
    border-bottom-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .filter-header,
body.dark-mode.ocean-mode .fullscreen-header {
    background: #1a2a35 !important;
    border-bottom-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .filter-header,
body.dark-mode.green-mode .fullscreen-header {
    background: #1a2a25 !important;
    border-bottom-color: rgba(13,51,45,0.4) !important;
}

/* Cards */
body.dark-mode.red-mode .edit-card,
body.dark-mode.red-mode .rr-card,
body.dark-mode.ocean-mode .edit-card,
body.dark-mode.ocean-mode .rr-card,
body.dark-mode.green-mode .edit-card,
body.dark-mode.green-mode .rr-card {
    background: #1e1e1e !important;
}

/* KPI / chart cards */
body.dark-mode.red-mode .kpi-card,
body.dark-mode.red-mode .chart-card,
body.dark-mode.ocean-mode .kpi-card,
body.dark-mode.ocean-mode .chart-card,
body.dark-mode.green-mode .kpi-card,
body.dark-mode.green-mode .chart-card {
    background: #1e1e1e !important;
}

body.dark-mode.red-mode .kpi-card,
body.dark-mode.red-mode .chart-card {
    border-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.ocean-mode .kpi-card,
body.dark-mode.ocean-mode .chart-card {
    border-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.green-mode .kpi-card,
body.dark-mode.green-mode .chart-card {
    border-color: rgba(13,51,45,0.4) !important;
}

/* mainclass dashboard container */
body.dark-mode.red-mode .mainclass {
    background: rgba(192,57,43,0.08) !important;
    border-color: rgba(192,57,43,0.25) !important;
}

body.dark-mode.ocean-mode .mainclass {
    background: rgba(0,119,182,0.08) !important;
    border-color: rgba(0,119,182,0.25) !important;
}

body.dark-mode.green-mode .mainclass {
    background: rgba(13,51,45,0.1) !important;
    border-color: rgba(13,51,45,0.3) !important;
}

/* RBAC dropdown items */
body.dark-mode.red-mode .rbac-menu-item,
body.dark-mode.ocean-mode .rbac-menu-item,
body.dark-mode.green-mode .rbac-menu-item {
    color: #e0e0e0 !important;
}

    body.dark-mode.red-mode .rbac-menu-item:hover,
    body.dark-mode.ocean-mode .rbac-menu-item:hover,
    body.dark-mode.green-mode .rbac-menu-item:hover {
        background: #2a2a2a !important;
    }

body.dark-mode.red-mode .rbac-divider,
body.dark-mode.ocean-mode .rbac-divider,
body.dark-mode.green-mode .rbac-divider {
    background: #333 !important;
}

/* Theme picker tabs */
body.dark-mode.red-mode .theme-mode-tabs,
body.dark-mode.ocean-mode .theme-mode-tabs,
body.dark-mode.green-mode .theme-mode-tabs {
    border-bottom-color: #333 !important;
}

body.dark-mode.red-mode .theme-mode-tab,
body.dark-mode.ocean-mode .theme-mode-tab,
body.dark-mode.green-mode .theme-mode-tab {
    background: #1a1a1a !important;
    color: #aaa !important;
}

    body.dark-mode.red-mode .theme-mode-tab.active,
    body.dark-mode.ocean-mode .theme-mode-tab.active,
    body.dark-mode.green-mode .theme-mode-tab.active {
        background: #252525 !important;
        color: #fff !important;
    }

/* Chrome swatch items */
body.dark-mode.red-mode .chrome-swatch-item:hover,
body.dark-mode.ocean-mode .chrome-swatch-item:hover,
body.dark-mode.green-mode .chrome-swatch-item:hover {
    background: #2a2a2a !important;
}

body.dark-mode.red-mode .chrome-swatch-label,
body.dark-mode.ocean-mode .chrome-swatch-label,
body.dark-mode.green-mode .chrome-swatch-label {
    color: #ccc !important;
}

/* MudBlazor dark overrides for combined modes */
body.dark-mode.red-mode .mud-input > input.mud-input-root-outlined,
body.dark-mode.ocean-mode .mud-input > input.mud-input-root-outlined,
body.dark-mode.green-mode .mud-input > input.mud-input-root-outlined,
body.dark-mode.red-mode div.mud-input-slot.mud-input-root-outlined,
body.dark-mode.ocean-mode div.mud-input-slot.mud-input-root-outlined,
body.dark-mode.green-mode div.mud-input-slot.mud-input-root-outlined {
    background-color: #131313 !important;
}

body.dark-mode.red-mode .mud-list,
body.dark-mode.ocean-mode .mud-list,
body.dark-mode.green-mode .mud-list {
    background: #343638 !important;
    color: #fff !important;
}

body.dark-mode.red-mode .mud-icon-button,
body.dark-mode.ocean-mode .mud-icon-button,
body.dark-mode.green-mode .mud-icon-button {
    color: white !important;
    background: #131313 !important;
}

body.dark-mode.red-mode .mud-icon-root,
body.dark-mode.ocean-mode .mud-icon-root,
body.dark-mode.green-mode .mud-icon-root {
    color: white !important;
}
/* Beat .table-component specificity in dark+color modes */

/* 🔴 DARK + RED */
body.dark-mode.red-mode .table-component table.figma-table thead th,
body.dark-mode.red-mode .table-component table.figma-table thead th.actions-column,
body.dark-mode.red-mode table.figma-table thead th,
body.dark-mode.red-mode table.figma-table thead th.actions-column {
    background: #2a1a1a !important;
    color: #e8a09a !important;
    border-bottom-color: rgba(192,57,43,0.4) !important;
}

/* 🌊 DARK + OCEAN */
body.dark-mode.ocean-mode .table-component table.figma-table thead th,
body.dark-mode.ocean-mode .table-component table.figma-table thead th.actions-column,
body.dark-mode.ocean-mode table.figma-table thead th,
body.dark-mode.ocean-mode table.figma-table thead th.actions-column {
    background: #1a2a35 !important;
    color: #90cdf4 !important;
    border-bottom-color: rgba(0,119,182,0.4) !important;
}

/* 🌿 DARK + GREEN */
body.dark-mode.green-mode .table-component table.figma-table thead th,
body.dark-mode.green-mode .table-component table.figma-table thead th.actions-column,
body.dark-mode.green-mode table.figma-table thead th,
body.dark-mode.green-mode table.figma-table thead th.actions-column {
    background: #1a2a25 !important;
    color: #6db89a !important;
    border-bottom-color: rgba(13,51,45,0.4) !important;
}

/* Also fix plain dark mode thead to use consistent dark tone */
body.dark-mode .table-component table.figma-table thead th,
body.dark-mode .table-component table.figma-table thead th.actions-column {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode.ocean-mode .filter-title {
    color: #90cdf4 !important;
}

body.dark-mode.green-mode .filter-title {
    color: #6db89a !important;
}

body.dark-mode.red-mode .filter-title {
    color: #e8a09a !important;
}
/* ==========================================================
       RR + MAP + IMAGE MODAL – DARK+COLOR: Consistent dark tints
       ========================================================== */

/* ── Modal bodies stay dark ── */
body.dark-mode.red-mode .rr-popup-modal,
body.dark-mode.ocean-mode .rr-popup-modal,
body.dark-mode.green-mode .rr-popup-modal,
body.dark-mode.red-mode .map-popup-modal,
body.dark-mode.ocean-mode .map-popup-modal,
body.dark-mode.green-mode .map-popup-modal,
body.dark-mode.red-mode .image-popup-modal,
body.dark-mode.ocean-mode .image-popup-modal,
body.dark-mode.green-mode .image-popup-modal {
    background: #343638 !important;
    border: none !important;
}

/* ── Content / body areas stay dark ── */
body.dark-mode.red-mode .rr-content,
body.dark-mode.ocean-mode .rr-content,
body.dark-mode.green-mode .rr-content,
body.dark-mode.red-mode .map-container,
body.dark-mode.ocean-mode .map-container,
body.dark-mode.green-mode .map-container,
body.dark-mode.red-mode .image-container,
body.dark-mode.ocean-mode .image-container,
body.dark-mode.green-mode .image-container {
    background: #1a1a1a !important;
}

/* ── Image toolbar stays dark ── */
body.dark-mode.red-mode .image-toolbar,
body.dark-mode.ocean-mode .image-toolbar,
body.dark-mode.green-mode .image-toolbar {
    background: #2a2a2a !important;
    border-bottom-color: #444 !important;
}

/* ── 🔴 RED – tinted headers ── */
body.dark-mode.red-mode .rr-header,
body.dark-mode.red-mode .map-header,
body.dark-mode.red-mode .image-header {
    background: #2a1a1a !important;
    border-bottom-color: rgba(192,57,43,0.4) !important;
}

/* ── 🌊 OCEAN – tinted headers ── */
body.dark-mode.ocean-mode .rr-header,
body.dark-mode.ocean-mode .map-header,
body.dark-mode.ocean-mode .image-header {
    background: #1a2a35 !important;
    border-bottom-color: rgba(0,119,182,0.4) !important;
}

/* ── 🌿 GREEN – tinted headers ── */
body.dark-mode.green-mode .rr-header,
body.dark-mode.green-mode .map-header,
body.dark-mode.green-mode .image-header {
    background: #1a2a25 !important;
    border-bottom-color: rgba(13,51,45,0.6) !important;
}

/* ── RR Cards – dark bg, themed strip ── */
body.dark-mode.red-mode .rr-card {
    background: #2a2a2a !important;
    border-left-color: #c0392b !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body.dark-mode.ocean-mode .rr-card {
    background: #2a2a2a !important;
    border-left-color: #0077b6 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

body.dark-mode.green-mode .rr-card {
    background: #2a2a2a !important;
    border-left-color: #0D332D !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

    /* ── RR Card text stays readable ── */
    body.dark-mode.red-mode .rr-card small,
    body.dark-mode.ocean-mode .rr-card small,
    body.dark-mode.green-mode .rr-card small {
        color: #9ca3af !important;
    }

    body.dark-mode.red-mode .rr-card b,
    body.dark-mode.ocean-mode .rr-card b,
    body.dark-mode.green-mode .rr-card b {
        color: #e5e7eb !important;
    }

body.dark-mode.red-mode .mod-header-custom h5 {
    color: #e8a09a !important;
}

/* 🌊 Dark + Ocean */
body.dark-mode.ocean-mode .mod-header-custom h5 {
    color: #90cdf4 !important;
}

/* 🌿 Dark + Green */
body.dark-mode.green-mode .mod-header-custom h5 {
    color: #6db89a !important;
}
/* ==========================================================
       MAP TOOLBAR + COORDINATES – DARK + ALL THEMES
       ========================================================== */

/* ── Plain dark mode ── */
body.dark-mode .map-toolbar {
    background: #2a2a2a !important;
    border-bottom-color: #444 !important;
}

body.dark-mode .coordinates-display {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #444 !important;
}

/* ── 🔴 RED ── */
body.red-mode .map-toolbar {
    border-bottom-color: rgba(192,57,43,0.2) !important;
}

body.red-mode .coordinates-display {
    background: rgba(192,57,43,0.06) !important;
    border: 1px solid rgba(192,57,43,0.2) !important;
    color: #9e2f25 !important;
}

/* ── 🌊 OCEAN ── */
body.ocean-mode .map-toolbar {
    border-bottom-color: rgba(0,119,182,0.2) !important;
}

body.ocean-mode .coordinates-display {
    background: rgba(0,119,182,0.06) !important;
    border: 1px solid rgba(0,119,182,0.2) !important;
    color: #023e8a !important;
}

/* ── 🌿 GREEN ── */
body.green-mode .map-toolbar {
    border-bottom-color: rgba(13,51,45,0.2) !important;
}

body.green-mode .coordinates-display {
    background: rgba(13,51,45,0.06) !important;
    border: 1px solid rgba(13,51,45,0.2) !important;
    color: #0D332D !important;
}

/* ── 🔴 DARK + RED ── */
body.dark-mode.red-mode .map-toolbar {
    border-bottom-color: rgba(192,57,43,0.4) !important;
}

body.dark-mode.red-mode .coordinates-display {
    background: #1a1a1a !important;
    border: 1px solid rgba(192,57,43,0.3) !important;
    color: #e8a09a !important;
}

/* ── 🌊 DARK + OCEAN ── */
body.dark-mode.ocean-mode .map-toolbar {
    border-bottom-color: rgba(0,119,182,0.4) !important;
}

body.dark-mode.ocean-mode .coordinates-display {
    background: #1a1a1a !important;
    border: 1px solid rgba(0,119,182,0.3) !important;
    color: #90cdf4 !important;
}

/* ── 🌿 DARK + GREEN ── */
body.dark-mode.green-mode .map-toolbar {
    border-bottom-color: rgba(13,51,45,0.6) !important;
}

body.dark-mode.green-mode .coordinates-display {
    background: #1a1a1a !important;
    border: 1px solid rgba(13,51,45,0.4) !important;
    color: #6db89a !important;
}
/* ==========================================================
           DRAWER – DARK MODE + ALL THEMES
           ========================================================== */

/* ── Plain dark mode ── */
body.dark-mode .drawer {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
    box-shadow: -4px 0 12px rgba(0,0,0,0.5) !important;
}

body.dark-mode .drawer-header {
    background: #2a2a2a !important;
    border-bottom-color: #444 !important;
    color: #AFCC6D !important;
}

    body.dark-mode .drawer-header h5 {
        color: #e0e0e0 !important;
    }

body.dark-mode .drawer-body {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

body.dark-mode .drawer .figma-table thead th {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
}

body.dark-mode .drawer .figma-table tbody tr {
    background: #1e1e1e !important;
    color: #e0e0e0 !important;
}

    body.dark-mode .drawer .figma-table tbody tr:hover {
        background: #2a2a2a !important;
    }

body.dark-mode .drawer .figma-table tbody td {
    color: #e0e0e0 !important;
    border-bottom-color: rgba(255,255,255,0.06) !important;
}

body.dark-mode .drawer .pagination-container {
    background: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-top-color: #444 !important;
}

body.dark-mode .drawer .pagination-buttons button {
    background: #333 !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

    body.dark-mode .drawer .pagination-buttons button.active {
        background: #94B44C !important;
        border-color: #94B44C !important;
        color: #fff !important;
    }

body.dark-mode .drawer .pagination-container select {
    background: #333 !important;
    border-color: #555 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .drawer-overlay {
    background: rgba(0,0,0,0.6) !important;
}

body.dark-mode .close-btn {
    color: #e0e0e0 !important;
}


/* ==========================================================
           DRAWER – 🌑+🔴 DARK + RED
           ========================================================== */
body.dark-mode.red-mode .drawer {
    background: #1e1e1e !important;
    border-left: 1px solid rgba(192,57,43,0.3) !important;
}

body.dark-mode.red-mode .drawer-header {
    background: #2a1a1a !important;
    border-bottom-color: rgba(192,57,43,0.4) !important;
    color: #e8a09a !important;
}

body.dark-mode.red-mode .drawer .pagination-container {
    background: #2a1a1a !important;
    border-top-color: rgba(192,57,43,0.3) !important;
}

body.dark-mode.red-mode .drawer .pagination-buttons button {
    color: #e8a09a !important;
    border-color: rgba(192,57,43,0.4) !important;
}

    body.dark-mode.red-mode .drawer .pagination-buttons button.active {
        background: #c0392b !important;
        border-color: #c0392b !important;
        color: #fff !important;
    }

/* ==========================================================
           DRAWER – 🌑+🌊 DARK + OCEAN
           ========================================================== */
body.dark-mode.ocean-mode .drawer {
    background: #1e1e1e !important;
    border-left: 1px solid rgba(0,119,182,0.3) !important;
}

body.dark-mode.ocean-mode .drawer-header {
    background: #1a2a35 !important;
    border-bottom-color: rgba(0,119,182,0.4) !important;
    color: #90cdf4 !important;
}

body.dark-mode.ocean-mode .drawer .pagination-container {
    background: #1a2a35 !important;
    border-top-color: rgba(0,119,182,0.3) !important;
}

body.dark-mode.ocean-mode .drawer .pagination-buttons button {
    color: #90cdf4 !important;
    border-color: rgba(0,119,182,0.4) !important;
}

    body.dark-mode.ocean-mode .drawer .pagination-buttons button.active {
        background: #0077b6 !important;
        border-color: #0077b6 !important;
        color: #fff !important;
    }

/* ==========================================================
           DRAWER – 🌑+🌿 DARK + GREEN
           ========================================================== */
body.dark-mode.green-mode .drawer {
    background: #1e1e1e !important;
    border-left: 1px solid rgba(13,51,45,0.4) !important;
}

body.dark-mode.green-mode .drawer-header {
    background: #1a2a25 !important;
    border-bottom-color: rgba(13,51,45,0.5) !important;
    color: #6db89a !important;
}

body.dark-mode.green-mode .drawer .pagination-container {
    background: #1a2a25 !important;
    border-top-color: rgba(13,51,45,0.4) !important;
}

body.dark-mode.green-mode .drawer .pagination-buttons button {
    color: #6db89a !important;
    border-color: rgba(13,51,45,0.4) !important;
}

    body.dark-mode.green-mode .drawer .pagination-buttons button.active {
        background: #0D332D !important;
        border-color: #0D332D !important;
        color: #fff !important;
    }