:root {
  --ink: #263242;
  --muted: #69778a;
  --line: #d8e2df;
  --surface: #ffffff;
  --soft: #f3f7f6;
  --accent: #18b892;
  --accent-dark: #078263;
  --online: #0e976f;
  --mixed: #d29022;
  --offline: #df3e35;
  --critical: #a81722;
  --unknown: #7d8997;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); background: #07121d; letter-spacing: 0; }
body { background: #07121d; }
button, input, select { font: inherit; letter-spacing: 0; }
a { color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { display: block; color: var(--accent-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }

.map-shell { width: min(1880px, calc(100% - 28px)); margin: 14px auto; }
.map-header {
  min-height: 106px;
  display: grid;
  grid-template-columns: 320px minmax(280px, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 15px 22px;
  background: rgba(255, 255, 255, .98);
  border-top: 3px solid var(--accent);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
}
.brand-link img {
  display: block;
  width: min(310px, 100%);
  max-height: 68px;
  object-fit: contain;
  object-position: left center;
}
.map-heading { padding-left: 24px; border-left: 2px solid var(--accent); }
.map-heading h1 { margin: 4px 0 2px; font-size: 27px; line-height: 1.05; }
.map-heading p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 650; }
.map-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.map-button, .icon-button {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid #cfd8d5;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.map-button:hover, .icon-button:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 7px 18px rgba(24, 184, 146, .15); }
.map-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.live-state { display: inline-flex; align-items: center; gap: 7px; margin-right: 4px; color: var(--muted); font-size: 12px; font-weight: 750; }
.live-state i { width: 9px; height: 9px; border-radius: 50%; background: var(--online); box-shadow: 0 0 0 5px rgba(14, 151, 111, .12); }
.rotation-status {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid rgba(24, 184, 146, .38);
  border-radius: 6px;
  background: #eaf8f4;
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.signin-panel {
  width: min(760px, calc(100% - 30px));
  margin: 12vh auto;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px;
  background: var(--surface);
  border-left: 4px solid var(--accent);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.signin-panel img { width: 80px; max-height: 68px; object-fit: contain; }
.signin-panel h2 { margin: 5px 0 7px; font-size: 25px; }
.signin-panel p { margin: 0; color: var(--muted); line-height: 1.5; }

.map-dashboard { margin-top: 12px; }
.map-dashboard:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 100;
  margin: 0;
  background: #dce7e2;
}
.map-dashboard:not(.hidden) .summary-strip,
.map-dashboard:not(.hidden) .location-panel,
.map-dashboard:not(.hidden) .unmapped-panel { display: none; }
.map-dashboard:not(.hidden) .map-workspace {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  display: block;
}
.map-dashboard:not(.hidden) .map-stage {
  width: 100%;
  height: 100%;
  border: 0;
}
body:has(.map-dashboard:not(.hidden)) .map-header {
  position: fixed;
  z-index: 1000;
  top: 14px;
  left: 14px;
  right: 14px;
  width: auto;
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid rgba(199, 214, 209, .92);
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(7, 30, 37, .2);
  backdrop-filter: blur(12px);
}
body:has(.map-dashboard:not(.hidden)) .brand-link img { max-height: 43px; }
body:has(.map-dashboard:not(.hidden)) .map-heading h1 { font-size: 20px; }
body:has(.map-dashboard:not(.hidden)) .map-heading p { font-size: 11px; }
body:has(.map-dashboard:not(.hidden)) footer,
body:has(.map-dashboard:not(.hidden)) .page-message { display: none; }
.summary-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(118px, 1fr));
  gap: 8px;
  padding: 8px;
  background: rgba(235, 244, 241, .98);
  border-bottom: 1px solid var(--line);
}
.summary-strip article { position: relative; min-height: 72px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 17px 20px; border: 1px solid var(--line); border-top: 3px solid #8e9da4; border-radius: 6px; background: linear-gradient(145deg, #fff, #f5f9f7); box-shadow: 0 4px 12px rgba(12, 38, 45, .08); }
.summary-strip article:last-child { border-right: 1px solid var(--line); }
.summary-strip span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.summary-strip strong { font-size: 29px; line-height: 1; }
.summary-strip .good strong { color: var(--online); }
.summary-strip .danger strong { color: var(--offline); }
.summary-strip .critical strong { color: var(--critical); }
.summary-strip .muted strong { color: var(--unknown); }
.summary-strip .good { border-top-color: var(--online); }
.summary-strip .danger { border-top-color: var(--offline); }
.summary-strip .critical { border-top-color: var(--critical); }
.summary-strip .muted { border-top-color: var(--unknown); }

.map-workspace {
  height: calc(100vh - 222px);
  min-height: 590px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  background: var(--surface);
}
.map-stage { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid var(--line); }
#monitoringMap { width: 100%; height: 100%; background: #dce7e2; }
.map-toolbar {
  position: absolute;
  z-index: 800;
  top: 96px;
  left: 54px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(150px, 190px) minmax(140px, 170px) minmax(130px, 170px) minmax(160px, 190px) minmax(150px, 175px) 90px 42px;
  gap: 7px;
  pointer-events: none;
}
.map-toolbar > * { pointer-events: auto; }
.map-toolbar input, .map-toolbar select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cbd7d3;
  border-radius: 5px;
  background: rgba(255, 255, 255, .97);
  color: var(--ink);
  box-shadow: 0 7px 22px rgba(12, 38, 45, .15);
}
.map-region-rotation {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid #cbd7d3;
  border-radius: 5px;
  background: rgba(255, 255, 255, .97);
  color: var(--ink);
  box-shadow: 0 7px 22px rgba(12, 38, 45, .15);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.map-region-rotation input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.region-rotation-status {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(24, 184, 146, .38);
  border-radius: 5px;
  background: #eaf8f4;
  color: var(--accent-dark);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.icon-button { width: 42px; min-height: 42px; padding: 0; font-size: 22px; }
.map-legend {
  position: absolute;
  z-index: 800;
  left: 12px;
  bottom: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid rgba(207, 218, 214, .9);
  border-radius: 5px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 7px 22px rgba(12, 38, 45, .14);
  font-size: 11px;
  font-weight: 750;
}
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 9px; height: 9px; border-radius: 50%; }
.map-legend .head-office {
  width: 12px;
  height: 12px;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background: #fff;
  transform: rotate(45deg);
}
.map-legend .online { background: var(--online); }
.map-legend .mixed { background: var(--mixed); }
.map-legend .offline { background: var(--offline); }
.map-legend .critical { background: var(--critical); }
.map-legend .unknown { background: var(--unknown); }

.location-panel { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #f7faf9; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px; border-bottom: 1px solid var(--line); background: #fff; }
.panel-heading h2 { margin: 4px 0 0; font-size: 19px; }
.panel-heading > span { color: var(--muted); font-size: 12px; font-weight: 750; }
.location-list { min-height: 0; flex: 1; overflow: auto; }
.location-group { border-bottom: 1px solid var(--line); background: #fff; }
.location-group-heading {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 15px;
  border: 0;
  border-left: 4px solid var(--unknown);
  background: #edf3f1;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.location-group-heading:hover { background: #e4f2ed; }
.location-group-heading.online { border-left-color: var(--online); }
.location-group-heading.mixed { border-left-color: var(--mixed); }
.location-group-heading.offline { border-left-color: var(--offline); }
.location-group-heading.critical { border-left-color: var(--critical); }
.location-group-heading > span { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.location-group-heading strong,
.location-group-heading small { display: block; }
.location-group-heading strong { color: var(--ink); font-size: 13px; }
.location-group-heading small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.location-group-sites .location-row { padding-left: 24px; background: #fff; }
.location-group-sites .location-row:hover { background: #edf6f2; }
.location-row {
  width: 100%;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.location-row:hover { background: #edf6f2; }
.location-row .dot { width: 10px; height: 10px; border-radius: 50%; }
.location-row.online .dot { background: var(--online); }
.location-row.mixed .dot { background: var(--mixed); }
.location-row.offline .dot { background: var(--offline); }
.location-row.critical { animation: critical-location-flash 1.3s ease-in-out infinite; }
.location-row.critical .dot { background: var(--critical); box-shadow: 0 0 0 5px rgba(168, 23, 34, .1); }
.location-row.unknown .dot { background: var(--unknown); }
.location-row strong, .location-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.location-row strong,
.location-popup h3,
.cluster-site strong { display: flex; align-items: center; gap: 7px; }
.location-row.head-office { background: linear-gradient(90deg, rgba(24, 184, 146, .13), #fff 72%); }
.location-row.head-office:hover { background: linear-gradient(90deg, rgba(24, 184, 146, .2), #edf6f2 72%); }
.site-role-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 19px;
  padding: 0 6px;
  border: 1px solid #122737;
  border-radius: 4px;
  background: #122737;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
}
.location-row small { margin-top: 3px; color: var(--muted); }
.location-row .counts { color: var(--muted); font-size: 11px; font-weight: 800; white-space: nowrap; }
.empty-state { padding: 36px 20px; text-align: center; color: var(--muted); }
.empty-state h3 { margin: 0 0 5px; color: var(--ink); }
.empty-state p { margin: 0; }

.unmapped-panel { margin-top: 12px; padding: 20px; background: rgba(255, 255, 255, .98); border-left: 4px solid var(--mixed); }
.unmapped-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.unmapped-heading > div { min-width: 0; }
.unmapped-heading .map-button { flex: 0 0 auto; }
.unmapped-panel h2 { margin: 5px 0 5px; font-size: 20px; }
.unmapped-panel p { margin: 0; color: var(--muted); line-height: 1.45; }
.unmapped-list { margin-top: 15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 8px; }
.unmapped-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); background: var(--soft); }
.unmapped-item.has-suggestion { border-color: rgba(24, 184, 146, .48); background: #eef9f5; }
.unmapped-item strong, .unmapped-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unmapped-item span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.unmapped-item button { min-height: 34px; }

.site-marker-wrap { overflow: visible !important; background: transparent; border: 0; }
.map-issue-symbols { display: inline-flex; align-items: center; gap: 3px; }
.label-issue-symbols { display: inline-flex; position: static; margin-right: 6px; vertical-align: middle; }
.label-issue-symbols .map-issue-symbol { min-width: 20px; height: 18px; padding: 0 4px; border-width: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: 10px; }
.map-issue-symbol,
.legend-issue-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #122737;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .24);
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}
.map-issue-symbol.offline, .legend-issue-symbol.offline { background: #d7263d; border-color: #fff; }
.map-issue-symbol.tunnel, .legend-issue-symbol.tunnel { background: #0866c6; border-color: #fff; }
.map-issue-symbol.temperature, .legend-issue-symbol.temperature { background: #ed8500; border-color: #fff; }
.map-issue-symbol.alert, .legend-issue-symbol.alert { background: #9d1724; border-color: #fff; }
.popup-issue-symbols { margin-right: 5px; vertical-align: middle; }
.legend-issue-symbol { min-width: 20px; height: 16px; border-width: 1px; box-shadow: none; }
.map-marker-unit { position: relative; width: 44px; height: 44px; }
.map-marker-unit.head-office { width: 52px; height: 52px; }
.site-marker {
  position: relative;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 12%;
  transform: rotate(-45deg);
  color: #fff;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}
.site-marker span { transform: rotate(45deg); font-size: 12px; font-weight: 900; }
.site-marker > b {
  position: absolute;
  top: -9px;
  right: -11px;
  min-width: 23px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  transform: rotate(45deg);
  white-space: nowrap;
}
.site-marker.online { background: var(--online); }
.site-marker.mixed { background: var(--mixed); }
.site-marker.offline { background: var(--offline); }
.site-marker.critical {
  background: var(--critical);
  animation: critical-marker-flash 1.05s ease-in-out infinite;
}
.site-marker.unknown { background: var(--unknown); }
.site-marker.head-office {
  width: 48px;
  height: 48px;
  border-width: 4px;
  outline: 3px solid #122737;
  outline-offset: 2px;
}
.head-office-flag {
  position: absolute;
  z-index: 3;
  top: -15px;
  left: -13px;
  min-width: 28px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: #122737;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .28);
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(3px) scale(.9);
  transition: opacity .16s ease, transform .16s ease;
}
.map-marker-unit:hover .head-office-flag,
body.map-show-site-labels .head-office-flag { opacity: 1; transform: none; }
.map-marker-unit.head-office .site-issue-label { left: 37px; }
.site-issue-label {
  position: absolute;
  z-index: -1;
  top: 3px;
  left: 31px;
  width: max-content;
  max-width: 250px;
  overflow: hidden;
  padding: 7px 10px 7px 16px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 0 5px 5px 0;
  background: rgba(26, 38, 48, .94);
  color: #fff;
  box-shadow: 0 7px 20px rgba(0, 0, 0, .24);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-issue-label.mixed { border-left: 4px solid var(--mixed); }
.site-issue-label.offline { border-left: 4px solid var(--offline); }
.site-issue-label.critical { border-left: 4px solid var(--critical); }
.location-popup { min-width: 250px; color: var(--ink); }
.location-popup .popup-group { display: block; margin-bottom: 3px; color: var(--accent-dark); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.location-popup h3 { margin: 0 0 3px; font-size: 16px; }
.location-popup > p { margin: 0 0 9px; color: var(--muted); }
.popup-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 9px; }
.popup-counts span { padding: 7px 5px; border-radius: 4px; background: var(--soft); text-align: center; font-size: 10px; font-weight: 750; }
.popup-counts b { display: block; margin-bottom: 2px; font-size: 17px; }
.popup-devices { max-height: 150px; overflow: auto; border-top: 1px solid var(--line); }
.popup-device { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.popup-device > div { min-width: 0; }
.popup-device b,
.popup-device small,
.popup-device em { display: block; max-width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.popup-device small { margin-top: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.popup-device .popup-tunnel-list { color: var(--ink); font-weight: 800; line-height: 1.45; white-space: normal; overflow: visible; text-overflow: clip; }
.popup-device em { margin-top: 2px; color: var(--critical); font-size: 9px; font-style: normal; font-weight: 750; }
.popup-device span { text-transform: capitalize; }
.cluster-site-list { max-height: 230px; overflow: auto; border-top: 1px solid var(--line); }
.cluster-site { padding: 9px 0; border-bottom: 1px solid var(--line); }
.cluster-site:last-child { border-bottom: 0; }
.cluster-site strong,
.cluster-site small,
.cluster-site span { display: block; }
.cluster-site small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.cluster-site span { margin-top: 4px; color: var(--muted); font-size: 10px; }

@keyframes critical-marker-flash {
  0%, 100% {
    transform: rotate(-45deg) scale(1);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
  }
  50% {
    transform: rotate(-45deg) scale(1.14);
    box-shadow: 0 0 0 10px rgba(223, 62, 53, .26), 0 5px 18px rgba(0, 0, 0, .34);
  }
}

@keyframes critical-location-flash {
  0%, 100% { background: transparent; }
  50% { background: #ffdcd8; }
}

body.disable-critical-flash .critical-marker,
body.disable-critical-flash .critical-location,
body.disable-critical-flash [data-status="critical"] { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .site-marker.critical,
  .location-row.critical { animation: none; }
}

.page-message { min-height: 22px; margin: 8px 0 0; padding: 0 4px; color: #fff; font-size: 12px; font-weight: 700; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 10px 4px 2px; color: #c6d2da; font-size: 11px; }
.leaflet-control-attribution { font-size: 10px; }

@media (max-width: 1050px) {
  .map-header { grid-template-columns: 240px 1fr; }
  .map-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .map-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .map-stage { height: 66vh; min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); }
  .location-panel { max-height: 430px; }
  .summary-strip { grid-template-columns: repeat(3, 1fr); }
  .map-toolbar { grid-template-columns: minmax(200px, 1fr) repeat(3, minmax(130px, 170px)) 42px; }
  .map-toolbar label:nth-child(4),
  .map-toolbar label:nth-child(5),
  .map-toolbar .region-rotation-status { grid-column: span 2; }
}

@media (max-width: 720px) {
  .map-shell { width: 100%; margin: 0; }
  .map-header { grid-template-columns: 1fr; gap: 12px; }
  .brand-link img { width: min(260px, 72vw); }
  .map-heading { padding: 0; border: 0; }
  .map-actions { overflow-x: auto; justify-content: flex-start; }
  .live-state { display: none; }
  .signin-panel { grid-template-columns: 60px 1fr; }
  .signin-panel img { width: 55px; }
  .signin-panel .map-button { grid-column: 1 / -1; }
  .summary-strip { grid-template-columns: repeat(2, 1fr); }
  .summary-strip article { border-bottom: 1px solid var(--line); }
  .summary-strip article:last-child { grid-column: auto; }
  .map-stage { min-height: 480px; }
  .map-toolbar { left: 48px; grid-template-columns: 1fr 42px; }
  .map-toolbar label:nth-child(2),
  .map-toolbar label:nth-child(3),
  .map-toolbar label:nth-child(4),
  .map-toolbar label:nth-child(5),
  .map-toolbar .region-rotation-status { grid-column: 1 / -1; }
  .unmapped-heading { flex-direction: column; }
  .unmapped-list { grid-template-columns: 1fr; }
  footer { flex-direction: column; }
}