/* NPS Application - Dark Mode Theme */
/* Applies when <html data-theme="dark"> is set */

[data-theme="dark"] {
    --primary-color: #42a5f5;
    --primary-dark: #1e88e5;
    --primary-light: #64b5f6;
    --secondary-color: #4db6ac;
    --success-color: #66bb6a;
    --warning-color: #ffa726;
    --danger-color: #ef5350;
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.60);
    --text-disabled: rgba(255, 255, 255, 0.38);
    --border-color: #424242;
    --background-light: #121212;
    --bg-card: #1e1e1e;
    --bg-nav: #1e1e1e;
    --bg-input: #2c2c2c;
    --bg-hover: rgba(255, 255, 255, 0.04);
    --bg-header-gradient: #1a1c22;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.48);
}

/* Body & base */
[data-theme="dark"] body {
    background-color: var(--background-light);
    color: var(--text-primary);
}

/* Cards */
[data-theme="dark"] .card-modern {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .card-modern .card-header-modern {
    background: #26282c;
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-modern .card-body {
    color: var(--text-primary);
}

[data-theme="dark"] .card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .card-header {
    background: #26282c;
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

/* Tables */
[data-theme="dark"] .table-modern {
    background: var(--bg-card);
}

[data-theme="dark"] .table-modern thead {
    background: #26282c;
}

[data-theme="dark"] .table-modern th {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table-modern td {
    border-bottom-color: #333;
    color: var(--text-primary);
}

[data-theme="dark"] .table-modern tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .table {
    color: var(--text-primary);
}

[data-theme="dark"] .table th {
    color: var(--text-secondary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .table td {
    border-bottom-color: #333;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Metric cards */
[data-theme="dark"] .metric-card {
    background: var(--bg-card);
}

[data-theme="dark"] .nps-display {
    background: var(--bg-card);
}

[data-theme="dark"] .nps-display h3 {
    color: var(--text-secondary);
}

/* Campaign cards */
[data-theme="dark"] .campaign-card {
    background: var(--bg-card);
}

[data-theme="dark"] .campaign-card-meta {
    border-top-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .page-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .page-header h1 {
    color: var(--text-primary);
}

/* Forms */
[data-theme="dark"] .form-modern .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-modern .form-control,
[data-theme="dark"] .form-modern .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .form-modern .form-control:focus,
[data-theme="dark"] .form-modern .form-select:focus {
    border-color: var(--primary-color);
    background-color: var(--bg-input);
    color: var(--text-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Bootstrap's chevron is a dark-grey SVG stroke, invisible on a dark field.
   Re-declare the same arrow with a light stroke and keep its position/size. */
[data-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='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.15);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled {
    background-color: #1a1a1a;
    color: var(--text-disabled);
}

[data-theme="dark"] .form-check-label {
    color: var(--text-primary);
}

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

/* Help text that carries only .form-text (no .text-muted) fell back to
   Bootstrap's dark secondary colour and was nearly invisible on the dark field
   — e.g. the "Leave empty to use the default" hints in the email card. */
[data-theme="dark"] .form-text {
    color: var(--text-secondary);
}

/* Links */
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item) {
    color: var(--primary-light);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):hover {
    color: var(--primary-color);
}

/* Headings */
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--text-primary);
}

/* Navbar (bg-white override for dark mode) */
[data-theme="dark"] .navbar.bg-white {
    background: var(--bg-nav) !important;
}

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

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

[data-theme="dark"] .navbar .nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .navbar .nav-link:hover {
    color: var(--primary-light) !important;
}

/* Mobile burger: the navbar-light toggler icon is a dark SVG that
   vanishes on the dark navbar — invert it and lighten the border. */
[data-theme="dark"] .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(2);
}

[data-theme="dark"] .navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(66, 165, 245, 0.4);
}

/* Modals */
[data-theme="dark"] .modal-content {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header {
    background: #26282c;
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

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

[data-theme="dark"] .modal-footer {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Alerts */
[data-theme="dark"] .alert {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .alert-success {
    background: #1b3a1b;
    color: #a5d6a7;
    border-left-color: var(--success-color);
}

[data-theme="dark"] .alert-info {
    background: #1a2a3a;
    color: #90caf9;
    border-left-color: var(--primary-color);
}

[data-theme="dark"] .alert-warning {
    background: #3a2a1a;
    color: #ffcc80;
    border-left-color: var(--warning-color);
}

[data-theme="dark"] .alert-danger {
    background: #3a1a1a;
    color: #ef9a9a;
    border-left-color: var(--danger-color);
}

[data-theme="dark"] .alert-modern {
    background: var(--bg-card);
}

/* Buttons - keep modern buttons as they are but fix outline */
[data-theme="dark"] .btn-outline-modern,
[data-theme="dark"] .btn-modern.btn-outline-secondary {
    background: var(--bg-card);
    border-color: #4a4f57;
    color: var(--text-primary);
}

[data-theme="dark"] .btn-outline-modern:hover,
[data-theme="dark"] .btn-modern.btn-outline-secondary:hover {
    background: #2c2f34;
    border-color: #5b616b;
    color: var(--text-primary);
}

/* Soft warning/danger buttons in dark mode */
[data-theme="dark"] .btn-warning-modern {
    background: rgba(255, 167, 38, 0.12);
    border-color: rgba(255, 167, 38, 0.35);
    color: #ffc069;
}

[data-theme="dark"] .btn-warning-modern:hover {
    background: rgba(255, 167, 38, 0.22);
    border-color: rgba(255, 167, 38, 0.5);
    color: #ffd08a;
}

[data-theme="dark"] .btn-danger-modern {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.35);
    color: #f28b88;
}

[data-theme="dark"] .btn-danger-modern:hover {
    background: rgba(239, 83, 80, 0.22);
    border-color: rgba(239, 83, 80, 0.5);
    color: #f5a6a4;
}

/* Soft status badges in dark mode */
[data-theme="dark"] .badge-draft {
    background: rgba(160, 168, 180, 0.16);
    color: #b4bcc8;
}

[data-theme="dark"] .badge-active {
    background: rgba(102, 187, 106, 0.16);
    color: #8fd694;
}

[data-theme="dark"] .badge-closed {
    background: rgba(239, 83, 80, 0.16);
    color: #f28b88;
}

[data-theme="dark"] .badge-anonymized {
    background: rgba(159, 122, 234, 0.18);
    color: #bda5ee;
}

[data-theme="dark"] .badge-info {
    background: rgba(66, 165, 245, 0.16);
    color: #7ab8f5;
}

[data-theme="dark"] .badge-test {
    background: rgba(255, 193, 7, 0.16);
    color: #f5c94e;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-link.nav-link {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .btn-link.nav-link:hover {
    color: var(--primary-light) !important;
}

/* Footer */
[data-theme="dark"] .footer {
    background: #1a1a1a !important;
    border-top-color: var(--border-color);
}

[data-theme="dark"] .footer a {
    color: var(--text-secondary);
}

[data-theme="dark"] .footer a:hover {
    color: var(--primary-light);
}

[data-theme="dark"] .footer h6 {
    color: var(--text-primary);
}

[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Text helpers */
[data-theme="dark"] .text-muted {
    color: var(--text-secondary) !important;
}

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

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

/* Badges */
[data-theme="dark"] .badge.bg-success:not(.bg-opacity-10) {
    background: #2e7d32 !important;
}

[data-theme="dark"] .badge.bg-secondary:not(.bg-opacity-10) {
    background: #555 !important;
}

[data-theme="dark"] .badge.bg-danger:not(.bg-opacity-10) {
    background: #c62828 !important;
}

[data-theme="dark"] .badge-yes {
    background: #1b3a1b;
    color: #a5d6a7;
}

[data-theme="dark"] .badge-no {
    background: #3a1a1a;
    color: #ef9a9a;
}

/* Survey page */
[data-theme="dark"] .survey-card {
    background: var(--bg-card);
}

[data-theme="dark"] .survey-question {
    color: var(--text-primary);
}

[data-theme="dark"] .rating-btn {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .rating-btn:hover {
    border-color: var(--primary-light);
}

[data-theme="dark"] .rating-btn:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(66, 165, 245, 0.4);
}

[data-theme="dark"] .rating-labels {
    color: var(--text-secondary);
}

/* Dropdown / lang switcher */
[data-theme="dark"] .lang-switcher-btn {
    border-color: var(--primary-light);
    color: var(--primary-light);
    background: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .lang-switcher-btn:hover {
    background: rgba(66, 165, 245, 0.2);
    color: var(--primary-light);
}

[data-theme="dark"] .lang-switcher-btn.active {
    background: var(--primary-dark);
    color: white;
    border-color: var(--primary-dark);
}

/* Code blocks (API tokens etc.) */
[data-theme="dark"] code {
    background: #2a2a2a;
    color: #ce9178;
}

/* Landing CLI example: the box is already dark; keep its code plain light grey. */
[data-theme="dark"] .landing-code code {
    background: none;
    color: #e2e8f0;
    padding: 0;
}

/* Table header sortable */
[data-theme="dark"] .th-sortable {
    color: var(--text-secondary);
}

/* Input groups */
[data-theme="dark"] .input-group .form-control {
    background: var(--bg-input);
    color: var(--text-primary);
}

[data-theme="dark"] .input-group-text {
    background: #2a2a2a;
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Dropdown menu */
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Selected dropdown item: light text on the blue highlight (all dropdowns) */
[data-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-theme="dark"] .dropdown-menu .dropdown-item:active {
    color: #fff;
    background-color: var(--bs-primary, #0d6efd);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--primary-light);
}

[data-theme="dark"] .page-link:hover {
    background: var(--bg-hover);
    color: var(--primary-color);
}

[data-theme="dark"] .page-item.active .page-link {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Tabs / nav pills */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Misc */
[data-theme="dark"] th {
    color: var(--text-secondary);
}

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

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

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

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

[data-theme="dark"] .shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

/* Toast / progress bar areas */
[data-theme="dark"] .progress {
    background: #2a2a2a;
}

[data-theme="dark"] .toast {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Trend chart tooltip in dark mode */
[data-theme="dark"] .trend-chart-tooltip {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .trend-chart-tooltip .tooltip-date {
    color: var(--text-primary);
}

[data-theme="dark"] .trend-empty-state {
    color: var(--text-secondary);
}

/* Dark mode toggle button styling */
.theme-toggle-btn {
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: transparent;
    padding: 0.4rem 0.7rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    line-height: 1;
}

.theme-toggle-btn:hover {
    background: rgba(16, 24, 40, 0.05);
    border-color: #c1c8d4;
}

[data-theme="dark"] .theme-toggle-btn {
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-light);
}

/* NPS Trend Chart - dark mode */
[data-theme="dark"] .trend-chart-container {
    background: transparent;
}

/* Comment Review Dashboard - dark mode */
[data-theme="dark"] .comment-text {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
}
/* Notification bell + live response feed — dark mode */
[data-theme="dark"] .notif-dropdown {
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.1);
}

[data-theme="dark"] .notif-dropdown-header {
    border-bottom-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .notif-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .notif-item:hover {
    background: rgba(255,255,255,0.05);
}

[data-theme="dark"] .notif-item-unread {
    background: rgba(37,112,232,0.15);
}

[data-theme="dark"] .notif-comment,
[data-theme="dark"] .notif-details,
[data-theme="dark"] .feed-comment,
[data-theme="dark"] .feed-campaign {
    color: rgba(255,255,255,0.55);
}

[data-theme="dark"] .notif-dropdown-footer {
    border-top-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .feed-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .feed-item:hover {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .notif-center-item + .notif-center-item {
    border-top-color: rgba(255,255,255,0.08);
}

/* Side-by-side comparison (task #12) */
[data-theme="dark"] .compare-table .compare-metric-label {
    background: #26282c;
    color: var(--text-secondary);
}

[data-theme="dark"] .baseline-col {
    background: rgba(66, 165, 245, 0.10);
    box-shadow: inset 0 0 0 1px rgba(66, 165, 245, 0.30);
}

[data-theme="dark"] .delta-zero {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .dist-bar {
    background: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] tr.compare-selected td {
    background: rgba(66, 165, 245, 0.12) !important;
}

/* Command palette (task #23) — dark theme overrides */
[data-theme="dark"] .command-palette-overlay {
    background: rgba(0, 0, 0, 0.62);
}

[data-theme="dark"] .command-palette {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .command-palette-input-wrap,
[data-theme="dark"] .command-palette-footer {
    border-color: var(--border-color);
}

[data-theme="dark"] .command-palette-input {
    color: var(--text-primary);
}

[data-theme="dark"] .cp-item.cp-active {
    background: rgba(66, 165, 245, 0.16);
}

[data-theme="dark"] .cp-item.cp-active .cp-item-icon {
    color: var(--primary-color);
}

/* ------------------------------------------------------------------
   Dark-mode polish (2026-09-09): plain Bootstrap tables, bg-light
   surfaces (auth pages + landing sections) and landing page cards.
   ------------------------------------------------------------------ */

/* Plain .table cells carry Bootstrap's light body background
   (--bs-table-bg) AND its dark body text colour (--bs-table-color).
   Make cells transparent so the card/section background shows and
   re-colour the text (dashboard campaign-metrics table, settings
   active-sessions table, webhook/activity tables, ...). */
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background-color: transparent;
}

[data-theme="dark"] .table td {
    color: var(--text-primary);
}

/* A flagged row (an overdue case, .table-warning) carries Bootstrap's light
   amber surface with dark text, which is unreadable on a dark card — and at the
   mobile breakpoint that row *is* the card (2026-10-25). Keep the signal as a
   translucent tint, drop the light surface. */
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > td,
[data-theme="dark"] .table-warning > th {
    background-color: rgba(255, 193, 7, 0.14) !important;
    color: var(--text-primary) !important;
}

/* .bg-light is Bootstrap utility with !important; used for auth-page
   bodies (login/logout/register/2FA/...) and landing alternate sections
   (about, customers). Map it onto the dark page background. */
[data-theme="dark"] .bg-light {
    background-color: var(--background-light) !important;
}

/* Soft respondent-count badges (bg-*-10 + text-*): keep the translucent
   background and brighten the label so it reads on dark cards. Bootstrap
   text-* utilities carry !important, hence !important here too. */
[data-theme="dark"] .badge.bg-opacity-10.text-secondary {
    color: #b4bcc8 !important;
}

[data-theme="dark"] .badge.bg-opacity-10.text-success {
    color: #8fd694 !important;
}

[data-theme="dark"] .badge.bg-opacity-10.text-danger {
    color: #f28b88 !important;
}

[data-theme="dark"] .badge.bg-opacity-10.text-warning {
    color: #ffd08a !important;
}

[data-theme="dark"] .badge.bg-opacity-10.text-info {
    color: #7ab8f5 !important;
}

/* Landing page (public frontpage): cards are hard-coded white in the
   page's inline stylesheet; the page bg + section bg stay dark, so give
   the cards the standard dark surface and readable text. */
[data-theme="dark"] .nps-category,
[data-theme="dark"] .feature-card {
    background: var(--bg-card);
}

[data-theme="dark"] .nps-category h4.text-success {
    color: #8fd694;
}

[data-theme="dark"] .nps-category h4.text-warning {
    color: #ffd08a;
}

[data-theme="dark"] .nps-category h4.text-danger {
    color: #f28b88;
}

/* Niotio spinner: needle/arcs already use CSS vars; soften overlay only */
[data-theme="dark"] .metrics-loading-overlay {
    background: color-mix(in srgb, var(--bg-card, #1a1f2e) 80%, transparent);
}

/* Niotio brand lockup: in dark mode the dark-ink wordmark would vanish on the
   dark navbar, so swap to the dark-theme lockup (light gauge + white wordmark). */
[data-theme="dark"] .niotio-lockup--light {
    display: none;
}
[data-theme="dark"] .niotio-lockup--dark {
    display: inline-block;
}

/* UIBot live pass (2026-10-26): readable breadcrumb current item in dark mode. */
[data-theme="dark"] .breadcrumb-item.active {
    color: var(--text-secondary, #adb5bd);
}

/* UIBot live pass: Settings quota bar needs a visible track at 0 % in dark mode. */
[data-theme="dark"] .settings-quota-progress {
    background: #2c2f33;
    border: 1px solid #4a4f55;
}

/* UIBot 2026-10-25 review (#42, fixed 2026-10-27): respondent filter chips
   and the respondents search field. The chips had no stylesheet rule at all,
   so they kept Bootstrap's light-theme text colour and were nearly invisible
   on the dark card; the search icon/placeholder referenced a colour variable
   that does not exist and fell back to a low-contrast grey. */
[data-theme="dark"] .respondent-status-chip {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] .respondent-status-chip:hover,
[data-theme="dark"] .respondent-status-chip:focus-visible {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
    color: var(--text-primary);
}

/* The dark primary is a light blue (#42a5f5): white text on it is only 2.6:1,
   so the active chip takes dark ink instead (≈7:1). */
[data-theme="dark"] .respondent-status-chip.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #10233a;
}

[data-theme="dark"] .search-input-container .bi-search,
[data-theme="dark"] .search-input-container input::placeholder {
    color: var(--text-secondary);
    opacity: 1;
}