/* Alarm.com-inspired light theme overrides. Loaded when . */ html[data-theme="light"] { --bg: #f3f6fb; --bg-alt: #eaf0f8; --surface: #ffffff; --text: #1a2a3a; --muted: #6b7a8f; --accent: #0075c9; --accent-strong: #005fa3; --border: #e3e9f1; --shadow-sm: 0 1px 2px rgba(15, 30, 55, 0.04), 0 1px 3px rgba(15, 30, 55, 0.06); --shadow-md: 0 4px 12px rgba(15, 30, 55, 0.06), 0 2px 6px rgba(15, 30, 55, 0.04); } /* Body */ html[data-theme="light"] body { background: var(--bg); color: var(--text); } /* Nav */ html[data-theme="light"] .nav { background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } html[data-theme="light"] .nav-links a { color: var(--muted); } html[data-theme="light"] .nav-links a:hover { color: var(--accent); } /* Hero */ html[data-theme="light"] .hero { background: radial-gradient(ellipse at top, rgba(0,117,201,0.10), transparent 60%), var(--bg); } html[data-theme="light"] .tagline { color: var(--muted); } /* Buttons */ html[data-theme="light"] .btn-primary { background: var(--accent); color: #ffffff; box-shadow: 0 4px 14px rgba(0, 117, 201, 0.25); } html[data-theme="light"] .btn-primary:hover { background: var(--accent-strong); color: #fff; } html[data-theme="light"] .btn-ghost { border: 1px solid var(--border); color: var(--text); background: #fff; } html[data-theme="light"] .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Sections */ html[data-theme="light"] .section-alt { background: #ffffff; } /* Cards */ html[data-theme="light"] .card, html[data-theme="light"] .link-card, html[data-theme="light"] .person, html[data-theme="light"] .kpi, html[data-theme="light"] .ratio, html[data-theme="light"] .chart-card, html[data-theme="light"] .note, html[data-theme="light"] .form-card, html[data-theme="light"] .my-shift, html[data-theme="light"] .res-list li { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } html[data-theme="light"] .card:hover, html[data-theme="light"] .link-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } html[data-theme="light"] .link-card:hover { background: #f7fbff; color: var(--text); } html[data-theme="light"] .card p, html[data-theme="light"] .link-desc, html[data-theme="light"] .role, html[data-theme="light"] .note p, html[data-theme="light"] .about p, html[data-theme="light"] .contact p, html[data-theme="light"] .muted, html[data-theme="light"] .section-sub, html[data-theme="light"] .kpi-label, html[data-theme="light"] .ratio-label, html[data-theme="light"] .ratio-sub, html[data-theme="light"] .res-list span, html[data-theme="light"] .note-small { color: var(--muted); } /* Avatar */ html[data-theme="light"] .avatar { background: linear-gradient(135deg, #0075c9, #2c9ab7); color: #ffffff; } /* Footer */ html[data-theme="light"] .footer { background: #ffffff; border-top: 1px solid var(--border); } /* Dashboard bits */ html[data-theme="light"] .filter select, html[data-theme="light"] .req-form input, html[data-theme="light"] .req-form select, html[data-theme="light"] .req-form textarea { background: #ffffff; color: var(--text); border: 1px solid var(--border); } html[data-theme="light"] .req-form input:focus, html[data-theme="light"] .req-form select:focus, html[data-theme="light"] .req-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 117, 201, 0.15); } /* Ratio bar track */ html[data-theme="light"] .bar { background: #e6ecf3; } /* KPI deltas */ html[data-theme="light"] .kpi-delta.up { color: #2eb67d; } html[data-theme="light"] .kpi-delta.down { color: #e35d6a; } /* Schedule table */ html[data-theme="light"] table.sched thead th, html[data-theme="light"] .sticky, html[data-theme="light"] table.sched thead th.sticky { background: #f7fafd; color: var(--muted); } html[data-theme="light"] table.sched th, html[data-theme="light"] table.sched td { border-bottom: 1px solid var(--border); } html[data-theme="light"] table.sched tr:hover td { background: #f9fbfe; } html[data-theme="light"] table.sched td.shift span { background: rgba(0, 117, 201, 0.10); color: var(--accent); border: 1px solid rgba(0, 117, 201, 0.25); } html[data-theme="light"] table.sched td.off { color: #c3cbd6; } /* My shift badge */ html[data-theme="light"] .ms-hrs { background: rgba(0, 117, 201, 0.10); color: var(--accent); } /* Badge / chips */ html[data-theme="light"] .badge { background: rgba(0, 117, 201, 0.10); color: var(--accent); border: 1px solid rgba(0, 117, 201, 0.25); } html[data-theme="light"] .chips label { background: #ffffff; color: var(--text); } /* Tabs */ html[data-theme="light"] .tab { background: #ffffff; color: var(--muted); border: 1px solid var(--border); } html[data-theme="light"] .tab:hover { color: var(--accent); } html[data-theme="light"] .tab.active { background: var(--accent); color: #ffffff; border-color: var(--accent); } /* Theme toggle button itself */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); }