/* AY TMS Chassis Locations — page-local enterprise presentation.
   Loaded after adaptive-workspace.css so this page can carry the Anytrek map
   without changing shared shell, dashboard or status styles. */

body:has(.chassis-map-page) {
  background: #f7f9fc;
}

/* The map is the page (Alan, 2026-08-04). Everything from the shell down is a
   flex column that hands its leftover height to the canvas, so the chrome takes
   the height it needs and the map takes the rest — rather than the map getting a
   fixed slab and the page scrolling past it. */
body:has(.chassis-map-page) .app-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

body:has(.chassis-map-page) .page {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

.chassis-map-page {
  --chassis-page: #f7f9fc;
  --chassis-card: #fff;
  --chassis-ink: #0b1538;
  --chassis-secondary: #475467;
  --chassis-muted: #667085;
  --chassis-border: #e5eaf2;
  --chassis-divider: #e8edf4;
  --chassis-blue: #0b6bff;
  --chassis-green: #00b96b;
  --chassis-grey: #98a2b3;
  --chassis-amber: #ff8a00;
  --chassis-red: #f04438;
  --chassis-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  --chassis-radius: clamp(10px, .9vw, 12px);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: clamp(8px, .7vw, 12px);
  min-height: 0;
  padding: clamp(10px, .9vw, 14px) clamp(14px, 1.5vw, 22px) clamp(12px, 1vw, 16px);
  color: var(--chassis-ink);
  font-family: Inter, "SF Pro Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ---------- hero ---------- */

.chassis-map-hero {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
}

/* Title, counts and controls on one line. Every row this bar does not use is a
   row the map gets. */
.chassis-map-hero__lead {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  flex-wrap: wrap;
}

.chassis-map-hero__title {
  margin: 0;
  flex: none;
  font-size: clamp(16px, 1.15vw, 19px);
  font-weight: 700;
  letter-spacing: -.01em;
}

.chassis-map-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* The hero sits over the shell's port photograph, so the timestamp needs a
   carrier of its own or it dissolves into the sky. */
.chassis-map-hero__updated {
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #3d4a63;
  font-size: 12px;
  font-weight: 550;
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  backdrop-filter: saturate(140%) blur(6px);
}

.chassis-map-hero__stale {
  padding: 3px 9px;
  border: 1px solid #ffe0b3;
  border-radius: 999px;
  background: #fff6e8;
  color: #b25d00;
  font-size: 11px;
  font-weight: 600;
}

.chassis-refresh,
.chassis-retry {
  padding: 7px 15px;
  border: 1px solid var(--chassis-border);
  border-radius: 999px;
  background: var(--chassis-card);
  box-shadow: var(--chassis-shadow);
  color: var(--chassis-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.chassis-refresh:hover:not(:disabled),
.chassis-retry:hover:not(:disabled) {
  border-color: #c9d6ea;
  background: #f4f8ff;
}

.chassis-refresh:disabled {
  opacity: .6;
  cursor: default;
}

.chassis-map-kpis {
  display: flex;
  gap: clamp(6px, .6vw, 10px);
  flex-wrap: wrap;
}

.chassis-kpi {
  --chassis-accent: var(--chassis-blue);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--chassis-border);
  border-left: 3px solid var(--chassis-accent);
  border-radius: 999px;
  background: var(--chassis-card);
  box-shadow: var(--chassis-shadow);
  transition: border-color 160ms ease;
}

.chassis-kpi--total { --chassis-accent: var(--chassis-ink); }
.chassis-kpi--moving { --chassis-accent: var(--chassis-blue); }
.chassis-kpi--idle { --chassis-accent: var(--chassis-green); }
.chassis-kpi--offline { --chassis-accent: var(--chassis-grey); }
.chassis-kpi--unmapped { --chassis-accent: var(--chassis-amber); }

.chassis-kpi__value {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
}

.chassis-kpi__label {
  color: var(--chassis-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.chassis-map-banner {
  margin: 0;
  padding: 9px 14px;
  border: 1px solid #ffe0b3;
  border-radius: var(--chassis-radius);
  background: #fff6e8;
  color: #7a4400;
  font-size: 12.5px;
}

.chassis-map-banner--error {
  display: flex;
  align-items: center;
  gap: 12px;
  border-color: #fecdca;
  background: #fef3f2;
  color: #912018;
}

/* ---------- body ---------- */

.chassis-map-body {
  display: grid;
  flex: 1;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: clamp(8px, .7vw, 12px);
  min-height: 0;
  align-items: stretch;
}

.chassis-map-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: clamp(10px, .9vw, 14px);
  border: 1px solid var(--chassis-border);
  border-radius: var(--chassis-radius);
  background: var(--chassis-card);
  box-shadow: var(--chassis-shadow);
}

.chassis-rail-head { position: relative; }

.chassis-filter { position: relative; }

.chassis-filter__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--chassis-border);
  border-radius: 9px;
  background: var(--chassis-card);
  box-shadow: var(--chassis-shadow);
  font-size: 12.5px;
  cursor: pointer;
  list-style: none;
}

.chassis-filter__toggle::-webkit-details-marker { display: none; }

.chassis-filter__toggle::after {
  content: "▾";
  color: var(--chassis-muted);
  font-size: 11px;
}

.chassis-filter__label { color: var(--chassis-muted); font-weight: 600; }

.chassis-filter__value {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: 650;
}

.chassis-filter__name {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Same five accents the KPI pills use, keyed off the same five names. */
.chassis-filter__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chassis-accent, var(--chassis-ink));
}

[data-tone="all"] { --chassis-accent: var(--chassis-ink); }
[data-tone="moving"] { --chassis-accent: var(--chassis-blue); }
[data-tone="idle"] { --chassis-accent: var(--chassis-green); }
[data-tone="offline"] { --chassis-accent: var(--chassis-grey); }
[data-tone="unmapped"] { --chassis-accent: var(--chassis-amber); }

.chassis-filter[data-active="true"] .chassis-filter__toggle {
  border-color: var(--chassis-accent);
  box-shadow: inset 3px 0 0 var(--chassis-accent), var(--chassis-shadow);
}

.chassis-filter__option.is-active { box-shadow: inset 2px 0 0 var(--chassis-accent); }

.chassis-filter__menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--chassis-border);
  border-radius: 10px;
  background: var(--chassis-card);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .16);
}

.chassis-filter__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}

.chassis-filter__option:hover { background: #f4f7fc; }
.chassis-filter__option.is-active { background: #f0f4fa; font-weight: 650; }
.chassis-filter__count { color: var(--chassis-muted); font-size: 11.5px; }

.chassis-search input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--chassis-border);
  border-radius: 9px;
  background: #f8fafc;
  color: var(--chassis-ink);
  font: inherit;
  font-size: 13px;
}

.chassis-search input:focus-visible {
  outline: 2px solid rgba(11, 107, 255, .35);
  outline-offset: 1px;
  background: #fff;
}

.chassis-rail-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.chassis-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin: 0;
  padding: 0 2px 2px 0;
  overflow-y: auto;
  list-style: none;
}

.chassis-row {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: #f8fafc;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.chassis-row:hover { background: #f1f6ff; }

.chassis-row.is-selected {
  border-color: rgba(11, 107, 255, .45);
  background: #eaf2ff;
}

.chassis-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chassis-row__name {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chassis-row__meta {
  color: var(--chassis-secondary);
  font-size: 12px;
}

.chassis-row__location {
  overflow: hidden;
  color: var(--chassis-muted);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chassis-row__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  color: var(--chassis-muted);
  font-size: 11px;
}

.chassis-row__flag {
  padding: 1px 7px;
  border-radius: 999px;
  background: #fff2df;
  color: #b25d00;
  font-weight: 600;
}

.chassis-row__battery { font-weight: 600; }
.chassis-row__battery[data-low="true"] { color: var(--chassis-red); }
.chassis-row__time { margin-left: auto; }

.chassis-chip {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.chassis-chip--moving { background: #eaf2ff; color: #0b4fbf; }
.chassis-chip--idle { background: #e6f8f0; color: #027a48; }
.chassis-chip--offline { background: #eef1f6; color: #475467; }

.chassis-empty {
  padding: 26px 14px;
  color: var(--chassis-muted);
  font-size: 13px;
  text-align: center;
}

.chassis-empty p { margin: 0; }
.chassis-empty__hint { margin-top: 6px !important; font-size: 12px; }

/* ---------- stage ---------- */

.chassis-map-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, .7vw, 12px);
  min-width: 0;
  min-height: 0;
}

.chassis-map-canvas {
  position: relative;
  flex: 1;
  min-height: 240px;
  border: 1px solid var(--chassis-border);
  border-radius: var(--chassis-radius);
  background: #eef2f7;
  box-shadow: var(--chassis-shadow);
  overflow: hidden;
}

.chassis-map-canvas[data-map-unavailable="true"] {
  display: grid;
  place-items: center;
  min-height: 120px;
  background:
    repeating-linear-gradient(45deg, #eef2f7 0 12px, #e9eef5 12px 24px);
}

.chassis-map-canvas[hidden] { display: none; }

.chassis-map-status {
  flex: none;
  margin: 0;
  color: var(--chassis-muted);
  font-size: 12.5px;
}

/* Empty means the map loaded. An empty paragraph must not still cost a row. */
.chassis-map-status[hidden] { display: none; }

.chassis-map-status[data-state="error"] { color: #b42318; }

/* With no map above it, the status line is carrying the whole explanation. */
.chassis-map-canvas[hidden] + .chassis-map-status {
  display: grid;
  place-items: center;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--chassis-border);
  border-radius: var(--chassis-radius);
  background: var(--chassis-card);
  box-shadow: var(--chassis-shadow);
  font-size: 13px;
  text-align: center;
}

/* The record rides on the pin (an InfoWindow, so Google draws the tail and keeps
   it anchored through pan and zoom). This block is the fallback the page falls
   back to when there is no map to anchor to — same card, parked top-right,
   clear of Google's attribution bottom-left and its zoom controls
   bottom-right, both of which have to stay visible. */
.chassis-detail {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, 42%);
  max-height: calc(100% - 88px);
  padding: 14px;
  border: 1px solid var(--chassis-border);
  border-radius: var(--chassis-radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Inside an InfoWindow the bubble already is the card: Google supplies the
   frame, the shadow and the tail, so this drops the second frame. */
/* Given a real width rather than left to shrink-wrap. Without it Google sizes
   the bubble to its narrowest content and every field lands on its own line, so
   the card grows downwards into a column and needs a scrollbar to show four
   values. Wide enough for two fields abreast is the whole point. */
.chassis-detail--anchored {
  position: static;
  width: 372px;
  max-width: 100%;
  max-height: min(440px, 58vh);
  padding: 2px 4px 2px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.chassis-detail--anchored .chassis-detail__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gm-style .gm-style-iw-c { padding: 12px; border-radius: 12px; }
/* Opening "More details" grows the card; the bubble has to be able to scroll or
   the extra rows are simply cut off. */
.gm-style .gm-style-iw-d { overflow: auto !important; }

.chassis-detail[hidden] { display: none; }

.chassis-detail__prompt {
  margin: 0;
  color: var(--chassis-muted);
  font-size: 13px;
}

.chassis-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--chassis-divider);
}

.chassis-detail__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.chassis-detail__title {
  margin: 0;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chassis-detail__facts {
  display: grid;
  gap: 11px 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 0;
}

.chassis-detail__facts .chassis-field:first-child { grid-column: 1 / -1; }

.chassis-detail__more > summary {
  color: var(--chassis-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.chassis-detail__more > summary::-webkit-details-marker { display: none; }
.chassis-detail__more > summary::before { content: "▸ "; }
.chassis-detail__more[open] > summary::before { content: "▾ "; }

.chassis-detail__more[open] > summary { margin-bottom: 10px; }

.chassis-detail__more .chassis-detail__group + .chassis-detail__group { margin-top: 12px; }

/* Google draws marker labels as plain text over imagery, where dark ink on a
   dark satellite tile is unreadable. The halo is what makes a name legible over
   both a parking lot and a tree line. */
.chassis-marker-label {
  text-shadow:
    0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 1px 2px rgba(255, 255, 255, .9);
}

.chassis-marker-label.is-selected {
  font-size: 12px !important;
}

.chassis-detail__flag {
  margin: 0;
  padding: 7px 12px;
  border-radius: 9px;
  background: #fff6e8;
  color: #7a4400;
  font-size: 12px;
}

.chassis-detail__group h3 {
  margin: 0 0 8px;
  color: var(--chassis-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.chassis-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px 14px;
  margin: 0;
}

.chassis-field dt {
  color: var(--chassis-muted);
  font-size: 12px;
  font-weight: 600;
}

.chassis-field dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 550;
  overflow-wrap: anywhere;
}

/* Label smaller than value, value at reading size — the same proportion the rest
   of the console uses. The card carries its weight by being wide, not by being
   set in large type. */
.chassis-detail--anchored .chassis-detail__facts .chassis-field dt { font-size: 11.5px; }
.chassis-detail--anchored .chassis-detail__facts .chassis-field dd { font-size: 14px; font-weight: 600; }
.chassis-detail--anchored .chassis-detail__more > summary { font-size: 12.5px; }
.chassis-detail--anchored .chassis-chip { font-size: 11px; padding: 3px 9px; }

/* Below this the stage is too short to float a panel over: the record would
   cover the map it describes. It goes back to being a block under the map, and
   the page scrolls again. */
@media (max-width: 1080px) {
  body:has(.chassis-map-page) .app-main { height: auto; min-height: 100dvh; overflow: visible; }
  .chassis-map-body { grid-template-columns: minmax(0, 1fr); }
  .chassis-map-rail { max-height: 380px; }
  .chassis-map-canvas { min-height: clamp(320px, 48vh, 520px); }
  .chassis-detail {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: var(--chassis-shadow);
    background: var(--chassis-card);
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .chassis-map-page { padding: 12px 14px 18px; }
  .chassis-map-hero__lead { align-items: flex-start; }
}