.client-theme-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.repro-theme-toggle {
    border: 1px solid #cfd8e3;
    border-radius: 8px;
    background: #fff;
    color: #172033;
    font-size: 14px;
    white-space: nowrap;
}

/* Light is the explicit default, including on devices using a dark OS theme. */
html[data-repro-theme="light"] {
    color-scheme: light;
}

html[data-repro-theme="dark"] {
    color-scheme: dark;
    --repro-bg: #15191f;
    --repro-surface: #20262e;
    --repro-soft: #282f39;
    --repro-border: #4b5665;
    --repro-text: #e9edf4;
    --repro-muted: #b4bdcb;
    --repro-link: #8fc3ff;
}

html[data-repro-theme="dark"] body {
    background: var(--repro-bg) !important;
    color: var(--repro-text);
}

html[data-repro-theme="dark"] .client-v2 {
    --text: var(--repro-text);
    --muted: var(--repro-muted);
    --line: var(--repro-border);
    --blue: var(--repro-link);
    --green: #86d6a9;
    --orange: #ffc184;
}

html[data-repro-theme="dark"] :is(.card, table, .client-header-card, .files-card, .info-box, .progress-card,
    .dropzone, .inline-upload-drop, .client-tab, .file-modal, .workspace-dialog,
    .file-tree-comment, .client-file-tree-comment, .stat-card,
    [id^="client-file-workspace-"] > div, #uploadCommentModal > div, #attachmentCommentModal > div) {
    background: var(--repro-surface) !important;
    color: var(--repro-text);
    border-color: var(--repro-border) !important;
}

/* Legacy workspace panels use inline colors; scope the overrides to those palettes. */
html[data-repro-theme="dark"] :is(
    [style*="background:#fff"], [style*="background: #fff"], [style*="background: rgb(255, 255, 255)"],
    [style*="background:#fbfdff"], [style*="background:#f7f8fa"], [style*="background:#eef2f7"]) {
    background: var(--repro-soft) !important;
    color: var(--repro-text) !important;
}

html[data-repro-theme="dark"] :is(
    [style*="border:"], [style*="border-bottom:"], [style*="border-top:"], [style*="border-left:"],
    td, th, .workspace-chat, .workspace-comment, .modern-table td) {
    border-color: var(--repro-border) !important;
}

html[data-repro-theme="dark"] :is(th, .modern-table th) {
    background: var(--repro-soft) !important;
    color: var(--repro-muted) !important;
}

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

html[data-repro-theme="dark"] .modern-table tr:hover td {
    background: var(--repro-soft);
}

html[data-repro-theme="dark"] :is(input, textarea, select, button, .btn-light, .top a, .file-inline-download) {
    background: var(--repro-soft) !important;
    color: var(--repro-text) !important;
    border-color: var(--repro-border) !important;
}

html[data-repro-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--repro-muted);
    opacity: 1;
}

html[data-repro-theme="dark"] :is(.btn, .btn-active) {
    background: #394b62 !important;
    color: #f5f8ff !important;
    border-color: #647d9c !important;
}

html[data-repro-theme="dark"] :is(.client-tab.active, .dropzone:hover, .dropzone.dragover,
    .inline-upload-drop:hover, .inline-upload-drop.dragover, .file-inline-download:hover, .top a:hover) {
    background: #243e58 !important;
    color: var(--repro-link) !important;
    border-color: var(--repro-link) !important;
}

html[data-repro-theme="dark"] a:not(.btn):not(.btn-active) {
    color: var(--repro-link) !important;
}

html[data-repro-theme="dark"] :is(.top, .inline-upload-title, .operator-notice-row,
    [style*="color:#172033"], [style*="color: #172033"], [style*="color:#111827"],
    [style*="color: rgb(23, 32, 51)"], [style*="color:#374151"]) {
    color: var(--repro-text) !important;
}

html[data-repro-theme="dark"] :is(.muted, .inline-upload-sub, .operator-notice-meta,
    .footer-note, .file-modal-name, [style*="color:#6b7280"], [style*="color:#4b5563"],
    [style*="color:#667085"], [style*="color:#666"], [style*="color: rgb(107, 114, 128)"]) {
    color: var(--repro-muted) !important;
}

html[data-repro-theme="dark"] :is(.notice-new, .badge-new, .workspace-new-comment) {
    background: #42381d;
    color: #ffe29a;
    border-color: #9b803c;
}

html[data-repro-theme="dark"] :is(.notice-ok, .badge-done, .status-green, .msg.ok, .repro-toast) {
    background: #203e30;
    color: #b1edc7;
    border-color: #527e62;
}

html[data-repro-theme="dark"] :is(.badge-updated, .msg.err, .process-step.error .step-dot) {
    background: #48282c;
    color: #ffbfc3;
    border-color: #9c6168;
}

html[data-repro-theme="dark"] :is(.badge-downloaded, .status-blue, .info-icon, .process-step.active .step-dot) {
    background: #253d55;
    color: #b0d7ff;
    border-color: #6384a5;
}

html[data-repro-theme="dark"] :is(.badge-in_work, .info-icon.orange) {
    background: #49351f;
    color: #ffd29c;
    border-color: #9f7848;
}

html[data-repro-theme="dark"] :is(.badge-deleted, .status-gray, .step-dot) {
    background: var(--repro-soft);
    color: var(--repro-muted);
    border-color: var(--repro-border);
}

html[data-repro-theme="dark"] :is(.info-icon.green, .process-step.done .step-dot) {
    background: #203e30;
    color: #b1edc7;
}

html[data-repro-theme="dark"] tr.status-new {
    background: #302e24;
}

html[data-repro-theme="dark"] tr.status-deleted > td {
    background: #24272c;
    color: var(--repro-muted);
}

html[data-repro-theme="dark"] tr.status-deleted .file-name-line > span {
    color: var(--repro-muted);
}

html[data-repro-theme="dark"] .operator-notice-row {
    background: #343124;
}

html[data-repro-theme="dark"] .operator-notice-row:hover {
    background: #49412a;
}

html[data-repro-theme="dark"] .brand img {
    background: transparent;
    border-radius: 0;
    filter: url("/static/repro-logo-dark-filter.svg?v=20261019outline1#dark-logo");
}

html[data-repro-theme="dark"] .upload-icon [stroke="#172033"] {
    stroke: var(--repro-text);
}

html[data-repro-theme="dark"] .favorite-toggle {
    color: #ffc184 !important;
}

html[data-repro-theme="dark"] #client-standard-docs-inline > div:first-child {
    color: var(--repro-text) !important;
}

html[data-repro-theme="dark"] #client-standard-docs-inline [style*="color: rgb(122, 135, 151)"] {
    color: var(--repro-muted) !important;
}