/* ═══════════════════════════════════════════════════════════════ MyRepDay — Dark Mode Applied when ═══════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { color-scheme: dark; --blue-light: #6ab4f5; --blue-pale: #0d2035; --border: #1e3248; --text: #dde6f0; --muted: #6e8a9f; } /* ── Base ────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background: #0e1621; color: #dde6f0; } /* ── Nav ─────────────────────────────────────────────────────── */ html[data-theme="dark"] .nav { background: #07111e; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } /* Logo wrapper always white so the logo is always readable */ html[data-theme="dark"] .nav-brand { background: #fff !important; } html[data-theme="dark"] .nav-links a { color: rgba(255,255,255,0.65); } html[data-theme="dark"] .nav-links a:hover, html[data-theme="dark"] .nav-links a.active { background: rgba(255,255,255,0.12); color: #fff; } html[data-theme="dark"] .nav-user a { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); } html[data-theme="dark"] .nav-user a:hover { background: rgba(255,255,255,0.1); color: #fff; } html[data-theme="dark"] .rep-switcher select { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); } /* ── Cards ───────────────────────────────────────────────────── */ html[data-theme="dark"] .card { background: #152030; box-shadow: 0 1px 6px rgba(0,0,0,0.4); } html[data-theme="dark"] .card-header { border-bottom-color: #1e3248; } html[data-theme="dark"] .card-header h2 { color: #8bbfe0; } html[data-theme="dark"] .log-call-card { background: #152030; box-shadow: 0 1px 6px rgba(0,0,0,0.4); } /* ── Customer header ─────────────────────────────────────────── */ html[data-theme="dark"] .cust-header { background: #152030; box-shadow: 0 1px 4px rgba(0,0,0,0.3); } html[data-theme="dark"] .cust-header-info h1 { color: #8bbfe0; } html[data-theme="dark"] .addr-link { border-bottom-color: #4a7fa8; } /* ── Breadcrumb ───────────────────────────────────────────────── */ html[data-theme="dark"] .breadcrumb { color: #6e8a9f; } html[data-theme="dark"] .breadcrumb a { color: #6ab4f5; } /* ── Forms ───────────────────────────────────────────────────── */ html[data-theme="dark"] .field label { color: #9ab0c4; } html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #0d1929; border-color: #1e3248; color: #dde6f0; } html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #4a6070; } html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { border-color: #4a7fa8; } html[data-theme="dark"] .field input[readonly] { background: #0a1525; color: #6e8a9f; } html[data-theme="dark"] select option { background: #152030; color: #dde6f0; } /* ── Buttons ─────────────────────────────────────────────────── */ html[data-theme="dark"] .btn-primary { background: #1a4a7a; } html[data-theme="dark"] .btn-primary:hover { background: #1e5a96; } html[data-theme="dark"] .btn-sm { background: #152030; border-color: #1e3248; color: #9ab0c4; } html[data-theme="dark"] .btn-sm:hover { background: #1a2a3a; } html[data-theme="dark"] .btn-danger { border-color: #dc3545; color: #f07080; } html[data-theme="dark"] .btn-danger:hover { background: #2a1520; } /* ── Alerts ──────────────────────────────────────────────────── */ html[data-theme="dark"] .alert-success { background: #0d2a18; color: #6dd98a; border-color: #1a4a28; } html[data-theme="dark"] .alert-error { background: #2a0d12; color: #f07080; border-color: #4a1a20; } /* ── Rows (calls, contacts) ──────────────────────────────────── */ html[data-theme="dark"] .call-row, html[data-theme="dark"] .contact-row, html[data-theme="dark"] .toggle-row { border-bottom-color: #1a2d40; } html[data-theme="dark"] .call-date { color: #6ab4f5; border-bottom-color: #4a7fa8; } html[data-theme="dark"] .call-notes { color: #6e8a9f; } html[data-theme="dark"] .call-edit-form { background: #0d1929; border-top-color: #1e3248; } html[data-theme="dark"] .call-edit-form input, html[data-theme="dark"] .call-edit-form select, html[data-theme="dark"] .call-edit-form textarea { background: #152030; border-color: #1e3248; color: #dde6f0; } html[data-theme="dark"] .call-edit-form.open { background: #0d1929; } /* ── Contacts ────────────────────────────────────────────────── */ html[data-theme="dark"] .contact-avatar { background: #1a3a5c; color: #6ab4f5; } html[data-theme="dark"] .contact-name { color: #6ab4f5; border-bottom-color: #4a7fa8; } html[data-theme="dark"] .contact-spec, html[data-theme="dark"] .contact-email a { color: #6e8a9f; } html[data-theme="dark"] .contact-edit-form, html[data-theme="dark"] .add-contact-panel { background: #0d1929; border-top-color: #1e3248; } html[data-theme="dark"] .contact-edit-form input, html[data-theme="dark"] .add-contact-panel input, html[data-theme="dark"] .add-contact-panel select { background: #152030; border-color: #1e3248; color: #dde6f0; } /* ── Toggles ─────────────────────────────────────────────────── */ html[data-theme="dark"] .toggle-slider { background: #2a3f55; } html[data-theme="dark"] .toggle-label { color: #dde6f0; } html[data-theme="dark"] .toggle-label small { color: #6e8a9f; } /* ── Badges / chips ──────────────────────────────────────────── */ html[data-theme="dark"] .cycle-badge.met { background: #0d2a18; color: #6dd98a; } html[data-theme="dark"] .cycle-badge.unmet { background: #2a2010; color: #f0b060; } html[data-theme="dark"] .chip-active { background: #0d2a18; color: #6dd98a; } html[data-theme="dark"] .chip-inactive { background: #1a2530; color: #9ab0c4; } /* ── Empty states ────────────────────────────────────────────── */ html[data-theme="dark"] .empty-calls { color: #6e8a9f; } /* ── Mobile nav ──────────────────────────────────────────────── */ html[data-theme="dark"] .mob-nav { background: #0e1a26; border-top-color: #1e3248; box-shadow: 0 -2px 12px rgba(0,0,0,0.5); } html[data-theme="dark"] .mob-nav a { color: #6e8a9f; } html[data-theme="dark"] .mob-nav a.active { color: #6ab4f5; } /* ── Map modal ───────────────────────────────────────────────── */ html[data-theme="dark"] .cust-map-sheet { background: #152030; } html[data-theme="dark"] .cust-map-header h3 { color: #8bbfe0; } html[data-theme="dark"] .cust-map-header p { color: #6e8a9f; } html[data-theme="dark"] .cust-map-close { background: #1e3248; color: #dde6f0; } /* ── Tables ──────────────────────────────────────────────────── */ html[data-theme="dark"] table { color: #dde6f0; } html[data-theme="dark"] th { background: #0d1929 !important; color: #9ab0c4; border-color: #1e3248 !important; } html[data-theme="dark"] td { border-color: #1a2d40; } html[data-theme="dark"] tr:hover > td { background: #1a2a3a; } /* ── Dashboard stat cards ────────────────────────────────────── */ html[data-theme="dark"] .stat-card { background: #152030 !important; } html[data-theme="dark"] .stat-card h3 { color: #9ab0c4 !important; } /* ── Planner page ────────────────────────────────────────────── */ html[data-theme="dark"] .week-grid { background: transparent; } html[data-theme="dark"] .day-col { background: #152030; border-color: #1e3248; } html[data-theme="dark"] .day-header { background: #0d1929 !important; border-bottom-color: #1e3248; color: #9ab0c4; } html[data-theme="dark"] .day-header.today { background: #0d2035 !important; } html[data-theme="dark"] .plan-item { background: #1a2a3a; border-color: #1e3248; } html[data-theme="dark"] .plan-item:hover { background: #1e3248; } html[data-theme="dark"] .plan-item .cust-name { color: #dde6f0; } html[data-theme="dark"] .plan-item .cust-class { color: #9ab0c4; } /* ── Customers list ──────────────────────────────────────────── */ html[data-theme="dark"] .cust-row { background: #152030; border-bottom-color: #1a2d40; } html[data-theme="dark"] .cust-row:hover { background: #1a2a3a; } html[data-theme="dark"] .cust-row .cust-name { color: #dde6f0; } html[data-theme="dark"] .filter-bar { background: #152030; border-color: #1e3248; } html[data-theme="dark"] .filter-bar input, html[data-theme="dark"] .filter-bar select { background: #0d1929; border-color: #1e3248; color: #dde6f0; } /* ── Login / auth pages ──────────────────────────────────────── */ html[data-theme="dark"] .login-wrap, html[data-theme="dark"] .auth-wrap { background: #0e1621; } html[data-theme="dark"] .login-card, html[data-theme="dark"] .auth-card { background: #152030; box-shadow: 0 4px 24px rgba(0,0,0,0.5); } html[data-theme="dark"] .login-card input, html[data-theme="dark"] .auth-card input { background: #0d1929; border-color: #1e3248; color: #dde6f0; } /* ── Scheduler page ──────────────────────────────────────────── */ html[data-theme="dark"] .sched-card { background: #152030 !important; } html[data-theme="dark"] .sched-section-header { color: #9ab0c4 !important; border-bottom-color: #1e3248 !important; } html[data-theme="dark"] .trip-block { background: #1a2a3a !important; border-color: #1e3248 !important; } /* ── Misc inline-style overrides ────────────────────────────── */ html[data-theme="dark"] .page { background: transparent; } /* Sections with hardcoded #f8fafc / #f0f4f8 secondary backgrounds */ html[data-theme="dark"] .two-col > div > .card { background: #152030; } html[data-theme="dark"] .log-row .field input, html[data-theme="dark"] .log-row .field select { background: #0d1929; border-color: #1e3248; color: #dde6f0; } /* Missed visits warning banner */ html[data-theme="dark"] [style*="background:#fffbf0"], html[data-theme="dark"] [style*="background: #fffbf0"] { background: #1a1500 !important; } /* ── Native app (Capacitor) safe-area fixes ────────────────────────────── html.cap-native is set by help_menu.js when window.Capacitor exists. display-mode:standalone does NOT match in Capacitor's WebView, so a media query won't work — we key off the class instead. viewport-fit=cover (set on every page) makes env() insets non-zero. */ /* Hide dark mode toggle in the native app */ html.cap-native #mrd-theme-btn { display: none !important; } /* Extend the sticky nav bar up to cover the status bar / Dynamic Island */ html.cap-native .nav { padding-top: env(safe-area-inset-top, 44px); height: calc(56px + env(safe-area-inset-top, 44px)); } /* Lift the bottom nav above the home indicator */ html.cap-native .mob-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }