/**
 * editor-darkmode-fix.css — Comprehensive dark mode overrides for skrivebord
 *
 * Loaded LAST in skrivebord.html to catch every hardcoded light value
 * missed by robot-darkmode.css and editor.css.
 *
 * Uses [data-theme="dark"] prefix on ALL selectors.
 * Uses !important to beat bundle specificity (which often uses IDs).
 *
 * Platform dark variables:
 *   --color-bg:             #111727
 *   --color-card:           #1a2035
 *   --color-border:         #2a3250
 *   --color-text-primary:   #e8ecf4
 *   --color-text-secondary: #8a92a6
 */

/* ==========================================================================
   1. TITLE BAR — Fix dark square on title input

   Problem: robot-darkmode.css sets `input[type="text"]` to --color-bg (#111727)
   but .doc-title-input sits inside .top-controls which has --color-card (#1a2035).
   The input shows as a darker rectangle inside the lighter title bar.

   Fix: Use higher specificity to set the input to inherit its parent bg.
   ========================================================================== */

[data-theme="dark"] .top-controls .doc-title-input,
[data-theme="dark"] .top-controls .ed-title-wrap .doc-title-input,
[data-theme="dark"] .top-controls input#doc-title {
  background-color: var(--color-card) !important;
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .top-controls .doc-title-input::placeholder {
  color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   2. EDITOR AREA — inner-textarea-bottom box-shadow removal

   The bundle sets box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15) on
   .inner-textarea-bottom. In dark mode this creates a visible glow.
   ========================================================================== */

[data-theme="dark"] .inner-textarea-bottom {
  box-shadow: none !important;
}

/* ==========================================================================
   3. TOP CONTROLS — inset shadow and border cleanup

   Bundle sets box-shadow with inset white on .top-controls.
   ========================================================================== */

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

/* ==========================================================================
   4. BOTTOM TOOLBAR (format-toolbar) — icon colors

   Format toolbar buttons use SVG strokes that default to #444.
   Need to ensure all icons are visible on dark backgrounds.
   ========================================================================== */

[data-theme="dark"] .format-toolbar svg,
[data-theme="dark"] .format-toolbar .format-btn svg,
[data-theme="dark"] .format-toolbar button svg {
  color: var(--color-text-secondary) !important;
  stroke: currentColor !important;
}

[data-theme="dark"] .format-toolbar .format-btn:hover svg,
[data-theme="dark"] .format-toolbar button:hover svg {
  color: var(--color-text-primary) !important;
}

/* Word count in format toolbar */
[data-theme="dark"] .format-toolbar .word-count,
[data-theme="dark"] .format-toolbar .char-count-display {
  color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   5. RIGHT PANEL — Correction Settings Card

   The correction-level-container and its children need dark treatment.
   ========================================================================== */

/* Correction inner wrapper */
[data-theme="dark"] .correction-inner {
  background: var(--color-bg) !important;
}

/* Style/voice inner panels */
[data-theme="dark"] .style-inner {
  background: var(--color-bg) !important;
}

/* Analysis card */
[data-theme="dark"] .analysis-card {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Analysis reset button — currently white bg */
[data-theme="dark"] .analysis-reset-button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .analysis-reset-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Improvement section */
[data-theme="dark"] .improvement-section {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

/* Improvement icon containers */
[data-theme="dark"] .improvement-icon,
[data-theme="dark"] .improvement-icon-3 {
  background: var(--color-bg) !important;
}

/* ==========================================================================
   6. MODE SLIDER / TOOLBAR (Stave/Tone/Bedre/AI row)

   The toolbar container (.toolbar) has hardcoded #f9f9f9 bg.
   The toggle section has #f3f4f6 border.
   ========================================================================== */

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

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

/* Switch slider — the toggle track */
[data-theme="dark"] .switch-slider {
  background-color: var(--color-border) !important;
}

[data-theme="dark"] .switch-slider:before {
  background-color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .switch-input:checked + .switch-slider {
  background-color: var(--color-primary, #696cff) !important;
}

[data-theme="dark"] .switch-input:checked + .switch-slider:before {
  background-color: #fff !important;
}

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

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

/* ==========================================================================
   7. LANGUAGE SELECTOR & DROPDOWN

   The .dk-dropdown and its items have hardcoded light backgrounds.
   ========================================================================== */

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

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

[data-theme="dark"] .dk-dropdown-item:hover,
[data-theme="dark"] .dk-dropdown-item.dk-selected,
[data-theme="dark"] .dk-dropdown-item.dk-keyboard-focus {
  background: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .dk-dropdown-item.dk-disabled {
  background-color: var(--color-bg) !important;
  color: var(--color-text-secondary) !important;
}

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

[data-theme="dark"] .dk-custom-language:focus-within {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Gender selector (TTS voice picker) */
[data-theme="dark"] #genderSelector {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] #genderSelector::after {
  background: var(--color-card) !important;
}

/* ==========================================================================
   8. LOADING OVERLAYS

   Loader backdrops use white semi-transparent backgrounds.
   ========================================================================== */

[data-theme="dark"] .loader-backdrop {
  background: rgba(17, 23, 39, 0.85) !important;
}

[data-theme="dark"] .textarea-wrapper .loader-backdrop {
  background: rgba(17, 23, 39, 0.82) !important;
}

[data-theme="dark"] .loader1,
[data-theme="dark"] .loader2 {
  background-color: rgba(17, 23, 39, 0.8) !important;
}

/* Loader spinner border */
[data-theme="dark"] .loading-spinner {
  border-color: var(--color-border) !important;
  border-top-color: var(--color-primary) !important;
}

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

/* Sidebar robot blur effect */
[data-theme="dark"] .sidebar-robot-blur-effect {
  background: rgba(26, 32, 53, 0.3) !important;
}

/* ==========================================================================
   9. TABS (Stave / Tone / Bedre / AI)

   The mode tab buttons at the top of the right panel.
   ========================================================================== */

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

/* Icon labels under tab buttons — hardcoded #666 */
[data-theme="dark"] .icon-label {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .sidebar-svg-icon:hover .icon-label,
[data-theme="dark"] .sidebar-svg-icon.active .icon-label {
  color: var(--color-text-primary) !important;
}

/* ==========================================================================
   10. BUTTONS — Generate, nav arrows, misc
   ========================================================================== */

/* Navigation arrows (style/voice carousels) */
[data-theme="dark"] .nav-btn,
[data-theme="dark"] .prev-btn,
[data-theme="dark"] .next-btn {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .nav-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text-primary) !important;
}

/* Response navigation buttons */
[data-theme="dark"] .response-navigation button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Text area cancel button — has white gradient */
[data-theme="dark"] .text-area-cancel-btn {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .text-area-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   11. HISTORY PANEL
   ========================================================================== */

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

[data-theme="dark"] .delete-all-history {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .delete-all-history:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* History action buttons */
[data-theme="dark"] .history-action-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Popup content (generic popups inside history/corrections) */
[data-theme="dark"] .popup-content {
  background: var(--color-card) !important;
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* ==========================================================================
   12. HAMDAN MODAL (AI rewrite modal)
   ========================================================================== */

[data-theme="dark"] .dk-hamdan-modal-container {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dk-hamdan-option-button {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dk-hamdan-option-button:hover,
[data-theme="dark"] .dk-hamdan-option-button.selected {
  background: rgba(105, 108, 255, 0.15) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .dk-hamdan-close-button:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .dk-hamdan-input-container {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dk-hamdan-input-container input,
[data-theme="dark"] .dk-hamdan-input-container textarea,
[data-theme="dark"] #custom_rewrite_input {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

/* Autofill override for custom rewrite input */
[data-theme="dark"] #custom_rewrite_input:-webkit-autofill,
[data-theme="dark"] #custom_rewrite_input:-webkit-autofill:hover,
[data-theme="dark"] #custom_rewrite_input:-webkit-autofill:focus,
[data-theme="dark"] #custom_rewrite_input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-bg) inset !important;
  box-shadow: 0 0 0 30px var(--color-bg) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
}

[data-theme="dark"] .dk-hamdan-enter-key {
  background: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

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

/* ==========================================================================
   13. CORRECTION CARDS — explanation cards, level slider, voice/style
   ========================================================================== */

/* Explanation items */
[data-theme="dark"] .explanation-item {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Explanation premium tooltip */
[data-theme="dark"] .explanation-premium-plus-tooltip {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .explanation-premium-plus-btn {
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* Voice slider labels — hardcoded #666 */
[data-theme="dark"] .voice-slider-labels {
  color: var(--color-text-secondary) !important;
}

/* Level slider thumb — white border */
[data-theme="dark"] .level-slider::-webkit-slider-thumb {
  border-color: var(--color-primary) !important;
  background: var(--color-card) !important;
}

[data-theme="dark"] .level-slider::-moz-range-thumb {
  border-color: var(--color-primary) !important;
  background: var(--color-card) !important;
}

/* Voice handle — white border */
[data-theme="dark"] .voice-handle {
  border-color: var(--color-primary) !important;
}

/* Voice change button — white color and shadow */
[data-theme="dark"] .voice-change-btn {
  box-shadow: none !important;
}

[data-theme="dark"] .voice-change-btn::before {
  background: linear-gradient(to bottom, rgba(17, 23, 39, 0) 0%, rgba(17, 23, 39, 0.9) 100%) !important;
}

[data-theme="dark"] .voice-change-btn:hover {
  box-shadow: none !important;
}

/* Style option hover — has white gradient */
[data-theme="dark"] .style-option:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Expand/collapsed toggles — hover is #e0e0e0 */
[data-theme="dark"] .expand-toggle-btn:hover,
[data-theme="dark"] .collapsed-option:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Hamdan speech bubble */
[data-theme="dark"] .hamdan-speech-bubble {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* ==========================================================================
   14. DOWNLOAD DROPDOWN
   ========================================================================== */

[data-theme="dark"] .download-dropdown {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-popup) !important;
}

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

/* ==========================================================================
   15. SELECTION TOOLBAR (floating text-select toolbar)
   ========================================================================== */

[data-theme="dark"] #selection-toolbar {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-popup) !important;
}

/* ==========================================================================
   16. SIDEBAR ROBOT CHAT (right panel chat bubbles)
   ========================================================================== */

[data-theme="dark"] .sidebar-robot-bubble {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .sidebar-robot-input {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] #sidebar_custom_input {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .bubble-accept-btn {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .bubble-ok-button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

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

/* ==========================================================================
   17. ED-OVERFLOW MENU (three-dot menu in editor toolbar)
   ========================================================================== */

[data-theme="dark"] .ed-overflow-menu {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-popup) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .ed-overflow-menu button,
[data-theme="dark"] .ed-overflow-menu a {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .ed-overflow-menu button:hover,
[data-theme="dark"] .ed-overflow-menu a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   18. AUDIO CONTROLS (TTS player)
   ========================================================================== */

[data-theme="dark"] .audio-controls,
[data-theme="dark"] #audioControls {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Voice section */
[data-theme="dark"] .voice-section {
  background: var(--color-bg) !important;
}

/* ==========================================================================
   19. CHAT PANEL (sidebar assistant chat)
   ========================================================================== */

/* Chat footer — hardcoded #fafafa */
[data-theme="dark"] .chat-footer {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

/* Chat mic button hover — hardcoded #f3f4f6 */
[data-theme="dark"] .chat-mic-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-text-secondary) !important;
}

/* Chat message actions icon hover — hardcoded #f3f4f6 */
[data-theme="dark"] .message-actions .action-icon:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Chat message AI bubble border — uses rgba(0,0,0,0.06) */
[data-theme="dark"] .message-bubble.ai {
  border-color: var(--color-border) !important;
  background: var(--color-bg) !important;
}

/* ==========================================================================
   20. INSTRUCTION MODAL (custom instruction editor)
   ========================================================================== */

[data-theme="dark"] .instruction-field textarea {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .instruction-field textarea:hover,
[data-theme="dark"] .instruction-field textarea:focus {
  background: var(--color-bg) !important;
  border-color: var(--color-primary) !important;
}

[data-theme="dark"] .instruction-edit:hover,
[data-theme="dark"] .instruction-modal-close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Instructions mine loader */
[data-theme="dark"] .instructions-mine-loader {
  background: rgba(17, 23, 39, 0.85) !important;
}

/* Instruction send icon */
[data-theme="dark"] .instruction-send svg {
  color: var(--color-text-secondary) !important;
}

/* ==========================================================================
   21. SCROLLBARS — Override bundle hardcoded track/thumb colors
   ========================================================================== */

[data-theme="dark"] .explanation-list::-webkit-scrollbar-track,
[data-theme="dark"] #savedResponsesList::-webkit-scrollbar-track {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .explanation-list::-webkit-scrollbar-thumb,
[data-theme="dark"] #savedResponsesList::-webkit-scrollbar-thumb {
  background: var(--color-border) !important;
  border-color: var(--color-bg) !important;
}

/* ==========================================================================
   22. QUILL EDITOR — Remaining azure-editor.css overrides

   The Quill Snow theme CSS has hardcoded white and #444 values.
   ========================================================================== */

/* Quill toolbar border */
[data-theme="dark"] .ql-toolbar.ql-snow {
  border-color: var(--color-border) !important;
}

/* Quill container border */
[data-theme="dark"] .ql-container.ql-snow {
  border-color: var(--color-border) !important;
}

/* Quill snow theme — icon strokes default to #444 */
[data-theme="dark"] .ql-snow .ql-stroke {
  stroke: var(--color-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-stroke-miter {
  stroke: var(--color-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-fill,
[data-theme="dark"] .ql-snow .ql-stroke.ql-fill {
  fill: var(--color-text-secondary) !important;
}

/* Quill picker dropdown — hardcoded white bg */
[data-theme="dark"] .ql-snow .ql-picker-options {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
}

/* Quill picker colors */
[data-theme="dark"] .ql-snow .ql-picker {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: var(--color-text-secondary) !important;
}

[data-theme="dark"] .ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: var(--color-text-secondary) !important;
}

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

/* Quill tooltip — hardcoded white bg, #ccc borders */
[data-theme="dark"] .ql-snow .ql-tooltip {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .ql-snow .ql-tooltip input[type=text] {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .ql-snow .ql-tooltip a.ql-action::after {
  border-color: var(--color-border) !important;
}

/* Quill editor placeholder */
[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--color-text-secondary) !important;
}

/* Quill code blocks — hardcoded #f0f0f0 bg */
[data-theme="dark"] .ql-snow .ql-editor code,
[data-theme="dark"] .ql-snow .ql-editor .ql-code-block-container {
  background-color: var(--color-bg) !important;
}

/* Quill blockquote — #ccc border */
[data-theme="dark"] .ql-snow .ql-editor blockquote {
  border-left-color: var(--color-border) !important;
}

/* Quill table — black border */
[data-theme="dark"] .ql-editor td {
  border-color: var(--color-border) !important;
}

/* Quill editor background color picker default */
[data-theme="dark"] .ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: var(--color-card) !important;
}

/* ==========================================================================
   23. MARKDOWN TABLE ROWS — hardcoded white !important in bundle
   ========================================================================== */

[data-theme="dark"] #inputText .markdown-body table tr {
  background-color: var(--color-bg) !important;
}

/* ==========================================================================
   24. MISC — Remaining hardcoded values
   ========================================================================== */

/* Control button hover — rgba(0,0,0,0.05) not visible enough */
[data-theme="dark"] .control-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Drop zone visual */
[data-theme="dark"] .textarea-wrapper.drop-active {
  outline-color: var(--color-primary) !important;
}

[data-theme="dark"] .textarea-wrapper.drop-active::before {
  background: rgba(105, 108, 255, 0.08) !important;
}

/* HK dropdown buttons */
[data-theme="dark"] .hk-dropdown-button {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .hk-dropdown-content {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: var(--shadow-popup) !important;
}

/* Show-hide underlines button */
[data-theme="dark"] .show-hide-underlines {
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

/* Generic borders that use rgba(0,0,0,...) */
[data-theme="dark"] .message-bubble.ai {
  border-color: var(--color-border) !important;
}

/* Clear icon SVG fill — bundle sets fill: white which is correct on colored bg */
/* (No override needed — the clear icon sits on a colored button) */

/* Gradient backgrounds that resolve white in dark mode */
[data-theme="dark"] .voice-change-btn {
  color: var(--color-text-primary) !important;
}

/* ==========================================================================
   25. SAVED RESPONSES — Popup and controls
   ========================================================================== */

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

/* ==========================================================================
   26. UPLOAD MODAL
   ========================================================================== */

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

[data-theme="dark"] .upload-modal-btn {
  background: var(--color-card) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* ==========================================================================
   27. SIDEBAR VOLUME TRACK
   ========================================================================== */

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

/* ============================================================
   28. Consistent sidebar bg across ALL tabs
   Force the entire right panel and all its children to use
   --color-card so Stave/Tone/Bedre/AI look identical.
   ============================================================ */
[data-theme="dark"] .correction-sidebar,
[data-theme="dark"] .correction-sidebar > *,
[data-theme="dark"] .correction-content,
[data-theme="dark"] .correction-content > div,
[data-theme="dark"] .voice-section,
[data-theme="dark"] .tone-section,
[data-theme="dark"] .rewrite-section,
[data-theme="dark"] .ai-section,
[data-theme="dark"] .style-section,
[data-theme="dark"] .improvement-section,
[data-theme="dark"] .hk-tab-content,
[data-theme="dark"] .hk-tab-pane {
  background-color: var(--color-card) !important;
}

/* The mode-slider box in Stave should NOT be a separate lighter card */
[data-theme="dark"] .correction-settings-box,
[data-theme="dark"] .mode-slider-container {
  background-color: var(--color-card) !important;
  border-color: var(--color-border) !important;
  box-shadow: none !important;
}

/* ============================================================
   29. AI tab — force all containers to card bg
   ============================================================ */
[data-theme="dark"] .dk-hamdan-modal-container {
  background: var(--color-card) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dk-hamdan-option-button {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dk-hamdan-option-button:hover,
[data-theme="dark"] .dk-hamdan-option-button.selected {
  background: rgba(105, 108, 255, 0.12) !important;
  border-color: var(--color-primary) !important;
}
[data-theme="dark"] .dk-hamdan-option-title {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dk-hamdan-option-description {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dk-hamdan-modal-title {
  color: var(--color-text-primary) !important;
}
[data-theme="dark"] .dk-hamdan-modal-subtitle {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dk-hamdan-custom-input-section {
  background: var(--color-card) !important;
}
[data-theme="dark"] .dk-hamdan-custom-input-label {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dk-hamdan-input-container {
  background: var(--color-bg) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dk-hamdan-input-container input,
[data-theme="dark"] .dk-hamdan-input-container textarea,
[data-theme="dark"] .dk-hamdan-custom-input {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
[data-theme="dark"] .dk-hamdan-custom-input::placeholder {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dk-hamdan-close-button {
  color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .dk-hamdan-enter-key {
  background: var(--color-card) !important;
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}