/* ============================================================ theme.css — HVACWorkOrders.com Centralized theme variables for dark + light modes. Drop into every page's , BEFORE any other stylesheets. ============================================================ */ /* ── DEFAULT: Dark theme (existing look) ─────────────────── */ :root { --navy: #0F1B2D; --sidebar: #111E2F; --card-bg: #1A2E47; --card-hover: #1E3450; --ice: #38BDF8; --ice-dim: rgba(56,189,248,0.1); --orange: #F97316; --orange-dk: #EA6C0A; --white: #F8FAFC; --muted: #64748B; --label: #CBD5E1; --green: #22C55E; --yellow: #FACC15; --red: #EF4444; --purple: #A855F7; --border: rgba(255,255,255,0.07); --radius: 12px; /* Shadow & overlay — dark */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 24px 64px rgba(0,0,0,0.5); --overlay-bg: rgba(0,0,0,0.65); /* Input backgrounds — dark */ --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.15); --input-focus-bg:rgba(56,189,248,0.05); /* Topbar — dark */ --topbar-bg: rgba(15,27,45,0.97); /* Skeleton shimmer — dark */ --skeleton-from: rgba(255,255,255,0.05); --skeleton-mid: rgba(255,255,255,0.10); } /* ── LIGHT THEME overrides ───────────────────────────────── */ /* Applied when or system prefers */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --navy: #F0F4F8; --sidebar: #FFFFFF; --card-bg: #FFFFFF; --card-hover: #F8FAFC; --white: #0F1B2D; --muted: #64748B; --label: #334155; --border: rgba(0,0,0,0.09); /* Keep brand colors vivid — they're readable on light too */ --ice: #0284C7; /* deeper blue for light bg */ --ice-dim: rgba(2,132,199,0.1); --orange: #EA6C0A; --orange-dk: #C2570A; --green: #16A34A; --yellow: #CA8A04; --red: #DC2626; --purple: #7C3AED; /* Shadows — lighter for light mode */ --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 16px 40px rgba(0,0,0,0.15); --overlay-bg: rgba(0,0,0,0.45); /* Input backgrounds — light */ --input-bg: #F8FAFC; --input-border: rgba(0,0,0,0.15); --input-focus-bg: rgba(2,132,199,0.04); /* Topbar */ --topbar-bg: rgba(255,255,255,0.97); /* Skeleton shimmer — light */ --skeleton-from: rgba(0,0,0,0.04); --skeleton-mid: rgba(0,0,0,0.08); } } /* When data-theme="light" is explicitly set, always use light */ [data-theme="light"] { --navy: #F0F4F8; --sidebar: #FFFFFF; --card-bg: #FFFFFF; --card-hover: #F8FAFC; --white: #0F1B2D; --muted: #64748B; --label: #334155; --border: rgba(0,0,0,0.09); --ice: #0284C7; --ice-dim: rgba(2,132,199,0.1); --orange: #EA6C0A; --orange-dk: #C2570A; --green: #16A34A; --yellow: #CA8A04; --red: #DC2626; --purple: #7C3AED; --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 16px 40px rgba(0,0,0,0.15); --overlay-bg: rgba(0,0,0,0.45); --input-bg: #F8FAFC; --input-border: rgba(0,0,0,0.15); --input-focus-bg: rgba(2,132,199,0.04); --topbar-bg: rgba(255,255,255,0.97); --skeleton-from: rgba(0,0,0,0.04); --skeleton-mid: rgba(0,0,0,0.08); } /* When data-theme="dark" is explicitly set, always use dark */ [data-theme="dark"] { --navy: #0F1B2D; --sidebar: #111E2F; --card-bg: #1A2E47; --card-hover: #1E3450; --white: #F8FAFC; --muted: #94A3B8; --label: #CBD5E1; --border: rgba(255,255,255,0.07); --ice: #38BDF8; --ice-dim: rgba(56,189,248,0.1); --orange: #F97316; --orange-dk: #EA6C0A; --green: #22C55E; --yellow: #FACC15; --red: #EF4444; --purple: #A855F7; --shadow-sm: 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 24px 64px rgba(0,0,0,0.5); --overlay-bg: rgba(0,0,0,0.65); --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.15); --input-focus-bg: rgba(56,189,248,0.05); --topbar-bg: rgba(15,27,45,0.97); --skeleton-from: rgba(255,255,255,0.05); --skeleton-mid: rgba(255,255,255,0.10); } /* ── GLOBAL LIGHT MODE COMPONENT FIXES ───────────────────── */ /* These override hardcoded rgba() values in existing pages */ /* that don't use CSS variables (inline styles, etc.) */ [data-theme="light"] body { background: var(--navy); color: var(--white); } [data-theme="light"] .welcome { background: #fff; border: 1px solid rgba(56, 189, 248, 0.15); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Sidebar */ [data-theme="light"] .sidebar { background: var(--sidebar); border-right-color: var(--border); box-shadow: 2px 0 12px rgba(0,0,0,0.08); } [data-theme="light"] .sidebar-logo { border-bottom-color: var(--border); } [data-theme="light"] .logo-link { color: var(--white); } [data-theme="light"] .nav-item { color: var(--muted); } [data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); color: var(--white); } [data-theme="light"] .nav-item.active { background: var(--ice-dim); color: var(--ice); } [data-theme="light"] .nav-section { color: rgba(100,116,139,0.6); } [data-theme="light"] .sidebar-footer { border-top-color: var(--border); } [data-theme="light"] .s-avatar { background: var(--ice-dim); border-color: rgba(2,132,199,0.3); color: var(--ice); } [data-theme="light"] .user-name { color: var(--white); } [data-theme="light"] .user-role { color: var(--muted); } /* Topbar */ [data-theme="light"] .topbar { background: var(--topbar-bg); border-bottom-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.08); } [data-theme="light"] .topbar-title { color: var(--white); } [data-theme="light"] .menu-btn { color: var(--muted); } [data-theme="light"] .back-btn { color: var(--muted); } /* Cards */ [data-theme="light"] .section-card, [data-theme="light"] .wo-card, [data-theme="light"] .invoice-card, [data-theme="light"] .summary-card, [data-theme="light"] .stat-card, [data-theme="light"] .tech-col, [data-theme="light"] .form-section, [data-theme="light"] .unassigned-card { background: var(--card-bg); border-color: var(--border); box-shadow: var(--shadow-sm); } [data-theme="light"] .wo-card:hover, [data-theme="light"] .invoice-card:hover { background: var(--card-hover); border-color: rgba(2,132,199,0.25); } /* Inputs */ [data-theme="light"] .field input, [data-theme="light"] .field select, [data-theme="light"] .field textarea, [data-theme="light"] .search-input, [data-theme="light"] .note-textarea, [data-theme="light"] .mfield input, [data-theme="light"] .mfield select, [data-theme="light"] .modal-datetime, [data-theme="light"] .li-search-input, [data-theme="light"] .li-cf-field input, [data-theme="light"] .li-cf-field textarea, [data-theme="light"] .price-input, [data-theme="light"] .sig-field input, [data-theme="light"] .filter-select { background: var(--input-bg); border-color: var(--input-border); color: var(--white); } [data-theme="light"] .field input:focus, [data-theme="light"] .field select:focus, [data-theme="light"] .field textarea:focus, [data-theme="light"] .search-input:focus, [data-theme="light"] .mfield input:focus, [data-theme="light"] .mfield select:focus, [data-theme="light"] .li-search-input:focus { background: var(--input-focus-bg); border-color: var(--ice); } [data-theme="light"] .field input::placeholder, [data-theme="light"] .field textarea::placeholder, [data-theme="light"] .search-input::placeholder, [data-theme="light"] .note-textarea::placeholder, [data-theme="light"] .li-search-input::placeholder { color: rgba(100,116,139,0.5); } [data-theme="light"] .field select option, [data-theme="light"] .mfield select option { background: #fff; color: #0f172a; } /* Modals */ [data-theme="light"] .modal { background: #FFFFFF; border-color: var(--border); box-shadow: var(--shadow-lg); } [data-theme="light"] .modal-title { color: var(--white); } [data-theme="light"] .modal-close { background: rgba(0,0,0,0.05); border-color: var(--border); color: var(--muted); } /* Overlay */ [data-theme="light"] .overlay { background: var(--overlay-bg); } /* Bottom nav */ [data-theme="light"] .bottom-nav { background: rgba(255,255,255,0.98); border-top-color: var(--border); } [data-theme="light"] .bnav-item { color: var(--muted); } [data-theme="light"] .bnav-item.active { color: var(--ice); } /* Skeletons */ [data-theme="light"] .skeleton { background: linear-gradient( 90deg, var(--skeleton-from) 25%, var(--skeleton-mid) 50%, var(--skeleton-from) 75% ); background-size: 200% 100%; } /* Desc boxes, internal notes */ [data-theme="light"] .desc-box { background: #F8FAFC; border-color: var(--border); color: var(--label); } [data-theme="light"] .internal-box { background: rgba(202,138,4,0.06); border-color: rgba(202,138,4,0.2); } /* WO header card */ [data-theme="light"] .wo-header { background: linear-gradient(135deg, #E0F0FF 0%, #F0F8FF 100%); border-color: rgba(2,132,199,0.2); } [data-theme="light"] .wo-number { color: var(--ice); } [data-theme="light"] .wo-title { color: var(--white); } [data-theme="light"] .cust-header { background: linear-gradient(135deg, #E0F0FF 0%, #F0F8FF 100%); border-color: rgba(2,132,199,0.15); } [data-theme="light"] .cust-header-name { color: var(--white); } /* Line items */ [data-theme="light"] .li-dropdown { background: #FFFFFF; border-color: rgba(2,132,199,0.25); box-shadow: var(--shadow-md); } [data-theme="light"] .li-dd-item:hover { background: rgba(2,132,199,0.06); } [data-theme="light"] .li-confirm-form { background: rgba(2,132,199,0.04); border-color: rgba(2,132,199,0.15); } /* Signature pad */ [data-theme="light"] .sig-pad-wrap { background: #F8FAFC; border-color: rgba(0,0,0,0.12); } [data-theme="light"] .sig-locked { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.07); } /* Pricebook rows */ [data-theme="light"] .svc-row { background: var(--card-bg); border-color: var(--border); } [data-theme="light"] .svc-row:hover { border-color: rgba(2,132,199,0.2); } /* ── THEME TOGGLE BUTTON (floats in topbar) ──────────────── */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 1.5px solid var(--border); border-radius: 100px; padding: 0.32rem 0.75rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); cursor: pointer; transition: all 0.2s; font-family: 'Inter', sans-serif; white-space: nowrap; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--ice); color: var(--ice); background: var(--ice-dim); } .theme-toggle-icon { font-size: 0.9rem; } [data-theme="light"] .theme-toggle { border-color: rgba(0,0,0,0.15); color: var(--muted); } [data-theme="light"] .theme-toggle:hover { border-color: var(--ice); color: var(--ice); background: var(--ice-dim); } [data-theme="light"] .acct-trigger:hover { background: rgba(0,0,0,0.05); } [data-theme="light"] .acct-avatar { background: rgba(2,132,199,0.1); border-color: rgba(2,132,199,0.35); color: var(--ice); } /* The name shown next to the avatar in the topbar */ [data-theme="light"] .acct-trigger-name { color: var(--white); /* var(--white) = #0F1B2D in light mode */ } [data-theme="light"] .acct-trigger-arrow { color: var(--muted); } /* Dropdown panel */ [data-theme="light"] .acct-menu { background: #FFFFFF; border-color: rgba(0,0,0,0.1); box-shadow: 0 16px 48px rgba(0,0,0,0.15); } /* User info block */ [data-theme="light"] .acct-menu-user { border-bottom-color: rgba(0,0,0,0.08); } [data-theme="light"] .acct-menu-user-name { color: #0F1B2D; } [data-theme="light"] .acct-menu-user-email { color: #64748B; } /* Section dividers */ [data-theme="light"] .acct-menu-section { border-bottom-color: rgba(0,0,0,0.06); } /* Menu items */ [data-theme="light"] .acct-menu-item { color: #334155; } [data-theme="light"] .acct-menu-item:hover { background: rgba(0,0,0,0.04); color: #0F1B2D; } /* Upgrade item keeps orange */ [data-theme="light"] .acct-menu-upgrade { color: #EA6C0A !important; } [data-theme="light"] .acct-menu-upgrade:hover { background: rgba(234,108,10,0.07) !important; } /* Logout keeps red */ [data-theme="light"] .acct-menu-logout { color: #DC2626 !important; } [data-theme="light"] .acct-menu-logout:hover { background: rgba(220,38,38,0.07) !important; color: #B91C1C !important; } /* Badges stay the same hue but slightly adjusted for light bg */ [data-theme="light"] .acct-role-badge { background: rgba(2,132,199,0.1); color: #0284C7; } [data-theme="light"] .save-bar { background: rgba(255,255,255,0.98); border-top-color: rgba(2,132,199,0.2); } [data-theme="light"] .customer-dropdown { background: #FFFFFF; border-color: rgba(2,132,199,0.25); box-shadow: var(--shadow-md); } [data-theme="light"] .cust-option:hover { background: rgba(0,0,0,0.04); } [data-theme="light"] .cust-add-new { border-top-color: rgba(0,0,0,0.08); } [data-theme="light"] .acct-plan-badge { background: rgba(234,108,10,0.1); color: #EA6C0A; } [data-theme="light"] .acct-trial-badge { background: rgba(234,108,10,0.12); color: #EA6C0A; } [data-theme="light"] .cfield select { background: #FFFFFF; color: #0F1B2D; border-color: rgba(0,0,0,0.15); } [data-theme="light"] .cfield select option { background: #FFFFFF; color: #0F1B2D; } [data-theme="light"] .btn-add { background:var(--orange); color:#ffffff; } [data-theme="light"] .btn-plan-primary { background: var(--orange); color:#ffffff; } [data-theme="light"] .current-plan-card { background: linear-gradient(135deg, #f6f6f9 0%, #d2d3e1 100%); } [data-theme="light"] .btn-ms, [data-theme="light"] .btn-save, [data-theme="light"] .btn-submit, [data-theme="light"] .btn-text, [data-theme="light"] .btn-invite, [data-theme="light"] .btn-modal-primary, [data-theme="light"] .btn-action-primary, [data-theme="light"] .btn-modal-save, [data-theme="light"] .btn-subscribe { background: var(--orange); color:#ffffff; } [data-theme="light"] .btn-contact { background: #7C3AED; color: #ffffff; } [data-theme="light"] .btn-contact:hover { background: #4D10B4; color: #ffffff; } [data-theme="light"] .btn-mc, [data-theme="light"] .btn-cancel, [data-theme="light"] .btn-modal-cancel { background: #708090; color: #ffffff; } [data-theme="light"] .btn-mc:hover, [data-theme="light"] .btn-cancel:hover, [data-theme="light"] .btn-modal-cancel:hover { background: #5f6f7f; color: #ffffff; } [data-theme="light"] .tog-track { background: #cccccc; } [data-theme="light"] .tech-name-chip { filter: saturate(1.2) brightness(0.75); font-weight: 800; box-shadow: inset 0 0 0 1px currentColor; } [data-theme="light"] .time-label, [data-theme="light"] .job-block-time { color:#666666; } [data-theme="light"] .btn-sig-accept { color:#ffffff; }