/* ============================================================
   SOLYS Dark Mode Overrides
   All rules scoped under body.dark-mode so light mode is untouched.
   ============================================================ */

/* ── Kendo CSS variable overrides: replace moonlight gold (#f4af03) with dark-mode teal ── */
body.dark-mode {
    --kendo-color-primary: #3db8c8;
    --kendo-color-primary-hover: #52c4d3;
    --kendo-color-primary-active: #2ea3b2;
    --kendo-color-on-primary: #ffffff;
    --kendo-color-primary-emphasis: #3db8c8;
    --kendo-selected-bg: #3db8c8;
    --kendo-selected-text: #ffffff;
    --kendo-selected-border: #3db8c8;
}

/* ── Page backgrounds & base text ── */
body.dark-mode {
    background-color: #1a1d23 !important;
    color: #d4d4d8;
}

body.dark-mode .app-main {
    background-color: #1a1d23;
    color: #d4d4d8;
}

body.dark-mode #body,
body.dark-mode .content-wrapper,
body.dark-mode .main-content {
    background-color: #1a1d23;
    color: #d4d4d8;
}

body.dark-mode a {
    color: #5fe3c0;
}

body.dark-mode a:hover {
    color: #34d399;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #e4e4e7;
}

body.dark-mode hr {
    border-color: #3a3f47 !important;
    background: transparent !important;
    background-color: transparent !important;
}

body.dark-mode hr[style*="border-top"] {
    border-top-color: #3a3f47 !important;
}

/* ── Footer ── */
body.dark-mode footer {
    background-color: #1a1d23;
    color: #71717a;
}

body.dark-mode footer a {
    color: #5fe3c0;
}

/* ── Form inputs ── */
body.dark-mode input[type="text"],
body.dark-mode input[type="password"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="search"],
body.dark-mode input[type="tel"],
body.dark-mode input[type="url"],
body.dark-mode input[type="date"],
body.dark-mode input[type="datetime-local"],
body.dark-mode select,
body.dark-mode textarea {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #71717a;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus {
    border-color: #5fe3c0 !important;
    outline-color: #5fe3c0;
}

body.dark-mode input:read-only,
body.dark-mode textarea:read-only {
    background-color: #1e2128 !important;
    color: #a1a1aa !important;
}

/* ── Native checkboxes ── */
body.dark-mode input[type="checkbox"],
body.dark-mode input[type="radio"] {
    accent-color: #5fe3c0;
}

/* ── .form and .sortableform containers ── */
body.dark-mode .form,
body.dark-mode .sortableform {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4), 0 5px 5px 0 rgba(0, 0, 0, 0.3) !important;
}

/* .divTableHeading has light background in light mode */
body.dark-mode .divTableHeading {
    background-color: #2a2e36 !important;
    color: #d4d4d8;
}

/* Inline color:#555 spans (e.g. "Saved Product Set:" label) */
body.dark-mode span[style*="color:#555"],
body.dark-mode span[style*="color: #555"] {
    color: #a1a1aa !important;
}

/* ── .divTable inputs ── */
body.dark-mode .divTable input,
body.dark-mode .divTable select,
body.dark-mode .divTable textarea {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* ── roundedcorners containers ── */
body.dark-mode .roundedcorners {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8;
    border-color: #3a3f47 !important;
}

/* ── intermediary-page (Report Builder date cards area) ── */
body.dark-mode .intermediary-page {
    background: #1a1d23 !important;
    background-color: #1a1d23 !important;
}

body.dark-mode .intermediary-page .sortableform {
    background: #22262e !important;
    background-color: #22262e !important;
}

/* ── Inline styled divs with white backgrounds ── */
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background-color:white"],
body.dark-mode div[style*="background-color: #fff"],
body.dark-mode div[style*="background-color:#fff"],
body.dark-mode div[style*="background-color: #ffffff"],
body.dark-mode div[style*="background-color:#ffffff"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"] {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8;
}

/* ── Inline styled spans with explicit colors ── */
body.dark-mode span[style*="color: black"],
body.dark-mode span[style*="color:black"],
body.dark-mode span[style*="color: #000"],
body.dark-mode span[style*="color:#000"],
body.dark-mode span[style*="color: #333"],
body.dark-mode span[style*="color:#333"] {
    color: #d4d4d8 !important;
}

/* ── Error messages ── */
body.dark-mode .field-validation-error,
body.dark-mode .validation-summary-errors {
    color: #f87171 !important;
}

/* ── Disabled state ── */
body.dark-mode .k-state-disabled {
    opacity: 0.65;
}

/* ============================================================
   KENDO UI COMPONENT OVERRIDES
   ============================================================ */

/* ── Kendo Grid ── */
body.dark-mode .k-grid {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-grid-header {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-grid-header th,
body.dark-mode .k-grid-header .k-header {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-grid-toolbar {
    background: #2a2e36 !important;
    border-color: #3a3f47 !important;
    color: #d4d4d8;
}

body.dark-mode .k-grid-toolbar .k-searchbox,
body.dark-mode .k-grid-toolbar .k-grid-search.k-input {
    background: #22262e !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-grid-toolbar .k-searchbox .k-input-inner {
    background: transparent !important;
    color: #d4d4d8 !important;
}

body.dark-mode .k-grid-toolbar .k-searchbox .k-input-inner::placeholder {
    color: #52525b !important;
}

body.dark-mode .k-grid-toolbar .k-searchbox .k-icon,
body.dark-mode .k-grid-toolbar .k-searchbox .k-font-icon,
body.dark-mode .k-grid-toolbar .k-searchbox .k-svg-icon,
body.dark-mode .k-grid-toolbar .k-searchbox .k-input-icon {
    color: #71717a !important;
}

body.dark-mode .k-grid-header th:hover,
body.dark-mode .k-grid-header th.k-state-hover,
body.dark-mode .k-grid-header .k-header:hover,
body.dark-mode .k-grid-header .k-header.k-state-hover {
    background: #333842 !important;
    color: #e4e4e7 !important;
}

body.dark-mode .k-grid-header .k-link,
body.dark-mode .k-grid-header .k-link:hover {
    background: transparent !important;
    color: #e4e4e7 !important;
}

body.dark-mode .k-grid-header .k-grid-filter:hover,
body.dark-mode .k-grid-header .k-header-column-menu:hover,
body.dark-mode .k-grid-header .k-hierarchy-cell .k-icon:hover {
    background: #333842 !important;
    color: #e4e4e7 !important;
}

body.dark-mode .k-grid .k-filter-row input,
body.dark-mode .k-grid .k-filter-row .k-textbox {
    background: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-grid .k-filter-row .k-autocomplete,
body.dark-mode .k-grid .k-filter-row .k-autocomplete:hover,
body.dark-mode .k-grid .k-filter-row .k-autocomplete.k-state-hover,
body.dark-mode .k-grid .k-filter-row .k-autocomplete.k-state-focused,
body.dark-mode .k-grid .k-filter-row .k-autocomplete:focus-within,
body.dark-mode .k-grid .k-filter-row .k-filtercell .k-autocomplete {
    background: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-grid .k-filter-row .k-filtercell,
body.dark-mode .k-grid .k-filter-row .k-filtercell > span {
    background: transparent !important;
}

body.dark-mode .k-grid-content {
    background-color: #22262e;
}

body.dark-mode .k-grid td {
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .k-grid tr {
    background-color: #22262e;
}

body.dark-mode .k-grid tr.k-alt {
    background-color: #262a32;
}

body.dark-mode .k-grid tr:hover,
body.dark-mode .k-grid tr.k-state-hover {
    background-color: #2e323a;
}

body.dark-mode .k-grid tr.k-state-selected {
    background-color: #1a3a4a;
    color: #d4d4d8;
}

body.dark-mode .k-grid .k-grouping-header {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-grid .k-group-indicator {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-grid .k-pager-wrap,
body.dark-mode .k-pager-wrap {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-pager-wrap .k-link,
body.dark-mode .k-pager-wrap .k-state-selected {
    color: #d4d4d8;
}

body.dark-mode .k-pager-wrap .k-state-selected {
    background-color: #5fe3c0;
    color: #1a1d23;
}

body.dark-mode .k-grid .k-grid-footer,
body.dark-mode .k-grid .k-footer-template td,
body.dark-mode .k-grid .k-group-footer td {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-detail-row {
    background-color: #1e2128 !important;
}

body.dark-mode .k-detail-row .k-detail-cell {
    background-color: #1e2128;
    color: #d4d4d8;
}

/* ── Kendo DropDownList / ComboBox (old classes) ── */
body.dark-mode .k-widget.k-dropdown .k-dropdown-wrap,
body.dark-mode .k-widget.k-dropdown .k-dropdown-wrap.k-state-default,
body.dark-mode .k-widget.k-dropdown .k-dropdown-wrap.k-state-hover,
body.dark-mode .k-widget.k-dropdown .k-dropdown-wrap.k-state-focused,
body.dark-mode .k-widget.k-dropdown .k-dropdown-wrap.k-state-active,
body.dark-mode .k-widget.k-combobox .k-dropdown-wrap,
body.dark-mode .k-widget.k-combobox .k-dropdown-wrap.k-state-default,
body.dark-mode .k-widget.k-combobox .k-dropdown-wrap.k-state-hover,
body.dark-mode .k-widget.k-combobox .k-dropdown-wrap.k-state-focused,
body.dark-mode .k-widget.k-combobox .k-dropdown-wrap.k-state-active,
body.dark-mode .k-picker-wrap,
body.dark-mode .k-picker-wrap.k-state-default,
body.dark-mode .k-picker-wrap.k-state-hover,
body.dark-mode .k-picker-wrap.k-state-focused {
    background: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* Kendo 2024: k-picker replaces k-dropdown-wrap */
body.dark-mode .k-picker,
body.dark-mode .k-picker.k-dropdownlist,
body.dark-mode .k-picker:hover,
body.dark-mode .k-picker.k-hover,
body.dark-mode .k-picker.k-focus {
    background: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
    overflow: hidden;
}

body.dark-mode .k-dropdown .k-dropdown-wrap .k-input,
body.dark-mode .k-combobox .k-dropdown-wrap .k-input,
body.dark-mode .k-widget.k-dropdown .k-input,
body.dark-mode .k-widget.k-combobox .k-input {
    color: #d4d4d8 !important;
    background: transparent !important;
}

/* Kendo 2024: k-input-inner replaces k-input inside pickers */
body.dark-mode .k-picker .k-input-inner,
body.dark-mode .k-picker .k-input-value-text {
    color: #d4d4d8 !important;
    background: transparent !important;
}

body.dark-mode .k-dropdown .k-dropdown-wrap .k-select,
body.dark-mode .k-combobox .k-dropdown-wrap .k-select,
body.dark-mode .k-picker-wrap .k-select {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* Kendo 2024: k-input-button replaces k-select */
body.dark-mode .k-picker .k-input-button,
body.dark-mode .k-input .k-input-button,
body.dark-mode .k-input-button {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
    border-radius: 0 !important;
}

/* Dropdown popup filter/search input */
body.dark-mode .k-list-container .k-textbox,
body.dark-mode .k-list-container input.k-textbox,
body.dark-mode .k-animation-container .k-textbox,
body.dark-mode .k-list-filter .k-textbox,
body.dark-mode .k-list-filter input {
    background: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* Kendo 2024: dropdown filter uses k-searchbox + k-input-inner */
body.dark-mode .k-list-filter .k-searchbox,
body.dark-mode .k-list-filter .k-searchbox.k-input {
    background: #22262e !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-list-filter .k-searchbox .k-input-inner {
    background: transparent !important;
    color: #d4d4d8 !important;
}

body.dark-mode .k-list-filter .k-searchbox .k-input-icon,
body.dark-mode .k-list-filter .k-searchbox .k-icon {
    color: #71717a !important;
}

body.dark-mode .k-list-container,
body.dark-mode .k-animation-container .k-list-container {
    background-color: #2a2e36 !important;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-list .k-item,
body.dark-mode .k-list-item {
    color: #d4d4d8;
    background-color: #2a2e36 !important;
}

body.dark-mode .k-list .k-item:hover,
body.dark-mode .k-list .k-item.k-state-hover,
body.dark-mode .k-list-item:hover,
body.dark-mode .k-list-item.k-hover {
    background-color: #333842 !important;
    color: #e4e4e7;
}

body.dark-mode .k-list .k-item.k-state-focused,
body.dark-mode .k-list-item.k-focus {
    background-color: #333842 !important;
    color: #e4e4e7;
}

body.dark-mode .k-list .k-item.k-state-selected,
body.dark-mode .k-list-item.k-selected {
    background-color: #1a3a4a !important;
    color: #d4d4d8;
}

body.dark-mode .k-popup {
    background-color: #2a2e36 !important;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-popup .k-list,
body.dark-mode .k-popup .k-list-content,
body.dark-mode .k-popup .k-list-ul,
body.dark-mode .k-animation-container .k-list,
body.dark-mode .k-animation-container .k-list-content {
    background-color: #2a2e36 !important;
    color: #d4d4d8;
}


/* ── ComboBox & DropDownList focus/active states ── */
body.dark-mode .k-combobox.k-focus,
body.dark-mode .k-combobox.k-input.k-focus,
body.dark-mode .k-combobox:focus-within,
body.dark-mode .k-combobox.k-input:focus-within {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #5fe3c0 !important;
}

body.dark-mode .k-combobox .k-input-inner,
body.dark-mode .k-combobox .k-input-inner:focus,
body.dark-mode .k-combobox.k-focus .k-input-inner,
body.dark-mode .k-combobox:focus-within .k-input-inner {
    background: transparent !important;
    background-color: transparent !important;
    color: #d4d4d8 !important;
}

body.dark-mode .k-combobox.k-focus .k-input-button,
body.dark-mode .k-combobox:focus-within .k-input-button {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-dropdownlist.k-focus,
body.dark-mode .k-picker.k-dropdownlist.k-focus,
body.dark-mode .k-picker.k-dropdownlist:focus {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #5fe3c0 !important;
}

body.dark-mode .k-dropdownlist.k-focus .k-input-inner,
body.dark-mode .k-dropdownlist.k-focus .k-input-value-text {
    color: #d4d4d8 !important;
    background: transparent !important;
}

body.dark-mode .k-dropdownlist.k-focus .k-input-button {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* Old class (pre-2024): prevent white leak into dark mode */
body.dark-mode .k-dropdown-wrap > .k-input {
    background-color: transparent !important;
    color: #d4d4d8 !important;
}

/* ── Kendo Calendar ── */
body.dark-mode .k-calendar {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-calendar .k-header {
    background-color: #333842;
    color: #d4d4d8;
}

body.dark-mode .k-calendar td {
    color: #d4d4d8;
}

body.dark-mode .k-calendar td:hover {
    background-color: #333842;
}

body.dark-mode .k-calendar td.k-state-selected {
    background-color: #5fe3c0;
    color: #1a1d23;
}

body.dark-mode .k-calendar .k-today {
    color: #5fe3c0;
}

body.dark-mode .k-calendar .k-other-month {
    color: #52525b;
}

/* ── Kendo Window ── */
body.dark-mode .k-window {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-window-titlebar {
    background-color: #2a2e36;
    color: #e4e4e7;
    border-color: #3a3f47;
}

body.dark-mode .k-window-content {
    background-color: #22262e;
    color: #d4d4d8;
}

body.dark-mode .k-window-content label,
body.dark-mode .k-window-content span,
body.dark-mode .k-window-content td,
body.dark-mode .k-window-content div {
    color: #d4d4d8;
}

body.dark-mode .k-window-content a {
    color: #5fe3c0;
}

body.dark-mode .k-window-actions .k-button {
    color: #d4d4d8;
}

/* ── Kendo Button ── */
body.dark-mode .k-button {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #b9bbbe !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .k-button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body.dark-mode .k-button.k-primary,
body.dark-mode .k-button.k-state-selected,
body.dark-mode .k-button.k-selected {
    background: #5fe3c0 !important;
    color: #1a1d23 !important;
    border-color: #5fe3c0 !important;
}

/* ── ButtonGroup — pill style (dark mode) ── */
body.dark-mode .k-button-group .k-button {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border: 1px solid #3a3f47 !important;
    border-radius: 0 !important;
    margin-right: 0 !important;
    margin-left: -1px;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    line-height: 1.4;
    transition: background 0.15s, color 0.15s;
    box-shadow: none !important;
}

body.dark-mode .k-button-group .k-button:first-child {
    border-radius: 4px 0 0 4px !important;
    margin-left: 0;
}

body.dark-mode .k-button-group .k-button:last-child {
    border-radius: 0 4px 4px 0 !important;
}

body.dark-mode .k-button-group .k-button.k-selected,
body.dark-mode .k-button-group .k-button.k-state-active {
    background: #2a7f8e !important;
    color: #fff !important;
    border-color: #2a7f8e !important;
    position: relative;
    z-index: 1;
}

body.dark-mode .k-button-group .k-button.k-selected:hover,
body.dark-mode .k-button-group .k-button.k-state-active:hover {
    background: #238090 !important;
    color: #fff !important;
    border-color: #238090 !important;
}

body.dark-mode .k-button-group .k-button:hover:not(.k-selected):not(.k-state-active) {
    background: #3e4350 !important;
    color: #e4e4e7 !important;
}

body.dark-mode .k-button.k-primary:hover {
    background: #34d399 !important;
}

body.dark-mode .k-button.k-button-icon,
body.dark-mode button.k-button.k-button-icon {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #b9bbbe !important;
    box-shadow: none !important;
}

body.dark-mode .k-button.k-button-icon:hover,
body.dark-mode button.k-button.k-button-icon:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

body.dark-mode .k-button.k-button-icon.k-state-disabled,
body.dark-mode button.k-button.k-button-icon.k-state-disabled {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #71717a !important;
    opacity: 0.65;
}

/* Sidebar and notification panel buttons should inherit, not get overridden */
body.dark-mode .app-sidebar .k-button,
body.dark-mode .notification-panel button {
    background: inherit;
    color: inherit;
    border: inherit;
}

/* ── Kendo TabStrip ── */
body.dark-mode .k-tabstrip {
    background: #1a1d23 !important;
    border-color: #3a3f47;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper {
    background: #2a2e36 !important;
    border: 1px solid #3a3f47 !important;
    border-bottom: none !important;
    padding: 4px 4px 0 !important;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper .k-tabstrip-items .k-item {
    background: #2a2e36 !important;
    border: 1px solid #3a3f47 !important;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item .k-link,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper .k-item .k-link {
    color: #b9bbbe !important;
    background: transparent !important;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item:hover .k-link,
body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item.k-state-hover .k-link,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper .k-item:hover .k-link {
    color: #e4e4e7 !important;
    background: #333842 !important;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item.k-state-active,
body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item.k-tab-on-top,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper .k-item.k-active {
    background: #22262e !important;
    border: 1px solid #3a3f47 !important;
    border-bottom-color: #22262e !important;
    margin-bottom: -1px;
}

body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item.k-state-active .k-link,
body.dark-mode .k-tabstrip > .k-tabstrip-items .k-item.k-tab-on-top .k-link,
body.dark-mode .k-tabstrip .k-tabstrip-items-wrapper .k-item.k-active .k-link {
    color: #e4e4e7 !important;
    background: #22262e !important;
}

body.dark-mode .k-tabstrip > .k-content,
body.dark-mode .k-tabstrip > .k-tabstrip-items + .k-content,
body.dark-mode .k-tabstrip-content {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* ── Kendo PanelBar ── */
body.dark-mode .k-panelbar {
    background-color: #22262e;
    border-color: #3a3f47;
}

body.dark-mode .k-panelbar > .k-item > .k-link,
body.dark-mode .k-panelbar > .k-panelbar-item > .k-link,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-panelbar > .k-item > .k-link:hover,
body.dark-mode .k-panelbar > .k-item > .k-link.k-state-hover,
body.dark-mode .k-panelbar > .k-panelbar-item > .k-link:hover,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link:hover,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link.k-selected:hover {
    background-color: #3e4350 !important;
    color: #e4e4e7 !important;
}

body.dark-mode .k-panelbar > .k-item > .k-link.k-state-selected,
body.dark-mode .k-panelbar > .k-item > .k-link.k-header.k-state-selected,
body.dark-mode .k-panelbar > .k-panelbar-item > .k-link.k-selected,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link.k-selected {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-panelbar .k-content,
body.dark-mode .k-panelbar .k-panelbar-content {
    background-color: #22262e;
    color: #d4d4d8;
}

/* Kendo 2024: PanelBar item wrapper */
body.dark-mode .k-panelbar > .k-panelbar-item,
body.dark-mode .k-panelbar > .k-panelbar-header {
    background: #22262e !important;
    border-color: #3a3f47 !important;
}

/* Kendo 2024: k-expanded state — override moonlight amber accent */
body.dark-mode .k-panelbar > .k-panelbar-item.k-expanded > .k-link,
body.dark-mode .k-panelbar > .k-panelbar-item.k-expanded > .k-link.k-selected,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link.k-selected {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-panelbar > .k-panelbar-item.k-expanded > .k-link:hover,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link:hover,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link.k-selected:hover {
    background-color: #3e4350 !important;
    color: #e4e4e7 !important;
}

/* Active (mousedown) state — prevent amber flash on click */
body.dark-mode .k-panelbar > .k-panelbar-item > .k-link:active,
body.dark-mode .k-panelbar > .k-panelbar-item > .k-link.k-active,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link:active,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link.k-active,
body.dark-mode .k-panelbar > .k-panelbar-header > .k-link.k-selected:active,
body.dark-mode .k-panelbar > .k-panelbar-item.k-expanded > .k-link:active,
body.dark-mode .k-panelbar > .k-panelbar-item.k-expanded > .k-link.k-active,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link:active,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link.k-active,
body.dark-mode .k-panelbar > .k-panelbar-header.k-expanded > .k-link.k-selected:active {
    background-color: #242830 !important;
    color: #d4d4d8 !important;
}

/* ── Kendo Switch ── */
body.dark-mode .k-switch-off .k-switch-container {
    background-color: #3a3f47;
}

body.dark-mode .k-switch-on .k-switch-container {
    background-color: #5fe3c0;
}

body.dark-mode .k-switch-handle {
    background-color: #e4e4e7;
}

/* ── Kendo ListBox ── */
body.dark-mode .k-listbox {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-listbox .k-list-scroller {
    background-color: #22262e;
}

body.dark-mode .k-listbox .k-item,
body.dark-mode .k-listbox .k-list-item {
    background: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-listbox .k-item.k-state-selected,
body.dark-mode .k-listbox .k-list-item.k-selected {
    background: #1a3a4a !important;
    color: #d4d4d8 !important;
}

body.dark-mode .k-listbox .k-item:hover,
body.dark-mode .k-listbox .k-list .k-item:hover,
body.dark-mode .k-listbox .k-list-scroller .k-item:hover,
body.dark-mode .k-listbox .k-list-item:hover {
    background-color: #4a5568 !important;
    color: #fff !important;
}

body.dark-mode .k-listbox .k-listbox-toolbar,
body.dark-mode .k-listbox .k-listbox-actions {
    background: transparent;
}

body.dark-mode .k-listbox .k-listbox-toolbar .k-button,
body.dark-mode .k-listbox .k-listbox-actions .k-button {
    background: transparent;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .k-listbox .k-listbox-toolbar .k-button:hover,
body.dark-mode .k-listbox .k-listbox-actions .k-button:hover {
    background-color: #333842;
    color: #e4e4e7;
}

body.dark-mode .k-listbox .k-listbox-actions .k-button.k-disabled {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #71717a !important;
    opacity: 0.65;
}

/* ── Kendo Tooltip ── */
body.dark-mode .k-tooltip {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-tooltip .k-callout {
    color: #333842;
}

/* ── Kendo MultiSelect ── */
body.dark-mode .k-multiselect-wrap {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

body.dark-mode .k-multiselect-wrap .k-button {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-multiselect-wrap .k-input {
    color: #d4d4d8;
}

/* ── Kendo Notification ── */
body.dark-mode .k-notification {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .k-notification.k-notification-info {
    background-color: #1a3a4a;
    border-color: #2a5a6a;
}

body.dark-mode .k-notification.k-notification-success {
    background-color: #1a3a2a;
    border-color: #2a5a3a;
}

body.dark-mode .k-notification.k-notification-warning {
    background-color: #3a3a1a;
    border-color: #5a5a2a;
}

body.dark-mode .k-notification.k-notification-error {
    background-color: #3a1a1a;
    border-color: #5a2a2a;
}

/* ── Kendo Editor ── */
body.dark-mode .k-editor {
    background-color: #22262e !important;
    border-color: #3a3f47 !important;
    color: #d4d4d8;
}

body.dark-mode .k-editor .k-editor-toolbar-wrap,
body.dark-mode .k-editor .k-toolbar {
    background-color: #2a2e36 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-editor .k-toolbar .k-button-group .k-button,
body.dark-mode .k-editor .k-toolbar .k-tool {
    background-color: transparent;
    color: #d4d4d8;
    border-color: transparent;
}

body.dark-mode .k-editor .k-toolbar .k-button-group .k-button:hover,
body.dark-mode .k-editor .k-toolbar .k-tool:hover,
body.dark-mode .k-editor .k-toolbar .k-button-group .k-button.k-state-hover,
body.dark-mode .k-editor .k-toolbar .k-tool.k-state-hover {
    background-color: #333842;
    color: #e4e4e7;
}

body.dark-mode .k-editor .k-toolbar .k-button-group .k-button.k-state-active,
body.dark-mode .k-editor .k-toolbar .k-tool.k-state-active,
body.dark-mode .k-editor .k-toolbar .k-button-group .k-button.k-state-selected,
body.dark-mode .k-editor .k-toolbar .k-tool.k-state-selected {
    background-color: #3a3f47;
    color: #e4e4e7;
}

body.dark-mode .k-editor .k-editable-area {
    background-color: #22262e !important;
    color: #d4d4d8 !important;
}

/* ── Kendo TreeView ── */
body.dark-mode .k-treeview {
    background-color: transparent;
    color: #d4d4d8;
}

body.dark-mode .k-treeview .k-item .k-in {
    color: #d4d4d8;
}

body.dark-mode .k-treeview .k-item .k-in:hover,
body.dark-mode .k-treeview .k-item .k-in.k-state-hover {
    background-color: #333842;
    color: #e4e4e7;
}

body.dark-mode .k-treeview .k-item .k-in.k-state-selected {
    background-color: #1a3a4a;
    color: #d4d4d8;
}

/* ── Kendo Upload ── */
body.dark-mode .k-upload {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .k-upload .k-dropzone {
    background-color: #2a2e36;
    color: #d4d4d8;
}

body.dark-mode .k-upload .k-upload-files {
    background-color: #22262e;
    border-color: #3a3f47;
}

body.dark-mode .k-upload .k-file {
    border-color: #3a3f47;
}

/* ── Kendo ColorPicker ── */
body.dark-mode .k-colorpicker .k-picker-wrap {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

/* ── Kendo Splitter ── */
body.dark-mode .k-splitbar {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

/* ── Kendo ListView ── */
body.dark-mode .k-listview {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* ── Kendo ProgressBar ── */
body.dark-mode .k-progressbar {
    background-color: #2a2e36;
}

body.dark-mode .k-progressbar .k-state-selected {
    background-color: #5fe3c0;
}

/* ── Kendo TextBox (strong overrides) ── */
body.dark-mode .k-textbox,
body.dark-mode span.k-textbox,
body.dark-mode .k-textbox .k-input,
body.dark-mode input.k-textbox {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-textbox:read-only,
body.dark-mode span.k-textbox:read-only,
body.dark-mode input.k-textbox:read-only,
body.dark-mode input.k-textbox[readonly],
body.dark-mode .k-textbox[readonly] {
    background-color: #1e2128 !important;
    color: #a1a1aa !important;
}

/* ── Kendo Checkbox / Radio ── */
body.dark-mode .k-checkbox,
body.dark-mode .k-radio {
    background-color: #2a2e36 !important;
    border-color: #4a4f57 !important;
}

body.dark-mode .k-checkbox:checked {
    background-color: #5fe3c0 !important;
    border-color: #5fe3c0 !important;
    color: #1a1d23 !important;
}

body.dark-mode .k-checkbox:checked::before {
    color: #1a1d23 !important;
}

body.dark-mode .k-radio:checked {
    background-color: #5fe3c0 !important;
    border-color: #5fe3c0 !important;
}

/* ============================================================
   EXECUTIVE OVERVIEW GRID INDICATOR COLORS
   ============================================================ */

/* Positive % change: muted green background with readable text */
body.dark-mode .k-grid-content tbody td[percent="true"] {
    background-color: rgba(81, 207, 102, 0.18) !important;
    color: #6ee7a0 !important;
}

/* Negative % change: muted red background with readable text */
body.dark-mode .k-grid-content tbody td[percent="true"][data-content^="-"] {
    background-color: rgba(255, 107, 107, 0.18) !important;
    color: #fca5a5 !important;
}

/* Zero/flat % change: muted amber background with readable text */
body.dark-mode .k-grid-content tbody td[percent="true"][data-content^="0.0"] {
    background-color: rgba(245, 159, 0, 0.18) !important;
    color: #fcd34d !important;
}

/* TOTAL row: subtle highlight instead of gainsboro */
body.dark-mode div[ExecOview="true"].k-grid .k-grid-content tbody tr:first-child,
body.dark-mode div[ExecOview="true"].k-grid .k-grid-content-locked tbody tr:first-child {
    background-color: #2a2e36 !important;
    color: #e4e4e7 !important;
}

/* ============================================================
   KENDO CHART OVERRIDES
   ============================================================ */

body.dark-mode .k-chart,
body.dark-mode .k-stockchart,
body.dark-mode .k-chart-surface {
    background: #22262e !important;
    color: #d4d4d8;
}

/* Chart SVG background fills */
body.dark-mode .k-chart path[fill="#fff"],
body.dark-mode .k-chart path[fill="#FFF"],
body.dark-mode .k-chart path[fill="#ffffff"],
body.dark-mode .k-chart path[fill="#FFFFFF"],
body.dark-mode .k-chart path[fill="white"],
body.dark-mode .k-chart rect[fill="#fff"],
body.dark-mode .k-chart rect[fill="#FFF"],
body.dark-mode .k-chart rect[fill="#ffffff"],
body.dark-mode .k-chart rect[fill="#FFFFFF"],
body.dark-mode .k-chart rect[fill="white"],
body.dark-mode .k-stockchart path[fill="#fff"],
body.dark-mode .k-stockchart path[fill="#FFF"],
body.dark-mode .k-stockchart path[fill="#ffffff"],
body.dark-mode .k-stockchart path[fill="#FFFFFF"],
body.dark-mode .k-stockchart rect[fill="#fff"],
body.dark-mode .k-stockchart rect[fill="#FFF"],
body.dark-mode .k-stockchart rect[fill="#ffffff"],
body.dark-mode .k-stockchart rect[fill="#FFFFFF"] {
    fill: #22262e !important;
}

/* Chart data-point marker fills (circles with white fill) */
body.dark-mode .k-chart circle[fill="#fff"],
body.dark-mode .k-chart circle[fill="#FFF"],
body.dark-mode .k-chart circle[fill="#ffffff"],
body.dark-mode .k-chart circle[fill="#FFFFFF"] {
    fill: #22262e !important;
}

/* Chart text labels */
body.dark-mode .k-chart text,
body.dark-mode .k-chart text[fill="#232323"],
body.dark-mode .k-stockchart text,
body.dark-mode .k-stockchart text[fill="#232323"] {
    fill: #d4d4d8 !important;
}

/* Grid lines: rendered as stroke="#dfdfdf" or "#e0e0e0" (hardcoded in Razor) */
body.dark-mode .k-chart path[stroke="#dfdfdf"],
body.dark-mode .k-chart path[stroke="#DFDFDF"],
body.dark-mode .k-chart path[stroke="#e0e0e0"],
body.dark-mode .k-chart path[stroke="#E0E0E0"],
body.dark-mode .k-chart line[stroke="#dfdfdf"],
body.dark-mode .k-chart line[stroke="#DFDFDF"],
body.dark-mode .k-chart line[stroke="#e0e0e0"],
body.dark-mode .k-chart line[stroke="#E0E0E0"],
body.dark-mode .k-stockchart path[stroke="#dfdfdf"],
body.dark-mode .k-stockchart path[stroke="#DFDFDF"],
body.dark-mode .k-stockchart path[stroke="#e0e0e0"],
body.dark-mode .k-stockchart path[stroke="#E0E0E0"],
body.dark-mode .k-stockchart line[stroke="#dfdfdf"],
body.dark-mode .k-stockchart line[stroke="#DFDFDF"],
body.dark-mode .k-stockchart line[stroke="#e0e0e0"],
body.dark-mode .k-stockchart line[stroke="#E0E0E0"] {
    stroke: rgba(255,255,255,0.06) !important;
}

/* Axis lines and ticks: rendered as stroke="#8e8e8e" */
body.dark-mode .k-chart path[stroke="#8e8e8e"],
body.dark-mode .k-chart path[stroke="#8E8E8E"],
body.dark-mode .k-chart line[stroke="#8e8e8e"],
body.dark-mode .k-chart line[stroke="#8E8E8E"],
body.dark-mode .k-stockchart path[stroke="#8e8e8e"],
body.dark-mode .k-stockchart path[stroke="#8E8E8E"],
body.dark-mode .k-stockchart line[stroke="#8e8e8e"],
body.dark-mode .k-stockchart line[stroke="#8E8E8E"] {
    stroke: rgba(255,255,255,0.10) !important;
}

/* Chart tooltip */
body.dark-mode .k-chart-tooltip,
body.dark-mode .k-chart-crosshair-tooltip {
    background-color: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* TreeMap dark mode */
body.dark-mode .k-treemap {
    background-color: #22262e !important;
    color: #d4d4d8;
}

body.dark-mode .k-treemap .k-treemap-tile {
    border-color: #3a3f47;
}

body.dark-mode .k-treemap .k-treemap-title {
    background-color: #2a2e36 !important;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* Pie chart labels: dark outline for readability on light-colored slices */
body.dark-mode .k-chart text {
    paint-order: stroke fill;
    stroke: rgba(0,0,0,0.5);
    stroke-width: 2px;
}

/* Blanket chart area background for charts that don't set transparent */
body.dark-mode .k-chart .k-chart-surface > svg > rect:first-child {
    fill: #22262e !important;
}

/* ── Series color remaps for dark backgrounds ── */

/* Blue (#0000FF) → bright blue for visibility on #22262e */
body.dark-mode .k-chart path[fill="blue"],
body.dark-mode .k-chart rect[fill="blue"],
body.dark-mode .k-chart circle[fill="blue"] {
    fill: #4dabf7 !important;
}
body.dark-mode .k-chart path[stroke="blue"],
body.dark-mode .k-chart line[stroke="blue"] {
    stroke: #4dabf7 !important;
}
body.dark-mode .k-chart path[fill="#0000ff"],
body.dark-mode .k-chart path[fill="#0000FF"],
body.dark-mode .k-chart rect[fill="#0000ff"],
body.dark-mode .k-chart rect[fill="#0000FF"] {
    fill: #4dabf7 !important;
}
body.dark-mode .k-chart path[stroke="#0000ff"],
body.dark-mode .k-chart path[stroke="#0000FF"],
body.dark-mode .k-chart line[stroke="#0000ff"],
body.dark-mode .k-chart line[stroke="#0000FF"] {
    stroke: #4dabf7 !important;
}

/* Blue legend markers */
body.dark-mode .k-chart .k-chart-legend path[fill="blue"],
body.dark-mode .k-chart .k-chart-legend rect[fill="blue"],
body.dark-mode .k-chart .k-chart-legend path[fill="#0000ff"],
body.dark-mode .k-chart .k-chart-legend path[fill="#0000FF"],
body.dark-mode .k-chart .k-chart-legend rect[fill="#0000ff"],
body.dark-mode .k-chart .k-chart-legend rect[fill="#0000FF"] {
    fill: #4dabf7 !important;
}

/* Purple (#800080) → light purple */
body.dark-mode .k-chart path[fill="purple"],
body.dark-mode .k-chart rect[fill="purple"],
body.dark-mode .k-chart circle[fill="purple"] {
    fill: #b197fc !important;
}
body.dark-mode .k-chart path[stroke="purple"],
body.dark-mode .k-chart line[stroke="purple"] {
    stroke: #b197fc !important;
}
body.dark-mode .k-chart path[fill="#800080"],
body.dark-mode .k-chart path[fill="#800080"],
body.dark-mode .k-chart rect[fill="#800080"] {
    fill: #b197fc !important;
}
body.dark-mode .k-chart path[stroke="#800080"],
body.dark-mode .k-chart line[stroke="#800080"] {
    stroke: #b197fc !important;
}

/* Purple legend markers */
body.dark-mode .k-chart .k-chart-legend path[fill="purple"],
body.dark-mode .k-chart .k-chart-legend rect[fill="purple"],
body.dark-mode .k-chart .k-chart-legend path[fill="#800080"],
body.dark-mode .k-chart .k-chart-legend rect[fill="#800080"] {
    fill: #b197fc !important;
}

/* Green (#008000) → bright green */
body.dark-mode .k-chart path[fill="green"],
body.dark-mode .k-chart rect[fill="green"],
body.dark-mode .k-chart circle[fill="green"] {
    fill: #51cf66 !important;
}
body.dark-mode .k-chart path[stroke="green"],
body.dark-mode .k-chart line[stroke="green"] {
    stroke: #51cf66 !important;
}
body.dark-mode .k-chart path[fill="#008000"],
body.dark-mode .k-chart path[fill="#008000"],
body.dark-mode .k-chart rect[fill="#008000"] {
    fill: #51cf66 !important;
}
body.dark-mode .k-chart path[stroke="#008000"],
body.dark-mode .k-chart line[stroke="#008000"] {
    stroke: #51cf66 !important;
}

/* Green legend markers */
body.dark-mode .k-chart .k-chart-legend path[fill="green"],
body.dark-mode .k-chart .k-chart-legend rect[fill="green"],
body.dark-mode .k-chart .k-chart-legend path[fill="#008000"],
body.dark-mode .k-chart .k-chart-legend rect[fill="#008000"] {
    fill: #51cf66 !important;
}

/* Brown → warm tan */
body.dark-mode .k-chart path[fill="brown"],
body.dark-mode .k-chart rect[fill="brown"],
body.dark-mode .k-chart circle[fill="brown"] {
    fill: #e8a456 !important;
}
body.dark-mode .k-chart path[stroke="brown"],
body.dark-mode .k-chart line[stroke="brown"] {
    stroke: #e8a456 !important;
}

/* Brown legend markers */
body.dark-mode .k-chart .k-chart-legend path[fill="brown"],
body.dark-mode .k-chart .k-chart-legend rect[fill="brown"] {
    fill: #e8a456 !important;
}

/* Dashboard chart toggle buttons */
body.dark-mode #type1 label {
    background-color: #333842;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode #type1 label:hover {
    background-color: #3e4350;
    color: #e4e4e7;
}

body.dark-mode #type1 label.active,
body.dark-mode #type1 input:checked + label {
    background-color: #5fe3c0;
    color: #1a1d23;
    border-color: #5fe3c0;
}

/* ============================================================
   BOOTSTRAP COMPONENT OVERRIDES
   ============================================================ */

/* Wells */
body.dark-mode .well {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #d4d4d8;
}

/* Panels */
body.dark-mode .panel {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .panel-heading {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .panel-body {
    background-color: #22262e;
    color: #d4d4d8;
}

body.dark-mode .panel-footer {
    background-color: #2a2e36;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .panel-default > .panel-heading {
    background-color: #2a2e36;
    color: #d4d4d8;
}

/* Tables */
body.dark-mode .table {
    color: #d4d4d8;
}

body.dark-mode .table > thead > tr > th,
body.dark-mode .table > thead > tr > td {
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .table > tbody > tr > td,
body.dark-mode .table > tbody > tr > th {
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #262a32;
}

body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #2e323a;
}

/* Form controls */
body.dark-mode .form-control {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .form-control:focus {
    border-color: #5fe3c0;
    box-shadow: 0 0 0 0.2rem rgba(95, 227, 192, 0.15);
}

/* Alerts */
body.dark-mode .alert {
    border-color: #3a3f47;
}

body.dark-mode .alert-info {
    background-color: #1a3a4a;
    color: #93c5fd;
    border-color: #2a5a6a;
}

body.dark-mode .alert-success {
    background-color: #1a3a2a;
    color: #86efac;
    border-color: #2a5a3a;
}

body.dark-mode .alert-warning {
    background-color: #3a3a1a;
    color: #fcd34d;
    border-color: #5a5a2a;
}

body.dark-mode .alert-danger {
    background-color: #3a1a1a;
    color: #fca5a5;
    border-color: #5a2a2a;
}

/* ============================================================
   REPORT BUILDER OVERRIDES
   ============================================================ */

/* Section headers */
body.dark-mode .rb-section-header {
    color: #5fe3c0;
    border-bottom-color: #3a3f47;
    background-color: transparent;
}

body.dark-mode .section-header {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* Sub-headers */
body.dark-mode .rb-sub-header,
body.dark-mode .rb-sub-header-centered {
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* Report category pill row (top nav tabs: Report Builder, Trend Builder, etc.) */
body.dark-mode .report-category-pill {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode a.report-category-pill {
    color: #d4d4d8 !important;
}

body.dark-mode .report-category-pill.category-active,
body.dark-mode a.report-category-pill.category-active {
    background: #2a7f8e !important;
    color: #fff !important;
    border-color: #2a7f8e !important;
}

body.dark-mode .report-category-pill:hover:not(.category-active) {
    background: #3e4350 !important;
    color: #e4e4e7 !important;
}

/* Pill dropdown menus */
body.dark-mode .pill-dropdown-menu {
    background: #2a2e36 !important;
    border-color: #3a3f47 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,.4) !important;
}

body.dark-mode .pill-dropdown-menu a {
    color: #d4d4d8 !important;
}

body.dark-mode .pill-dropdown-menu a:hover {
    background: #333842 !important;
    color: #5fe3c0 !important;
}

/* Canned overlay message */
body.dark-mode #canned-overlay-msg {
    background: #1a2e24 !important;
    border-color: #1ecb8b !important;
    color: #80e0b8 !important;
}
body.dark-mode #canned-overlay-msg a {
    color: #5fe3c0 !important;
}
body.dark-mode #canned-overlay-msg .canned-overlay-dismiss {
    color: #80e0b8 !important;
}

/* Summary panel */
body.dark-mode .rb-summary-panel {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .rb-summary-panel .panel-heading {
    background-color: #2a2e36;
    color: #d4d4d8;
}

body.dark-mode .rb-summary-section-title {
    color: #5fe3c0;
    border-bottom-color: #3a3f47;
}

body.dark-mode .rb-section-chevron::after {
    border-top-color: #5fe3c0;
}

body.dark-mode .rb-summary-list li {
    color: #d4d4d8 !important;
}

body.dark-mode .rb-summary-empty {
    color: #71717a !important;
}

body.dark-mode .rb-summary-detail {
    color: #a1a1aa;
}

body.dark-mode .rb-summary-detail strong {
    color: #d4d4d8;
}

body.dark-mode .rb-summary-dim {
    color: #71717a;
}

body.dark-mode .rb-summary-gb-item {
    color: #d4d4d8;
}

body.dark-mode .rb-summary-gb-total {
    color: #e4e4e7;
}

body.dark-mode .rb-summary-nav:hover {
    color: #34d399;
}

/* Report Builder pills / badges */
body.dark-mode .badge,
body.dark-mode .label {
    background-color: #333842;
    color: #d4d4d8;
}

/* Inline border-color overrides on .roundedcorners with inline styles */
body.dark-mode div[style*="border-color:#004440"],
body.dark-mode div[style*="border-color: #004440"] {
    border-color: #3a3f47 !important;
}

/* Product set tab strip */
body.dark-mode #ProductSetTabStrip {
    background-color: #22262e;
    border-color: #3a3f47;
}

body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item,
body.dark-mode #ProductSetTabStrip .k-tabstrip-items-wrapper .k-item {
    background: #2a2e36 !important;
    border: 1px solid #3a3f47 !important;
}

body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item .k-link,
body.dark-mode #ProductSetTabStrip .k-tabstrip-items-wrapper .k-item .k-link {
    color: #b9bbbe !important;
    background: transparent !important;
}

body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item:hover .k-link,
body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item.k-state-hover .k-link,
body.dark-mode #ProductSetTabStrip .k-tabstrip-items-wrapper .k-item:hover .k-link {
    color: #e4e4e7 !important;
    background: #333842 !important;
}

body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item.k-state-active,
body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item.k-tab-on-top,
body.dark-mode #ProductSetTabStrip .k-tabstrip-items-wrapper .k-item.k-active {
    background: #22262e !important;
    border: 1px solid #3a3f47 !important;
    border-bottom-color: #22262e !important;
    margin-bottom: -1px;
}

body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item.k-state-active .k-link,
body.dark-mode #ProductSetTabStrip > .k-tabstrip-items .k-item.k-tab-on-top .k-link,
body.dark-mode #ProductSetTabStrip .k-tabstrip-items-wrapper .k-item.k-active .k-link {
    color: #e4e4e7 !important;
    background: #22262e !important;
}

body.dark-mode #ProductSetTabStrip > .k-content,
body.dark-mode #ProductSetTabStrip .k-tabstrip-content {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* ============================================================
   FILTER PANEL OVERRIDES
   ============================================================ */

body.dark-mode #FilterPanelBar {
    background-color: #22262e;
    border-color: #3a3f47;
}

body.dark-mode #FilterPanelBar > .k-item,
body.dark-mode #FilterPanelBar > .k-panelbar-item,
body.dark-mode #FilterPanelBar > .k-panelbar-header {
    background: #22262e !important;
    background-color: #22262e !important;
    border-color: #3a3f47 !important;
}

body.dark-mode #FilterPanelBar > .k-item > .k-link,
body.dark-mode #FilterPanelBar > .k-panelbar-item > .k-link,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode #FilterPanelBar > .k-item > .k-link.k-state-selected,
body.dark-mode #FilterPanelBar > .k-item > .k-link.k-header.k-state-selected,
body.dark-mode #FilterPanelBar > .k-panelbar-item > .k-link.k-selected,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link.k-selected {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode #FilterPanelBar > .k-item > .k-link:hover,
body.dark-mode #FilterPanelBar > .k-panelbar-item > .k-link:hover,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link:hover,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link.k-selected:hover {
    background-color: #3e4350 !important;
    color: #e4e4e7 !important;
}

body.dark-mode #FilterPanelBar > .k-panelbar-item.k-expanded > .k-link,
body.dark-mode #FilterPanelBar > .k-panelbar-item.k-expanded > .k-link.k-selected,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link.k-selected {
    background-color: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode #FilterPanelBar > .k-panelbar-item.k-expanded > .k-link:hover,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link:hover,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link.k-selected:hover {
    background-color: #3e4350 !important;
    color: #e4e4e7 !important;
}

body.dark-mode #FilterPanelBar > .k-panelbar-item > .k-link:active,
body.dark-mode #FilterPanelBar > .k-panelbar-item > .k-link.k-active,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link:active,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link.k-active,
body.dark-mode #FilterPanelBar > .k-panelbar-header > .k-link.k-selected:active,
body.dark-mode #FilterPanelBar > .k-panelbar-item.k-expanded > .k-link:active,
body.dark-mode #FilterPanelBar > .k-panelbar-item.k-expanded > .k-link.k-active,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link:active,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link.k-active,
body.dark-mode #FilterPanelBar > .k-panelbar-header.k-expanded > .k-link.k-selected:active {
    background-color: #242830 !important;
    color: #d4d4d8 !important;
}

body.dark-mode #FilterPanelBar .k-content,
body.dark-mode #FilterPanelBar .k-panelbar-content {
    background-color: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode #filterpanel {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8;
}

body.dark-mode #filterpanel table {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8;
}

body.dark-mode #filterpanel table td {
    color: #d4d4d8;
}

/* ============================================================
   NOTIFICATION PANEL DARK-MODE TWEAKS
   ============================================================ */

body.dark-mode .notification-panel {
    background-color: #2a2e36;
}

body.dark-mode .notification-panel-header {
    border-color: #3a3f47;
}

body.dark-mode .notification-clear-all {
    color: #1ecb8b !important;
    background: none !important;
    border: none !important;
}

body.dark-mode .notification-clear-all:hover {
    background: rgba(30, 203, 139, 0.15) !important;
    color: #fff !important;
}

body.dark-mode .notification-card {
    background-color: #22262e;
}

body.dark-mode .notification-card:hover {
    background-color: #262a32;
}

/* ============================================================
   NEWS PANEL DARK-MODE TWEAKS
   ============================================================ */

body.dark-mode .news-panel {
    background-color: #2a2e36;
}

body.dark-mode .news-panel-header {
    border-color: #3a3f47;
}

body.dark-mode .news-panel-footer {
    border-color: #3a3f47;
}

body.dark-mode .news-card {
    background-color: #22262e;
}

body.dark-mode .news-archive-toggle {
    border-color: #3a3f47;
}

/* ============================================================
   DASHBOARD / SLIDE-IN PANEL
   ============================================================ */

body.dark-mode #slide-in-share {
    background-color: #22262e;
    border-color: #3a3f47;
}

body.dark-mode #slide-in-handle {
    background-color: #2a2e36;
    color: #d4d4d8;
}

body.dark-mode .slider_container .slider_item {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .slider_container .slider_item:hover {
    background-color: #3e4350;
    color: #e4e4e7;
}

/* ============================================================
   AUTH PAGES (Login, Register, etc.)
   ============================================================ */

body.dark-mode .auth-page,
body.dark-mode .login-page,
body.dark-mode .register-page {
    background-color: #1a1d23;
    color: #d4d4d8;
}

body.dark-mode .auth-container,
body.dark-mode .login-container {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #d4d4d8;
}

/* ============================================================
   SCROLLBAR STYLING
   ============================================================ */

body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1a1d23;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #3a3f47;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4a4f57;
}

/* Firefox scrollbar */
body.dark-mode * {
    scrollbar-color: #3a3f47 #1a1d23;
}

/* ============================================================
   MISC INLINE-STYLE OVERRIDES
   ============================================================ */

/* Summary divs with inline white backgrounds */
body.dark-mode .summary-panel div[style*="background"],
body.dark-mode .rb-summary-panel div[style*="background"] {
    background: #22262e !important;
    background-color: #22262e !important;
    color: #d4d4d8 !important;
}

/* Report selector */
body.dark-mode .report-selector,
body.dark-mode .report-list-container {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* "Dim" text adjustments */
body.dark-mode .text-muted,
body.dark-mode .help-block {
    color: #71717a !important;
}

/* btn-default override */
body.dark-mode .btn-default {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .btn-default:hover {
    background-color: #3e4350;
    color: #e4e4e7;
}

/* ── Kendo numeric textbox (old classes) ── */
body.dark-mode .k-numeric-wrap {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

body.dark-mode .k-numeric-wrap .k-input {
    color: #d4d4d8;
    background-color: #2a2e36;
}

body.dark-mode .k-numeric-wrap .k-select {
    background-color: #333842;
    border-color: #3a3f47;
}

body.dark-mode .k-numeric-wrap .k-link {
    color: #d4d4d8;
}

/* ── Kendo DatePicker (old classes) ── */
body.dark-mode .k-datepicker .k-picker-wrap {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

body.dark-mode .k-datepicker .k-input {
    color: #d4d4d8;
}

body.dark-mode .k-datepicker .k-select {
    background-color: #333842;
    border-color: #3a3f47;
}

/* ── Kendo 2024: Input wrappers (k-input used as wrapper class) ── */
body.dark-mode .k-datepicker.k-input,
body.dark-mode .k-numerictextbox.k-input,
body.dark-mode .k-combobox.k-input,
body.dark-mode .k-numerictextbox {
    background-color: #2a2e36 !important;
    border-color: #3a3f47 !important;
    overflow: hidden;
}

body.dark-mode .k-input .k-input-inner {
    color: #d4d4d8 !important;
    background-color: transparent !important;
}

body.dark-mode .k-input-spinner .k-button,
body.dark-mode .k-spin-button .k-button {
    background: #333842 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
    border-radius: 0 !important;
    margin-right: 0 !important;
}

body.dark-mode .k-input-spinner .k-button:hover,
body.dark-mode .k-spin-button .k-button:hover {
    background: #3e4350 !important;
    color: #e4e4e7 !important;
}

/* ── Kendo Menu ── */
body.dark-mode .k-menu {
    background-color: #2a2e36;
    color: #d4d4d8;
}

body.dark-mode .k-menu .k-item > .k-link {
    color: #d4d4d8;
}

body.dark-mode .k-menu .k-item:hover > .k-link,
body.dark-mode .k-menu .k-item.k-state-hover > .k-link {
    background-color: #333842;
    color: #e4e4e7;
}

body.dark-mode .k-menu .k-group {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

/* ── Modal / dialog backdrops ── */
body.dark-mode .modal-content {
    background-color: #22262e;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode .modal-header {
    background-color: #2a2e36;
    border-color: #3a3f47;
    color: #e4e4e7;
}

body.dark-mode .modal-footer {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

/* ── breadcrumb ── */
body.dark-mode .breadcrumb {
    background-color: #22262e;
    color: #d4d4d8;
}

body.dark-mode .breadcrumb > li + li::before {
    color: #71717a;
}

/* ── dropdown-menu ── */
body.dark-mode .dropdown-menu {
    background-color: #2a2e36;
    border-color: #3a3f47;
    color: #d4d4d8;
}

body.dark-mode .dropdown-menu > li > a {
    color: #d4d4d8;
}

body.dark-mode .dropdown-menu > li > a:hover,
body.dark-mode .dropdown-menu > li > a:focus {
    background-color: #333842;
    color: #e4e4e7;
}

/* ── nav-tabs and nav-pills ── */
body.dark-mode .nav-tabs {
    border-color: #3a3f47;
}

body.dark-mode .nav-tabs > li > a {
    color: #a1a1aa;
}

body.dark-mode .nav-tabs > li > a:hover {
    border-color: #3a3f47;
    background-color: #2a2e36;
    color: #e4e4e7;
}

body.dark-mode .nav-tabs > li.active > a,
body.dark-mode .nav-tabs > li.active > a:hover,
body.dark-mode .nav-tabs > li.active > a:focus {
    background-color: #22262e;
    border-color: #3a3f47;
    color: #e4e4e7;
    border-bottom-color: transparent;
}

/* ── Kendo Scheduler ── */
body.dark-mode .k-scheduler {
    background-color: #22262e;
    color: #d4d4d8;
}

body.dark-mode .k-scheduler-header {
    background-color: #2a2e36;
}

/* ── Various inline-style table overrides ── */
body.dark-mode table[style*="background-color: white"],
body.dark-mode table[style*="background-color:white"],
body.dark-mode table[style*="background: white"],
body.dark-mode table[style*="background:white"] {
    background: #22262e !important;
    background-color: #22262e !important;
}

body.dark-mode td[style*="background-color: white"],
body.dark-mode td[style*="background-color:white"] {
    background: #22262e !important;
    background-color: #22262e !important;
}

/* ── Kendo Grid filter row ── */
body.dark-mode .k-grid .k-filter-row th {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

body.dark-mode .k-grid .k-filter-row .k-dropdown-wrap {
    background-color: #2a2e36;
    border-color: #3a3f47;
}

/* ── Miscellaneous ── */
body.dark-mode legend {
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode fieldset {
    border-color: #3a3f47;
}

body.dark-mode pre,
body.dark-mode code {
    background-color: #2a2e36;
    color: #d4d4d8;
    border-color: #3a3f47;
}

body.dark-mode blockquote {
    border-color: #3a3f47;
    color: #a1a1aa;
}

/* Ensure Kendo header/group text uses correct color */
body.dark-mode .k-header {
    color: #d4d4d8;
}

body.dark-mode .k-widget,
body.dark-mode .k-dropdownlist,
body.dark-mode .k-combobox,
body.dark-mode .k-datepicker,
body.dark-mode .k-numerictextbox {
    color: #d4d4d8;
}

/* ── Full Product Set Selector ── */
body.dark-mode .product-set-selector,
body.dark-mode #fullProductSetSelector {
    background-color: #22262e;
    color: #d4d4d8;
}

/* ── Kendo Drag Clue ── */
body.dark-mode .k-drag-clue {
    background-color: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}

/* ── Report name banner override ── */
body.dark-mode #reportName {
    background: #22262e !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

/* ── .divTable input.k-textbox white background override ── */
body.dark-mode .divTable input.k-textbox {
    background: #2a2e36 !important;
    color: #d4d4d8 !important;
}

/* ── Kendo AutoComplete ── */
body.dark-mode .k-autocomplete,
body.dark-mode .k-autocomplete:hover,
body.dark-mode .k-autocomplete.k-state-hover,
body.dark-mode .k-autocomplete.k-state-focused {
    background: #2a2e36 !important;
    color: #d4d4d8 !important;
    border-color: #3a3f47 !important;
}

body.dark-mode .k-autocomplete .k-input {
    color: #d4d4d8;
}

/* ============================================================
   REPORT BUILDER – ADDITIONAL INLINE-STYLE OVERRIDES
   (discovered from full HTML scan)
   ============================================================ */

/* Kendo TabStrip wrapper (added by Kendo around the tab widget) */
body.dark-mode .k-tabstrip-wrapper {
    background-color: transparent !important;
    border-color: #3a3f47;
}

/* Selection summary banners (Saved Product Set, Vendor, Store) */
body.dark-mode #savedProductSetSummary,
body.dark-mode #vendorSelectionSummary,
body.dark-mode #storeSelectionSummary {
    background: #22262e !important;
    border-color: #3a3f47 !important;
    color: #d4d4d8 !important;
}

body.dark-mode #savedProductSetSummary span,
body.dark-mode #vendorSelectionSummary span,
body.dark-mode #storeSelectionSummary span {
    color: #d4d4d8 !important;
}

/* Product Set area – white .k-item borders from inline <style> */
body.dark-mode .k-panelbar .k-list .k-item {
    border-color: #3a3f47 !important;
}

/* Group By nesting styles (injected dynamically via JS) */
body.dark-mode .gb-row-total {
    background: #2a2e36 !important;
    color: #d4d4d8 !important;
}

body.dark-mode .gb-row-even {
    background: #262a32 !important;
    color: #d4d4d8 !important;
}

body.dark-mode .gb-connector {
    border-color: #5a8aab !important;
}

/* Inline color:#336699 on "Available" / "Selected" strong labels */
body.dark-mode strong[style*="color:#336699"],
body.dark-mode strong[style*="color: #336699"] {
    color: #7bafd4 !important;
}

/* Inline color:#888 (e.g. Reset button) */
body.dark-mode button[style*="color:#888"],
body.dark-mode button[style*="color: #888"],
body.dark-mode span[style*="color:#888"],
body.dark-mode span[style*="color: #888"] {
    color: #a1a1aa !important;
}

/* Inline color:#333 on spans */
body.dark-mode span[style*="color:#333"],
body.dark-mode span[style*="color: #333"] {
    color: #d4d4d8 !important;
}

/* Inline color:red on error divs */
body.dark-mode div[style*="color:red"],
body.dark-mode div[style*="color: red"] {
    color: #f87171 !important;
}

/* Metric list item bottom border (rgb(0,68,64)) */
body.dark-mode #_MetricSelector_SelectedList .k-item div[style*="border-color:rgb(0,68,64)"],
body.dark-mode #_MetricSelector_SelectedList .k-item div[style*="border-color: rgb(0,68,64)"] {
    border-color: #3a5f6e !important;
}

/* Inline border-color:#004440 on .roundedcorners containers */
body.dark-mode .roundedcorners[style*="border-color:#004440"],
body.dark-mode .roundedcorners[style*="border-color: #004440"],
body.dark-mode div[style*="border-color:#004440"],
body.dark-mode div[style*="border-color: #004440"] {
    border-color: #3a3f47 !important;
}

/* Inline background:#eef8f4 (selection summary backgrounds) */
body.dark-mode div[style*="background:#eef8f4"],
body.dark-mode div[style*="background: #eef8f4"] {
    background: #22262e !important;
}

/* Inline border:1px solid #a3d9c9 */
body.dark-mode div[style*="border:1px solid #a3d9c9"],
body.dark-mode div[style*="border: 1px solid #a3d9c9"] {
    border-color: #3a3f47 !important;
}

/* .k-listbox empty state text */
body.dark-mode .k-listbox .k-list-ul:empty::after {
    color: #71717a !important;
}

/* Metric badge in template – keep bright on dark */
body.dark-mode .badge {
    background-color: #333842;
    color: #d4d4d8;
}

/* (rb-section-header consolidated above in Report Builder section) */

/* .rb-sub-header-centered bottom border */
body.dark-mode .rb-sub-header-centered {
    border-bottom-color: #3a3f47 !important;
}

/* ============================================================
   KENDO 2024 CLASS COMPATIBILITY
   Kendo 2024 renamed state classes and restructured many
   component wrappers. These rules add the new class selectors
   alongside the old ones already above.
   ============================================================ */

/* ── Font size normalization ── */
body.dark-mode .k-panelbar,
body.dark-mode .k-tabstrip,
body.dark-mode .k-listbox,
body.dark-mode .k-picker,
body.dark-mode .k-input:not([type]),
body.dark-mode .k-numerictextbox,
body.dark-mode .k-datepicker,
body.dark-mode .k-combobox,
body.dark-mode .k-dropdownlist {
    font-size: 14px;
}

body.dark-mode .k-list-item,
body.dark-mode .k-list-item .k-list-item-text {
    font-size: 14px;
}

body.dark-mode .k-panelbar-item .k-panelbar-item-text {
    font-size: 14px;
}

/* ── Kendo 2024 state class overrides ── */
body.dark-mode .k-selected {
    background-color: #1a3a4a;
    color: #d4d4d8;
}

body:not(.dark-mode) .k-listbox .k-selected {
    background-color: #004440 !important;
    color: #ffffff !important;
}

body.dark-mode .k-hover {
    background-color: #333842;
    color: #e4e4e7;
}

body.dark-mode .k-disabled {
    opacity: 0.65;
}

/* ── Kendo 2024 Calendar state classes ── */
body.dark-mode .k-calendar td.k-selected {
    background-color: #5fe3c0;
    color: #1a1d23;
}

/* ── Kendo 2024 Checkbox wrapper ── */
body.dark-mode .k-checkbox-wrap .k-checkbox {
    background-color: #2a2e36 !important;
    border-color: #4a4f57 !important;
}

body.dark-mode .k-checkbox-wrap .k-checkbox:checked {
    background-color: #5fe3c0 !important;
    border-color: #5fe3c0 !important;
    color: #1a1d23 !important;
}

/* ── Kendo 2024 Button disabled (new class) ── */
body.dark-mode .k-button.k-disabled {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    color: #71717a !important;
    opacity: 0.65;
}

/* ── Kendo 2024 validation icon ── */
body.dark-mode .k-input-validation-icon {
    color: #d4d4d8;
}

/* ── Kendo 2024 popup list ── */
body.dark-mode .k-popup .k-list-item {
    color: #d4d4d8;
    background-color: #2a2e36 !important;
}

body.dark-mode .k-popup .k-list-item:hover,
body.dark-mode .k-popup .k-list-item.k-hover {
    background-color: #333842 !important;
    color: #e4e4e7;
}

body.dark-mode .k-popup .k-list-item.k-selected {
    background-color: #1a3a4a !important;
    color: #d4d4d8;
}

body.dark-mode .k-popup .k-list-item.k-focus {
    background-color: #333842 !important;
    color: #e4e4e7;
}

/* Dashboard sticky toolbar */
body.dark-mode .dashboard-toolbar {
    background-color: #1e2128;
    border-bottom-color: #3a3f47;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Pill-style toggle buttons */
body.dark-mode .pill-toggle {
    background: #333842;
    color: #d4d4d8;
    border-color: #3a3f47;
}
body.dark-mode .pill-toggle.category-active {
    background: #2a7f8e;
    color: #fff;
    border-color: #2a7f8e;
}
body.dark-mode .pill-toggle:hover:not(.category-active) {
    background: #3e4350;
    color: #e4e4e7;
}