/* ===== AssortStudio Theme Variables ===== */
:root[data-theme="light"] {
    --bg-primary: #f8f9fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f3f5;
    --bg-hover: #e9ecef;
    --border-color: #dee2e6;
    --border-light: #e9ecef;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #868e96;
    --accent: #4263eb;
    --accent-hover: #3b5bdb;
    --accent-light: #edf2ff;
    --success: #2b8a3e;
    --success-light: #ebfbee;
    --error: #c92a2a;
    --error-light: #fff5f5;
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #d4d8dd;
}

:root[data-theme="dark"] {
    --bg-primary: #1a1b1e;
    --bg-secondary: #25262b;
    --bg-tertiary: #2c2e33;
    --bg-hover: #373a40;
    --border-color: #373a40;
    --border-light: #2c2e33;
    --text-primary: #c1c2c5;
    --text-secondary: #909296;
    --text-muted: #5c5f66;
    --accent: #5c7cfa;
    --accent-hover: #4c6ef5;
    --accent-light: rgba(92, 124, 250, 0.12);
    --success: #51cf66;
    --success-light: rgba(81, 207, 102, 0.1);
    --error: #ff6b6b;
    --error-light: rgba(255, 107, 107, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #3a3d43;
}

:root[data-theme="forest"] {
    --bg-primary: #1a2f1a;
    --bg-secondary: #2d4a2d;
    --bg-tertiary: #3a5a3a;
    --bg-hover: #4a6a4a;
    --border-color: #4a6a4a;
    --border-light: #3a5a3a;
    --text-primary: #d4e8d4;
    --text-secondary: #b0d4b0;
    --text-muted: #8ca68c;
    --accent: #52c41a;
    --accent-hover: #45a80c;
    --accent-light: rgba(82, 196, 26, 0.15);
    --success: #52c41a;
    --success-light: rgba(82, 196, 26, 0.1);
    --error: #ff4d4f;
    --error-light: rgba(255, 77, 79, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #4a7a4a;
}

:root[data-theme="ocean"] {
    --bg-primary: #0f2644;
    --bg-secondary: #1a3a52;
    --bg-tertiary: #244a66;
    --bg-hover: #2d5a7a;
    --border-color: #2d5a7a;
    --border-light: #244a66;
    --text-primary: #c5e4f7;
    --text-secondary: #a0c8e8;
    --text-muted: #7aabdb;
    --accent: #1890ff;
    --accent-hover: #0050b3;
    --accent-light: rgba(24, 144, 255, 0.15);
    --success: #13c2c2;
    --success-light: rgba(19, 194, 194, 0.1);
    --error: #ff4d4f;
    --error-light: rgba(255, 77, 79, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #2d5978;
}

:root[data-theme="sunset"] {
    --bg-primary: #3d1f1f;
    --bg-secondary: #5a2e2e;
    --bg-tertiary: #6d3838;
    --bg-hover: #804545;
    --border-color: #804545;
    --border-light: #6d3838;
    --text-primary: #f5d9d0;
    --text-secondary: #f0c4b8;
    --text-muted: #e8b3a0;
    --accent: #ff7a45;
    --accent-hover: #ff5722;
    --accent-light: rgba(255, 122, 69, 0.15);
    --success: #ff9c6e;
    --success-light: rgba(255, 156, 110, 0.1);
    --error: #ff4d4f;
    --error-light: rgba(255, 77, 79, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #7a5050;
}

:root[data-theme="dracula"] {
    --bg-primary: #282a36;
    --bg-secondary: #21222c;
    --bg-tertiary: #323445;
    --bg-hover: #44475a;
    --border-color: #44475a;
    --border-light: #323445;
    --text-primary: #f8f8f2;
    --text-secondary: #f1f1f0;
    --text-muted: #bd93f9;
    --accent: #ff79c6;
    --accent-hover: #ff68b6;
    --accent-light: rgba(255, 121, 198, 0.15);
    --success: #50fa7b;
    --success-light: rgba(80, 250, 123, 0.1);
    --error: #ff5555;
    --error-light: rgba(255, 85, 85, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #40455a;
}

:root[data-theme="nord"] {
    --bg-primary: #2e3440;
    --bg-secondary: #3b4252;
    --bg-tertiary: #434c5e;
    --bg-hover: #4c566a;
    --border-color: #4c566a;
    --border-light: #434c5e;
    --text-primary: #eceff4;
    --text-secondary: #d8dee9;
    --text-muted: #81a1c1;
    --accent: #88c0d0;
    --accent-hover: #81a1c1;
    --accent-light: rgba(136, 192, 208, 0.15);
    --success: #a3be8c;
    --success-light: rgba(163, 190, 140, 0.1);
    --error: #bf616a;
    --error-light: rgba(191, 97, 106, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #5a6378;
}

:root[data-theme="lavender"] {
    --bg-primary: #2d1f3d;
    --bg-secondary: #3d2d52;
    --bg-tertiary: #4a3a66;
    --bg-hover: #5a4a7a;
    --border-color: #5a4a7a;
    --border-light: #4a3a66;
    --text-primary: #e8d8f0;
    --text-secondary: #d8c8e8;
    --text-muted: #b8a8d8;
    --accent: #b78eef;
    --accent-hover: #a773e8;
    --accent-light: rgba(183, 142, 239, 0.15);
    --success: #8ec65d;
    --success-light: rgba(142, 198, 93, 0.1);
    --error: #ff6b8a;
    --error-light: rgba(255, 107, 138, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #6a5a7a;
}

:root[data-theme="midnight"] {
    --bg-primary: #0a0e27;
    --bg-secondary: #16213e;
    --bg-tertiary: #1f2d52;
    --bg-hover: #283d6a;
    --border-color: #283d6a;
    --border-light: #1f2d52;
    --text-primary: #cfe3fc;
    --text-secondary: #b0c4f7;
    --text-muted: #6b9eff;
    --accent: #00d4ff;
    --accent-hover: #00b8e6;
    --accent-light: rgba(0, 212, 255, 0.15);
    --success: #52d77a;
    --success-light: rgba(82, 215, 122, 0.1);
    --error: #ff6b8a;
    --error-light: rgba(255, 107, 138, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #2d445a;
}

:root[data-theme="monokai"] {
    --bg-primary: #272822;
    --bg-secondary: #3e3d32;
    --bg-tertiary: #49483e;
    --bg-hover: #575850;
    --border-color: #575850;
    --border-light: #49483e;
    --text-primary: #f8f8f2;
    --text-secondary: #e6db74;
    --text-muted: #a6e22e;
    --accent: #66d9ef;
    --accent-hover: #5fd9ec;
    --accent-light: rgba(102, 217, 239, 0.15);
    --success: #a6e22e;
    --success-light: rgba(166, 226, 46, 0.1);
    --error: #f92672;
    --error-light: rgba(249, 38, 114, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #565450;
}

:root[data-theme="solarized"] {
    --bg-primary: #002b36;
    --bg-secondary: #073642;
    --bg-tertiary: #586e75;
    --bg-hover: #657b83;
    --border-color: #657b83;
    --border-light: #586e75;
    --text-primary: #93a1a1;
    --text-secondary: #839496;
    --text-muted: #657b83;
    --accent: #268bd2;
    --accent-hover: #0283ca;
    --accent-light: rgba(38, 139, 210, 0.15);
    --success: #859900;
    --success-light: rgba(133, 153, 0, 0.1);
    --error: #dc322f;
    --error-light: rgba(220, 50, 47, 0.1);
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-heavy: rgba(0, 0, 0, 0.5);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #708090;
}

:root[data-theme="cream"] {
    --bg-primary: #faf6f0;
    --bg-secondary: #fff8ee;
    --bg-tertiary: #f0ebe3;
    --bg-hover: #e6ddd0;
    --border-color: #d9cdbf;
    --border-light: #e6ddd0;
    --text-primary: #3d3229;
    --text-secondary: #5c4f3d;
    --text-muted: #8a7b66;
    --accent: #c27d38;
    --accent-hover: #a86a2d;
    --accent-light: rgba(194, 125, 56, 0.12);
    --success: #5a8a3e;
    --success-light: rgba(90, 138, 62, 0.1);
    --error: #b33a3a;
    --error-light: rgba(179, 58, 58, 0.08);
    --shadow: rgba(60, 40, 20, 0.08);
    --shadow-heavy: rgba(60, 40, 20, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #d9d0c0;
}

:root[data-theme="sky"] {
    --bg-primary: #eef5fb;
    --bg-secondary: #f5f9ff;
    --bg-tertiary: #dfe9f5;
    --bg-hover: #ccdcec;
    --border-color: #b8cfe0;
    --border-light: #ccdcec;
    --text-primary: #1e3a5c;
    --text-secondary: #3a5a7c;
    --text-muted: #6a8aaa;
    --accent: #2e7dbf;
    --accent-hover: #1a6aac;
    --accent-light: rgba(46, 125, 191, 0.12);
    --success: #2a8a5e;
    --success-light: rgba(42, 138, 94, 0.1);
    --error: #c03030;
    --error-light: rgba(192, 48, 48, 0.08);
    --shadow: rgba(20, 40, 70, 0.08);
    --shadow-heavy: rgba(20, 40, 70, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #c8dce8;
}

:root[data-theme="mint"] {
    --bg-primary: #eef7f3;
    --bg-secondary: #f4fbf8;
    --bg-tertiary: #dff0e8;
    --bg-hover: #cce5d9;
    --border-color: #b3d9c8;
    --border-light: #cce5d9;
    --text-primary: #1a3d2e;
    --text-secondary: #2d5c46;
    --text-muted: #5a8a73;
    --accent: #1a9e6a;
    --accent-hover: #148a5a;
    --accent-light: rgba(26, 158, 106, 0.12);
    --success: #1a8a55;
    --success-light: rgba(26, 138, 85, 0.1);
    --error: #c03838;
    --error-light: rgba(192, 56, 56, 0.08);
    --shadow: rgba(15, 40, 30, 0.08);
    --shadow-heavy: rgba(15, 40, 30, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #c6e5d8;
}

:root[data-theme="rose"] {
    --bg-primary: #fbf0f2;
    --bg-secondary: #fff5f7;
    --bg-tertiary: #f2e0e4;
    --bg-hover: #e8d0d6;
    --border-color: #dbbfc8;
    --border-light: #e8d0d6;
    --text-primary: #3d1f28;
    --text-secondary: #5c3040;
    --text-muted: #8a5a6a;
    --accent: #c44d6e;
    --accent-hover: #aa3d5e;
    --accent-light: rgba(196, 77, 110, 0.12);
    --success: #4a8a5e;
    --success-light: rgba(74, 138, 94, 0.1);
    --error: #b33030;
    --error-light: rgba(179, 48, 48, 0.08);
    --shadow: rgba(60, 20, 30, 0.08);
    --shadow-heavy: rgba(60, 20, 30, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #dccdd4;
}

:root[data-theme="sand"] {
    --bg-primary: #f5f0e8;
    --bg-secondary: #faf7f0;
    --bg-tertiary: #e8e0d4;
    --bg-hover: #dcd2c2;
    --border-color: #cfc2ad;
    --border-light: #dcd2c2;
    --text-primary: #33291a;
    --text-secondary: #524430;
    --text-muted: #7a6b52;
    --accent: #8a6d3b;
    --accent-hover: #755b2e;
    --accent-light: rgba(138, 109, 59, 0.12);
    --success: #5a7a3e;
    --success-light: rgba(90, 122, 62, 0.1);
    --error: #a83030;
    --error-light: rgba(168, 48, 48, 0.08);
    --shadow: rgba(50, 35, 15, 0.08);
    --shadow-heavy: rgba(50, 35, 15, 0.15);
    --cluster-divider-color: #000000;
    --dialog-titlebar-bg: #d4d0c4;
}

/* ===== Theme Application Rules ===== */

/* Variable Documentation:
   - --cluster-divider-color: Color for heatmap dendrogram cluster separators (set to #000000 for all themes)
     Used in canvas context.strokeStyle when drawing dendrogram column/row borders
   - --dialog-titlebar-bg: Background color for dialog title bars and nav tabs (darker for light themes, lighter for dark themes)
     Provides better contrast than --bg-tertiary
*/

html[data-theme] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* jQuery UI Dialogs */
html[data-theme] .ui-dialog {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-theme] .ui-dialog .ui-dialog-titlebar {
    background: var(--dialog-titlebar-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme] .ui-dialog .ui-dialog-title {
    color: var(--text-primary) !important;
}

html[data-theme] .ui-dialog .ui-dialog-content {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .ui-dialog .ui-dialog-buttonpane {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Bootstrap Modals */
html[data-theme] .modal-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] .modal-header {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme] .modal-header .close {
    color: var(--text-muted);
    opacity: 0.8;
}

html[data-theme] .modal-body {
    color: var(--text-primary);
}

html[data-theme] .modal-footer {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Bootstrap Nav Tabs — see stronger rules at bottom of file */

/* Dropdown Menus — see stronger rules at bottom of file */

/* Navbar */
html[data-theme] .navbar-default {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-theme] .navbar-default .navbar-nav > li > a {
    color: var(--text-secondary);
}

html[data-theme] .navbar-default .navbar-nav > li > a:hover {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}

html[data-theme] .navbar-default .navbar-brand {
    color: var(--text-primary);
}

/* Form Controls */
html[data-theme] .form-control {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-light);
}

html[data-theme] select.form-control {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Buttons */
html[data-theme] .btn-default {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] .btn-default:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] .btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

html[data-theme] .btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Tables */
html[data-theme] .table {
    color: var(--text-primary);
}

html[data-theme] .table > thead > tr > th {
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme] .table > tbody > tr > td {
    border-color: var(--border-light);
    color: var(--text-primary);
}

html[data-theme] .table-condensed > tbody > tr:hover > td {
    background-color: var(--bg-hover);
}

/* Toolbar / Menu Bar */
html[data-theme] .treeMapR-tab-header {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

html[data-theme] .treeMapR-toolbar-menu > ul > li > a,
html[data-theme] .treeMapR-toolbar-menu > ul > li > button {
    color: var(--text-primary);
}

html[data-theme] .treeMapR-toolbar-menu > ul > li > a:hover,
html[data-theme] .treeMapR-toolbar-menu > ul > li > button:hover {
    background-color: var(--bg-hover);
}

/* Track Headers */
html[data-theme] .treeMapR-track-header {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Metrics Dialog Content */
html[data-theme] .m-row {
    color: var(--text-primary);
}

html[data-theme] .m-row font {
    color: var(--text-primary) !important;
}

html[data-theme] .m-lbl {
    color: var(--text-secondary);
}

html[data-theme] .m-val {
    color: var(--text-primary);
}

/* Metrics cut dialog (override hardcoded bg/color with !important) */
html[data-theme] .treeMapR-cut-dialog {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .treeMapR-cut-dialog font {
    color: var(--text-primary) !important;
}

html[data-theme] .treeMapR-cut-dialog b font {
    color: var(--text-primary) !important;
}

/* Tip dialog (Assortment Criteria, etc. - override hardcoded bg/color with !important) */
html[data-theme] .treeMapR-tip-dialog {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Form inputs inside themed dialogs */
html[data-theme] .ui-dialog input[type="text"],
html[data-theme] .ui-dialog input[type="number"],
html[data-theme] .ui-dialog select,
html[data-theme] .ui-dialog textarea,
html[data-theme] .form-control {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dialog buttons */
html[data-theme] .ui-dialog .btn,
html[data-theme] .ui-dialog button:not(.ui-dialog-titlebar-close) {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Labels */
html[data-theme] label {
    color: var(--text-primary);
}

/* Checkbox and form-group text */
html[data-theme] .form-group label,
html[data-theme] .checkbox label {
    color: var(--text-primary);
}

/* Panels */
html[data-theme] .panel {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

html[data-theme] .panel-heading {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Scroll bars for dark themes */
html[data-theme="dark"] ::-webkit-scrollbar,
html[data-theme="forest"] ::-webkit-scrollbar,
html[data-theme="ocean"] ::-webkit-scrollbar,
html[data-theme="sunset"] ::-webkit-scrollbar,
html[data-theme="dracula"] ::-webkit-scrollbar,
html[data-theme="nord"] ::-webkit-scrollbar,
html[data-theme="lavender"] ::-webkit-scrollbar,
html[data-theme="midnight"] ::-webkit-scrollbar,
html[data-theme="monokai"] ::-webkit-scrollbar,
html[data-theme="solarized"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* ===== Slick Grid / Annotation Column Headers ===== */
html[data-theme] .slick-header {
    background-color: var(--bg-tertiary) !important;
    border: none !important;
}

html[data-theme] .slick-header-columns {
    background-color: var(--bg-tertiary) !important;
}

html[data-theme] .slick-header-column {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
    border-left: 1px solid var(--border-color) !important;
}

html[data-theme] .slick-header-column.ui-state-default {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .slick-cell {
    color: var(--text-primary);
}

html[data-theme] .slick-row {
    background-color: var(--bg-secondary);
}

html[data-theme] .slick-row.odd {
    background-color: var(--bg-primary);
}

html[data-theme] .slick-bordered-table .slick-cell {
    border-color: var(--border-light);
}

html[data-theme] .slick-bordered-table .ui-widget-content {
    border-bottom-color: var(--border-light) !important;
}

html[data-theme] .slick-cell.selected {
    background-color: var(--accent-light);
}

/* ===== Global link override (combat a { background-color: white }) ===== */
html[data-theme] a {
    background-color: transparent;
    color: var(--text-primary);
}

/* ===== Nav Tabs (override hardcoded #b6ffda, #6abba5, #1e7e83) ===== */
html[data-theme] .nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

html[data-theme] .treeMapR-nav {
    background-color: var(--dialog-titlebar-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-theme] .nav-tabs > li:not(.Master):not(.Scenario):not(.Finalize) > a {
    color: var(--text-secondary) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] .nav-tabs > li:not(.Master):not(.Scenario):not(.Finalize) > a:hover {
    background-color: var(--bg-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .nav-tabs > li.active:not(.Master):not(.Scenario):not(.Finalize) > a,
html[data-theme] .nav-tabs > li.active:not(.Master):not(.Scenario):not(.Finalize) > a:hover,
html[data-theme] .nav-tabs > li.active:not(.Master):not(.Scenario):not(.Finalize) > a:focus {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: var(--bg-secondary) !important;
}

/* Master / Scenario / Finalize tabs — follow theme colors */
html[data-theme] .nav-tabs > li.Master > a {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] .nav-tabs > li.Master.active > a {
    color: var(--text-primary) !important;
    background-color: var(--accent-light) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: transparent !important;
}

html[data-theme] .nav-tabs > li.Scenario > a {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] .nav-tabs > li.Scenario.active > a {
    color: var(--text-primary) !important;
    background-color: var(--accent-light) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: transparent !important;
}

html[data-theme] .nav-tabs > li.Finalize > a {
    color: var(--text-primary) !important;
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-light) !important;
}

html[data-theme] .nav-tabs > li.Finalize.active > a {
    color: var(--text-primary) !important;
    background-color: var(--accent-light) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: transparent !important;
}

/* ===== Nav Pills (landing file picker tabs) ===== */

/* Hide the "My Computer" / source tabs on landing page */
.nav.nav-pills.treeMapR {
    display: none !important;
}

html[data-theme] .nav.nav-pills.treeMapR > li > a {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

html[data-theme] .nav.nav-pills.treeMapR > li > a:hover,
html[data-theme] .nav.nav-pills.treeMapR > li > a:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme] .nav.nav-pills.treeMapR > li.active > a,
html[data-theme] .nav.nav-pills.treeMapR > li.active > a:hover,
html[data-theme] .nav.nav-pills.treeMapR > li.active > a:focus {
    background-color: var(--accent-light) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ===== Dropdown Menus (override hardcoded #f5f7f9, #558f67) ===== */
html[data-theme] .dropdown-menu {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 2px 8px var(--shadow-heavy);
}

html[data-theme] .dropdown-menu > li > a {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

html[data-theme] .dropdown-menu > li > a:hover,
html[data-theme] .dropdown-menu > li > a:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .dropdown-menu > .active > a,
html[data-theme] .dropdown-menu > .active > a:hover {
    background-color: var(--accent) !important;
    color: #fff !important;
}

html[data-theme] .dropdown-menu .divider {
    background-color: var(--border-light) !important;
}

/* ===== Toolbar Buttons (fix gray bars on btn-default btn-xxs) ===== */
html[data-theme] .btn.btn-default.btn-xxs {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

html[data-theme] .btn.btn-default.btn-xxs:hover {
    background-color: var(--bg-hover) !important;
}

html[data-theme] .btn.btn-default.btn-xxs[disabled],
html[data-theme] .btn.btn-default.btn-xxs.disabled {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}

html[data-theme] .treeMapR-form-compact .btn.btn-default {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

html[data-theme] .treeMapR-form-compact .btn.btn-default:hover {
    background-color: var(--bg-hover) !important;
}

html[data-theme] .treeMapR-form-compact .btn.btn-default[disabled],
html[data-theme] .treeMapR-form-compact .btn.btn-default.disabled {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
}

/* Toolbar dropdown toggle links */
html[data-theme] .treeMapR-black-link {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

html[data-theme] .treeMapR-menu-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

/* Toolbar form area */
html[data-theme] .treeMapR-form-compact {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* ===== Bootstrap-select buttons ===== */
html[data-theme] .bootstrap-select .btn-default {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

html[data-theme] .bootstrap-select .btn-default:hover,
html[data-theme] .bootstrap-select .btn-default:focus {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .bootstrap-select .dropdown-menu {
    background-color: var(--bg-secondary) !important;
}

html[data-theme] .bootstrap-select .dropdown-menu li a {
    color: var(--text-primary) !important;
}

html[data-theme] .bootstrap-select .dropdown-menu li a:hover,
html[data-theme] .bootstrap-select .dropdown-menu li.selected a {
    background-color: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

html[data-theme] .bootstrap-select .bs-searchbox .form-control {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ===== Separators and hover rows ===== */
html[data-theme] .treeMapR-sep {
    border-top-color: var(--border-color) !important;
}

html[data-theme] .treeMapR-hover:hover {
    background-color: var(--bg-hover) !important;
}

/* ===== Display tab checkbox left-alignment (only in column-count forms) ===== */
.form-horizontal[style*="column-count"] .checkbox {
    padding-left: 10px;
}

.form-horizontal[style*="column-count"] .col-xs-offset-4 {
    margin-left: 0;
}

/* ===== jQuery UI widget content (for slick grids inside dialogs) ===== */
html[data-theme] .ui-widget-content {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

html[data-theme] .ui-state-default {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ===== Options toolbar item ===== */
html[data-theme] .treeMapR-toolbar-menu > ul > li.dropdown > a {
    color: var(--text-primary) !important;
}

/* ===== Button dividers ===== */
html[data-theme] .treeMapR-button-divider {
    border-color: var(--border-color);
}

html[data-theme="dark"] ::-webkit-scrollbar-track,
html[data-theme="forest"] ::-webkit-scrollbar-track,
html[data-theme="ocean"] ::-webkit-scrollbar-track,
html[data-theme="sunset"] ::-webkit-scrollbar-track,
html[data-theme="dracula"] ::-webkit-scrollbar-track,
html[data-theme="nord"] ::-webkit-scrollbar-track,
html[data-theme="lavender"] ::-webkit-scrollbar-track,
html[data-theme="midnight"] ::-webkit-scrollbar-track,
html[data-theme="monokai"] ::-webkit-scrollbar-track,
html[data-theme="solarized"] ::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb,
html[data-theme="forest"] ::-webkit-scrollbar-thumb,
html[data-theme="ocean"] ::-webkit-scrollbar-thumb,
html[data-theme="sunset"] ::-webkit-scrollbar-thumb,
html[data-theme="dracula"] ::-webkit-scrollbar-thumb,
html[data-theme="nord"] ::-webkit-scrollbar-thumb,
html[data-theme="lavender"] ::-webkit-scrollbar-thumb,
html[data-theme="midnight"] ::-webkit-scrollbar-thumb,
html[data-theme="monokai"] ::-webkit-scrollbar-thumb,
html[data-theme="solarized"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

/* BlockUI overlay */
html[data-theme] .blockMsg {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Bootstrap Select Plugin */
html[data-theme] .bootstrap-select .dropdown-toggle {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

html[data-theme] .bootstrap-select .dropdown-menu {
    background-color: var(--bg-secondary);
}

/* Theme selector styling */
.theme-selector-group {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

html[data-theme] .theme-selector-group {
    border-top-color: var(--border-color);
}

.theme-selector-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
}

.theme-selector-group select {
    width: 100%;
    padding: 4px 8px;
}