/* ═══════════════════════════════════════════════════
   Lumber Design System — Tier 2: Light Mode Override
   ═══════════════════════════════════════════════════
   Applied when body.light-mode is active.
   ═══════════════════════════════════════════════════ */

body.light-mode {
    /* ── Color System ── */
    --lb-surface: #ffffff;
    --lb-surface-container: #f8fafc;
    --lb-surface-dim: #e2e8f0;
    --lb-on-surface: #0f172a;
    --lb-on-surface-dim: #475569;

    --lb-on-primary: #ffffff;

    /* ── Glass System ── */
    --lb-glass-tint: rgba(255, 255, 255, 0.85);
    --lb-glass-border: rgba(0, 0, 0, 0.08);
    --lb-glass-highlight: 0.02;

    /* ── Elevation ── */
    --lb-shadow-1: 0 10px 30px rgba(0, 0, 0, 0.05);
    --lb-shadow-2: 0 20px 50px rgba(0, 0, 0, 0.08);
    --lb-shadow-3: 0 40px 80px rgba(0, 0, 0, 0.12);

    /* ── Glow (accent-derived) ── */
    --lb-glow: none; /* Remove neon glow */

    /* ── Control Surfaces ── */
    --lb-control-knob: #000000;
    --lb-scrollbar-thumb: rgba(0, 0, 0, 0.1);
    --lb-scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
}

/* ── Surface Calibration ── */
body.light-mode .workspace-shell {
    background: #f1f5f9;
}

body.light-mode .workspace-left-rail,
body.light-mode .workspace-center,
body.light-mode .workspace-right-rail {
    background: #f1f5f9 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.05);
}

body.light-mode .writers-room-shell .workspace-left-rail,
body.light-mode .writers-room-shell .workspace-center,
body.light-mode .writers-room-shell .workspace-right-rail {
    background: #f1f5f9 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04), 0 0 1px rgba(0,0,0,0.05);
}

body.light-mode .workspace-resize-handle.active::after {
    background: rgba(0,0,0,0.2);
    box-shadow: none;
}

body.light-mode .script-editor-overlay {
    color: rgba(0,0,0,0.85);
}

body.light-mode .script-editor-textarea {
    caret-color: #000;
}

body.light-mode .se-custom-caret {
    background: #000;
}

body.light-mode .se-diff-gutter-mark.se-gutter-add {
    background: rgba(52, 211, 153, 0.8);
}

/* ── Text & Border Color Calibration ── */
body.light-mode,
body.light-mode .wr-panel-chrome,
body.light-mode .wr-project-item {
    color: var(--lb-on-surface);
}

body.light-mode input.wr-project-rename-input,
body.light-mode .wr-col-fill input[type="text"],
body.light-mode .lai-container input[type="text"] {
    color: var(--lb-on-surface) !important;
}

body.light-mode .wr-project-season-header,
body.light-mode .wr-project-action-btn,
body.light-mode .tree-rail-drag-strip,
body.light-mode .tree-rail-seq-toggle,
body.light-mode .tree-rail-seq-drag,
body.light-mode .tree-rail-count,
body.light-mode .tree-rail-scene-summary,
body.light-mode .tree-rail-sequence-header,
body.light-mode .lai-hint,
body.light-mode .lai-stat-card span {
    color: var(--lb-on-surface-dim) !important;
}

body.light-mode .wr-project-action-btn:hover {
    color: var(--lb-on-surface) !important;
    background: rgba(0,0,0,0.08) !important;
}

body.light-mode .wr-heading-md,
body.light-mode .wr-heading-sm,
body.light-mode .wr-detail-sm,
body.light-mode .wr-detail-xs {
    color: var(--lb-on-surface) !important;
}

body.light-mode .wr-empty-hero {
    color: var(--lb-on-surface-dim);
}

/* Fix light mode borders that are rgba(255,255,255,x) */
body.light-mode .wr-unified-toolbar {
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    background: rgba(0,0,0,0.02) !important;
}

body.light-mode .wr-project-item,
body.light-mode .wr-project-season-header,
body.light-mode .wr-project-actions,
body.light-mode .tree-rail-scene,
body.light-mode .lai-container .lai-heading,
body.light-mode .lai-container .lai-divider {
    border-color: rgba(0,0,0,0.08) !important;
}

body.light-mode .tree-rail-scene {
    background: rgba(0,0,0,0.02);
}
body.light-mode .tree-rail-scene:hover {
    background: rgba(0,0,0,0.05) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ── Shared Overrides ── */
body.light-mode .wr-panel-chrome {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

body.light-mode .wr-project-action-btn {
    border-color: rgba(0,0,0,0.1) !important;
    background: rgba(0,0,0,0.03) !important;
}

body.light-mode .lai-container input[type="text"] {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.1) !important;
}

/* ── Additional Light Mode Polish ── */
body.light-mode {
    background-color: #eef2f6 !important;
}

body.light-mode .workspace-center,
body.light-mode .se-canvas-container,
body.light-mode .wr-col-fill,
body.light-mode .se-sharded-editor,
body.light-mode .editor-surface-container,
body.light-mode .wr-editor-pane {
    background-color: #eef2f6 !important;
}

/* Header */
body.light-mode .toolbar-grouped {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

body.light-mode .toolbar-grouped button.ghost {
    color: var(--lb-on-surface-dim) !important;
    background: transparent !important;
}

body.light-mode .toolbar-grouped button.ghost:hover {
    color: var(--lb-on-surface) !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

/* Writer's Room Header Buttons */
body.light-mode .wr-view-pill,
body.light-mode .wr-toolbar-circle-btn {
    background: transparent !important;
    color: var(--lb-on-surface-dim) !important;
}

body.light-mode .wr-view-pill:hover,
body.light-mode .wr-toolbar-circle-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--lb-on-surface) !important;
}

body.light-mode .wr-view-pill.active,
body.light-mode .wr-toolbar-circle-btn.active {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}

body.light-mode .wr-save-status {
    color: #059669 !important;
}

body.light-mode .wr-save-status.unsaved {
    color: #d97706 !important;
}

body.light-mode .toolbar-grouped input.toolbar-search-input {
    background-color: rgba(0,0,0,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    color: var(--lb-on-surface) !important;
}

body.light-mode .toolbar-grouped input.toolbar-search-input:hover,
body.light-mode .toolbar-grouped input.toolbar-search-input:focus-within {
    background-color: rgba(0,0,0,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

body.light-mode .toolbar-grouped input.toolbar-search-input:focus {
    border-color: var(--accent, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 96, 165, 250), 0.1) !important;
}

body.light-mode .brand {
    color: var(--lb-on-surface) !important;
}

/* Panel Chrome Glyphs */
body.light-mode .wr-panel-chrome-pill,
body.light-mode .wr-panel-chrome-label,
body.light-mode .wr-panel-chrome-count {
    color: var(--lb-on-surface-dim) !important;
}

body.light-mode .wr-panel-chrome-pill.active {
    color: var(--lb-on-surface) !important;
    background: rgba(0,0,0,0.06) !important;
}

body.light-mode .wr-panel-chrome-pill:hover {
    color: var(--lb-on-surface) !important;
    background: rgba(0,0,0,0.04) !important;
}

/* Inputs Placeholder Fix */
body.light-mode .lai-container input[type="text"]::placeholder,
body.light-mode .lai-container textarea::placeholder,
body.light-mode .wr-project-rename-input::placeholder {
    color: rgba(0,0,0,0.4) !important;
}

/* Bottom Stats and Buttons */
body.light-mode .lai-char-scene-count,
body.light-mode .lai-pill-label,
body.light-mode .lai-section-label,
body.light-mode .graph-link-compact-label,
body.light-mode .graph-link-compact-stats,
body.light-mode .graph-link-compact-desc {
    color: var(--lb-on-surface-dim) !important;
    opacity: 1 !important;
}

body.light-mode .lai-location-type {
    color: var(--lb-on-surface-dim) !important;
}
body.light-mode .handoff-bar {
    background: transparent !important;
}

body.light-mode .handoff-bar button.lb-btn {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--lb-on-surface) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

body.light-mode .handoff-bar button.lb-btn:hover {
    background: var(--lb-surface-container, #f8fafc) !important;
    border-color: rgba(0,0,0,0.3) !important;
}

body.light-mode .wr-word-stats {
    color: var(--lb-on-surface-dim) !important;
    background: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

/* 1. Popovers, Menus and Context Selectors */
body.light-mode .lb-popover,
body.light-mode .lb-popover-runtime,
body.light-mode .glass-popover,
body.light-mode .wr-menu-dropdown,
body.light-mode .wr-format-popover,
body.light-mode .context-visualizer,
body.light-mode .tree-rail-ctx-menu {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05) !important;
}

body.light-mode .wr-menu-action,
body.light-mode .lb-popover-item,
body.light-mode .popover-item,
body.light-mode .lb-popover-btn,
body.light-mode .popover-header,
body.light-mode .popover-head,
body.light-mode .popover-label,
body.light-mode .lb-popover-desc,
body.light-mode .ctx-selector-title,
body.light-mode .ctx-selector-row-label,
body.light-mode .ctx-selector-header,
body.light-mode .ctx-selector-row {
    color: var(--lb-on-surface) !important;
}

body.light-mode .ctx-selector-row-icon {
    color: var(--lb-on-surface-dim) !important;
    background: rgba(0,0,0,0.05) !important;
}

body.light-mode .wr-menu-action:hover,
body.light-mode .wr-menu-has-sub.wr-sub-open,
body.light-mode .lb-popover-item:hover,
body.light-mode .popover-item:hover,
body.light-mode .popover-item.active,
body.light-mode .lb-popover-btn:hover,
body.light-mode .ctx-selector-row:hover,
body.light-mode .ctx-selector-row.ctx-selector-selected {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}

body.light-mode .ctx-selector-row:hover .ctx-selector-row-label {
    color: #2563eb !important;
}

body.light-mode .ctx-selector-row:hover .ctx-selector-row-icon {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #2563eb !important;
}

body.light-mode .ctx-selector-selected {
    background: linear-gradient(90deg, rgba(var(--accent-rgb, 96, 165, 250), 0.15) 0%, transparent 100%) !important;
}

body.light-mode .ctx-selector-selected .ctx-selector-row-icon {
    background: var(--accent, #60a5fa) !important;
    color: #ffffff !important;
}

body.light-mode .wr-menu-sep,
body.light-mode .popover-divider,
body.light-mode .ctx-selector-divider {
    background: rgba(0,0,0,0.08) !important;
}

body.light-mode .ctx-selector-header-row,
body.light-mode .ctx-selector-meta {
    color: var(--lb-on-surface-dim) !important;
}

body.light-mode .ctx-selector-count {
    background: rgba(0,0,0,0.08) !important;
    color: var(--lb-on-surface) !important;
}

body.light-mode [data-glass="tooltip"],
body.light-mode [data-tooltip]:hover::after,
body.light-mode .sui-tooltip,
body.light-mode .btn-tooltip,
body.light-mode .an-tl-comment-tooltip,
body.light-mode .lb-tooltip-popover,
body.light-mode .glass-popover#lb-tooltip,
body.light-mode #editor-actions .editor-action-btn::after {
    background: var(--lb-surface) !important;
    color: var(--lb-on-surface) !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

body.light-mode .lb-tooltip-inner {
    color: var(--lb-on-surface) !important;
}

/* 2. Chrome buttons disappearing on panels (e.g. New Season, New Script) */
body.light-mode .wr-toolbar-circle-btn,
body.light-mode .wr-menu-trigger-btn {
    color: var(--lb-on-surface-dim) !important;
}

/* Ghost button global override for light mode */
body.light-mode button.ghost {
    background: transparent !important;
    color: var(--lb-on-surface) !important;
}
body.light-mode button.ghost:hover {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}

body.light-mode .wr-toolbar-circle-btn:hover,
body.light-mode .wr-toolbar-circle-btn.active,
body.light-mode .wr-menu-trigger.active .wr-menu-trigger-btn,
body.light-mode .wr-menu-trigger-btn:hover {
    background: rgba(0,0,0,0.06) !important;
    color: var(--lb-on-surface) !important;
}

/* 3. Structure filter fields becoming dark */
body.light-mode .wr-rail-filter {
    background-color: rgba(0,0,0,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    border-color: transparent !important;
}

body.light-mode .wr-rail-filter:hover,
body.light-mode .wr-rail-filter:focus {
    background-color: rgba(0,0,0,0.05) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.45)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    border-color: rgba(0,0,0,0.15) !important;
    box-shadow: none !important;
}

body.light-mode .wr-rail-filter:focus {
    border-color: var(--accent, #60a5fa) !important;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 96, 165, 250), 0.1) !important;
}

body.light-mode #wr-scene-filter {
    color: var(--lb-on-surface) !important;
}

body.light-mode .wr-rail-filter:hover,
body.light-mode .wr-rail-filter:focus {
    color: var(--lb-on-surface) !important;
}

body.light-mode .wr-rail-filter::placeholder {
    color: transparent !important;
}

body.light-mode .wr-rail-filter:hover::placeholder,
body.light-mode .wr-rail-filter:focus::placeholder,
body.light-mode #wr-scene-filter::placeholder {
    color: rgba(0,0,0,0.4) !important;
}

body.light-mode .wr-rail-search-icon {
    color: var(--lb-on-surface-dim) !important;
}

/* 4. Script Title */
body.light-mode .wr-title-text {
    color: var(--lb-on-surface) !important;
}
body.light-mode .wr-title-text:hover {
    color: rgba(0, 0, 0, 1) !important;
}
body.light-mode .wr-title-input {
    background: var(--lb-surface) !important;
    border-color: rgba(0,0,0,0.2) !important;
    color: var(--lb-on-surface) !important;
}
/* 4. Inspector hint text too faint */
body.light-mode .lai-hint,
body.light-mode .lai-empty-text {
    opacity: 0.8 !important;
}

/* 5. Visible Scrollbars in Light Mode (Hover-Only) */
body.light-mode .wr-rail-body,
body.light-mode .workspace-left-rail,
body.light-mode .workspace-center,
body.light-mode .workspace-right-rail {
    scrollbar-color: transparent transparent !important;
}

body.light-mode .wr-rail-body:hover,
body.light-mode .workspace-left-rail:hover,
body.light-mode .workspace-center:hover,
body.light-mode .workspace-right-rail:hover {
    scrollbar-color: var(--accent, #60a5fa) transparent !important;
}

body.light-mode ::-webkit-scrollbar-thumb {
    background: transparent !important;
}

body.light-mode :hover::-webkit-scrollbar-thumb {
    background: var(--accent, #60a5fa) !important;
}

body.light-mode :hover::-webkit-scrollbar-thumb:hover {
    background: var(--accent, #3b82f6) !important;
}

/* 6. Script Editor Rulers */
body.light-mode .se-ruler-top,
body.light-mode .se-ruler-left {
    background: rgba(226, 232, 240, 0.7) !important; /* semi-transparent light gray for glassmorphism */
    border-color: rgba(0, 0, 0, 0.1) !important;
}
body.light-mode .se-ruler-tick-h {
    border-left-color: rgba(0, 0, 0, 0.2) !important;
}
body.light-mode .se-ruler-tick-v {
    border-top-color: rgba(0, 0, 0, 0.2) !important;
}
body.light-mode .se-ruler-num-h,
body.light-mode .se-ruler-num-v {
    color: rgba(0, 0, 0, 0.6) !important;
}