/** * VWB Central Theme System * Two themes controlled by [data-theme] on : * data-theme="dark" → Default VWB dark theme (bark, amber, cream) * data-theme="light" → Google Suite light theme (white, blue, clean) * * Every page links this file. Theme is set by vwb-theme.js from localStorage. * Hub page (skibasehub.php) provides the switcher UI. */ /* ───────────────────────────────────────────── DARK THEME (default VWB) Overrides :root variables already in each page. Since this loads AFTER the inline styles, it wins via specificity when data-theme="dark". ───────────────────────────────────────────── */ [data-theme="dark"], :root { /* Core palette */ --soil: #1a1208; --bark: #2e1f0e; --mid: #3d2a14; --deep: #140d0d; --amber: #e8a020; --gold: #945e00; --cream: #f5ede0; --dust: #f8efe6; --parchment: #ede0ca; --red: #c0392b; --green: #27ae60; --blue: #2980b9; --teal: #1a8a80; --purple: #7d3fbd; --orange: #d35400; --pine: #1e3320; --moss: #2d5a27; --sage: #5a7a4a; --sky-blue: #7bbdd4; --trail-red: #9b3a2a; --white: #faf7f2; --mono: 'DM Mono', 'Courier New', monospace; /* Semantic surface tokens */ --t-bg: var(--soil); --t-surface: var(--bark); --t-surface-2: var(--mid); --t-border: rgba(245,237,224,.08); --t-border-accent:rgba(232,160,32,.25); --t-text: var(--cream); --t-text-muted: rgba(245,237,224,.45); --t-text-faint: rgba(245,237,224,.25); --t-accent: var(--amber); --t-accent-hover: var(--dust); --t-accent-text: var(--soil); --t-input-bg: rgba(255,255,255,.06); --t-input-border: rgba(245,237,224,.14); --t-hover-row: rgba(232,160,32,.06); --t-header-bg: var(--bark); --t-header-border:var(--amber); --t-card-bg: var(--bark); --t-table-head: rgba(232,160,32,.10); --t-table-border: rgba(232,160,32,.20); --t-success-bg: rgba(39,174,96,.15); --t-success-text: #7de8a7; --t-error-bg: rgba(192,57,43,.15); --t-error-text: #ff8a7a; --t-warn-bg: rgba(232,160,32,.12); --t-warn-text: var(--amber); --t-shadow: rgba(0,0,0,.4); --t-radius: .35rem; --t-radius-card: 12px; /* Theme indicator */ --t-name: "dark"; } /* ───────────────────────────────────────────── LIGHT THEME (Google Suite / G-Workspace) Clean white, Google Blue accent, Roboto feel. No layout changes — CSS variables only. ───────────────────────────────────────────── */ [data-theme="light"] { /* Core palette → Google colours */ --soil: #f8f9fa; /* page bg */ --bark: #ffffff; /* card/surface bg */ --mid: #f1f3f4; /* secondary surface */ --deep: #e8eaed; /* tertiary */ --amber: #1a73e8; /* Google Blue (primary accent) */ --gold: #1557b0; /* darker blue */ --cream: #202124; /* primary text */ --dust: #e8f0fe; /* blue tint hover */ --parchment: #f8f9fa; --red: #d93025; /* Google Red */ --green: #188038; /* Google Green */ --blue: #1a73e8; --teal: #007b83; --purple: #9334e6; --orange: #e37400; --pine: #137333; --moss: #1e8e3e; --sage: #34a853; /* Google Green light */ --sky-blue: #4285f4; --trail-red: #c5221f; --white: #ffffff; --mono: 'Google Sans Mono', 'Roboto Mono', monospace; /* Semantic surface tokens → light equivalents */ --t-bg: #f8f9fa; --t-surface: #ffffff; --t-surface-2: #f1f3f4; --t-border: #e0e0e0; --t-border-accent:#1a73e8; --t-text: #202124; --t-text-muted: #5f6368; --t-text-faint: #9aa0a6; --t-accent: #1a73e8; --t-accent-hover: #e8f0fe; --t-accent-text: #ffffff; --t-input-bg: #ffffff; --t-input-border: #dadce0; --t-hover-row: #f8f9fa; --t-header-bg: #ffffff; --t-header-border:#1a73e8; --t-card-bg: #ffffff; --t-table-head: #f1f3f4; --t-table-border: #e0e0e0; --t-success-bg: #e6f4ea; --t-success-text: #137333; --t-error-bg: #fce8e6; --t-error-text: #c5221f; --t-warn-bg: #fef7e0; --t-warn-text: #e37400; --t-shadow: rgba(0,0,0,.12); --t-radius: .35rem; --t-radius-card: 8px; --t-name: "light"; } /* ───────────────────────────────────────────── GOOGLE FONT IMPORT — light theme Only loads the Roboto family for light mode ───────────────────────────────────────────── */ [data-theme="light"] body { font-family: 'Google Sans', 'Roboto', system-ui, sans-serif; letter-spacing: .01em; } /* ───────────────────────────────────────────── LIGHT THEME OVERRIDES These override the dark inline styles using higher specificity on [data-theme="light"]. Layout, structure, and classes are untouched. ───────────────────────────────────────────── */ /* Body & page background */ [data-theme="light"] body { background: var(--t-bg) !important; color: var(--t-text) !important; } [data-theme="light"] body::before { opacity: 0 !important; } /* remove grain */ /* Header */ [data-theme="light"] .hdr, [data-theme="light"] nav { background: var(--t-header-bg) !important; border-bottom-color: var(--t-header-border) !important; box-shadow: 0 1px 3px var(--t-shadow) !important; } [data-theme="light"] .hdr-title, [data-theme="light"] .hub-name, [data-theme="light"] .nav-logo-text .bottom { color: var(--t-text) !important; } [data-theme="light"] .hdr-sub, [data-theme="light"] .hub-tagline, [data-theme="light"] .nav-logo-text .top { color: var(--t-text-muted) !important; } [data-theme="light"] .hdr-icon, [data-theme="light"] .hub-logo, [data-theme="light"] .login-logo { background: var(--t-accent) !important; box-shadow: 0 2px 8px rgba(26,115,232,.3) !important; } [data-theme="light"] .hdr-btn, [data-theme="light"] .hub-logout, [data-theme="light"] .logout-a { color: var(--t-text-muted) !important; border-color: var(--t-border) !important; } [data-theme="light"] .hdr-btn:hover, [data-theme="light"] .hub-logout:hover, [data-theme="light"] .logout-a:hover { background: var(--t-hover-row) !important; color: var(--t-text) !important; } [data-theme="light"] .hub-clock, [data-theme="light"] .hdr-clock { color: var(--t-accent) !important; } [data-theme="light"] .hdr-staff, [data-theme="light"] .hub-staff { color: var(--t-text-muted) !important; } /* Sidebar nav */ [data-theme="light"] .sidenav { background: #ffffff !important; border-right-color: var(--t-border) !important; } [data-theme="light"] .sidenav a, [data-theme="light"] .sidenav button.nav-btn { color: var(--t-text-muted) !important; } [data-theme="light"] .sidenav a:hover, [data-theme="light"] .sidenav button.nav-btn:hover { background: var(--t-hover-row) !important; color: var(--t-text) !important; } [data-theme="light"] .sidenav a.active, [data-theme="light"] .sidenav button.nav-btn.active { background: #e8f0fe !important; color: var(--t-accent) !important; border-left-color: var(--t-accent) !important; } [data-theme="light"] .sidenav-section { color: var(--t-text-faint) !important; } /* Main content area */ [data-theme="light"] .main { background: var(--t-bg) !important; } /* Cards */ [data-theme="light"] .card, [data-theme="light"] .tool-card, [data-theme="light"] .proj-card, [data-theme="light"] .stat-card, [data-theme="light"] .res-card, [data-theme="light"] .stat-pill, [data-theme="light"] .res-modal, [data-theme="light"] .modal, [data-theme="light"] .login-box, [data-theme="light"] .summary-card { background: var(--t-card-bg) !important; border-color: var(--t-border) !important; box-shadow: 0 1px 4px var(--t-shadow) !important; } [data-theme="light"] .card-hdr, [data-theme="light"] .modal-hdr, [data-theme="light"] .res-modal-hdr, [data-theme="light"] .res-card-top, [data-theme="light"] .res-card-actions, [data-theme="light"] .card-bot, [data-theme="light"] .proj-card-top, [data-theme="light"] .proj-card-actions { background: var(--t-surface-2) !important; border-color: var(--t-border) !important; } [data-theme="light"] .card-title, [data-theme="light"] .modal-title, [data-theme="light"] .panel-title, [data-theme="light"] .card-name, [data-theme="light"] .res-name, [data-theme="light"] .cat-name-cell, [data-theme="light"] .proj-card-title { color: var(--t-text) !important; } [data-theme="light"] .card-sub, [data-theme="light"] .card-desc, [data-theme="light"] .card-meta, [data-theme="light"] .proj-card-desc, [data-theme="light"] .res-contact, [data-theme="light"] .panel-sub { color: var(--t-text-muted) !important; } /* Stat numbers */ [data-theme="light"] .stat-pill-num, [data-theme="light"] .stat-num, [data-theme="light"] .stat-amber { color: var(--t-accent) !important; } [data-theme="light"] .stat-pill-label, [data-theme="light"] .stat-label { color: var(--t-text-muted) !important; } /* Tables */ [data-theme="light"] table { color: var(--t-text) !important; } [data-theme="light"] thead th { background: var(--t-table-head) !important; color: var(--t-text-muted) !important; border-bottom-color: var(--t-table-border) !important; } [data-theme="light"] tbody td { color: var(--t-text) !important; border-bottom-color: var(--t-border) !important; } [data-theme="light"] tbody tr:hover td { background: var(--t-hover-row) !important; } [data-theme="light"] .td-name { color: var(--t-text) !important; } [data-theme="light"] .td-id { color: var(--t-accent) !important; } [data-theme="light"] .td-mono, [data-theme="light"] .td-date { color: var(--t-text-muted) !important; } [data-theme="light"] .td-muted { color: var(--t-text-faint) !important; } /* Buttons */ [data-theme="light"] .btn-amber, [data-theme="light"] .btn-login, [data-theme="light"] .btn-login:hover, [data-theme="light"] .rbtn-amber, [data-theme="light"] .btn-amber:hover { background: var(--t-accent) !important; color: #ffffff !important; box-shadow: 0 1px 3px rgba(26,115,232,.3) !important; } [data-theme="light"] .btn-outline, [data-theme="light"] .rbtn-outline, [data-theme="light"] .btn-ghost { background: #ffffff !important; border-color: var(--t-border) !important; color: var(--t-accent) !important; } [data-theme="light"] .btn-outline:hover, [data-theme="light"] .rbtn-outline:hover, [data-theme="light"] .btn-ghost:hover { background: var(--t-hover-row) !important; border-color: var(--t-accent) !important; } [data-theme="light"] .btn-green, [data-theme="light"] .rbtn-green { background: var(--green) !important; color: #fff !important; } [data-theme="light"] .btn-red, [data-theme="light"] .rbtn-red { background: var(--red) !important; color: #fff !important; } [data-theme="light"] .btn-green { background: var(--green) !important; } /* Inputs */ [data-theme="light"] input[type=text], [data-theme="light"] input[type=email], [data-theme="light"] input[type=tel], [data-theme="light"] input[type=date], [data-theme="light"] input[type=number], [data-theme="light"] input[type=password], [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .sql-ed, [data-theme="light"] .price-inp, [data-theme="light"] .search-inp, [data-theme="light"] .rqty-wrap, [data-theme="light"] .qty-wrap { background: var(--t-input-bg) !important; border-color: var(--t-input-border) !important; color: var(--t-text) !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus, [data-theme="light"] .price-inp:focus, [data-theme="light"] .search-inp:focus { border-color: var(--t-accent) !important; box-shadow: 0 0 0 2px rgba(26,115,232,.2) !important; } [data-theme="light"] label, [data-theme="light"] .lbl, [data-theme="light"] .rf label, [data-theme="light"] .fg > label { color: var(--t-text-muted) !important; } [data-theme="light"] select option { background: #ffffff !important; color: var(--t-text) !important; } /* Messages */ [data-theme="light"] .msg-success, [data-theme="light"] .msg-bar.success { background: var(--t-success-bg) !important; color: var(--t-success-text) !important; border-color: var(--green) !important; } [data-theme="light"] .msg-error, [data-theme="light"] .msg-bar.error { background: var(--t-error-bg) !important; color: var(--t-error-text) !important; border-color: var(--red) !important; } [data-theme="light"] .msg-warn, [data-theme="light"] .msg-bar.warn { background: var(--t-warn-bg) !important; color: var(--t-warn-text) !important; border-color: var(--orange) !important; } [data-theme="light"] .msg-info { background: #e8f0fe !important; color: #1a73e8 !important; border-color: #1a73e8 !important; } /* Badges */ [data-theme="light"] .badge-pending { background: #fef7e0 !important; color: #e37400 !important; } [data-theme="light"] .badge-confirmed, [data-theme="light"] .badge-checked_in, [data-theme="light"] .badge-ok { background: #e6f4ea !important; color: #137333 !important; } [data-theme="light"] .badge-cancelled, [data-theme="light"] .badge-fail, [data-theme="light"] .badge-overdue { background: #fce8e6 !important; color: #c5221f !important; } [data-theme="light"] .badge-inactive { background: #f1f3f4 !important; color: #80868b !important; } [data-theme="light"] .badge-checked_out{ background: #e8f0fe !important; color: #1a73e8 !important; } [data-theme="light"] .badge-active { background: #e6f4ea !important; color: #137333 !important; } /* Status dots */ [data-theme="light"] .conn-dot.ok { box-shadow: 0 0 4px rgba(24,128,56,.4) !important; } [data-theme="light"] .conn-dot.fail { box-shadow: 0 0 4px rgba(201,48,37,.4) !important; } /* Section headers */ [data-theme="light"] .sec-title, [data-theme="light"] .section-hdr, [data-theme="light"] .card-section-title, [data-theme="light"] .res-card-title { color: var(--t-text-faint) !important; } [data-theme="light"] .sec-title::after, [data-theme="light"] .section-hdr::after { background: var(--t-border) !important; } /* Project cards */ [data-theme="light"] .proj-meta-label { color: var(--t-text-faint) !important; } [data-theme="light"] .proj-meta-value { color: var(--t-text-muted) !important; } [data-theme="light"] .proj-dot { background: var(--t-accent) !important; } [data-theme="light"] .proj-dot.inactive { background: var(--t-text-faint) !important; } /* Modal backdrop */ [data-theme="light"] .modal-backdrop, [data-theme="light"] .res-backdrop { background: rgba(0,0,0,.5) !important; backdrop-filter: blur(4px) !important; } [data-theme="light"] .modal-close, [data-theme="light"] .res-modal-close { background: var(--t-surface-2) !important; color: var(--t-text-muted) !important; border-color: var(--t-border) !important; } /* SQL editor */ [data-theme="light"] .sql-ed { background: #f8f9fa !important; color: #202124 !important; border-color: var(--t-border) !important; } [data-theme="light"] .sql-result { background: #f1f3f4 !important; color: #137333 !important; border-color: var(--t-border) !important; } /* Login page */ [data-theme="light"] .login-wrap { background: var(--t-bg) !important; } [data-theme="light"] .login-title { color: var(--t-accent) !important; } [data-theme="light"] .login-sub { color: var(--t-text-muted) !important; } [data-theme="light"] .login-err { background: var(--t-error-bg) !important; color: var(--t-error-text) !important; border-color: var(--red) !important; } [data-theme="light"] .login-v { color: var(--t-text-faint) !important; } /* Hub-specific */ [data-theme="light"] .hub-wrap { } [data-theme="light"] .status-pill { background: #ffffff !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; } [data-theme="light"] .status-val { color: var(--t-text) !important; } [data-theme="light"] .quick-btn { background: #ffffff !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; } [data-theme="light"] .quick-btn:hover { background: var(--t-hover-row) !important; color: var(--t-text) !important; border-color: var(--t-accent) !important; } [data-theme="light"] .hub-footer { color: var(--t-text-faint) !important; border-top-color: var(--t-border) !important; } [data-theme="light"] .card-stat { background: var(--t-surface-2) !important; color: var(--t-text) !important; } [data-theme="light"] .card-stat.ok { background: #e6f4ea !important; color: #137333 !important; } [data-theme="light"] .card-stat.warn { background: #fce8e6 !important; color: #c5221f !important; } /* Tool card accents → Google Blue in light */ [data-theme="light"] .c-amber .card-accent { background: #1a73e8 !important; } [data-theme="light"] .c-green .card-accent { background: #188038 !important; } [data-theme="light"] .c-blue .card-accent { background: #4285f4 !important; } [data-theme="light"] .c-teal .card-accent { background: #007b83 !important; } [data-theme="light"] .c-purple.card-accent { background: #9334e6 !important; } [data-theme="light"] .c-orange.card-accent { background: #e37400 !important; } [data-theme="light"] .c-red .card-accent { background: #d93025 !important; } [data-theme="light"] .c-amber .card-link-label, [data-theme="light"] .c-amber .card-arrow { color: #1a73e8 !important; } [data-theme="light"] .c-green .card-link-label, [data-theme="light"] .c-green .card-arrow { color: #188038 !important; } /* Pager */ [data-theme="light"] .pager a, [data-theme="light"] .pager span { background: #ffffff !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; } [data-theme="light"] .pager a:hover { background: #e8f0fe !important; color: var(--t-accent) !important; } [data-theme="light"] .pager .cur { background: #e8f0fe !important; color: var(--t-accent) !important; border-color: var(--t-accent) !important; } /* Filter bar */ [data-theme="light"] .filter-bar { } [data-theme="light"] .view-tab { background: #ffffff !important; border-color: var(--t-border) !important; color: var(--t-text-muted) !important; } [data-theme="light"] .view-tab:hover { background: #e8f0fe !important; color: var(--t-accent) !important; } [data-theme="light"] .view-tab.active { background: #e8f0fe !important; color: var(--t-accent) !important; border-color: var(--t-accent) !important; } [data-theme="light"] .view-tab.danger-tab { color: var(--red) !important; border-color: rgba(217,48,37,.25) !important; } [data-theme="light"] .view-tab.danger-tab.active { background: #fce8e6 !important; border-color: var(--red) !important; } /* Tab bars */ [data-theme="light"] .tab-bar { border-bottom-color: var(--t-border) !important; } [data-theme="light"] .tab-btn { color: var(--t-text-muted) !important; background: none !important; border: none !important; } [data-theme="light"] .tab-btn.active { color: var(--t-accent) !important; border-bottom-color: var(--t-accent) !important; } /* Stat bar (reserve_plus) */ [data-theme="light"] .stat-bar { background: #ffffff !important; border-bottom-color: var(--t-border) !important; } [data-theme="light"] .stat-tab { color: var(--t-text-muted) !important; border-bottom-color: transparent !important; } [data-theme="light"] .stat-tab:hover { background: var(--t-hover-row) !important; color: var(--t-text) !important; } [data-theme="light"] .stat-tab.active { color: var(--t-text) !important; border-bottom-color: var(--t-accent) !important; background: #e8f0fe !important; } [data-theme="light"] .stat-tab.active .stat-num { color: var(--t-accent) !important; } [data-theme="light"] .stat-tab.danger .stat-num { color: var(--red) !important; } [data-theme="light"] .overdue-banner { background: #fce8e6 !important; border-color: var(--red) !important; color: #c5221f !important; } [data-theme="light"] .ov-count { background: var(--red) !important; } /* Diag box */ [data-theme="light"] .diag { background: #e8f0fe !important; border-color: #1a73e8 !important; color: var(--t-text) !important; } [data-theme="light"] .diag .ok { color: var(--green) !important; } [data-theme="light"] .diag .bad { color: var(--red) !important; } /* Price table (admin_prices) */ [data-theme="light"] .price-table thead th { background: var(--t-table-head) !important; color: var(--t-text-muted) !important; } [data-theme="light"] .cat-name-cell { color: var(--t-text) !important; } [data-theme="light"] .cat-tag { background: #e8f0fe !important; border-color: #1a73e8 !important; color: #1a73e8 !important; } [data-theme="light"] .price-display { color: var(--t-accent) !important; } [data-theme="light"] .price-inp { background: #ffffff !important; border-color: var(--t-input-border) !important; color: var(--t-text) !important; } [data-theme="light"] .price-inp.na { color: var(--t-text-faint) !important; } [data-theme="light"] .price-inp.changed { border-color: #188038 !important; background: #e6f4ea !important; } [data-theme="light"] .price-inp.saved { border-color: var(--green) !important; } [data-theme="light"] .discount-val { color: #007b83 !important; } [data-theme="light"] .sticky-save { background: #ffffff !important; border-top-color: var(--t-border) !important; box-shadow: 0 -2px 8px var(--t-shadow) !important; } /* waiver box */ [data-theme="light"] .waiver-box, [data-theme="light"] .res-waiver { background: #fce8e6 !important; border-color: rgba(217,48,37,.3) !important; } [data-theme="light"] .waiver-title, [data-theme="light"] .res-waiver-title { color: #c5221f !important; } [data-theme="light"] .waiver-text, [data-theme="light"] .res-waiver-text { color: var(--t-text-muted) !important; } [data-theme="light"] .check-row:hover, [data-theme="light"] .res-check-row:hover { background: var(--t-hover-row) !important; } [data-theme="light"] .check-label, [data-theme="light"] .res-check-label { color: var(--t-text-muted) !important; } [data-theme="light"] .check-label strong, [data-theme="light"] .res-check-label strong { color: var(--t-text) !important; } /* Summary card */ [data-theme="light"] .summary-row, [data-theme="light"] .res-summary-row { border-bottom-color: var(--t-border) !important; } [data-theme="light"] .summary-label, [data-theme="light"] .res-summary-label { color: var(--t-text-muted) !important; } [data-theme="light"] .summary-value, [data-theme="light"] .res-summary-value { color: var(--t-text) !important; } /* Scrollbars */ [data-theme="light"] ::-webkit-scrollbar { background: #f1f3f4; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #dadce0; border-radius: 4px; } /* Footer */ [data-theme="light"] .ftr { background: #f8f9fa !important; color: var(--t-text-muted) !important; }