/* ═══════════════════════════════════════════════════════════════ companion-plus.css — MAIN admin: Companion+ suite + dark mode. Loaded only by index.html (never the companion). Three jobs: 1. Define the accent/status tokens the ported feature UI expects (admin-panel.css only defines --op-*), plus the dark palette. 2. Style the Companion+ header button and its Apple-style dropdown. 3. A dark re-skin, gated under :root[data-theme="dark"] so the existing LIGHT look is left completely untouched. ═══════════════════════════════════════════════════════════════ */ /* ── 1. tokens ─────────────────────────────────────────────────── */ :root { --at-green:#2f8f57; --at-green-bg:#e6f4ec; --at-amber:#b7791f; --at-amber-bg:#fbf0d9; --at-red:#c23b3b; --at-red-bg:#fbe9e9; --op-accent-bg: rgba(161,28,30,0.06); --op-accent-subtle: rgba(161,28,30,0.06); --op-shadow-lg: 0 16px 44px rgba(30,25,22,0.16); } /* Dark palette — flips the tokens the admin + feature UI consume. Only takes effect when . */ :root[data-theme="dark"] { --op-bg: #0e0e11; --op-surface: #1a1a1f; --op-border: #34343d; --op-border-subtle: #26262c; --op-text-primary: #f5f5f7; --op-text-secondary:#c4c4cf; --op-text-muted: #9a9aa6; --op-accent: #f2555a; --op-accent-bg: rgba(242,85,90,0.14); --op-accent-subtle: rgba(242,85,90,0.14); --op-shadow-lg: 0 16px 44px rgba(0,0,0,0.6); --at-green:#4ec07f; --at-green-bg:#14291d; --at-amber:#e0a94a; --at-amber-bg:#2c2410; --at-red:#f2555a; --at-red-bg:#341c1e; /* admin-panel.css defines these light at :root — flip them so the admin product list (thumbnails, badges, action buttons, inputs) goes dark. */ --at-bg:#0e0e11; --at-surface:#1a1a1f; --at-border:#34343d; --at-text:#f5f5f7; --at-text-2:#c4c4cf; --at-text-3:#9a9aa6; } /* The ported overlays use a low z-index in the companion (its own stacking context). In the main admin they must sit above the admin panel and its overlays, but below the Companion+ dropdown. */ #cmp-chat, #cmp-tasks, #cmp-profile { z-index: 10050; } /* ── 2. Companion+ button + dropdown ───────────────────────────── */ .cmp-plus-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; color: #fff; border: none; border-radius: 10px; padding: 8px 14px 8px 11px; background: linear-gradient(135deg, #6d28d9, #a11c1e); box-shadow: 0 2px 8px rgba(109,40,217,0.28); } .cmp-plus-btn:hover { filter: brightness(1.06); } .cmp-plus-btn:active { transform: scale(0.97); } .cmp-plus-spark { display: inline-flex; } .cmp-plus-spark svg { width: 16px; height: 16px; } .cmp-plus-label { letter-spacing: -0.01em; } .cmp-plus-plus { font-weight: 800; opacity: 0.9; margin-left: -3px; } .cmp-plus-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #fbbf24; color: #3a2a00; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--op-surface, #fff); } .cmp-plus-scrim { position: fixed; inset: 0; z-index: 12000; background: transparent; } .cmp-plus-menu { position: fixed; z-index: 12001; width: 300px; max-width: calc(100vw - 16px); background: var(--op-surface); color: var(--op-text-primary); border: 1px solid var(--op-border); border-radius: 18px; padding: 8px; box-shadow: var(--op-shadow-lg); transform-origin: top right; transform: scale(0.96) translateY(-6px); opacity: 0; transition: transform 0.16s cubic-bezier(0.2,0.8,0.2,1), opacity 0.16s ease; } .cmp-plus-menu.show { transform: scale(1) translateY(0); opacity: 1; } .cmp-plus-arrow { position: absolute; top: -7px; right: 22px; width: 13px; height: 13px; background: var(--op-surface); border-left: 1px solid var(--op-border); border-top: 1px solid var(--op-border); transform: rotate(45deg); border-radius: 3px 0 0 0; } .cmp-plus-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--op-text-muted); padding: 8px 10px 6px; } .cmp-plus-head span { color: var(--op-accent); } .cmp-plus-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font-family: inherit; cursor: pointer; color: var(--op-text-primary); background: none; border: none; border-radius: 12px; padding: 10px 10px; } .cmp-plus-item:hover { background: var(--op-border-subtle); } .cmp-plus-item:active { transform: scale(0.99); } .cmp-plus-item-ic { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--op-border-subtle); color: var(--op-text-secondary); } .cmp-plus-item-ic svg { width: 19px; height: 19px; } .cmp-plus-item-ic.blue { background: rgba(59,130,246,0.14); color: #3b82f6; } .cmp-plus-item-ic.green { background: var(--at-green-bg); color: var(--at-green); } .cmp-plus-item-ic.amber { background: var(--at-amber-bg); color: var(--at-amber); } .cmp-plus-item-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cmp-plus-item-t { font-size: 14.5px; font-weight: 700; } .cmp-plus-item-s { font-size: 12px; color: var(--op-text-muted); } .cmp-plus-item-r { display: flex; align-items: center; flex-shrink: 0; } .cmp-plus-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #3b82f6; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } .cmp-plus-count.amber { background: var(--at-amber); } .cmp-plus-div { height: 1px; background: var(--op-border); margin: 6px 8px; } .cmp-plus-switch { width: 42px; height: 25px; border-radius: 999px; background: var(--op-border); position: relative; transition: background 0.15s; } .cmp-plus-switch.on { background: var(--op-accent); } .cmp-plus-switch-k { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s; } .cmp-plus-switch.on .cmp-plus-switch-k { transform: translateX(17px); } /* Standalone light/dark toggle button (header, next to Companion+). */ .cmp-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex-shrink: 0; cursor: pointer; border-radius: 10px; border: 1px solid var(--op-border, #e5e5ea); background: var(--op-surface, #fff); color: var(--op-text-secondary, #444); padding: 0; transition: background 0.15s, color 0.15s, transform 0.1s; } .cmp-theme-btn:hover { color: var(--op-text-primary, #111); } .cmp-theme-btn:active { transform: scale(0.93); } .cmp-theme-btn svg { width: 18px; height: 18px; } /* "Signed in as …" row at the top of the dropdown. */ .cmp-plus-who { padding: 0 10px 8px; font-size: 12.5px; color: var(--op-text-muted); } .cmp-plus-who b { color: var(--op-text-secondary); font-weight: 700; } /* ── companion sign-in modal ───────────────────────────────────── */ .cmpx-login { position: fixed; inset: 0; z-index: 13000; display: flex; align-items: center; justify-content: center; padding: 16px; } .cmpx-login.hidden { display: none; } .cmpx-login-scrim { position: absolute; inset: 0; background: rgba(10,10,14,0.55); backdrop-filter: blur(2px); } .cmpx-login-card { position: relative; width: 100%; max-width: 380px; background: var(--op-surface, #fff); color: var(--op-text-primary, #111); border: 1px solid var(--op-border, #e5e5ea); border-radius: 20px; padding: 26px 24px 24px; box-shadow: var(--op-shadow-lg, 0 20px 60px rgba(0,0,0,0.25)); transform: scale(0.94) translateY(8px); opacity: 0; transition: transform 0.2s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease; } .cmpx-login.show .cmpx-login-card { transform: scale(1) translateY(0); opacity: 1; } .cmpx-login-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 9px; background: var(--op-border-subtle, #f1f1f4); color: var(--op-text-muted, #888); } .cmpx-login-x svg { width: 17px; height: 17px; } .cmpx-login-x:hover { color: var(--op-text-primary, #111); } .cmpx-login-spark { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6d28d9, #a11c1e); color: #fff; margin-bottom: 12px; } .cmpx-login-spark svg { width: 24px; height: 24px; } .cmpx-login-t { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; } .cmpx-login-s { font-size: 0.9rem; line-height: 1.4; color: var(--op-text-muted); margin: 0 0 18px; } .cmpx-login-form { display: flex; flex-direction: column; gap: 12px; } .cmpx-field { display: flex; flex-direction: column; gap: 5px; } .cmpx-field > span { font-size: 12px; font-weight: 700; color: var(--op-text-secondary); } .cmpx-field input { font-family: inherit; font-size: 0.95rem; padding: 11px 13px; border-radius: 11px; border: 1px solid var(--op-border, #dcdce2); background: var(--op-bg, #fff); color: var(--op-text-primary, #111); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .cmpx-field input:focus { border-color: #6d28d9; box-shadow: 0 0 0 3px rgba(109,40,217,0.16); } .cmpx-remember { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--op-text-secondary); cursor: pointer; } .cmpx-remember input { width: 16px; height: 16px; accent-color: #6d28d9; } .cmpx-login-err { font-size: 0.85rem; color: #dc2626; margin: 0; } :root[data-theme="dark"] .cmpx-login-err { color: #f87171; } .cmpx-login-btn { margin-top: 4px; font-family: inherit; font-size: 0.98rem; font-weight: 700; cursor: pointer; color: #fff; border: none; border-radius: 12px; padding: 12px; background: linear-gradient(135deg, #6d28d9, #a11c1e); box-shadow: 0 2px 10px rgba(109,40,217,0.3); } .cmpx-login-btn:hover { filter: brightness(1.06); } .cmpx-login-btn:active { transform: scale(0.98); } .cmpx-login-btn:disabled { opacity: 0.7; cursor: default; } /* ── 3. Dark re-skin (admin panel + overlays). LIGHT is untouched. ─ */ :root[data-theme="dark"] body { background: #141210; color: var(--op-text-primary); } :root[data-theme="dark"] #admin-panel { background: var(--op-bg); color: var(--op-text-primary); } :root[data-theme="dark"] #admin-panel .admin-header { background: var(--op-surface); border-bottom-color: var(--op-border); } :root[data-theme="dark"] #admin-panel .admin-header-title { color: var(--op-text-primary); } :root[data-theme="dark"] #admin-panel .admin-menu-toggle { background: var(--op-bg); border-color: var(--op-border); color: var(--op-text-primary); } :root[data-theme="dark"] #admin-panel .admin-header-actions { background: var(--op-surface); } :root[data-theme="dark"] .admin-gallery-btn, :root[data-theme="dark"] .admin-crash-reports-btn { background: var(--op-bg); border-color: var(--op-border); color: var(--op-text-primary); } :root[data-theme="dark"] .admin-close-btn { background: var(--op-accent); border-color: var(--op-accent); color: #fff; } :root[data-theme="dark"] .admin-sidebar { background: var(--op-surface); border-right-color: var(--op-border); border-bottom-color: var(--op-border); } :root[data-theme="dark"] .admin-content-area, :root[data-theme="dark"] .admin-item-list { background: var(--op-bg); } :root[data-theme="dark"] .admin-section-tab, :root[data-theme="dark"] .admin-cat-tab { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-secondary); } :root[data-theme="dark"] .admin-section-tab.active, :root[data-theme="dark"] .admin-cat-tab.active { background: var(--op-accent); border-color: var(--op-accent); color: #fff; } :root[data-theme="dark"] .admin-cat-tab-add-btn { background: transparent; border: 1px dashed var(--op-border); color: var(--op-text-muted); } /* Generic surfaces inside the admin + its overlays */ :root[data-theme="dark"] .orders-shell, :root[data-theme="dark"] .gallery-shell, :root[data-theme="dark"] #co-modal-inner, :root[data-theme="dark"] [id$="-overlay"] .orders-shell, :root[data-theme="dark"] .orders-header, :root[data-theme="dark"] .admin-add-row { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-primary); } :root[data-theme="dark"] [id$="-overlay"] { color: var(--op-text-primary); } /* Cards / tables / rows */ :root[data-theme="dark"] .at-table, :root[data-theme="dark"] .at-table tbody tr, :root[data-theme="dark"] .at-card, :root[data-theme="dark"] .order-card, :root[data-theme="dark"] .stk-card, :root[data-theme="dark"] .inv-card, :root[data-theme="dark"] .fin-card { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-primary); } :root[data-theme="dark"] .at-table th { background: var(--op-bg); color: var(--op-text-secondary); border-color: var(--op-border); } :root[data-theme="dark"] .at-table td { border-color: var(--op-border-subtle); } /* Inputs / selects / textareas / buttons */ :root[data-theme="dark"] #admin-panel input, :root[data-theme="dark"] #admin-panel select, :root[data-theme="dark"] #admin-panel textarea, :root[data-theme="dark"] [id$="-overlay"] input, :root[data-theme="dark"] [id$="-overlay"] select, :root[data-theme="dark"] [id$="-overlay"] textarea, :root[data-theme="dark"] .at-input, :root[data-theme="dark"] .at-select, :root[data-theme="dark"] .co-field-input { background: var(--op-surface); color: var(--op-text-primary); border-color: var(--op-border); } :root[data-theme="dark"] #admin-panel input::placeholder, :root[data-theme="dark"] [id$="-overlay"] input::placeholder { color: var(--op-text-muted); } /* The Companion+ badge ring reads better on the dark header */ :root[data-theme="dark"] .cmp-plus-badge { box-shadow: 0 0 0 2px var(--op-surface); } /* Admin product list — hardcoded light leaks the token flip can't reach */ :root[data-theme="dark"] .at-img-remove-btn { background: var(--at-red-bg) !important; color: #f2555a !important; border-color: rgba(242,85,90,0.4) !important; } :root[data-theme="dark"] .at-img-remove-btn:hover { background: rgba(242,85,90,0.22) !important; } /* Badges: keep the coloured fills but darken the light borders + the blue "Visible" pill */ :root[data-theme="dark"] .at-badge.stock-in { border-color: rgba(78,192,127,0.4); } :root[data-theme="dark"] .at-badge.stock-out { border-color: rgba(242,85,90,0.4); } :root[data-theme="dark"] .at-badge.vis-on { background: rgba(59,130,246,0.16); color: #6aa8ff; border-color: rgba(59,130,246,0.4); } :root[data-theme="dark"] .at-badge.vis-off { background: var(--at-surface); color: var(--at-text-3); border-color: var(--at-border); } /* Action buttons (save / delete) — base has a hardcoded white bg */ :root[data-theme="dark"] .at-act-btn { background: var(--at-surface) !important; color: var(--at-text-2); } :root[data-theme="dark"] .at-act-btn:hover { background: var(--op-border-subtle) !important; } :root[data-theme="dark"] .at-act-btn.save { color: #6aa8ff; border-color: rgba(59,130,246,0.4); } :root[data-theme="dark"] .at-act-btn.save:hover { background: rgba(59,130,246,0.16); } :root[data-theme="dark"] .at-act-btn.del:hover { background: var(--at-red-bg); } /* Stock quick-adjuster (Stock column) */ :root[data-theme="dark"] .stk-adjust { background: var(--at-surface); border-color: var(--at-border); } :root[data-theme="dark"] .stk-step { background: var(--op-border-subtle); color: var(--at-text); } :root[data-theme="dark"] .stk-step:hover { background: var(--at-border); } :root[data-theme="dark"] .stk-now { background: var(--at-surface); color: var(--at-text); } /* Category quick buttons */ :root[data-theme="dark"] .admin-cat-save-btn { background: var(--op-border-subtle); color: var(--at-text); } :root[data-theme="dark"] .admin-cat-del-btn { background: var(--at-red-bg); color: #f2555a; } :root[data-theme="dark"] .admin-cat-toggle-btn.cat-visible { background: var(--at-green-bg); color: #4ec07f; } /* Visibility toggle button + the "+ Add Product" footer row */ :root[data-theme="dark"] .admin-visibility-btn { background: var(--at-surface); color: var(--at-text-2); border-color: var(--at-border); } :root[data-theme="dark"] .admin-visibility-btn:hover { background: var(--op-border-subtle); border-color: #A11C1E; color: #f2555a; } :root[data-theme="dark"] .admin-add-row { background: var(--op-surface); } /* ── Discount Codes panel (dc-*): white tab strip + cards + chips ───── */ :root[data-theme="dark"] .dc-tabs { background: var(--op-surface); border-bottom-color: var(--op-border); } :root[data-theme="dark"] .dc-tab { color: var(--op-text-secondary); } :root[data-theme="dark"] .dc-tab:hover { color: var(--op-text-primary); background: var(--op-bg); } :root[data-theme="dark"] .dc-tab-count { background: var(--op-border-subtle); color: var(--op-text-secondary); } :root[data-theme="dark"] .dc-create, :root[data-theme="dark"] .dc-batch, :root[data-theme="dark"] .dc-named-card { background: var(--op-surface); border-color: var(--op-border); } :root[data-theme="dark"] .dc-create-title, :root[data-theme="dark"] .dc-named-code, :root[data-theme="dark"] .dc-chip-code, :root[data-theme="dark"] .dc-stat-n { color: var(--op-text-primary); } :root[data-theme="dark"] .dc-create-sub, :root[data-theme="dark"] .dc-field > label, :root[data-theme="dark"] .dc-section-title, :root[data-theme="dark"] .dc-batch-meta, :root[data-theme="dark"] .dc-named-meta, :root[data-theme="dark"] .dc-stat-l { color: var(--op-text-muted); } :root[data-theme="dark"] .dc-field input, :root[data-theme="dark"] .dc-field select { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-primary); } :root[data-theme="dark"] .dc-batch-head { background: var(--op-bg); border-bottom-color: var(--op-border); } :root[data-theme="dark"] .dc-batch-btn { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-secondary); } :root[data-theme="dark"] .dc-batch-btn:hover { background: var(--op-bg); } :root[data-theme="dark"] .dc-stat { background: var(--op-bg); border-color: var(--op-border); } :root[data-theme="dark"] .dc-chip--active { background: rgba(22,163,74,0.14); border-color: rgba(22,163,74,0.42); } :root[data-theme="dark"] .dc-chip--active:hover { background: rgba(22,163,74,0.22); } :root[data-theme="dark"] .dc-chip--used { background: var(--op-bg); border-color: var(--op-border); } :root[data-theme="dark"] .dc-chip-qr { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-secondary); } /* ── Driver Fees panel (df-*): white driver cards + buttons + table ─── */ :root[data-theme="dark"] .df-driver-card { background: var(--op-surface); border-color: var(--op-border); } :root[data-theme="dark"] .df-driver-card:hover { border-color: var(--op-text-secondary); } :root[data-theme="dark"] .df-driver-name { color: var(--op-text-primary); } :root[data-theme="dark"] .df-driver-phone { color: var(--op-text-muted); } :root[data-theme="dark"] .df-driver-meta { background: var(--op-bg); color: var(--op-text-secondary); } :root[data-theme="dark"] .df-btn { background: var(--op-surface); border-color: var(--op-border); color: var(--op-text-secondary); } :root[data-theme="dark"] .df-btn:hover { border-color: var(--op-text-secondary); } :root[data-theme="dark"] .df-table th { color: var(--op-text-muted); } :root[data-theme="dark"] .df-table th, :root[data-theme="dark"] .df-table td { border-bottom-color: var(--op-border-subtle); } :root[data-theme="dark"] .df-table .df-total-row td { border-top-color: var(--op-text-secondary); } /* Crash Reports Delete button is a bare native