/* ==========================================================================
   Dark mode overrides
   Kendo default-v2 ships hard-coded light colors; override per-component here.
   ========================================================================== */

:root[data-theme="dark"] {
  --bg-primary-light: rgba(242, 83, 13, 0.18);
  --bg-secondary-light: rgba(184, 209, 36, 0.18);
  --bg-white: #1f1d1c;
  --bg-error-light: #4d1a1a;
  --bg-lighter: #161413;
  --bg-light: #1c1a19;
  --bg-neutral: #2e2b29;
  --bg-dark: #cbd3d6;
  --bg-darker: #e4e8e9;
  --bg-hover: rgba(255, 255, 255, 0.06);
  --bg-stripe: #1a1817;
  --color-border-light: #24211f;
  --color-border: #2c2826;
  --color-border-dark: #525f68;
  --text-primary: #e4e8e9;
  --text-secondary: #cbd3d6;
  --text-soft: #8a9aa3;
  --text-error: #fca5a5;
  --shadow-card: 0 2px 2px 0 rgba(0, 0, 0, 0.4);
  --col-bg-1: #5a2826;
  --grid-border: #3a3633;
}

[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="dark"] body {
  background-color: var(--bg-lighter);
}
[data-theme="dark"] mark {
  color: #1a1a1a;
}
[data-theme="dark"] hr {
  color: var(--color-border);
  opacity: 1;
}
[data-theme="dark"] img.logo {
  filter: brightness(0) invert(1);
}

/* ----- Front / login pages ----- */
[data-theme="dark"] .front-grey {
  background-color: var(--bg-light);
}
[data-theme="dark"] .front-illustration img {
  opacity: 0.35;
  filter: saturate(0.75) brightness(0.75);
}
[data-theme="dark"] .front-box {
  border-color: var(--color-border);
  box-shadow: none;
}
[data-theme="dark"] .front-box .text-muted {
  color: var(--text-soft) !important;
}
[data-theme="dark"] .front-box .text-danger {
  color: var(--text-error) !important;
}
[data-theme="dark"] .front-box .text-success {
  color: var(--bg-secondary) !important;
}
[data-theme="dark"] .front-list,
[data-theme="dark"] .front-box p,
[data-theme="dark"] .front-box li {
  color: var(--text-secondary);
}
[data-theme="dark"] .front-box b {
  color: var(--text-primary);
}

/* Bootstrap dropdown menu in topbar */
[data-theme="dark"] .dropdown-menu {
  --bs-dropdown-bg: var(--bg-white);
  --bs-dropdown-color: var(--text-primary);
  --bs-dropdown-link-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--bg-hover);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-border-color: var(--color-border);
}

/* Bootstrap form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  color: var(--text-secondary);
  background-color: var(--bg-lighter);
  border-color: var(--color-border);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  color: var(--text-secondary);
  background-color: var(--bg-lighter);
  border-color: var(--bg-primary);
  box-shadow: none;
}
[data-theme="dark"] .form-control::placeholder {
  color: var(--text-soft);
}

/* Bootstrap secondary button needs explicit dark surface */
[data-theme="dark"] .btn-secondary {
  --bs-btn-bg: var(--bg-white);
  --bs-btn-hover-bg: var(--bg-neutral);
  --bs-btn-active-bg: var(--bg-neutral);
}
[data-theme="dark"] .btn-checkbox {
  --bs-btn-color: var(--text-primary);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-color: var(--text-primary);
  color: var(--text-primary);
  background-color: var(--bg-white);
}
[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-bg: var(--bg-hover);
  --bs-btn-hover-border-color: var(--color-border);
}

/* Bootstrap close button (offcanvas) */
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap offcanvas */
[data-theme="dark"] .offcanvas {
  background-color: var(--bg-white);
  color: var(--text-primary);
}

/* ----- Kendo Grid ----- */
[data-theme="dark"] .k-grid {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--grid-border);
}
[data-theme="dark"] .k-grid-header,
[data-theme="dark"] .k-grid-header-wrap,
[data-theme="dark"] .k-grid-header .k-header {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--grid-border);
}
[data-theme="dark"] .k-grid-header .k-header > .k-link,
[data-theme="dark"] .k-grid-header .k-column-title {
  color: var(--text-primary);
}
[data-theme="dark"] .k-grid-content,
[data-theme="dark"] .k-grid-container {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--grid-border);
}
[data-theme="dark"] .k-grid td {
  color: var(--text-primary);
  background-color: transparent;
  border-color: var(--grid-border);
}
[data-theme="dark"] .k-grid th,
[data-theme="dark"] .k-grid-header .k-grid-header-table th {
  border-color: var(--grid-border);
}
[data-theme="dark"] .k-grid tbody tr {
  background-color: var(--bg-white);
}
[data-theme="dark"] .k-grid tbody tr.k-alt,
[data-theme="dark"] .k-grid tbody tr.k-table-alt-row,
[data-theme="dark"] .k-grid tbody tr:nth-child(even) {
  background-color: var(--bg-stripe);
}
[data-theme="dark"] .k-grid tbody tr:hover,
[data-theme="dark"] .k-grid tbody tr.k-hover {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .k-grid tbody tr.k-selected,
[data-theme="dark"] .k-grid tbody tr.k-state-selected {
  background-color: var(--bg-primary-light);
}
[data-theme="dark"] .k-grid-toolbar,
[data-theme="dark"] .k-grid-pager,
[data-theme="dark"] .k-pager,
[data-theme="dark"] .k-pager-wrap,
[data-theme="dark"] .k-grouping-header,
[data-theme="dark"] .k-filter-row {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--color-border-light);
}

/* ----- Kendo ListView ----- */
[data-theme="dark"] .k-listview,
[data-theme="dark"] .k-listview-content {
  color: var(--text-primary);
  background-color: var(--bg-lighter);
  border-color: var(--color-border);
}
[data-theme="dark"] .list-view-item,
[data-theme="dark"] .update-card,
[data-theme="dark"] .roadmap-new-card {
  background-color: var(--bg-white);
  color: var(--text-primary);
  border-color: #3a3633;
}
[data-theme="dark"] .update-card-footer,
[data-theme="dark"] .roadmap-new-card-body {
  border-top-color: #3a3633;
}
[data-theme="dark"] .k-grid .k-grouping-row td,
[data-theme="dark"] .k-grid tfoot,
[data-theme="dark"] .k-grid tfoot td {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--color-border-light);
}
[data-theme="dark"] .k-pager-numbers .k-link,
[data-theme="dark"] .k-pager-nav .k-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .k-pager-info,
[data-theme="dark"] .k-pager-sizes {
  color: var(--text-soft);
}
[data-theme="dark"] .k-pager .k-button,
[data-theme="dark"] .k-pager-refresh,
[data-theme="dark"] .k-pager-nav.k-link {
  color: var(--text-secondary);
  background-color: transparent;
  border-color: transparent;
}
[data-theme="dark"] .k-pager .k-button:hover,
[data-theme="dark"] .k-pager .k-button.k-hover,
[data-theme="dark"] .k-pager-refresh:hover,
[data-theme="dark"] .k-pager-nav.k-link:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
  border-color: transparent;
}

/* ----- Inputs / Pickers ----- */
[data-theme="dark"] .k-input-solid,
[data-theme="dark"] .k-picker-solid {
  color: var(--text-secondary);
  background-color: var(--bg-lighter);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-input-solid .k-input-inner,
[data-theme="dark"] .k-picker-solid .k-input-inner,
[data-theme="dark"] .k-input-inner,
[data-theme="dark"] .k-input-value-text {
  color: var(--text-secondary);
  background-color: transparent;
}
[data-theme="dark"] .k-input-button,
[data-theme="dark"] .k-picker-solid .k-input-button,
[data-theme="dark"] .k-spinner-increase,
[data-theme="dark"] .k-spinner-decrease {
  color: var(--text-secondary);
  background-color: var(--bg-light);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-input-button:hover,
[data-theme="dark"] .k-picker-solid .k-input-button:hover {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .k-input-solid::placeholder,
[data-theme="dark"] .k-picker-solid::placeholder,
[data-theme="dark"] .k-input-inner::placeholder {
  color: var(--text-soft);
}

/* ----- Popups (autocomplete / dropdown menus) ----- */
[data-theme="dark"] .k-popup,
[data-theme="dark"] .k-list,
[data-theme="dark"] .k-list-content,
[data-theme="dark"] .k-menu-popup {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-list-item,
[data-theme="dark"] .k-list-optionlabel {
  color: var(--text-primary);
}
[data-theme="dark"] .k-list-item.k-hover,
[data-theme="dark"] .k-list-item:hover,
[data-theme="dark"] .k-list-optionlabel.k-hover,
[data-theme="dark"] .k-list-optionlabel:hover {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .k-list-group-sticky-header,
[data-theme="dark"] .k-list-header {
  color: var(--text-soft);
  background-color: var(--bg-light);
  border-color: var(--color-border);
}

/* ----- Window / Dialog ----- */
[data-theme="dark"] .k-window,
[data-theme="dark"] .k-dialog,
[data-theme="dark"] .k-window-content,
[data-theme="dark"] .k-dialog-content {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-window-titlebar {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-window-titlebar .k-window-title {
  color: var(--text-primary);
}
[data-theme="dark"] .k-window-actions .k-button {
  color: var(--text-primary);
  background-color: transparent;
  border-color: transparent;
}
[data-theme="dark"] .k-window-actions .k-button:hover {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .k-dialog-titlebar .k-button {
  color: var(--bg-white);
}
[data-theme="dark"] .k-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

/* ----- Calendar / Date picker ----- */
[data-theme="dark"] .k-calendar,
[data-theme="dark"] .k-calendar-view,
[data-theme="dark"] .k-calendar .k-content,
[data-theme="dark"] .k-datetime-container,
[data-theme="dark"] .k-time-list-container {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-calendar .k-calendar-th,
[data-theme="dark"] .k-calendar .k-calendar-caption {
  color: var(--text-soft);
}
[data-theme="dark"] .k-calendar .k-link,
[data-theme="dark"] .k-calendar td .k-calendar-cell-inner {
  color: var(--text-primary);
}
[data-theme="dark"] .k-calendar .k-calendar-td.k-hover .k-link,
[data-theme="dark"] .k-calendar .k-calendar-td:hover .k-link,
[data-theme="dark"] .k-calendar .k-calendar-td.k-hover .k-calendar-cell-inner,
[data-theme="dark"] .k-calendar .k-calendar-td:hover .k-calendar-cell-inner {
  background-color: var(--bg-hover);
}
[data-theme="dark"] .k-calendar .k-other-month .k-link,
[data-theme="dark"] .k-calendar .k-alt {
  color: var(--text-soft);
}

/* ----- Buttons (Kendo base) ----- */
[data-theme="dark"] .k-button-solid-base {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-button-solid-base:hover,
[data-theme="dark"] .k-button-solid-base.k-hover,
[data-theme="dark"] .k-button-solid-base:active,
[data-theme="dark"] .k-button-solid-base.k-active {
  background-color: var(--bg-hover);
  border-color: var(--color-border);
}

/* ----- Toolbar ----- */
[data-theme="dark"] .k-toolbar {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--color-border-light);
}

/* ----- Tooltip ----- */
[data-theme="dark"] .k-tooltip {
  color: var(--text-primary);
  background-color: var(--bg-neutral);
  border-color: var(--color-border-dark);
}

/* ----- Upload ----- */
[data-theme="dark"] .k-upload,
[data-theme="dark"] .k-dropzone,
[data-theme="dark"] .k-upload-files,
[data-theme="dark"] .k-upload-status {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-dropzone .k-dropzone-hint,
[data-theme="dark"] .k-upload .k-upload-status,
[data-theme="dark"] .k-file,
[data-theme="dark"] .k-file-name,
[data-theme="dark"] .k-file-info,
[data-theme="dark"] .k-file-size,
[data-theme="dark"] .k-file-validation-message {
  color: var(--text-secondary);
}
[data-theme="dark"] .k-upload .k-file {
  background-color: var(--bg-light);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-upload .k-upload-button {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-upload .k-upload-button:hover {
  background-color: var(--bg-hover);
}

/* ----- Notification / Toastr ----- */
[data-theme="dark"] .k-notification {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] #toast-container > div {
  opacity: 0.95;
  box-shadow: var(--shadow-card);
}

/* ----- Tabs ----- */
[data-theme="dark"] .k-tabstrip,
[data-theme="dark"] .k-tabstrip-items,
[data-theme="dark"] .k-tabstrip-content {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-tabstrip-items .k-item,
[data-theme="dark"] .k-tabstrip-items .k-link {
  color: var(--text-secondary);
}
[data-theme="dark"] .k-tabstrip-items .k-item.k-active,
[data-theme="dark"] .k-tabstrip-items .k-state-active {
  color: var(--bg-primary);
  background-color: var(--bg-white);
}

/* ----- Checkboxes / radios ----- */
[data-theme="dark"] .k-checkbox:not(.k-checked):not(.k-indeterminate),
[data-theme="dark"] .k-radio:not(.k-checked) {
  background-color: var(--bg-lighter);
  border-color: var(--color-border-dark);
}

/* ----- Editor (CK editor) ----- */
[data-theme="dark"] .ck.ck-editor__main > .ck-editor__editable,
[data-theme="dark"] .ck.ck-toolbar,
[data-theme="dark"] .ck.ck-content,
[data-theme="dark"] .ck.ck-editor__top,
[data-theme="dark"] .ck.ck-sticky-panel__content,
[data-theme="dark"] .ck.ck-toolbar__items,
[data-theme="dark"] .ck.ck-toolbar_grouping,
[data-theme="dark"] .ck.ck-editor__main {
  color: var(--text-primary) !important;
  background-color: var(--bg-white) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .ck.ck-button,
[data-theme="dark"] .ck.ck-dropdown__button,
[data-theme="dark"] .ck.ck-dropdown__panel {
  color: var(--text-primary) !important;
  background-color: var(--bg-white) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .ck.ck-button .ck-button__label,
[data-theme="dark"] .ck.ck-dropdown__button .ck-button__label,
[data-theme="dark"] .ck.ck-button .ck-icon,
[data-theme="dark"] .ck.ck-button .ck-button__icon,
[data-theme="dark"] .ck.ck-icon * {
  color: var(--text-primary) !important;
  fill: var(--text-primary) !important;
}
[data-theme="dark"] .ck.ck-button:hover:not(.ck-disabled),
[data-theme="dark"] .ck.ck-dropdown__button:hover:not(.ck-disabled) {
  background-color: var(--bg-hover) !important;
}
[data-theme="dark"] .ck.ck-button.ck-on,
[data-theme="dark"] .ck.ck-dropdown__button.ck-on {
  background-color: var(--bg-neutral) !important;
  color: var(--bg-secondary) !important;
}
[data-theme="dark"] .ck.ck-button.ck-on .ck-icon,
[data-theme="dark"] .ck.ck-button.ck-on .ck-button__icon,
[data-theme="dark"] .ck.ck-button.ck-on .ck-icon * {
  color: var(--bg-secondary) !important;
  fill: var(--bg-secondary) !important;
}
[data-theme="dark"] .ck.ck-tooltip .ck-tooltip__text {
  color: var(--text-primary) !important;
  background-color: var(--bg-neutral) !important;
}
[data-theme="dark"] .ck.ck-balloon-panel,
[data-theme="dark"] .ck.ck-balloon-rotator,
[data-theme="dark"] .ck.ck-form,
[data-theme="dark"] .ck.ck-list {
  color: var(--text-primary) !important;
  background-color: var(--bg-white) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .ck.ck-list__item .ck-button,
[data-theme="dark"] .ck.ck-list__item .ck-button .ck-button__label {
  background-color: transparent !important;
}
[data-theme="dark"] .ck.ck-list__item .ck-button:hover {
  background-color: var(--bg-hover) !important;
}
[data-theme="dark"] .ck.ck-toolbar .ck-toolbar__separator {
  background-color: var(--color-border) !important;
}
[data-theme="dark"] .ck.ck-input,
[data-theme="dark"] .ck.ck-input-text {
  color: var(--text-primary) !important;
  background-color: var(--bg-lighter) !important;
  border-color: var(--color-border) !important;
}

/* ----- Card / List view item shadows softened on dark ----- */
[data-theme="dark"] .libraries li a {
  box-shadow: none;
}
[data-theme="dark"] .libraries li a:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* ----- Filter menu / column menu ----- */
[data-theme="dark"] .k-filter-menu,
[data-theme="dark"] .k-column-menu,
[data-theme="dark"] .k-grid-filter-popup {
  color: var(--text-primary);
  background-color: var(--bg-white);
  border-color: var(--color-border);
}
[data-theme="dark"] .k-grid .k-grid-filter,
[data-theme="dark"] .k-grid .k-header-column-menu {
  color: var(--text-soft);
}
[data-theme="dark"] .k-grid .k-grid-filter.k-active,
[data-theme="dark"] .k-grid .k-header-column-menu.k-active {
  color: var(--bg-primary);
}

/* ----- Form summary error stays readable ----- */
[data-theme="dark"] .form-summary .validation-summary-errors:has(li) {
  color: var(--text-error);
  background-color: var(--bg-error-light);
}

/* ----- Sidebar nav active item ----- */
[data-theme="dark"] .nav .nav-link.active {
  color: var(--bg-secondary);
  background-color: var(--bg-neutral);
}
[data-theme="dark"] .nav .nav-link.active .nav-icon {
  color: var(--bg-secondary);
}

/* ----- Bootstrap .table (plain HTML tables) ----- */
[data-theme="dark"] .table {
  --bs-table-bg: var(--bg-white);
  --bs-table-color: var(--text-primary);
  --bs-table-border-color: var(--grid-border);
  --bs-table-striped-bg: var(--bg-stripe);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: var(--bg-hover);
  --bs-table-hover-color: var(--text-primary);
  color: var(--text-primary);
  border-color: var(--grid-border);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg);
  color: var(--text-primary);
  border-color: var(--grid-border);
  box-shadow: none;
}
[data-theme="dark"] .table > thead {
  background-color: var(--bg-light);
}

/* ----- Kendo loading mask (avoid white flash on data load) ----- */
[data-theme="dark"] .k-loading-mask .k-loading-color {
  background-color: var(--bg-lighter);
  opacity: 0.6;
}
[data-theme="dark"] .k-loading-mask .k-loading-image,
[data-theme="dark"] .k-i-loading {
  color: var(--text-primary);
}

/* ----- Native file input ----- */
[data-theme="dark"] input[type="file"] {
  color: var(--text-primary);
}
[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
  color: var(--text-primary);
  background-color: var(--bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
}
[data-theme="dark"] input[type="file"]::file-selector-button:hover,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover {
  background-color: var(--bg-hover);
}

/* ----- Kendo Charts (SVG dataviz) ----- */
[data-theme="dark"] .k-chart text,
[data-theme="dark"] .k-chart .k-chart-axis text,
[data-theme="dark"] .k-chart .k-chart-legend text {
  fill: var(--text-primary);
}
[data-theme="dark"] .k-chart .k-chart-tooltip {
  color: var(--text-primary);
  background-color: var(--bg-neutral);
  border-color: var(--color-border-dark);
}