body.dark {
  color: white;
  background-color: black;
}
body.dark .bg-\[\#fff\],
body.dark .dropdown-content a:hover,
body.dark .probar li .bg-\[\#F0F0F0\],
body.dark .bg-gray-50,
body.dark .bg-gray-100,
body.dark .bg-blue-50,
body.dark .bg-gray-200,
body.dark .bg-dark-50,
body.dark .bg-\[\#f8f8f9\],
body.dark .module-icon,
body.dark .bg-\[white\],
body.dark .tabloading,
body.dark .bg-\[\#f8fafc\]{
  background-color: black !important;
}
body.dark .bg-white {
  background-color: rgb(42 42 42) !important;
}
/* The loading overlay is forced to stark black in the group rule above, which
   looks like a harsh black box against the dark-grey cards while content loads.
   Match it to the card colour so only the spinner shows during loads. */
body.dark .tabloading {
  background-color: rgb(42 42 42) !important;
}
body.dark input,
body.dark textarea,
body.dark .select2-container--default .select2-selection--single,
body.dark .select2-container--default .select2-selection--multiple,
body.dark .note-toolbar,
/* :not(.note-color-btn) — palette swatches are `note-btn note-color-btn` with
   their colour as an inline style; painting them black would blank the whole
   colour picker. */
body.dark .note-btn:not(.note-color-btn){
  background-color: black !important;
}
body.dark .nav-link img {
  filter: brightness(0) invert(1);
}
body.dark .bg-primary-50,
body.dark .bg-primary-100,
body.dark .select2-dropdown,
body.dark .bg-dark-25,
body.dark .bg-yellow-50,
body.dark div:where(.swal2-popup),
body.dark .bg-\[\#f1f1f1\],
body.dark .bg-primary-200,
body.dark .bg-\[\#e9edf0\],
body.dark .hover\:bg-primary-100:hover,
body.dark .hover\:bg-primary-50:hover,
body.dark .bg-blue-100,
body.dark .panel-default>.panel-heading,
body.dark .module-card
{
  background-color: #2f2f2f !important;
}

/* bg-gray-50/40 (Tailwind opacity variant) isn't caught by the .bg-gray-50
   override, so rows using it (e.g. approver steps) stay light-gray in dark
   mode — which reads as a white flash when a loader lifts to reveal them.
   Use a subtle dark tint instead. */
body.dark .bg-gray-50\/40 {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Select2: highlighted (hover) option in dark mode */
body.dark .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: color-mix(in srgb, var(--menu-arrow-fg, #E54F38) 18%, #2f2f2f) !important;
  color: rgb(255 255 255 / 95%) !important;
}
body.dark .header{
  background: transparent;
}
body.dark .text-secondary-900,
body.dark .text-color-600,
body.dark .text-gray-700,
body.dark .text-gray-800,
body.dark .text-gray-900{
  color: #ebebeb;
}
/* Locked-after-create fields in dark mode: keep the "not editable" cue readable
   instead of a light-grey block on the dark card. */
body.dark .locked-field,
body.dark .locked-field:hover {
  background-color: #3a3a3a !important;
  color: #9a9a9a !important;
}

/* History tab in dark mode (generics/templates/history_tab.html).
   The card is repainted to rgb(42 42 42) by the `.bg-white` rule above, which
   left the black field labels unreadable and kept a light-pink card border. The
   changed-value chip keeps the accent hue but on a translucent dark fill so it
   reads against the card instead of glowing as a light block. */
body.dark .history-label {
  color: #ebebeb !important;
}
body.dark .history-diff-new {
  background-color: rgba(229, 79, 56, 0.22) !important;
  color: #ff9583 !important;
}
body.dark .history-card {
  border-color: #565656 !important;
}

/* Modal panel edge in dark mode. The panel is repainted to rgb(42 42 42) by the
   `.bg-white` rule above and sits on a black page with a black drop shadow, so
   without this the modal has no visible edge. Lighter than the light-mode
   border so it reads against the dark surface. */
body.dark .modal-box {
  border-color: #565656 !important;
}

/* NOTE: the multi-step stepper (.progress li .sec::before) used to be in this
   list. It matched every step and carried !important, so it overrode
   `.progress li.active .sec::before` and flattened reached and upcoming steps
   to the same colour — leaving no way to tell which step you were on in dark
   mode. The stepper now themes itself via the --stepper-* variables in
   tailwind_dynamic_config.html, so it must not be repainted here. */
body.dark .nav-link:hover,
body.dark .hover\:bg-\[\#f3f4f6\]:hover,
body.dark #tab-campaigns button:hover,
body.dark input[type="checkbox"],
body.dark .swal2-popup.swal2-toast.custom-toast,
body.dark .panel-default>.panel-heading,
body.dark .note-editor.note-frame .note-editing-area .note-editable{
  background-color: var(--progress-track-bg, #5d5d5d) !important;
}
/* Toggle switch track: keep distinct off/on states in dark mode.
   The global `.bg-gray-200 -> black !important` rule above otherwise flattens
   both the off track (gray) and the on track (peer-checked:bg-primary-600),
   leaving only the knob position as a cue. Restore a visible off color and the
   primary on color. Scoped to these switch tracks via the .peer.rounded-full combo. */
body.dark .peer.bg-gray-200.rounded-full {
  background-color: var(--progress-track-bg, #5d5d5d) !important;
}
body.dark .peer:checked ~ .peer.bg-gray-200.rounded-full {
  background-color: var(--menu-arrow-fg, #E54F38) !important;
}
/* Dropdown item hover (layout + actions) – match detail view: black in dark */
body.dark .hover\:bg-gray-50:hover {
  background-color: black !important;
}
body.dark h1,
body.dark .member-header,
body.dark .probar li div,
body.dark .list-disc,
body.dark .border-\[\#dddddd\],
body.dark .swal2-popup.swal2-toast.custom-toast .swal2-title,
body.dark .module-description ,
body.dark .module-name,
body.dark .text-\[\#756f6fd1\],
body.dark .text-gray-900{
  color: rgb(255 255 255 / 95%) !important;
}
body.dark h3,
body.dark .text-\[\#3d3d3d\] {
  color: rgb(255 255 255 / 90%) !important;
}
body.dark p,
body.dark .swal2-html-container,
body.dark .member-footer div.name,
body.dark .text-dark-200,
body.dark .bg-primary-200 {
  color: rgb(255 255 255 / 80%) !important;
}
body.dark .border-r,
body.dark .border-b,
body.dark .border-t,
body.dark .border,
body.dark .dropdown-content,
body.dark .select2-container--default .select2-selection--single,
body.dark .border-\[\#efefef\],
body.dark .select2-dropdown,
body.dark
  .select2-container--default
  .select2-search--dropdown
  .select2-search__field,
body.dark .border-\[2px\],
body.dark .border-primary-400,
body.dark .select2-container--default .select2-selection--multiple,
body.dark .member-view-box,
body.dark .fc-theme-standard td,
body.dark .fc-theme-standard th,
body.dark .fc-theme-standard .fc-scrollgrid,
body.dark .border-\[\#e5e5e5\],
body.dark .border-\[\#dddddd\],
body.dark button,
body.dark .note-toolbar,
body.dark .border-\[\#e9e9e9\],
body.dark .panel-default>.panel-heading,
body.dark .module-card{
  border-color: #565656 !important;
}
body.dark .border::placeholder {
  color: #b5b5b5 !important;
}
body.dark #settings-sidebar a,
body.dark span,
body.dark button,
body.dark .dropdown-content a,
body.dark label {
  color: rgb(255 255 255 / 80%) !important;
}
body.dark #settings-sidebar a:hover,
body.dark .dropdown-content a:hover {
  color: white !important;
}
body.dark button.text-gray-500 img,
body.dark #profile-edit-btn img,
body.dark img.my-profile-edit-icon,
body.dark #navBar img,
body.dark .bg-dark-25 img,
body.dark #dropdownLeftEndButton img,
/* Chart view actions (same down.svg as report chart; invisible on dark bg without invert) */
body.dark #chartViewActionsButton img,
body.dark
  .after\:bg-\[url\(\/static\/assets\/icons\/right-arrow\.svg\)\]::after,
body.dark #tab-campaigns button img,
body.dark #related-tab-contents button img,
body.dark #modalCloseButton,
body.dark .drag-handle img,
body.dark #exportDropdownButton img,
body.dark #toggleBtn img ,
body.dark #nav-actions img,
body.dark button.absolute img,
body.dark .dropdown-wrapper .text-gray-600 img,
body.dark .cursor-pointer img,
/* Action icons inside modals (Edit / Save / Cancel / comment in the Review Job
   modal). These buttons match none of the selectors above, so their dark SVGs
   were invisible against the dark modal background. */
body.dark #modalBox button img,
body.dark .modal-box button img {
  filter: brightness(0) invert(1);
}
body.dark .svg-themed,
body.dark button .svg-themed,
body.dark button.cursor-pointer .svg-themed {
  filter: none !important;
}
/* Keep real profile/sidebar avatar colors in dark mode */
body.dark img.header-profile-avatar,
body.dark img.settings-sidebar-avatar,
body.dark .cursor-pointer img.header-profile-avatar,
body.dark .cursor-pointer img.settings-sidebar-avatar {
  filter: none !important;
}
body.dark #settings-sidebar .border-t:first-child {
  border-color: transparent !important;
}
body.dark .custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: #7f7f7f #424242;
}
body.dark .bg-primary-300 {
  background-color: #3f3f3f !important;
}

/* Split view: tile hover in dark theme */
body.dark #split-view-tiles .split-view-tile:hover {
  background-color: #3f3f3f !important;
}
/* Split view: keep active tile colors from theme variables in dark mode */
body.dark #split-view-tiles .split-view-tile.split-view-tile-active {
  background-color: var(--split-view-active-bg, #3f3f3f) !important;
  border-left-color: var(--split-view-active-border, #E54F38) !important;
}
body.dark #split-view-tiles .split-view-tile.split-view-tile-active .split-view-tile-name {
  color: var(--split-view-active-border, #E54F38) !important;
}
body.dark .canvas-wrap {
  background: #6a6a6a;
}
body.dark .member-view-box {
  background-color: #252525;
}
body.dark .fc .fc-daygrid-day.fc-day-today {
  background-color: var(--calendar-today-bg, rgb(96 96 96)) !important;
  color: var(--calendar-today-fg, #ffffff) !important;
}
body.dark .bg-\[\#ffefed\],
body.dark .bg-\[\#f3f4f6\] {
  background-color: rgb(82 82 82) !important;
}
body.dark .probar li .bg-primary-400 {
  /* Use current theme primary accent instead of hard-coded coral */
  background-color: color-mix(in srgb, var(--split-view-active-border, #E54F38) 30%, transparent) !important;
}
body.dark .probar li .hover\:bg-primary-600:hover {
  /* Keep hover accent aligned with current theme */
  background-color: var(--split-view-active-border, #E54F38) !important;
}
body.dark .probar li .hover\:bg-\[\#838181\]:hover {
  background-color: #5d5d5d !important;
}
body.dark .htmx-indicator {
  background-color: black;
}
body.dark .black{
  background-color: black !important;
}
body.dark .text-red-500{
  color: red !important;
}
/* Status pills (e.g., Opportunity Won/Lost) should remain visible in dark mode */
body.dark .bg-green-100 {
  background-color: #14532d !important;
}
body.dark .text-green-800 {
  color: #86efac !important;
}
body.dark .bg-red-100 {
  background-color: #7f1d1d !important;
}
body.dark .text-red-800 {
  color: #fca5a5 !important;
}
body.dark .bg-yellow-100 {
  background-color: #713f12 !important;
}
body.dark .text-yellow-800 {
  color: #fde68a !important;
}
body.dark .text-dark-400 {
  color: #ffffff !important;
}
body.dark .bg-\[\#efefef96\] {
  background-color: #5c5c5c96;
}
/* Forecast table: keep user rows readable in dark mode */
body.dark #forecast-table .user-details-row td,
body.dark #forecast-table .user-details-row td.bg-gray-50 {
  background-color: #2f2f2f !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: #565656 !important;
}
body.dark #forecast-table .user-details-row td.sticky {
  background-color: #383838 !important;
}
/* User-row achievement bar track must be visible in dark mode */
body.dark #forecast-table .user-details-row .bg-gray-200 {
  background-color: #565656 !important;
}
body.dark #calendarPreviewModal .text-primary-600{
  background-color: black !important;
}
body.dark .bg-\[\#e6fff5\]{
  background-color: #525252;
}
body.dark .bg-\[\#e6fff5\]:hover, body.dark .bg-\[\#ffefed\]:hover{
  color: var(--menu-arrow-fg, #E54F38) !important;
}

/* Surface (kanban/group-by): dark mode override */
body.dark .bg-surface {
  background-color: #2f2f2f !important;
}
body.dark .group-by-details {
  border-color: #565656 !important;
}
body.dark .group-by-header-band {
  background-color: #383838 !important;
  border-color: #565656 !important;
}
body.dark .group-by-details .group-by-summary span.text-primary-600 {
  color: var(--menu-arrow-fg, #E54F38) !important;
}
body.dark .group-by-details .group-by-summary .fa-chevron-down {
  color: var(--menu-arrow-fg, #E54F38) !important;
}

/* Timeline view: make pills + active group label use theme colors in dark mode */
body.dark .timeline-bar {
  background-color: var(--timeline-pill-bg, #2f2f2f) !important;
  color: var(--timeline-pill-fg, #E54F38) !important;
}
body.dark .js-timeline-left-group.text-primary-600 {
  color: var(--timeline-pill-fg, #E54F38) !important;
}
body.dark .js-timeline-left-group.text-primary-600 span {
  /* Override global `body.dark span { color: ... !important; }` */
  color: var(--timeline-pill-fg, #E54F38) !important;
}

/* Calendar: dark theme variables so year/month view cells and text are visible */
body.dark .fc,
body.dark .fc .fc-scrollgrid {
  --fc-page-bg-color: #2a2a2a;
  --fc-neutral-bg-color: #3f3f3f;
  --fc-neutral-text-color: rgba(255, 255, 255, 0.9);
  --fc-border-color: #565656;
}
body.dark .fc .fc-multimonth-daygrid {
  background: #2a2a2a !important;
}
/* Calendar year view: ensure date numbers are visible in dark theme */
body.dark .fc .fc-daygrid-day-number,
body.dark .fc .fc-multimonth .fc-daygrid-day-number {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* Calendar detail popup: dark background; labels/links use primary (match light theme), values stay light */
body.dark #calendarPopup {
  background-color: #2f2f2f !important;
  border-color: #565656 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
/* Only value cells (not labels): light text for readability */
body.dark #popupContent .grid > div:not(.text-primary-600) {
  color: rgba(255, 255, 255, 0.92) !important;
}
/* Labels: keep primary-600 color in dark theme (same as white theme) */
body.dark #popupContent .text-primary-600 {
  color: var(--menu-arrow-fg, #E54F38) !important;
}
body.dark #popupContent h5.bg-primary-300 {
  background-color: #3f3f3f !important;
  color: var(--menu-arrow-fg, #E54F38) !important;
}
body.dark #popupContent button.bg-primary-100 {
  background-color: #3f3f3f !important;
  border-color: #565656 !important;
  color: var(--menu-arrow-fg, #E54F38) !important;
}
body.dark #popupContent button.bg-primary-100:hover {
  background-color: #4a3f3f !important;
  color: var(--menu-arrow-fg, #E54F38) !important;
}

/* Date/time pickers: render the browser's NATIVE indicator in dark mode so it
   becomes light/visible (and matches the native icon shown in light mode).
   `color-scheme: dark` is the standard, overlay-free way to do this — no custom
   background icons, so there's nothing to double up with the native one. */
body.dark input[type="date"],
body.dark input[type="time"],
body.dark input[type="datetime-local"],
body.dark input[type="month"],
body.dark input[type="week"] {
  color-scheme: dark;
}

/* "Save & New" is a filled secondary action. The blanket dark button rules
   above (white text, grey border) strip its orange and make it look identical
   to the ghost "Previous" button. Give it the dark-mode secondary-button
   treatment (dark fill + orange text/border) so the footer buttons stay
   distinct, with a solid-orange fill on hover. */
body.dark button[name="save_and_new"] {
  background-color: #3f3f3f !important;
  color: #e54f38 !important;
  border-color: #e54f38 !important;
}
body.dark button[name="save_and_new"]:hover {
  background-color: #e54f38 !important;
  color: #ffffff !important;
}
/* Validation/error boxes (the shared `bg-red-50` + `text-red-600` pattern used
   across forms/modals). The global `body.dark { color: white }` outranks the
   red text, leaving near-invisible white text on a light-pink panel. Restore a
   readable dark-red panel with light-red text. Scoped to text inside the box so
   standalone red text is untouched. */
body.dark .bg-red-50 {
  background-color: rgba(127, 29, 29, 0.25) !important;
}
body.dark .bg-red-50 .text-red-600,
body.dark .bg-red-50 .text-red-700,
body.dark .bg-red-50 .text-red-500 {
  color: #fca5a5 !important;
}

/* The Text Color toolbar button previews the current colour as the glyph
   colour itself (inline style, default black) — invisible on the black
   toolbar. Render it like classic editors instead: a neutral "A" glyph with a
   colour bar underneath. The bar uses currentColor, which inherits the
   inline selected colour; the glyph is neutralised via ::before (the icon
   font draws the glyph there), leaving the element's color for the bar. */
body.dark .note-color-fore .note-current-color-button .note-recent-color {
  position: relative;
  display: inline-block;
  /* no extra padding: the colour bar sits inside the button's own 5px bottom
     padding (bottom: -4px on ::after) so the button height stays identical to
     its neighbours */
}
body.dark .note-color-fore .note-current-color-button .note-recent-color::before {
  color: rgb(255 255 255 / 85%);
}
body.dark .note-color-fore .note-current-color-button .note-recent-color::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 1px;
  background-color: currentColor;
  /* default foreColor is black — keep the bar visible on the black toolbar */
  box-shadow: 0 0 0 1px rgb(255 255 255 / 35%);
}

/* Before Select2 wraps a native multi-select, it briefly renders as the
   browser-default WHITE control (the "white box" flash on modal load in dark
   mode). Recolour the not-yet-enhanced select to dark so the flash is dark, not
   white. This sets colours/size ONLY — it does NOT hide the element — so Select2
   still initializes correctly (hiding it broke the widget). Once Select2
   enhances it, .select2-hidden-accessible is added and this stops applying. */
body.dark select.select2-pagination:not(.select2-hidden-accessible),
body.dark select.js-example-basic-single:not(.select2-hidden-accessible),
body.dark select.js-example-basic-multiple:not(.select2-hidden-accessible) {
  background-color: #000 !important;
  color: #ebebeb !important;
  border: 1px solid #3f3f3f !important;
  border-radius: 6px !important;
  min-height: 38px !important;
}

/* A raw `<select multiple>` (before Select2 wraps it) renders as a listbox that
   expands to show every option — with many fields that's a tall box whose option
   rows flash light on dark backgrounds. Clamp the un-enhanced multiselect to a
   single compact row and force the options dark so the pre-enhancement flash is
   an unobtrusive dark bar, not a tall white list. Select2 hides the original
   once it adds .select2-hidden-accessible, so this only affects that brief gap. */
body.dark select.js-example-basic-multiple:not(.select2-hidden-accessible) {
  max-height: 38px !important;
  overflow: hidden !important;
}

body.dark select.js-example-basic-multiple:not(.select2-hidden-accessible) option {
  background-color: #000 !important;
  color: #ebebeb !important;
}

/* Same for a single <select> that hasn't been enhanced by Select2 yet (e.g. the
   inline "fix rejected field" editor in the Review Job modal): without this the
   native option list renders white-on-white in dark mode. */
body.dark select.js-example-basic-single:not(.select2-hidden-accessible) option {
  background-color: #000 !important;
  color: #ebebeb !important;
}

/* `dark-50` is a light border colour meant for light mode; in dark mode the
   border-dark-50 / divide-dark-50 utilities render as harsh near-white lines
   (e.g. the user-picker row dividers). Soften them to a subtle translucent
   border so they read correctly on dark backgrounds. */
body.dark .border-dark-50 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}
body.dark .divide-dark-50 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Divider for the right-pinned Actions column in dark mode (see style.css —
   sticky cells cannot paint collapsed borders, so a box-shadow is used). */
body.dark table td.sticky.right-0,
body.dark table th.sticky.right-0 {
  box-shadow: inset 1px 0 0 0 #3f3f3f;
}