/* ================================================================ BSynch Theme System — themes.css 3 themes: light | dark | green Applied via data-theme attribute on All rules use !important to override inline page styles ================================================================ */ /* ────────────────────────────────────────────── LIGHT — High-contrast, designed for sunlight ────────────────────────────────────────────── */ [data-theme="light"] body, [data-theme="light"] html { background: #f0f4f8 !important; color: #0f172a !important; } /* Header / Topbar — stay dark navy (brand identity + readable w/ sunglasses) */ [data-theme="light"] .header, [data-theme="light"] .topbar, [data-theme="light"] header, [data-theme="light"] #app-header { background: #19354d !important; color: #e2e8f0 !important; border-bottom-color: #0f2d52 !important; } [data-theme="light"] .hlogo { color: #5eead4 !important; } [data-theme="light"] .back-btn, [data-theme="light"] .topbar a, [data-theme="light"] .header a { color: #93c5fd !important; } [data-theme="light"] .hdr-user { color: #93c5fd !important; } [data-theme="light"] .btn-logout { border-color: #3b5c78 !important; color: #93c5fd !important; } /* Cards / panels / sections */ [data-theme="light"] .section-card, [data-theme="light"] .card, [data-theme="light"] .gate-card, [data-theme="light"] .tile, [data-theme="light"] .module-card { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .tile:hover { border-color: #1e9484 !important; box-shadow: 0 10px 36px rgba(30,148,132,.15) !important; } [data-theme="light"] .tile h3 { color: #0f172a !important; } [data-theme="light"] .tile p, [data-theme="light"] .card-body p { color: #475569 !important; } [data-theme="light"] .content { background: #f0f4f8 !important; } /* Modal */ [data-theme="light"] .modal-overlay.open { background: rgba(15,23,42,0.55) !important; } [data-theme="light"] .modal, [data-theme="light"] .modal-bg .modal, [data-theme="light"] .modal-box { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 20px 60px rgba(0,0,0,.18) !important; color: #0f172a !important; } [data-theme="light"] .modal h2, [data-theme="light"] .mtitle { color: #0f172a !important; } [data-theme="light"] .mfield label, [data-theme="light"] label { color: #475569 !important; } /* Inputs / selects */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea, [data-theme="light"] .sm-search { background: #ffffff !important; border-color: #cbd5e1 !important; color: #0f172a !important; } [data-theme="light"] input:focus, [data-theme="light"] select:focus, [data-theme="light"] textarea:focus, [data-theme="light"] .sm-search:focus { border-color: #1e9484 !important; outline: none !important; } [data-theme="light"] input::placeholder, [data-theme="light"] .sm-search::placeholder { color: #94a3b8 !important; } /* Buttons */ [data-theme="light"] .btn-ghost, [data-theme="light"] .tool-btn, [data-theme="light"] .eb, [data-theme="light"] .btn-s, [data-theme="light"] .btn-sm { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #1e293b !important; } [data-theme="light"] .btn-ghost:hover, [data-theme="light"] .tool-btn:hover { background: #e2e8f0 !important; } [data-theme="light"] .tool-btn.active { background: #d7f0ea !important; border-color: #1e9484 !important; color: #1e9484 !important; } [data-theme="light"] .eb-edit { border-color: #3b82f6 !important; color: #157567 !important; } [data-theme="light"] .eb-edit:hover { background: #d7f0ea !important; } [data-theme="light"] .eb-del { border-color: #ef4444 !important; color: #b91c1c !important; } [data-theme="light"] .eb-del:hover { background: #fee2e2 !important; } [data-theme="light"] .btn-reset { border-color: #f59e0b !important; color: #92400e !important; } [data-theme="light"] .btn-danger { border-color: #ef4444 !important; color: #b91c1c !important; } /* Gate / auth area */ [data-theme="light"] .gate { background: #f0f4f8 !important; } [data-theme="light"] .name-btn, [data-theme="light"] .user-btn { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .name-btn:hover, [data-theme="light"] .user-btn.active, [data-theme="light"] .user-btn:hover { background: #1e9484 !important; color: #ffffff !important; border-color: #1e9484 !important; } /* PIN pad */ [data-theme="light"] .pin-dot, [data-theme="light"] .dot { background: #e2e8f0 !important; border-color: #cbd5e1 !important; } [data-theme="light"] .pin-dot.on, [data-theme="light"] .dot.filled { background: #1e9484 !important; border-color: #1e9484 !important; } [data-theme="light"] .pk, [data-theme="light"] .numpad button { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .pk:active, [data-theme="light"] .numpad button:hover { background: #d7f0ea !important; } [data-theme="light"] .pin-err { color: #b91c1c !important; } /* Tabs */ [data-theme="light"] .tabs { border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .tab-btn { color: #475569 !important; background: none !important; } [data-theme="light"] .tab-btn:hover { color: #0f172a !important; } [data-theme="light"] .tab-btn.active { color: #1e9484 !important; border-bottom-color: #1e9484 !important; background: none !important; } /* Worker attendance cards */ [data-theme="light"] .worker-card { background: #ffffff !important; border-color: #e2e8f0 !important; } [data-theme="light"] .worker-card.present { background: #dcfce7 !important; border-color: #16a34a !important; } [data-theme="light"] .wc-name { color: #475569 !important; } [data-theme="light"] .worker-card.present .wc-name { color: #0f172a !important; } [data-theme="light"] .wc-time { color: #94a3b8 !important; } [data-theme="light"] .worker-card.present .wc-time { color: #15803d !important; } /* Tables */ [data-theme="light"] table { background: transparent !important; } [data-theme="light"] th { background: #f8fafc !important; color: #475569 !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] td { border-bottom-color: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] tr:hover td { background: #f8fafc !important; } /* Summary / stat cards */ [data-theme="light"] .summary-card { background: #ffffff !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.06) !important; } [data-theme="light"] .summary-card .val { color: #1e9484 !important; } [data-theme="light"] .summary-card .lbl { color: #475569 !important; } /* Section headers */ [data-theme="light"] .section-header { color: #475569 !important; } [data-theme="light"] .section-card h2, [data-theme="light"] .section-card h3 { color: #0f172a !important; } /* Phase banners */ [data-theme="light"] .phase-banner.meeting { background: #ede9fe !important; border-color: #c4b5fd !important; color: #6d28d9 !important; } [data-theme="light"] .phase-banner.signin { background: #dcfce7 !important; border-color: #86efac !important; color: #15803d !important; } /* Chips / badges */ [data-theme="light"] .chip { background: #f1f5f9 !important; color: #1e293b !important; } [data-theme="light"] .badge-admin { background: #ede9fe !important; color: #5b21b6 !important; } [data-theme="light"] .badge-lead { background: #d7f0ea !important; color: #1e40af !important; } [data-theme="light"] .badge-worker { background: #dcfce7 !important; color: #15803d !important; } [data-theme="light"] .badge-inactive { background: #f1f5f9 !important; color: #64748b !important; } /* Info bar */ [data-theme="light"] .info-bar { background: #d7f0ea !important; border-color: #93c5fd !important; color: #1e40af !important; } /* Modal overlay */ [data-theme="light"] .modal-overlay { background: rgba(15,23,42,.5) !important; } /* Global nav stays dark for brand consistency + readability */ [data-theme="light"] .gnav { background: #19354d !important; border-top-color: #0f2d52 !important; } [data-theme="light"] .gnav a, [data-theme="light"] .gnav-link { color: #94a3b8 !important; } [data-theme="light"] .gnav a:hover, [data-theme="light"] .gnav a.gna, [data-theme="light"] .gnav-link.gna { color: #5eead4 !important; } /* Footer */ [data-theme="light"] footer { color: #64748b !important; border-top-color: #e2e8f0 !important; } /* Toast */ [data-theme="light"] #toast { background: #1e293b !important; color: #e2e8f0 !important; } /* Sidebar */ [data-theme="light"] .sidebar { background: #f8fafc !important; border-color: #e2e8f0 !important; } [data-theme="light"] .sidebar a { color: #475569 !important; } [data-theme="light"] .sidebar a.active { color: #1e9484 !important; background: #d7f0ea !important; } /* Role matrix */ [data-theme="light"] .role-matrix th { background: #f8fafc !important; border-bottom-color: #e2e8f0 !important; } [data-theme="light"] .toggle-cell.on { background: #dcfce7 !important; color: #15803d !important; } [data-theme="light"] .toggle-cell.off { background: #f1f5f9 !important; color: #94a3b8 !important; } /* Company cards in platform-settings */ [data-theme="light"] .co-card { background: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; } [data-theme="light"] .co-card .co-name { color: #0f172a !important; } [data-theme="light"] .co-card .co-slug { color: #475569 !important; } /* Inventory items */ [data-theme="light"] .inv-card { background: #ffffff !important; border-color: #e2e8f0 !important; } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9 !important; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } /* ────────────────────────────────────────────── DARK — Default BSynch dark UI ────────────────────────────────────────────── */ [data-theme="dark"] body, [data-theme="dark"] html { background: #0f1117 !important; color: #e2e8f0 !important; } [data-theme="dark"] .header, [data-theme="dark"] .topbar, [data-theme="dark"] header, [data-theme="dark"] #app-header { background: #060c18 !important; color: #e2e8f0 !important; border-bottom-color: #1a2535 !important; } [data-theme="dark"] .card, [data-theme="dark"] .section-card, [data-theme="dark"] .tile { background: #1a1d27 !important; border-color: #2a2d3e !important; color: #e2e8f0 !important; } [data-theme="dark"] .tile h3 { color: #e2e8f0 !important; } [data-theme="dark"] .tile p, [data-theme="dark"] .card-body p { color: #94a3b8 !important; } [data-theme="dark"] .modal, [data-theme="dark"] .modal-box { background: #1a1d27 !important; border-color: #2a2d3e !important; color: #e2e8f0 !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0f1117 !important; border-color: #2a2d3e !important; color: #e2e8f0 !important; } [data-theme="dark"] .gnav { background: #060c18 !important; border-top-color: #1a2535 !important; } [data-theme="dark"] .gnav a { color: #475569 !important; } [data-theme="dark"] .gnav a:hover, [data-theme="dark"] .gnav a.gna { color: #a855f7 !important; } [data-theme="dark"] footer { color: #334155 !important; border-top-color: #1e2533 !important; } /* ────────────────────────────────────────────── GREEN — BSynch teal / forest ────────────────────────────────────────────── */ [data-theme="bsynch"] body, [data-theme="bsynch"] html { background: #071c16 !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .header, [data-theme="bsynch"] .topbar, [data-theme="bsynch"] header, [data-theme="bsynch"] #app-header { background: #040f0b !important; color: #e0f2e9 !important; border-bottom-color: #0f3328 !important; } [data-theme="bsynch"] .hlogo { color: #4ade80 !important; } [data-theme="bsynch"] .back-btn, [data-theme="bsynch"] .topbar a, [data-theme="bsynch"] .header a, [data-theme="bsynch"] .hdr-user { color: #5eead4 !important; } [data-theme="bsynch"] .btn-logout { border-color: #163d2c !important; color: #5eead4 !important; } [data-theme="bsynch"] .card, [data-theme="bsynch"] .section-card, [data-theme="bsynch"] .tile, [data-theme="bsynch"] .gate-card, [data-theme="bsynch"] .module-card { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .tile:hover { border-color: #1e9484 !important; box-shadow: 0 10px 36px rgba(30,148,132,.25) !important; } [data-theme="bsynch"] .tile h3 { color: #e0f2e9 !important; } [data-theme="bsynch"] .tile p, [data-theme="bsynch"] .card-body p { color: #5eead4 !important; } [data-theme="bsynch"] .content { background: #071c16 !important; } /* Modals */ [data-theme="bsynch"] .modal, [data-theme="bsynch"] .modal-box { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .modal h2, [data-theme="bsynch"] .mtitle { color: #e0f2e9 !important; } [data-theme="bsynch"] .mfield label, [data-theme="bsynch"] label { color: #5eead4 !important; } [data-theme="bsynch"] .modal-overlay { background: rgba(4,15,11,.7) !important; } /* Inputs */ [data-theme="bsynch"] input, [data-theme="bsynch"] select, [data-theme="bsynch"] textarea, [data-theme="bsynch"] .sm-search { background: #071c16 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] input:focus, [data-theme="bsynch"] select:focus, [data-theme="bsynch"] textarea:focus { border-color: #1e9484 !important; } [data-theme="bsynch"] input::placeholder { color: #3d6e5a !important; } /* Buttons */ [data-theme="bsynch"] .btn-ghost, [data-theme="bsynch"] .tool-btn, [data-theme="bsynch"] .eb, [data-theme="bsynch"] .btn-s, [data-theme="bsynch"] .btn-sm { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .btn-ghost:hover, [data-theme="bsynch"] .tool-btn:hover { background: #163d2c !important; } [data-theme="bsynch"] .tool-btn.active { background: #163d2c !important; border-color: #1e9484 !important; color: #5eead4 !important; } [data-theme="bsynch"] .btn-reset { border-color: #f59e0b !important; color: #fcd34d !important; } [data-theme="bsynch"] .btn-danger { border-color: #ef4444 !important; color: #fca5a5 !important; } /* Gate */ [data-theme="bsynch"] .gate { background: #071c16 !important; } [data-theme="bsynch"] .name-btn, [data-theme="bsynch"] .user-btn { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .name-btn:hover, [data-theme="bsynch"] .user-btn.active { background: #1e9484 !important; color: #ffffff !important; border-color: #1e9484 !important; } /* PIN pad */ [data-theme="bsynch"] .pin-dot, [data-theme="bsynch"] .dot { background: #163d2c !important; border-color: #1a3d2d !important; } [data-theme="bsynch"] .pin-dot.on, [data-theme="bsynch"] .dot.filled { background: #1e9484 !important; border-color: #1e9484 !important; } [data-theme="bsynch"] .pk, [data-theme="bsynch"] .numpad button { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .pk:active, [data-theme="bsynch"] .numpad button:hover { background: #163d2c !important; } /* Tabs */ [data-theme="bsynch"] .tabs { border-bottom-color: #1a3d2d !important; } [data-theme="bsynch"] .tab-btn { color: #5eead4 !important; background: none !important; } [data-theme="bsynch"] .tab-btn:hover { color: #e0f2e9 !important; } [data-theme="bsynch"] .tab-btn.active { color: #4ade80 !important; border-bottom-color: #4ade80 !important; background: none !important; } /* Tables */ [data-theme="bsynch"] table { background: transparent !important; } [data-theme="bsynch"] th { background: #0a1f17 !important; color: #5eead4 !important; border-bottom-color: #1a3d2d !important; } [data-theme="bsynch"] td { border-bottom-color: #0f2a20 !important; color: #e0f2e9 !important; } [data-theme="bsynch"] tr:hover td { background: #0f2a20 !important; } /* Worker cards */ [data-theme="bsynch"] .worker-card { background: #0f2a20 !important; border-color: #1a3d2d !important; } [data-theme="bsynch"] .worker-card.present { background: #163d2c !important; border-color: #1e9484 !important; } [data-theme="bsynch"] .wc-name { color: #5eead4 !important; } [data-theme="bsynch"] .wc-time { color: #3d6e5a !important; } /* Summary cards */ [data-theme="bsynch"] .summary-card { background: #0f2a20 !important; border-color: #1a3d2d !important; } [data-theme="bsynch"] .summary-card .val { color: #4ade80 !important; } [data-theme="bsynch"] .summary-card .lbl { color: #5eead4 !important; } /* Chips / badges */ [data-theme="bsynch"] .chip { background: #163d2c !important; color: #5eead4 !important; } /* Footer */ [data-theme="bsynch"] footer { color: #3d6e5a !important; border-top-color: #0f3328 !important; } /* Bottom nav */ [data-theme="bsynch"] .gnav { background: #040f0b !important; border-top-color: #0f3328 !important; } [data-theme="bsynch"] .gnav a, [data-theme="bsynch"] .gnav-link { color: #3d6e5a !important; } [data-theme="bsynch"] .gnav a:hover, [data-theme="bsynch"] .gnav a.gna, [data-theme="bsynch"] .gnav-link.gna { color: #4ade80 !important; } /* Section headers */ [data-theme="bsynch"] .section-header { color: #5eead4 !important; } /* Co-cards (platform settings) */ [data-theme="bsynch"] .co-card { background: #0f2a20 !important; border-color: #1a3d2d !important; color: #e0f2e9 !important; } [data-theme="bsynch"] .co-name { color: #e0f2e9 !important; } [data-theme="bsynch"] .co-slug { color: #5eead4 !important; } /* Toast */ [data-theme="bsynch"] #toast { background: #0f2a20 !important; color: #e0f2e9 !important; } /* Scrollbar */ [data-theme="bsynch"] ::-webkit-scrollbar-track { background: #0a1a12 !important; } [data-theme="bsynch"] ::-webkit-scrollbar-thumb { background: #1a3d2d !important; } [data-theme="bsynch"] ::-webkit-scrollbar-thumb:hover { background: #1e9484 !important; } /* ────────────────────────────────────────────────────── BSynch OVERRIDES — white/light background, teal accents Replaces the dark-green values from "green" rename ────────────────────────────────────────────────────── */ /* Base */ [data-theme="bsynch"] body, [data-theme="bsynch"] html { background: #f0fdf8 !important; color: #0f2a20 !important; } /* Header — dark teal (distinct from light's blue-navy) */ [data-theme="bsynch"] .header, [data-theme="bsynch"] .topbar, [data-theme="bsynch"] header, [data-theme="bsynch"] #app-header { background: #0f2a20 !important; color: #e0f2e9 !important; border-bottom-color: #1a3d2d !important; } [data-theme="bsynch"] .hlogo { color: #5eead4 !important; } [data-theme="bsynch"] .back-btn, [data-theme="bsynch"] .topbar a, [data-theme="bsynch"] .header a, [data-theme="bsynch"] .hdr-user { color: #5eead4 !important; } [data-theme="bsynch"] .btn-logout { border-color: #1e9484 !important; color: #5eead4 !important; } /* Cards */ [data-theme="bsynch"] .section-card, [data-theme="bsynch"] .card, [data-theme="bsynch"] .gate-card, [data-theme="bsynch"] .tile, [data-theme="bsynch"] .module-card { background: #ffffff !important; border-color: #99f6e4 !important; color: #0f2a20 !important; } [data-theme="bsynch"] .tile:hover { border-color: #1e9484 !important; box-shadow: 0 8px 28px rgba(30,148,132,.18) !important; } [data-theme="bsynch"] .tile h3 { color: #0f2a20 !important; } [data-theme="bsynch"] .tile p, [data-theme="bsynch"] .card-body p { color: #2d6a4f !important; } [data-theme="bsynch"] .content { background: #f0fdf8 !important; } /* Modals */ [data-theme="bsynch"] .modal, [data-theme="bsynch"] .modal-box { background: #ffffff !important; border-color: #99f6e4 !important; color: #0f2a20 !important; box-shadow: 0 20px 60px rgba(30,148,132,.15) !important; } [data-theme="bsynch"] .modal h2, [data-theme="bsynch"] .mtitle { color: #0f2a20 !important; } [data-theme="bsynch"] .mfield label, [data-theme="bsynch"] label { color: #2d6a4f !important; } [data-theme="bsynch"] .modal-overlay { background: rgba(15,42,32,.55) !important; } /* Inputs */ [data-theme="bsynch"] input, [data-theme="bsynch"] select, [data-theme="bsynch"] textarea, [data-theme="bsynch"] .sm-search { background: #ffffff !important; border-color: #99f6e4 !important; color: #0f2a20 !important; } [data-theme="bsynch"] input:focus, [data-theme="bsynch"] select:focus, [data-theme="bsynch"] textarea:focus { border-color: #1e9484 !important; outline: none !important; } [data-theme="bsynch"] input::placeholder { color: #94a3b8 !important; } /* Buttons */ [data-theme="bsynch"] .btn-ghost, [data-theme="bsynch"] .tool-btn, [data-theme="bsynch"] .eb, [data-theme="bsynch"] .btn-s, [data-theme="bsynch"] .btn-sm { background: #f0fdf8 !important; border-color: #99f6e4 !important; color: #0f2a20 !important; } [data-theme="bsynch"] .btn-ghost:hover, [data-theme="bsynch"] .tool-btn:hover { background: #d1fae5 !important; } [data-theme="bsynch"] .tool-btn.active { background: #d1fae5 !important; border-color: #1e9484 !important; color: #1e9484 !important; } [data-theme="bsynch"] .btn-reset { border-color: #f59e0b !important; color: #92400e !important; } [data-theme="bsynch"] .btn-danger { border-color: #ef4444 !important; color: #b91c1c !important; } [data-theme="bsynch"] .eb-edit { border-color: #1e9484 !important; color: #1e9484 !important; } [data-theme="bsynch"] .eb-edit:hover { background: #d1fae5 !important; } [data-theme="bsynch"] .eb-del { border-color: #ef4444 !important; color: #b91c1c !important; } [data-theme="bsynch"] .eb-del:hover { background: #fee2e2 !important; } /* Gate */ [data-theme="bsynch"] .gate { background: #f0fdf8 !important; } [data-theme="bsynch"] .name-btn, [data-theme="bsynch"] .user-btn { background: #ffffff !important; border-color: #99f6e4 !important; color: #0f2a20 !important; } [data-theme="bsynch"] .name-btn:hover, [data-theme="bsynch"] .user-btn.active { background: #1e9484 !important; color: #ffffff !important; border-color: #1e9484 !important; } /* PIN pad */ [data-theme="bsynch"] .pin-dot, [data-theme="bsynch"] .dot { background: #d1fae5 !important; border-color: #99f6e4 !important; } [data-theme="bsynch"] .pin-dot.on, [data-theme="bsynch"] .dot.filled { background: #1e9484 !important; border-color: #1e9484 !important; } [data-theme="bsynch"] .pk, [data-theme="bsynch"] .numpad button { background: #ffffff !important; border-color: #99f6e4 !important; color: #0f2a20 !important; } [data-theme="bsynch"] .pk:active, [data-theme="bsynch"] .numpad button:hover { background: #d1fae5 !important; } /* Tabs */ [data-theme="bsynch"] .tabs { border-bottom-color: #99f6e4 !important; } [data-theme="bsynch"] .tab-btn { color: #2d6a4f !important; background: none !important; } [data-theme="bsynch"] .tab-btn:hover { color: #0f2a20 !important; } [data-theme="bsynch"] .tab-btn.active { color: #1e9484 !important; border-bottom-color: #1e9484 !important; background: none !important; } /* Tables */ [data-theme="bsynch"] table { background: transparent !important; } [data-theme="bsynch"] th { background: #f0fdf8 !important; color: #2d6a4f !important; border-bottom-color: #99f6e4 !important; } [data-theme="bsynch"] td { border-bottom-color: #d1fae5 !important; color: #0f2a20 !important; } [data-theme="bsynch"] tr:hover td { background: #f0fdf8 !important; } /* Worker cards */ [data-theme="bsynch"] .worker-card { background: #ffffff !important; border-color: #99f6e4 !important; } [data-theme="bsynch"] .worker-card.present { background: #dcfce7 !important; border-color: #1e9484 !important; } [data-theme="bsynch"] .wc-name { color: #2d6a4f !important; } [data-theme="bsynch"] .wc-time { color: #94a3b8 !important; } /* Summary cards */ [data-theme="bsynch"] .summary-card { background: #ffffff !important; border-color: #99f6e4 !important; box-shadow: 0 1px 4px rgba(30,148,132,.08) !important; } [data-theme="bsynch"] .summary-card .val { color: #1e9484 !important; } [data-theme="bsynch"] .summary-card .lbl { color: #2d6a4f !important; } /* Section headers */ [data-theme="bsynch"] .section-header { color: #2d6a4f !important; } [data-theme="bsynch"] .section-card h2, [data-theme="bsynch"] .section-card h3 { color: #0f2a20 !important; } /* Footer */ [data-theme="bsynch"] footer { color: #2d6a4f !important; border-top-color: #d1fae5 !important; } /* Bottom nav */ [data-theme="bsynch"] .gnav { background: #0f2a20 !important; border-top-color: #1a3d2d !important; } [data-theme="bsynch"] .gnav a, [data-theme="bsynch"] .gnav-link { color: #3d6e5a !important; } [data-theme="bsynch"] .gnav a:hover, [data-theme="bsynch"] .gnav a.gna, [data-theme="bsynch"] .gnav-link.gna { color: #5eead4 !important; } /* Chips */ [data-theme="bsynch"] .chip { background: #d1fae5 !important; color: #0f2a20 !important; } /* Toast */ [data-theme="bsynch"] #toast { background: #0f2a20 !important; color: #e0f2e9 !important; } /* Scrollbar */ [data-theme="bsynch"] ::-webkit-scrollbar-track { background: #f0fdf8 !important; } [data-theme="bsynch"] ::-webkit-scrollbar-thumb { background: #99f6e4 !important; } [data-theme="bsynch"] ::-webkit-scrollbar-thumb:hover { background: #1e9484 !important; } /* ── Theme Picker Component (used in Settings pages) ── */ .theme-picker { display: flex; flex-direction: column; gap: 10px; padding: 8px 0; } .th-option { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); cursor: pointer; font-size: 14px; font-weight: 500; color: inherit; text-align: left; width: 100%; transition: border-color .12s, background .12s; } .th-option:hover { border-color: #1e9484; background: rgba(30,148,132,.08); } .th-option.th-active { border-color: #1e9484 !important; background: rgba(30,148,132,.15) !important; font-weight: 700; } [data-theme="light"] .th-option, [data-theme="bsynch"] .th-option { border-color: #e2e8f0; background: #f8fafc; color: #0f172a; } [data-theme="light"] .th-option:hover, [data-theme="bsynch"] .th-option:hover { border-color: #1e9484; background: #d1fae5; } [data-theme="light"] .th-option.th-active, [data-theme="bsynch"] .th-option.th-active { border-color: #1e9484 !important; background: #d1fae5 !important; } .th-dot-swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid; flex-shrink: 0; }