/** * Dark mode — shared across all pages. Activated by (see theme.js). * Works by (a) remapping the CSS variables and (b) overriding the literal white surfaces * the pages hard-code. Selectors use html[data-theme="dark"] so they win over the pages' * own :root / component rules by specificity, regardless of stylesheet order. */ /* ── Floating theme toggle: hide it while a modal is open ── theme.js injects #themeToggle fixed at bottom-right (z-index:9990). On mobile the builder/detail modals become full-height sheets whose footer (Next / Submit) sits in that same bottom-right corner — the toggle rendered on top of the Next button and swallowed the tap. Hiding the toggle whenever any .modal.open is visible fixes it everywhere without per-modal z-index juggling. (The auth screen is z-index:9999, already above the toggle, so it needs no rule.) :has() is supported by all current mobile browsers; where it isn't, the toggle simply stays visible — the original behaviour. */ body:has(.modal.open) #themeToggle { display:none !important; } /* ── Shared component: password field with a show/hide eye toggle ── Not dark-specific — lives here because theme.css is loaded on every page, so the markup (.pw-wrap > input + .pw-eye) is styled once, everywhere. */ .pw-wrap { position:relative; } .pw-wrap input { padding-right:42px !important; } .pw-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer; color:var(--text-l); font-size:14px; border-radius:6px; padding:0; line-height:1; } .pw-eye:hover { color:var(--text-m); } html[data-theme="dark"] .pw-eye { color:var(--text-l); } html[data-theme="dark"] .pw-eye:hover { color:var(--text); } /* Eye toggle inside the dark auth .field wrapper (login/register screens) */ .field:has(.pw-eye) input { padding-right:42px; } .field .pw-eye { color:rgba(255,255,255,.5); } .field .pw-eye:hover { color:#fff; } html[data-theme="dark"] { --g100:#15271c; --g50:#0e1712; --white:#16231b; --text:#e7f1e9; --text-m:#a9c6b3; --text-l:#7fa38c; --border:#26392d; } html[data-theme="dark"] body { background:#0b130e; color:var(--text); } /* White card / surface backgrounds → dark */ html[data-theme="dark"] .sidebar, html[data-theme="dark"] .scard, html[data-theme="dark"] .kpi, html[data-theme="dark"] .block, html[data-theme="dark"] .modal-box, html[data-theme="dark"] .tbl-wrap, html[data-theme="dark"] .hist-item, html[data-theme="dark"] .lb-item, html[data-theme="dark"] .notif, html[data-theme="dark"] .qcard, html[data-theme="dark"] .intro, html[data-theme="dark"] .ach-card, html[data-theme="dark"] .signin-prompt, html[data-theme="dark"] .an-q, html[data-theme="dark"] .an-kpi, html[data-theme="dark"] .q-review, html[data-theme="dark"] .center-state, html[data-theme="dark"] .mini-study { background:#16231b; color:var(--text); } /* Tables */ html[data-theme="dark"] table.tbl th { background:#101a13; color:var(--text-m); } html[data-theme="dark"] table.tbl tr:hover td { background:#12211a; } /* Inputs / selects / textareas */ html[data-theme="dark"] .search input, html[data-theme="dark"] .search select, html[data-theme="dark"] .search-bar input, html[data-theme="dark"] .surv-input, html[data-theme="dark"] .frow input, html[data-theme="dark"] .frow select, html[data-theme="dark"] .form-row input, html[data-theme="dark"] .form-row select, html[data-theme="dark"] .form-row textarea, html[data-theme="dark"] #adminNote, html[data-theme="dark"] #respStudySelect { background:#101a13; color:var(--text); border-color:var(--border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color:var(--text-l); } /* Pills / chips / filter buttons */ html[data-theme="dark"] .chip, html[data-theme="dark"] .sort-btn, html[data-theme="dark"] .cat-chip, html[data-theme="dark"] .fchip, html[data-theme="dark"] .qtype-btn, html[data-theme="dark"] .yn-btn, html[data-theme="dark"] .choice-opt { background:#16231b; color:var(--text-m); border-color:var(--border); } /* Misc */ /* KPI icon: distinct green-tinted chip so it stands out from the card + the icon glyph */ html[data-theme="dark"] .kpi .ico { background:#0f3d22; color:#4dc94d; } html[data-theme="dark"] .btn-ghost { color:var(--text-m); } html[data-theme="dark"] .an-note, html[data-theme="dark"] .prog-label, html[data-theme="dark"] .hint { color:var(--text-l); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background:#2a4133; } /* Contrast fixes: green-on-green text that goes unreadable once backgrounds darken */ html[data-theme="dark"] .side-item { color:var(--text-m); } html[data-theme="dark"] .side-item.active { background:#15271c; color:#4dc94d; } html[data-theme="dark"] .side-item.active .cnt { background:#22a24b; color:#04140a; } html[data-theme="dark"] .side-item .cnt { background:#15271c; color:#4dc94d; } html[data-theme="dark"] .pill-cat, html[data-theme="dark"] .scard .cat, html[data-theme="dark"] .rb-respondent, html[data-theme="dark"] .sb-active { background:#15271c; color:#4dc94d; } html[data-theme="dark"] .block h3 a, html[data-theme="dark"] .mini-study .t span, html[data-theme="dark"] .kpi span { color:var(--text-l); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color:var(--text); } /* surv.html header + footer: deep green in dark (matches dashboard topnav) so the white bars don't clash with the dark body and the text/icons stay legible */ html[data-theme="dark"] .topbar { background:var(--g900); border-bottom-color:#0a1710; } html[data-theme="dark"] .topbar .logo strong, html[data-theme="dark"] .topbar .center { color:#e7f1e9; } html[data-theme="dark"] .topbar .back { color:#a9c6b3; } html[data-theme="dark"] .topbar .back:hover { color:#4dc94d; } html[data-theme="dark"] .submit-bar, html[data-theme="dark"] .progress-wrap { background:#0f1a12; border-color:var(--border); } html[data-theme="dark"] .progress-track { background:#16231b; } html[data-theme="dark"] .submit-bar .cnt { color:var(--text-l); } /* Admin Security panel */ html[data-theme="dark"] .sec-card { background:#16231b; border-color:var(--border); } html[data-theme="dark"] .sec-field input { background:#101a13; color:var(--text); border-color:var(--border); } html[data-theme="dark"] .sec-field label, html[data-theme="dark"] .sec-card h3 { color:var(--text); } html[data-theme="dark"] .sec-hint { color:var(--text-m); } /* Admin Responses study picker */ html[data-theme="dark"] .study-picker { background:#16231b; border-color:var(--border); } html[data-theme="dark"] .pick-row:hover { background:#12211a; } html[data-theme="dark"] .pick-row.sel { background:#15271c; color:#4dc94d; } html[data-theme="dark"] .pick-row.sel .pc-count { color:#4dc94d; } /* ══════════════════════════════════════════════════════════ Dark-mode refinements (status pills, skeletons, filters, builder overlay, responses table). Kept together so the whole dark surface story lives in one place. ══════════════════════════════════════════════════════════ */ /* #2 — Status pills: the light hard-coded backgrounds and green-on-green text become unreadable on dark. Re-tint each with a translucent wash + a bright foreground so "Completed"/"Closed"/etc. stay legible. */ html[data-theme="dark"] .sp-done { background:#0f3d22; color:#6ee79a; } html[data-theme="dark"] .sp-active { background:#0f3d22; color:#6ee79a; } html[data-theme="dark"] .sp-closed { background:#1c2b39; color:#9db8d4; } html[data-theme="dark"] .sp-pending { background:#3a2f10; color:#f0c040; } html[data-theme="dark"] .sp-rejected{ background:#3a1717; color:#f7a5a5; } /* research.html reuses .sp- where status can be archived */ html[data-theme="dark"] .sp-archived{ background:#26392d; color:#a9c6b3; } /* #3 — Skeleton loaders: .skel is hard-coded #fff and its inner bars use --g50, so cards flash bright white while the feed loads. Darken the card, soften the shimmer, and dim the placeholder bars. */ html[data-theme="dark"] .skel { background:#16231b; border-color:var(--border); } html[data-theme="dark"] .skel::after { background:linear-gradient(90deg,transparent,rgba(77,201,77,.07),transparent); } html[data-theme="dark"] .skel .l { background:#22332a; } /* #3 — Filters / sort / category chips: give the active (selected) state a readable green wash instead of relying on the light gradient over a dark card, and ensure the resting chips match the dark surface. */ html[data-theme="dark"] .fchip, html[data-theme="dark"] .sort-btn, html[data-theme="dark"] .chip, html[data-theme="dark"] .cat-chip { background:#16231b; color:var(--text-m); border-color:var(--border); } html[data-theme="dark"] .fchip.active, html[data-theme="dark"] .sort-btn.active, html[data-theme="dark"] .chip.active, html[data-theme="dark"] .cat-chip.active { background:linear-gradient(135deg,#0f5a2e,#12833f); color:#eafff0; border-color:transparent; } /* #5 — Builder "Add Question" overlay: .qeditor is position:absolute inset:0 with a hard-coded white background and is NOT in the surface list above, so it (and its "Add Question" header + Save/Cancel footer) stayed light in dark mode. Darken the overlay and its type buttons/option rows. */ html[data-theme="dark"] .qeditor { background:#16231b; } html[data-theme="dark"] .qtype-btn { background:#101a13; color:var(--text-m); border-color:var(--border); } html[data-theme="dark"] .qtype-btn.active { background:#15271c; color:#6ee79a; border-color:#2e8b57; } html[data-theme="dark"] .opt-row .del { background:#3a1717; color:#f7a5a5; } html[data-theme="dark"] .add-q { color:#6ee79a; border-color:var(--border); } html[data-theme="dark"] .add-q:hover { background:#101a13; border-color:#2e8b57; } html[data-theme="dark"] .q-item { background:#101a13; border-color:var(--border); } /* #5/#6 — Modal chrome: header/footer dividers and the close glyph need to read against the dark box; the q-list items and info boxes too. */ html[data-theme="dark"] .modal-head, html[data-theme="dark"] .modal-foot { border-color:var(--border); } html[data-theme="dark"] .modal-head .x { color:var(--text-l); } html[data-theme="dark"] .modal-head .x:hover { color:var(--text); } html[data-theme="dark"] .info-box { background:#101a13; border-color:var(--border); color:var(--text-m); } html[data-theme="dark"] .steps-ind .sind { background:#101a13; } /* #6 — Contrast sweep: assorted green-on-green / dark-on-dark text that only shows up once surfaces darken. */ html[data-theme="dark"] .scard .cat, html[data-theme="dark"] .block h3 a, html[data-theme="dark"] .add-q, html[data-theme="dark"] .an-q .qh { color:var(--text); } html[data-theme="dark"] .an-rating { color:var(--gold-l); } html[data-theme="dark"] .an-kpi b { color:var(--text); } html[data-theme="dark"] .bar-row .track { background:#101a13; } html[data-theme="dark"] .progress { background:#101a13; } html[data-theme="dark"] .form-row label { color:var(--text); } /* #1 — surv.html answer inputs: the dark base rules above (.yn-btn / .choice-opt) have higher specificity than the pages' own .active / .sel selected states, so tapping Yes/No or an option didn't turn green in dark mode. Re-assert the selected look at equal-or-higher specificity so the selection is visible. */ html[data-theme="dark"] .yn-btn.active { background:linear-gradient(135deg,#0f5a2e,#12833f); border-color:#2e8b57; color:#eafff0; } html[data-theme="dark"] .choice-opt.sel { background:#15271c; border-color:#2e8b57; } html[data-theme="dark"] .choice-opt.sel .choice-radio { border-color:#4dc94d; } html[data-theme="dark"] .choice-opt.sel .choice-radio::after { background:#4dc94d; } html[data-theme="dark"] .choice-opt.sel .choice-check { background:#2e8b57; border-color:#2e8b57; } html[data-theme="dark"] .choice-opt:hover { background:#12211a; } /* rating stars: dim the resting stars, but keep selected (.on) stars gold. Both selectors need the dark prefix to out-specify the base .star rule. */ html[data-theme="dark"] .star { color:#2a4133; } html[data-theme="dark"] .star.on { color:var(--gold-l); } /* #8 — Responses table (Google-Forms-style) dark styling. */ html[data-theme="dark"] .resp-tbl-wrap { border-color:var(--border); } html[data-theme="dark"] .resp-tbl th { background:#101a13; color:var(--text-m); border-color:var(--border); } html[data-theme="dark"] .resp-tbl td { border-color:var(--border); color:var(--text); } html[data-theme="dark"] .resp-tbl tbody tr:hover td { background:#12211a; } html[data-theme="dark"] .resp-tbl .r-who { color:var(--text); } html[data-theme="dark"] .resp-tbl .r-guest { color:var(--text-l); } html[data-theme="dark"] .resp-empty-cell { color:var(--text-l); } /* Leaderboard explainer + stats, share modal input */ html[data-theme="dark"] .lb-explain, html[data-theme="dark"] .lb-stat { background:#16231b; border-color:var(--border); } html[data-theme="dark"] .lb-explain-head { color:var(--text); } html[data-theme="dark"] .lb-stat b { color:#6ee79a; } html[data-theme="dark"] .share-input { background:#101a13; color:var(--text); border-color:var(--border); } html[data-theme="dark"] .card-share { color:var(--text-m); border-color:var(--border); } html[data-theme="dark"] .card-share:hover { color:#6ee79a; border-color:#2e8b57; }