/* ================================================================================================= */
/* ======================================= GLOBAL SITE THEME ======================================= */
/* ================================================================================================= */
/* ========= Ultra-minimal safety fallback ========= */
:root {
  --oa-canvas: #0d1117;
  --oa-surface-2: #112a0f;
  --oa-text: #e5e7eb;
  --oa-card-bg: var(--oa-surface-2);
  --oa-card-border: rgba(255,255,255,.12);
  --oa-primary: #60a5fa;
  --oa-primary-hover: #3b82f6;
  --oa-primary-contrast: #06101e;
  --oa-focus-ring: color-mix(in srgb, var(--oa-primary) 28%, transparent);

  /* Defaults for semantic contrasts used by .btn-oa variants */
  --oa-success: #22c55e;
  --oa-warning: #f59e0b;
  --oa-danger:  #ef4444;
  --oa-info:    #06b6d4;

  --oa-success-contrast: #04110a;
  --oa-warning-contrast: #1b1300;
  --oa-danger-contrast:  #ffffff;
  --oa-info-contrast:    #001317;

  --oa-link: #93c5fd;
  --oa-link-hover: #60a5fa;

  --oa-shadow: 0 6px 24px rgba(0,0,0,.28);

  --oa-chip-bg: rgba(255,255,255,.06);
  --oa-toolbar-bg: #163820;

  /* Action tints defaults */
  --oa-scan:   #e7ee86;
  --oa-camera: #86f08c;
  --oa-last:   #9b63b1;
  --oa-back:   #77d7f5;
  --oa-next:   #25b39b;
  --oa-cancel: #e68201cb;

    /* Beta badge tokens */
  --oa-beta-bg: var(--oa-danger);  /* or #dc3545 */
  --oa-beta-fg: #fff;
  --oa-beta-shadow: 0 2px 8px rgba(0,0,0,.28);
  --oa-beta-size: .75rem;

}

/* =================== Theme fallback (default) =================== */
html[data-theme="default"] {
  /* Canvas & text */
  --oa-canvas: #0d1117;
  --oa-surface: #111827;
  --oa-surface-2: #0f172a;
  --oa-surface-3: #0b1324;

  /* Derived surfaces for subtle borders/dividers */
  --oa-surface-4: color-mix(in oklab, var(--oa-surface) 92%, black);
  --oa-surface-5: color-mix(in oklab, var(--oa-surface) 88%, black);
  --oa-surface-6: color-mix(in oklab, var(--oa-surface) 82%, black);

  --oa-border: rgba(255,255,255,.12);
  --oa-text: #e5e7eb;
  --oa-text-muted: #9aa4b2;
  --oa-heading: #f3f4f6;

  /* Brand + accents */
  --oa-primary: #3b82f6;
  --oa-primary-hover: #2563eb;
  --oa-primary-contrast: #0b1220;

  --oa-success: #16a34a;
  --oa-warning: #f59e0b;
  --oa-danger:  #ef4444;
  --oa-info:    #06b6d4;

  /* Inputs / focus */
  --oa-input-bg: #0f172a;
  --oa-input-border: rgba(255,255,255,.14);
  --oa-input-focus: var(--oa-primary);
  --oa-placeholder: #74829a;
  --oa-focus-ring: color-mix(in oklab, var(--oa-primary) 28%, transparent);

  /* Cards & chrome */
  --oa-card-bg: var(--oa-surface);
  --oa-card-border: var(--oa-border);
  --oa-shadow: 0 6px 24px rgba(0,0,0,.28);

  /* Toolbars / chips */
  --oa-toolbar-bg: var(--oa-surface-2);
  --oa-chip-bg: rgba(255,255,255,.06);

  /* Links */
  --oa-link: #93c5fd;
  --oa-link-hover: #60a5fa;

  /* Contrasts for semantic buttons */
  --oa-success-contrast: #04110a;
  --oa-warning-contrast: #1b1300;
  --oa-danger-contrast:  #ffffff;
  --oa-info-contrast:    #001317;
}

/* =======
   Canvas
   ======= */
body {
  background: var(--oa-canvas);
  color: var(--oa-text);
}

/* ======
   Links
   ====== */
a { color: var(--oa-link); }
a:hover { color: var(--oa-link-hover); }

/* Text helpers mapped to theme tokens */
.text-body-secondary { color: var(--oa-text-muted) !important; }
.text-secondary      { color: var(--oa-text-muted) !important; }
/* Optional: make “light/white” text follow heading tone */
.text-light,
.text-white          { color: var(--oa-heading) !important; }

/* =======================
   Cards / panels / chrome
   ======================= */
.card,
.bg-secondary,
.oa-card {
  background: var(--oa-card-bg) !important;
  border: 1px solid var(--oa-card-border) !important;
  color: var(--oa-text);
  box-shadow: var(--oa-shadow);
}

.oa-section {
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-card-border);
  box-shadow: var(--oa-shadow);
}

.oa-titlebar {
  background: var(--oa-toolbar-bg);
  color: var(--oa-heading);
  border: 1px solid var(--oa-card-border);
  box-shadow: var(--oa-shadow);
}

/* Thin separator that respects theme */
.oa-sep {
  border-color: var(--oa-surface-4) !important;
  opacity: .9;
}

/* =========
   Help text
   ========= */
.form-text,
.text-muted,
.oa-hint { color: var(--oa-text-muted) !important; }

/* =======
   Inputs
   ======= */
.form-control,
.form-select,
.input-group-text,
textarea {
  background: var(--oa-input-bg) !important;
  color: var(--oa-text) !important;
  border: 1px solid var(--oa-input-border) !important;
}
.form-control::placeholder,
textarea::placeholder { color: var(--oa-placeholder) !important; }
.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: var(--oa-input-focus) !important;
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring) !important;
  outline: 0;
}
/* Checkbox visibility on dark themes */
.options-card .form-check-input { background-color: var(--oa-surface-1, var(--oa-surface)); border-color: var(--oa-surface-5); }
.options-card .form-check-input:checked { background-color: var(--oa-primary); border-color: var(--oa-primary); }
.options-card .form-check-input:focus { box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--oa-primary) 24%, transparent); }

/* ==========================
   Buttons (Bootstrap mapping)
   ========================== */
.btn-primary {
  background-color: var(--oa-primary) !important;
  border-color:     var(--oa-primary) !important;
  color:            var(--oa-primary-contrast) !important;
}
.btn-primary:hover {
  background-color: var(--oa-primary-hover) !important;
  border-color:     var(--oa-primary-hover) !important;
}
.btn-secondary {
  background-color: var(--oa-surface-2) !important;
  border-color:     var(--oa-card-border) !important;
  color:            var(--oa-text) !important;
}
.btn-secondary:hover { background-color: var(--oa-surface-3) !important; }

.btn-success { background-color: var(--oa-success) !important; border-color: var(--oa-success) !important; color: var(--oa-success-contrast, #04110a) !important; }
.btn-warning { background-color: var(--oa-warning) !important; border-color: var(--oa-warning) !important; color: var(--oa-warning-contrast, #1b1300) !important; }
.btn-danger  { background-color: var(--oa-danger)  !important; border-color: var(--oa-danger)  !important; color: var(--oa-danger-contrast,  #ffffff) !important; }
.btn-info    { background-color: var(--oa-info)    !important; border-color: var(--oa-info)    !important; color: var(--oa-info-contrast,    #001317) !important; }

.btn-outline-light { border-color: var(--oa-card-border) !important; color: var(--oa-text) !important; }
.btn-outline-light:hover { background: var(--oa-chip-bg) !important; }

.btn-outline-secondary {
  color: var(--oa-text) !important;
  border-color: var(--oa-surface-5) !important;
}
.btn-outline-secondary:hover {
  color: var(--oa-text);
  background: var(--oa-surface-3) !important;
  border-color: var(--oa-surface-6) !important;
}

/* Button motion (kept global) */
.btn { font-weight: 700; font-size: .95rem; padding: 12px; border-radius: 8px; transition: transform .15s ease; }
.btn:hover { transform: translateY(-1px); }

/* =========================================
   OA semantic / dashboard button system
   ========================================= */

/* Base OA button */
.btn-oa {
  --btn-bg: var(--oa-primary);
  --btn-fg: var(--oa-primary-contrast);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background-color: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  border: 1px solid var(--btn-border) !important;

  border-radius: 10px;
  padding: .65rem .9rem;
  font-weight: 800;
  letter-spacing: .01em;
  transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-oa:hover {
  transform: translateY(-1px);
  background-color: color-mix(in oklab, var(--btn-bg) 92%, black) !important;
  border-color: color-mix(in oklab, var(--btn-border, var(--btn-bg)) 92%, black) !important;
}
.btn-oa:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring) !important;
}

/* Ghost style (bordered) */
.btn-oa-ghost {
  --btn-border: var(--oa-card-border);
  --btn-fg: var(--oa-text);
  --btn-bg: color-mix(in oklab, var(--oa-canvas) 96%, var(--oa-card-bg));
}

/* Legacy aliases -> token-driven */
.btn-blue   { background: var(--oa-primary) !important; border-color: var(--oa-primary) !important; color: var(--oa-primary-contrast) !important; }
.btn-purple { background: var(--oa-last, rebeccapurple) !important; border-color: var(--oa-last, rebeccapurple) !important; color: #fff !important; }

/* Keep .bg-secondary tokenized */
.bg-secondary { background: var(--oa-card-bg) !important; color: var(--oa-text) !important; border: 1px solid var(--oa-card-border) !important; }

/* ==========================
   Alerts / toasts / dropdowns
   ========================== */
.alert,
.toast,
.modal-content,
.dropdown-menu {
  background: var(--oa-surface) !important;
  color: var(--oa-text) !important;
  border: 1px solid var(--oa-card-border) !important;
  box-shadow: var(--oa-shadow);
}

/* =======
   Tables
   ======= */
.table {
  --bs-table-bg: var(--oa-surface);
  --bs-table-color: var(--oa-text);
  --bs-table-striped-bg: color-mix(in oklab, var(--oa-surface) 92%, white 8%);
  --bs-table-border-color: var(--oa-card-border);

  background: var(--oa-surface) !important;
  color: var(--oa-text) !important;
  border-color: var(--oa-card-border) !important;
}
.table thead th { color: var(--oa-heading); }

/* =======================
   Misc / small utilities
   ======================= */
.oa-chip {
  background: var(--oa-chip-bg);
  color: var(--oa-text);
  border: 1px solid var(--oa-card-border);
  border-radius: .5rem;
  padding: .25rem .6rem;
}

/* hide scan read out (warrants) */
.oa-sr-input{
  position:absolute; left:-10000px; top:auto;
  width:1px; height:1px; overflow:hidden;
  opacity:0; pointer-events:none;
}

/* PDF preview iframes */
.preview-frame { height: 70vh; min-height: 460px; border: 0; display: block; }

/* PDF viewer wrapper panel */
.oa-pdf-panel {
  background: var(--oa-surface);
  border: 1px solid var(--oa-card-border);
  box-shadow: var(--oa-shadow);
}

/* Avatar utilities */
.avatar    { width: 36px; height: 36px; border-radius: 9999px; object-fit: cover; flex: none; }
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 40px; height: 40px; }
.avatar-lg { width: 56px; height: 56px; }
.avatar-bg { width: 40px; height: 40px; border-radius: 9999px; background-size: cover; background-position: center; }

/* Login logo clamp */
.login-logo { width: clamp(120px, 24vw, 220px); height: auto; display: block; margin-inline: auto; }

/* Optional fixed background helper */
.background {
  position: fixed; inset: 0;
  min-width: 100%; min-height: 100%;
  background: url('../bg/bg1.png') no-repeat center center fixed;
  background-size: cover;
  z-index: -1;
}

/* Outline Primary mapped to theme tokens */
.btn-outline-primary {
  color: var(--oa-primary) !important;
  border-color: var(--oa-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: var(--oa-primary-contrast) !important;
  background: color-mix(in oklab, var(--oa-primary) 18%, transparent) !important;
  border-color: var(--oa-primary-hover) !important;
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring) !important;
}

/* ================================================================================================
   ACTION BUTTONS (scan/camera/last/back/next/cancel/done)
   ================================================================================================ */
.btn-scan   { --btn-bg: var(--oa-scan);   --btn-fg: #0b1220; }
.btn-camera { --btn-bg: var(--oa-camera); --btn-fg: #0b1220; }
.btn-last   { --btn-bg: var(--oa-last);   --btn-fg: #16051a; }
.btn-back   { --btn-bg: var(--oa-back);   --btn-fg: #061018; }
.btn-next   { --btn-bg: var(--oa-next);   --btn-fg: #04110a; }
.btn-cancel { --btn-bg: var(--oa-cancel); --btn-fg: #0b1220; }
.btn-oa-done{ --btn-bg: var(--oa-done);   --btn-fg: #000000; }

/* =================================================================================================
   DASHBOARD PAGE THEME (wire btn-oa-dash-* to theme tokens)
   ================================================================================================= */
.btn-oa-dash-1  { --btn-bg: var(--oa-dashbtn-1-bg);  --btn-hover: var(--oa-dashbtn-1-hover);  --btn-fg: var(--oa-dashbtn-1-fg);  --btn-fg-hover: var(--oa-dashbtn-1-fg-hover, var(--oa-dashbtn-1-fg));  --btn-border: var(--oa-dashbtn-1-border); }
.btn-oa-dash-2  { --btn-bg: var(--oa-dashbtn-2-bg);  --btn-hover: var(--oa-dashbtn-2-hover);  --btn-fg: var(--oa-dashbtn-2-fg);  --btn-fg-hover: var(--oa-dashbtn-2-fg-hover, var(--oa-dashbtn-2-fg));  --btn-border: var(--oa-dashbtn-2-border); }
.btn-oa-dash-3  { --btn-bg: var(--oa-dashbtn-3-bg);  --btn-hover: var(--oa-dashbtn-3-hover);  --btn-fg: var(--oa-dashbtn-3-fg);  --btn-fg-hover: var(--oa-dashbtn-3-fg-hover, var(--oa-dashbtn-3-fg));  --btn-border: var(--oa-dashbtn-3-border); }
.btn-oa-dash-4  { --btn-bg: var(--oa-dashbtn-4-bg);  --btn-hover: var(--oa-dashbtn-4-hover);  --btn-fg: var(--oa-dashbtn-4-fg);  --btn-fg-hover: var(--oa-dashbtn-4-fg-hover, var(--oa-dashbtn-4-fg));  --btn-border: var(--oa-dashbtn-4-border); }
.btn-oa-dash-5  { --btn-bg: var(--oa-dashbtn-5-bg);  --btn-hover: var(--oa-dashbtn-5-hover);  --btn-fg: var(--oa-dashbtn-5-fg);  --btn-fg-hover: var(--oa-dashbtn-5-fg-hover, var(--oa-dashbtn-5-fg));  --btn-border: var(--oa-dashbtn-5-border); }
.btn-oa-dash-6  { --btn-bg: var(--oa-dashbtn-6-bg);  --btn-hover: var(--oa-dashbtn-6-hover);  --btn-fg: var(--oa-dashbtn-6-fg);  --btn-fg-hover: var(--oa-dashbtn-6-fg-hover, var(--oa-dashbtn-6-fg));  --btn-border: var(--oa-dashbtn-6-border); }
.btn-oa-dash-7  { --btn-bg: var(--oa-dashbtn-7-bg);  --btn-hover: var(--oa-dashbtn-7-hover);  --btn-fg: var(--oa-dashbtn-7-fg);  --btn-fg-hover: var(--oa-dashbtn-7-fg-hover, var(--oa-dashbtn-7-fg));  --btn-border: var(--oa-dashbtn-7-border); }
.btn-oa-dash-8  { --btn-bg: var(--oa-dashbtn-8-bg);  --btn-hover: var(--oa-dashbtn-8-hover);  --btn-fg: var(--oa-dashbtn-8-fg);  --btn-fg-hover: var(--oa-dashbtn-8-fg-hover, var(--oa-dashbtn-8-fg));  --btn-border: var(--oa-dashbtn-8-border); }
.btn-oa-dash-9  { --btn-bg: var(--oa-dashbtn-9-bg);  --btn-hover: var(--oa-dashbtn-9-hover);  --btn-fg: var(--oa-dashbtn-9-fg);  --btn-fg-hover: var(--oa-dashbtn-9-fg-hover, var(--oa-dashbtn-9-fg));  --btn-border: var(--oa-dashbtn-9-border); }
.btn-oa-dash-10 { --btn-bg: var(--oa-dashbtn-10-bg); --btn-hover: var(--oa-dashbtn-10-hover); --btn-fg: var(--oa-dashbtn-10-fg); --btn-fg-hover: var(--oa-dashbtn-10-fg-hover, var(--oa-dashbtn-10-fg));--btn-border: var(--oa-dashbtn-10-border);}

/* === Tinted helpers reused across the app === */
.btn-tint {
  background-color: var(--btn-bg) !important;
  border-color: var(--btn-border, var(--btn-bg)) !important;
  color: var(--btn-fg, #0b1220) !important;
}
.btn-tint:hover {
  background-color: var(--btn-hover, color-mix(in oklab, var(--btn-bg) 92%, black)) !important;
  border-color: var(--btn-hover, color-mix(in oklab, var(--btn-bg) 92%, black)) !important;
  color: var(--btn-fg-hover, var(--btn-fg, #0b1220)) !important;
}


/* ================================================================================================= */
/* ====================================== CITATION PAGE THEME ====================================== */
/* ================================================================================================= */

/* Sticky submit bar at bottom of the page */
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 30;
  background: var(--oa-sticky-bg, color-mix(in oklab, var(--oa-canvas) 75%, var(--oa-card-bg)));
  border-top: 1px solid var(--oa-sticky-border, var(--oa-card-border));
  box-shadow: var(--oa-sticky-shadow, 0 -6px 20px rgba(0,0,0,.25));
  padding: .75rem 1rem;
  margin-top: .5rem;
  backdrop-filter: blur(6px);
}

/* Give the “Location help” text a consistent muted tone (already mostly covered) */
#locationHelp { color: var(--oa-text-muted) !important; }

/* ================================================================================================= */
/* =================== SHARED THEMES (Driver Info / Vehicle Info / Preview Page) =================== */
/* ================================================================================================= */
/* Page-top banners in driver_info.html */
.alert-primary {
  background: var(--oa-banner-citation-bg) !important;
  border-color: var(--oa-banner-citation-bor) !important;
  color: var(--oa-banner-citation-fg) !important;
}
.alert-warning {
  background: var(--oa-banner-warning-bg) !important;
  border-color: var(--oa-banner-warning-bor) !important;
  color: var(--oa-banner-warning-fg) !important;
}
.alert-secondary {
  background: var(--oa-banner-neutral-bg) !important;
  border-color: var(--oa-banner-neutral-bor) !important;
  color: var(--oa-banner-neutral-fg) !important;
}
/* Scanner “status” pill (alert-info) */
.alert-info {
  background: var(--oa-alert-info-bg) !important;
  border-color: var(--oa-alert-info-bor) !important;
  color: var(--oa-alert-info-fg) !important;
}

/* Compact expander buttons used for Restrictions/Endorsements */
.expander.form-control {
  background: var(--oa-expander-bg) !important;
  border-color: var(--oa-expander-bor) !important;
  color: var(--oa-expander-fg) !important;
  display: flex;
  align-items: center;
  height: calc(1.5em + .5rem + 2px); /* same visual height as .form-select-sm */
  padding: .25rem .5rem;
}
.expander .caret {
  /* simple caret that respects theme color */
  width: 0; height: 0;
  border-left: .32rem solid transparent;
  border-right: .32rem solid transparent;
  border-top: .42rem solid var(--oa-text-muted);
}

/* Collapsible checklist container */
#restrictionsBox,
#endorsementsBox {
  background: var(--oa-checklist-bg) !important;
  border-color: var(--oa-checklist-bor) !important;
}

/* Map Bootstrap’s dark helper to theme */
.bg-dark-subtle {
  background-color: var(--oa-surface-2) !important;
  color: var(--oa-text) !important;
  border: 1px solid var(--oa-card-border) !important;
}

/* Larger alert density used on Vehicle Info page */
.alert-lg {
  padding: 1rem 1.25rem !important;
  border-radius: var(--oa-radius, .75rem) !important;
}

/* The template sets `text-dark` on the warning banner.
   In themed UIs, force it back to the tokenized foreground. */
.vehicle-form .alert.text-dark {
  color: inherit !important; /* inherit from theme alert mapping */
}

/* Be explicit for warning banners in case Bootstrap specificity wins */
html[data-theme] .vehicle-form .alert-warning {
  color: var(--oa-banner-warning-fg, var(--oa-text)) !important;
}

/* Outline-Info buttons (e.g., "📍 Map It") themed to --oa-info */
.btn-outline-info {
  --_oi: var(--oa-info, #22d3ee);
  --_oiC: var(--oa-info-contrast, #001317);
  color: var(--_oi) !important;
  border-color: color-mix(in oklab, var(--_oi) 62%, var(--oa-card-border, #334155)) !important;
  background: transparent !important;
}
.btn-outline-info:hover,
.btn-outline-info:focus {
  background: color-mix(in oklab, var(--_oi) 14%, transparent) !important;
  color: var(--_oiC) !important;
  border-color: var(--_oi) !important;
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring) !important;
}

/* The warning banner in the template uses `text-dark`. Respect the theme instead. */
.violation-page .alert.text-dark,
.vehicle-form .alert.text-dark {
  color: inherit !important;
}

/* Token-driven alerts used by top banners + error boxes */
.alert-primary {
  --_bg: var(--oa-alert-primary-bg, color-mix(in oklab, var(--oa-primary) 22%, transparent));
  --_fg: var(--oa-alert-primary-fg, var(--oa-primary-contrast, #0b1220));
  --_bd: var(--oa-alert-primary-border, color-mix(in oklab, var(--oa-primary) 38%, transparent));
  background: var(--_bg) !important;
  color: var(--_fg) !important;
  border: 1px solid var(--_bd) !important;
}

.alert-warning {
  --_bg: var(--oa-alert-warning-bg, color-mix(in oklab, var(--oa-warning) 22%, transparent));
  --_fg: var(--oa-alert-warning-fg, var(--oa-warning-contrast, #1b1300));
  --_bd: var(--oa-alert-warning-border, color-mix(in oklab, var(--oa-warning) 38%, transparent));
  background: var(--_bg) !important;
  color: var(--_fg) !important;
  border: 1px solid var(--_bd) !important;
}

.alert-danger {
  --_bg: var(--oa-alert-danger-bg, color-mix(in oklab, var(--oa-danger) 18%, transparent));
  --_fg: var(--oa-alert-danger-fg, var(--oa-danger-contrast, #ffffff));
  --_bd: var(--oa-alert-danger-border, color-mix(in oklab, var(--oa-danger) 36%, transparent));
  background: var(--_bg) !important;
  color: var(--_fg) !important;
  border: 1px solid var(--_bd) !important;
}

/* Reload button in error blocks (“Reload”) uses theme outline-light mapping already,
   this tightens the touch target in compact areas */
.alert .btn.btn-sm { padding: .35rem .55rem; }

/* Make any embedded PDF preview look consistent if/when you use .preview-frame
   (your templates already include inline sizes, this just standardizes if you adopt the class) */
.preview-frame {
  height: 70vh;
  min-height: 420px;
  width: 100%;
  border: 0;
  display: block;
}

/* Card that contains the PDF: keep borders subtle and remove extra padding when p-0 is used */
.oa-card.p-0 iframe { display: block; }

/* Loading blocks inside preview cards */
.oa-card .preview-loading .spinner-border { filter: drop-shadow(0 0 4px rgba(0,0,0,.25)); }
.oa-card .preview-loading p { color: var(--oa-text); }

/* Error message inside preview cards */
.oa-card #errorMessage.alert {
  margin: 1rem !important;
  border-radius: .5rem;
}

/* Map modal (if used) */
.map-modal .oa-section { background: var(--oa-surface-2); }
.map-modal .oa-card    { background: var(--oa-surface);   }

.map-choice-btn {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  text-align: left;
  white-space: normal;           /* allow wrapping for long addresses */
}

.map-choice-label {
  color: var(--oa-text-muted);
  font-weight: 700;
}

.map-choice-sep {
  color: var(--oa-text-muted);
  opacity: .7;
}

.map-choice-value {
  color: var(--oa-text);
  font-weight: 600;
  word-break: break-word;
}

/* ====================================================================== */
/*                                 BETA PATCH                             */
/* Opt-in: add data-beta="BETA" to any element (button, card, chip, etc.) */
/* ====================================================================== */
[data-beta] { position: relative; }
[data-beta]::after {
  content: attr(data-beta);
  position: absolute;
  top: -8px;
  right: -8px;
  padding: .22rem .58rem;
  font-size: var(--oa-beta-size);
  font-weight: 800;
  line-height: 1;
  color: var(--oa-beta-fg);
  background: var(--oa-beta-bg);
  border-radius: 999px;
  box-shadow: var(--oa-beta-shadow);
  pointer-events: none;   /* don’t block clicks */
  z-index: 1;
}

/* Size helpers */
[data-beta].beta-sm { --oa-beta-size: .7rem; }
[data-beta].beta-lg { --oa-beta-size: .82rem; }

/* Diagonal ribbon variant */
[data-beta].beta-ribbon { overflow: visible; }
[data-beta].beta-ribbon::after {
  transform: rotate(45deg);
  top: -10px;
  right: -30px;
  font-size: calc(var(--oa-beta-size) - .03rem);
  padding: .2rem .7rem;
  letter-spacing: .6px;
}

/* Dark-theme shadow bump */
@media (prefers-color-scheme: dark) {
  [data-beta]::after { box-shadow: 0 2px 10px rgba(0,0,0,.5); }
}

/* ================================================================================================= */
/* ======================================= WARNING PAGE THEME ====================================== */
/* ================================================================================================= */

/* Align input + “Map It” button heights in the warning form */
#warningForm .input-group > .form-control,
#warningForm .input-group > .btn {
  padding-top: .45rem;
  padding-bottom: .45rem;
  line-height: 1.25;
}

/* ================================================================================================= */
/* ================================ CITE & RELEASE PAGE THEME ====================================== */
/* ================================================================================================= */
/* Shell (outer big card) */
.oa-citerelease-shell {
  position: relative;
  background: var(--oa-surface-2);
  color: var(--oa-text);
  border: 1px solid var(--oa-citerelease-card-border, var(--oa-card-border));
  border-radius: .75rem;
  box-shadow: var(--oa-shadow);
  overflow: hidden;             /* keeps the top divider nicely clipped */
}

/* Top divider pill (match warrant shell look) */
.oa-citerelease-shell::before {
  content: "";
  display: block;
  height: 8px;
  border-radius: 9999px;
  background: var(--oa-primary);
  opacity: .15;
  margin: .25rem .75rem 1rem;
}

/* Inner panels */
.oa-citerelease-card {
  background: var(--oa-citerelease-card-bg, var(--oa-surface-1)); /* a touch lighter than shell */
  color: var(--oa-text);
  border: 1px solid var(--oa-citerelease-card-border, var(--oa-card-border));
  border-radius: .75rem;
  box-shadow: var(--oa-shadow);
}

/* Space between panels (bootstrap mb-* already helps; this is a safety) */
.oa-citerelease-shell > .oa-citerelease-card + .oa-citerelease-card {
  margin-top: 1rem;
}

/* AAMVA review area */
#aamvaReviewContainer:empty { display: none; }

/* Input-group sizing within this form */
#citereleaseForm .input-group > .form-control,
#citereleaseForm .input-group > .btn {
  padding-top: .45rem;
  padding-bottom: .45rem;
  line-height: 1.25;
}

/* ================================================================================================= */
/* ======================================= HISTORY PAGE THEME ====================================== */
/* ================================================================================================= */
/* OA action buttons used on History (and elsewhere) */
.btn-oa-delete,
.btn-oa-view,
.btn-oa-email {
  /* default fallbacks if a theme forgets to set tokens */
  --btn-bg:   var(--oa-primary);
  --btn-bor:  var(--oa-primary);
  --btn-fg:   var(--oa-primary-contrast, #0b1220);
  --btn-hov:  color-mix(in oklab, var(--btn-bg) 92%, black);
  --btn-ring: var(--oa-focus-ring);

  background-color: var(--btn-bg) !important;
  border-color:     var(--btn-bor) !important;
  color:            var(--btn-fg) !important;

  /* exact vertical centering inside groups */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: .25rem;
  vertical-align: middle;

  box-shadow: none;
}
.btn-oa-delete:hover,
.btn-oa-view:hover,
.btn-oa-email:hover {
  background-color: var(--btn-hov) !important;
  border-color:     var(--btn-bor) !important;
}
.btn-oa-delete:focus,
.btn-oa-view:focus,
.btn-oa-email:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem var(--btn-ring) !important;
}

/* Map each to token names the theme provides */
.btn-oa-delete {
  --btn-bg:  var(--oa-btn-delete-bg,  var(--oa-danger));
  --btn-bor: var(--oa-btn-delete-border, var(--oa-danger));
  --btn-fg:  var(--oa-btn-delete-fg,  var(--oa-danger-contrast, #fff));
  --btn-hov: var(--oa-btn-delete-hover, color-mix(in oklab, var(--btn-bg) 92%, black));
  --btn-ring: var(--oa-btn-delete-ring, rgba(220,38,38,.35));
}
.btn-oa-view {
  --btn-bg:  var(--oa-btn-view-bg,  var(--oa-info));
  --btn-bor: var(--oa-btn-view-border, var(--oa-info));
  --btn-fg:  var(--oa-btn-view-fg,  var(--oa-info-contrast, #001317));
  --btn-hov: var(--oa-btn-view-hover, color-mix(in oklab, var(--btn-bg) 92%, black));
  --btn-ring: var(--oa-btn-view-ring, rgba(37,99,235,.35));
}
.btn-oa-email {
  --btn-bg:  var(--oa-btn-email-bg,  var(--oa-primary));
  --btn-bor: var(--oa-btn-email-border, var(--oa-primary));
  --btn-fg:  var(--oa-btn-email-fg,  var(--oa-primary-contrast, #0b1220));
  --btn-hov: var(--oa-btn-email-hover, color-mix(in oklab, var(--btn-bg) 92%, black));
  --btn-ring: var(--oa-btn-email-ring, rgba(124,58,237,.35));
}

/* Tabs (active tab uses .btn-light) */
.btn-light {
  background-color: var(--oa-surface-2) !important;
  border-color:     var(--oa-card-border) !important;
  color:            var(--oa-heading) !important;
}
.btn-light:hover,
.btn-light:focus {
  background-color: var(--oa-surface-3) !important;
  border-color:     var(--oa-card-border) !important;
}

/* Pager chip “Page 1” (.btn-dark) */
.btn-dark {
  background-color: var(--oa-surface-2) !important;
  border-color:     var(--oa-card-border) !important;
  color:            var(--oa-text) !important;
}

/* Table variant used on History lists */
.table-dark {
  --bs-table-bg: var(--oa-surface) !important;
  --bs-table-color: var(--oa-text) !important;
  --bs-table-striped-bg: color-mix(in oklab, var(--oa-surface) 92%, white 8%) !important;
  --bs-table-border-color: var(--oa-card-border) !important;
  background: var(--oa-surface) !important;
  color: var(--oa-text) !important;
  border-color: var(--oa-card-border) !important;
}

/* Synced badges */
.badge.bg-success {
  background-color: var(--oa-success) !important;
  color: var(--oa-success-contrast, #04110a) !important;
}
.badge.bg-danger {
  background-color: var(--oa-danger) !important;
  color: var(--oa-danger-contrast, #ffffff) !important;
}

/* ================================================================================================= */
/* ===================================== SETTINGS PAGE THEME ======================================= */
/* ================================================================================================= */
/* Tabs (nav-pills) */
.settings-tabs .nav-link {
  color: var(--oa-text);
  background: transparent;
  border: 1px solid transparent;
  font-weight: 700;
}
.settings-tabs .nav-link:hover {
  color: var(--oa-heading);
  background: color-mix(in oklab, var(--oa-card-bg) 92%, black);
  border-color: var(--oa-card-border);
}
.settings-tabs .nav-link.active,
.settings-tabs .show > .nav-link {
  color: var(--oa-primary-contrast);
  background: var(--oa-primary);
  border-color: var(--oa-primary);
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring);
}

/* Cards in settings already use .bg-secondary/.oa-card from core.
   Add subtle section dividers and headings harmonized to tokens. */
#sec-pane .bg-secondary,
#pers-pane .bg-secondary,
#sess-pane .bg-secondary,
#profile-pane .bg-secondary,
#privacy-pane .bg-secondary,
#device-pane .bg-secondary {
  border: 1px solid var(--oa-card-border);
  box-shadow: var(--oa-shadow);
}

/* List groups inside Settings (privacy stats + device perms) */
.tab-content .list-group-item {
  background: var(--oa-surface) !important;
  color: var(--oa-text) !important;
  border-color: var(--oa-card-border) !important;
}
.tab-content .list-group-item + .list-group-item {
  border-top-color: var(--oa-card-border) !important;
}

/* “status-badge” chips beside device rows */
.status-badge {
  vertical-align: middle;
  font-weight: 700;
  border-radius: .5rem;
  padding: .25rem .5rem;
  background: var(--oa-chip-bg);
  color: var(--oa-text);
  border: 1px solid var(--oa-card-border);
}

/* The “Request/Test” small outline buttons match dark UI */
#device-pane .btn-outline-light.btn-sm {
  border-color: var(--oa-card-border) !important;
}
#device-pane .btn-outline-light.btn-sm:hover {
  background: var(--oa-chip-bg) !important;
}

/* Diagnostics text helpers */
#device-pane .text-body-secondary {
  color: var(--oa-text-muted) !important;
}

/* Avatar outline in Profile card (subtle) */
#profile-pane img.rounded-circle {
  outline: 2px solid color-mix(in oklab, var(--oa-card-border) 80%, transparent);
  outline-offset: 2px;
}

/* Form switches contrast on dark cards */
.tab-content .form-check-input[type="checkbox"]:checked,
.tab-content .form-check-input[type="checkbox"]:focus {
  background-color: var(--oa-primary) !important;
  border-color: var(--oa-primary) !important;
  box-shadow: 0 0 0 .2rem var(--oa-focus-ring) !important;
}

/* “Preview” area note text */
#pers-pane .form-text,
#sess-pane .form-text,
#profile-pane .form-text {
  color: var(--oa-text-muted) !important;
}

/* ===== SETTINGS: single-row tab bar (no wrap) ===== */
.settings-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  gap: .5rem;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
}
.settings-tabs .nav-item { flex: 0 0 auto; }
.settings-tabs .nav-link { flex: 0 0 auto; }

/* Optional: hide scrollbar (keeps swipe/scroll) */
.settings-tabs::-webkit-scrollbar { height: 6px; }
.settings-tabs::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--oa-card-border) 70%, transparent);
  border-radius: 999px;
}

/* Info-card style inside Profile sidebar */
.oa-info-card {
  background: color-mix(in oklab, var(--oa-card-bg) 92%, black);
  border: 1px solid var(--oa-card-border);
  border-radius: .75rem;
  padding: .9rem 1rem;
}
.oa-info-card dt { color: var(--oa-text-muted); }
.oa-info-card dd { color: var(--oa-text); }


/* ================================================================================================= */
/* ======================================= ADMIN PAGE THEME ======================================== */
/* ================================================================================================= */
.admin-panel {
  background: var(--oa-card-bg);
  color: var(--oa-text);
  border: 1px solid var(--oa-card-border);
  border-radius: 12px;
  padding: 30px;
  box-shadow: var(--oa-shadow);
  max-width: 1000px;
  margin: auto;
}
.admin-panel h1 { font-size: 2.25rem; font-weight: 800; color: var(--oa-heading); margin-bottom: 20px; }
.admin-panel p  { font-size: 1.05rem; color: var(--oa-text-muted); }

/* Tighten “d-grid gap-2” stacks within admin cards on dense layouts */
@media (max-width: 640px) {
  .row .card.app .card-body.d-grid.gap-2 { row-gap: .5rem; }
}

/* Description text inside admin tiles */
.card.app .text-body-secondary.small {
  color: var(--oa-text-muted) !important;
}

/* Modal: our .oa-card provides bg/border; ensure header/footer borders are subtle */
.modal-content.oa-card .modal-header,
.modal-content.oa-card .modal-footer {
  border-color: var(--oa-card-border) !important;
}

/* Server Sync: “chips” container (uses existing .oa-chip for the pill) */
#serverSyncModal #ss-time-chips {
  gap: .5rem;
}
#serverSyncModal #ss-time-chips .oa-chip {
  cursor: default;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
}

/* Optional little × button inside chips, if you add it via JS */
#serverSyncModal #ss-time-chips .oa-chip .chip-x {
  border: 0;
  background: transparent;
  color: var(--oa-text);
  line-height: 1;
  padding: 0 .1rem;
}
#serverSyncModal #ss-time-chips .oa-chip .chip-x:hover {
  color: var(--oa-heading);
}

/* Modal helper text */
#serverSyncModal .form-text {
  color: var(--oa-text-muted) !important;
}

/* Outline buttons in the modal respect dark themes */
#serverSyncModal .btn-outline-light,
#serverSyncModal .btn-outline-info {
  border-color: var(--oa-card-border) !important;
}
#serverSyncModal .btn-outline-light:hover,
#serverSyncModal .btn-outline-info:hover {
  background: var(--oa-chip-bg) !important;
}

/* Make deactivate/reactivate split buttons feel even */
#deptStatusForm .btn {
  min-width: 0;
}

/* Admin tiles: ensure full-height cards look consistent */
.row .card.app.h-100 {
  display: flex;
}
.row .card.app.h-100 .card-body {
  display: flex;
  flex-direction: column;
}

/* Side-by-side square buttons for Department Settings */
.admin-square-wrap .square-btn {
  /* Make each button a square tile */
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;

  /* Let text wrap nicely inside the square */
  text-align: center;
  white-space: normal;
  line-height: 1.25;

  /* Remove pill look */
  border-radius: 0 !important;

  /* Keep them chunky without extra padding affecting aspect */
  padding: 0;
  min-width: 120px;   /* prevent super tiny tiles */
  font-weight: 800;
}

/* On very narrow screens, keep them side-by-side if space allows;
   otherwise they’ll wrap naturally because of the flex container */
@media (max-width: 480px) {
  .admin-square-wrap {
    gap: .5rem !important;
  }
}

/* Smaller side-by-side square tiles (Department Settings) */
.admin-square-wrap { 
  --admin-square-size: 96px; /* ← adjust here if you want even smaller */
}

.admin-square-wrap .square-btn {
  /* override flex-fill so they stay fixed-size squares */
  flex: 0 0 var(--admin-square-size) !important;
  width: var(--admin-square-size);
  height: var(--admin-square-size);

  /* keep them tidy and readable at the smaller size */
  padding: .4rem;
  font-size: clamp(11px, 0.9vw, 13px);
  line-height: 1.15;
  text-align: center;
  white-space: normal;   /* allow wrap */
  display: grid;
  place-items: center;
}

footer {
  opacity: 0.7;
  font-size: 0.8rem;
}

/* Leaflet / Map container sizing */
#map,
.oa-map {
  min-height: 400px;
  height: 60vh;   /* responsive height */
  width: 100%;    
}

/* Cookie banner */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
  background: rgba(20,20,22,.95); color: #fff; padding: .75rem 0;
  border-top: 1px solid rgba(255,255,255,.15);
}
.cookie-banner .cookie-inner{
  display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  max-width: 1100px; margin: 0 auto; padding: 0 1rem;
  font-size: .95rem;
}
.cookie-banner .cookie-actions{ display:flex; gap:.5rem; }
@media (max-width: 576px){
  .cookie-banner .cookie-inner{ flex-direction: column; align-items: stretch; }
  .cookie-banner .cookie-actions{ justify-content: flex-end; }
}

:root { --oa-font-scale: 1; }
.oa-map { min-height: 400px; height: 60vh; width: 100%; }
.toast-container { z-index: 1090; }

/* cookie banner styles you set earlier */
/* ===========================
   OA Form Banners (global)
   =========================== */
.oa-form-banner {
  border: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Citation = red */
.alert.oa-form-banner.oa-banner-citation {
  background: linear-gradient(180deg, #b00020 0%, #7a0016 100%) !important;
  color: #fff !important;
}

/* Warning = yellow/amber */
.alert.oa-form-banner.oa-banner-warning {
  background: linear-gradient(180deg, #ffda6a 0%, #f0ad00 100%) !important;
  color: #1a1a1a !important;
}

/* ===========================
   OA shared form banners
   =========================== */

.oa-form-banner {
  border-radius: .75rem;
  padding: .85rem 1rem;
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  font-size: 1.15rem;        /* unified size */
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* Citation = red banner */
.oa-banner-citation {
  background: linear-gradient(180deg, #b02a37 0%, #8a1f2b 100%) !important;
  border-color: #842029 !important;
  color: #fff !important;
}

/* Warning = yellow banner */
.oa-banner-warning {
  background: linear-gradient(180deg, #ffda6a 0%, #ffc107 100%) !important;
  border-color: #ffcd39 !important;
  color: #111 !important;
}
/* Cite & Release = green banner */
.oa-banner-citerelease {
  background: linear-gradient(180deg, #2fbf71 0%, #198754 100%) !important;
  border-color: #157347 !important;
  color: #071a10 !important; /* dark text reads well on green */
}