/* Victory Lap Component Styles * ───────────────────────────────────────────────────────────────────────── * Phase 8 — Dark Mode Theme System * All component colors flow through CSS custom properties so the entire app * can be re-themed by toggling [data-theme="..."] on the element. * Brand identity colors (navy #2F3A4E, gold #C19B65) remain constant; only * surface/background/text/border tokens flip between light and dark. * The boot script in main.py resolves "system" to "light"|"dark" before * paint, so this file only needs to handle two explicit themes. * ───────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --vl-bg-app: #f5f5f3; --vl-bg-primary: #ffffff; --vl-bg-secondary: #f8fafc; --vl-bg-tertiary: #f1f5f9; --vl-bg-card: #ffffff; --vl-bg-elevated: #ffffff; --vl-bg-input: #ffffff; --vl-bg-muted: #f1f5f9; --vl-bg-hover: #f8fafc; --vl-bg-selected: #dbeafe; --vl-bg-option-hover: #eff6ff; /* Text */ --vl-text-primary: #1e293b; --vl-text-secondary: #475569; --vl-text-tertiary: #64748b; --vl-text-muted: #94a3b8; --vl-text-strong: #0f172a; --vl-text-on-accent: #f8fafc; --vl-text-on-dark: #f8fafc; --vl-text-link: #1d4ed8; --vl-text-disabled: #94a3b8; /* Borders */ --vl-border: #e2e8f0; --vl-border-strong: #cbd5e1; --vl-border-subtle: #f1f5f9; --vl-border-input: #e2e8f0; --vl-border-focus: #2F3A4E; --vl-border-focus-ring: rgba(47, 58, 78, 0.10); /* Brand (constant across themes) */ --vl-primary: #2F3A4E; --vl-primary-hover: #1e2533; --vl-primary-soft: rgba(47, 58, 78, 0.08); --vl-gold: #C19B65; --vl-gold-hover: #b88a52; /* Semantic */ --vl-danger: #991b1b; --vl-danger-hover: #7f1d1d; --vl-danger-soft-bg: #fef2f2; --vl-success: #166534; --vl-success-hover: #0f4427; --vl-success-soft-bg: #f0fdf4; --vl-warning: #d97706; --vl-info: #0c4a6e; /* Misc */ --vl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10); --vl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --vl-shadow-lg: 0 12px 28px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08); --vl-shadow-xl: 0 25px 50px -12px rgba(15, 23, 42, 0.35); --vl-modal-backdrop: rgba(15, 23, 42, 0.55); --vl-scrollbar-thumb: #94a3b8; --vl-scrollbar-track: #f1f5f9; --vl-select-chevron: "%232F3A4E"; /* Sidebar — navy by default (brand look) in both themes. */ --vl-sidebar-bg: #1e2533; --vl-sidebar-fg: #e8e4df; --vl-sidebar-fg-muted: #c8d0dc; --vl-sidebar-fg-strong: #f8fafc; --vl-sidebar-border: rgba(193, 155, 101, 0.15); --vl-sidebar-btn-border: rgba(193, 155, 101, 0.12); --vl-sidebar-active-bg: #C19B65; --vl-sidebar-active-fg: #1e2533; } :root[data-theme="dark"] { color-scheme: dark; /* Surfaces */ --vl-bg-app: #0b1320; --vl-bg-primary: #0f172a; --vl-bg-secondary: #111c30; --vl-bg-tertiary: #1a2540; --vl-bg-card: #16213a; --vl-bg-elevated: #1e293b; --vl-bg-input: #16213a; --vl-bg-muted: #1a2540; --vl-bg-hover: #1e293b; --vl-bg-selected: #1e3a8a; --vl-bg-option-hover: #1f2a44; /* Text */ --vl-text-primary: #f1f5f9; --vl-text-secondary: #cbd5e1; --vl-text-tertiary: #94a3b8; --vl-text-muted: #64748b; --vl-text-strong: #f8fafc; --vl-text-on-accent: #f8fafc; --vl-text-on-dark: #f8fafc; --vl-text-link: #93c5fd; --vl-text-disabled: #475569; /* Borders */ --vl-border: #2a3756; --vl-border-strong: #38476a; --vl-border-subtle: #1e2a44; --vl-border-input: #2a3756; --vl-border-focus: #C19B65; --vl-border-focus-ring: rgba(193, 155, 101, 0.18); /* Brand (slightly lifted for contrast on dark) */ --vl-primary: #4a5b78; --vl-primary-hover: #5b6e8e; --vl-primary-soft: rgba(193, 155, 101, 0.08); --vl-gold: #C19B65; --vl-gold-hover: #d4ae78; /* Semantic (softened for dark backgrounds) */ --vl-danger: #f87171; --vl-danger-hover: #ef4444; --vl-danger-soft-bg: #3b0d12; --vl-success: #4ade80; --vl-success-hover: #22c55e; --vl-success-soft-bg: #052e16; --vl-warning: #fbbf24; --vl-info: #38bdf8; /* Misc */ --vl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --vl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40); --vl-shadow-lg: 0 12px 28px -8px rgba(0, 0, 0, 0.60), 0 4px 12px -4px rgba(0, 0, 0, 0.40); --vl-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.75); --vl-modal-backdrop: rgba(0, 0, 0, 0.70); --vl-scrollbar-thumb: #38476a; --vl-scrollbar-track: #1a2540; --vl-select-chevron: "%23cbd5e1"; /* Sidebar — a touch darker than app bg in dark mode so it still reads as a rail. */ --vl-sidebar-bg: #080d17; --vl-sidebar-fg: #e2e8f0; --vl-sidebar-fg-muted: #94a3b8; --vl-sidebar-fg-strong: #f8fafc; --vl-sidebar-border: rgba(193, 155, 101, 0.20); --vl-sidebar-btn-border: rgba(193, 155, 101, 0.10); --vl-sidebar-active-bg: #C19B65; --vl-sidebar-active-fg: #0b1320; } /* Theme switching is intentionally instant — applying a broad * `transition: background-color, color, border-color` to every element * would override per-component `transition: all` rules (e.g. .vl-btn * hover opacity), so we accept a one-frame flash on toggle in exchange * for not breaking existing micro-interactions. */ /* App background — flips with theme */ html[data-theme="dark"] body { background: var(--vl-bg-app) !important; color: var(--vl-text-primary); } /* ───────────────────────────────────────────────────────────────────────── * Button Base Styles * ───────────────────────────────────────────────────────────────────────── */ .vl-btn { border-radius: 4px; text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em; font-weight: 600; padding: 0.5rem 1rem; border: 1px solid; cursor: pointer; transition: all 0.2s ease; display: inline-block; text-align: center; } .vl-btn:hover { opacity: 0.9; } .vl-btn:active { opacity: 0.85; } /* Primary Button — themed via --vl-primary (flips automatically in dark). */ .vl-btn-primary { background: var(--vl-primary); color: var(--vl-text-on-accent); border-color: var(--vl-primary); } .vl-btn-primary:hover { background: var(--vl-primary-hover); border-color: var(--vl-primary-hover); } /* Danger Button — themed via --vl-danger */ .vl-btn-danger { background: var(--vl-danger); color: var(--vl-text-on-accent); border-color: var(--vl-danger); } .vl-btn-danger:hover { background: var(--vl-danger-hover); border-color: var(--vl-danger-hover); } /* Danger Alternative — darker red variant, inherits --vl-danger-hover */ .vl-btn-danger-alt { background: var(--vl-danger-hover); color: var(--vl-text-on-accent); border-color: var(--vl-danger-hover); } .vl-btn-danger-alt:hover { background: var(--vl-danger); border-color: var(--vl-danger); } /* Success Button — themed via --vl-success */ .vl-btn-success { background: var(--vl-success); color: var(--vl-text-on-accent); border-color: var(--vl-success); } .vl-btn-success:hover { background: var(--vl-success-hover); border-color: var(--vl-success-hover); } /* Secondary Button — slate, themed via text-tertiary/secondary pair */ .vl-btn-secondary { background: var(--vl-text-tertiary); color: var(--vl-text-on-accent); border-color: var(--vl-text-tertiary); } .vl-btn-secondary:hover { background: var(--vl-text-secondary); border-color: var(--vl-text-secondary); } /* Gold/Accent Button - #C19B65 */ .vl-btn-gold { background: #C19B65; color: #fff; border-color: #C19B65; } .vl-btn-gold:hover { background: #b88a52; border-color: #b88a52; } /* Gold Outline Button - Transparent with gold border */ .vl-btn-gold-outline { background: transparent; color: #C19B65; border-color: #C19B65; } .vl-btn-gold-outline:hover { background: #C19B6510; } /* Primary Outline Button - Transparent with navy border */ .vl-btn-primary-outline { background: transparent; color: var(--vl-primary); border-color: var(--vl-primary); } [data-theme="dark"] .vl-btn-primary-outline { color: #C19B65; border-color: #C19B65; } .vl-btn-primary-outline:hover { background: var(--vl-primary-soft); } /* Secondary Outline Button - Transparent with gray border */ .vl-btn-secondary-outline { background: transparent; color: #808284; border-color: #808284; } .vl-btn-secondary-outline:hover { background: #80828410; } [data-theme="dark"] .vl-btn-secondary-outline { color: var(--vl-text-secondary); border-color: var(--vl-border-strong); } /* Dark Blue Button - #0c4a6e */ .vl-btn-dark-blue { background: #0c4a6e; color: #f8fafc; border-color: #0c4a6e; } .vl-btn-dark-blue:hover { background: #082f47; border-color: #082f47; } /* Slate Button - #475569 */ .vl-btn-slate { background: #475569; color: #f8fafc; border-color: #475569; } .vl-btn-slate:hover { background: #334155; border-color: #334155; } /* Small Button Variant */ .vl-btn-sm { font-size: 11px; padding: 2px 10px; border-radius: 4px; } /* Large Button Variant */ .vl-btn-lg { font-size: 14px; padding: 0.75rem 1.5rem; } /* Block Button - Full Width */ .vl-btn-block { width: 100%; display: block; } /* ───────────────────────────────────────────────────────────────────────── * Input / Select / Label * ───────────────────────────────────────────────────────────────────────── */ .vl-input { border: 1px solid var(--vl-border-input); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; background-color: var(--vl-bg-input); color: var(--vl-text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: inherit; } .vl-input:focus { outline: none; border-color: var(--vl-border-focus); box-shadow: 0 0 0 3px var(--vl-border-focus-ring); } .vl-input::placeholder { color: var(--vl-text-muted); } .vl-input:disabled { background-color: var(--vl-bg-muted); color: var(--vl-text-disabled); cursor: not-allowed; } .vl-select { border: 1px solid var(--vl-border-input); border-radius: 8px; padding: 0.75rem 1rem; font-size: 14px; background-color: var(--vl-bg-input); color: var(--vl-text-primary); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%232F3A4E' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 14l-7 7m0 0l-7-7m7 7V3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.5em 1.5em; padding-right: 2.5rem; } [data-theme="dark"] .vl-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23cbd5e1' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 14l-7 7m0 0l-7-7m7 7V3'/%3E%3C/svg%3E"); } .vl-select:focus { outline: none; border-color: var(--vl-border-focus); box-shadow: 0 0 0 3px var(--vl-border-focus-ring); } .vl-select:disabled { background-color: var(--vl-bg-muted); color: var(--vl-text-disabled); cursor: not-allowed; } .vl-label { display: block; font-size: 14px; font-weight: 500; color: var(--vl-text-secondary); margin-bottom: 0.375rem; } .vl-label-sm { font-size: 12px; color: var(--vl-text-tertiary); } /* 2026-04-17 — Muted styling for fields that the system maintains * automatically (currently just the Stage dropdown, which is date-driven * via stage_engine). Still editable, just visually down-weighted so admins * know at a glance that it's not expected input. No helper text — per * product direction we don't want extra messaging in the form. */ .vl-auto-field { background-color: var(--vl-bg-subtle, #f8fafc); color: var(--vl-text-secondary, #475569); font-style: italic; } .vl-auto-field:focus { font-style: normal; } /* ───────────────────────────────────────────────────────────────────────── * Card * ───────────────────────────────────────────────────────────────────────── */ .vl-card { background: var(--vl-bg-card); border: 1px solid var(--vl-border); border-radius: 16px; padding: 1.5rem; box-shadow: var(--vl-shadow-sm); transition: box-shadow 0.2s ease; } .vl-card:hover { box-shadow: var(--vl-shadow-md); } .vl-card-header { padding: 0 0 1rem 0; border-bottom: 1px solid var(--vl-border); margin-bottom: 1rem; } .vl-card-title { font-size: 16px; font-weight: 700; color: var(--vl-text-primary); margin: 0; } [data-theme="light"] .vl-card-title, :root:not([data-theme]) .vl-card-title { color: #2F3A4E; } .vl-card-subtitle { font-size: 13px; color: var(--vl-text-tertiary); margin-top: 0.25rem; } .vl-card-body { padding: 0; } .vl-card-footer { padding-top: 1rem; border-top: 1px solid var(--vl-border); margin-top: 1rem; } .vl-form-group { margin-bottom: 1.5rem; } .vl-form-group:last-child { margin-bottom: 0; } /* Field Error / Success */ .vl-input.vl-error, .vl-select.vl-error { border-color: var(--vl-danger); background-color: var(--vl-danger-soft-bg); } .vl-input.vl-error:focus, .vl-select.vl-error:focus { box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.1); } .vl-error-text { font-size: 12px; color: var(--vl-danger); margin-top: 0.375rem; } .vl-input.vl-success, .vl-select.vl-success { border-color: var(--vl-success); background-color: var(--vl-success-soft-bg); } .vl-input.vl-success:focus, .vl-select.vl-success:focus { box-shadow: 0 0 0 3px rgba(22, 101, 52, 0.1); } .vl-success-text { font-size: 12px; color: var(--vl-success); margin-top: 0.375rem; } /* ───────────────────────────────────────────────────────────────────────── * Badges * ───────────────────────────────────────────────────────────────────────── */ .vl-badge { display: inline-block; padding: 0.25rem 0.625rem; background: var(--vl-bg-muted); color: var(--vl-text-secondary); border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .vl-badge-primary { background: #2F3A4E; color: #f8fafc; } .vl-badge-danger { background: #991b1b; color: #fff; } .vl-badge-success { background: #166534; color: #fff; } .vl-badge-gold { background: #C19B65; color: #fff; } /* Text Helper Styles */ .vl-text-muted { color: var(--vl-text-tertiary); font-size: 13px; } .vl-text-small { font-size: 12px; } .vl-text-error { color: var(--vl-danger); } .vl-text-success { color: var(--vl-success); } .vl-text-warning { color: var(--vl-warning); } /* Disabled */ .vl-btn:disabled, .vl-input:disabled, .vl-select:disabled { opacity: 0.6; cursor: not-allowed; } /* Responsive */ @media (max-width: 640px) { .vl-btn { padding: 0.5rem 0.75rem; font-size: 11px; } .vl-btn-lg { padding: 0.625rem 1rem; font-size: 13px; } .vl-input, .vl-select { font-size: 16px; /* Prevents zoom on iOS */ } .vl-card { padding: 1rem; } } /* ─────────────────────────────────────────────────────────────────────── * Phase 7C — VLSelect (custom cross-platform dropdown) * ─────────────────────────────────────────────────────────────────────── */ .vlx-select { position: relative; display: inline-block; min-width: 140px; font-family: inherit; } .vlx-select-trigger { width: 100%; display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--vl-bg-input); border: 1px solid var(--vl-border-strong); border-radius: 8px; font-size: 14px; color: var(--vl-text-primary); cursor: pointer; text-align: left; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; font-family: inherit; min-height: 38px; line-height: 1.2; } .vlx-select-trigger:hover { border-color: var(--vl-text-tertiary); background: var(--vl-bg-hover); } .vlx-select.is-open .vlx-select-trigger, .vlx-select-trigger:focus { outline: none; border-color: var(--vl-border-focus); box-shadow: 0 0 0 3px var(--vl-border-focus-ring); } .vlx-select-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .vlx-select-label.is-placeholder { color: var(--vl-text-muted); } .vlx-select-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: var(--vl-text-tertiary); transition: transform 0.15s ease; } .vlx-select.is-open .vlx-select-chevron { transform: rotate(180deg); } .vlx-select-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 1000; background: var(--vl-bg-elevated); border: 1px solid var(--vl-border-strong); border-radius: 10px; box-shadow: var(--vl-shadow-lg); min-width: 100%; max-width: 320px; overflow: hidden; } .vlx-select-dropdown.hidden { display: none; } .vlx-select-search-wrap { padding: 8px; border-bottom: 1px solid var(--vl-border); background: var(--vl-bg-secondary); } .vlx-select-search { width: 100%; padding: 6px 10px; border: 1px solid var(--vl-border-strong); border-radius: 6px; font-size: 13px; font-family: inherit; background: var(--vl-bg-input); color: var(--vl-text-primary); } .vlx-select-search:focus { outline: none; border-color: var(--vl-border-focus); box-shadow: 0 0 0 2px var(--vl-border-focus-ring); } .vlx-select-options { max-height: 260px; overflow-y: auto; padding: 4px 0; } .vlx-select-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 8px 12px; font-size: 14px; color: var(--vl-text-primary); cursor: pointer; transition: background 0.1s ease; user-select: none; } .vlx-select-option:hover, .vlx-select-option.vlx-select-active { background: var(--vl-bg-option-hover); } .vlx-select-option.is-selected { background: var(--vl-bg-selected); font-weight: 600; color: var(--vl-text-link); } [data-theme="dark"] .vlx-select-option.is-selected { color: #f1f5f9; } .vlx-select-option-main { flex: 1 1 auto; min-width: 0; } .vlx-select-option-sub { font-size: 11px; color: var(--vl-text-tertiary); margin-top: 2px; } .vlx-select-check { width: 16px; height: 16px; flex: 0 0 auto; color: var(--vl-text-link); } .vlx-select-empty { padding: 12px; text-align: center; font-size: 13px; color: var(--vl-text-muted); } /* ─────────────────────────────────────────────────────────────────────── * Phase 7A/7B — Saved Search bar + Export modal * ─────────────────────────────────────────────────────────────────────── */ .vl-saved-search-bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; background: var(--vl-bg-secondary); border: 1px solid var(--vl-border); border-radius: 10px; margin-bottom: 0.75rem; } .vl-saved-search-bar .vl-label { font-size: 11px; font-weight: 600; color: var(--vl-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.25rem; } .vl-modal-backdrop { position: fixed; /* 2026-05-12 — explicit edge anchoring + viewport-unit sizing so the backdrop ALWAYS covers the full visible viewport regardless of where it lands in the DOM tree. Previously `inset: 0` alone was leaving a white strip on the right edge on wide displays — likely caused by an ancestor combination (overflow-hidden on `.app-modern`, `
`'s `lg:ml-[260px]` left margin, and the transactions view's `overflow-x:hidden` wrapper) interacting with how Chromium resolves `inset:0` on `position:fixed` when scrollbars are present. Using top/left/right/bottom: 0 PLUS `width:100vw; height:100vh` makes the layout unambiguous. `min-width/height` are belt-and-suspenders for the same reason. */ top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; min-width: 100vw; min-height: 100vh; background: var(--vl-modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; } .vl-modal { background: var(--vl-bg-elevated); border-radius: 14px; box-shadow: var(--vl-shadow-xl); max-width: 640px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .vl-modal-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--vl-border); display: flex; align-items: center; justify-content: space-between; } .vl-modal-title { font-weight: 700; font-size: 16px; color: var(--vl-text-strong); } .vl-modal-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1 1 auto; color: var(--vl-text-primary); } .vl-modal-footer { padding: 0.75rem 1.25rem; border-top: 1px solid var(--vl-border); display: flex; justify-content: flex-end; gap: 0.5rem; background: var(--vl-bg-secondary); } .vl-export-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } @media (min-width: 640px) { .vl-export-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .vl-export-cols label { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; color: var(--vl-text-primary); padding: 0.25rem 0.5rem; border-radius: 6px; cursor: pointer; } .vl-export-cols label:hover { background: var(--vl-bg-muted); } /* ─────────────────────────────────────────────────────────────────────── * Phase 8 — Theme Toggle (segmented control) * ─────────────────────────────────────────────────────────────────────── */ .vl-theme-toggle { display: inline-flex; align-items: center; gap: 0; padding: 3px; background: var(--vl-bg-tertiary); border: 1px solid var(--vl-border); border-radius: 9999px; } .vl-theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 5px 10px; border: none; background: transparent; color: var(--vl-text-tertiary); border-radius: 9999px; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; transition: background 0.15s ease, color 0.15s ease; font-family: inherit; } .vl-theme-toggle-btn:hover { color: var(--vl-text-primary); } .vl-theme-toggle-btn.is-active { background: var(--vl-bg-card); color: var(--vl-text-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } [data-theme="dark"] .vl-theme-toggle-btn.is-active { background: var(--vl-gold); color: #1e2533; } .vl-theme-toggle-btn svg { width: 14px; height: 14px; } /* Compact icon-only toggle for nav bar */ .vl-theme-iconbtn { background: none; border: none; cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; color: #c8d0dc; } .vl-theme-iconbtn:hover { color: var(--vl-gold); } /* ─────────────────────────────────────────────────────────────────────── * Phase 8 — Dark Mode Tailwind Utility Overrides * The app uses Tailwind v3 from a CDN with thousands of inline utility * classes. Rather than rewriting every component, we override the most * common surface/text/border utilities under [data-theme="dark"]. These * rules win against Tailwind's non-important rules through specificity. * ─────────────────────────────────────────────────────────────────────── */ /* ── Surface backgrounds ───────────────────────────────────────────────── */ html[data-theme="dark"] .bg-white { background-color: var(--vl-bg-card) !important; } html[data-theme="dark"] .bg-slate-50 { background-color: var(--vl-bg-secondary) !important; } html[data-theme="dark"] .bg-slate-100 { background-color: var(--vl-bg-tertiary) !important; } html[data-theme="dark"] .bg-slate-200 { background-color: var(--vl-bg-muted) !important; } html[data-theme="dark"] .bg-gray-50 { background-color: var(--vl-bg-secondary) !important; } html[data-theme="dark"] .bg-gray-100 { background-color: var(--vl-bg-tertiary) !important; } html[data-theme="dark"] .bg-gray-200 { background-color: var(--vl-bg-muted) !important; } /* Soft semantic backgrounds → muted dark equivalents (preserve hue) */ html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.10) !important; } html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; } html[data-theme="dark"] .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.10) !important; } html[data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; } html[data-theme="dark"] .bg-rose-50 { background-color: rgba(244, 63, 94, 0.10) !important; } html[data-theme="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.18) !important; } html[data-theme="dark"] .bg-amber-50 { background-color: rgba(245, 158, 11, 0.10) !important; } html[data-theme="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.18) !important; } html[data-theme="dark"] .bg-sky-50 { background-color: rgba(14, 165, 233, 0.10) !important; } html[data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; } html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.10) !important; } html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; } /* ── Text colors ──────────────────────────────────────────────────────── */ html[data-theme="dark"] .text-slate-900 { color: var(--vl-text-strong) !important; } html[data-theme="dark"] .text-slate-800 { color: var(--vl-text-primary) !important; } html[data-theme="dark"] .text-slate-700 { color: var(--vl-text-secondary) !important; } html[data-theme="dark"] .text-slate-600 { color: var(--vl-text-secondary) !important; } html[data-theme="dark"] .text-slate-500 { color: var(--vl-text-tertiary) !important; } html[data-theme="dark"] .text-slate-400 { color: var(--vl-text-muted) !important; } html[data-theme="dark"] .text-gray-900 { color: var(--vl-text-strong) !important; } html[data-theme="dark"] .text-gray-800 { color: var(--vl-text-primary) !important; } html[data-theme="dark"] .text-gray-700 { color: var(--vl-text-secondary) !important; } html[data-theme="dark"] .text-gray-600 { color: var(--vl-text-secondary) !important; } html[data-theme="dark"] .text-gray-500 { color: var(--vl-text-tertiary) !important; } /* Brand text — keep golfi-primary readable on dark */ html[data-theme="dark"] .text-golfi\.primary { color: var(--vl-gold) !important; } /* Soft semantic text — lift to lighter shades */ html[data-theme="dark"] .text-emerald-800 { color: #6ee7b7 !important; } html[data-theme="dark"] .text-emerald-700 { color: #6ee7b7 !important; } html[data-theme="dark"] .text-rose-800 { color: #fca5a5 !important; } html[data-theme="dark"] .text-rose-700 { color: #fca5a5 !important; } html[data-theme="dark"] .text-amber-800 { color: #fcd34d !important; } html[data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } html[data-theme="dark"] .text-blue-800 { color: #93c5fd !important; } html[data-theme="dark"] .text-blue-700 { color: #93c5fd !important; } html[data-theme="dark"] .text-sky-800 { color: #7dd3fc !important; } html[data-theme="dark"] .text-sky-700 { color: #7dd3fc !important; } html[data-theme="dark"] .text-indigo-800 { color: #a5b4fc !important; } html[data-theme="dark"] .text-indigo-700 { color: #a5b4fc !important; } /* ── Borders ──────────────────────────────────────────────────────────── */ /* Tailwind's bare `.border` defaults to gray-200 — override under dark */ html[data-theme="dark"] .border { border-color: var(--vl-border) !important; } html[data-theme="dark"] .border-t { border-top-color: var(--vl-border) !important; } html[data-theme="dark"] .border-b { border-bottom-color: var(--vl-border) !important; } html[data-theme="dark"] .border-l { border-left-color: var(--vl-border) !important; } html[data-theme="dark"] .border-r { border-right-color: var(--vl-border) !important; } html[data-theme="dark"] .border-slate-100 { border-color: var(--vl-border-subtle) !important; } html[data-theme="dark"] .border-slate-200 { border-color: var(--vl-border) !important; } html[data-theme="dark"] .border-slate-300 { border-color: var(--vl-border-strong) !important; } html[data-theme="dark"] .border-gray-200 { border-color: var(--vl-border) !important; } html[data-theme="dark"] .border-gray-300 { border-color: var(--vl-border-strong) !important; } html[data-theme="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.30) !important; } html[data-theme="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, 0.30) !important; } html[data-theme="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.30) !important; } html[data-theme="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.30) !important; } /* Divide colors */ html[data-theme="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--vl-border) !important; } html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--vl-border) !important; } /* Placeholder color */ html[data-theme="dark"] ::placeholder { color: var(--vl-text-muted) !important; } /* Hover backgrounds (subtle slate hover patterns) */ html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--vl-bg-hover) !important; } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--vl-bg-tertiary) !important; } html[data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--vl-bg-hover) !important; } html[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--vl-bg-tertiary) !important; } /* Bare inputs/textareas/selects without vl-input class — make legible on dark */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]), html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--vl-bg-input); color: var(--vl-text-primary); border-color: var(--vl-border-input); } /* App-shell helpers */ html[data-theme="dark"] .vl-grid-bg { opacity: 0.25 !important; background: radial-gradient(circle at 15% 15%, rgba(193,155,101,.12), transparent 35%), radial-gradient(circle at 85% 5%, rgba(47,58,78,.20), transparent 35%), linear-gradient(180deg, rgba(15,23,42,.92), rgba(11,19,32,.6)) !important; } /* Theme-aware scrollbars — flip with --vl-scrollbar-* variables. * Firefox uses `scrollbar-color`; WebKit (Chrome/Safari) uses the pseudo-els. * P2-21: previously dark-only, so dropdowns with scroll in light mode kept * a browser-default scrollbar that looked grey-on-white. */ * { scrollbar-width: thin; scrollbar-color: var(--vl-scrollbar-thumb) var(--vl-scrollbar-track); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--vl-scrollbar-thumb); border-radius: 5px; } ::-webkit-scrollbar-track { background: var(--vl-scrollbar-track); } /* Prevent flashing white before app shell paints */ html[data-theme="dark"] #vl-boot-splash { background: var(--vl-bg-app); } html[data-theme="dark"] #vl-boot-splash p { color: var(--vl-text-tertiary) !important; } /* Global spinner — used inside the app shell AND on the pre-auth login page, * so the definition lives in the global stylesheet rather than the app-shell *