/* Theme D: graphite surfaces with mist-blue accents. Existing component overrides
 * are colors only; their layout and behavior remain in the feature files.
 * Light mode retains the original purple accents with softer surfaces. */
/* Conservative light refinement: retain purple accents, reduce large white
 * surfaces, and slightly lift the original purple sidebar. Dark rules below
 * stay independent so switching themes restores the approved graphite palette. */
html[data-theme="light"] {
    color-scheme: light;
    --sidebar-bg: #242436;
    --sidebar-active: #3b2d55;
    --surface: #f1f1f5;
    --surface-alt: #eaeaee;
    --surface-input: #f1f1f5;
    --border: #d7d7e0;
    --border-light: #e3e3ea;
    --text-muted: #798294;
}
html[data-theme="light"] :is(.sidebar-header, .sidebar) { border-color: #38384a; }
html[data-theme="light"] .sidebar-divider { background: #38384a; }
html[data-theme="light"] :is(.sidebar-header p, .sidebar-section-label) { color: #9494a3; }
html[data-theme="light"] :is(.sidebar-toggle, .tab-button) { color: #b2b2be; }
html[data-theme="light"] :is(.sidebar-toggle:hover, .tab-button:hover) { color: #e4e4ed; }
html[data-theme="light"] .tab-button.active { color: #ad91ee; border-color: #ad91ee; }
html[data-theme="light"] .sidebar .theme-toggle { background: #2b2b40; border-color: #424256; }

/* Cover legacy inline white surfaces without recoloring media or canvas pixels. */
html[data-theme="light"] :is(textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"])) {
    background-color: var(--surface-input) !important;
}
html[data-theme="light"] :is(select[style], .character-prompt-box, #characterSwapTargetCharacterDescription) { border-color: var(--border) !important; }
html[data-theme="light"] :is(select[style], .character-prompt-box, #characterSwapTargetCharacterDescription):focus { border-color: var(--accent) !important; }
html[data-theme="light"] .history-card { background: var(--surface); border-color: var(--border); }
html[data-theme="light"] .history-preview { background: var(--surface-alt); }
html[data-theme="light"] .history-calendar-header button { background: var(--surface-alt); }
html[data-theme="light"] .history-card-failed { background: #f3e9ec; border-color: #e7c8d0; }
html[data-theme="light"] .history-error-text { background: var(--surface); }
html[data-theme="light"] .status-bar.error,
html[data-theme="light"] #storyVideoContent .sv-message[data-error="true"] { background: #f3e9ec; }
html[data-theme="light"] .status-bar.warning { background: #f3ecdd; }
html[data-theme="light"] #img2videoHistoryGroup,
html[data-theme="light"] #storyimageCharacterUploadRow > div {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}
html[data-theme="light"] #storyimageCharacterUploadRow > div > div:nth-child(2),
html[data-theme="light"] [id^="storyimage-scene-characters-row-"] {
    background: var(--surface-alt) !important;
    border-color: var(--border) !important;
}
html[data-theme="light"] .jp-font-cell { background: var(--surface) !important; }

html[data-theme="dark"] {
    color-scheme: dark;
    --accent: #90b8ee;
    --accent-light: #b1d0f7;
    --accent-bg: rgba(144, 184, 238, 0.12);
    --accent-bg-strong: rgba(144, 184, 238, 0.2);
    --accent-shadow: rgba(144, 184, 238, 0.18);
    --accent-ink: #182a43;
    --action-bg: #3a567a;
    --action-hover: #47668c;
    --action-active: #324b69;
    --action-border: #54759b;
    --action-text: #edf3fc;
    --sidebar-bg: #1c1e22;
    --sidebar-hover: rgba(233, 237, 242, 0.06);
    --sidebar-active: rgba(144, 184, 238, 0.14);
    --surface: #2b2e34;
    --surface-alt: #202226;
    --surface-input: #24272c;
    --surface-hover: #353b44;
    --surface-media: #232323;
    --border: #454b55;
    --border-light: #373c44;
    --text-primary: #e9edf2;
    --text-secondary: #adb6c4;
    --text-muted: #9ca7b8;
    --success: #86cfb0;
    --success-bg: #243c33;
    --success-ink: #172d24;
    --danger: #f1a1a8;
    --danger-bg: #402c32;
    --danger-border: #73505a;
    --danger-ink: #3b1d24;
    --warning: #e3bd81;
    --warning-text: #e3bd81;
    --warning-text-strong: #f2d4a8;
    --warning-bg: #3a3329;
    --warning-bg-strong: #493e2d;
    --warning-border: #6b593d;
    --warning-border-strong: #94784d;
}

/* Compact standalone control; leave toolbar layout ownership with style.css. */
.theme-control {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
/* Only the first visible right-hand control absorbs remaining toolbar space.
 * Reset/account already own that auto margin; sharing it centers those controls. */
.top-toolbar:has(> .user-chip, > .state-reset-btn:not([hidden])) > .theme-control {
    margin-left: 0;
}
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 7px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-alt, var(--surface));
    color: var(--text-secondary);
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); background: var(--accent-bg, rgba(124, 58, 237, 0.08)); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { display: block; width: 18px; height: 18px; flex: none; }
.theme-toggle .theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; }
main.card > .theme-control { margin: 20px auto 0; }
.sidebar > .theme-control { margin: 6px 8px; }
/* The mobile navigation remains dark in both themes. */
.sidebar .theme-toggle { color: #adb6c4; border-color: #454b55; background: #24272c; }
.sidebar .theme-toggle:hover { color: #e9edf2; background: rgba(144, 184, 238, 0.12); }
@media (pointer: coarse) {
    .theme-toggle { width: 44px; height: 44px; }
}

html[data-theme="dark"] body { color: var(--text-primary); }
html[data-theme="dark"] :is(.sidebar, .sidebar-header h1) { color: var(--text-primary); }
html[data-theme="dark"] :is(.sidebar-header p, .sidebar-section-label, .sidebar-toggle, .tab-button) { color: var(--text-secondary); }
html[data-theme="dark"] :is(.sidebar-toggle:hover, .tab-button:hover) { color: var(--text-primary); }
html[data-theme="dark"] .tab-button.active { color: var(--accent); }

/* Inline form backgrounds require scoped overrides. Exclude pixel/color controls;
 * canvas rendering, media colors, and export data are never modified. */
html[data-theme="dark"] :is(textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"])) {
    background-color: var(--surface-input) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] :is(textarea, select, input)::placeholder { color: var(--text-muted); opacity: 1; }
html[data-theme="dark"] :is(input, select, textarea, button) { accent-color: var(--accent); }
html[data-theme="dark"] :is(select[style], .character-prompt-box, #characterSwapTargetCharacterDescription) { border-color: var(--border) !important; }
html[data-theme="dark"] :is(select[style], .character-prompt-box, #characterSwapTargetCharacterDescription):focus { border-color: var(--accent) !important; }
html[data-theme="dark"] .form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2390b8ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}
html[data-theme="dark"] select option { background: var(--surface); color: var(--text-primary); }

/* Small accent badges retain pale fills; large actions use a quieter blue. */
html[data-theme="dark"] :is(.user-chip-avatar, .character-card-number, .upload-count-badge, .nai-apply, .sa-cand-check) { color: var(--accent-ink); }
html[data-theme="dark"] :is(.btn-primary, .btn-tpose) {
    background: var(--action-bg);
    border-color: var(--action-border);
    color: var(--action-text);
}
html[data-theme="dark"] :is(.btn-primary, .btn-tpose):hover {
    background: var(--action-hover);
    border-color: var(--action-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] :is(.btn-primary, .btn-tpose):active { background: var(--action-active); }
html[data-theme="dark"] :is(.btn-primary, .btn-tpose):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-theme="dark"] .btn-secondary:hover { background: var(--surface-hover); border-color: var(--border); color: var(--text-primary); }
html[data-theme="dark"] .btn-success { color: var(--success-ink); }
html[data-theme="dark"] .btn-success:hover { background: #a5dfc6; }
html[data-theme="dark"] :is(.btn-danger, .upload-thumbnail-remove) { color: var(--danger-ink); }
html[data-theme="dark"] :is(.btn-danger:hover, .upload-thumbnail-remove:hover) { background: #f6b8bd; }
html[data-theme="dark"] :is(#oeResetParamsBtn, #cnResetParamsBtn, #cvResetParamsBtn):hover { color: var(--accent-ink); }

html[data-theme="dark"] .status-bar.error { background: var(--danger-bg); }
html[data-theme="dark"] .status-bar.warning { background: var(--warning-bg); }
html[data-theme="dark"] .status-bar.warning .status-text { color: var(--warning-text); }
html[data-theme="dark"] .sa-badge.sa-ready { background: var(--success-bg); color: var(--success); }
html[data-theme="dark"] .sa-badge.sa-generating { background: var(--warning-bg); color: var(--warning-text); }
html[data-theme="dark"] .sa-badge.sa-failed { background: var(--danger-bg); color: var(--danger); }
html[data-theme="dark"] #storyVideoContent .sv-message[data-error="true"] { background: var(--danger-bg); color: var(--danger); }
html[data-theme="dark"] .notification { background-color: var(--surface-hover) !important; color: var(--text-primary) !important; border: 1px solid var(--border); }
html[data-theme="dark"] .notification-success { background-color: var(--success-bg) !important; color: var(--success) !important; }
html[data-theme="dark"] .notification-error { background-color: var(--danger-bg) !important; color: var(--danger) !important; }
html[data-theme="dark"] .notification-warning { background-color: var(--warning-bg) !important; color: var(--warning-text) !important; }

/* History: preserve feature layout/behavior; override fixed light colors only. */
html[data-theme="dark"] .history-card { background: var(--surface); border-color: var(--border); }
html[data-theme="dark"] .history-preview { background: var(--surface-media); }
html[data-theme="dark"] :is(.image-result, .image-upload.has-images) { background: var(--surface-media); }
html[data-theme="dark"] :is(.history-card small, .history-image-missing, .history-failure-reason, .history-error-details, .history-calendar-week, .history-calendar-note, .history-date-clear, .history-calendar-day) { color: var(--text-secondary); }
html[data-theme="dark"] :is(.history-module, .history-calendar-day.has-records) { background: var(--accent-bg); color: var(--accent); }
html[data-theme="dark"] .history-toolbar-actions :is(.history-refresh, .history-date-trigger) { color: var(--text-primary); border-color: var(--border); }
html[data-theme="dark"] .history-toolbar select { border-color: var(--border); }
html[data-theme="dark"] .history-toolbar-actions .history-date-trigger.has-date { color: var(--accent); border-color: var(--accent); }
html[data-theme="dark"] :is(.history-toolbar-actions .history-refresh:not(:disabled):hover, .history-date-clear:hover) { color: var(--text-primary); background: var(--surface-hover); border-color: var(--border); }
html[data-theme="dark"] .history-calendar-header button { background: var(--surface-input); color: var(--text-primary); }
html[data-theme="dark"] :is(.history-pagination .history-page-arrow, .history-calendar-day[aria-current="date"]) { border-color: var(--accent); }
html[data-theme="dark"] .history-calendar-day small { color: var(--accent); }
html[data-theme="dark"] .history-calendar-day:not(:disabled):hover { background: var(--accent-bg-strong); }
html[data-theme="dark"] :is(.history-calendar-day[aria-pressed="true"], .history-calendar-day[aria-pressed="true"]:hover) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
html[data-theme="dark"] .history-calendar-day[aria-pressed="true"] small { color: var(--accent-ink); }
html[data-theme="dark"] :is(.history-toolbar-actions .history-refresh, .history-pagination .history-page-arrow, .history-calendar-header button):disabled { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border-light); }
html[data-theme="dark"] .history-calendar-day:disabled { color: #717b8a; background: transparent; }
html[data-theme="dark"] .history-card-failed { background: var(--danger-bg); border-color: var(--danger-border); }
html[data-theme="dark"] .history-failure-status { color: var(--danger); }
html[data-theme="dark"] .history-error-text { background: var(--surface-input); border-color: var(--danger-border); }

/* Legacy inline UI styles, including dynamically inserted story cards. */
html[data-theme="dark"] #img2videoHistoryGroup { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] :is(#img2videoHistoryGroup > label, label[for="characterSwapTargetCharacterDescription"], label[for="chargenStylePreset"], #img2videoH3Help, #flf2videoContent small, #ref2videoContent small) { color: var(--text-secondary) !important; }
html[data-theme="dark"] .radio-label strong[style],
html[data-theme="dark"] :is(#img2imgGptImagePrice, #img2imgGeminiPrice, #txt2imgGptImagePrice, #txt2imgGeminiPrice) { color: var(--warning-text) !important; }
html[data-theme="dark"] #storyimageCharacterUploadRow > div { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] #storyimageCharacterUploadRow > div > div:nth-child(2),
html[data-theme="dark"] [id^="storyimage-scene-characters-row-"] { background: var(--surface-input) !important; border-color: var(--border) !important; }
html[data-theme="dark"] #storyimageCharacterUploadRow > div > div:nth-child(2) > div,
html[data-theme="dark"] [id^="storyimage-scene-characters-"] > label { color: var(--text-secondary) !important; }
html[data-theme="dark"] #jpTextContent .jp-step-num { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] :is(#jpGpHint, #jpCharCountHint, #jpCompModeHint, #jpPreviewHint),
html[data-theme="dark"] #jpTextContent :is(div, span)[style*="color:#888"] { color: var(--text-secondary) !important; }
html[data-theme="dark"] .jp-font-cell { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme="dark"] .jp-font-cell.active { border-color: var(--accent) !important; }
html[data-theme="dark"] .jp-font-cell > div { color: var(--text-secondary) !important; }
html[data-theme="dark"] #ref2videoContent .ref-add { color: var(--text-secondary); }
html[data-theme="dark"] .nai-style-card:hover { box-shadow: 0 8px 24px var(--accent-shadow); }
html[data-theme="dark"] .nai-chip.accent { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .sa-history-current { background: var(--accent); color: var(--accent-ink); }
html[data-theme="dark"] .sa-history-row-current { background: var(--accent-bg); }
html[data-theme="dark"] .nai-ac-box { background: var(--surface-input); color: var(--text-primary); border-color: var(--border); }
html[data-theme="dark"] :is(.nai-ac-item.sel, .nai-ac-item:hover) { background: var(--accent-bg-strong); }
html[data-theme="dark"] .nai-ac-tag { color: var(--accent); }
html[data-theme="dark"] .nai-ac-meaning { color: var(--text-secondary); }

/* Dynamically created video controls have inline light colors. */
html[data-theme="dark"] :is(#img2videoDownloadGifBtn, #flfDownloadGifBtn, #flfModalGif, #refDownloadGifBtn, #refModalGif, #img2videoModal .btn[style]) {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--success-ink) !important;
}
html[data-theme="dark"] #img2videoModal button:not(.btn) {
    background: var(--surface) !important;
    color: var(--text-primary);
}
html[data-theme="dark"] #img2videoHistory img { border-color: var(--border) !important; }

/* Login keeps its own layout and uses the same palette. */
html[data-theme="dark"] body:has(> main.card) { background: radial-gradient(1200px 600px at 50% -10%, rgba(144, 184, 238, 0.12), transparent 60%), var(--surface-alt); }
html[data-theme="dark"] main.card :is(.error, .error strong) { color: var(--danger); }
html[data-theme="dark"] main.card .foot code { background: var(--surface-input); }