/* =========================================================
   BCT CAD – Dark Theme Overrides for Bootstrap 5
   ========================================================= */

/* ---------- CSS Variables (accent + neutrals) ---------- */
:root{
  --bcc-bg: #0b0b0d;              /* page background */
  --bcc-surface: #111114;         /* cards / panels */
  --bcc-surface-2: #151519;       /* deeper panel */
  --bcc-border: #2a2a31;          /* default border */
  --bcc-border-strong: #3a3a44;   /* stronger border */
  --bcc-text: #ffffff;            /* primary text */
  --bcc-text-2: #c5c8ce;          /* secondary text */
  --bcc-text-3: #9aa0a6;          /* tertiary text */
  --bcc-muted: #7a7f87;           /* subtle text */
  --bcc-accent: #FF7A00;          /* ORANGE */
  --bcc-accent-10: rgba(255,122,0,.10);
  --bcc-accent-20: rgba(255,122,0,.20);
  --bcc-accent-40: rgba(255,122,0,.40);
  --bcc-focus: rgba(255,122,0,.35);
  --bcc-danger: #ed0404;
  --bcc-warning: #f59e0b;
  --bcc-success: #22c55e;
  --bcc-info: #2b1105;

  /* radii + shadows */
  --bcc-radius: .65rem;
  --bcc-radius-sm: .5rem;
  --bcc-shadow-1: 0 6px 18px rgba(0,0,0,.35);
  --bcc-shadow-2: 0 14px 32px rgba(0,0,0,.45);

  /* spacing + layout helpers */
  --bcc-gutter: 1rem;
}

/* Force dark look regardless of OS */
html, body{
  background: var(--bcc-bg) !important;
  color: var(--bcc-text);
}

/* ---------- Layout containers ---------- */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  max-width: min(100%, 100vw);
}

.reports-split{
  align-items: stretch;
}

@media (min-width: 992px){
  .reports-split-left{
    flex: 0 0 30%;
    max-width: 30%;
  }

  .reports-split-right{
    flex: 0 0 70%;
    max-width: 70%;
  }
}

.app-body{
  min-height: 100vh;
  background: var(--bcc-bg);
  color: var(--bcc-text);
  display: flex;
  flex-direction: column;
}

.app-card{
  background: var(--bcc-surface);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-radius);
  box-shadow: var(--bcc-shadow-1);
}

.workspace-shell .app-card{
  background: var(--bcc-surface-2);
  border-color: var(--bcc-border);
  box-shadow: none;
}

.workspace-shell .workspace-hero{
  padding-bottom: 0.5rem;
  border-bottom: 1px solid transparent;
}

.app-card + .app-card{
  margin-top: 1rem;
}

.app-navbar{
  background: rgba(17,17,20,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bcc-border-strong);
}
.app-navbar .navbar-brand{
  color: var(--bcc-text) !important;
  font-weight: 600;
  letter-spacing: .03em;
}
.app-navbar .nav-link{
  color: var(--bcc-text-2) !important;
  transition: color .2s ease;
  position: relative;
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus,
.app-navbar .nav-link.active{
  color: var(--bcc-text) !important;
}
.app-navbar .nav-link.active::after{
  content: '';
  position: absolute;
  bottom: -0.4rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bcc-accent);
  border-radius: 999px;
}
.app-navbar .app-navbar-collapse{
  transition: height .2s ease;
}
.app-mobile-user .user-avatar-lg{
  width: 2.5rem;
  height: 2.5rem;
}
.app-mobile-divider{
  border-top: 1px solid var(--bcc-border-strong);
}
.user-avatar{
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bcc-accent-20);
  color: var(--bcc-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
}
.user-toggle{
  position: relative;
  color: var(--bcc-text-2) !important;
}
.user-toggle:hover,
.user-toggle:focus{
  color: var(--bcc-text) !important;
}
.auth-card{
  max-width: 420px;
  margin: 0 auto;
}

.brand-dot{
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--bcc-accent);
  box-shadow: 0 0 12px rgba(255,122,0,.65);
  display: inline-block;
}

.app-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,122,0,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px){
  .app-navbar .app-navbar-collapse{
    background: var(--bcc-surface);
    border: 1px solid var(--bcc-border);
    border-radius: var(--bcc-radius);
    padding: 0.25rem 0.5rem 0.5rem;
    margin-top: 0.5rem;
  }
  .app-navbar .navbar-nav{
    width: 100%;
    gap: .25rem;
  }
  .app-navbar .nav-link{
    padding-left: 0;
    padding-right: 0;
  }
  .app-navbar .nav-link.active::after{
    display: none;
  }
  .app-navbar .nav-link.active{
    background: var(--bcc-accent-10);
    border-radius: var(--bcc-radius-sm);
    color: var(--bcc-text) !important;
  }
  .app-navbar .dropdown-menu{
    background: var(--bcc-surface-2);
    border-color: var(--bcc-border-strong);
    border-radius: var(--bcc-radius-sm);
  }
  .app-navbar .dropdown-item.active{
    background: var(--bcc-accent-10);
    color: var(--bcc-text);
  }
  .nav-actions{
    width: 100%;
  }
}

main{
  background: transparent;
  flex: 1 1 auto;
  padding: 10px;
}

.skip-link{
  position: absolute;
  top: -3rem;
  left: 1rem;
  padding: .5rem .75rem;
  background: var(--bcc-surface-2);
  color: var(--bcc-text);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-radius-sm);
  box-shadow: var(--bcc-shadow-1);
  transition: top .2s ease, opacity .2s ease;
  opacity: 0;
  z-index: 1050;
}
.skip-link:focus{
  top: .75rem;
  opacity: 1;
  outline: none;
}

/* ---------- Cards / Panels ---------- */
.card{
  background: var(--bcc-surface) !important;
  border: 1px solid var(--bcc-border) !important;
  border-radius: var(--bcc-radius);
  box-shadow: var(--bcc-shadow-1);
}
.card-header{
  background: var(--bcc-surface-2) !important;
  border-bottom: 1px solid var(--bcc-border-strong) !important;
  color: var(--bcc-text-2);
}
.card-footer{
  background: var(--bcc-surface-2) !important;
  border-top: 1px solid var(--bcc-border-strong) !important;
}

.app-card{
  background: var(--bcc-surface);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-radius);
  box-shadow: var(--bcc-shadow-1);
  margin-bottom: 1.25rem;
}
.app-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.25rem 0.45rem;
  border-bottom: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.app-card-body{
  padding: 0.45rem;
}
.app-card-footer{
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.app-card h1,
.app-card h2,
.app-card h3,
.app-card h4,
.app-card h5,
.app-card h6{
  color: var(--bcc-text);
}

.table-wrapper{
  overflow-x: auto;
  border-radius: var(--bcc-radius);
}

/* ---------- Dispatch Layout ---------- */
.dispatch-layout{
  width: 100%;
  padding: .8rem .8rem;
}

.dispatch-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.dispatch-header-title{
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.dispatch-header-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  margin-left: auto;
  flex-shrink: 0;
}

.dispatch-header-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bcc-accent);
  background: var(--bcc-accent-20);
  border: 1px solid rgba(255,122,0,.35);
}

.dispatch-header-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--bcc-accent);
  background: var(--bcc-accent-20);
  border: 1px solid rgba(255,122,0,.35);
}

.dispatch-stats{
  padding: 0.55rem;
}

.dispatch-stats-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.stat-card{
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-radius-sm);
  padding: 0.5rem 0.8rem;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--bcc-shadow-1);
}

.dispatch-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

.dispatch-board-grid{
  display: grid;
  gap: var(--bcc-gutter);
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr) minmax(260px, 1fr);
  align-items: start;
}

.dispatch-board-details{
  grid-column: 1 / -1;
}

.dispatch-panel{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dispatch-panel:not(.app-card){
  background: var(--bcc-surface);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-radius);
  box-shadow: var(--bcc-shadow-1);
}

.dispatch-panel.app-card{
  margin-bottom: 0;
}

.dispatch-panel-body{
  flex: 1 1 auto;
}

.live-calls-header{
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.live-calls-actions{
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dispatch-live{
  width: 100%;
}

.drivers-panel{
  display: none;
}

.drivers-list{
  max-height: 100%;
  overflow-y: auto;
  padding: 0;
}

.driver-tile{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-radius-sm);
  background: var(--bcc-surface-2);
  box-shadow: var(--bcc-shadow-1);
  margin-bottom: .75rem;
}

@media (min-width: 768px){
  .dispatch-main{
    grid-template-columns: 1fr;
  }

  .drivers-panel{
    display: block;
    order: 2;
  }

  .dispatch-live{
    order: 1;
  }
}

@media (max-width: 991.98px){
  .dispatch-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispatch-board-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px){
  .dispatch-header{
    flex-wrap: nowrap;
  }
}

@media (max-width: 575.98px){
  .dispatch-header{
    flex-direction: column;
    align-items: flex-start;
  }

  .dispatch-header-actions{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .dispatch-stats-grid{
    grid-template-columns: 1fr;
  }

  .dispatch-board-grid{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1024px){
  .dispatch-main{
    grid-template-columns: 4fr 1fr;
  }

  .drivers-panel{
    display: block;
    position: sticky;
    top: 24px;
    height: 100%;
    align-self: start;
  }
}

/* ---------- Typography ---------- */
.text-white{ color: var(--bcc-text) !important; }
.text-secondary{ color: var(--bcc-text-2) !important; }
.text-muted{ color: var(--bcc-muted) !important; }

/* ---------- Links ---------- */
a, .link-light{
  color: var(--bcc-text-2);
  text-decoration: none;
}
a:hover, .link-light:hover{
  color: var(--bcc-text);
  text-decoration: none;
}
.link-orange{
  color: var(--bcc-accent);
}
.link-orange:hover{
  color: #ffa45a;
}

/* ---------- Buttons (Orange) ---------- */
.btn-orange{
  --bs-btn-color: #111;
  --bs-btn-bg: var(--bcc-accent);
  --bs-btn-border-color: var(--bcc-accent);
  --bs-btn-hover-color: #111;
  --bs-btn-hover-bg: #ffa24a;
  --bs-btn-hover-border-color: #ffa24a;
  --bs-btn-focus-shadow-rgb: 255,122,0;
  --bs-btn-active-color: #111;
  --bs-btn-active-bg: #ff9430;
  --bs-btn-active-border-color: #ff9430;
  color: #111 !important;
  background-color: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
}
.btn-outline-orange{
  color: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
  background: transparent !important;
}
.btn-outline-orange:hover{
  color: #111 !important;
  background: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
}

/* Accent variations used across dashboard + layout */
.btn-accent{
  color: #111 !important;
  background: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
  border-radius: var(--bcc-radius-sm);
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(255,122,0,.35);
}
.btn-accent:hover{
  background: #ffa24a !important;
  border-color: #ffa24a !important;
  color: #111 !important;
}
.btn-accent-soft{
  color: var(--bcc-accent) !important;
  background: var(--bcc-accent-10) !important;
  border: 1px solid var(--bcc-accent-20) !important;
  border-radius: var(--bcc-radius-sm);
}
.btn-accent-soft:hover{
  background: var(--bcc-accent-20) !important;
  color: var(--bcc-accent) !important;
}
.btn-outline-accent{
  color: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
  border-radius: var(--bcc-radius-sm);
}
.btn-outline-accent:hover{
  background: var(--bcc-accent) !important;
  color: #111 !important;
}

/* Filter controls */
.badge.bg-accent{ background: var(--bcc-accent) !important; color: #111 !important; }
.badge.bg-accent-soft{ background: var(--bcc-accent-10) !important; color: var(--bcc-accent) !important; border: 1px solid var(--bcc-accent-20); }

.notifications-filter{ border: 1px solid var(--bcc-border-strong) !important; overflow: hidden; }
.notifications-filter .card-body{ background: var(--bcc-surface-2); }
.notifications-filter .filter-section{ background: linear-gradient(135deg, rgba(255,122,0,.06) 0%, rgba(255,122,0,.02) 45%, rgba(17,17,20,.65) 100%); border: 1px solid var(--bcc-border); border-radius: var(--bcc-radius); padding: .5rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); height: 100%; }
.notifications-filter .filter-label{ color: var(--bcc-text-3); letter-spacing: .08em; font-size: .72rem; text-transform: uppercase; margin-bottom: .5rem; display: inline-flex; align-items: center; gap: .5rem; }
.notifications-filter .filter-hint{ color: var(--bcc-muted); }
.notifications-filter .card-footer{ border-top-color: var(--bcc-border-strong) !important; background: rgba(255,122,0,.04); color: var(--bcc-text-2); }

.filter-chip{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-text-2);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: all .15s ease;
}
.btn-check:checked + .filter-chip{
  background: var(--bcc-accent-10);
  border-color: var(--bcc-accent);
  color: var(--bcc-accent);
  box-shadow: 0 0 0 .16rem var(--bcc-accent-20);
}
.btn-check:focus + .filter-chip{
  box-shadow: 0 0 0 .16rem var(--bcc-focus);
}
.chip-dot{
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--bcc-text-3);
  opacity: .85;
}
.chip-dot-primary{ background: var(--bcc-info); }
.chip-dot-info{ background: var(--bcc-accent); }
.chip-dot-warning{ background: var(--bcc-warning); }

.filter-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1rem;
  border-radius: .65rem;
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  color: var(--bcc-text-2);
  font-weight: 600;
  cursor: pointer;
  min-width: 5.25rem;
  transition: all .15s ease;
}
.btn-check:checked + .filter-toggle{
  border-color: var(--bcc-accent);
  color: var(--bcc-accent);
  background: var(--bcc-accent-10);
  box-shadow: 0 0 0 .16rem var(--bcc-accent-20);
}
.btn-check:focus + .filter-toggle{
  box-shadow: 0 0 0 .16rem var(--bcc-focus);
}

/* Secondary/neutral buttons in dark theme */
.btn-outline-light{
  color: var(--bcc-text) !important;
  border-color: var(--bcc-border-strong) !important;
}
.btn-outline-light:hover{
  background: #1c1c22 !important;
  border-color: var(--bcc-text-3) !important;
}
.btn-outline-light:active,
.btn-outline-light.active,
.show>.btn-outline-light.dropdown-toggle{
  background: #101016 !important;
  color: var(--bcc-accent) !important;
  border-color: var(--bcc-accent) !important;
  box-shadow: 0 0 0 .15rem var(--bcc-accent-20) !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active{
  background: #101016 !important;
  color: var(--bcc-accent) !important;
}

/* ---------- Badges ---------- */
.badge-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.badge-critical{ background: rgba(239,68,68,.18); color: var(--bcc-danger); border: 1px solid rgba(239,68,68,.45); }
.badge-high{ background: rgba(245,158,11,.18); color: var(--bcc-warning); border: 1px solid rgba(245,158,11,.45); }
.badge-normal{ background: rgba(34,197,94,.18); color: var(--bcc-success); border: 1px solid rgba(34,197,94,.45); }
.badge-low{ background: rgba(96,165,250,.18); color: var(--bcc-info); border: 1px solid rgba(96,165,250,.45); }

.priority-badge{
  background: var(--priority-bg, rgba(255,255,255,.12));
  color: var(--priority-color, var(--bcc-text-2));
  border: 1px solid var(--priority-border, rgba(255,255,255,.2));
}
.priority-critical{ --priority-bg: rgba(239,68,68,.18); --priority-color: var(--bcc-danger); --priority-border: rgba(239,68,68,.45); }
.priority-high{ --priority-bg: rgba(245,158,11,.18); --priority-color: var(--bcc-warning); --priority-border: rgba(245,158,11,.45); }
.priority-normal{ --priority-bg: rgba(34,197,94,.18); --priority-color: var(--bcc-success); --priority-border: rgba(34,197,94,.45); }
.priority-low{ --priority-bg: rgba(96,165,250,.18); --priority-color: var(--bcc-info); --priority-border: rgba(96,165,250,.45); }

.status-badge{
  background: var(--status-bg, rgba(100,116,139,.18));
  color: var(--status-color, #64748b);
  border: 1px solid var(--status-border, rgba(100,116,139,.45));
}
.status-new{ --status-color: #cbd5e1; --status-bg: rgba(203,213,225,.18); --status-border: rgba(203,213,225,.45); }
.status-triaged{ --status-color: #38bdf8; --status-bg: rgba(56,189,248,.18); --status-border: rgba(56,189,248,.45); }
.status-assigned{ --status-color: #fb923c; --status-bg: rgba(251,146,60,.18); --status-border: rgba(251,146,60,.45); }
.status-accepted{ --status-color: #f97316; --status-bg: rgba(249,115,22,.18); --status-border: rgba(249,115,22,.45); }
.status-enroute{ --status-color: #a5b4fc; --status-bg: rgba(165,180,252,.18); --status-border: rgba(165,180,252,.45); }
.status-onscene{ --status-color: #34d399; --status-bg: rgba(52,211,153,.18); --status-border: rgba(52,211,153,.45); }
.status-recoveryinprogress{ --status-color: #facc15; --status-bg: rgba(250,204,21,.18); --status-border: rgba(250,204,21,.45); }
.status-towinprogress{ --status-color: #fbbf24; --status-bg: rgba(251,191,36,.18); --status-border: rgba(251,191,36,.45); }
.status-complete{ --status-color: #22c55e; --status-bg: rgba(34,197,94,.18); --status-border: rgba(34,197,94,.45); }
.status-canceled{ --status-color: #ef4444; --status-bg: rgba(239,68,68,.18); --status-border: rgba(239,68,68,.45); }
.status-unabletoservice{ --status-color: #94a3b8; --status-bg: rgba(148,163,184,.18); --status-border: rgba(148,163,184,.45); }

.badge-status{
  background: rgba(255,255,255,.06);
  color: var(--bcc-text-2);
  border: 1px solid rgba(255,255,255,.12);
}
.badge-status-assigned{ color: var(--bcc-accent); border-color: rgba(255,122,0,.35); background: rgba(255,122,0,.12); }
.badge-status-in-progress{ color: var(--bcc-warning); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.badge-status-completed{ color: var(--bcc-success); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.badge-status-canceled{ color: var(--bcc-danger); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }

/* ---------- Forms / Inputs ---------- */
.form-control,
.form-select,
.input-group-text{
  background: #0f1014 !important;
  color: var(--bcc-text) !important;
  border: 1px solid var(--bcc-border-strong) !important;
  border-radius: var(--bcc-radius-sm);
}
.form-control::placeholder{
  color: var(--bcc-text-3) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: var(--bcc-accent) !important;
  box-shadow: 0 0 0 .2rem var(--bcc-focus) !important;
  outline: none !important;
}

/* Make borders a little brighter for visibility */
.form-control,
.form-select{
  border-color: #484a54 !important;
}

/* Dropdowns & menus (fix white background) */
.dropdown-menu{
  background: var(--bcc-surface-2) !important;
  border: 1px solid var(--bcc-border-strong) !important;
  border-radius: .6rem !important;
  box-shadow: var(--bcc-shadow-2);
}
.dropdown-item{
  color: var(--bcc-text-2) !important;
}
.dropdown-item:hover,
.dropdown-item:focus{
  color: var(--bcc-text) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Select options (WebKit + Firefox) */
.form-select option{
  color: var(--bcc-text);
  background: var(--bcc-surface);
}

/* Input groups */
.input-group-text{
  color: var(--bcc-text-3) !important;
}

/* Fix Chrome autofill */
input:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px #0f1014 inset !important;
  -webkit-text-fill-color: var(--bcc-text) !important;
  caret-color: var(--bcc-text) !important;
}

/* ---------- Tables ---------- */
.table{
  --bs-table-color: var(--bcc-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--bcc-border-strong);
}
.table-dark{
  color: var(--bcc-text) !important;
  background: transparent !important;
}
.table thead th{
  color: var(--bcc-text-3) !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--bcc-border-strong) !important;
}
.table tbody td{
  color: var(--bcc-text-2);
}
.table tbody td strong,
.table tbody td .badge,
.table tbody td .btn{
  color: inherit;
}
.table tbody td a{
  color: var(--bcc-accent);
}
.table tbody td a:hover{
  color: #ff9c3a;
}

.list-group-item{
  background: var(--bcc-surface-2);
  color: var(--bcc-text-2);
  border-color: var(--bcc-border) !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus{
  background: rgba(255,122,0,.12) !important;
  color: var(--bcc-text) !important;
}
.table td, .table th{
  border-color: var(--bcc-border) !important;
}
.table-hover tbody tr:hover{
  background: rgba(255,255,255,.03) !important;
}

/* ---------- Badges / Pills ---------- */
.badge{
  border-radius: 999px;
  padding: .4rem .65rem;
  border: 1px solid var(--bcc-border);
}
.badge-orange{
  color: var(--bcc-accent);
  background: var(--bcc-accent-10);
  border-color: var(--bcc-accent-20);
}

/* Status color helper (uses inline color when provided) */
.bcc-status{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--bcc-border);
  font-size: .825rem;
}

/* ---------- List groups (search results) ---------- */
.list-group{
  --bs-list-group-bg: var(--bcc-surface);
  --bs-list-group-border-color: var(--bcc-border-strong);
  border-radius: .6rem;
}
.list-group-item{
  background: var(--bcc-surface) !important;
  color: var(--bcc-text) !important;
  border-color: var(--bcc-border-strong) !important;
}
.list-group-item-action:hover{
  background: rgba(255,255,255,.06) !important;
  color: var(--bcc-text) !important;
}

/* ---------- Alerts / Toasts ---------- */
.alert{
  border-radius: .6rem;
  border: 1px solid var(--bcc-border-strong);
  color: var(--bcc-text);
}
.alert-warning{
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
}
.alert-danger{
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
}
.alert-success{
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
}

/* ---------- Navbar / Header ---------- */
.header-dark{
  background: rgba(10,10,12,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bcc-border);
}
.header-dark .nav-link{
  color: var(--bcc-text-2) !important;
}
.header-dark .nav-link:hover,
.header-dark .nav-link.active{
  color: var(--bcc-text) !important;
}

/* ---------- Forms – compact spacing helpers ---------- */
.form-label{
  color: var(--bcc-text-2) !important;
}
.form-text{
  color: var(--bcc-text-3) !important;
}

/* ---------- Utility: orange focus rings ---------- */
.focus-orange:focus{
  outline: none !important;
  box-shadow: 0 0 0 .2rem var(--bcc-focus) !important;
}

/* ---------- Buttons group smoothing ---------- */
.btn-group .btn,
.btn-group-sm .btn{
  border-radius: .5rem !important;
}

/* ---------- File inputs (media upload) ---------- */
.form-control[type="file"]{
  background: #0f1014 !important;
  color: var(--bcc-text-2) !important;
  border: 1px solid var(--bcc-border-strong) !important;
}
.form-control[type="file"]::file-selector-button{
  background: var(--bcc-accent);
  border: 0;
  color: #111;
  padding: .4rem .75rem;
  margin-right: .75rem;
  border-radius: .45rem;
}
.form-control[type="file"]::file-selector-button:hover{
  background: #ffa24a;
}

/* ---------- Pagination (if used) ---------- */
.pagination .page-link{
  background: var(--bcc-surface);
  border-color: var(--bcc-border-strong);
  color: var(--bcc-text-2);
}
.pagination .page-link:hover{
  color: var(--bcc-text);
  background: rgba(255,255,255,.06);
}
.pagination .active .page-link{
  background: var(--bcc-accent);
  border-color: var(--bcc-accent);
  color: #111;
}

/* ---------- Tables: make header + action cells pop ---------- */
.table .text-end .btn{
  border-color: var(--bcc-border-strong);
}

/* ---------- Helpers ---------- */
.border-strong{ border-color: var(--bcc-border-strong) !important; }
.bg-surface{ background: var(--bcc-surface) !important; }
.bg-surface-2{ background: var(--bcc-surface-2) !important; }
.text-2{ color: var(--bcc-text-2) !important; }
.text-3{ color: var(--bcc-text-3) !important; }

/* ---------- Fix select dropdown white-on-white on some UA ---------- */
select,
select option{
  background-color: #0f1014;
  color: var(--bcc-text);
}

/* ---------- Offcanvas / Modal ---------- */
.offcanvas,
.modal-content{
  background: var(--bcc-surface);
  color: var(--bcc-text);
  border: 1px solid var(--bcc-border-strong);
}

/* ---------- Tables inside narrow containers should not squish ---------- */
.table-responsive{ overflow-y: hidden; }

/* ---------- Badge shades for priorities ---------- */
.badge-priority-critical{
  color: var(--bcc-danger);
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .35);
}
.badge-priority-high{
  color: var(--bcc-warning);
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
}
.badge-priority-normal{
  color: var(--bcc-success);
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
}
.badge-priority-low{
  color: var(--bcc-info);
  background: rgba(96, 165, 250, .12);
  border-color: rgba(96, 165, 250, .35);
}

/* ---------- Tables: ensure white text in Index ---------- */
.table-dark td,
.table-dark th{
  color: var(--bcc-text) !important;
}

/* ---------- Make buttons slightly larger hit area ---------- */
.btn{ padding: .55rem 1rem; }

/* ---------- Form switches in dark ---------- */
.form-switch .form-check-input{
  background-color: #1b1c21;
  border-color: var(--bcc-border-strong);
}
.form-switch .form-check-input:checked{
  background-color: var(--bcc-accent);
  border-color: var(--bcc-accent);
}

/* ---------- Toasts ---------- */
.toast{
  background: var(--bcc-surface-2);
  color: var(--bcc-text);
  border: 1px solid var(--bcc-border-strong);
}

/* ---------- Tables inside cards flush ---------- */
.card .table{
  margin-bottom: 0;
}

/* ---------- Small divider ---------- */
.hr-soft{
  border: 0;
  border-top: 1px solid var(--bcc-border);
  margin: 1rem 0;
}

/* ---------- Settings nav offcanvas ---------- */
.settings-nav-offcanvas{
  width: min(360px, 90vw);
  background: var(--bcc-surface);
  border-right: 1px solid var(--bcc-border-strong);
}

.settings-nav-offcanvas .offcanvas-header{
  background: var(--bcc-surface-2);
}

[data-settings-nav] .list-group-item{
  border: none;
  border-radius: 0;
}

[data-settings-nav] .list-group-item.active{
  background: var(--bcc-surface-2);
  color: var(--bcc-text);
}

[data-settings-nav] .list-group-item:hover{
  background: var(--bcc-surface-2);
}

/* ---------- Shared utility styles (dispatcher + MDT) ---------- */
.badge-soft{
  background-color: var(--bcc-surface-2);
  color: var(--bcc-text-2);
  border: 1px solid var(--bcc-border);
}

.status-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}

.signature-pad{
  background: var(--bcc-bg);
  border: 1px dashed var(--bcc-border-strong);
  border-radius: var(--bcc-radius-sm);
  min-height: 160px;
  position: relative;
  touch-action: none;
}

.signature-pad canvas{
  width: 100%;
  height: 160px;
  display: block;
}

.queue-item{
  border: 1px solid var(--bcc-border-strong);
  background: var(--bcc-surface-2);
  border-radius: var(--bcc-radius-sm);
  padding: .25rem;
}

.offline-badge{
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid #9a3412;
  color: #fbbf24;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-weight: 600;
}

.sticky-panel{
  position: sticky;
  top: 80px;
  z-index: 5;
}

.dispatcher-list-item{
  background: var(--bcc-surface);
  border: 1px solid var(--bcc-border);
  border-radius: var(--bcc-radius-sm);
  padding: .25rem .9rem;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}

.dispatcher-list-item + .dispatcher-list-item{
  margin-top: .45rem;
}

.dispatcher-list-item:hover,
.dispatcher-list-item:focus{
  background: var(--bcc-surface-2);
  border-color: var(--bcc-border-strong);
}

.dispatcher-list-item.active{
  border-color: var(--bcc-accent);
  box-shadow: 0 0 0 1px var(--bcc-accent-20);
}

.dispatcher-detail-card{
  background: var(--bcc-surface-2);
  border: 1px solid var(--bcc-border-strong);
  border-radius: var(--bcc-radius);
  box-shadow: var(--bcc-shadow-1);
}

.dispatcher-meta-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}

.status-chip{
  border-radius: 999px;
  padding: .45rem .75rem;
  border: 1px solid var(--bcc-border);
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  background: var(--bcc-surface);
}

.status-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem;
}

.status-grid .btn{
  text-align: left;
  padding: .75rem .85rem;
  border-radius: var(--bcc-radius-sm);
  border: 1px solid var(--bcc-border);
  background: var(--bcc-surface);
  color: var(--bcc-text-2);
  font-weight: 600;
}

.status-grid .btn:hover,
.status-grid .btn:focus{
  border-color: var(--bcc-accent);
  color: var(--bcc-text);
  box-shadow: 0 0 0 1px var(--bcc-accent-10);
}

.status-grid .btn.active{
  border-color: var(--bcc-accent);
  background: var(--bcc-accent-10);
  color: var(--bcc-text);
}

.quick-links{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .5rem;
}

.quick-links .btn{
  width: 100%;
}

.cta-stack .btn{
  padding: .9rem 1rem;
  font-weight: 700;
  font-size: 1rem;
}


.stat-deck{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .85rem;
}

.stat-card{
  border: 1px solid var(--bcc-border);
  background: linear-gradient(135deg, rgba(0,0,0,.72), rgba(4,4,4,.72));
  border-radius: var(--bcc-radius);
  padding: .8rem;
  box-shadow: 0 20px 45px rgba(0,0,0,.35);
}

.stat-card.is-accent{
  border-color: var(--bcc-accent-20);
  box-shadow: 0 20px 50px rgba(255,122,2,.25);
}

.stat-label{
  font-size: .85rem;
  color: var(--bcc-text-2);
  letter-spacing: .02em;
  margin-bottom: .1rem;
}

.stat-value{
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bcc-text);
}

.stat-meta{
  font-size: .8rem;
  color: var(--bcc-text-2);
}

.map-first-tactical__map-wrapper{
  position: relative;
  min-height: 420px;
  border-radius: 18px;
  overflow: hidden;
}

.map-first-tactical__map{
  min-height: 420px;
  height: 100%;
}

.map-first-tactical__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .5rem;
  background: rgba(15, 23, 42, 0.75);
  text-align: center;
  padding: .8rem;
  z-index: 3;
}

.map-first-tactical__overlay--loading{
  opacity: .9;
}

.map-first-tactical__list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-height: 480px;
  overflow-y: auto;
}

.map-first-tactical__list-section{
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.map-first-tactical__list-item{
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  text-align: left;
  padding: .5rem .6rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(15, 23, 42, 0.6);
  color: inherit;
}

.map-first-tactical__list-item:hover,
.map-first-tactical__list-item:focus{
  border-color: rgba(56, 189, 248, 0.6);
  outline: none;
}

.map-first-tactical__swatch{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.6);
}

.map-first-tactical__legend-item{
  display: flex;
  align-items: center;
  gap: .5rem;
}

.map-first-tactical__marker{
  filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.35));
}

.map-first-tactical__marker--incident{
  transform-origin: center;
  animation: pulse 1.8s infinite ease-in-out;
}

@keyframes pulse{
  0%{transform: scale(1);}
  50%{transform: scale(1.12);}
  100%{transform: scale(1);}
}