/**
 * RE::DACT Design System - CSS Variables & Reset
 *
 * This file contains:
 * - CSS Custom Properties (variables)
 * - Reset styles
 * - Typography base
 * - Scrollbar styles
 * - Theme variations
 */

/* --- DESIGN SYSTEM --- */
:root {
    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --base-font-size: 15px;
    --base-line-height: 1.5;

    /* Colors - Background */
    --color-bg-primary: #FFFFFF;
    --color-bg-paper-main: #FFFFFF;
    --color-bg-paper-notes: #F7F7F5;
    --color-bg-secondary: #F8F7F5;
    --color-bg-tertiary: #F3F1ED;

    /* Colors - Text */
    --color-text-primary: #000000;
    --color-text-secondary: #5F5F5F;
    --color-text-tertiary: #757575;
    --color-text-muted: #B8B8B8;

    /* Colors - Border */
    --color-border-light: #F0EEE9;
    --color-border: #E3E0D8;
    --color-border-medium: #D1CEC6;

    /* Colors - Accent */
    --color-accent: #000000;
    --color-accent-hover: #1A1A1A;
    --color-accent-text: #FFFFFF;
    --color-error: #DC2626;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* Scanner badge colors */
    --color-badge-query: #7c3aed;
    --color-badge-response: #059669;
    --color-badge-agent: #0891b2;
    --color-badge-grade: #d97706;
    --color-badge-system: #6b7280;
    --color-badge-snapshot: #2563eb;
    --color-badge-paste: #8b5cf6;

    /* Spacing & Sizing */
    --radius-sm: 6px;
    --radius-md: 8px;
    --transition-fast: 120ms ease-out;
    --sidebar-width: 280px;
    --btn-height-icon: 36px;   /* header-icon-btn = source of truth */
    --btn-height-base: 36px;   /* modal-btn, mode-btn */
    --btn-touch-min: 44px;     /* minimum touch target on mobile */

    /* Overlay colors for semi-transparent backgrounds */
    --color-overlay-dark: 0, 0, 0;      /* RGB for rgba() usage */
    --color-overlay-light: 255, 255, 255;

    /* Noise texture opacity */
    --noise-opacity: 0.03;

    /* Placeholder colors - neutral/black for default theme */
    --color-placeholder-bg-start: #1a1a1a;
    --color-placeholder-bg-end: #2a2a2a;
    --color-placeholder-text: #ffffff;
    --color-placeholder-border: rgba(0, 0, 0, 0.3);

    /* Context highlight colors */
    --color-context-bg-start: #F5F5F5;
    --color-context-bg-end: #E0E0E0;
    --color-context-text: #424242;
    --color-context-border: rgba(0, 0, 0, 0.15);
}

/* --- CSS RESET --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- HTML BACKGROUND (iOS 26 Liquid Glass toolbar tinting) --- */
html {
    background: var(--color-bg-primary);
}

/* --- BASE TYPOGRAPHY --- */
body {
    font-family: var(--font-sans);
    font-size: var(--base-font-size);
    line-height: var(--base-line-height);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100vh;
    height: 100svh; /* iOS 26: stabilna wysokość bez reflow */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-weight: 450;
    letter-spacing: -0.01em;
}

/* --- BASE BUTTON RESET --- */
button {
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

button:focus {
    outline: none;
}

/* --- SCROLLBAR STYLES --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-medium);
    border-radius: 3px;
}

/* =============================================================================
   LIGHT THEMES
   ============================================================================= */

/* --- BLUE THEME (Figaro style) --- */
body.theme-blue {
    --color-bg-primary: #FFFFFF;
    --color-bg-paper-main: #FFFFFF;
    --color-bg-paper-notes: #f0f7fc;
    --color-bg-secondary: #f5fafd;
    --color-bg-tertiary: #e8f4fc;
    --color-text-primary: #0d2137;
    --color-text-secondary: #3d5a80;
    --color-text-tertiary: #5c7a99;
    --color-text-muted: #98b4c9;
    --color-border-light: #d4e8f7;
    --color-border: #b8d4eb;
    --color-border-medium: #98c1de;
    --color-accent: #1e3a5f;
    --color-accent-hover: #2c4a72;
    --color-accent-text: #FFFFFF;
    /* Blue placeholder */
    --color-placeholder-bg-start: #1e3a5f;
    --color-placeholder-bg-end: #2c4a72;
    --color-placeholder-text: #ffffff;
    --color-placeholder-border: rgba(30, 58, 95, 0.3);
}

/* --- RED THEME (BBC style) --- */
body.theme-red {
    --color-bg-primary: #FFFFFF;
    --color-bg-paper-main: #FFFFFF;
    --color-bg-paper-notes: #fdf8f8;
    --color-bg-secondary: #faf5f5;
    --color-bg-tertiary: #f5eeee;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6b6b6b;
    --color-text-muted: #9a9a9a;
    --color-border-light: #f0e0e0;
    --color-border: #e0c8c8;
    --color-border-medium: #d0b0b0;
    --color-accent: #b91c1c;
    --color-accent-hover: #991b1b;
    --color-accent-text: #FFFFFF;
    /* Red placeholder */
    --color-placeholder-bg-start: #b91c1c;
    --color-placeholder-bg-end: #991b1b;
    --color-placeholder-text: #ffffff;
    --color-placeholder-border: rgba(185, 28, 28, 0.3);
}

/* --- ORANGE THEME (Sparks style - Gold/Orange) --- */
body.theme-orange {
    --color-bg-primary: #FFFFFF;
    --color-bg-paper-main: #FFFFFF;
    --color-bg-paper-notes: #fffbf5;
    --color-bg-secondary: #fff8f0;
    --color-bg-tertiary: #fff3e6;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-tertiary: #6b6b6b;
    --color-text-muted: #9a9a9a;
    --color-border-light: #ffe8cc;
    --color-border: #ffd9a8;
    --color-border-medium: #ffc987;
    --color-accent: #FF9A00;
    --color-accent-hover: #FF6D00;
    --color-accent-text: #FFFFFF;
    /* Orange placeholder */
    --color-placeholder-bg-start: #FF9A00;
    --color-placeholder-bg-end: #FF6D00;
    --color-placeholder-text: #ffffff;
    --color-placeholder-border: rgba(255, 154, 0, 0.3);
}

/* =============================================================================
   DARK THEMES
   ============================================================================= */

/* --- DARK THEME (Standard dark) --- */
body.theme-dark {
    --color-bg-primary: #0a0a0a;
    --color-bg-paper-main: #111111;
    --color-bg-paper-notes: #141414;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1a1a1a;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;
    --color-text-muted: #5a5a5a;
    --color-border-light: #2a2a2a;
    --color-border: #3a3a3a;
    --color-border-medium: #4a4a4a;
    --color-accent: #f0f0f0;
    --color-accent-hover: #ffffff;
    --color-accent-text: #0a0a0a;

    /* Dark mode overlays - keep black for shadows */
    --color-overlay-dark: 0, 0, 0;
    --color-overlay-light: 255, 255, 255;

    /* Noise - disable for dark mode */
    --noise-opacity: 0;

    /* Placeholder colors for dark mode */
    --color-placeholder-bg-start: #1B3B2F;
    --color-placeholder-bg-end: #244036;
    --color-placeholder-text: #81C784;
    --color-placeholder-border: rgba(129, 199, 132, 0.3);

    /* Context highlight for dark mode */
    --color-context-bg-start: #2A2A2A;
    --color-context-bg-end: #333333;
    --color-context-text: #B0B0B0;
    --color-context-border: rgba(255, 255, 255, 0.15);
}

/* --- DARK SPARKS THEME (Dark with Orange accent) --- */
body.theme-dark-sparks {
    --color-bg-primary: #0a0a0a;
    --color-bg-paper-main: #111111;
    --color-bg-paper-notes: #141414;
    --color-bg-secondary: #141414;
    --color-bg-tertiary: #1a1a1a;
    --color-text-primary: #f0f0f0;
    --color-text-secondary: #b0b0b0;
    --color-text-tertiary: #808080;
    --color-text-muted: #5a5a5a;
    --color-border-light: #2a1a10;
    --color-border: #3a2815;
    --color-border-medium: #4a351a;
    --color-accent: #FF9A00;
    --color-accent-hover: #FFAB00;
    --color-accent-text: #0a0a0a;

    /* Dark mode overlays - keep black for shadows */
    --color-overlay-dark: 0, 0, 0;
    --color-overlay-light: 255, 255, 255;

    /* Noise - disable for dark mode */
    --noise-opacity: 0;

    /* Placeholder colors for dark mode */
    --color-placeholder-bg-start: #1B3B2F;
    --color-placeholder-bg-end: #244036;
    --color-placeholder-text: #81C784;
    --color-placeholder-border: rgba(129, 199, 132, 0.3);

    /* Context highlight for dark mode */
    --color-context-bg-start: #2A2A2A;
    --color-context-bg-end: #333333;
    --color-context-text: #B0B0B0;
    --color-context-border: rgba(255, 255, 255, 0.15);
}

/* --- MATRIX THEME (Green on black, monospace) --- */
body.theme-matrix {
    --font-sans: 'Courier New', 'Monaco', 'Consolas', monospace;
    --color-bg-primary: #000000;
    --color-bg-paper-main: #050505;
    --color-bg-paper-notes: #080808;
    --color-bg-secondary: #080808;
    --color-bg-tertiary: #0f0f0f;
    --color-text-primary: #00ff00;
    --color-text-secondary: #00cc00;
    --color-text-tertiary: #009900;
    --color-text-muted: #006600;
    --color-border-light: #003300;
    --color-border: #004400;
    --color-border-medium: #005500;
    --color-accent: #00ff00;
    --color-accent-hover: #33ff33;
    --color-accent-text: #000000;

    /* Matrix overlays - keep black for shadows */
    --color-overlay-dark: 0, 0, 0;
    --color-overlay-light: 0, 255, 0;   /* Green for highlights */

    /* Noise - disable for dark mode */
    --noise-opacity: 0;

    /* Placeholder colors for matrix theme */
    --color-placeholder-bg-start: #002200;
    --color-placeholder-bg-end: #003300;
    --color-placeholder-text: #00ff00;
    --color-placeholder-border: rgba(0, 255, 0, 0.3);

    /* Context highlight for matrix theme */
    --color-context-bg-start: #111111;
    --color-context-bg-end: #151515;
    --color-context-text: #00cc00;
    --color-context-border: rgba(0, 255, 0, 0.15);
}

body.theme-matrix * {
    font-family: 'Courier New', 'Monaco', 'Consolas', monospace !important;
}

/* =============================================================================
   DARK MODE UNIVERSAL OVERRIDES
   ============================================================================= */

/* Helper: detect dark themes */
body.theme-dark,
body.theme-dark-sparks,
body.theme-matrix {
    color-scheme: dark;
}

/* --- Header --- */
body.theme-dark header,
body.theme-dark-sparks header,
body.theme-matrix header {
    background: var(--color-bg-primary) !important;
    border-color: var(--color-border) !important;
}

/* --- Sidebar --- */
body.theme-dark aside,
body.theme-dark-sparks aside,
body.theme-matrix aside {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .sidebar-section,
body.theme-dark-sparks .sidebar-section,
body.theme-matrix .sidebar-section {
    border-color: var(--color-border) !important;
}

body.theme-dark .sidebar-footer,
body.theme-dark-sparks .sidebar-footer,
body.theme-matrix .sidebar-footer {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* Mobile overlay - dark background instead of white */
body.theme-dark .mobile-overlay,
body.theme-dark-sparks .mobile-overlay,
body.theme-matrix .mobile-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* --- Main content area --- */
body.theme-dark main,
body.theme-dark-sparks main,
body.theme-matrix main {
    background: var(--color-bg-primary) !important;
}

body.theme-dark .column,
body.theme-dark-sparks .column,
body.theme-matrix .column {
    background: var(--color-bg-primary) !important;
}

body.theme-dark .split,
body.theme-dark-sparks .split,
body.theme-matrix .split {
    background: var(--color-border) !important;
}

/* --- Editor --- */
body.theme-dark .editor-container,
body.theme-dark-sparks .editor-container,
body.theme-matrix .editor-container {
    background: var(--color-bg-paper-main) !important;
}

body.theme-dark .ql-container,
body.theme-dark-sparks .ql-container,
body.theme-matrix .ql-container {
    background: var(--color-bg-paper-main) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .ql-editor,
body.theme-dark-sparks .ql-editor,
body.theme-matrix .ql-editor {
    background: var(--color-bg-paper-main) !important;
    color: var(--color-text-primary) !important;
}

body.theme-dark .ql-toolbar,
body.theme-dark-sparks .ql-toolbar,
body.theme-matrix .ql-toolbar {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .ql-toolbar button,
body.theme-dark-sparks .ql-toolbar button,
body.theme-matrix .ql-toolbar button {
    color: var(--color-text-secondary) !important;
}

body.theme-dark .ql-toolbar .ql-stroke,
body.theme-dark-sparks .ql-toolbar .ql-stroke,
body.theme-matrix .ql-toolbar .ql-stroke {
    stroke: var(--color-text-secondary) !important;
}

body.theme-dark .ql-toolbar .ql-fill,
body.theme-dark-sparks .ql-toolbar .ql-fill,
body.theme-matrix .ql-toolbar .ql-fill {
    fill: var(--color-text-secondary) !important;
}

body.theme-dark .ql-toolbar button:hover .ql-stroke,
body.theme-dark-sparks .ql-toolbar button:hover .ql-stroke,
body.theme-matrix .ql-toolbar button:hover .ql-stroke {
    stroke: var(--color-text-primary) !important;
}

body.theme-dark .ql-toolbar button:hover .ql-fill,
body.theme-dark-sparks .ql-toolbar button:hover .ql-fill,
body.theme-matrix .ql-toolbar button:hover .ql-fill {
    fill: var(--color-text-primary) !important;
}

body.theme-dark .ql-toolbar button.ql-active .ql-stroke,
body.theme-dark-sparks .ql-toolbar button.ql-active .ql-stroke,
body.theme-matrix .ql-toolbar button.ql-active .ql-stroke {
    stroke: var(--color-accent) !important;
}

body.theme-dark .ql-toolbar button.ql-active .ql-fill,
body.theme-dark-sparks .ql-toolbar button.ql-active .ql-fill,
body.theme-matrix .ql-toolbar button.ql-active .ql-fill {
    fill: var(--color-accent) !important;
}

/* --- Paper view --- */
body.theme-dark .paper-content,
body.theme-dark-sparks .paper-content,
body.theme-matrix .paper-content {
    background: var(--color-bg-paper-main) !important;
    color: var(--color-text-primary) !important;
}

body.theme-dark .paper-a4,
body.theme-dark-sparks .paper-a4,
body.theme-matrix .paper-a4 {
    background: var(--color-bg-paper-main) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
}

body.theme-dark .paper-wrapper,
body.theme-dark-sparks .paper-wrapper,
body.theme-matrix .paper-wrapper {
    background: var(--color-bg-tertiary) !important;
}

/* --- Toolbar --- */
body.theme-dark .toolbar,
body.theme-dark-sparks .toolbar,
body.theme-matrix .toolbar {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .toolbar button,
body.theme-dark-sparks .toolbar button,
body.theme-matrix .toolbar button {
    color: var(--color-text-secondary) !important;
}

body.theme-dark .toolbar button:hover,
body.theme-dark-sparks .toolbar button:hover,
body.theme-matrix .toolbar button:hover {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

body.theme-dark .toolbar button.active,
body.theme-dark-sparks .toolbar button.active,
body.theme-matrix .toolbar button.active {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

body.theme-dark .toolbar svg,
body.theme-dark-sparks .toolbar svg,
body.theme-matrix .toolbar svg {
    stroke: currentColor !important;
}

/* --- Chat panel --- */
body.theme-dark .chat-container,
body.theme-dark .chat-wrapper,
body.theme-dark-sparks .chat-container,
body.theme-dark-sparks .chat-wrapper,
body.theme-matrix .chat-container,
body.theme-matrix .chat-wrapper {
    background: var(--color-bg-secondary) !important;
}

body.theme-dark .chat-messages,
body.theme-dark-sparks .chat-messages,
body.theme-matrix .chat-messages {
    background: var(--color-bg-secondary) !important;
}

body.theme-dark .chat-message,
body.theme-dark .message,
body.theme-dark-sparks .chat-message,
body.theme-dark-sparks .message,
body.theme-matrix .chat-message,
body.theme-matrix .message {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .chat-message.user,
body.theme-dark .message.user,
body.theme-dark-sparks .chat-message.user,
body.theme-dark-sparks .message.user,
body.theme-matrix .chat-message.user,
body.theme-matrix .message.user {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

body.theme-dark .chat-input-container,
body.theme-dark .chat-input-wrapper,
body.theme-dark-sparks .chat-input-container,
body.theme-dark-sparks .chat-input-wrapper,
body.theme-matrix .chat-input-container,
body.theme-matrix .chat-input-wrapper {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .chat-input,
body.theme-dark .chat-textarea,
body.theme-dark #chatInput,
body.theme-dark-sparks .chat-input,
body.theme-dark-sparks .chat-textarea,
body.theme-dark-sparks #chatInput,
body.theme-matrix .chat-input,
body.theme-matrix .chat-textarea,
body.theme-matrix #chatInput {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

/* --- Mode Selector --- */
body.theme-dark .mode-selector,
body.theme-dark-sparks .mode-selector,
body.theme-matrix .mode-selector {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .mode-btn,
body.theme-dark-sparks .mode-btn,
body.theme-matrix .mode-btn {
    color: var(--color-text-secondary) !important;
    background: transparent !important;
}

body.theme-dark .mode-btn:hover,
body.theme-dark-sparks .mode-btn:hover,
body.theme-matrix .mode-btn:hover {
    color: var(--color-text-primary) !important;
    background: var(--color-bg-tertiary) !important;
}

body.theme-dark .mode-btn.active,
body.theme-dark-sparks .mode-btn.active,
body.theme-matrix .mode-btn.active {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
}

/* --- Modals --- */
body.theme-dark .modal-backdrop,
body.theme-dark-sparks .modal-backdrop,
body.theme-matrix .modal-backdrop {
    background: rgba(0, 0, 0, 0.8) !important;
}

body.theme-dark .modal-container,
body.theme-dark .modal,
body.theme-dark-sparks .modal-container,
body.theme-dark-sparks .modal,
body.theme-matrix .modal-container,
body.theme-matrix .modal {
    background: var(--color-bg-paper-main) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

body.theme-dark .modal-header,
body.theme-dark-sparks .modal-header,
body.theme-matrix .modal-header {
    border-color: var(--color-border) !important;
    background: var(--color-bg-paper-main) !important;
}

body.theme-dark .modal-header h2,
body.theme-dark .modal-header h3,
body.theme-dark-sparks .modal-header h2,
body.theme-dark-sparks .modal-header h3,
body.theme-matrix .modal-header h2,
body.theme-matrix .modal-header h3 {
    color: var(--color-text-primary) !important;
}

body.theme-dark .modal-body,
body.theme-dark-sparks .modal-body,
body.theme-matrix .modal-body {
    background: var(--color-bg-paper-main) !important;
}

body.theme-dark .modal-footer,
body.theme-dark-sparks .modal-footer,
body.theme-matrix .modal-footer {
    border-color: var(--color-border) !important;
    background: var(--color-bg-secondary) !important;
}

/* --- Settings tabs --- */
body.theme-dark .settings-tabs,
body.theme-dark-sparks .settings-tabs,
body.theme-matrix .settings-tabs {
    border-color: var(--color-border) !important;
}

body.theme-dark .settings-tab,
body.theme-dark-sparks .settings-tab,
body.theme-matrix .settings-tab {
    color: var(--color-text-secondary) !important;
    background: transparent !important;
}

body.theme-dark .settings-tab:hover,
body.theme-dark-sparks .settings-tab:hover,
body.theme-matrix .settings-tab:hover {
    color: var(--color-text-primary) !important;
}

body.theme-dark .settings-tab.active,
body.theme-dark-sparks .settings-tab.active,
body.theme-matrix .settings-tab.active {
    color: var(--color-text-primary) !important;
    border-color: var(--color-accent) !important;
}

/* --- Settings sections --- */
body.theme-dark .settings-section,
body.theme-dark-sparks .settings-section,
body.theme-matrix .settings-section {
    border-color: var(--color-border) !important;
}

body.theme-dark .settings-section-title,
body.theme-dark-sparks .settings-section-title,
body.theme-matrix .settings-section-title {
    color: var(--color-text-primary) !important;
}

body.theme-dark .settings-input-label,
body.theme-dark-sparks .settings-input-label,
body.theme-matrix .settings-input-label {
    color: var(--color-text-secondary) !important;
}

body.theme-dark .settings-hint,
body.theme-dark-sparks .settings-hint,
body.theme-matrix .settings-hint {
    color: var(--color-text-muted) !important;
}

/* --- Form inputs --- */
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark .settings-input,
body.theme-dark .settings-select,
body.theme-dark-sparks input,
body.theme-dark-sparks select,
body.theme-dark-sparks textarea,
body.theme-dark-sparks .settings-input,
body.theme-dark-sparks .settings-select,
body.theme-matrix input,
body.theme-matrix select,
body.theme-matrix textarea,
body.theme-matrix .settings-input,
body.theme-matrix .settings-select {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,
body.theme-dark-sparks input::placeholder,
body.theme-dark-sparks textarea::placeholder,
body.theme-matrix input::placeholder,
body.theme-matrix textarea::placeholder {
    color: var(--color-text-muted) !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus,
body.theme-dark-sparks input:focus,
body.theme-dark-sparks select:focus,
body.theme-dark-sparks textarea:focus,
body.theme-matrix input:focus,
body.theme-matrix select:focus,
body.theme-matrix textarea:focus {
    border-color: var(--color-accent) !important;
    outline: none !important;
}

/* --- Buttons --- */
body.theme-dark .modal-btn-primary,
body.theme-dark-sparks .modal-btn-primary,
body.theme-matrix .modal-btn-primary {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}

body.theme-dark .modal-btn-secondary,
body.theme-dark-sparks .modal-btn-secondary,
body.theme-matrix .modal-btn-secondary {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

body.theme-dark .modal-btn-secondary:hover,
body.theme-dark-sparks .modal-btn-secondary:hover,
body.theme-matrix .modal-btn-secondary:hover {
    background: var(--color-border) !important;
}

/* --- Theme boxes --- */
body.theme-dark .theme-box,
body.theme-dark-sparks .theme-box,
body.theme-matrix .theme-box {
    border-color: var(--color-border) !important;
    background: var(--color-bg-tertiary) !important;
}

body.theme-dark .theme-box:hover,
body.theme-dark-sparks .theme-box:hover,
body.theme-matrix .theme-box:hover {
    border-color: var(--color-text-muted) !important;
}

body.theme-dark .theme-box.active,
body.theme-dark-sparks .theme-box.active {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

body.theme-matrix .theme-box.active {
    border-color: #00ff00 !important;
    box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2) !important;
}

/* --- Tier boxes in Plan --- */
body.theme-dark .tier-box,
body.theme-dark-sparks .tier-box,
body.theme-matrix .tier-box {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

body.theme-dark .tier-box:hover,
body.theme-dark-sparks .tier-box:hover,
body.theme-matrix .tier-box:hover {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}

body.theme-dark .tier-box .tier-price,
body.theme-dark .tier-box .tier-name,
body.theme-dark-sparks .tier-box .tier-price,
body.theme-dark-sparks .tier-box .tier-name,
body.theme-matrix .tier-box .tier-price,
body.theme-matrix .tier-box .tier-name {
    color: inherit !important;
}

/* --- News panel --- */
body.theme-dark .news-panel,
body.theme-dark-sparks .news-panel,
body.theme-matrix .news-panel {
    background: var(--color-bg-secondary) !important;
}

body.theme-dark .news-item,
body.theme-dark-sparks .news-item,
body.theme-matrix .news-item {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* --- Sparks section --- */
body.theme-dark .sparks-container,
body.theme-dark .sidebar-section-sparks,
body.theme-dark-sparks .sparks-container,
body.theme-dark-sparks .sidebar-section-sparks,
body.theme-matrix .sparks-container,
body.theme-matrix .sidebar-section-sparks {
    border-color: var(--color-border) !important;
}

body.theme-dark .spark-box,
body.theme-dark .spark-card,
body.theme-dark-sparks .spark-box,
body.theme-dark-sparks .spark-card,
body.theme-matrix .spark-box,
body.theme-matrix .spark-card {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* --- Scrollbar for dark themes --- */
body.theme-dark *::-webkit-scrollbar-thumb,
body.theme-dark-sparks *::-webkit-scrollbar-thumb,
body.theme-matrix *::-webkit-scrollbar-thumb {
    background: var(--color-border-medium) !important;
}

body.theme-dark *::-webkit-scrollbar-track,
body.theme-dark-sparks *::-webkit-scrollbar-track,
body.theme-matrix *::-webkit-scrollbar-track {
    background: var(--color-bg-secondary) !important;
}

/* --- Links --- */
body.theme-dark a,
body.theme-dark-sparks a,
body.theme-matrix a {
    color: var(--color-accent) !important;
}

/* --- Avatar/Profile section --- */
body.theme-dark .user-profile-box,
body.theme-dark-sparks .user-profile-box,
body.theme-matrix .user-profile-box {
    color: var(--color-text-primary) !important;
}

body.theme-dark .user-profile-name,
body.theme-dark-sparks .user-profile-name,
body.theme-matrix .user-profile-name {
    color: var(--color-text-primary) !important;
}

body.theme-dark .user-profile-email,
body.theme-dark-sparks .user-profile-email,
body.theme-matrix .user-profile-email {
    color: var(--color-text-secondary) !important;
}

/* --- Badge for account type --- */
body.theme-dark .tier-badge,
body.theme-dark-sparks .tier-badge,
body.theme-matrix .tier-badge {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}

/* --- Sites/Strony tab --- */
body.theme-dark .site-input-row,
body.theme-dark-sparks .site-input-row,
body.theme-matrix .site-input-row {
    background: transparent !important;
}

body.theme-dark .site-check-btn,
body.theme-dark-sparks .site-check-btn,
body.theme-matrix .site-check-btn {
    background: var(--color-bg-tertiary) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

body.theme-dark .site-check-btn:hover,
body.theme-dark-sparks .site-check-btn:hover,
body.theme-matrix .site-check-btn:hover {
    background: var(--color-accent) !important;
    color: var(--color-accent-text) !important;
    border-color: var(--color-accent) !important;
}

/* --- Disable noise texture in dark themes --- */
body.theme-dark .editor,
body.theme-dark-sparks .editor,
body.theme-matrix .editor {
    background-image: none !important;
}

/* --- SVG arrows for dark themes --- */
body.theme-dark .scroll-arrow-right,
body.theme-dark-sparks .scroll-arrow-right,
body.theme-matrix .scroll-arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

body.theme-dark .scroll-arrow-left,
body.theme-dark-sparks .scroll-arrow-left,
body.theme-matrix .scroll-arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

/* --- View switcher arrows for dark themes --- */
body.theme-dark .view-gradient-switcher::after,
body.theme-dark-sparks .view-gradient-switcher::after,
body.theme-matrix .view-gradient-switcher::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

body.theme-dark .view-left::after,
body.theme-dark-sparks .view-left::after,
body.theme-matrix .view-left::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E") !important;
}