/* KC7 Dark Mode — Vendor & Framework Overrides
 *
 * Scoped overrides for third-party stylesheets that ship light-only:
 *   - Bootstrap 4.6 (cards, modals, dropdowns, tables, forms, alerts,
 *     navs, buttons-with-bg, close icon)
 *   - SB Admin 2 (sidebar, topbar, content surfaces)
 *   - DataTables (info text, pagination, sort arrows, striped/hover rows)
 *   - Toastr (4 toast variants)
 *
 * Approach: hand-rolled per-component overrides rather than dropping in
 * a Bootstrap 4 dark theme package. Bootstrap 4 is end-of-life and the
 * popular dark variants (bootstrap-dark-5) target BS5. Hand-rolling keeps
 * the surface area small and prevents conflicts with our existing
 * sb-admin-2.min.css and custom.css.
 *
 * Every rule is scoped under html[data-theme="dark"]. Grep check in CI.
 */

/* ====================================
   Bootstrap 4 — Surfaces
   ==================================== */

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light {
  background-color: var(--color-surface) !important;
  color: var(--color-text-primary);
}

html[data-theme="dark"] .bg-gray-100 { background-color: var(--color-bg) !important; }
html[data-theme="dark"] .bg-gray-200 { background-color: var(--color-surface-raised) !important; }
html[data-theme="dark"] .bg-gray-300 { background-color: #334155 !important; }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-black { color: var(--color-text-primary) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--color-text-muted) !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-right,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left { border-color: var(--color-border) !important; }

html[data-theme="dark"] .shadow-sm { box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.3) !important; }
html[data-theme="dark"] .shadow { box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.35) !important; }
html[data-theme="dark"] .shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4) !important; }
html[data-theme="dark"] .border-light { border-color: var(--color-border-subtle) !important; }

/* ====================================
   Bootstrap 4 — Cards
   ==================================== */
html[data-theme="dark"] .card {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ====================================
   Bootstrap 4 — Modals
   ==================================== */
html[data-theme="dark"] .modal-content {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
/* SB Admin 2 ships `.modal-content p { color: #000 }`, a direct element
   rule that beats the inherited .modal-content color and forces every
   modal's paragraph text to black on the dark surface. Restore it. */
html[data-theme="dark"] .modal-content p {
  color: var(--color-text-primary);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
  border-color: var(--color-border);
}
html[data-theme="dark"] .modal-backdrop.show { opacity: 0.7; }

/* The Bootstrap close ✕ uses a dark SVG that vanishes on dark bgs.
 * Invert it. Works for both .close and the BS5-flavored .btn-close.
 */
html[data-theme="dark"] .close,
html[data-theme="dark"] button.close {
  color: var(--color-text-primary);
  text-shadow: none;
  opacity: 0.85;
}
html[data-theme="dark"] .close:hover { opacity: 1; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ====================================
   Bootstrap 4 — Dropdowns & Popovers & Tooltips
   ==================================== */
html[data-theme="dark"] .dropdown-menu {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .dropdown-item {
  color: var(--color-text-primary);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
  background-color: var(--color-accent-light);
  color: var(--color-accent-hover);
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--color-border); }
html[data-theme="dark"] .dropdown-header { color: var(--color-text-muted); }

html[data-theme="dark"] .popover {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .popover-header {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .popover-body { color: var(--color-text-secondary); }
/* Bootstrap tooltips are already dark bg + white text by default, which
   works in both themes. Don't override them here — overriding the color
   while leaving the bg alone leads to dark text on dark bg when pages
   (e.g. features/challenges-inline.css) restyle .tooltip-inner. */

/* ====================================
   Bootstrap 4 — Tables
   ==================================== */
html[data-theme="dark"] .table {
  color: var(--color-text-primary);
  background-color: transparent;
}
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td {
  border-top-color: var(--color-border);
}
html[data-theme="dark"] .table thead th {
  border-bottom-color: var(--color-border);
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .table-bordered,
html[data-theme="dark"] .table-bordered th,
html[data-theme="dark"] .table-bordered td { border-color: var(--color-border); }
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(248, 250, 252, 0.03);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: rgba(248, 250, 252, 0.06);
  color: var(--color-text-primary);
}

/* ====================================
   Bootstrap 4 — Forms & Inputs
   ==================================== */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .custom-file-label {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .custom-select:focus {
  background-color: var(--color-surface-raised);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-focus);
}
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}
html[data-theme="dark"] .input-group-text {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .form-text { color: var(--color-text-muted); }
html[data-theme="dark"] .custom-control-label { color: var(--color-text-primary); }
html[data-theme="dark"] .custom-control-label::before {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
}

/* Autofill — Chrome overrides bg with a yellow tint. We can't easily
 * change the bg, but we can fix the text color and force a fake
 * matching inset shadow.
 */
html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-primary);
  -webkit-box-shadow: 0 0 0px 1000px var(--color-surface-raised) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ====================================
   Bootstrap 4 — Buttons
   SB Admin 2 overrides outline variants with hardcoded colors
   (e.g. btn-outline-primary uses #000000) that are invisible
   on dark surfaces. Fix all outline variants here.
   ==================================== */
html[data-theme="dark"] .btn-light {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .btn-light:hover {
  background-color: #334155;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="dark"] .btn-outline-primary {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
html[data-theme="dark"] .btn-outline-primary:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
html[data-theme="dark"] .btn-outline-success {
  color: var(--color-success);
  border-color: var(--color-success);
}
html[data-theme="dark"] .btn-outline-success:hover {
  background-color: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}
html[data-theme="dark"] .btn-outline-info {
  color: #38bdf8;
  border-color: #38bdf8;
}
html[data-theme="dark"] .btn-outline-info:hover {
  background-color: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #fff;
}
html[data-theme="dark"] .btn-outline-warning {
  color: var(--color-warning);
  border-color: var(--color-warning);
}
html[data-theme="dark"] .btn-outline-warning:hover {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: #fff;
}
html[data-theme="dark"] .btn-link { color: var(--link-1); }
html[data-theme="dark"] .btn-link:hover { color: var(--color-accent-hover); }

/* ====================================
   Bootstrap 4 — Navs & Pagination & List groups
   ==================================== */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--color-border); }
html[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--color-text-secondary);
  border-color: transparent;
}
html[data-theme="dark"] .nav-tabs .nav-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border) var(--color-border) transparent;
}
html[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border) var(--color-border) var(--color-surface);
}
html[data-theme="dark"] .nav-pills .nav-link { color: var(--color-text-secondary); }
html[data-theme="dark"] .nav-pills .nav-link.active {
  background-color: var(--color-accent);
  color: #fff;
}

html[data-theme="dark"] .page-link {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .page-link:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .page-item.active .page-link {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
html[data-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

html[data-theme="dark"] .list-group-item {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .list-group-item-action:hover {
  background-color: var(--color-surface-raised);
  color: var(--color-text-primary);
}

/* ====================================
   Bootstrap 4 — Alerts (low-alpha so brand colors still read)
   ==================================== */
html[data-theme="dark"] .alert-primary {
  background-color: rgba(91, 141, 239, 0.14);
  border-color: rgba(91, 141, 239, 0.35);
  color: #c7d8ff;
}
html[data-theme="dark"] .alert-secondary {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .alert-success {
  background-color: var(--color-success-bg);
  border-color: rgba(34, 197, 94, 0.35);
  color: #86efac;
}
html[data-theme="dark"] .alert-danger {
  background-color: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: #fecaca;
}
html[data-theme="dark"] .alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: #fed7aa;
}
html[data-theme="dark"] .alert-info {
  background-color: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.35);
  color: #bae6fd;
}
html[data-theme="dark"] .alert-light {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .alert-dark {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ====================================
   Bootstrap 4 — Breadcrumb & Progress
   ==================================== */
html[data-theme="dark"] .breadcrumb {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .breadcrumb-item a { color: var(--color-text-secondary); }
html[data-theme="dark"] .breadcrumb-item a:hover { color: var(--color-accent-hover); }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--color-text-muted); }
html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--color-text-muted); }

html[data-theme="dark"] .progress { background-color: var(--color-surface-raised); }

/* ====================================
   SB Admin 2 — App chrome
   ==================================== */

/* The default SB Admin 2 sidebar is a saturated blue gradient that's
 * fine in dark mode too. Just darken it a touch.
 */
html[data-theme="dark"] .sidebar.bg-gradient-primary,
html[data-theme="dark"] .bg-gradient-primary {
  background-image: linear-gradient(180deg, #1e3a8a 10%, #172554 100%) !important;
}
html[data-theme="dark"] .sidebar .nav-item .nav-link,
html[data-theme="dark"] .sidebar .nav-item .nav-link i { color: rgba(241, 245, 249, 0.85); }
html[data-theme="dark"] .sidebar .nav-item .nav-link:hover { color: #fff; }
html[data-theme="dark"] .sidebar-divider { border-top-color: rgba(248, 250, 252, 0.15) !important; }

/* The topbar is bg-white via the SB Admin classes. */
html[data-theme="dark"] .topbar.navbar-light,
html[data-theme="dark"] .topbar { background-color: var(--color-surface) !important; }
html[data-theme="dark"] .topbar.navbar-light .navbar-nav .nav-item .nav-link { color: var(--color-text-secondary); }
html[data-theme="dark"] .topbar .topbar-divider { border-left-color: var(--color-border); }
html[data-theme="dark"] .topbar .dropdown-list .dropdown-header { background-color: var(--color-accent); }

/* SB Admin 2 main content area + footer */
html[data-theme="dark"] #content-wrapper,
html[data-theme="dark"] .container-fluid,
html[data-theme="dark"] body.bg-gray-100 { background-color: var(--color-bg) !important; }
html[data-theme="dark"] .sticky-footer {
  background-color: var(--color-surface);
  color: var(--color-text-muted);
}

/* Scroll-to-top button */
html[data-theme="dark"] .scroll-to-top {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .scroll-to-top:hover { background-color: rgba(255, 255, 255, 0.25); }

/* ====================================
   DataTables
   ==================================== */
html[data-theme="dark"] .dataTables_wrapper,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
html[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--color-text-secondary); }

html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input,
html[data-theme="dark"] .dataTables_wrapper .dataTables_length select {
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--color-text-secondary) !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
}
html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--color-surface-raised) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* DataTables sort arrows.
   Multiple stylesheets paint them: vendor datatables.min.css (Unicode ↑↓
   via ::before/::after), datatables-unified.css (solid ▲▼ via :before/:after),
   and some vendor builds also use background-image SVG arrows on the th
   itself. In dark mode these combine into large bright glyphs that obscure
   the header text. Fix: hide ALL pseudo-element arrows by default, then
   re-show only the active-direction arrow at low opacity. Also strip any
   background-image arrows. */
html[data-theme="dark"] table.dataTable thead th.sorting:before,
html[data-theme="dark"] table.dataTable thead th.sorting:after,
html[data-theme="dark"] table.dataTable thead th.sorting_asc:before,
html[data-theme="dark"] table.dataTable thead th.sorting_asc:after,
html[data-theme="dark"] table.dataTable thead th.sorting_desc:before,
html[data-theme="dark"] table.dataTable thead th.sorting_desc:after,
html[data-theme="dark"] table.dataTable thead th.sorting_asc_disabled:before,
html[data-theme="dark"] table.dataTable thead th.sorting_asc_disabled:after,
html[data-theme="dark"] table.dataTable thead th.sorting_desc_disabled:before,
html[data-theme="dark"] table.dataTable thead th.sorting_desc_disabled:after,
html[data-theme="dark"] table.dataTable thead th.sorting::before,
html[data-theme="dark"] table.dataTable thead th.sorting::after,
html[data-theme="dark"] table.dataTable thead th.sorting_asc::before,
html[data-theme="dark"] table.dataTable thead th.sorting_asc::after,
html[data-theme="dark"] table.dataTable thead th.sorting_desc::before,
html[data-theme="dark"] table.dataTable thead th.sorting_desc::after,
html[data-theme="dark"] table.dataTable > thead .sorting:before,
html[data-theme="dark"] table.dataTable > thead .sorting:after,
html[data-theme="dark"] table.dataTable > thead .sorting_asc:before,
html[data-theme="dark"] table.dataTable > thead .sorting_asc:after,
html[data-theme="dark"] table.dataTable > thead .sorting_desc:before,
html[data-theme="dark"] table.dataTable > thead .sorting_desc:after {
  opacity: 0 !important;
  font-size: 0.55em !important;
}
/* Active-direction arrow: show at reduced opacity so it's visible but
   doesn't compete with the header text. */
html[data-theme="dark"] table.dataTable thead th.sorting_asc:before,
html[data-theme="dark"] table.dataTable thead th.sorting_desc:after,
html[data-theme="dark"] table.dataTable thead th.sorting_asc::before,
html[data-theme="dark"] table.dataTable thead th.sorting_desc::after,
html[data-theme="dark"] table.dataTable > thead .sorting_asc:before,
html[data-theme="dark"] table.dataTable > thead .sorting_desc:after {
  opacity: 0.5 !important;
  color: var(--color-text-muted, #94a3b8) !important;
  font-size: 0.55em !important;
}

/* Strip background-image SVG arrows from sorting headers. Some DataTables
   builds paint arrows via background-image on the th element itself. */
html[data-theme="dark"] table.dataTable thead .sorting,
html[data-theme="dark"] table.dataTable thead .sorting_asc,
html[data-theme="dark"] table.dataTable thead .sorting_desc,
html[data-theme="dark"] table.dataTable thead .sorting_asc_disabled,
html[data-theme="dark"] table.dataTable thead .sorting_desc_disabled {
  background-image: none !important;
}
/* DataTables paints every row white via `tbody tr { background-color: #ffffff }`.
   Reset it so the dark card surface shows through, then re-apply the striped
   and hover tints on top. */
html[data-theme="dark"] table.dataTable tbody tr {
  background-color: transparent;
  color: var(--color-text-primary);
}
html[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(248, 250, 252, 0.03); }
html[data-theme="dark"] table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] table.dataTable.display tbody tr:hover { background-color: rgba(248, 250, 252, 0.07); }

/* ====================================
   Toastr
   ==================================== */
html[data-theme="dark"] #toast-container > .toast-success { background-color: #166534; }
html[data-theme="dark"] #toast-container > .toast-error   { background-color: #991b1b; }
html[data-theme="dark"] #toast-container > .toast-info    { background-color: #075985; }
html[data-theme="dark"] #toast-container > .toast-warning { background-color: #9a3412; }
html[data-theme="dark"] .toast-title,
html[data-theme="dark"] .toast-message { color: #f8fafc; }

/* ====================================
   Misc — code blocks, blockquotes
   ==================================== */
html[data-theme="dark"] code,
html[data-theme="dark"] kbd,
html[data-theme="dark"] samp {
  background-color: rgba(248, 250, 252, 0.08);
  color: #f1f5f9;
  border-radius: 3px;
  padding: 0.1em 0.3em;
}
html[data-theme="dark"] pre,
html[data-theme="dark"] pre code {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}
html[data-theme="dark"] blockquote {
  border-left-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* ====================================
   SweetAlert2 v11 — pop-ups ship light-only
   ==================================== */

html[data-theme="dark"] .swal2-popup {
  background: var(--color-surface);
  color: var(--color-text-primary);
}
html[data-theme="dark"] .swal2-title {
  color: var(--color-text-primary);
}
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content {
  color: var(--color-text-secondary);
}
html[data-theme="dark"] .swal2-close {
  color: var(--color-text-muted);
}
html[data-theme="dark"] .swal2-close:hover {
  color: var(--color-text-primary);
}
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select {
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}
html[data-theme="dark"] .swal2-footer {
  border-top-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* ====================================
   github-markdown.css — training guides (/guide/<id>)
   ====================================
   The vendored stylesheet is the light-only GitHub build: every surface,
   border, and text color in it is a hardcoded light hex. Rather than fork
   1000 lines, restate the handful that actually set colors, mapped onto our
   tokens. Selector list mirrors the vendor file so nothing is missed.

   Deliberately NOT overridden: `.markdown-body img { background: #ffffff }`.
   Guide READMEs are full of transparent-background diagrams and screenshots
   that become unreadable on a dark surface, so the white plate stays. */

html[data-theme="dark"] .markdown-body {
  color: var(--color-text-primary);
  background-color: transparent;
}

html[data-theme="dark"] .markdown-body a {
  color: var(--link-1);
}

html[data-theme="dark"] .markdown-body h6,
html[data-theme="dark"] .markdown-body .footnotes,
html[data-theme="dark"] .markdown-body .pl-ba {
  color: var(--color-text-muted);
}

html[data-theme="dark"] .markdown-body h1,
html[data-theme="dark"] .markdown-body h2 {
  border-bottom-color: var(--color-border);
}

html[data-theme="dark"] .markdown-body hr {
  background-color: var(--color-border);
}

html[data-theme="dark"] .markdown-body blockquote {
  color: var(--color-text-secondary);
  border-left-color: var(--color-border);
}

html[data-theme="dark"] .markdown-body kbd {
  color: var(--color-text-primary);
  background-color: var(--color-surface-raised);
  border-color: var(--color-border);
  border-bottom-color: var(--color-border);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

/* Tables: the vendor sheet paints every row white and zebra-stripes the
   even ones, which is the single loudest light-mode artifact on a guide. */
html[data-theme="dark"] .markdown-body table th,
html[data-theme="dark"] .markdown-body table td,
html[data-theme="dark"] .markdown-body span.frame > span {
  border-color: var(--color-border);
}

html[data-theme="dark"] .markdown-body table tr {
  background-color: var(--color-surface);
  border-top-color: var(--color-border);
}

html[data-theme="dark"] .markdown-body table tr:nth-child(2n) {
  background-color: var(--color-surface-raised);
}

html[data-theme="dark"] .markdown-body code,
html[data-theme="dark"] .markdown-body tt {
  background-color: rgba(248, 250, 252, 0.10);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .markdown-body pre,
html[data-theme="dark"] .markdown-body .highlight pre {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
}

html[data-theme="dark"] .markdown-body .footnotes {
  border-top-color: var(--color-border);
}

/* `mark` keeps its pale-yellow plate and dark text — a highlighter chip reads
   the same in both themes, and lightening the text would kill the contrast. */
html[data-theme="dark"] .markdown-body .footnotes li:target,
html[data-theme="dark"] .markdown-body span.frame span span,
html[data-theme="dark"] .markdown-body .pl-smi,
html[data-theme="dark"] .markdown-body .pl-s .pl-s1,
html[data-theme="dark"] .markdown-body .pl-mi,
html[data-theme="dark"] .markdown-body .pl-mb {
  color: var(--color-text-primary);
}

html[data-theme="dark"] .markdown-body .csv-data .blob-num {
  background: var(--color-surface);
}

html[data-theme="dark"] .markdown-body .csv-data th {
  background: var(--color-surface-raised);
}