/* =========================================================================
   TECHNICAL STUDIO PRO - GRANULAR GLOBAL THEME CONFIGURATION
   ========================================================================= */

:root {
    /* 1. DARK MODE (DEFAULT) */

    /* Document & Layout */
    --canvas-bg: #0b1326;
    /* Body Background */
    --header-bg: #131b2e;
    /* Top Navigation */
    --sidebar-bg: #131b2e;
    /* Left Sidebar */

    /* UI Panels & Cards */
    --card-bg: #171f33;
    /* Standard Card / Container */
    --card-hover-bg: #2d3449;
    /* Card Hover / Elevated */
    --bg-surface: #0b1326;
    /* Context Menu / Dropdown BG */
    --surface-container: #171f33;
    --surface-container-low: #131b2e;
    --surface-container-high: #222a3d;
    --surface-container-highest: #2d3449;

    /* Typography */
    --text-main: #61b861;
    /* Primary Text (Headings, Body) */
    --text-dim: #8fd49b;
    /* Secondary Text (Descriptions, Tags) */
    --text-on-header: #ffffff;
    /* NEW: Explicit Header Legibility */
    --text-on-editor: #8fd49b;
    /* NEW: Code Editor Text */
    --editor-bg: #0b1326;
    /* NEW: Code Editor Background */

    /* Borders & Dividers */
    --border-main: rgba(255, 255, 255, 0.08);
    /* General Outlines */
    --header-border: rgba(255, 255, 255, 0.08);
    /* Header Specific */
    --sidebar-border: rgba(255, 255, 255, 0.08);
    /* Sidebar Specific */

    /* Interactive Branding */
    --primary: #509b25;
    /* Primary Accents & Active states */
    --primary-mid: #509b25;
    /* Gradient Mid Point */
    --primary-end: #3b8220;
    /* Gradient End Point */
    --on-primary: #22a900;
    /* Text on Primary elements */

    /* Specific Components */
    --chip-bg: #2d3449;
    /* Filter Chips Default */
    --chip-text: #8fd49b;
    --chip-hover-bg: #8fd49b;
    /* Filter Chips Hover */
    --chip-hover-text: #0b1326;
    --chip-active-bg: #509b25;
    --chip-active-text: #22a900;
}

.light-mode {
    /* 2. LIGHT MODE */

    /* Document & Layout */
    --canvas-bg: #f4f7fa;
    --header-bg: #ffffff;
    --sidebar-bg: #ffffff;

    /* UI Panels & Cards */
    --card-bg: #ffffff;
    --card-hover-bg: #f1f5f9;
    --bg-surface: #ffffff;
    --surface-container: #ffffff;
    --surface-container-low: #f8fafc;
    --surface-container-high: #f1f5f9;
    --surface-container-highest: #e2e8f0;

    /* Typography */
    --text-main: #0f172a;
    --text-dim: #64748b;
    --text-on-header: #0f172a;
    --text-on-editor: #0f172a;
    --editor-bg: #fdfdfd;

    /* Borders & Dividers */
    --border-main: rgb(214, 220, 255);
    --header-border: rgb(214, 220, 255);
    --sidebar-border: rgb(214, 220, 255);

    /* Interactive Branding */
    --primary: #4f46e5;
    --primary-mid: #685cfe;
    --primary-end: #8b5cf6;
    --on-primary: #ffffff;

    /* Specific Components */
    --chip-bg: #e2e8f0;
    --chip-text: #64748b;
    --chip-hover-bg: #cbd5e1;
    --chip-hover-text: #0f172a;
    --chip-active-bg: #4f46e5;
    --chip-active-text: #ffffff;
}

/* =========================================================================
   3. STRUCTURAL MAPPINGS
   ========================================================================= */

/* Body & Canvas */
body {
    background-color: var(--canvas-bg) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Top Header */
nav,
header.fixed,
header.z-50 {
    background-color: var(--header-bg) !important;
    border-color: var(--header-border) !important;
    color: var(--text-on-header) !important;
}

header.z-50 span,
header.z-50 a,
header.z-50 button:not(.bg-primary) {
    color: var(--text-on-header) !important;
}

header.z-50 a.text-primary,
header.z-50 a.active-link {
    color: var(--primary) !important;
}

/* Code Editor */
section.bg-surface-container-lowest,
section.bg-surface-dim,
#text-editor {
    background-color: var(--editor-bg) !important;
    color: var(--text-on-editor) !important;
}

#line-numbers {
    background-color: var(--surface-container-low) !important;
    color: var(--text-dim) !important;
    opacity: 0.5;
}

/* Left Sidebar */
aside {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

/* Base Cards & Containers */
.bg-surface-dim,
.bg-surface-container-low,
.bg-surface {
    background-color: var(--canvas-bg) !important;
}

.bg-surface-container,
.bg-surface-bright {
    background-color: var(--card-bg) !important;
}

.bg-surface-container-high,
.bg-surface-container-highest {
    background-color: var(--card-hover-bg) !important;
}

/* Typography Overrides */
.text-on-surface,
.text-on-background,
.text-white {
    color: var(--text-main) !important;
}

.text-outline,
.text-on-surface-variant {
    color: var(--text-dim) !important;
}

.text-primary,
html.light-mode .text-primary {
    color: var(--primary) !important;
}

/* Border Overrides */
.border-outline-variant,
.border-outline-variant\/10,
.border-outline-variant\/20,
.border-outline-variant\/30 {
    border-color: var(--border-main) !important;
}

.border-primary,
html.light-mode .border-primary {
    border-color: var(--primary) !important;
}

/* Blueprint/Grid Pattern (Canvas environments) */
.blueprint-grid,
.bg-blueprint {
    background-color: var(--canvas-bg) !important;
    background-image: none !important;
    background-size: 24px 24px !important;
}

.bg-grid {
    background-color: var(--canvas-bg) !important;
    background-image: none !important;
}

.bg-dotted {
    background-color: var(--canvas-bg) !important;
    background-image: none !important;
    opacity: 1;
}

.bg-plain {
    background-color: var(--canvas-bg) !important;
    background-image: none !important;
}

.bg-blueprint {
    background-color: #1e3a8a !important;
    background-image: none !important;
}

.bg-isometric {
    background-color: var(--canvas-bg) !important;
    background-image: none !important;
}

/* Resizer Splitter */
#pane-resizer {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    transition: background 0.3s;
    user-select: none;
    z-index: 50;
    position: relative;
    border-left: 1px solid var(--border-main);
    border-right: 1px solid var(--border-main);
}

#pane-resizer:hover,
#pane-resizer.active {
    background: var(--primary);
}

#pane-resizer::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 40px;
    background: var(--border-main);
    border-radius: 1px;
}

/* Curve Option Buttons */
.curve-btn {
    @apply flex-1 py-1.5 flex flex-col items-center gap-1 border border-outline-variant/20 rounded-md hover:bg-primary/5 transition-all grayscale opacity-50;
}

.curve-btn.active {
    @apply border-primary opacity-100 grayscale-0 bg-primary/10;
}

.curve-btn span {
    font-size: 14px;
}


.bg-ocean {
    background-color: #0f172a !important;
    background-image: none !important;
}
.bg-matrix {
    background-color: #050505 !important;
    background-image: none !important;
}

.bg-matrix {
    background-color: #000c00 !important;
    background-image:
        linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 0, 0.05) 1px, transparent 1px) !important;
    background-size: 30px 30px !important;
}

.bg-construction {
    background-color: #e2e8f0 !important;
    background-image: none !important;
}

.bg-paper {
    background-color: #f8f9fa !important;
    background-image: none !important;
}

html.light-mode .blueprint-grid,
html.light-mode .bg-blueprint {
    background-image: none !important;
    opacity: 1 !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: var(--canvas-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--card-hover-bg);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Glass Panels / Modals */
html.light-mode .glass-panel,
html.light-mode .bg-surface-container-low\/80 {
    background: var(--card-bg) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-main) !important;
}

/* Primary Action Buttons */
html.light-mode .bg-gradient-to-br.from-primary.to-primary-container,
html.light-mode .from-primary.to-primary-container,
html.light-mode .bg-primary,
.bg-gradient-to-br.from-primary.to-primary-container,
.from-primary.to-primary-container,
.bg-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 50%, var(--primary-end) 100%) !important;
    color: var(--on-primary) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Filter Chips Configuration */
.filter-chip {
    background-color: var(--chip-bg);
    color: var(--chip-text);
    border: 1px solid var(--border-main);
}

.filter-chip:hover {
    background-color: var(--chip-hover-bg);
    color: var(--chip-hover-text);
}

.filter-chip.active-chip,
html.light-mode .filter-chip.active-chip {
    background-color: var(--chip-active-bg);
    color: var(--chip-active-text);
    box-shadow: 0 0 0 1px var(--primary);
    border-color: var(--primary);
}