/*
 * TISO Command Center - dark mode display fixes (2026-10-11)
 * Load after custom-mobile.css in app/Views/Templates/header.php.
 * Scope: sidebar scrollbars + task-list table header. No API/JS changes.
 * body.dark-only is the existing template's dark-mode switch.
 */

/* 1. Sidebar: retain the original scrolling / SimpleBar behaviour. */
body.dark-only .sidebar-wrapper {
  --tiso-scroll-track: #262932;
  --tiso-scroll-thumb: #7c879e;
  --tiso-scroll-thumb-hover: #a0abc0;
  color-scheme: dark;
}

/* Native scrolling containers, including the fallback before SimpleBar loads. */
body.dark-only .sidebar-wrapper,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar) {
  scrollbar-color: var(--tiso-scroll-thumb) var(--tiso-scroll-track);
  scrollbar-width: thin;
}

/* Fallback for browsers that use the WebKit scrollbar pseudo-elements. */
body.dark-only .sidebar-wrapper::-webkit-scrollbar,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: var(--tiso-scroll-track);
}

body.dark-only .sidebar-wrapper::-webkit-scrollbar-track,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar-track {
  background-color: var(--tiso-scroll-track);
  box-shadow: none;
}

body.dark-only .sidebar-wrapper::-webkit-scrollbar-thumb,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar-thumb {
  background-color: var(--tiso-scroll-thumb);
  border: 2px solid var(--tiso-scroll-track);
  border-radius: 10px;
}

body.dark-only .sidebar-wrapper::-webkit-scrollbar-thumb:hover,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar-thumb:hover {
  background-color: var(--tiso-scroll-thumb-hover);
}

body.dark-only .sidebar-wrapper::-webkit-scrollbar-corner,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar-corner {
  background-color: var(--tiso-scroll-track);
}

body.dark-only .sidebar-wrapper::-webkit-scrollbar-button,
body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar)::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/*
 * Do NOT force scrollbar-width: thin on .simplebar-content-wrapper.
 * SimpleBar hides that native scrollbar with its own CSS. Also reset the
 * inherited scrollbar-color so it does not override SimpleBar's WebKit hiding.
 * color-scheme remains dark if the browser displays a native fallback.
 */
body.dark-only .sidebar-wrapper .simplebar-content-wrapper {
  scrollbar-color: auto;
  color-scheme: dark;
}

body.dark-only .sidebar-wrapper .simplebar-track {
  background-color: transparent !important;
}

body.dark-only .sidebar-wrapper .simplebar-scrollbar::before {
  background-color: var(--tiso-scroll-thumb) !important;
}

body.dark-only .sidebar-wrapper .simplebar-track:hover .simplebar-scrollbar::before {
  background-color: var(--tiso-scroll-thumb-hover) !important;
}

/* 2. Task list: white table-header text, including DataTables title / sorting. */
body.dark-only #task-list-page table > thead > tr > th,
body.dark-only #task-list-page table > thead > tr > td {
  --bs-table-color: #ffffff;
  --bs-table-color-state: #ffffff;
  --bs-table-color-type: #ffffff;
  --bs-table-bg: #222630;
  --bs-table-border-color: #394150;
  color: #ffffff !important;
  background-color: #222630 !important;
  border-color: #394150 !important;
}

body.dark-only #task-list-page table > thead .dt-column-title,
body.dark-only #task-list-page table > thead .dt-column-order,
body.dark-only #task-list-page table > thead .dt-column-order::before,
body.dark-only #task-list-page table > thead .dt-column-order::after {
  color: #ffffff !important;
}

/* Let Windows / browser high-contrast accessibility settings take precedence. */
@media (forced-colors: active) {
  body.dark-only .sidebar-wrapper,
  body.dark-only .sidebar-wrapper :is(.sidebar-main, #sidebar-menu, #simple-bar) {
    scrollbar-color: auto;
  }
}