/* Locations module: tab bar with the main action, expandable sub-facility rows, token-drawn map, details layout.
   Tokens only, logical properties only. The map itself is dir="ltr" so geography never mirrors. */

/* Tab bar: tabs at the start, the one primary action at the end, one shared underline. */
.loc-tabbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; border-block-end: var(--border-width) solid var(--border); }
.loc-tabbar .tabs { flex: 1 1 auto; min-width: 0; border-block-end: 0; }
.loc-tabbar > .btn { margin-block-end: 8px; }
.loc-tabpanel { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Tables */
.loc-name { color: var(--link); font-weight: 600; text-decoration: none; }
.loc-name:hover, .loc-name:focus-visible { text-decoration: underline; }
.loc-coord { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table.wide.loc-table-sm { min-width: 760px; }
.table.wide.loc-table-md { min-width: 560px; }
.loc-table-md td:first-child { min-width: 180px; }
.loc-table-md td:first-child .status { margin-block-start: 4px; }
.loc-expand { height: 32px; }
.loc-expand .icon { transition: transform var(--duration-fast) var(--ease-standard); }
.loc-expand[aria-expanded="true"] .icon { transform: rotate(180deg); }
.table tbody tr.loc-open td, .table.wide tbody tr.loc-open td:last-child { background: color-mix(in oklab, var(--accent) 45%, var(--card)); }

/* Expanded sub-facilities under a facility row (the cell spans the row, so it is not the pinned action cell). */
.table.wide .loc-subrow > td,
.table.wide tbody tr.loc-subrow:hover > td {
  position: static; box-shadow: none; padding: 0;
  background: color-mix(in oklab, var(--accent) 30%, var(--card));
}
.loc-subs { display: grid; gap: 10px; padding: 12px 14px 14px; }
.loc-subs-title { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); font-weight: 600; }
.loc-sublist { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; padding-inline-start: 22px; list-style: none; }
.loc-sublist::before { content: ""; position: absolute; inset-inline-start: 6px; inset-block: 12px; width: 2px; background: var(--border); border-radius: 2px; }
.loc-subitem {
  position: relative; display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(170px, 1.6fr) minmax(170px, 1fr) minmax(70px, .5fr) minmax(96px, .6fr) auto;
  padding: 8px 12px; background: var(--card);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
}
.loc-subitem::before {
  content: ""; position: absolute; inset-inline-start: -21px; inset-block-start: 50%; width: 10px; height: 10px; margin-block-start: -5px;
  border-radius: 999px; background: var(--primary); border: 2px solid var(--card);
}
.loc-subname b { font-weight: 600; }
.loc-subfence { font-variant-numeric: tabular-nums; white-space: nowrap; }
.loc-nosubs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loc-nosubs p { margin: 0; }

/* Map placeholder: tinted surface, grid, a few roads and a park; pin and geofence drawn to scale. */
.loc-map {
  position: relative; overflow: hidden;
  border: var(--border-width) solid var(--border); border-radius: var(--radius-lg);
  background: color-mix(in oklab, var(--accent) 55%, var(--card));
}
.loc-map-surface {
  position: relative; overflow: hidden; aspect-ratio: 5 / 2;
  background-image:
    linear-gradient(color-mix(in oklab, var(--border) 75%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--border) 75%, transparent) 1px, transparent 1px);
  background-size: 10% 25%;
}
.loc-map.is-interactive .loc-map-surface { cursor: crosshair; }
.loc-map-surface:focus-visible { outline: var(--focus-ring-width) solid var(--ring); outline-offset: calc(-1 * var(--focus-ring-width) - 2px); }
.loc-map-deco { position: absolute; inset: 0; pointer-events: none; }
.loc-road { position: absolute; background: var(--card); border: var(--border-width) solid var(--border); }
.loc-road.r1 { inset-inline: -10%; inset-block-start: 60%; block-size: 12px; transform: rotate(-6deg); }
.loc-road.r2 { inset-block: -20%; inset-inline-start: 33%; inline-size: 10px; transform: rotate(14deg); }
.loc-road.r3 { inset-inline: -10%; inset-block-start: 20%; block-size: 7px; transform: rotate(8deg); }
.loc-park {
  position: absolute; inset-inline-start: 70%; inset-block-start: 6%; inline-size: 20%; block-size: 32%;
  border-radius: 45% 55% 50% 40%; background: color-mix(in oklab, var(--success) 18%, var(--card));
}
.loc-fence {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 999px; border: 2px solid var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent);
}
.loc-fence.loc-fence-other { border: 2px dashed var(--chart-3); background: color-mix(in oklab, var(--chart-3) 10%, transparent); }
.loc-pin { position: absolute; transform: translate(-50%, -90%); color: var(--primary); line-height: 0; pointer-events: none; }
.loc-pin .icon { width: 32px; height: 32px; fill: var(--card); }
.loc-dot {
  position: absolute; width: 12px; height: 12px; transform: translate(-50%, -50%); pointer-events: none;
  border-radius: 999px; background: var(--chart-3); border: 2px solid var(--card);
}
.loc-map-zoom { position: absolute; inset-inline-start: 8px; inset-block-end: 8px; display: grid; gap: 4px; }
.loc-map-center { position: absolute; inset-inline-end: 8px; inset-block-end: 8px; }
.loc-map-scale {
  position: absolute; inset-inline-end: 8px; inset-block-start: 8px; inline-size: 20%; padding: 0 4px 1px;
  border: 2px solid var(--foreground); border-block-start: 0;
  background: color-mix(in oklab, var(--card) 80%, transparent); color: var(--foreground);
  font-size: var(--text-body-xs-size); line-height: 1.4; text-align: center; font-variant-numeric: tabular-nums;
}
.loc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; color: var(--muted-foreground); font-size: var(--text-body-sm-size); }
.loc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.loc-legend span::before { content: ""; width: 12px; height: 12px; border-radius: 999px; flex: none; }
.loc-legend .loc-lg-main::before { border: 2px solid var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent); }
.loc-legend .loc-lg-other::before { background: var(--chart-3); }

/* Forms */
.loc-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 6px; }
.loc-fieldset legend { padding: 0; margin-block-end: 6px; }
.loc-radios { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.loc-radio { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-height); font-size: var(--control-font-size); cursor: pointer; }
.loc-unit { position: relative; }
.loc-unit .input { padding-inline-end: 44px; }
.loc-unit > span {
  position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); font-size: var(--control-font-size); pointer-events: none;
}
.loc-parent { padding: 12px 14px; border-radius: var(--radius-lg); background: var(--muted); }

/* Details pages */
.loc-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.loc-stats { margin-block-end: 16px; }
@media (min-width: 721px) { .grid-3.loc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.loc-detail { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.loc-col { display: grid; gap: 16px; min-width: 0; }
.loc-col > .card { min-width: 0; }
@media (max-width: 1100px) { .loc-detail { grid-template-columns: minmax(0, 1fr); } }

/* Phones: 44px touch targets; the primary action takes its own row under the tabs. */
@media (max-width: 720px) {
  .loc-tabbar > .btn { flex: 1 1 100%; margin-block: 0 12px; }
  .loc-actions .btn-icon.btn-sm, .loc-map .btn-icon.btn-sm { width: 44px; height: 44px; }
  /* The pinned action column wraps to rows of three so the name column stays visible. */
  .table .loc-actions { flex-wrap: wrap; width: 164px; margin-inline-start: auto; }
  .loc-subitem .loc-actions { width: auto; }
  .loc-expand { height: 44px; }
  .loc-head-actions { width: 100%; }
  .loc-head-actions .btn { flex: 1 1 auto; }
}

/* The action column takes only the room its buttons need. */
.table th.loc-act { width: 1%; white-space: nowrap; }