/* ============================================================
   Ducktape OS theme — Score Record
   Light/dark via <html data-bs-theme="light|dark">.
   Poppins, teal primary #3ABBDA, magenta accent #93278F,
   flat surfaces (no shadows), radii 8/6/3.
   ============================================================ */

:root, [data-bs-theme="light"] {
    --dt-primary: #3ABBDA;
    --dt-primary-hover: #2EA8C4;
    --dt-primary-text: #ffffff;
    --dt-magenta: #93278F;
    --dt-green: #7AC943;
    --dt-red: #FF1D25;
    --dt-yellow: #FFCD3C;
    --dt-grey: #858384;

    --dt-bg: #FFFFFF;
    --dt-text: #171717;
    --dt-text-2: #404040;
    --dt-border: #E8E8E8;
    --dt-card: #FAFAFA;
    --dt-card-border: #F0F0F0;
    --dt-sidebar: #F5F5F5;
    --dt-popover: #F0F0F0;
    --dt-secondary-btn: #E5E5E5;
    --dt-muted: #E0E0E0;
    --dt-accent-surface: #E6F5F7;
    --dt-input-border: #BFBFBF;
    --dt-hover-overlay: rgba(0,0,0,.03);
    --dt-active-overlay: rgba(0,0,0,.08);

    --bs-primary: #3ABBDA;
    --bs-primary-rgb: 58,187,218;
    --bs-body-bg: #FFFFFF;
    --bs-body-color: #171717;
    --bs-border-color: #E8E8E8;
    --bs-border-radius: 6px;
    --bs-border-radius-lg: 8px;
    --bs-border-radius-sm: 3px;
    --bs-danger: #FF1D25;
    --bs-danger-rgb: 255,29,37;
    --bs-success: #7AC943;
    --bs-success-rgb: 122,201,67;
    --bs-warning: #FFCD3C;
    --bs-warning-rgb: 255,205,60;
    --bs-info: #3ABBDA;
    --bs-info-rgb: 58,187,218;
}

[data-bs-theme="dark"] {
    --dt-primary: #50C9E3;
    --dt-primary-hover: #3ABBDA;
    --dt-primary-text: #171717;
    --dt-magenta: #93278F;
    --dt-green: #7AC943;
    --dt-red: #FF1D25;
    --dt-yellow: #FFCD3C;
    --dt-grey: #858384;

    --dt-bg: #3F3D40;
    --dt-text: #F2F2F2;
    --dt-text-2: #B3B3B3;
    --dt-border: #4B494C;
    --dt-card: #383638;
    --dt-card-border: #464447;
    --dt-sidebar: #333133;
    --dt-popover: #464447;
    --dt-secondary-btn: #4B494C;
    --dt-muted: #4F4D50;
    --dt-accent-surface: #3A4D50;
    --dt-input-border: #565355;
    --dt-hover-overlay: rgba(255,255,255,.04);
    --dt-active-overlay: rgba(255,255,255,.09);

    --bs-primary: #50C9E3;
    --bs-primary-rgb: 80,201,227;
    --bs-body-bg: #3F3D40;
    --bs-body-color: #F2F2F2;
    --bs-border-color: #4B494C;
}

/* ---------- Base ---------- */
/* Poppins for Latin (incl. German); Noto per-script for Hebrew and Arabic. The browser
   picks per RUN — a Latin name stays Poppins, a Hebrew name uses Noto Sans Hebrew —
   so a mixed table renders each cell in the right glyphs. */
html, body { font-family: 'Poppins', 'Noto Sans Hebrew', 'Noto Sans Arabic', system-ui, -apple-system, sans-serif; }
body { background: var(--dt-bg) !important; color: var(--dt-text); }
h1,h2,h3,h4,h5,h6 { color: var(--dt-text); }
.text-secondary, .text-muted { color: var(--dt-text-2) !important; }
a { color: var(--dt-primary); }
* { box-shadow: none !important; }

/* ---------- App shell ---------- */
.sr-app { background: var(--dt-bg) !important; }
.sr-topbar { background: var(--dt-sidebar) !important; border-bottom: 1px solid var(--dt-border); }
.sr-burger { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; border-radius: 8px !important; }
.sr-drawer { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; }
.sr-drawer .offcanvas-header { border-bottom: 1px solid var(--dt-border) !important; }
.sr-drawer .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; }
.sr-drawer .nav-link i { color: var(--dt-grey) !important; }
.sr-drawer .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; }
.sr-drawer .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.sr-drawer .nav-link.active i { color: var(--dt-primary) !important; }
.sr-drawer-user .u-name, .sr-side-user .u-name { color: var(--dt-text) !important; }
.sr-drawer-user .u-mail, .sr-side-user .u-mail { color: var(--dt-text-2) !important; }
.sr-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }

/* Permanent desktop sidebar - same treatment as the burger drawer so the two
   navigations look identical whichever one the screen size shows. */
.sr-side { background: var(--dt-sidebar) !important; border-right: 1px solid var(--dt-border) !important; }
.sr-side-brand, .sr-side-user, .sr-side-foot { border-color: var(--dt-border) !important; }
.sr-side-nav .sr-section { color: var(--dt-grey) !important; }
.sr-side-nav .nav-link { color: var(--dt-text-2) !important; }
.sr-side-nav .nav-link i { color: var(--dt-grey) !important; }
.sr-side-nav .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; }
.sr-side-nav .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.sr-side-nav .nav-link.active i { color: var(--dt-primary) !important; }

/* ---------- Cards & tables ---------- */
.card, .table-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; border-radius: 8px !important; color: var(--dt-text); }
.card .card-body { color: var(--dt-text); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--dt-text); --bs-table-border-color: var(--dt-border); }
.table-light, .table thead.table-light th { background: var(--dt-popover) !important; color: var(--dt-text) !important; }
.modal-content { background: var(--dt-popover) !important; color: var(--dt-text) !important; border-radius: 8px !important; border: 1px solid var(--dt-border) !important; }
.modal-content.text-dark { color: var(--dt-text) !important; }
.modal-content .text-dark { color: var(--dt-text) !important; }
.dropdown-menu { background: var(--dt-popover) !important; border: 1px solid var(--dt-border) !important; border-radius: 6px !important; }
.dropdown-item { color: var(--dt-text) !important; }
.dropdown-item:hover { background: var(--dt-hover-overlay) !important; }
hr { border-color: var(--dt-border); opacity: 1; }

/* ---------- Buttons ---------- */
.btn { border-radius: 6px !important; font-weight: 500; }
.btn-primary, .btn-info {
    background: var(--dt-primary) !important; border-color: var(--dt-primary-hover) !important; color: var(--dt-primary-text) !important;
}
.btn-primary:hover, .btn-info:hover { background: var(--dt-primary-hover) !important; }
.btn-secondary, .btn-light {
    background: var(--dt-secondary-btn) !important; border-color: var(--dt-input-border) !important; color: var(--dt-text) !important;
}
.btn-outline-primary, .btn-outline-info { color: var(--dt-primary) !important; border-color: var(--dt-primary) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-info:hover { background: var(--dt-accent-surface) !important; }
.btn-outline-secondary { color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; background: transparent !important; }
.btn-outline-secondary:hover { background: var(--dt-hover-overlay) !important; }
[data-bs-theme="dark"] .btn-danger, .btn-outline-danger:hover { background: var(--dt-red) !important; border-color: #d81920 !important; color: #fff !important; }
.btn-outline-danger { color: var(--dt-red) !important; border-color: var(--dt-red) !important; background: transparent !important; }
.btn-success { background: var(--dt-green) !important; border-color: #69b338 !important; color: #fff !important; }
[data-bs-theme="dark"] .btn-warning, .btn-outline-warning { background: var(--dt-magenta) !important; border-color: #7d1f7a !important; color: #fff !important; }
.btn-outline-warning { background: transparent !important; color: var(--dt-magenta) !important; border-color: var(--dt-magenta) !important; }
.btn:active { background-image: linear-gradient(var(--dt-active-overlay), var(--dt-active-overlay)) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: var(--dt-bg) !important; color: var(--dt-text) !important;
    border: 1px solid var(--dt-input-border) !important; border-radius: 6px !important;
}
/* Keep Bootstrap's dropdown caret visible — a `background` shorthand above would erase it.
   The arrow is re-declared per theme so it stays readable in dark mode. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23171717' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 16px 12px !important;
    padding-right: 2.25rem !important;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F2F2F2' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.form-select-sm { padding-right: 2rem !important; background-position: right .5rem center !important; }
.form-control:focus, .form-select:focus { border-color: var(--dt-primary) !important; outline: 2px solid var(--dt-accent-surface); }
.form-control::placeholder { color: var(--dt-grey); }
.form-label, .form-check-label { color: var(--dt-text); }
.input-group-text { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-input-border) !important; }

/* A file input has a SECOND part the browser draws itself. .form-control themes the field;
   the button inside it is ::file-selector-button, and with nothing said about it Chrome and
   Edge fall back to their own colours — which in dark mode is a heavy near-black slab with
   light text, reading as a button dropped onto the form rather than part of the field.

   Styled to match the secondary buttons in both themes, so an upload looks like every other
   control on the page. */
.form-control[type="file"]::file-selector-button {
    background: var(--dt-secondary-btn) !important;
    color: var(--dt-text) !important;
    border: 0 !important;
    border-right: 1px solid var(--dt-input-border) !important;
    border-radius: 5px 0 0 5px !important;
    padding: .375rem .75rem !important;
    margin: -.375rem .75rem -.375rem -.75rem !important;
    transition: background .12s ease;
}
.form-control[type="file"]::file-selector-button:hover {
    background: var(--dt-muted) !important;
}

/* ---------- Light surfaces in dark mode ----------

   Bootstrap's .bg-light stays a PALE GREY whatever the theme, while ducktape sets form
   labels and body text to near-white in dark mode. Put together, a .bg-light panel in dark
   mode is near-white text on a near-white surface — the labels are still there and cannot be
   read. That is what happened to "Question 5", "Incorrect Penalty" and "Clue Penalty" on the
   puzzle editor, and .bg-light is used in 15 views.

   Given a dark counterpart here rather than swapping the class in each view: one rule covers
   every screen, and a view that gains a .bg-light tomorrow is already right. */
[data-bs-theme="dark"] .bg-light {
    background-color: var(--dt-card) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-card-border) !important;
}
[data-bs-theme="dark"] .bg-white {
    background-color: var(--dt-card) !important;
    color: var(--dt-text) !important;
}
/* .text-dark is used to force dark text ON a light surface. Once that surface is dark, the
   instruction inverts — otherwise it reinstates the very problem above. */
[data-bs-theme="dark"] .text-dark { color: var(--dt-text) !important; }
/* Table headers use .table-light as a surface; same reasoning. */
[data-bs-theme="dark"] .table > thead.table-light th,
[data-bs-theme="dark"] .table > thead .table-light,
[data-bs-theme="dark"] tr.table-light > td,
[data-bs-theme="dark"] tr.table-light > th {
    background-color: var(--dt-muted) !important;
    color: var(--dt-text) !important;
    border-color: var(--dt-card-border) !important;
}

/* ---------- Badges / pills ---------- */
.badge { border-radius: 3px !important; font-weight: 500; }
.badge.text-bg-light { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; border-color: var(--dt-border) !important; }
.badge.text-bg-dark { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; }
.badge.text-bg-warning { background: var(--dt-magenta) !important; color: #fff !important; }
.badge.text-bg-info, .badge.text-bg-primary { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; }
.badge.text-bg-success { background: var(--dt-green) !important; color: #fff !important; }
.badge.text-bg-danger { background: var(--dt-red) !important; color: #fff !important; }
.alert { border-radius: 8px !important; }
.alert-info { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; border-color: var(--dt-primary) !important; }
.alert-warning { background: color-mix(in srgb, var(--dt-magenta) 12%, var(--dt-bg)) !important; color: var(--dt-text) !important; border-color: var(--dt-magenta) !important; }

/* ---------- Runner console (mobile brand card) ---------- */
.runner-step-card { background: var(--dt-card) !important; border: 1px solid var(--dt-card-border) !important; color: var(--dt-text) !important; border-radius: 8px !important; }
.runner-step-card .r-title, .runner-step-card h5, .runner-step-card .fw-bold { color: var(--dt-text) !important; }
.runner-step-card .text-white-50, .runner-step-card .opacity-75 { color: var(--dt-text-2) !important; }
.r-btn { border-radius: 6px !important; }

/* ---------- Type pills on card grids (keep semantic, retint brand ones) ---------- */
.tp-purple { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.tp-pink { background: color-mix(in srgb, var(--dt-magenta) 15%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; }

/* ---------- Team/Zone dashboards: green bars -> primary blue ---------- */
.dash-wrap { background: var(--dt-bg) !important; color: var(--dt-text) !important; }
.dash-wrap .bar { background: var(--dt-primary) !important; color: var(--dt-primary-text) !important; }
.dash-wrap .rrow, .dash-wrap .trow { border-color: var(--dt-border) !important; }
.dash-wrap .rrow .nm, .dash-wrap .rrow .vl, .dash-wrap .gp .nm, .dash-wrap .gp .vl,
.dash-wrap .trow .nm, .dash-wrap .trow .vv, .dash-wrap .tname, .dash-wrap .scoreitem .nm,
.dash-wrap .scoreitem .vl, .dash-wrap .dash-head .round { color: var(--dt-text) !important; }
.dash-wrap .gp.danger .vl, .dash-wrap .dash-head .timer { color: var(--dt-red) !important; }

/* ---------- Misc ---------- */
.offcanvas { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; }
.list-group-item { background: var(--dt-card) !important; color: var(--dt-text) !important; border-color: var(--dt-card-border) !important; }
.nav-tabs .nav-link.active { background: var(--dt-card) !important; color: var(--dt-primary) !important; border-color: var(--dt-border) !important; }
.text-primary { color: var(--dt-primary) !important; }
.bg-primary { background: var(--dt-primary) !important; }

/* Theme toggle button */
.dt-theme-toggle {
    border: 1px solid var(--dt-input-border); background: var(--dt-secondary-btn); color: var(--dt-text);
    border-radius: 6px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; cursor: pointer;
}
.dt-theme-toggle:hover { background-image: linear-gradient(var(--dt-hover-overlay), var(--dt-hover-overlay)); }

/* ---------- SuperAdmin sidebar ---------- */
.sidebar { background: var(--dt-sidebar) !important; color: var(--dt-text) !important; border-right: 1px solid var(--dt-border); }
.sidebar-brand { border-bottom: 1px solid var(--dt-border) !important; }
.sidebar .nav-link { color: var(--dt-text-2) !important; border-radius: 6px !important; }
.sidebar .nav-link:hover { background: var(--dt-hover-overlay) !important; color: var(--dt-text) !important; }
.sidebar .nav-link.active { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.sidebar .text-white, .sidebar .small.fw-semibold, .sidebar-username { color: var(--dt-text) !important; }
.sidebar .logout-link { color: var(--dt-text-2) !important; }
.user-avatar { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.sidebar-brand .brand-role { color: var(--dt-primary) !important; }

/* Theme-aware logos */
.dt-logo-dark { display: none; }
[data-bs-theme="dark"] .dt-logo-light { display: none; }
[data-bs-theme="dark"] .dt-logo-dark { display: inline; }

/* Desk list filter bar */
.desk-filter { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; }
.desk-filter .form-label { color: var(--dt-text-2) !important; }
.desk-filter .input-group-text { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; border-color: var(--dt-input-border) !important; }
/* Tag-style multiselect */
.ts-box { background: var(--dt-bg) !important; border-color: var(--dt-input-border) !important; }
.ts-input { color: var(--dt-text) !important; }
.ts-list { background: var(--dt-popover) !important; border-color: var(--dt-border) !important; }
.ts-opt { color: var(--dt-text) !important; }
.ts-opt:hover { background: var(--dt-hover-overlay) !important; }
.ts-empty { color: var(--dt-grey) !important; }

/* Facilitator console sections + tools */
.seq-chip { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; color: var(--dt-text-2) !important; }
.seq-chip.done { background: var(--dt-accent-surface) !important; border-color: var(--dt-border) !important; color: var(--dt-text) !important; }
[data-bs-theme="dark"] .seq-chip.current { background: var(--dt-primary) !important; border-color: var(--dt-primary) !important; color: #08282f !important; }
.rs { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; }
.rs-title { color: var(--dt-text) !important; }
.rs-sum, .rs-toggle, .rs-grip, .rs-pin { color: var(--dt-grey) !important; }
.vc-menu { background: var(--dt-card, #fff) !important; border-color: var(--dt-card-border, #DADADA) !important; color: var(--dt-text, #171717) !important; }
.tool-row { border-color: var(--dt-card-border) !important; }
.tool-name { color: var(--dt-text) !important; }
.tool-url { color: var(--dt-grey) !important; }

/* Current object pills + object control */
.obj-type { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.state-pending { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; }
[data-bs-theme="dark"] .state-ready { background: color-mix(in srgb, #FAC775 22%, var(--dt-bg)) !important; color: #FAC775 !important; }
[data-bs-theme="dark"] .state-active { background: color-mix(in srgb, var(--dt-green) 20%, var(--dt-bg)) !important; color: var(--dt-green) !important; }
[data-bs-theme="dark"] .state-complete { background: color-mix(in srgb, var(--dt-primary) 20%, var(--dt-bg)) !important; color: var(--dt-primary) !important; }
.rs-accent { border-color: var(--dt-primary) !important; }
.oc-note { color: var(--dt-grey) !important; }


/* ===== Dark mode gaps =====
   These live in site.css with hard-coded light surfaces and had no dark counterpart, so in
   dark mode they stayed white cards with near-white text on them — unreadable. Each one is
   mapped onto the same tokens the rest of the theme uses. */

/* Card grids on the Event, Object and Sequence lists */
.m-obj-card { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; }
.m-obj-name { color: var(--dt-text) !important; }
.m-obj-card .text-secondary, .m-obj-card .small { color: var(--dt-text-2) !important; }

/* Dashboard */
.kpi-accent, .dash-card { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; }
.quick-link { color: var(--dt-primary) !important; }
.quick-link:hover { color: var(--dt-text) !important; }

/* Facilitator console chrome */
.joined-badge { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
.seq-chip:hover { border-color: var(--dt-primary) !important; color: var(--dt-text) !important; }
.tool-ico { color: var(--dt-primary) !important; }
[data-bs-theme="dark"] .r-btn-ready { background: #7a5a12 !important; color: #FAE3B0 !important; }
.r-btn-complete { background: var(--dt-secondary-btn) !important; color: var(--dt-text) !important; }
[data-bs-theme="dark"] .pill-ready { background: color-mix(in srgb, #FAC775 22%, var(--dt-bg)) !important; color: #FAC775 !important; }
.m-run-btn.m-run-outline { background: transparent !important; color: var(--dt-text) !important;
                           border-color: var(--dt-border) !important; }

/* Type pills that were still light-only */
[data-bs-theme="dark"] .tp-red { background: color-mix(in srgb, var(--dt-magenta) 16%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; }
[data-bs-theme="dark"] .tp-amber { background: color-mix(in srgb, #FAC775 18%, var(--dt-bg)) !important; color: #FAC775 !important; }
.tp-gray { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; }
.ib-purple { background: var(--dt-accent-surface) !important; color: var(--dt-text) !important; }
[data-bs-theme="dark"] .ib-red { background: color-mix(in srgb, var(--dt-magenta) 16%, var(--dt-bg)) !important; color: var(--dt-magenta) !important; }

/* Form bits */
.tag-select:focus-within .ts-box { border-color: var(--dt-primary) !important;
                                   outline-color: var(--dt-accent-surface) !important; }
[data-bs-theme="dark"] .pu-qty.pu-qty-bad { background: color-mix(in srgb, #FF1D25 12%, var(--dt-bg)) !important;
                     border-color: #FF1D25 !important; }
.img-preview-existing { background: var(--dt-bg) !important; border-color: var(--dt-input-border) !important; }

/* Dashboard charts + event list */
.chart-legend { color: var(--dt-text-2) !important; }
.event-list .sort-link:hover { color: var(--dt-primary) !important; }

.event-table thead th { background: var(--dt-sidebar) !important; border-color: var(--dt-border) !important; color: var(--dt-text-2) !important; }
.ev-sub { color: var(--dt-grey) !important; }
.ev-code { background: var(--dt-secondary-btn) !important; color: var(--dt-text-2) !important; }
.chart-wrap canvas { color-scheme: normal; }

/* Playlist rail arrows */
.seq-nav { background: var(--dt-card) !important; border-color: var(--dt-card-border) !important; color: var(--dt-text-2) !important; }
.seq-nav:hover:not(:disabled) { border-color: var(--dt-primary) !important; color: var(--dt-text) !important; }
.seq-count { color: var(--dt-grey) !important; }

/* Scoped: these were appended unscoped, so !important applied the dark colours to the light
   theme as well, leaving a washed-out logout link on the white sidebar. */
[data-bs-theme="dark"] .sidebar-user { border-top-color: var(--dt-border) !important; }
[data-bs-theme="dark"] .sidebar-user .logout-link { color: var(--dt-text-2) !important; }
[data-bs-theme="dark"] .sidebar-user .logout-link:hover { color: #FF9B9B !important; }  /* 6.77:1 */

.m-obj-foot { border-top-color: var(--dt-card-border) !important; }


/* ============================================================
   DARK MODE CONTRAST PASS
   Purple reads well on white but collapses on the dark surfaces
   (#3F3D40 / #383638) — most of these sat between 1.0:1 and 1.6:1,
   effectively invisible. Text goes white; chips keep their identity
   by tinting the surface and lightening the text together.
   ============================================================ */
[data-bs-theme="dark"] {

    /* ---- Purple text -> white ---- */
    .text-primary,
    .m-obj-name, .obj-type, .quick-link,
    .r-btn-complete, .m-run-btn.m-run-outline,
    .sidebar-brand .brand-role,
    h1, h2, h3, h4, h5, h6 { color: var(--dt-text) !important; }

    .quick-link:hover { color: var(--dt-primary) !important; }

    /* ---- Muted greys: legible without shouting ---- */
    .m-obj-sub, .ev-sub, .ts-empty, .seq-count, .rs-sum, .rs-toggle,
    .tool-url, .oc-note, .chart-legend, .desk-filter .form-label,
    .ev-code, .event-table thead th, .sidebar .sr-nav-label { color: var(--dt-text-2) !important; }

    .sidebar .nav-link.disabled { color: var(--dt-grey) !important; }

    /* ---- Chips: tint the surface, lighten the text ----
       Recolouring only the text would have left dark text on a pale
       chip, or light text on a pale chip — both unreadable. */
    .tp-purple, .ib-purple, .joined-badge {
        background: color-mix(in srgb, #A79BFF 20%, var(--dt-card)) !important;
        color: #CFC7FF !important; }
    .tp-teal {
        background: color-mix(in srgb, #37C29B 20%, var(--dt-card)) !important;
        color: #6FE0C0 !important; }
    .tp-red, .ib-red {
        background: color-mix(in srgb, #FF6B6B 20%, var(--dt-card)) !important;
        color: #FF9B9B !important; }
    .tp-blue {
        background: color-mix(in srgb, #5AA9F0 20%, var(--dt-card)) !important;
        color: #93C9F7 !important; }
    .tp-pink {
        background: color-mix(in srgb, #F06699 20%, var(--dt-card)) !important;
        color: #F79CBE !important; }
    .tp-amber, .pill-ready, .r-btn-ready {
        background: color-mix(in srgb, #F0B429 20%, var(--dt-card)) !important;
        color: #F5CF77 !important; }
    .tp-gray {
        background: var(--dt-secondary-btn) !important;
        color: var(--dt-text-2) !important; }
    .region-pill {
        background: color-mix(in srgb, #37C29B 20%, var(--dt-card)) !important;
        color: #6FE0C0 !important; }

    /* ---- Run state labels ---- */
    .state-pending  { color: var(--dt-text-2) !important; }
    .state-ready    { color: #F5CF77 !important; }
    .state-active   { color: #7FD858 !important; }
[data-bs-theme="dark"]     .state-complete { color: #79B8F5 !important; }

    /* ---- Playlist rail ---- */
    .seq-chip { color: var(--dt-text-2) !important; }
    .seq-chip:hover { color: var(--dt-text) !important; }
    .seq-chip.done {
        background: color-mix(in srgb, #7FD858 18%, var(--dt-card)) !important;
        border-color: color-mix(in srgb, #7FD858 40%, var(--dt-card)) !important;
        color: #9BE47C !important; }
    /* .current keeps its filled green background, so its own text stays white. */
[data-bs-theme="dark"]     .seq-chip.current { color: #FFFFFF !important; }
    .seq-nav { color: var(--dt-text-2) !important; }
    .seq-nav:hover:not(:disabled) { color: var(--dt-text) !important; }
}

/* Change-password link: the light-mode teal is unreadable on the dark sidebar. */
[data-bs-theme="dark"] .pwd-link { color: #6FD3EC !important; }