html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Segoe UI", Arial, sans-serif;
  background: #0f172a;
  color: #e2e8f0;
}

* {
  box-sizing: border-box;
}

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

#sidebar {
  width: 390px;
  min-width: 390px;
  background: #0b1220;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  border-right: 4px solid #b91c1c;
  box-shadow: 2px 0 10px rgba(0, 0, 0, .45);
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #1e293b;
  background: #0b1220;
}

.logo {
  width: 58px;
  height: 58px;
  background: #ffffff;
  border-radius: 10px;
  padding: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo img,
.logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.title {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.05;
  color: #ffffff;
}

.subtitle {
  font-size: 12px;
  color: #cbd5e1;
  margin-top: 2px;
}

.connected {
  margin-top: 4px;
  color: #22c55e;
  font-size: 11px;
  font-weight: 800;
}

.clockPanel {
  padding: 12px 10px;
  border-bottom: 1px solid #1e293b;
}

#clock {
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  color: #ffffff;
}

#lastRefresh {
  margin-top: 6px;
  color: #94a3b8;
  font-size: 11px;
}

.summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 8px 8px;
}

.card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 8px 3px;
  text-align: center;
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 700;
}

.card span {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  font-weight: 900;
}

.card.respondingCard {
  border-color: #dc2626;
  background: rgba(127, 29, 29, .55);
}

.card.respondingCard span {
  color: #fca5a5;
}

.card.respondingCard.active-response {
  animation: summaryResponsePulse 1.1s infinite;
}

.card.gpsIssueCard {
  border-color: #d97706;
}

.card.gpsIssueCard span {
  color: #fbbf24;
}

.command-panel {
  margin: 0 8px 8px;
  padding: 9px;
  border: 1px solid #334155;
  border-radius: 9px;
  background: rgba(15, 23, 42, .86);
}

.command-panel.has-response {
  border-color: #dc2626;
  box-shadow: 0 0 18px rgba(220, 38, 38, .22);
}

.command-title {
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 900;
  color: #cbd5e1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.command-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.command-item {
  padding: 5px 4px;
  border-radius: 6px;
  background: #1e293b;
  text-align: center;
  color: #94a3b8;
  font-size: 8px;
  font-weight: 700;
}

.command-item strong {
  display: block;
  margin-top: 2px;
  color: #ffffff;
  font-size: 15px;
  line-height: 1;
}

.command-item.response strong {
  color: #f87171;
}

.command-item.warning strong {
  color: #fbbf24;
}

.gpsLine {
  display: flex;
  gap: 6px;
  padding: 0 8px 8px;
  font-size: 11px;
  font-weight: 900;
  flex-wrap: wrap;
}

.gpsPill {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 4px 8px;
  color: #ffffff;
}

.gpsPill.good {
  border-color: #16a34a;
}

.gpsPill.warn {
  border-color: #64748b;
}

.gpsPill.bad {
  border-color: #dc2626;
}

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 10px;
}

#search {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 7px;
  border: none;
  outline: none;
  font-size: 13px;
  background: #ffffff;
  color: #0f172a;
}

button,
#forceSync,
#fleetHealthLink {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #0f172a;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}

button:hover,
#forceSync:hover,
#fleetHealthLink:hover {
  background: #e2e8f0;
}

.popup-health {
  margin: 8px 0;
  padding: 8px 9px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #0f172a;
  line-height: 1.45;
}

.leaflet-popup-content .popup-health,
.leaflet-popup-content .popup-health * { color: #0f172a !important; }
.leaflet-popup-content .popup-health a { color: #1d4ed8 !important; font-weight: 900; }

.popup-health-status { font-weight: 900; }
.leaflet-popup-content .popup-health-status.good { color: #15803d !important; }
.leaflet-popup-content .popup-health-status.warn { color: #b45309 !important; }
.leaflet-popup-content .popup-health-status.bad { color: #b91c1c !important; }

button:disabled,
#forceSync:disabled {
  cursor: wait;
  opacity: .6;
}

#apparatusList {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}

.unit {
  min-height: 44px;
  margin-bottom: 5px;
  padding: 6px 9px;
  background: #1e293b;
  border-left: 6px solid #64748b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition:
    background .15s ease,
    transform .15s ease,
    box-shadow .15s ease;
}

.unit:hover {
  background: #273449;
  transform: translateX(2px);
}

.unit-icon {
  width: 24px;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.unit-icon svg {
  width: 21px;
  height: 21px;
  display: block;
}

.unit-main {
  min-width: 0;
  flex: 1;
}

.unit-title {
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit-sub {
  margin-top: 2px;
  font-size: 9px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.unit.responding {
  border-left-color: #ef4444;
  background: rgba(127, 29, 29, .68);
  animation: respondingCardPulse 1.15s infinite;
  box-shadow:
    inset 0 0 0 1px rgba(248, 113, 113, .32),
    0 0 18px rgba(220, 38, 38, .28);
}

.unit.responding:hover {
  background: rgba(153, 27, 27, .78);
}

.unit.moving {
  border-left-color: #2563eb;
}

.unit.defined {
  border-left-color: #16a34a;
}

.unit.away {
  border-left-color: #d97706;
}

.unit.stale {
  border-left-color: #dc2626;
  opacity: .72;
  filter: grayscale(.28);
}

.unit.nogps {
  border-left-color: #64748b;
}

.unit.offline {
  border-left-color: #9333ea;
}

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  color: #ffffff;
  white-space: nowrap;
}

.badge.responding {
  background: #dc2626;
  border: 1px solid #f87171;
  letter-spacing: .04em;
  animation: respondingBadgePulse 1.15s infinite;
}

.badge.moving {
  background: #2563eb;
}

.badge.defined {
  background: #16a34a;
}

.badge.away {
  background: #d97706;
}

.badge.stale {
  background: #dc2626;
  border: 1px dashed #fecaca;
}

.badge.nogps {
  background: #64748b;
}

.badge.offline {
  background: #9333ea;
}

#map {
  flex: 1;
  height: 100vh;
  background: #111827;
}

.map-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 900;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 9px;
  background: rgba(15, 23, 42, .9);
  box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.map-mode-button {
  padding: 6px 9px;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #1e293b;
  color: #e2e8f0;
  font-size: 10px;
  font-weight: 900;
}

.map-mode-button:hover {
  background: #334155;
}

.map-mode-button.active {
  border-color: #60a5fa;
  background: #2563eb;
  color: #ffffff;
}

.map-legend {
  position: absolute;
  right: 12px;
  bottom: 22px;
  z-index: 900;
  min-width: 148px;
  padding: 9px 10px;
  border: 1px solid #334155;
  border-radius: 9px;
  background: rgba(15, 23, 42, .92);
  color: #e2e8f0;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}

.legend-title {
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-dot.responding {
  background: #dc2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, .9);
}

.legend-dot.available {
  background: #16a34a;
}

.legend-dot.moving {
  background: #2563eb;
}

.legend-dot.away {
  background: #d97706;
}

.legend-dot.nogps {
  background: #64748b;
}

.legend-dot.stale {
  background: #dc2626;
  border: 2px solid #ffffff;
}

.marker-shell {
  width: 90px;
  height: 38px;
  position: relative;
  overflow: visible;
}

.marker-connector {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--connector-length);
  height: 2px;
  background: rgba(30, 41, 59, .55);
  border-radius: 999px;
  transform-origin: left center;
  transform: rotate(var(--connector-angle));
  z-index: 0;
  pointer-events: none;
}

.marker-shell.marker-displaced .marker-connector {
  display: block;
}

.marker-location-dot {
  display: none;
  position: absolute;
  left: calc(50% - var(--marker-dx));
  top: calc(50% - var(--marker-dy));
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow:
    0 0 0 1px rgba(120, 53, 15, .72),
    0 2px 5px rgba(15, 23, 42, .45);
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}

.marker-shell.marker-precise-location .marker-location-dot {
  display: block;
}

.marker-shell.marker-precise-location .marker-connector {
  height: 2px;
  background: rgba(180, 83, 9, .78);
}

.marker-tag {
  min-width: 68px;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  border: 2px solid #ffffff;
  color: #ffffff;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .38);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.marker-svg {
  width: 17px;
  height: 17px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marker-svg svg {
  width: 17px;
  height: 17px;
  display: block;
}

.marker-label {
  display: inline-block;
  line-height: 1;
  letter-spacing: .01em;
}

.marker-engine { border-radius: 5px; }
.marker-medic { border-radius: 9px; }
.marker-ladder { min-width: 70px; border-radius: 5px; }
.marker-command { border-radius: 999px; }
.marker-prevention { min-width: 60px; border-radius: 999px; }
.marker-generic { border-radius: 7px; }

.kiosk-mode .marker-shell {
  width: 86px;
  height: 36px;
}

.kiosk-mode .marker-tag {
  min-width: 64px;
  height: 28px;
  padding: 0 7px;
  font-size: 15px;
  border-width: 2px;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .36);
}

.kiosk-mode .marker-svg,
.kiosk-mode .marker-svg svg {
  width: 16px;
  height: 16px;
}

.kiosk-mode .marker-location-dot {
  width: 11px;
  height: 11px;
}

.movingMarker {
  animation: pulseMove 1.5s infinite;
}


.awayMarker {
  border-color: #f59e0b;
  box-shadow:
    0 0 0 2px rgba(245, 158, 11, .35),
    0 4px 12px rgba(0, 0, 0, .45);
}

.respondingMarker {
  animation: respondingMarkerPulse 1s ease-in-out infinite;
  border-width: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55);
  will-change: transform, filter, opacity;
}

.popup-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
}

.popup-svg {
  width: 26px;
  height: 26px;
  color: #ffffff;
}

.popup-svg svg {
  width: 26px;
  height: 26px;
  display: block;
}

.popup-alert {
  color: #f87171;
  font-weight: 900;
}

@keyframes pulseMove {
  0% {
    box-shadow:
      0 0 0 0 rgba(37, 99, 235, .85),
      0 4px 12px rgba(0, 0, 0, .45);
  }

  70% {
    box-shadow:
      0 0 0 10px rgba(37, 99, 235, 0),
      0 4px 12px rgba(0, 0, 0, .45);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(37, 99, 235, 0),
      0 4px 12px rgba(0, 0, 0, .45);
  }
}

@keyframes respondingMarkerPulse {
  0%, 100% {
    filter: brightness(1);
    opacity: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .40);
  }
  50% {
    filter: brightness(1.35);
    opacity: .82;
    box-shadow: 0 0 0 5px rgba(239, 68, 68, .24), 0 3px 8px rgba(0, 0, 0, .40);
  }
}

@keyframes respondingBadgePulse {
  0%,
  100% {
    background: #991b1b;
  }

  50% {
    background: #ef4444;
  }
}

@keyframes respondingCardPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(248, 113, 113, .3),
      0 0 10px rgba(220, 38, 38, .18);
  }

  50% {
    box-shadow:
      inset 0 0 0 2px rgba(248, 113, 113, .72),
      0 0 22px rgba(220, 38, 38, .48);
  }
}

@keyframes summaryResponsePulse {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(220, 38, 38, 0);
  }

  50% {
    box-shadow: 0 0 18px rgba(220, 38, 38, .55);
  }
}

.leaflet-popup-content-wrapper {
  background: #0f172a;
  color: #ffffff;
  border-radius: 8px;
}

.leaflet-popup-tip {
  background: #0f172a;
}

.leaflet-popup-content {
  font-size: 13px;
  line-height: 1.45;
}

.leaflet-popup-content a {
  color: #60a5fa;
  font-weight: 800;
}

#apparatusList::-webkit-scrollbar {
  width: 8px;
}

#apparatusList::-webkit-scrollbar-track {
  background: #0b1220;
}

#apparatusList::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 20px;
}

#apparatusList::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

@media (max-width: 1100px) {
  #sidebar {
    width: 360px;
    min-width: 360px;
  }

  .summary {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  #sidebar {
    width: 340px;
    min-width: 340px;
  }

  .title {
    font-size: 18px;
  }

  #clock {
    font-size: 26px;
  }

  .card span {
    font-size: 24px;
  }

  .map-controls {
    flex-direction: column;
  }
}

/* Active911 incident popup */
.active911-overlay[hidden] {
  display: none;
}

.active911-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(6px);
}

.active911-panel {
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow: hidden;
  border: 4px solid #ef4444;
  border-radius: 16px;
  background: #0f172a;
  box-shadow:
    0 0 0 6px rgba(239, 68, 68, .18),
    0 0 48px rgba(239, 68, 68, .6);
  animation: active911PanelPulse 1.15s infinite;
}

.active911-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 18px;
  background: #b91c1c;
  color: #ffffff;
  font-size: clamp(20px, 2.7vw, 34px);
  font-weight: 1000;
  letter-spacing: .06em;
  text-align: center;
}

.active911-light {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 16px #ffffff;
  animation: active911LightFlash .55s infinite alternate;
}

.active911-description {
  padding: 15px 24px 5px;
  color: #fca5a5;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 1000;
  line-height: 1.02;
  text-align: center;
  text-transform: uppercase;
}

.active911-place {
  padding: 0 22px 4px;
  color: #f8fafc;
  font-size: clamp(17px, 2vw, 24px);
  font-weight: 800;
  text-align: center;
}

.active911-address-block {
  padding: 7px 24px 13px;
  text-align: center;
}

.active911-address {
  color: #ffffff;
  font-size: clamp(23px, 3vw, 38px);
  font-weight: 950;
  line-height: 1.05;
}

.active911-city {
  margin-top: 4px;
  color: #cbd5e1;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 800;
}

.active911-cross-street {
  margin-top: 7px;
  color: #fde68a;
  font-size: clamp(14px, 1.6vw, 19px);
  font-weight: 800;
}

.active911-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 18px 12px;
}

.active911-info-card {
  min-width: 0;
  max-height: 150px;
  overflow: auto;
  padding: 11px 13px;
  border: 1px solid #475569;
  border-radius: 10px;
  background: #111c31;
}

.active911-label {
  margin-bottom: 5px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.active911-value {
  color: #ffffff;
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 750;
  line-height: 1.25;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.active911-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid #334155;
  background: #0b1220;
  color: #cbd5e1;
  font-size: 15px;
  font-weight: 700;
}

#active911Dismiss {
  min-width: 140px;
  padding: 9px 18px;
  border: 2px solid #fca5a5;
  border-radius: 8px;
  background: #b91c1c;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
  cursor: pointer;
}

#active911Dismiss:hover,
#active911Dismiss:focus-visible {
  background: #dc2626;
  outline: 3px solid rgba(255, 255, 255, .45);
}

@keyframes active911PanelPulse {
  0%, 100% {
    border-color: #dc2626;
  }

  50% {
    border-color: #fca5a5;
  }
}

@keyframes active911LightFlash {
  from {
    opacity: .2;
    transform: scale(.72);
  }

  to {
    opacity: 1;
    transform: scale(1.07);
  }
}

@media (max-width: 760px) {
  .active911-overlay {
    padding: 6px;
  }

  .active911-panel {
    width: 96vw;
    max-height: 94vh;
  }

  .active911-grid {
    grid-template-columns: 1fr;
  }

  .active911-info-card {
    max-height: 110px;
  }

  .active911-footer {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  #active911Dismiss {
    width: 100%;
  }
}


/* ===== Kiosk / unattended display mode ===== */
.connection-online {
  color: #22c55e;
}

.connection-delayed {
  color: #fbbf24;
}

.connection-lost {
  color: #f87171;
}

.connection-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5000;
  padding: 11px 18px;
  border-bottom: 2px solid #fecaca;
  background: #b91c1c;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .04em;
}

.kiosk-mode .controls,
.kiosk-mode .map-controls,
.kiosk-mode .leaflet-control-zoom,
.kiosk-mode #active911Dismiss {
  display: none !important;
}

.kiosk-mode .active911-footer {
  justify-content: center;
}

.kiosk-mode .active911-panel {
  width: min(1000px, 96vw);
  max-height: 94vh;
  pointer-events: none;
}

.kiosk-mode .active911-grid {
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
}

.kiosk-mode .active911-info-card {
  min-height: 230px;
  height: min(42vh, 400px);
  max-height: min(42vh, 400px);
  overflow: hidden;
}

.kiosk-mode #active911Details {
  font-size: clamp(14px, 1.35vw, 19px);
  line-height: 1.2;
}

.kiosk-mode #active911Details.compact {
  font-size: clamp(12px, 1.12vw, 16px);
  line-height: 1.12;
}

.kiosk-mode #active911Details.dense {
  font-size: clamp(10px, .95vw, 14px);
  line-height: 1.08;
}

.kiosk-mode #map,
.kiosk-mode .leaflet-container {
  cursor: default;
}

.kiosk-mode.kiosk-cursor-hidden,
.kiosk-mode.kiosk-cursor-hidden * {
  cursor: none !important;
}

/* ===== Purpose-built unattended command display ===== */
.kiosk-status-board { display: none; }

.kiosk-mode #sidebar {
  width: 380px;
  min-width: 380px;
  border-right-width: 3px;
}

.kiosk-mode .brand { padding: 12px 14px; }
.kiosk-mode .logo { width: 64px; height: 64px; }
.kiosk-mode .title { font-size: 21px; }
.kiosk-mode .subtitle { font-size: 13px; }
.kiosk-mode .connected { font-size: 12px; }
.kiosk-mode .clockPanel { padding: 13px 14px; }
.kiosk-mode #clock { font-size: 40px; white-space: nowrap; }
.kiosk-mode #lastRefresh { font-size: 12px; }
.kiosk-mode .summary { padding: 10px; gap: 7px; }
.kiosk-mode .card { font-size: 10px; padding: 9px 3px; }
.kiosk-mode .card span { font-size: 29px; }

.kiosk-mode .command-panel,
.kiosk-mode .gpsLine,
.kiosk-mode .controls,
.kiosk-mode #apparatusList,
.kiosk-mode .map-controls,
.kiosk-mode .leaflet-control-zoom {
  display: none !important;
}

.kiosk-mode .kiosk-status-board {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
}

.kiosk-board-section {
  border: 1px solid #334155;
  border-radius: 9px;
  background: rgba(15, 23, 42, .88);
  padding: 8px;
}

.kiosk-responding-section { min-height: 72px; }
.kiosk-section-title {
  margin-bottom: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.kiosk-board-list { display: grid; gap: 5px; }
.kiosk-unit-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: center;
  min-height: 31px;
  padding: 5px 8px;
  border-left: 5px solid #64748b;
  border-radius: 6px;
  background: #1e293b;
}
.kiosk-unit-row span { color: #fff; font-size: 14px; font-weight: 950; }
.kiosk-unit-row strong {
  color: #94a3b8;
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kiosk-unit-row.responding { border-left-color: #ef4444; background: rgba(127,29,29,.65); }
.kiosk-unit-row.away { border-left-color: #f59e0b; }
.kiosk-empty-state { padding: 8px; color: #94a3b8; font-size: 14px; font-weight: 800; text-align: center; }

.kiosk-station-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.kiosk-station-card {
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid #334155;
  border-left: 6px solid #16a34a;
  border-radius: 7px;
  background: #1e293b;
}
.kiosk-station-card.empty { border-left-color: #dc2626; background: rgba(127,29,29,.45); }
.kiosk-station-name { color: #fff; font-size: 14px; font-weight: 950; }
.kiosk-station-detail {
  margin-top: 4px;
  color: #94a3b8;
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kiosk-station-card.empty .kiosk-station-detail { color: #fca5a5; }

.kiosk-health-section { margin-top: auto; }
.kiosk-health-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.kiosk-health-grid > div { padding: 6px 3px; border-radius: 6px; background: #1e293b; text-align: center; }
.kiosk-health-grid span { display: block; color: #94a3b8; font-size: 9px; font-weight: 800; }
.kiosk-health-grid strong { display: block; margin-top: 3px; color: #fff; font-size: 19px; }
.kiosk-health-grid strong.good { color: #4ade80; }
.kiosk-health-grid strong.bad { color: #f87171; }
.kiosk-mode .map-legend { right: 16px; bottom: 30px; transform: scale(1.18); transform-origin: bottom right; }
.kiosk-mode .leaflet-container { cursor: none !important; }

@media (max-height: 850px) {
  .kiosk-mode #sidebar { width: 350px; min-width: 350px; }
  .kiosk-mode .brand { padding: 7px 10px; }
  .kiosk-mode .logo { width: 52px; height: 52px; }
  .kiosk-mode .clockPanel { padding: 9px 11px; }
  .kiosk-mode #clock { font-size: 32px; }
  .kiosk-mode .summary { padding: 7px; }
  .kiosk-mode .card span { font-size: 24px; }
  .kiosk-mode .kiosk-status-board { gap: 5px; padding: 0 7px 7px; }
  .kiosk-board-section { padding: 6px; }
  .kiosk-station-card { min-height: 44px; padding: 5px 7px; }
  .kiosk-unit-row { min-height: 27px; padding: 4px 7px; }
}


/* ===== Command display refinement pass ===== */
.kiosk-brand-line { display: none; }
.kiosk-mode .connected { display: none; }
.kiosk-mode .kiosk-brand-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.kiosk-mode .kiosk-brand-line strong {
  color: #22c55e;
  font-size: 10px;
  white-space: nowrap;
}
.kiosk-mode #lastRefresh {
  margin-top: 5px;
  font-size: 10px;
  opacity: .9;
}
.kiosk-station-units {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.kiosk-station-units span {
  display: inline-flex;
  align-items: center;
  min-width: 34px;
  justify-content: center;
  padding: 2px 6px;
  border: 1px solid #475569;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
}
.kiosk-station-empty {
  color: #fca5a5;
  font-size: 10px;
  font-weight: 850;
}
.kiosk-mode .kiosk-empty-state {
  padding: 11px 8px;
  font-size: 13px;
  letter-spacing: .02em;
}
@media (max-height: 850px) {
  .kiosk-mode .title { font-size: 19px; }
  .kiosk-mode .kiosk-brand-line { font-size: 9px; }
}


/* ===== Command Display 1.2 operational refinement ===== */
.kiosk-operation-strip { display: none; }
.kiosk-mode .kiosk-operation-strip {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 72%;
  transform: translateX(-50%);
  padding: 9px 16px;
  border: 2px solid rgba(34,197,94,.8);
  border-radius: 999px;
  background: rgba(6,78,59,.93);
  box-shadow: 0 5px 18px rgba(0,0,0,.35);
  color: #fff;
  white-space: nowrap;
}
.kiosk-mode .kiosk-operation-strip span {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .08em;
}
.kiosk-mode .kiosk-operation-strip strong {
  overflow: hidden;
  color: #dcfce7;
  font-size: 12px;
  text-overflow: ellipsis;
}
.kiosk-mode .kiosk-operation-strip.incident {
  border-color: #fca5a5;
  background: rgba(153,27,27,.95);
  animation: operationPulse 1.4s ease-in-out infinite;
}
.kiosk-mode .kiosk-operation-strip.incident strong { color: #fff; }
@keyframes operationPulse { 50% { box-shadow: 0 0 0 9px rgba(239,68,68,.18), 0 5px 18px rgba(0,0,0,.35); } }

.kiosk-mode #sidebar { width: 350px; min-width: 350px; }
.kiosk-mode .summary .gpsIssueCard { font-size: 9px; }
.kiosk-mode .kiosk-station-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.kiosk-mode .kiosk-station-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  min-height: 34px;
  padding: 4px 7px;
}
.kiosk-mode .kiosk-station-name {
  font-size: 13px;
  letter-spacing: .03em;
}
.kiosk-mode .kiosk-station-detail { margin-top: 0; }
.kiosk-mode .kiosk-station-units { flex-wrap: nowrap; }
.kiosk-mode .kiosk-station-units span {
  min-width: 30px;
  padding: 2px 5px;
  border: 0;
  color: #fff;
}
.kiosk-mode .kiosk-station-units span.fire { background: #b91c1c; }
.kiosk-mode .kiosk-station-units span.medic { background: #1d4ed8; }
.kiosk-mode .kiosk-station-units span.command { background: #6d28d9; }
.kiosk-mode .kiosk-station-units span.prevention { background: #15803d; }
.kiosk-mode .kiosk-station-units span.other { background: #475569; }
.kiosk-mode .kiosk-station-empty { font-size: 9px; letter-spacing: .08em; }
.kiosk-mode .map-legend {
  right: 12px;
  bottom: 24px;
  transform: scale(.70);
  transform-origin: bottom right;
}
.incident-map-marker {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 6px rgba(220,38,38,.28), 0 5px 14px rgba(0,0,0,.45);
  animation: incidentMarkerPulse 1.2s ease-in-out infinite;
}
.incident-map-marker span { color: #fff; font-size: 30px; font-weight: 1000; line-height: 1; }
@keyframes incidentMarkerPulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 12px rgba(220,38,38,.12), 0 5px 14px rgba(0,0,0,.45); } }
@media (max-height: 850px) {
  .kiosk-mode #sidebar { width: 330px; min-width: 330px; }
.kiosk-mode .kiosk-operation-strip { top: 7px; padding: 7px 13px; }
}


/* ===== Version 1.0 final operational corrections ===== */
.dashboard-version {
  padding: 3px 10px 6px;
  color: #64748b;
  font-size: 9px;
  text-align: left;
  white-space: nowrap;
}
.dashboard-version span { color: #94a3b8; font-weight: 800; }
.kiosk-mode .dashboard-version {
  padding: 2px 8px 5px;
  font-size: 8px;
}
.kiosk-mode #kioskConnectionState.connection-online { color: #22c55e; }
.kiosk-mode #kioskConnectionState.connection-delayed { color: #fbbf24; }
.kiosk-mode #kioskConnectionState.connection-lost { color: #f87171; }
.kiosk-mode .kiosk-station-empty {
  color: #fca5a5;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}



/* ===== Version 1.0.3 safe compact kiosk markers ===== */
.kiosk-mode .marker-tag {
  min-width: 62px;
  height: 28px;
  padding: 0 8px;
  gap: 3px;
  border-width: 2px;
  border-radius: 7px;
  font-size: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .34);
}
.kiosk-mode .marker-ladder { min-width: 68px; }
.kiosk-mode .marker-prevention { min-width: 58px; }
.kiosk-mode .marker-svg,
.kiosk-mode .marker-svg svg {
  width: 16px;
  height: 16px;
}
.kiosk-mode .awayMarker {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, .24), 0 3px 8px rgba(0, 0, 0, .34);
}
@media (max-height: 850px) {
  .kiosk-mode .marker-tag {
    min-width: 58px;
    height: 27px;
    padding: 0 7px;
    font-size: 14px;
  }
  .kiosk-mode .marker-ladder { min-width: 64px; }
  .kiosk-mode .marker-prevention { min-width: 55px; }
}


/* ===== Version 2.0 production enhancements ===== */
#clockDate { margin-top: 5px; color: #cbd5e1; font-size: 12px; font-weight: 700; }
#lastRefresh.refresh-warning { color: #fbbf24; }
#lastRefresh.refresh-lost { color: #f87171; }
.incident-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500;
  display: grid; grid-template-columns: 142px 1fr; min-height: 112px;
  border-top: 3px solid #dc2626; background: rgba(2, 6, 23, .98);
  box-shadow: 0 -8px 28px rgba(0,0,0,.48);
}
.incident-banner[hidden] { display: none !important; }
.incident-banner-label { display:flex; flex-direction:column; justify-content:center; padding:14px 18px; border-right:1px solid #334155; background:#7f1d1d; }
.incident-banner-label span { color:#fecaca; font-size:11px; font-weight:900; letter-spacing:.12em; }
.incident-banner-label strong { margin-top:5px; color:#fff; font-size:19px; line-height:1.05; }
.incident-banner-track { display:flex; gap:10px; overflow:hidden; padding:10px; }
.incident-banner-card { min-width:270px; flex:1 1 0; display:grid; grid-template-columns:46px 1fr; align-items:center; gap:10px; padding:10px 12px; border:1px solid #475569; border-radius:10px; background:#111827; }
.incident-banner-icon { display:grid; width:42px; height:42px; place-items:center; border:3px solid #fecaca; border-radius:50%; background:#dc2626; color:#fff; font-size:28px; font-weight:1000; }
.incident-banner-copy { min-width:0; }
.incident-banner-copy strong, .incident-banner-copy span, .incident-banner-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.incident-banner-copy strong { color:#f87171; font-size:16px; }
.incident-banner-copy span { margin-top:4px; color:#fff; font-size:14px; }
.incident-banner-copy small { margin-top:5px; color:#94a3b8; font-size:11px; }
body.has-incident-banner #sidebar, body.has-incident-banner #map { padding-bottom:112px; }
.reconnect-overlay { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; pointer-events:none; background:rgba(2,6,23,.18); }
.reconnect-overlay[hidden] { display:none !important; }
.reconnect-panel { display:flex; flex-direction:column; align-items:center; min-width:320px; padding:22px 28px; border:2px solid #f59e0b; border-radius:14px; background:rgba(15,23,42,.96); box-shadow:0 12px 40px rgba(0,0,0,.55); }
.reconnect-panel strong { margin-top:12px; color:#fbbf24; font-size:22px; letter-spacing:.08em; }
.reconnect-panel span { margin-top:7px; color:#e2e8f0; font-size:13px; }
.reconnect-spinner { width:34px; height:34px; border:4px solid #475569; border-top-color:#f59e0b; border-radius:50%; animation:reconnectSpin 1s linear infinite; }
@keyframes reconnectSpin { to { transform:rotate(360deg); } }
.kiosk-mode .incident-banner { grid-template-columns:130px 1fr; min-height:96px; }
.kiosk-mode .incident-banner-label { padding:10px 14px; }
.kiosk-mode .incident-banner-label strong { font-size:16px; }
.kiosk-mode .incident-banner-card { min-width:245px; padding:8px 10px; }
.kiosk-mode .incident-banner-copy strong { font-size:14px; }
.kiosk-mode .incident-banner-copy span { font-size:12px; }
.kiosk-mode.has-incident-banner #sidebar, .kiosk-mode.has-incident-banner #map { padding-bottom:96px; }
@media (max-width: 1100px) {
  .incident-banner { grid-template-columns:110px 1fr; }
  .incident-banner-track { overflow-x:auto; }
  .incident-banner-card { min-width:250px; }
}


/* ===== Version 2.1.0 visual refinements ===== */
/* Preserve map space while keeping the kiosk status board readable. */
.kiosk-mode #sidebar { width: 320px; min-width: 320px; }
@media (max-height: 850px) {
  .kiosk-mode #sidebar { width: 310px; min-width: 310px; }
}

/* Compact, automatically collapsing recent-incident rail. */
.incident-banner {
  min-height: 72px;
  grid-template-columns: 108px 1fr;
}
.incident-banner-label { padding: 8px 10px; }
.incident-banner-label span { font-size: 9px; }
.incident-banner-label strong { margin-top: 2px; font-size: 14px; line-height: 1; }
.incident-banner-track { gap: 7px; padding: 6px 8px; }
.incident-banner-card {
  min-width: 235px;
  grid-template-columns: 36px 1fr;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 8px;
}
.incident-banner-icon {
  width: 32px;
  height: 32px;
  border-width: 2px;
  font-size: 21px;
  animation: incidentBannerPulse 1.8s ease-in-out infinite;
}
@keyframes incidentBannerPulse {
  0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  82% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(220,38,38,.14); }
}
.incident-banner-copy strong { font-size: 13px; line-height: 1.05; }
.incident-banner-copy span { margin-top: 2px; font-size: 11px; }
.incident-banner-copy small { margin-top: 2px; font-size: 9px; }
body.has-incident-banner #sidebar, body.has-incident-banner #map { padding-bottom: 72px; }
.kiosk-mode .incident-banner { min-height: 72px; grid-template-columns: 108px 1fr; }
.kiosk-mode .incident-banner-label { padding: 8px 10px; }
.kiosk-mode .incident-banner-label strong { font-size: 14px; }
.kiosk-mode .incident-banner-card { min-width: 235px; padding: 6px 9px; }
.kiosk-mode .incident-banner-copy strong { font-size: 13px; }
.kiosk-mode .incident-banner-copy span { font-size: 11px; }
.kiosk-mode.has-incident-banner #sidebar, .kiosk-mode.has-incident-banner #map { padding-bottom: 72px; }

/* Station cards now show the number of units physically present. */
.kiosk-mode .kiosk-station-name { display: flex; align-items: center; gap: 5px; }
.kiosk-mode .kiosk-station-name small {
  display: inline-grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 8px;
  background: #334155;
  color: #cbd5e1;
  font-size: 9px;
  line-height: 1;
}
.kiosk-mode .kiosk-station-card.empty .kiosk-station-name small { background: #7f1d1d; color: #fecaca; }

/* Slightly larger kiosk legend for across-the-room readability. */
.kiosk-mode .map-legend { transform: scale(.82); }


/* ===== Version 2.4.0 location and GPS formatting ===== */
/* Clear, operational update-age treatment. */
#lastRefresh {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 17px;
  font-weight: 800;
}
#lastRefresh > span {
  color: #94a3b8;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#lastRefresh > strong {
  color: #4ade80;
  font-size: 12px;
  font-weight: 950;
}
#lastRefresh.refresh-warning > strong { color: #fbbf24; }
#lastRefresh.refresh-lost > strong { color: #f87171; }
.kiosk-mode #lastRefresh {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}
.kiosk-mode #lastRefresh > span { font-size: 9px; }
.kiosk-mode #lastRefresh > strong { font-size: 12px; }

/* Improve command-status legibility on the standard dashboard. */
.command-item {
  padding: 7px 4px;
  font-size: 7.5px;
  line-height: 1.05;
}
.command-item strong {
  margin-top: 3px;
  font-size: 17px;
}

/* Moving apparatus remain static; only emergency responses animate. */
.movingMarker { animation: none !important; }
.respondingMarker {
  position: relative;
  animation: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.respondingMarker::after {
  content: '';
  position: absolute;
  inset: -6px;
  z-index: -1;
  border: 3px solid rgba(239, 68, 68, .72);
  border-radius: inherit;
  pointer-events: none;
  animation: respondingHalo 2.4s ease-in-out infinite;
}
@keyframes respondingHalo {
  0%, 42% { transform: scale(.94); opacity: 0; }
  50% { transform: scale(1); opacity: .85; }
  86%, 100% { transform: scale(1.28); opacity: 0; }
}

/* More readable status legend on both versions. */
.map-legend { padding: 11px 12px; }
.legend-title { margin-bottom: 9px; font-size: 11px; }
.legend-row { gap: 8px; margin-top: 7px; font-size: 11px; }
.legend-dot { width: 11px; height: 11px; }

/* Elapsed time is the primary incident-age cue. */
.incident-banner-copy small b { color: #e2e8f0; font-weight: 950; }

/* Kiosk is display-only and prioritizes map area. */
.kiosk-mode #sidebar { width: 300px; min-width: 300px; }
@media (max-height: 850px) {
  .kiosk-mode #sidebar { width: 292px; min-width: 292px; }
}
.kiosk-mode .controls,
.kiosk-mode .map-controls,
.kiosk-mode .leaflet-control-zoom { display: none !important; }
.kiosk-mode .kiosk-operation-strip[hidden] { display: none !important; }

/* Another 10–15% marker reduction without reducing label size. */
.kiosk-mode .marker-tag {
  min-width: 55px;
  height: 24px;
  padding: 0 6px;
  gap: 2px;
  border-width: 2px;
  border-radius: 6px;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,.30);
}
.kiosk-mode .marker-ladder { min-width: 60px; }
.kiosk-mode .marker-prevention { min-width: 52px; }
.kiosk-mode .marker-svg,
.kiosk-mode .marker-svg svg { width: 14px; height: 14px; }
.kiosk-mode .awayMarker {
  box-shadow: 0 0 0 1px rgba(245,158,11,.22), 0 2px 6px rgba(0,0,0,.30);
}

/* Keep the kiosk legend readable despite the narrower sidebar. */
.kiosk-mode .map-legend {
  transform: scale(.90);
  transform-origin: bottom right;
}
.kiosk-mode .legend-row { font-size: 11px; }

/* Occupancy counts are explicit and readable. */
.kiosk-mode .kiosk-station-name small {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 10px;
}

/* ===== Version 2.5.0 Fully Kiosk viewport fit ===== */
html,
body,
#app {
  height: 100vh;
  height: 100dvh;
}

#map {
  height: 100vh;
  height: 100dvh;
}

.kiosk-mode #sidebar {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Always keep all five counters on one row in kiosk mode. The global
   narrow-screen rule previously changed this to a 3 + 2 layout and used
   a large amount of the available vertical space. */
.kiosk-mode .summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 4px;
  padding: 6px 7px;
}
.kiosk-mode .card {
  min-width: 0;
  padding: 6px 1px;
  border-radius: 7px;
  font-size: 8px;
  line-height: 1.05;
}
.kiosk-mode .card span {
  margin-top: 2px;
  font-size: 22px;
}
.kiosk-mode .summary .gpsIssueCard { font-size: 7px; }

.kiosk-mode .brand {
  flex: 0 0 auto;
  gap: 8px;
  padding: 7px 9px;
}
.kiosk-mode .logo { width: 48px; height: 48px; }
.kiosk-mode .title { font-size: 17px; }
.kiosk-mode .subtitle { font-size: 10px; }
.kiosk-mode .kiosk-brand-line {
  gap: 5px;
  margin-top: 3px;
  font-size: 8px;
}
.kiosk-mode .kiosk-brand-line strong { font-size: 8px; }

.kiosk-mode .clockPanel {
  flex: 0 0 auto;
  padding: 7px 9px 6px;
}
.kiosk-mode #clock { font-size: 29px; }
.kiosk-mode #clockDate {
  margin-top: 3px;
  font-size: 10px;
}
.kiosk-mode #lastRefresh {
  gap: 1px;
  margin-top: 4px;
  min-height: 0;
}
.kiosk-mode #lastRefresh > span { font-size: 7px; }
.kiosk-mode #lastRefresh > strong { font-size: 10px; }

.kiosk-mode .kiosk-status-board {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  gap: 4px;
  padding: 0 6px 4px;
  overflow: hidden;
}
.kiosk-mode .kiosk-board-section {
  min-height: 0;
  padding: 5px;
  border-radius: 7px;
}
.kiosk-mode .kiosk-responding-section { min-height: 0; }
.kiosk-mode .kiosk-section-title {
  margin-bottom: 3px;
  font-size: 9px;
  line-height: 1;
}
.kiosk-mode .kiosk-board-list { gap: 3px; }
.kiosk-mode .kiosk-empty-state {
  min-height: 20px;
  padding: 4px 5px;
  font-size: 10px;
  line-height: 1.1;
}
.kiosk-mode .kiosk-unit-row {
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 24px;
  gap: 5px;
  padding: 3px 5px;
  border-left-width: 4px;
}
.kiosk-mode .kiosk-unit-row span { font-size: 11px; }
.kiosk-mode .kiosk-unit-row strong { font-size: 8px; }

.kiosk-mode .kiosk-station-grid { gap: 3px; }
.kiosk-mode .kiosk-station-card {
  grid-template-columns: 36px minmax(0, 1fr);
  min-height: 28px;
  padding: 3px 5px;
  border-left-width: 4px;
  border-radius: 6px;
}
.kiosk-mode .kiosk-station-name {
  gap: 3px;
  font-size: 12px;
}
.kiosk-mode .kiosk-station-name small {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  font-size: 8px;
}
.kiosk-mode .kiosk-station-units { gap: 3px; }
.kiosk-mode .kiosk-station-units span {
  min-width: 24px;
  padding: 1px 4px;
  font-size: 8px;
  line-height: 15px;
}
.kiosk-mode .kiosk-station-empty { font-size: 12px; }

.kiosk-mode .kiosk-health-section { margin-top: 0; }
.kiosk-mode .kiosk-health-grid { gap: 3px; }
.kiosk-mode .kiosk-health-grid > div { padding: 3px 1px; }
.kiosk-mode .kiosk-health-grid span { font-size: 7px; }
.kiosk-mode .kiosk-health-grid strong {
  margin-top: 1px;
  font-size: 14px;
}
.kiosk-mode .dashboard-version {
  flex: 0 0 auto;
  padding: 1px 6px 3px;
  font-size: 7px;
}

/* Very short effective viewports are common when Fully Kiosk Browser is
   using Android display scaling. Preserve all station rows first, then
   remove duplicated health information that is already in the top cards. */
@media (max-height: 720px) {
  .kiosk-mode #sidebar { width: 288px; min-width: 288px; }
  .kiosk-mode .brand { padding: 5px 7px; }
  .kiosk-mode .logo { width: 42px; height: 42px; }
  .kiosk-mode .title { font-size: 15px; }
  .kiosk-mode .subtitle { font-size: 9px; }
  .kiosk-mode .clockPanel { padding: 5px 7px; }
  .kiosk-mode #clock { font-size: 25px; }
  .kiosk-mode .summary { padding: 4px 5px; gap: 3px; }
  .kiosk-mode .card { padding: 4px 1px; font-size: 7px; }
  .kiosk-mode .card span { font-size: 19px; }
  .kiosk-mode .kiosk-status-board { gap: 3px; padding: 0 5px 3px; }
  .kiosk-mode .kiosk-board-section { padding: 4px; }
  .kiosk-mode .kiosk-station-card { min-height: 25px; padding: 2px 4px; }
  .kiosk-mode .kiosk-station-units span { line-height: 14px; }
  .kiosk-mode .kiosk-health-section { display: none; }
}

@media (max-height: 600px) {
  .kiosk-mode .logo { width: 38px; height: 38px; }
  .kiosk-mode .title { font-size: 14px; }
  .kiosk-mode .subtitle { display: none; }
  .kiosk-mode .clockPanel { padding: 4px 6px; }
  .kiosk-mode #clock { font-size: 22px; }
  .kiosk-mode #clockDate { font-size: 8px; }
  .kiosk-mode .card span { font-size: 17px; }
  .kiosk-mode .kiosk-section-title { font-size: 8px; }
  .kiosk-mode .kiosk-empty-state { min-height: 17px; padding: 3px; font-size: 9px; }
  .kiosk-mode .kiosk-station-card { min-height: 23px; }
  .kiosk-mode .dashboard-version { display: none; }
}


/* ===== Version 2.9.0 reliability and status refinements ===== */
.marker-tag.staleMarker {
  opacity: .58;
  filter: grayscale(.55);
  border-style: dashed;
}
#reconnectCountdown {
  margin-top: 5px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 850;
}
.connection-restored-toast {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 5100;
  padding: 11px 16px;
  border: 1px solid #4ade80;
  border-radius: 10px;
  background: rgba(20, 83, 45, .96);
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  animation: restoredToastIn .25s ease-out;
}
.connection-restored-toast[hidden] { display: none !important; }
@keyframes restoredToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.kiosk-mode .connection-restored-toast {
  top: 12px;
  right: 12px;
  font-size: 13px;
}


/* ===== Version 2.9.5 narrower kiosk apparatus pills ===== */
.kiosk-mode .kiosk-station-units span {
  min-width: 20px;
  padding-left: 3px;
  padding-right: 3px;
}
@media (max-height: 720px) {
  .kiosk-mode .kiosk-station-units span {
    min-width: 18px;
    padding-left: 2px;
    padding-right: 2px;
  }
}


/* ===== Version 2.9.6 narrower kiosk map apparatus identifiers ===== */
/* Remove forced marker widths while preserving the existing marker height. */
.kiosk-mode .marker-tag {
  min-width: 0;
  width: max-content;
  padding-left: 4px;
  padding-right: 4px;
}
.kiosk-mode .marker-ladder,
.kiosk-mode .marker-prevention {
  min-width: 0;
}
@media (max-height: 850px) {
  .kiosk-mode .marker-tag {
    min-width: 0;
    width: max-content;
    padding-left: 3px;
    padding-right: 3px;
  }
  .kiosk-mode .marker-ladder,
  .kiosk-mode .marker-prevention {
    min-width: 0;
  }
}

/* ===== Version 3.3.0 compact true-location marker separation ===== */

/* ===== Version 3.4.0 kiosk sidebar distance-readability pass ===== */
/* Kiosk-only changes. Standard dashboard dimensions are intentionally unchanged. */
.kiosk-mode #sidebar {
  width: 390px;
  min-width: 390px;
}
.kiosk-mode .summary {
  gap: 6px;
  padding: 7px 8px;
}
.kiosk-mode .card {
  min-height: 48px;
  padding: 6px 2px;
  font-size: 9px;
}
.kiosk-mode .card span {
  margin-top: 2px;
  font-size: 27px;
}
.kiosk-mode .summary .gpsIssueCard { font-size: 9px; }

.kiosk-mode .kiosk-status-board {
  gap: 6px;
  padding: 0 8px 6px;
}
.kiosk-mode .kiosk-board-section {
  padding: 7px;
  border-radius: 8px;
}
.kiosk-mode .kiosk-section-title {
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.1;
}
.kiosk-mode .kiosk-board-list { gap: 5px; }
.kiosk-mode .kiosk-empty-state {
  min-height: 28px;
  padding: 6px 7px;
  font-size: 13px;
}
.kiosk-mode .kiosk-unit-row {
  grid-template-columns: 115px minmax(0, 1fr);
  min-height: 34px;
  gap: 8px;
  padding: 5px 8px;
  border-left-width: 5px;
}
.kiosk-mode .kiosk-unit-row span { font-size: 15px; }
.kiosk-mode .kiosk-unit-row strong { font-size: 11px; }

.kiosk-mode .kiosk-station-grid { gap: 5px; }
.kiosk-mode .kiosk-station-card {
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 38px;
  padding: 5px 7px;
  border-left-width: 5px;
}
.kiosk-mode .kiosk-station-name {
  gap: 4px;
  font-size: 16px;
}
.kiosk-mode .kiosk-station-name small {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 10px;
}
.kiosk-mode .kiosk-station-units { gap: 4px; }
.kiosk-mode .kiosk-station-units span {
  min-width: 27px;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 18px;
}
.kiosk-mode .kiosk-station-empty { font-size: 14px; }

.kiosk-mode .kiosk-health-grid { gap: 5px; }
.kiosk-mode .kiosk-health-grid > div { padding: 6px 2px; }
.kiosk-mode .kiosk-health-grid span { font-size: 9px; }
.kiosk-mode .kiosk-health-grid strong {
  margin-top: 2px;
  font-size: 19px;
}
.kiosk-mode .dashboard-version {
  padding: 2px 8px 4px;
  font-size: 8px;
}

/* Keep the same improved hierarchy on shorter 16:9 displays while trimming
   only enough spacing to prevent the station board from being clipped. */
@media (max-height: 850px) and (min-height: 721px) {
  .kiosk-mode #sidebar { width: 370px; min-width: 370px; }
  .kiosk-mode .summary { padding: 5px 7px; gap: 5px; }
  .kiosk-mode .card { min-height: 43px; padding: 4px 2px; font-size: 8px; }
  .kiosk-mode .card span { font-size: 24px; }
  .kiosk-mode .kiosk-status-board { gap: 5px; padding: 0 7px 5px; }
  .kiosk-mode .kiosk-board-section { padding: 6px; }
  .kiosk-mode .kiosk-section-title { margin-bottom: 4px; font-size: 11px; }
  .kiosk-mode .kiosk-unit-row { min-height: 31px; padding: 4px 7px; }
  .kiosk-mode .kiosk-unit-row span { font-size: 14px; }
  .kiosk-mode .kiosk-unit-row strong { font-size: 10px; }
  .kiosk-mode .kiosk-station-card { min-height: 34px; padding: 4px 6px; }
  .kiosk-mode .kiosk-station-name { font-size: 15px; }
  .kiosk-mode .kiosk-station-units span { font-size: 9px; line-height: 17px; }
  .kiosk-mode .kiosk-health-grid > div { padding: 5px 2px; }
  .kiosk-mode .kiosk-health-grid span { font-size: 8px; }
  .kiosk-mode .kiosk-health-grid strong { font-size: 17px; }
}

/* ===== Version 3.6.0 Silk / TV kiosk viewport compatibility ===== */
/* Keep browser text autosizing from enlarging the ribbon independently. */
html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Silk can report a shorter usable viewport than desktop Chromium. Let the
   kiosk ribbon scroll as a safety net instead of clipping its lower sections. */
.kiosk-mode #sidebar {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kiosk-mode #sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Do not force the board into the remaining flex height; allow the sidebar
   itself to contain every section and scroll only when the TV viewport needs it. */
.kiosk-mode .kiosk-status-board {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

/* Keep the map and ribbon aligned to the same visible top and bottom edges. */
.kiosk-mode #app,
.kiosk-mode #map,
.kiosk-mode .leaflet-container {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

/* Recover a little vertical room on TV browsers without undoing the larger,
   across-the-room typography introduced in 3.4.0. */
@media (max-height: 900px) {
  .kiosk-mode .brand { padding-top: 6px; padding-bottom: 6px; }
  .kiosk-mode .clockPanel { padding-top: 6px; padding-bottom: 5px; }
  .kiosk-mode .summary { padding-top: 5px; padding-bottom: 5px; }
  .kiosk-mode .kiosk-status-board { gap: 4px; padding-bottom: 4px; }
  .kiosk-mode .kiosk-board-section { padding-top: 5px; padding-bottom: 5px; }
  .kiosk-mode .kiosk-station-grid { gap: 4px; }
}


/* ===== Version 3.6.1 Amazon Silk kiosk fit + remote scrolling ===== */
/* Silk commonly applies a larger effective page scale on Fire TV. Compact only
   the kiosk ribbon enough to keep every operational section visible at 1080p. */
.silk-browser.kiosk-mode #sidebar {
  width: 350px;
  min-width: 350px;
  height: 100vh;
  max-height: 100vh;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  outline: none;
  scroll-behavior: smooth;
  touch-action: pan-y;
}

.silk-browser.kiosk-mode .brand {
  padding: 6px 9px;
  gap: 8px;
}
.silk-browser.kiosk-mode .logo { width: 47px; height: 47px; }
.silk-browser.kiosk-mode .title { font-size: 17px; }
.silk-browser.kiosk-mode .subtitle { font-size: 10px; }
.silk-browser.kiosk-mode .kiosk-brand-line { margin-top: 2px; }
.silk-browser.kiosk-mode .kiosk-brand-line span { font-size: 8px; }
.silk-browser.kiosk-mode .kiosk-brand-line strong { font-size: 7px; }

.silk-browser.kiosk-mode .clockPanel { padding: 6px 9px 5px; }
.silk-browser.kiosk-mode #clock { font-size: 30px; }
.silk-browser.kiosk-mode #clockDate { margin-top: 2px; font-size: 9px; }
.silk-browser.kiosk-mode #lastRefresh { margin-top: 3px; }
.silk-browser.kiosk-mode #lastRefresh > span { font-size: 7px; }
.silk-browser.kiosk-mode #lastRefresh > strong { font-size: 9px; }

.silk-browser.kiosk-mode .summary {
  gap: 4px;
  padding: 5px 7px;
}
.silk-browser.kiosk-mode .card {
  min-height: 40px;
  padding: 4px 1px;
  font-size: 8px;
}
.silk-browser.kiosk-mode .card span {
  margin-top: 2px;
  font-size: 22px;
}
.silk-browser.kiosk-mode .summary .gpsIssueCard { font-size: 8px; }

.silk-browser.kiosk-mode .kiosk-status-board {
  display: grid;
  grid-template-rows: auto auto auto auto;
  flex: 0 0 auto;
  gap: 4px;
  padding: 0 7px 5px;
  overflow: visible;
}
.silk-browser.kiosk-mode .kiosk-board-section {
  padding: 5px;
  border-radius: 7px;
}
.silk-browser.kiosk-mode .kiosk-section-title {
  margin-bottom: 3px;
  font-size: 10px;
}
.silk-browser.kiosk-mode .kiosk-board-list,
.silk-browser.kiosk-mode .kiosk-station-grid { gap: 3px; }
.silk-browser.kiosk-mode .kiosk-empty-state {
  min-height: 24px;
  padding: 4px;
  font-size: 11px;
}
.silk-browser.kiosk-mode .kiosk-unit-row {
  min-height: 29px;
  padding: 3px 6px;
}
.silk-browser.kiosk-mode .kiosk-unit-row span { font-size: 13px; }
.silk-browser.kiosk-mode .kiosk-unit-row strong { font-size: 9px; }
.silk-browser.kiosk-mode .kiosk-station-card {
  min-height: 31px;
  padding: 3px 5px;
}
.silk-browser.kiosk-mode .kiosk-station-name { font-size: 14px; }
.silk-browser.kiosk-mode .kiosk-station-name small { font-size: 9px; }
.silk-browser.kiosk-mode .kiosk-station-units { gap: 3px; }
.silk-browser.kiosk-mode .kiosk-station-units span {
  padding: 0 5px;
  font-size: 8px;
  line-height: 16px;
}
.silk-browser.kiosk-mode .kiosk-station-empty { font-size: 12px; }
.silk-browser.kiosk-mode .kiosk-health-grid { gap: 3px; }
.silk-browser.kiosk-mode .kiosk-health-grid > div { padding: 4px 1px; }
.silk-browser.kiosk-mode .kiosk-health-grid span { font-size: 7px; }
.silk-browser.kiosk-mode .kiosk-health-grid strong { font-size: 15px; }
.silk-browser.kiosk-mode .dashboard-version {
  flex: 0 0 auto;
  padding: 2px 7px 5px;
  font-size: 7px;
}

/* Keep the final section reachable above Fire TV overscan even when scrolling. */
.silk-browser.kiosk-mode #sidebar::after {
  content: '';
  display: block;
  flex: 0 0 18px;
  height: 18px;
}


/* ===== Version 3.7.1 kiosk facility-row alignment =====
   Allow each kiosk station/facility name to use only the width it needs.
   This keeps long names such as "Fire Maintenance" on one line while
   preserving maximum apparatus-pill space on short rows such as HQ/41/42. */
.kiosk-mode .kiosk-station-card,
.silk-browser.kiosk-mode .kiosk-station-card {
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 7px;
}
.kiosk-mode .kiosk-station-name,
.silk-browser.kiosk-mode .kiosk-station-name {
  min-width: 0;
  white-space: nowrap;
  flex-wrap: nowrap;
  line-height: 1;
}
.kiosk-mode .kiosk-station-name small,
.silk-browser.kiosk-mode .kiosk-station-name small {
  flex: 0 0 auto;
}
.kiosk-mode .kiosk-station-detail,
.silk-browser.kiosk-mode .kiosk-station-detail {
  min-width: 0;
  overflow: hidden;
}
.kiosk-mode .kiosk-station-units,
.silk-browser.kiosk-mode .kiosk-station-units {
  min-width: 0;
  overflow: hidden;
}


/* ===== Version 3.8.0 command-unit pill identities =====
   These identity colors apply to normal, moving, and away display states.
   Responding, stale, no-GPS, and offline statuses still use their operational
   alert colors so critical conditions remain immediately visible. */
.marker-tag.unit-battalion-40 {
  background: #d4a900;
  color: #000000;
  border-color: #8a6a00;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .25);
}
.marker-tag.unit-chief-gold {
  background: #d4a900;
  color: #ffffff;
  border-color: #ffffff;
}
.marker-tag.unit-black-gold {
  background: #050505;
  color: #d4a900;
  border-color: #d4a900;
  text-shadow: none;
}
.marker-tag.unit-battalion-40 .marker-svg,
.marker-tag.unit-chief-gold .marker-svg,
.marker-tag.unit-black-gold .marker-svg {
  color: currentColor;
}

.kiosk-mode .kiosk-station-units span.unit-battalion-40 {
  background: #d4a900;
  color: #000000;
  border: 1px solid #8a6a00;
}
.kiosk-mode .kiosk-station-units span.unit-chief-gold {
  background: #d4a900;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.8);
}
.kiosk-mode .kiosk-station-units span.unit-black-gold {
  background: #050505;
  color: #d4a900;
  border: 1px solid #d4a900;
}


/* ===== Version 3.9.0 shield command identities =====
   Chief 40/41/42, Battalion 40, Training 40, and Safety 40 share the
   shield-and-cross icon selected for command/support recognition. */
.marker-tag.unit-battalion-40,
.marker-tag.unit-chief-gold {
  background: linear-gradient(180deg, #f2c94c 0%, #d4a900 48%, #b88900 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(74,52,0,.28),
    0 3px 9px rgba(0,0,0,.42);
}
.marker-tag.unit-black-gold {
  background: linear-gradient(180deg, #151515 0%, #050505 62%, #000000 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 3px 9px rgba(0,0,0,.48);
}
.marker-tag.unit-battalion-40 .marker-svg,
.marker-tag.unit-chief-gold .marker-svg,
.marker-tag.unit-black-gold .marker-svg {
  width: 18px;
  height: 18px;
}
.marker-tag.unit-battalion-40 .marker-svg svg,
.marker-tag.unit-chief-gold .marker-svg svg,
.marker-tag.unit-black-gold .marker-svg svg {
  width: 18px;
  height: 18px;
}

/* Add the same shield symbol to compact kiosk station pills. */
.kiosk-mode .kiosk-station-units span.unit-battalion-40,
.kiosk-mode .kiosk-station-units span.unit-chief-gold,
.kiosk-mode .kiosk-station-units span.unit-black-gold {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kiosk-mode .kiosk-station-units span.unit-battalion-40::before,
.kiosk-mode .kiosk-station-units span.unit-chief-gold::before,
.kiosk-mode .kiosk-station-units span.unit-black-gold::before {
  content: "✚";
  width: 11px;
  height: 13px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 45% 45% 55% 55%;
  font-size: 8px;
  line-height: 1;
  font-weight: 1000;
  flex: 0 0 auto;
}
.kiosk-mode .kiosk-station-units span.unit-battalion-40,
.kiosk-mode .kiosk-station-units span.unit-chief-gold {
  background: linear-gradient(180deg, #f2c94c 0%, #d4a900 48%, #b88900 100%);
}
.kiosk-mode .kiosk-station-units span.unit-black-gold {
  background: linear-gradient(180deg, #151515 0%, #050505 62%, #000000 100%);
}


/* ===== Version 4.1.0 purpose-built apparatus icon system =====
   The icon identifies apparatus function while the pill color continues to
   communicate live operational status. */
.marker-engine .marker-svg,
.marker-ladder .marker-svg,
.marker-medic .marker-svg,
.marker-prevention .marker-svg {
  width: 18px;
  height: 18px;
}
.marker-engine .marker-svg svg,
.marker-ladder .marker-svg svg,
.marker-medic .marker-svg svg,
.marker-prevention .marker-svg svg {
  width: 18px;
  height: 18px;
  overflow: visible;
}

/* Compact apparatus symbols in the kiosk station board. */
.kiosk-mode .kiosk-station-units span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.kiosk-mode .kiosk-station-units .kiosk-pill-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}
.kiosk-mode .kiosk-station-units .kiosk-pill-icon svg {
  width: 12px;
  height: 12px;
  display: block;
  overflow: visible;
}

/* The real SVG is now present, so suppress the older CSS-drawn command badge. */
.kiosk-mode .kiosk-station-units span.unit-battalion-40::before,
.kiosk-mode .kiosk-station-units span.unit-chief-gold::before,
.kiosk-mode .kiosk-station-units span.unit-black-gold::before {
  content: none;
  display: none;
}

@media (max-height: 800px) {
  .kiosk-mode .kiosk-station-units .kiosk-pill-icon,
  .kiosk-mode .kiosk-station-units .kiosk-pill-icon svg {
    width: 11px;
    height: 11px;
  }
}


/* v4.1.0 icon contrast helpers */
.marker-tag { --pill-bg: currentColor; }
.marker-tag.marker-responding { --pill-bg: #dc2626; }
.marker-tag.marker-engine { --pill-bg: #d32f2f; }
.marker-tag.marker-medic { --pill-bg: #2563eb; }
.marker-tag.marker-ladder { --pill-bg: #991b1b; }
.marker-tag.marker-prevention { --pill-bg: #15803d; }
.marker-tag.marker-moving { --pill-bg: #2563eb; }
.marker-tag.marker-nogps { --pill-bg: #64748b; }
.marker-tag.marker-stale { --pill-bg: #dc2626; }
.marker-tag.marker-offline { --pill-bg: #6b7280; }

/* ===== Version 4.1.4 Fully Kiosk ribbon fit =====
   Keep the status ribbon near one third of the TV viewport and fit the complete
   operational board without changing the standard dashboard. */
.kiosk-mode #sidebar {
  width: 290px;
  min-width: 290px;
}
.kiosk-mode .brand {
  padding: 4px 7px;
  gap: 6px;
}
.kiosk-mode .logo {
  width: 40px;
  height: 40px;
}
.kiosk-mode .title { font-size: 15px; }
.kiosk-mode .subtitle { font-size: 9px; }
.kiosk-mode .clockPanel { padding: 4px 7px 3px; }
.kiosk-mode #clock { font-size: 27px; }
.kiosk-mode #clockDate { margin-top: 0; }
.kiosk-mode #lastRefresh { margin-top: 1px; }
.kiosk-mode .summary {
  gap: 3px;
  padding: 3px 5px;
}
.kiosk-mode .card {
  min-height: 34px;
  padding: 3px 1px;
  font-size: 7px;
}
.kiosk-mode .card span {
  margin-top: 1px;
  font-size: 19px;
}
.kiosk-mode .kiosk-status-board {
  gap: 3px;
  padding: 0 5px 3px;
}
.kiosk-mode .kiosk-board-section { padding: 4px; }
.kiosk-mode .kiosk-section-title {
  margin-bottom: 2px;
  font-size: 9px;
}
.kiosk-mode .kiosk-empty-state {
  min-height: 17px;
  padding: 1px 3px;
  font-size: 10px;
  line-height: 15px;
}
.kiosk-mode .kiosk-station-grid { gap: 2px; }
.kiosk-mode .kiosk-station-card {
  min-height: 23px;
  padding: 1px 4px;
  column-gap: 5px;
}
.kiosk-mode .kiosk-station-name { font-size: 12px; }
.kiosk-mode .kiosk-station-name small {
  min-width: 15px;
  height: 15px;
  font-size: 8px;
}
.kiosk-mode .kiosk-station-units { gap: 2px; }
.kiosk-mode .kiosk-station-units span {
  min-width: 0;
  padding: 0 3px;
  gap: 2px;
  font-size: 7px;
  line-height: 14px;
}
.kiosk-mode .kiosk-station-units .kiosk-pill-icon,
.kiosk-mode .kiosk-station-units .kiosk-pill-icon svg {
  width: 9px;
  height: 9px;
}
.kiosk-mode .kiosk-health-grid > div { padding: 3px 1px; }
.kiosk-mode .kiosk-health-grid strong { font-size: 13px; }
.kiosk-mode .kiosk-health-section { margin-top: 0; }
.kiosk-mode .kiosk-health-grid span { font-size: 6px; }
.kiosk-mode .dashboard-version { padding-bottom: 2px; }
.kiosk-mode #sidebar::after {
  height: 6px;
  flex-basis: 6px;
}

/* ===== Version 4.1.5 complete away-unit roster =====
   Display every away unit. Three compact columns prevent the roster from
   continuing below the unattended kiosk viewport. */
.kiosk-mode #kioskAwayList {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}
.kiosk-mode #kioskAwayList .kiosk-unit-row.away {
  display: block;
  min-width: 0;
  min-height: 20px;
  padding: 2px 3px;
  border-left-width: 3px;
  text-align: center;
}
.kiosk-mode #kioskAwayList .kiosk-unit-row.away span {
  display: block;
  overflow: hidden;
  font-size: 8px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kiosk-mode #kioskAwayList .kiosk-unit-row.away strong {
  display: none;
}


/* ===== WTFD Operations Center combined kiosk ===== */
.operations-health { display:none; }
body.kiosk-mode #app { display:grid; grid-template-columns: 288px minmax(0, 1fr) 430px; width:100vw; height:100vh; }
body.kiosk-mode #sidebar { width:auto !important; min-width:0 !important; }
body.kiosk-mode #map { min-width:0; width:auto; }
body.kiosk-mode .operations-health {
  display:flex; flex-direction:column; min-width:0; overflow:hidden; color:#e5edf6;
  background:linear-gradient(180deg,#081520 0%,#07111b 100%); border-left:1px solid #26384a;
  font-family:Arial,Helvetica,sans-serif;
}
.operations-health-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 12px; border-bottom:1px solid #26384a; }
.operations-eyebrow { color:#7f94aa; font-size:10px; font-weight:900; letter-spacing:.16em; }
.operations-health-header h2 { margin:3px 0 0; color:#fff; font-size:25px; line-height:1; }
.health-connection { padding:5px 8px; border-radius:999px; background:#374151; color:#d1d5db; font-size:9px; font-weight:900; letter-spacing:.08em; }
.health-connection.online { background:#123d2a; color:#4ade80; }
.health-connection.error { background:#4a1818; color:#fca5a5; }
.health-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:10px 12px; }
.health-metric { padding:9px 5px; border:1px solid #2b3e51; border-radius:8px; background:#0d1c29; text-align:center; }
.health-metric span { display:block; color:#8ea2b7; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.health-metric strong { display:block; margin-top:4px; color:#fff; font-size:23px; }
.health-metric.good strong { color:#4ade80; } .health-metric.warn strong { color:#fbbf24; } .health-metric.bad strong { color:#f87171; }
.health-section { margin:0 12px 9px; padding:9px; border:1px solid #2b3e51; border-radius:9px; background:#0b1824; overflow:hidden; }
.health-alert-section { flex:1 1 auto; min-height:0; }
.health-section-title { display:flex; justify-content:space-between; align-items:center; padding-bottom:7px; border-bottom:1px solid #233648; color:#fff; font-size:13px; font-weight:900; }
.health-section-title strong { min-width:25px; padding:3px 7px; border-radius:999px; background:#25384b; text-align:center; font-size:11px; }
.health-alert-list,.health-stale-list { display:grid; gap:7px; margin-top:8px; }
.health-alert { padding:9px 10px; border-left:4px solid #f59e0b; border-radius:6px; background:#152232; }
.health-alert.critical { border-left-color:#ef4444; background:#2b171b; }
.health-alert-head { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.health-alert-head strong { color:#fff; font-size:16px; }
.health-alert-head span { color:#fbbf24; font-size:9px; font-weight:900; text-transform:uppercase; }
.health-alert.critical .health-alert-head span { color:#f87171; }
.health-alert p { margin:4px 0 0; color:#d7e1eb; font-size:12px; line-height:1.25; }
.health-alert small { display:block; margin-top:4px; color:#8297ac; font-size:9px; }
.health-normal { padding:22px 10px; text-align:center; color:#4ade80; font-size:16px; font-weight:900; }
.health-normal small { display:block; margin-top:5px; color:#8297ac; font-size:10px; font-weight:700; }
.health-stale-item { display:flex; justify-content:space-between; gap:8px; padding:7px 8px; border-radius:6px; background:#142231; }
.health-stale-item strong { color:#fff; font-size:12px; } .health-stale-item span { color:#fbbf24; font-size:10px; font-weight:800; }
.operations-health-footer { display:flex; justify-content:space-between; gap:8px; padding:8px 13px; border-top:1px solid #26384a; color:#71869b; font-size:9px; }
body.kiosk-mode.has-incident-banner #operationsHealth { padding-bottom:72px; }
@media (max-width:1500px) { body.kiosk-mode #app { grid-template-columns:260px minmax(0,1fr) 365px; } .operations-health-header h2{font-size:21px}.health-alert p{font-size:11px} }
@media (max-width:1200px) { body.kiosk-mode #app { grid-template-columns:235px minmax(0,1fr) 320px; } .health-summary{grid-template-columns:repeat(3,1fr);gap:4px;padding:7px}.health-metric strong{font-size:18px}.health-section{margin:0 7px 6px}.operations-health-header{padding:10px} }


/* ===== Operations Center Phase 3 refinement ===== */
.fleet-readiness { margin:10px 12px 0; padding:10px 12px; border:1px solid #334155; border-radius:9px; text-align:center; background:#111827; }
.fleet-readiness span { display:block; color:#94a3b8; font-size:8px; font-weight:900; letter-spacing:.14em; }
.fleet-readiness strong { display:block; margin-top:3px; color:#e5e7eb; font-size:17px; letter-spacing:.04em; }
.fleet-readiness small { display:block; margin-top:3px; color:#9ca3af; font-size:9px; }
.fleet-readiness.ready { border-color:#166534; background:#0b2a1d; }
.fleet-readiness.ready strong { color:#4ade80; }
.fleet-readiness.attention { border-color:#92400e; background:#2b1c0b; }
.fleet-readiness.attention strong { color:#fbbf24; }
.fleet-readiness.critical { border-color:#991b1b; background:#321417; }
.fleet-readiness.critical strong { color:#f87171; }
.health-summary { grid-template-columns:repeat(4,1fr); }
.health-stale-item { align-items:center; }
.health-stale-item span { max-width:72%; text-align:right; }
body.kiosk-mode.active911-focus #app { grid-template-columns:288px minmax(0,1fr) 0 !important; }
body.kiosk-mode.active911-focus .operations-health { opacity:0; pointer-events:none; border-left:0; }
body.kiosk-mode #app, body.kiosk-mode .operations-health { transition:grid-template-columns .25s ease, opacity .2s ease; }
@media (max-width:1500px) { body.kiosk-mode.active911-focus #app { grid-template-columns:260px minmax(0,1fr) 0 !important; } }
@media (max-width:1200px) { body.kiosk-mode.active911-focus #app { grid-template-columns:235px minmax(0,1fr) 0 !important; } .fleet-readiness strong{font-size:14px}.fleet-readiness small{font-size:8px} }

/* Phase 4 operational alert logic */
.health-stale-item.critical { border-left:4px solid #ef4444; background:#321417; }
.health-stale-item.critical span { color:#f87171; }

.health-stale-item span b{display:inline;color:inherit;font-weight:900;}