/* default.css — Officer Assist "Default" (navy / cobalt / steel) Built to match midnight.css token coverage for drop-in parity. Activate with: */ /* ======================================================================= GLOBAL SITE THEME ======================================================================= */ html[data-theme="default"]{ /* Canvas + tiered surfaces (navy slate) */ --oa-canvas: #0e1420; /* page bg */ --oa-surface-1: #121b2a; /* toolbars / subtle */ --oa-surface-2: #16243a; /* default card */ --oa-surface-3: #1b2d46; /* raised card */ /* Border/focus tiers (steel blue) */ --oa-surface-4: rgba(170,195,225,.14); --oa-surface-5: rgba(170,195,225,.22); --oa-surface-6: rgba(170,195,225,.32); /* Back-compat alias */ --oa-surface: var(--oa-surface-2); /* Typography */ --oa-heading: #e8eef7; /* near-white with blue bias */ --oa-text: #bccae0; /* body text */ --oa-text-muted: #9fb6d6; /* muted text */ /* Brand & states (cobalt primary) */ --oa-primary: #2f6bb3; /* cobalt */ --oa-primary-hover: #275b9b; --oa-primary-contrast: #06101d; /* Semantic states */ --oa-success: #31c48d; /* teal-green */ --oa-warning: #f7b23b; /* warm amber */ --oa-danger: #ef5350; /* soft red */ --oa-info: #35c0ff; /* sky */ --oa-accent: var(--oa-primary); --oa-success-contrast: #06120e; --oa-warning-contrast: #201400; --oa-danger-contrast: #ffffff; --oa-info-contrast: #00121b; /* Inputs */ --oa-input-bg: #142238; --oa-input-border: var(--oa-surface-5); --oa-input-focus: var(--oa-primary); --oa-placeholder: #9cb1d0; --oa-focus-ring: color-mix(in srgb, var(--oa-primary) 28%, transparent); /* Cards & chrome */ --oa-card-bg: #1c2e4a; /* steel navy */ --oa-card-border: var(--oa-surface-4); --oa-shadow: 0 12px 30px rgba(6,12,22,.50); --oa-toolbar-bg: #15233a; --oa-chip-bg: rgba(47,107,179,.16); /* Links */ --oa-link: #93c5fd; --oa-link-hover: #2f6bb3; /* Select menus / misc */ --oa-select-options-bg: #2a4162; --oa-done: #2a61b0; /* Blur overlays */ --oa-blur-bg: color-mix(in oklab, var(--oa-canvas) 82%, transparent); /* Radii / elevations */ --oa-radius: .75rem; --oa-elev-2: 0 6px 24px rgba(0,0,0,.22); /* Convenience border alias */ --oa-border: var(--oa-surface-4); /* ----------------------------------------------------------------------- ACTION TINTS (single source of truth) — used by .btn-tint helpers ----------------------------------------------------------------------- */ --oa-scan: #e5ef8b; --oa-camera: #7ee6a2; --oa-last: #7286c9; --oa-back: #7ab7ff; --oa-next: #2fb39f; --oa-cancel: #f59e0b; /* ----------------------------------------------------------------------- BOOTSTRAP DROPDOWNS (fix low-contrast “Actions” menu everywhere) ----------------------------------------------------------------------- */ --bs-dropdown-bg: var(--oa-surface-3); --bs-dropdown-border-color: var(--oa-card-border); --bs-dropdown-divider-bg: var(--oa-surface-5); --bs-dropdown-link-color: var(--oa-text); --bs-dropdown-link-hover-color: var(--oa-heading); --bs-dropdown-link-hover-bg: color-mix(in oklab, var(--oa-primary) 14%, var(--oa-surface-3)); --bs-dropdown-link-active-color: var(--oa-primary-contrast); --bs-dropdown-link-active-bg: var(--oa-primary); --bs-dropdown-header-color: var(--oa-text-muted); } /* ======================================================================= DASHBOARD PAGE ======================================================================= */ html[data-theme="default"]{ --oa-dashbtn-1-bg: #dc2626; --oa-dashbtn-1-hover: #b91c1c; --oa-dashbtn-1-border: rgba(220,38,38,.4); --oa-dashbtn-1-fg: #000000; --oa-dashbtn-2-bg: #f59e0b; --oa-dashbtn-2-hover: #d97706; --oa-dashbtn-2-border: rgba(245,158,11,.35); --oa-dashbtn-2-fg: #111; --oa-dashbtn-2-fg-hover: #fff; --oa-dashbtn-3-bg: #c2410c; --oa-dashbtn-3-hover: #9a3412; --oa-dashbtn-3-border: rgba(194,65,12,.45); --oa-dashbtn-3-fg: #000000; --oa-dashbtn-4-bg: #21a551; --oa-dashbtn-4-hover: #1d8643; --oa-dashbtn-4-border: rgba(34,197,94,.35); --oa-dashbtn-4-fg: #000000; --oa-dashbtn-5-bg: #787d86; --oa-dashbtn-5-hover: #727880; --oa-dashbtn-5-border: rgba(71,85,105,.35); --oa-dashbtn-5-fg: #000000; --oa-dashbtn-6-bg: #0f5e76; --oa-dashbtn-6-hover: #11535e; --oa-dashbtn-6-border: rgba(15,118,110,.35); --oa-dashbtn-6-fg: #000000; --oa-dashbtn-7-bg: #5e24aa; --oa-dashbtn-7-hover: #662baa; --oa-dashbtn-7-border: rgba(55, 18, 124, 0.5); --oa-dashbtn-7-fg: #000000; --oa-dashbtn-8-bg: #2e31e4; --oa-dashbtn-8-hover: #4f46e5; --oa-dashbtn-8-border: rgba(99,102,241,.35); --oa-dashbtn-8-fg: #000000; --oa-dashbtn-8-fg-hover: #052e16; /* FIXED: this was accidentally using amber hover/border */ --oa-dashbtn-9-bg: #226aad; --oa-dashbtn-9-hover: #1c578e; --oa-dashbtn-9-border: rgba(34,106,173,.35); --oa-dashbtn-9-fg: #111; --oa-dashbtn-9-fg-hover: #fff; /* FIXED: border was neon/yellowish; keep admin slate */ --oa-dashbtn-10-bg: #334155; /* slate / gunmetal */ --oa-dashbtn-10-hover: #1e293b; --oa-dashbtn-10-border: rgba(51,65,85,.35); --oa-dashbtn-10-fg: #000000; --oa-dashbtn-10-fg-hover: #ffffff; } /* ======================================================================= SHARED (Citation/Warning/Driver Info) ======================================================================= */ html[data-theme="default"]{ /* top banners */ --oa-banner-citation-bg: #1a2c4a; --oa-banner-citation-bor: #27426c; --oa-banner-citation-fg: #dbe6ff; --oa-banner-warning-bg: #3a2a0c; --oa-banner-warning-bor: #614511; --oa-banner-warning-fg: #ffe2a8; --oa-banner-neutral-bg: #1c2436; --oa-banner-neutral-bor: #2a344a; --oa-banner-neutral-fg: #d5def0; /* info strip */ --oa-alert-info-bg: #0f2438; --oa-alert-info-bor: #1b3b5a; --oa-alert-info-fg: #cfe9ff; /* expanders / checklists */ --oa-expander-bg: var(--oa-surface-2); --oa-expander-bor: var(--oa-card-border); --oa-expander-fg: var(--oa-text); --oa-checklist-bg: var(--oa-surface-2); --oa-checklist-bor:var(--oa-card-border); } /* Alerts (Bootstrap class mapping) */ html[data-theme="default"]{ --oa-alert-primary-bg: color-mix(in oklab, var(--oa-primary) 18%, var(--oa-surface-2)); --oa-alert-primary-bd: color-mix(in oklab, var(--oa-primary) 42%, black); --oa-alert-primary-fg: var(--oa-heading); --oa-alert-warning-bg: color-mix(in oklab, var(--oa-warning) 22%, var(--oa-surface-2)); --oa-alert-warning-bd: color-mix(in oklab, var(--oa-warning) 42%, black); --oa-alert-warning-fg: #1f1300; --oa-alert-danger-bg: color-mix(in oklab, var(--oa-danger) 18%, var(--oa-surface-2)); --oa-alert-danger-bd: color-mix(in oklab, var(--oa-danger) 44%, black); --oa-alert-danger-fg: #fff; } html[data-theme="default"] .alert-primary{ background: var(--oa-alert-primary-bg)!important; border-color: var(--oa-alert-primary-bd)!important; color: var(--oa-alert-primary-fg)!important; } html[data-theme="default"] .alert-warning{ background: var(--oa-alert-warning-bg)!important; border-color: var(--oa-alert-warning-bd)!important; color: var(--oa-alert-warning-fg)!important; } html[data-theme="default"] .alert-danger{ background: var(--oa-alert-danger-bg)!important; border-color: var(--oa-alert-danger-bd)!important; color: var(--oa-alert-danger-fg)!important; } /* Outline-primary (e.g., “Map It”) */ html[data-theme="default"] .btn-outline-primary{ color: var(--oa-primary)!important; border-color: var(--oa-primary)!important; } html[data-theme="default"] .btn-outline-primary:hover{ background: color-mix(in oklab, var(--oa-primary) 14%, var(--oa-surface-2))!important; border-color: color-mix(in oklab, var(--oa-primary) 86%, black)!important; } /* Expanders in Driver Info */ html[data-theme="default"] .expander.form-control{ background: var(--oa-input-bg)!important; border-color: var(--oa-input-border)!important; color: var(--oa-text)!important; } html[data-theme="default"] .expander.form-control:focus{ border-color: var(--oa-input-focus)!important; box-shadow: 0 0 0 .2rem var(--oa-focus-ring)!important; } /* Collapsed panels */ html[data-theme="default"] .bg-dark-subtle{ background: color-mix(in oklab, var(--oa-surface-2) 92%, black)!important; border: 1px solid var(--oa-card-border)!important; color: var(--oa-text)!important; } /* Inputs/checkboxes focus & checked */ html[data-theme="default"] .form-check-input:checked{ background-color: var(--oa-primary)!important; border-color: var(--oa-primary)!important; } html[data-theme="default"] .form-check-input:focus{ box-shadow: 0 0 0 .2rem var(--oa-focus-ring)!important; border-color: var(--oa-input-focus)!important; } /* PDF frames */ html[data-theme="default"] .preview-frame, html[data-theme="default"] iframe#pdfFrame{ border-top: 1px solid var(--oa-card-border)!important; border-bottom: 1px solid var(--oa-card-border)!important; background: var(--oa-surface-1); } /* Options card labels */ html[data-theme="default"] .options-card .form-check-label{ color: var(--oa-text)!important; } html[data-theme="default"] .options-card .form-check-input:checked{ background-color: var(--oa-primary)!important; border-color: var(--oa-primary)!important; } /* Sticky bar (if used) */ html[data-theme="default"] .sticky-actions{ position: sticky; bottom: 0; padding: .75rem 0 .25rem; background: var(--oa-blur-bg); backdrop-filter: blur(6px); border-top: 1px solid var(--oa-card-border); z-index: 5; } /* Spinners */ html[data-theme="default"] .spinner-border{ --bs-spinner-border-color: var(--oa-heading); --bs-spinner-animation-speed: .75s; } /* ======================================================================= CITATION PAGE ======================================================================= */ html[data-theme="default"]{ --oa-sticky-bg: color-mix(in oklab, var(--oa-canvas) 78%, var(--oa-surface-2)); --oa-sticky-border: var(--oa-card-border); --oa-sticky-shadow: 0 -10px 30px rgba(10,18,32,.45); } /* ======================================================================= WARNING PAGE ======================================================================= */ html[data-theme="default"]{ --oa-warning-card-bg: #2a3d5e; --oa-warning-card-border: rgba(170,195,225,.20); } /* ======================================================================= DUI PACKET PAGE ======================================================================= */ /* (tokens can be added later if needed) */ /* ======================================================================= CITE & RELEASE ======================================================================= */ html[data-theme="default"]{ --oa-warrant-card-bg: #2a3b57; /* steel blue */ --oa-warrant-card-border: rgba(170,195,225,.22); } html[data-theme="default"] .oa-warrant-shell{ background: var(--oa-surface-2)!important; border-color: var(--oa-warrant-card-border, var(--oa-card-border))!important; } html[data-theme="default"] .oa-warrant-card{ background: var(--oa-warrant-card-bg, var(--oa-surface-2))!important; border-color: var(--oa-warrant-card-border, var(--oa-card-border))!important; } html[data-theme="default"] #aamvaReviewContainer{ background: color-mix(in oklab, var(--oa-surface-2) 94%, black); border-color: var(--oa-card-border); color: var(--oa-text); } /* ======================================================================= HISTORY PAGE ======================================================================= */ html[data-theme="default"]{ --oa-btn-delete-bg: #c0382f; --oa-btn-delete-hover: #a92f28; --oa-btn-delete-border: #7a231e; --oa-btn-delete-fg: #ffffff; --oa-btn-delete-ring: rgba(203, 45, 39, .35); --oa-btn-view-bg: #2f6bb3; /* cobalt */ --oa-btn-view-hover: #275b9b; --oa-btn-view-border: #214e86; --oa-btn-view-fg: #ffffff; --oa-btn-view-ring: rgba(47,107,179,.35); --oa-btn-email-bg: #6366f1; /* indigo */ --oa-btn-email-hover: #5457e4; --oa-btn-email-border: #4448c9; --oa-btn-email-fg: #ffffff; --oa-btn-email-ring: rgba(99,102,241,.35); } html[data-theme="default"] .cell-actions .btn-group > .btn{ display:inline-flex; align-items:center; gap:.4rem; line-height:1; } /* ======================================================================= LIBRARY PAGE ======================================================================= */ /* (tokens can be added later if needed) */ /* ======================================================================= QUICK LINKS PAGE ======================================================================= */ /* (tokens can be added later if needed) */ /* ======================================================================= VIEW MAP PAGE ======================================================================= */ /* (tokens can be added later if needed) */ /* ======================================================================= USER SETTINGS PAGE ======================================================================= */ html[data-theme="default"] .settings-tabs .nav-link:hover{ background: color-mix(in oklab, var(--oa-primary) 10%, var(--oa-card-bg))!important; border-color: color-mix(in oklab, var(--oa-primary) 35%, var(--oa-card-border))!important; } html[data-theme="default"] .settings-tabs .nav-link.active, html[data-theme="default"] .settings-tabs .show > .nav-link{ background: var(--oa-primary)!important; border-color: var(--oa-primary)!important; color: var(--oa-primary-contrast)!important; } /* ======================================================================= ADMIN ACCESS PAGE ======================================================================= */ html[data-theme="default"] #serverSyncModal .modal-title{ color: var(--oa-heading); } html[data-theme="default"] #serverSyncModal .btn-warning{ color: var(--oa-warning-contrast)!important; } /* ===== Ensure selects + their popup are readable in dark theme ===== */ html[data-theme="default"]{ --bs-body-bg: var(--oa-canvas); --bs-body-color: var(--oa-text); --bs-border-color: var(--oa-input-border); --bs-form-select-color: var(--oa-text); --bs-form-select-bg: var(--oa-input-bg); --bs-form-select-border-color: var(--oa-input-border); --bs-form-select-focus-border-color: var(--oa-input-focus); --bs-form-select-focus-box-shadow: 0 0 0 .2rem var(--oa-focus-ring); } html[data-theme="default"] .form-select, html[data-theme="default"] select, html[data-theme="default"] select.form-select { color: var(--oa-text); background-color: var(--oa-input-bg); border-color: var(--oa-input-border); -webkit-text-fill-color: currentColor; color-scheme: dark; } html[data-theme="default"] select option { color: var(--oa-text); background-color: var(--oa-select-options-bg, var(--oa-surface-2)); } html[data-theme="default"] .form-select:focus, html[data-theme="default"] select:focus { border-color: var(--oa-input-focus); box-shadow: 0 0 0 .2rem var(--oa-focus-ring); }