:root[data-theme="dark"] {
    /*MainLayout User Profile Down Arrow*/
    --mainlayout-icon-filter: brightness(0) invert(1);
    /*Invert Colors of SVG or Img*/
    --general-icon-filter: brightness(0) invert(1);
    /* App backgrounds */
    --bg-app: #151515;
    --bg-panel: #151515;
    --bg-panel-alt: #0f1416;
    /* Top header / dashboard bar (MATCH IMAGE) */
    --bg-header: #036F7D;
    --dashboard-bar-bg: #036F7D;
    --dashboard-text: #121719;
    --dashboard-border: #048A9C;
    --dashboard-border-hover: #04A6B8;
    --breadcrumb-bar-bg: #0C5363;
    /* Borders & text */
    --border-color: #3B3B3B;
    --text-primary: #e6f1f3;
    --text-secondary: #9fb6bb;
    --text-muted: #6f8a90;
    --text-inverse: #151515;
    /* Accents */
    --accent-primary: #14b8c4;
    --accent-secondary: #22d3ee;
    --accent-success: #22c55e;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    /* Cards */
    --card-shadow: 0 0 0 1px rgba(20,184,196,0.15);
    /* Charts */
    --chart-bg: #151515;
    --chart-axis-text: white;
    --chart-grid-line: rgba(255,255,255,0.08);
    --chart-series-green: #00e68a;
    /* Faults */
    --fault-divider: rgba(255, 255, 255);
    /* KPI */
    --kpi-row-bg: #121719;
    --kpi-value-color: #4dd0e1;
    --kpi-unit-color: #6fdbe6;
    --kpi-name-color: #4dd0e1;
    --kpi-range-color: #9fb6bb;
    /*RCA Page*/
    --rca-sidebar-bg: #228994;
    --rca-sidebar-text: #FFFFFF;
    --rca-right-sidebar-bg: #012A2F;
    --rca-right-sidebar-scroll: #017784 #008B8B;
    --rca-sidebar-select-bg: #FFFFFF;
    --rca-sidebar-select-text-color: black;
    --rca-sidebar-select-text-hover: black;
    --rca-active-fault: #FFAFB1;
    --rca-potential-fault: #FFD199;
    --rca-normal-fault: #87C0FF;
    --rca-active-symptom: #FFAFB1;
    --rca-inactive-symptom: #87C0FF;
    --rca-selected-node: #FF2020;
    --rca-node-text: #1E1E1E;
    --rca-symptom-node-text: #FFFFFF;
    --rca-bg: #0D0D0D;
    /* Footer */
    --footer-text: #9fb6bb; /* soft light text */
    --footer-bg: #151515; /* still transparent */
    /*Notifications*/
    --notification-border-color: #0D0D0D;
    --footer-bg: #0b0f10; /* still transparent */
    --breadcum-bar-text-color: #279CA9;
    /*Flowsheet*/
    --flowsheet-polyline-color: #FFFFFF;
    --flowsheet-right-sidebar-palette-bg: #ACF3FB;
    --flowsheet-right-sidebar-palette-text-color: #0D0D0D;
    --flowsheet-flow-tab-bg: #151515;
    /*Knowledge Hub*/
    --knowledge-hub-breadcrumb-text-color: #FFFFFF;
    --knowledge-hub-breadcrumb-svg: #FFFFFF;
    --knowledge-hub-tab-select: #228994;
    --knowledge-hub-tab-border-bottom: #97D4E2;
    --knowledge-hub-table-text: #DFDFDF;
    --knowledge-hub-table-link-text: #ACF3FB;
    --knowledge-hub-view-button: #ACF3FB;
    --knowledge-hub-view-button-text: black;
    --knowledge-hub-table-border-color: grey;
    --knowledge-hub-table-row-border-color: #343434;
    /*Third Party*/
    --third-party-hub-box-bg: #DEF2F7;
    --third-party-hub-table-header-color: #ACF3FB;
    --third-party-hub-table-row-border-color: #343434;
    /*Maintenance Work Flow*/
    --maintenance-work-flow-container-bg: #151515;
    --maintenance-work-flow-container-text: white;
    --maintenance-work-flow-event-data-bg: white;
    --maintenance-work-flow-event-data-text: #151515;
    --maintenance-work-flow-notes-header-bg: #151515;
    --maintenance-work-flow-notes-header-text: #7F7F80;
    --maintenance-work-flow-notes-bg: white;
    --maintenance-work-flow-button-bg: #FFFFFF;
    --maintenance-work-flow-button-text: #A3A3A3;
    --maintenance-work-flow-input-bg: #151515;
    --maintenance-work-flow-input-border: #4C4C4C;
    --maintenance-work-flow-input-text: #FFFFFF;
    --maintenance-work-flow-loader-bg: #151515;
    /*Model Config Page*/
    --model-config-header-text: #228994;
    --model-config-main-header-text: #0D0D0D;
    --model-config-sub-header-text: #279CA9;
    --model-config-sub-header-bg: #103840;
    --model-config-panel-bg: #151515;
    --model-config-panel-text: #FFFFFF;
    --model-config-panel-text-hover: #151515;
    --model-config-panel-border: #4C4C4C;
    --model-config-attribute-button-bg: #279CA9;
    --model-config-operator-button-bg: #103840;
    --model-config-operator-button-text-color: #ACF3FB;
    --model-config-validate-button-bg: #ACF3FB;
    --model-config-validate-button-text-color: #0D0D0D;
    --model-config-save-button-bg: #61BB9A;
    /*Fault Model Config Page*/
    --fault-model-config-header-text: #228994;
    --fault-model-config-sub-header-text: #0D0D0D;
    --fault-model-config-sub-mini-header-text: #ACF3FB;
    --fault-model-config-sub-mini-header-bg: #103840;
    --fault-model-config-panel-bg: #151515;
    --fault-model-config-tab-panel-bg: #151515;
    --fault-model-config-panel-text: #FFFFFF;
    --fault-model-config-panel-text-hover: #151515;
    --fault-model-config-input-text: #FFFFFF;
    --fault-model-config-input-border: #4C4C4C;
    --fault-model-config-drop-down-bg: #151515;
    /*Data Source Config Page*/
    --data-source-config-header-text: #0f7f8c;
    --data-source-config-bg: #151515;
    --data-source-config-svg-fill-color: #FFFFFF;
    --data-source-config-table-border-color: #343434;
    --data-source-config-right-sidebar-bg: #ACF3FB;
    --data-source-config-right-sidebar-form-input-bg: #0D0D0D;
    --data-source-config-right-sidebar-form-input-text-color: #FFFFFF;
    --data-source-config-right-sidebar-form-label-text-color: #0D0D0D;
    --data-source-config-right-sidebar-heading-text-color: #0D0D0D;
    --data-source-config-right-sidebar-form-checkbox-text-color: #0D0D0D;
    --data-source-config-right-sidebar-button-bg: #0D0D0D;
    --data-source-config-right-sidebar-button-text-color: #ACF3FB;
    --data-source-config-main-page-button-bg: #ACF3FB;
    --data-source-config-main-page-button-text-color: #0D0D0D;
    /*Bad Actors in Home Page*/
    --bad-actors-dropdown-bg: #151515;
    --bad-actors-dropdown-text: #FFFFFF;
    /*Asset Config Page*/
    --asset-class-description: black;
    --asset-class-tree: black;
    /*Calculation Status Page*/
    --calculation-status-header-text: #FFFFFF;
    --calculation-status-panel-bg: #151515;
    --calculation-status-border-inside-table: #343434;
    --calculation-status-drop-down-bg: #151515;
    --calculation-status-drop-down-text-color: #FFFFFF;
    --calculation-status-drop-down-color: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --calculation-status-table-border: white;
    /*trending page*/
    --trending-k-chart-overlay-color: black;
    --table-backgorund: #DEF2F7;
    --fault-field-background: #ffffff;
    --fault-text: black;
    --asset-model-icon: #279CA9;
    --attribute-grid-dropdown-br: #c9f1f8;
    --atribute-grid-dropdown-bg: #151515;
    --attribute-grid-dropdown-picker-br: #c9f1f8;
    --attribute-grid-dropdown-picker-bg: black;
    --attribute-grid-dropdown-text: #c9f1f8;
    --attribute-grid-dropdown-value-text: #ffffff;
    --attribute-grid-textarea-bg: black;
    --monitoring-dashboard-chart: #c9f1f8;
    /*ML Config*/
    --ml-config-button-bg: #ACF3FB;
    --ml-config-button-text-color: #0D0D0D;
    --ml-config-table-inside-row-border-color: #343434;
    --ml-config-table-inside-k-chip-text-color: black;
    --ml-config-table-inside-k-chip-bg: #279CA9;
    --sim-header: #c9f1f8;
    
}


/* ================= GLOBAL ================= */
html, body {
    background-color: var(--bg-app);
    color: var(--text-primary);
}

/* ================= TOP APP HEADER ================= */
.app-header {
    /* solid look like expected image (no dark gradient) */
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
}

/* ================= SIDEBAR ================= */
.sidebar {
    background-color: #070a0b;
    border-right: 1px solid var(--border-color);
}

.sidebar a {
    color: var(--text-secondary);
}

        .sidebar a.active,
        .sidebar a:hover {
            color: var(--accent-primary);
            background-color: rgba(20,184,196,0.08);
        }

/* ================= CARDS / PANELS ================= */
.card,
.panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--card-shadow);
}

/* ================= SECTION TITLES ================= */
.section-title {
    color: var(--accent-primary);
    font-weight: 600;
}

/* ================= KPI ================= */
.kpi-value {
    color: var(--accent-secondary);
    font-size: 1.6rem;
    font-weight: 700;
}

/* ================= ALERTS ================= */
.alert-critical {
    color: var(--accent-danger);
}

.alert-warning {
    color: var(--accent-warning);
}

.alert-info {
    color: var(--accent-secondary);
}

/* ================= TABLES ================= */
table {
    background-color: var(--bg-panel);
}

th {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

/* ================= INPUTS & DROPDOWNS ================= */
html[data-theme="dark"] select,
html[data-theme="dark"] input {
    background-color: #0e1517;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    html[data-theme="dark"] select:focus,
    html[data-theme="dark"] input:focus {
        outline: none;
        border-color: var(--accent-primary);
    }

/* ================= BUTTONS ================= */
.btn-primary {
    background-color: var(--accent-primary);
    color: #002b30;
    border: none;
}

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

/* ============================================ */
/* DARK THEME – LEFT SIDEBAR (TEXT COLOR MATCH) */
/* ============================================ */

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #050607 0%, #0b0f10 100%);
    border-right: 1px solid #1f2a2e;
}

/* Nav item container */
html[data-theme="dark"] .nav-scrollable .nav-item {
    background: transparent;
    border-radius: 10px;
    margin-bottom: 6px;
    position: relative;
}

/* =============================== */
/* TEXT & ICON COLOR (MATCHED)     */
/* =============================== */

html[data-theme="dark"] .nav-scrollable .nav-link {
    color: #ACF3FB;
    font-size: 0.78rem;
    font-weight: 500;
}

[data-theme="dark"] .nav-link {
    color: #eaeaea;
}

    [data-theme="dark"] .nav-link.active {
        color: #3c7f85; /* highlight color */
        font-weight: 600; /* optional */
    }
/*[data-theme="dark"] .ribbon .navbar-nav .nav-link img {*/
    /*    width: 25px;
    height: 25px;*/
    /*color: #c9f1f8;
}*/
/*html[data-theme="dark"] .nav-scrollable img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}*/
[data-theme="dark"]
.custom-datetimepicker {
    font-family: Inter;
    font-size: 0.7rem;
    height: 1.5rem !important;
    color: #044B53;
    background-color: #c9f1f8;
    font-weight: 800;
}

/* =============================== */
/* HOVER (NO COLOR CHANGE)         */
/* =============================== */
html[data-theme="dark"] .nav-scrollable .nav-item:hover {
    background-color: rgba(20,184,196,0.08);
}

    html[data-theme="dark"] .nav-scrollable .nav-item:hover .nav-link {
        color: #ACF3FB; /* keep same */
    }

/* ================================================= */
/* DARK MODE – DASHBOARD TOP FILTER BAR               */
/* Time Period | Unit | Area                          */
/* ================================================= */

html[data-theme="dark"] .dashboard-top {
    background-color: #036F7D; /* exact teal from image */
    padding: 8px 16px;
    display: flex;
    gap: 14px;
    align-items: center;
    color: #0D0D0D !important;
}

    /* Labels */
    html[data-theme="dark"] .dashboard-top label {
        color: #0D0D0D !important;
        font-size: 0.8rem;
        font-weight: 400;
    }

    /* Telerik dropdown input */
    html[data-theme="dark"] .dashboard-top .k-dropdown,
    html[data-theme="dark"] .dashboard-top .k-picker {
        background-color: #036F7D !important;
        border: 1px solid #0F97A8 !important;
        border-radius: 4px;
    }

    /* Dropdown text */
    html[data-theme="dark"] .dashboard-top .k-input-inner {
        color: #0D0D0D !important;
        font-size: 0.7rem;
    }

    /* Dropdown arrow */
    html[data-theme="dark"] .dashboard-top .k-icon {
        color: #0D0D0D !important;
    }

    /* Hover state */
    html[data-theme="dark"] .dashboard-top .k-dropdown:hover,
    html[data-theme="dark"] .dashboard-top .k-picker:hover {
        border-color: #22d3ee !important;
    }

/* Open popup list */
html[data-theme="dark"] .k-animation-container .k-list {
    background-color: #036F7D !important;
    color: #0D0D0D !important;
}

/* Popup list item */
html[data-theme="dark"] .k-list .k-item {
    color: #0D0D0D !important;
    font-size: 0.65rem;
}

    /* Hovered item */
    html[data-theme="dark"] .k-list .k-item:hover {
        background-color: #036F7D !important;
        border-left: 3px solid #22d3ee;
    }





/*todo menu*/

/* ================================================= */
/* DARK THEME – TODO LIST (EXPANDED STATE)           */
/* Matches dashboard table colors                   */
/* ================================================= */

html[data-theme="dark"] .todo-container {
    background-color: #343434;
    border: 1px solid black;
    /*    border-radius: 6px;*/
    overflow: hidden;
    color: #ACF3FB !important;
}

/* Header */
html[data-theme="dark"] .todo-header {
    background-color: #025964;
    color: #ACF3FB;
    /*    padding: 10px 14px;*/
    /*    font-weight: 600;*/
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Arrow */
html[data-theme="dark"] .todo-arrow {
    color: #ACF3FB;
}

html[data-theme="dark"] .fault-name-text {
    color: #ACF3FB;
}

html[data-theme="dark"] .k-table-tbody {
    color: #ACF3FB;
}

/* Expanded dropdown body */
html[data-theme="dark"] .todo-dropdown {
    background-color: #0b0f10;
    border-top: 1px solid black;
    color: #ACF3FB;
    /*    padding: 8px 12px;*/
}

    /* Table inside To-Do */
    html[data-theme="dark"] .todo-dropdown table {
        /*        width: 100%;*/
        border-collapse: collapse;
        background: #343434;
        color: #ACF3FB;
    }

    /* Rows */
    html[data-theme="dark"] .todo-dropdown tr {
        border-bottom: 1px solid black;
        color: #ACF3FB;
    }

    /* Cells */
    html[data-theme="dark"] .todo-dropdown td {
        /*        padding: 8px 10px;*/
        /*        font-size: 0.75rem;*/
        color: #ACF3FB;
        border: 1px solid black;
    }

    /* Hover like dashboard table */
    html[data-theme="dark"] .todo-dropdown tr:hover {
        background-color: rgba(15,151,168,0.08);
        color: #ACF3FB;
    }

/* Any secondary text */
/* Grid container */
/*html[data-theme="dark"] .k-grid {
    background-color: #1e1e1e;*/
    /*    color: #eaeaea;*/
    /*color: #c9f1f8;
}*/

    /* Grid table */
   /*html[data-theme="dark"] .k-grid .k-table {
        background-color: #1e1e1e;
    }*/

    /* Grid rows */
    /*html[data-theme="dark"] .k-grid .k-table-tbody .k-table-row {
        background-color: #1e1e1e;
        color: #c9f1f8;
    }*/

    /* Alternate rows */
    /*html[data-theme="dark"] .k-grid .k-table-tbody .k-alt {
        background-color: #252525;
    }*/

    /* Grid cells */
html[data-theme="dark"] .k-grid .k-table-td {
    background-color: var(--bg-app);
    color: #c9f1f8;
    border-color: var(--bg-app);
}


/*html[data-theme="dark"] .k-grid-header,
html[data-theme="dark"] .k-grid-header .k-table-th {
    background-color: #c9f1f8;
    color: #044B53;
}*/

    /* Sortable header links */
    html[data-theme="dark"] .k-grid-header .k-link {
        background-color: #c9f1f8;
        color: #044B53;
    }

html[data-theme="dark"] .rounded-label {
    color: #036F7D;
    font-size: 1.75rem;
}
html[data-theme="dark"] .RoundedBorderSelect {
    background-color: var(--bg-app);
    border: 1px solid #555555;
}
html[data-theme="dark"] .unit-index-graph {
    color: var(--bg-app);
}
html[data-theme="dark"] .unit-index-chart {
    /*    color: white;*/
    background-color: var(--bg-app);
}
[data-theme="dark"] .k-chart {
    background-color: var(--bg-app);
}
    [data-theme="dark"] .k-chart .k-chart-area {
        background-color: var(--bg-app);
    }
    html[data-theme="dark"] .k-chart .k-axis-label,
    [data-theme="dark"] .k-chart .k-axis-label text {
        fill: white !important;
    }
html[data-theme="dark"] .k-chart svg text {
    fill: white;
}

   html[data-theme="dark"] .k-chart > svg > g > path[fill="#ffffff"] {
        fill: black;
    }
[data-theme="dark"] .k-chart .k-radar svg line,
[data-theme="dark"] .k-chart .k-radar svg path {
    stroke: #9aa0a6;
}
html[data-theme="dark"] .pie-chart {
    background-color: black;
}
html[data-theme="dark"] .pie-chartb {
    background-color: black;
}
html[data-theme="dark"] .k-no-data {
    background-color: black;
}
    html [data-theme="dark"] .k-button-solid-base {
    background-color: #c9f1f8;
}
[data-theme="dark"] .labeltext {
    background-color: white;
}
/*[data-theme="dark"] .dropdownfault {
    background-color: white;
}*/
html[data-theme="dark"] .limit-group-list {
    background-color: #044B53;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
    font: 600;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
html[data-theme="dark"] .limit-group {
    color: #c9f1f8;
    font-size: 1rem;
}
/*[data-theme="dark"] .headernamelabel {
    color: var(--bg-app);
    font-weight: 700;
}*/

[data-theme="dark"] .shift-heading {
    font-weight: bold;
    font-size: 1rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: 1rem;
    margin-top: -1rem;
    color: white;
}
html[data-theme="dark"] .summary-container {
    background-color: black;
}
html[data-theme="dark"] .k-pager {
    background-color: black;
    color: aqua;
}
html[data-theme="dark"] .radar-charts {
    background-color: black;
}
html[data-theme="dark"] .radar-legend-style {
    background-color: black;
}
html[data-theme="dark"] .bar-chart {
    background-color: black;
}

html[data-theme="dark"] .dashboard-header {
    background-color: black !important;
}
html[data-theme="dark"] .tabkbutton {
    background-color: black !important;
}
html[data-theme="dark"] .limit-group-header {
    display: flex;
    background-color: #044B53;
    padding: 10px;
    font: 600;
    color: #c9f1f8;
    font-size: 1rem;
    width: 100%;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
html[data-theme="dark"] .select-area
 {
    background-color: black;
    color: white;
}
html[data-theme="dark"]
.sort-select {
    background-color: black;
    color: white;
}

[data-theme="dark"] .no-arrow .k-input-button {
    color: black;
    background-color: lightgrey;
}
[data-theme="dark"] .custom-combo .k-input-button {
    color: black;
    background-color: lightgrey;
}
[data-theme="dark"] .custom-datetimepicker .k-input-button {
    background-color: #c9f1f8;
}

[data-theme="dark"] .k-treeview {
    color: white;
}
[data-theme="dark"] .form-input {
    color: white;
    
}
[data-theme="dark"] .form-label {
    color: white;
}
html[data-theme="dark"] .custombox  {
    color: white;
    background-color: black;
}
html[data-theme="dark"] .tree-container {
    background-color: black;
    color: white;
    scrollbar-color: #888 black;
}

.k-treeview-leaf-text {
    color: var(--model-config-panel-text);
}

[data-theme="dark"] .regularFont {
    color: black;
    background-color: white;
}
html[data-theme="dark"] .Leftside {
    background-color: black;
}
html[data-theme="dark"] .asset-attribute-popup .k-window-titlebar {
    background-color: white;
}
html[data-theme="dark"] .asset-attribute-table  {
    background-color: white;
}

/* Switch track (background) */
.switch.k-switch,
.switch .k-switch-track {
    background-color: #97D4E2 !important;
    border-radius:20px;
}

/* Switch thumb (circle) */
.switch .k-switch-thumb {
    background-color: #000000 !important;
}

/* When switch is ON */
.switch.k-switch.k-switch-on .k-switch-track {
    background-color: #172C2F !important;
}

/* Remove default Telerik shadow/border */
.switch .k-switch-thumb {
    box-shadow: none !important;
    border: none !important;
}


/* ===============================
   Dark Theme – Input Fields
   =============================== */

html[data-theme="dark"] .k-input,
html[data-theme="dark"] .k-input-inner,
html[data-theme="dark"] .k-dropdown-wrap,
html[data-theme="dark"] .k-combobox,
html[data-theme="dark"] .k-dropdownlist {
    background-color: #0D0D0D !important;
    color: #DBDBDB !important;
    border-color: #333333 !important;
}

    /* Placeholder text */
    html[data-theme="dark"] .k-input::placeholder,
    html[data-theme="dark"] .k-input-inner::placeholder {
        color: #8A8A8A !important;
    }

/* Selected value text */
html[data-theme="dark"] .k-input-value-text {
    color: #DBDBDB !important;
}

/* Dropdown arrow icon */
html[data-theme="dark"] .k-select {
    background-color:lightsteelblue;
    color: #DBDBDB !important;
}

/*k-chart-overlay k-chart-overlay-top,*/
/*trendig page*/
html[data-theme="dark"] .k-chart-overlay {
    background-color: var(--trending-k-chart-overlay-color);
    color: white !important;
}

html[data-theme="dark"] .alert-dialog {
    background-color: #DEF2F7;
}

html[data-theme="dark"] .alert-dialog .custom-dialog-title {
    color: black;
}

/* dark-theme.css
   Override assethealth image for dark theme.
   Supports a .theme-dark body class and user preference media query.
*/
[data-theme="dark"] .nav-icon {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 0px;
}

[data-theme="dark"] .nav-icon-rishi {
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px;
}

/* If your app toggles a root class on <body> (e.g. <body class="theme-dark">) */
[data-theme="dark"] .nav-icon.assethealth {
    background-image: url('/images/Layout/assethealthdark.svg');
}

[data-theme="dark"] .nav-icon-rishi.rishilogo {
    background-image: url('/images/logodark.svg');
}

[data-theme="dark"] .nav-icon.flownetworkoverview {
    background-image: url('/images/Layout/performancedark.svg');
}

[data-theme="dark"] .nav-icon.unithealth {
    background-image: url('/images/Layout/unithealthdark.svg');
}

[data-theme="dark"] .nav-icon.rca {
    background-image: url('/images/Layout/rcadark.svg');
}

[data-theme="dark"] .nav-icon.knowledgehub {
    background-image: url('/images/Layout/knowledgehubdark.svg');
    }
[data-theme="dark"] .nav-icon.alarm {
    background-image: url('/images/Layout/alarmdark.svg');
}
[data-theme="dark"] .nav-icon.shiftmgmt {
    background-image: url('/images/Layout/shiftmgmtdark.svg');
}



/* Highlight entire box when link is active */
html[data-theme="dark"] .nav-scrollable .nav-item:has(.nav-link.active) {
    background-color: #044B53;
    border-radius: 6px;
    font-weight: 600;
}
/* Make text white when active */
[data-theme="dark"] .nav-scrollable .nav-item:has(.nav-link.active) .nav-link {
        color: #fff !important; /* Force white */
    }
/* Make the icon white when active */
[data-theme="dark"] .nav-scrollable .nav-item:has(.nav-link.active) img {
    filter: brightness(0) invert(1);
}

[data-theme="dark"] .nav-scrollable .nav-item ::deep a {
    white-space: normal;
    line-height: 1.05;
    font-size: 0.75rem; /* slightly smaller */
    text-align: center;
}

/* Dark theme: help icon */
[data-theme="dark"] .nav-icon.help {
    background-image: url('/images/Layout/HelpDark.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Fallback to respect OS/browser preference when no explicit data-theme is set */
@media (prefers-color-scheme: dark) {
    .nav-icon.help {
        background-image: url('/images/Layout/HelpDark.svg');
    }
}