/**
 * Light Theme
 *
 * Light color scheme overrides
 * Applied when body has .light-theme class
 */

body.light-theme {
    /* =============================================== */
    /*              LIGHT THEME COLORS                */
    /* =============================================== */

    /* Background Colors */
    --color-bg-primary: #f3f4f6;           /* Main background */
    --color-bg-secondary: #ffffff;         /* Panels, cards */
    --color-bg-tertiary: #f9fafb;          /* Hover states, inputs */
    --color-bg-overlay: rgba(0, 0, 0, 0.1); /* Modals, dropdowns */

    /* Text Colors */
    --color-text-primary: #1f2937;         /* Main text */
    --color-text-secondary: #6b7280;       /* Muted text */
    --color-text-tertiary: #9ca3af;        /* Even more muted */
    --color-text-inverse: #ffffff;         /* Text on dark backgrounds */

    /* Border Colors */
    --color-border-primary: #e5e7eb;       /* Main borders */
    --color-border-secondary: #d1d5db;     /* Subtle borders */
    --color-border-focus: #3b82f6;         /* Focus states */

    /* Golden Layout */
    --color-gl-background: #f9fafb;
    --color-gl-header: #f3f4f6;
    --color-gl-tab: #e5e7eb;
    --color-gl-tab-active: #ffffff;
    --color-gl-tab-text: #6b7280;
    --color-gl-tab-text-active: #1f2937;
    --color-gl-splitter: #d1d5db;
    --color-gl-content: #ffffff;

    /* Console/Terminal */
    --color-console-bg: #ffffff;
    --color-console-text: #1f2937;

    /* File Browser */
    --color-file-hover: #f3f4f6;
    --color-file-active: #e0e7ff;
    --color-file-text: #374151;

    /* Buttons */
    --color-btn-secondary-hover: rgba(243, 244, 246, 0.8);

    /* Shadows (lighter for light theme) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.2);

    /* Apply to body */
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* =============================================== */
/*      LIGHT THEME COMPONENT OVERRIDES          */
/* =============================================== */

/* Buttons */
body.light-theme .btn-secondary {
    color: var(--color-text-primary);
}

body.light-theme .user-profile-btn {
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

body.light-theme .user-profile-btn:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

/* Dropdown Menus */
body.light-theme .dropdown-menu {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
    box-shadow: var(--shadow-lg);
}

body.light-theme .dropdown-item {
    color: var(--color-text-primary);
}

body.light-theme .dropdown-item:hover {
    background: var(--color-bg-tertiary);
}

/* Navbar */
body.light-theme .navbar {
    background-color: var(--color-bg-secondary);
    border-bottom-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

body.light-theme .navbar .brand-text {
    color: var(--color-text-primary);
}

body.light-theme .navbar button,
body.light-theme .navbar a {
    color: var(--color-text-primary);
}

/* Toast Notifications */
body.light-theme .toast {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-primary);
    box-shadow: var(--shadow-md);
}

body.light-theme .toast-message {
    color: var(--color-text-primary);
}

/* Modals */
body.light-theme .modal-content {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

body.light-theme .modal-header {
    background: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

body.light-theme .modal-body {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* File Browser */
body.light-theme .file-item {
    color: var(--color-file-text);
}

body.light-theme .file-item:hover {
    background: var(--color-file-hover);
}

/* Note: .file-item.active styling is defined in the "FILE BROWSER - LIGHT THEME FIXES" section below */

/* Current project display in files pane */
body.light-theme #currentProjectDisplay {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* Console Panel */
body.light-theme .console-output {
    background: var(--color-console-bg);
    color: var(--color-console-text);
    border-color: var(--color-border-primary);
}

body.light-theme .console-line {
    color: var(--color-text-primary);
}

body.light-theme .console-error {
    color: var(--color-accent-error);
}

body.light-theme .console-warning {
    color: var(--color-accent-warning);
}

/* Panel Headers and Content */
body.light-theme .panel-header,
body.light-theme .right-panel-header {
    background: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

body.light-theme .right-panel-content,
body.light-theme .panel-content {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

body.light-theme .right-panel-content pre,
body.light-theme .panel-content pre {
    color: var(--color-text-primary);
}

/* Input Fields */
body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="password"],
body.light-theme textarea,
body.light-theme select {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-secondary);
    color: var(--color-text-primary);
}

body.light-theme input:focus,
body.light-theme textarea:focus,
body.light-theme select:focus {
    border-color: var(--color-border-focus);
    background: var(--color-bg-secondary);
}

/* Tables */
body.light-theme table {
    background: var(--color-bg-secondary);
}

body.light-theme th {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-bottom-color: var(--color-border-primary);
}

body.light-theme td {
    border-bottom-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

body.light-theme tr:hover {
    background: var(--color-bg-tertiary);
}

/* Scrollbars */
body.light-theme ::-webkit-scrollbar {
    background: var(--color-bg-tertiary);
}

body.light-theme ::-webkit-scrollbar-thumb {
    background: var(--color-border-secondary);
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
}

/* Code Blocks */
body.light-theme pre,
body.light-theme code {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
}

/* Golden Layout */
body.light-theme .lm_goldenlayout {
    background: var(--color-gl-background) !important;
}

body.light-theme .lm_header {
    background: var(--color-gl-header) !important;
    border-bottom: 1px solid var(--color-border-primary) !important;
}

body.light-theme .lm_tab {
    background: var(--color-gl-tab) !important;
    color: var(--color-gl-tab-text) !important;
    border-right: 1px solid var(--color-border-primary) !important;
}

body.light-theme .lm_tab.lm_active {
    background: var(--color-gl-tab-active) !important;
    color: var(--color-gl-tab-text-active) !important;
    border-bottom: 2px solid var(--color-accent-success) !important;
}

body.light-theme .lm_tab:hover {
    background: var(--color-bg-tertiary) !important;
}

body.light-theme .lm_content {
    background: var(--color-gl-content) !important;
}

body.light-theme .lm_splitter {
    background: var(--color-gl-splitter) !important;
}

body.light-theme .lm_splitter:hover {
    background: var(--color-accent-success) !important;
}

/* Golden Layout Panel Wrappers */
body.light-theme .gl-console-wrapper,
body.light-theme .gl-lint-wrapper,
body.light-theme .gl-synthesis-wrapper,
body.light-theme .gl-elaboration-wrapper,
body.light-theme .gl-hierarchy-wrapper,
body.light-theme .gl-ppa-wrapper,
body.light-theme .gl-ppa-comparison-wrapper,
body.light-theme .gl-sta-wrapper,
body.light-theme .gl-connectivity-wrapper,
body.light-theme .gl-files-wrapper,
body.light-theme .gl-simconfig-wrapper,
body.light-theme .gl-synthconfig-wrapper,
body.light-theme .gl-lintconfig-wrapper,
body.light-theme .gl-staconfig-wrapper,
body.light-theme .gl-editor-wrapper,
body.light-theme .gl-waveform-wrapper {
    background-color: var(--color-bg-secondary);
}

body.light-theme .gl-console-wrapper .right-panel-header,
body.light-theme .gl-lint-wrapper .right-panel-header,
body.light-theme .gl-synthesis-wrapper .right-panel-header,
body.light-theme .gl-elaboration-wrapper .right-panel-header,
body.light-theme .gl-hierarchy-wrapper .right-panel-header,
body.light-theme .gl-ppa-wrapper .right-panel-header,
body.light-theme .gl-sta-wrapper .right-panel-header {
    background-color: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

body.light-theme .gl-console-wrapper .right-panel-content,
body.light-theme .gl-lint-wrapper .right-panel-content,
body.light-theme .gl-synthesis-wrapper .right-panel-content,
body.light-theme .gl-elaboration-wrapper .right-panel-content,
body.light-theme .gl-hierarchy-wrapper .right-panel-content,
body.light-theme .gl-ppa-wrapper .right-panel-content,
body.light-theme .gl-sta-wrapper .right-panel-content {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

body.light-theme .gl-editor-wrapper .editor-header,
body.light-theme .gl-waveform-wrapper .waveform-header {
    background-color: var(--color-bg-tertiary);
    border-bottom-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

/* =============================================== */
/*    SEMANTIC BOXES - LIGHT THEME OVERRIDES     */
/* =============================================== */

/* Info Box - Light blue background with dark blue text */
body.light-theme .info-box,
body.light-theme .info-box-compact {
    background: #dbeafe;          /* Light blue background */
    border-left: 3px solid #3b82f6;
}

body.light-theme .info-box .info-title,
body.light-theme .info-box-compact .info-title {
    color: #1e40af;              /* Dark blue text */
}

body.light-theme .info-box .info-content {
    color: #1e3a8a;              /* Darker blue text */
}

/* Success Box - Light green background with dark green text */
body.light-theme .success-box,
body.light-theme .success-box-compact {
    background: #d1fae5;          /* Light green background */
    border-left: 3px solid #10b981;
}

body.light-theme .success-box .success-title,
body.light-theme .success-box-compact .success-title {
    color: #065f46;              /* Dark green text */
}

body.light-theme .success-box .success-content {
    color: #047857;              /* Darker green text */
}

/* Error Box - Light red background with dark red text */
body.light-theme .error-box {
    background: #fecaca;          /* Light red background */
    border-left: 3px solid #ef4444;
}

body.light-theme .error-box .error-title {
    color: #7f1d1d;              /* Dark red text */
}

body.light-theme .error-box .error-content {
    color: #991b1b;              /* Darker red text */
}

/* Warning Box - Light gray background */
body.light-theme .warning-box {
    background: #f3f4f6;
    border-left: 3px solid #9ca3af;
}

body.light-theme .warning-box .warning-title {
    color: #4b5563;
}

/* =============================================== */
/*      FILE BROWSER - LIGHT THEME FIXES         */
/* =============================================== */

/* Selected file in files pane - light indigo background */
body.light-theme .file-item.active {
    background: #e0e7ff;           /* Light indigo background */
    border-left: 3px solid #4f46e5; /* Indigo border */
    color: #3730a3;                /* Dark indigo text */
    box-shadow: inset 0 0 12px rgba(79, 70, 229, 0.1);
}

/* =============================================== */
/*  COMPILE ORDER DRAG-DROP - LIGHT THEME FIXES  */
/* =============================================== */

/* Compile order items - light background */
body.light-theme .compile-order-item {
    background-color: var(--color-bg-secondary); /* White background */
    border-color: var(--color-border-secondary); /* Light gray border */
}

body.light-theme .compile-order-item:hover {
    background-color: var(--color-bg-tertiary); /* Very light gray on hover */
    border-color: var(--color-border-primary);
}

/* =============================================== */
/*      CHECKBOX HOVER - LIGHT THEME FIXES       */
/* =============================================== */

/* Checkbox label hover - no dark background */
body.light-theme .checkbox-label:hover {
    background-color: transparent;
    color: var(--color-text-primary); /* Dark text */
}

/* Ensure checkbox itself stays light */
body.light-theme .checkbox {
    accent-color: #3b82f6; /* Blue accent */
}

/* =============================================== */
/*   PROJECT BROWSER MODAL - LIGHT THEME FIXES   */
/* =============================================== */

/* Project browser modal backdrop */
body.light-theme #projectBrowserModal {
    background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent backdrop */
}

/* Main modal container - override bg-gray-800 */
body.light-theme #projectBrowserModal .bg-gray-800 {
    background-color: var(--color-bg-secondary) !important; /* White background */
    border-color: var(--color-border-primary) !important; /* Light border */
}

/* Filter bar - override bg-gray-900 */
body.light-theme #projectBrowserModal .bg-gray-900 {
    background-color: var(--color-bg-tertiary) !important; /* Light gray background */
}

/* Border colors */
body.light-theme #projectBrowserModal .border-gray-700 {
    border-color: var(--color-border-primary) !important;
}

body.light-theme #projectBrowserModal .border-gray-600 {
    border-color: var(--color-border-secondary) !important;
}

/* Text colors */
body.light-theme #projectBrowserModal .text-white {
    color: var(--color-text-primary) !important;
}

body.light-theme #projectBrowserModal .text-gray-400 {
    color: var(--color-text-secondary) !important;
}

body.light-theme #projectBrowserModal .text-gray-500 {
    color: var(--color-text-tertiary) !important;
}

/* Project browser header */
body.light-theme #projectBrowserModal h2 {
    color: var(--color-text-primary) !important;
}

/* Filter buttons - inactive state */
body.light-theme #projectBrowserModal button[id^="filter"]:not([style*="10b981"]) {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

body.light-theme #projectBrowserModal button[id^="filter"]:not([style*="10b981"]):hover {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Active filter button keeps green */
body.light-theme #projectBrowserModal button[style*="10b981"] {
    background-color: #10b981 !important;
    color: white !important;
}

/* Project search input - override bg-gray-800, border-gray-600 */
body.light-theme #projectSearchInput {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

body.light-theme #projectSearchInput::placeholder {
    color: var(--color-text-tertiary) !important;
}

body.light-theme #projectSearchInput:focus {
    border-color: var(--color-border-focus) !important;
}

/* Search icon */
body.light-theme #projectBrowserModal .fa-search {
    color: var(--color-text-tertiary) !important;
}

/* Project results container - override bg-gray-900 */
body.light-theme #projectResultsContainer {
    background-color: var(--color-bg-primary) !important; /* Light gray background */
}

/* Loading spinner icon */
body.light-theme #projectResultsContainer .fa-spinner {
    color: #10b981 !important; /* Keep green */
}

/* Footer buttons - override bg-gray-700 */
body.light-theme #projectBrowserModal .bg-gray-700 {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

body.light-theme #projectBrowserModal .bg-gray-700:hover {
    background-color: var(--color-bg-primary) !important;
}

/* Project cards/items in results */
body.light-theme #projectResultsContainer > div > div > div {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Project card headings - override hardcoded #f3f4f6 */
body.light-theme #projectResultsContainer h4 {
    color: var(--color-text-primary) !important;
}

/* Project card titles inside cards */
body.light-theme #projectResultsContainer div[style*="#f3f4f6"] {
    color: var(--color-text-primary) !important;
}

/* Project descriptions - override #cbd5e0 */
body.light-theme #projectResultsContainer div[style*="#cbd5e0"] {
    color: var(--color-text-secondary) !important;
}

/* Last modified text - override #9ca3af */
body.light-theme #projectResultsContainer div[style*="#9ca3af"] {
    color: var(--color-text-secondary) !important;
}

/* Icons in project cards */
body.light-theme #projectResultsContainer .fa-file-code,
body.light-theme #projectResultsContainer .fa-clock {
    color: var(--color-text-tertiary) !important;
}

/* Difficulty filter buttons in examples section */
body.light-theme #projectResultsContainer button[id^="difficultyFilter"] {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-secondary) !important;
}

body.light-theme #projectResultsContainer button[style*="10b981"] {
    background: #10b981 !important;
    color: white !important;
}

/* =============================================== */
/*   DRAG-DROP OVERLAY - LIGHT THEME FIXES       */
/* =============================================== */

/* Drag-drop content box - light background */
body.light-theme .drag-drop-content {
    background: var(--color-bg-secondary); /* White background */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Lighter shadow */
}

body.light-theme .drag-drop-content h3 {
    color: var(--color-text-primary); /* Dark text */
}

body.light-theme .drag-drop-content p {
    color: var(--color-text-secondary); /* Muted dark text */
}

/* =============================================== */
/*   ALL MODALS - ADDITIONAL LIGHT THEME FIXES   */
/* =============================================== */

/* Keyboard shortcuts modal - shortcut items with bg-gray-800 */
body.light-theme #shortcutsModal .bg-gray-800 {
    background-color: var(--color-bg-tertiary) !important;
}

/* SDC modal elements */
body.light-theme #sdcProjectInfo {
    background-color: var(--color-bg-tertiary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

body.light-theme #sdcTemplateSelect {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

/* Feedback modal textarea/inputs with bg-gray-800 */
body.light-theme #feedbackModal .bg-gray-800 {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-border-secondary) !important;
    color: var(--color-text-primary) !important;
}

body.light-theme #feedbackModal textarea.text-gray-200,
body.light-theme #feedbackModal input.text-gray-200 {
    color: var(--color-text-primary) !important;
}

body.light-theme #feedbackModal .border-gray-600 {
    border-color: var(--color-border-secondary) !important;
}

/* All modal bg-gray-700 elements (general override) */
body.light-theme .modal .bg-gray-700 {
    background-color: var(--color-bg-tertiary) !important;
}

/* All modal border-gray-600/700 elements */
body.light-theme .modal .border-gray-600,
body.light-theme .modal .border-gray-700 {
    border-color: var(--color-border-secondary) !important;
}

/* Modal text colors */
body.light-theme .modal .text-gray-200 {
    color: var(--color-text-primary) !important;
}

body.light-theme .modal .text-gray-400 {
    color: var(--color-text-secondary) !important;
}

body.light-theme .modal .placeholder-gray-500::placeholder {
    color: var(--color-text-tertiary) !important;
}

/* =============================================== */
/*      NAVBAR & UI ELEMENTS - LIGHT THEME       */
/* =============================================== */

/* Navbar dividers (vertical lines) */
body.light-theme .navbar .bg-gray-600,
body.light-theme .navbar .bg-gray-700 {
    background-color: var(--color-border-secondary) !important;
}

/* Mobile menu toggle hover */
body.light-theme #mobileMenuToggle:hover {
    background-color: var(--color-bg-tertiary) !important;
}

/* Dividers in navbar or other UI elements */
body.light-theme .bg-gray-600:not(.modal *):not(#projectBrowserModal *),
body.light-theme .bg-gray-700:not(.modal *):not(#projectBrowserModal *) {
    background-color: var(--color-border-secondary) !important;
}