/* custom-dark.css */

body.dark-mode, .content-wrapper.bg-dark {
    background-color: #1b1c1d !important;
    color: #eaeaea !important;
}

.form-control-dark {
    background-color: #222 !important;
    border-color: #444 !important;
    color: #fff !important;
}

.form-control-dark:focus {
    background-color: #333 !important;
    border-color: #666 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.card.bg-dark {
    background-color: #1e1e1e !important;
}

a.link-light {
    color: #0dcaf0;
    text-decoration: none !important;
}

a.link-light:hover {
    text-decoration: underline !important;
}

.source-link {
    color: inherit;
    text-decoration: none;
}

/* Highlight recent residents */
.table-dark tr.highlight {
    background-color: #24486b !important;
    color: #fff !important;
}

/* Highlight selected unit */
.table-dark td.selected-unit {
    background-color: #24486b !important;
    color: #fff !important;
}

/* Wider title column in cases table */
.case-title {
    min-width: 220px;
}

/* Narrow year filter inputs */
.year-input { width: 8ch; }
.age-input { width: 3ch; }
.zip-input { width: 9ch; }

/* Filter input widths */
.dob-year-input { width: 12ch; }
.bccn-input { width: 8ch; }
.jms-number-input { width: 11ch; }
.age-filter-input { width: 7ch; }
.long-filter-input { width: 14ch; }
.mid-filter-input { width: 12ch; }
.state-filter-input { width: 8ch; }
.city-filter-input { width: 15ch; }
.race-filter-input { width: 9ch; }
.index-filter-input { width: 7ch; }
.radius-input { width: 8ch; }
.calltime-date-input { width: 17ch; }
.calltime-time-select { width: 11ch; }
.mmdd-input { width: 8ch; }
.short-year-input { width: 6ch; }
.bond-amt-input { width: 9ch; }
.clearable-input { padding-right: 1.5rem; }
.clear-btn {
    width: 0.8rem;
    height: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    right: 0.25rem;
    margin-top: 15px;
}

/* Color square used in arrest severity tier table */
.color-box {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;
    border: 1px solid #fff;
    vertical-align: middle;
}

.charges-clear-btn {
    margin-top: 0;
}

.charges-code-col,
.charges-tier-col {
    white-space: nowrap;
    width: 1%;
}

.charges-desc-col {
    white-space: normal;
    word-break: break-word;
}

#resultsTable th:first-child,
#resultsTable td:first-child {
    width: 6ch;
    white-space: nowrap;
}

#resultsTable th.sortable,
#statsTable th.sortable {
    cursor: pointer;
    user-select: none;
}

#resultsTable th.sortable::after,
#statsTable th.sortable::after {
    content: '';
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.65rem;
}

#resultsTable th.sortable.sorted-asc::after,
#statsTable th.sortable.sorted-asc::after {
    content: '▲';
}

#resultsTable th.sortable.sorted-desc::after,
#statsTable th.sortable.sorted-desc::after {
    content: '▼';
}

/* Narrow tier column in tier table */
.tier-value-col {
    width: 6ch;
}

.table-dark tr.selected-row {
    background-color: #24486b !important;
    color: #fff !important;
}

#selectedChargesContainer {
    max-height: 20vh;
    overflow-y: auto;
}

.db-totals {
    color: #fff;
    padding: 0.25rem 0;
}

#dispatchStats {
    color: #fff;
    padding: 0.25rem 0;
}

/* Styling for total rows in stats table */
.stats-total-row {
    background-color: blue !important;
    font-weight: bold;
}

/* Filters row on dispatch stats tab */
.stats-filters {
    margin-top: .5rem !important;
}

/* Dispatch filter grouping */
#filterGroupToggleRow {
    margin-top: 0.25rem;
}

#filterGroupToggleRow .btn {
    min-width: 9rem;
}

.extra-filter-section {
    margin-top: 0.25rem;
}

/* Sticky header rows for dispatch stats table */
#statsPane thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #1e1e1e;
}
#statsPane tbody tr.stats-total-row:first-child th,
#statsPane tbody tr.stats-total-row:first-child td {
    position: sticky;
    /* Align with header row height */
    top: calc(2.3rem - 6px);
    z-index: 1;
    background-color: inherit;
}

/* Alternating background for stats date groups */
.stats-date-group-0 td,
.stats-date-group-0 th {
    background-color: #1e1e1e !important;
}
.stats-date-group-1 td,
.stats-date-group-1 th {
    background-color: #242424 !important;
}

/* Circle used for severity tier counts */
.tier-count-circle {
    border-radius: 50%;
    padding: 0;
    min-width: 1.4em;
    display: inline-block;
    text-align: center;
}

/* Map results table */
#resultsPane {
    min-height: 0;
}
#resultsPane .table-responsive {
    overflow-y: auto;
    height: 100%;
}
#resultsTableContainer {
    height: 100%;
}

#resultsPane thead th {
    position: sticky;
    z-index: 2;
    background-color: #1e1e1e;
}
#resultsPane thead tr.results-headers th {
    top: 0;
}
#resultsPane thead tr.results-filters th {
    /* Align with header row to avoid visible gap */
    top: calc(2.3rem - 6px);
}

#filterSex,
#filterSealed {
    width: 8ch;
}

/* Ensure map and results tabs fill available height */
#viewTabsContent {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#viewTabsContent > .tab-pane {
    flex: 1 0 0;
    min-height: 0;
}
#viewTabsContent > .active {
    display: flex;
    flex-direction: column;
}

/* Ensure map occupies full height */
#mapPane,
#mapContainer,
#map {
    height: 100%;
    min-height: 0;
}

/* API fetch logs layout */
#apiPane {
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

#apiPane.active {
    display: flex;
}

#fetchLogs {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Label styling for emoji markers */
.emoji-marker-label {
    background-color: white;
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.3);
    font-size: 16px !important;
}


/* Legend filter badges */
.filter-badge {
    cursor: pointer;
    user-select: none;
}

.filter-badge.cat-active {
    outline: 2px solid #fff;
}
.filter-badge.tier-active {
    outline: 2px solid #fff;
}
.filter-badge.cat-excluded {
    outline: 2px solid #fff;
    text-decoration: line-through;
}
.filter-badge.tier-excluded {
    outline: 2px solid #fff;
    text-decoration: line-through;
}

.legend-label {
    margin-right: 0.5rem;
    font-weight: 600;
}

/* Drop shadow for map markers */
.map-marker-shadow {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
    transition: transform 0.1s;
    will-change: transform;
    transform: scale(calc(var(--sr-scale, 1) * var(--sr-scale-mult, 1)));
    transform-origin: bottom center;
}

.map-marker-dim {
    filter: grayscale(0.35) saturate(0.6) brightness(0.92);
    opacity: 0.7;
}

.map-marker-dim .map-marker-num {
    opacity: 0.9;
}

.map-marker-pop {
    --sr-scale-mult: 1.2;
    filter: drop-shadow(0 0 0 2px #fff) drop-shadow(0 1px 2px rgba(0,0,0,0.7));
}

.map-marker-wrapper {
    position: relative;
    display: inline-block;
}

.map-marker-num {
    position: absolute;
    top: calc(-0.25rem * var(--sr-scale, 1) * var(--sr-scale-mult, 1));
    left: calc(-0.25rem * var(--sr-scale, 1) * var(--sr-scale-mult, 1));
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 4px;
    padding: 0 0.25rem;
    color: #fff;
    transform: scale(calc(var(--sr-scale, 1) * var(--sr-scale-mult, 1)));
    transform-origin: bottom center;
    transition: transform 0.1s, top 0.1s, left 0.1s;
}


#eventListWrapper {
    width: 20rem;
    position: relative;
}
#eventListWrapper.compact-tiles {
    width: 13rem;
}

#tileSearchOverlay {
    width: 100%;
}

#tileSearchOverlay .tile-search-box {
    background-color: #121416;
    border: 1px solid #444;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
    padding: 0.5rem 0.75rem;
    width: 100%;
}

#tileSearchOverlay .tile-search-box input {
    min-width: 0;
}

#eventList {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

.event-tile {
    padding: 0.5rem;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    transition: transform 0.1s;
}
.event-tile > div {
    padding-top: 2px;
    padding-bottom: 2px;
}

.event-tile:hover {
    transform: translateY(-2px);
    z-index: 2;
}

.event-tile-pop {
    transform: translateY(-2px);
    z-index: 2;
    outline: 2px solid #fff;
}

.time-badge {
    display: inline-block;
    padding: 0 0.25rem;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.4);
    position: absolute;
    top: 0.50rem;
    right: 0.50rem;
}

.event-num {
    display: inline-block;
    padding: 0 0.25rem;
    margin-right: 0.25rem;
    font-weight: bold;
    border-radius: 4px;
}

.call-type {
    display: inline;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}
/* keep every call-type on ONE line inside the pill */
.history-label .call-type{ white-space:nowrap; }

.blink {
    animation: blink-animation 1s steps(2, start) infinite;
}

.history-clock {
    position: relative;
    display: inline-block;
    overflow: hidden;
    z-index: 0;
}

/* background track */
.history-clock::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--clock-color, #4d4d4d);
    opacity: 0.25;
    border-radius: 2px;
    z-index: -2;
}

/* foreground fill bar */
.history-clock::after {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--clock-progress, 0%);
    background-color: var(--clock-color, #4d4d4d);
    transition: width 0.9s linear;
    border-radius: 2px;
    z-index: -1;
}
.clock-reset::after {
    transition: none !important;
}

.clock-flash::after {
    background-color: var(--clock-color, #4d4d4d);
}


@keyframes blink-animation {
    to { visibility: hidden; }
}

#dispatchStats,
#showLocationContainer {
    position: relative;
    z-index: 10;
}

#historyToolbar{
  display:flex;
  align-items:center;
  gap:1rem;
  flex-wrap:nowrap;
  position:relative;
}

#historyBtn.centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* history toolbar layout ---------------------------------------*/
#historyBtn          { order: 10; }

#historyCount        { order: 9; }
#historyCount { display:none; color:#fff; }
.replay-on #historyCount{ display:inline; }

#historyBtn {
    min-width: 6.5rem;
    text-align: center;
    white-space: nowrap;
}

#liveToggle {
    min-width: 7rem;
}

#showLocationContainer { margin-left: .75rem; }

@media (max-width: 992px){
  .d-flex.align-items-center.justify-content-between{ flex-wrap: wrap; }
}

#historySpeed {
    width: auto;
}

/* Navbar logo size and spacing */
.navbar-logo {
    height: 60px;
    margin-left: 12px;
}

#menuToggleBtn {
    margin-left: 24px;
}

/* Right spacing for the sign out link */
.navbar-signout {
    margin-right: 36px;
}

/* --- main (Search / Stats / Saved) tab panes -------------------- */
#mainTabsContent {
    /* so the active pane can stretch */
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#mainTabsContent > .tab-pane {
    flex: 1 0 0;
    min-height: 0;
}
#mainTabsContent > .active {
    display: flex;
    flex-direction: column;
}

/* log prefix with time/source info */
.log-prefix {
    color: #0dcaf0;
}

/* meta info like [200, 2.17s] */
#log small.text-muted {
    color: lightgray !important;
}

.bracket-hl {
    color: yellow;
}

.raw-hl {
    color: lightgreen;
}

.raw-missing-hl {
    color: green;
}


.btn-live-on {
    background-color: #008f84 !important;
    border-color: #008f84 !important;
    color: #fff !important;
}

/* ───────── timeline bar layout ──────────────────────────────── */
#historyToolbar{ flex-wrap:nowrap; }

/* ───── fixed slot for the clock when timeline is open ───────── */
.replay-on #historyClock{
  /* reserve exactly 18 “character” units
     → fits strings up to “12/31/25, 11:59 PM” (17 ch)            */
  flex: 0 0 14ch !important;     /* no grow, no shrink            */
  max-width: 14ch !important;
  min-width: 14ch !important;

  text-align: center;             /* digits line up neatly         */
  white-space: nowrap;           /* never wrap                    */

  position: relative;
  z-index: 0;
  --clock-color: #444;
  --clock-progress: 0;
}

/* ─── timeline event label ───────────────────────────────────── */
.history-label{
  /* layout */
  display:inline-flex;
  align-items:center;
  gap:0.25rem;

  /* flex sizing → let the slider grow first, allow label to shrink */
  flex:0 1 auto !important;    /* no grow, may shrink               */
  min-width:0;                 /* enable text-overflow to work       */

  /* look & feel */
  padding:0.25rem;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:right;            /* times & numbers align neatly       */
}

/* ───── variable width rail: 100 px → 200 px ───── */
.replay-on #historySlider{
  flex: 1 1 100px !important;   /* ideal 100, may grow or shrink */
  min-width: 100px !important;  /* never smaller than old size   */
  max-width: 700px !important;  /* cap at double the old size    */
}

/* ───────── hide / show helpers when timeline mode is active ── */
/* do NOT add .d-none from JS – rely on this */
.replay-on #dispatchStats         { display:none !important; }
.replay-on #showLocationContainer { display:none !important; }
.replay-on #mapOptionsContainer   { display:none !important; }
.replay-on #mapOptionsDropdown    { display:none !important; }

/* ───────── timeline control strip ──────────────────────────── */
/* base layout (applies in live view too, but the block is hidden) */
#historyControl{
  /* FLEX SIZING ------------------------------------------------*/
  flex: 1 1 auto !important;   /* may grow & shrink to fit row   */
  min-width: 0;                /* allow children to shrink       */

  /* CHILD ORDER & GAP -----------------------------------------*/
  display: none;               /* hidden by default (live view)  */
  gap: .5rem;                  /* space between inner widgets    */
}
#historyControl > *{ order:0; } /* keep natural DOM order        */

/* make the strip visible when timeline mode is active */
.replay-on #historyControl{ display:flex !important; }

/* ───── timeline buttons: equal width & hidden in live view ───── */
#playHistoryBtn,
#pauseHistoryBtn,
#stopHistoryBtn,
#prevHistoryBtn,
#nextHistoryBtn{
  /* ➊ identical width so row never jitters */
  width: 2.75rem;             /* ≈44 px – tweak if you need wider icons */
  text-align: center;         /* centre glyph/label inside the slot     */
  padding-left: 0;            /* remove default btn padding so           */
  padding-right: 0;           /* the measured width is exact             */

  /* ➋ hide by default (live view) – CSS, not JS */
  display: none;
}

/* only inside timeline mode do buttons appear;
   JavaScript still controls d-none/disabled for play‑state logic */
.replay-on #playHistoryBtn,
.replay-on #pauseHistoryBtn,
.replay-on #stopHistoryBtn,
.replay-on #prevHistoryBtn,
.replay-on #nextHistoryBtn{
  display:inline-block;       /* matches Bootstrap btn‑inline behaviour */
}

@media (max-width: 575.98px){
  .history-label{ display:none !important; }
  #historyBtn{ min-width:2.25rem; order:0; margin-left:0 !important; margin-right:auto !important; }
  #markerStyleWrapper{ order:1; }
  #mapOptionsDropdown{ order:2; margin-left:auto !important; }
  #dispatchStats .res-addr,
  #dispatchStats .res-time,
  #dispatchStats .res-updated{ display:none !important; }
  #dispatchStats{ display:none !important; }
  #mapOptionsContainer{ display:none !important; }
}

/* menu overlay and sidebar */
#menuOverlay {
    z-index: 1060;
}

#sidebar {
    width: var(--sr-sidebar-wide);
    z-index: 1050;
    transition: width 0.2s;
    background-color: #282a2c !important;
}

#sidebar.collapsed {
    width: var(--sr-sidebar-narrow);
}

#sidebar.collapsed .sidebar-text {
    display: none;
}

#sidebar.collapsed .nav-link {
    text-align: center;
}

#sidebar.collapsed .nav-link i {
    margin-right: 0 !important;
    display: block;
}

#sidebar .menu-toggle-btn {
    align-self: flex-start;
    margin: 0.5rem 0 0 0.5rem;
}

#sidebar .menu-toggle-btn .logo-icon {
    display: none;
    height: 24px;
}
#sidebar.collapsed .menu-toggle-btn .logo-icon {
    display: inline-block;
}

#sidebar.collapsed .menu-toggle-btn i {
    display: none;
}

#sidebar.collapsed .menu-toggle-btn:hover .logo-icon {
    display: none;
}

#sidebar.collapsed .menu-toggle-btn:hover i {
    display: inline-block;
}

#sidebar .sidebar-top {
    display: flex;
    align-items: center;
}

#menuOverlay a.nav-link,
#sidebar a.nav-link {
    color: #fff !important;
}

#menuOverlay a.nav-link:hover,
#sidebar a.nav-link:hover {
    background-color: #444 !important;
}

/* --- icon column alignment ---------------------------------- */
#sidebar .menu-toggle-btn,
#sidebar .nav-link {
    padding-left: 1rem !important;
    padding-right: .75rem !important;
    margin-left: 0 !important;
}

#sidebar .menu-toggle-btn i,
#sidebar .nav-link i {
    width: 1.35rem;
    text-align: center;
}

/* ───── sidebar sizing variables ─────────────────────────────── */
:root {
    --sr-sidebar-wide: 280px;
    --sr-sidebar-narrow: 60px;
}


@media (min-width: 992px) {
    .main-header.navbar,
    .content-wrapper {
        margin-left: var(--sr-sidebar-wide);
        transition: margin-left .2s ease;
    }

    body.sidebar-collapsed .main-header.navbar,
    body.sidebar-collapsed .content-wrapper {
        margin-left: var(--sr-sidebar-narrow);
    }
}


/* -----------------------------------------------------------
   collapsed-rail housekeeping for ALL links (top & bottom)
   ----------------------------------------------------------- */
#sidebar.collapsed .nav-link{
    /* centre the glyph perfectly */
    padding-left: 0 !important;
    padding-right: 0 !important;

    display: flex;                 /* keep the 24-px icon centred */
    justify-content: center;
    align-items: center;
}

/* remove the desktop offset that put Sign-out off-centre */
#sidebar.collapsed .navbar-signout{
    margin-right: 0 !important;
}

@media (max-width: 991.98px){          /* md & below */
  #dispatchTotals{ display:none!important; }
  #resultsSummary .res-addr,
  #resultsSummary .res-time{ display:none!important; }
  #mapOptionsContainer{ display:none !important; }
}
@media (max-width: 1199.98px){         /* lg only */
  #resultsSummary .res-updated{ display:none!important; }
}

@media (max-width: 2049.98px){
  #dispatchStats .res-addr,
  #dispatchStats .res-time,
  #dispatchStats .res-updated,
  #resultsSummary .res-addr,
  #resultsSummary .res-time,
  #resultsSummary .res-updated{ display:none!important; }
}

/* full-height flex layout ------------------------------------ */
html, body{ height:100%; }              /* baseline               */

.wrapper{                                /* AdminLTE root node     */
    display:flex;
    flex-direction:column;
    min-height:100%;                    /* fill viewport          */
}

.content-wrapper{                        /* all pages              */
    display: flex;
    flex-direction: column;   /* keeps existing vertical flow       */
    flex: 1 1 auto;                     /* take remaining height  */
    min-height:0;                       /* allow children to flex */
    overflow:hidden;                    /* body never scrolls     */
}

/* pages like Dispatches that already use     */
/* .container-fluid d-flex flex-column …       */
.page-fill{                               /* new helper class      */
    flex:1 1 auto;                       /* grow / shrink          */
    min-height:0;                        /* critical for flexbox   */
}

/* ==========  Dispatch-page responsive pack  (2025-07-18)  ========= */

/* ----------  utilities  ----------------------------------------- */
@media (max-width: 1199.98px){ .hide-xl{display:none!important;} }
@media (max-width: 991.98px) { .hide-lg{display:none!important;} }
@media (max-width: 767.98px) { .hide-md{display:none!important;} }

/* ----------  XL (\u22651200) –– your existing desktop look ---------- */
/* NO new rules needed – keep everything visible                   */

/* ----------  LG (992-1199) -------------------------------------- */
@media (max-width: 1199.98px){

  /* header toolbars: allow wrap to TWO rows                      */
  #searchToolbar, #historyToolbar{
     flex-wrap:wrap;
     gap:.5rem .75rem;
  }
  #searchToolbar > *{ flex:1 1 calc(33.333% - .75rem); }
  /* map options visible on large screens */

  /* totals footer stays visible                                  */
}

/* ----------  MD (768-991)  -------------------------------------- */
@media (max-width: 991.98px){

  #searchToolbar > *{ flex:1 1 calc(50% - .75rem); }

  /* stats banner: keep only dispatch count                       */
  #dispatchStats .res-addr,
  #dispatchStats .res-time,
  #dispatchStats .res-updated{ display:none!important; }

  #dispatchTotals{ display:none!important; }
}

/* ----------  SM / XS (<768)  ------------------------------------ */
@media (max-width: 767.98px){

  /* stack search-toolbar items one-per-row                       */
  #searchToolbar > *{ flex:1 1 100%; }

  /* dropdown button gets breathing room                          */
  #mapOptionsDropdown{ width:100%; }

  /* reduce left/right padding around the whole page              */
  .content-wrapper{ padding-left:1rem; padding-right:1rem; }
}

/* ----------  ultra-small fix: avoid map squish ----------------- */
@media (max-width: 400px){
  #map{ min-height:55vh; }
}

/* --- extra responsive tweaks ---------------------------------- */
#mapOptionsContainer{ display:none!important; }
#mapOptionsDropdown { display:block!important; }

@media (max-width: 1199.98px){
    #searchToolbar .btn-show-filters::after{ content:""; }
    #searchToolbar .btn-reset::after      { content:"Reset";   }
    #searchToolbar .btn-search::after     { content:"Search";  }
    #searchToolbar .btn-save-search::after{ content:"Save";    }

    /* short labels for header buttons */
    #toggleFilters::after{content:"";}
    #toggleFilters{white-space:nowrap;}
    #resetFilters::after {content:"";}
    #searchBtn::after   {content:"";}
    #saveSearch::after  {content:"";}
    #toggleFilters, #resetFilters, #searchBtn, #saveSearch{
        font-size:.875rem;
    }

    #dispatchStats .res-addr,
    #dispatchStats .res-time,
    #dispatchStats .res-updated{ white-space:nowrap; overflow:hidden;
                                 text-overflow:ellipsis; max-width:16ch; }
}

@media (max-width: 951.98px){
    #dispatchTotals{ display:none!important; }
    #historyBtn span{ display:none; }
    #historyBtn i::before{ content:"\f144"; }
}

#liveHours{ width:auto!important; min-width:110px; }
#lastMinutesSelect{ width:auto!important; min-width:110px; }

#markerStyle{ max-width:140px; }
#markerStyleWrapper{ order:11; }
#mapOptionsContainer{ order:12; }
#mapOptionsDropdown{ order:12; margin-left:auto; }

.compact-tiles .event-tile {
    padding: 0.5rem;
}
.compact-tiles .event-tile > div {
    padding-top: 1px;
    padding-bottom: 1px;
}
.source-icon {
    height: 1rem;
}

/* call type dropdown overlay */
#typeOverlay {
    position: absolute;
    z-index: 1100;
    background-color: #2b2b2b;
    color: #fff;
    font-size: 14px;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0.25rem;
    max-height: 15rem;
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 8rem;
}

#typeOverlay .type-item {
    padding: 2px 4px;
    cursor: pointer;
    white-space: nowrap;
}
#typeOverlay .type-item.excluded {
    text-decoration: line-through;
    opacity: 0.65;
}
#typeOverlay .type-item:hover {
    background-color: #555;
}

/* generic dropdown overlay */
#selectOverlay {
    position: absolute;
    z-index: 1100;
    background-color: #2b2b2b;
    color: #fff;
    font-size: 14px;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 0.25rem;
    min-width: 8rem;
}

#selectOverlay .select-item {
    padding: 2px 4px;
    cursor: pointer;
    white-space: nowrap;
}
#selectOverlay .select-item:hover, #selectOverlay .select-active {
    background-color: #555;
}

#mapOptionsDropdown .dropdown-menu {
    font-size: 14px;
}

#tierCounts {
    margin-right: 4rem !important;
}

@media (max-width: 2049.98px) {
    #eventLabel,
    #eventCount {
        display: none !important;
    }
    #resultsSummary {
        justify-content: flex-start !important;
    }
}

/* --- Map Tools (Dark, Google-like) --------------------------------- */

.map-tools {
    position: absolute;
    right: 12px;
    top: 61px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 5;
}

.map-tools .btn-group {
    width: 80px;
}

.map-tools #markersToggleGroup {
    width: 40px;
    height: 40px;
}

.map-tools .btn-group .btn {
    flex: 1 1 auto;
}

.map-tools .btn-group .dropdown-toggle-split::after {
    margin-left: 0;
}

.map-tools .btn,
.map-tools .btn-secondary {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(68, 68, 68);
    border: 1px solid rgb(68, 68, 68);
    border-radius: 2px;
    color: #b3b3b3;
    box-shadow: 0 1px 2px rgba(0,0,0,.30), 0 1px 6px rgba(0,0,0,.15);
}

.map-tools .btn:hover,
.map-tools .btn-secondary:hover {
    background: rgb(68, 68, 68);
    border-color: rgb(68, 68, 68);
    color: #eaeaea;
}

.map-tools .btn:active,
.map-tools .btn-secondary:active {
    transform: translateY(1px);
}

.map-tools .btn:focus-visible,
.map-tools .btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(138,180,248,.60),
                0 1px 2px rgba(0,0,0,.30), 0 1px 6px rgba(0,0,0,.15);
}

.map-tools .is-active {
    color: #8ab4f8;
    border-color: rgba(138,180,248,.5);
}

.map-tools .btn svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: currentColor;
}

.markers-dropdown {
    min-width: 220px;
}

.markers-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.markers-dropdown .dropdown-header {
    font-size: 0.75rem;
    text-transform: uppercase;
}

.markers-dropdown .form-check-input {
    margin-top: 0;
}