/*
 * Dark mode for what the tokens can't reach: Bootstrap's light-only utility
 * classes and third-party widgets that ship their own light colours.
 * Every rule here is scoped to [data-bs-theme="dark"], so light mode can't
 * change (tests/shared/asc-dark.test.js checks that). Loaded after
 * theme-overrides.css.
 */

/* ── Bootstrap classes that stay light by design ─────────────────────────── */

[data-bs-theme="dark"] .table-light {
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-secondary-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-active-bg: var(--bs-tertiary-bg);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: var(--bs-tertiary-bg);
  --bs-table-hover-color: var(--bs-emphasis-color);
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-paper-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-emphasis-color) !important;
}

[data-bs-theme="dark"] .btn-light {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-secondary-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: var(--asc-slate-200);
  --bs-btn-hover-border-color: var(--asc-slate-300);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: var(--asc-slate-200);
  --bs-btn-active-border-color: var(--asc-slate-300);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: var(--bs-secondary-bg);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Tooltips are dark slabs in light mode; in dark they sit a step above the
 * card so they still stand out. */
[data-bs-theme="dark"] .tooltip {
  --bs-tooltip-bg: #3a4654;
  --bs-tooltip-color: #e8edf2;
}

/* ── daterangepicker (vendor CSS is all #fff / #eee / #ddd) ──────────────── */

[data-bs-theme="dark"] .daterangepicker {
  background-color: var(--bs-paper-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker::before {
  border-bottom-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .daterangepicker::after {
  border-bottom-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .daterangepicker.drop-up::before {
  border-top-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .daterangepicker.drop-up::after {
  border-top-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .daterangepicker .calendar-table {
  background-color: var(--bs-paper-bg);
  border-color: var(--bs-paper-bg);
}
[data-bs-theme="dark"] .daterangepicker .calendar-table .next span,
[data-bs-theme="dark"] .daterangepicker .calendar-table .prev span {
  border-color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker td.off,
[data-bs-theme="dark"] .daterangepicker td.off.in-range,
[data-bs-theme="dark"] .daterangepicker td.off.start-date,
[data-bs-theme="dark"] .daterangepicker td.off.end-date {
  background-color: var(--bs-paper-bg);
  color: var(--bs-secondary-color);
}
[data-bs-theme="dark"] .daterangepicker td.available:hover,
[data-bs-theme="dark"] .daterangepicker th.available:hover {
  background-color: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .daterangepicker td.in-range {
  background-color: color-mix(in sRGB, var(--bs-primary) 18%, var(--bs-paper-bg));
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker td.active,
[data-bs-theme="dark"] .daterangepicker td.active:hover {
  background-color: var(--bs-primary);
  color: var(--bs-primary-contrast);
}
[data-bs-theme="dark"] .daterangepicker .ranges li:hover {
  background-color: var(--bs-secondary-bg);
}
[data-bs-theme="dark"] .daterangepicker select.hourselect,
[data-bs-theme="dark"] .daterangepicker select.minuteselect,
[data-bs-theme="dark"] .daterangepicker select.secondselect,
[data-bs-theme="dark"] .daterangepicker select.ampmselect,
[data-bs-theme="dark"] .daterangepicker select.monthselect,
[data-bs-theme="dark"] .daterangepicker select.yearselect {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .daterangepicker .drp-buttons,
[data-bs-theme="dark"] .daterangepicker.show-ranges.ltr .drp-calendar.left {
  border-color: var(--bs-border-color);
}

/* ── Quill (snow theme: grey #444 icons, #ccc borders) ───────────────────── */

[data-bs-theme="dark"] .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .ql-container.ql-snow {
  border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-snow .ql-fill,
[data-bs-theme="dark"] .ql-snow .ql-stroke.ql-fill {
  fill: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-snow .ql-picker {
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
[data-bs-theme="dark"] .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: var(--bs-primary);
}
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover .ql-fill,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--bs-primary);
}
[data-bs-theme="dark"] .ql-snow.ql-toolbar button:hover,
[data-bs-theme="dark"] .ql-snow.ql-toolbar button.ql-active,
[data-bs-theme="dark"] .ql-snow .ql-picker-label:hover,
[data-bs-theme="dark"] .ql-snow .ql-picker-item:hover {
  color: var(--bs-primary);
}
[data-bs-theme="dark"] .ql-snow .ql-picker-options {
  background-color: var(--bs-paper-bg);
  border-color: var(--bs-border-color) !important;
  box-shadow: var(--bs-box-shadow);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip {
  background-color: var(--bs-paper-bg);
  border-color: var(--bs-border-color);
  box-shadow: var(--bs-box-shadow);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-snow .ql-tooltip input[type="text"] {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--bs-secondary-color);
}

/* ── event-calendar ─────────────────────────────────────────────────────────
 * The vendor pins .ec { color-scheme: light } and switches its own colours
 * with lightningcss flags, which also forced light-dark() inside it (e.g. the
 * toolbar date field) to light. Dark flips them the way its .ec-dark class
 * does, then puts it on the card colour. Its grey steps (borders, pressed
 * buttons, background events), today and the drag/select highlight are
 * light-only too, so they take the ASC slate steps and the primary tint. */

[data-bs-theme="dark"] .ec {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  --ec-bg-color: var(--bs-paper-bg);
  --ec-text-color: var(--bs-body-color);
  --ec-color-400: var(--asc-slate-400);
  --ec-color-300: var(--asc-slate-300);
  --ec-color-200: var(--asc-slate-200);
  --ec-color-100: var(--asc-slate-100);
  --ec-color-50: var(--asc-slate-50);
  /* Solid, like the light theme's: a see-through day colour stripes the
     library's dashed half-hour lines. */
  --ec-today-bg-color: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-paper-bg));
  --ec-highlight-color: color-mix(in srgb, var(--bs-primary) 16%, var(--bs-paper-bg));
  --ec-bg-event-opacity: 0.5;
}

/* ── Contrast fixes from the axe pass ───────────────────────────────────── */

/* Sneat's accordion hard-codes a dark grey for its text and chevron icons. */
[data-bs-theme="dark"] .accordion {
  --bs-accordion-btn-color: var(--bs-heading-color);
  --bs-accordion-active-color: var(--bs-heading-color);
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='bx-chevron-down'%3e%3cpath id='Vector' d='M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z' fill='%23c4ccd5' fill-opacity='0.9'/%3e%3c/g%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='bx-chevron-down'%3e%3cpath id='Vector' d='M13.5775 7.74417L9.99997 11.3217L6.42247 7.74417L5.24414 8.9225L9.99997 13.6783L14.7558 8.9225L13.5775 7.74417Z' fill='%23c4ccd5' fill-opacity='0.9'/%3e%3c/g%3e%3c/svg%3e");
}

/* Other-month days: a 45% ink tint is too faint on the dark card. */
[data-bs-theme="dark"] .air-datepicker.asc-air-datepicker .air-datepicker-cell.-other-month- {
  color: rgba(var(--asc-ink-soft-rgb), 0.7);
}

/* Rich content (handbook articles, editors) keeps the inline colours pasted
 * with it; near-black ones (Slack, Word, browsers' defaults) would vanish on
 * the dark card, so they follow the theme's text colour instead. */
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: rgb(29, 28, 29)"],
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: rgb(0, 0, 0)"],
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: rgb(33, 37, 41)"],
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: rgb(14, 16, 26)"],
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: black"],
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor, [class*="rich-text"]) [style*="color: #000"] {
  color: inherit !important;
}

/* A coloured table cell (the Handbook editor's cell colours are light) keeps
   dark text, read or edited: the slate tokens turn light in dark mode, so
   the ink is fixed here. */
[data-bs-theme="dark"] :is(.handbook-article-body, .ql-editor) :is(td, th)[style*="background-color"] {
  color: #1f2937; /* asc-keep-white: dark ink on a light cell colour, in both themes */
}