/* ArcGIS view UI positioning for iop-ui.
   The app sidebar overlays the viewport's left rail (--app-sidebar-rail,
   always 56px — the rail is permanently on screen). Map containers span
   underneath — shift the Esri UI corners clear of it.

   The navigation widgets are moved to bottom-left (utils/map/esriViewUi.ts):
   top-left is where the voice-assistant orb and its halo sit on Call Taker and
   Incident Ops, so the widgets rendered behind the halo and could not be
   clicked. See the ribbon block below for how they sit against the toolbar. */
.esri-ui-top-left {
  margin-left: calc(4px + var(--app-sidebar-rail, 56px));
  margin-top: 48px;
}

/* ── The navigation ribbon ───────────────────────────────────────────
   The Esri widgets and the map toolbar are one control cluster, not two things
   that happen to be near each other.

   MapToolbar is a horizontal strip of chips: 27px tall (py-[6px] + a 15px line
   box), at `bottom-5` (20px), `left-20` (80px), with `gap-1.5` (6px) between
   chips. The Esri widgets become a second strip of the same height on the same
   left edge, one gap above — so they read as another row of the same toolbar
   rather than a separate control. Left edges flush is the whole trick; they
   were 20px out before, which is most of why the group looked bolted on.

   These numbers mirror MapToolbar.tsx; change them together.

   `applyEsriUi` also zeros `view.ui.padding` (Esri defaults left/top/right to
   15px and bottom to 30px on `.esri-ui-inner-container`). Without that, this
   `left` is measured from a 15px-inset box and the strip sits right of Legend. */
:root {
  --map-chip-size: 27px;
  --map-chip-gap: 6px;
  --map-toolbar-left: 80px;
  --map-toolbar-bottom: 20px;
  --map-chip-surface: rgba(0, 0, 0, 0.55);
  --map-chip-idle: rgba(255, 255, 255, 0.45);
  --map-chip-hover: rgba(255, 255, 255, 0.65);
}

/* Positioned with `left`/`bottom`, not margins: margins here have to survive
   Esri's own `.esri-ui-bottom-left .esri-component{margin-right:10px}` and
   friends, and offsets on an absolutely positioned box are unambiguous. */
.esri-ui-corner.esri-ui-bottom-left {
  /* Flush with the toolbar's left edge, one gap above the chips. */
  left: var(--map-toolbar-left);
  bottom: calc(var(--map-toolbar-bottom) + var(--map-chip-size) + var(--map-chip-gap));
  margin: 0;
  padding: 0;
}

/* Facade popups/markers live in an overlay div above the view surface. */
.arcgis-facade-overlays {
  font-family: 'Poppins', sans-serif;
}

/* Left to itself this corner is three mismatched shapes in a row: a CIRCULAR
   compass (`border-radius:50%`), a navigation toggle, and a VERTICAL two-high
   zoom column (`.esri-zoom{flex-flow:column}`) — each its own rounded, shadowed
   card. That mismatch is what made the controls read as bolted on.

   Flatten all of it into a single horizontal strip of identical squares, so the
   group becomes a second row of the map toolbar directly above the chips. */
/* Every selector below carries `.esri-ui-corner` as well, on purpose. Esri's
   own rules for this corner are two classes (`.esri-ui-bottom-left
   .esri-component{margin-right:10px}`, and `.esri-ui-bottom-left` itself for
   `flex-direction:row-reverse`). At equal specificity the winner is whichever
   stylesheet loads last — and Vite does not guarantee CSS order across modules,
   so that is a coin flip that shows up as the group drifting out of alignment.
   One extra class settles it permanently. */
.esri-ui-corner.esri-ui-bottom-left,
.esri-ui-corner.esri-ui-bottom-left .esri-component,
.esri-ui-corner.esri-ui-bottom-left .esri-zoom,
.esri-ui-corner.esri-ui-bottom-left .esri-navigation-toggle {
  flex-direction: row;
  align-items: flex-end;
}

.esri-ui-corner.esri-ui-bottom-left .esri-component {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  /* No inline descender space under the buttons, which would make the strip
     taller than a chip and break the shared baseline. */
  line-height: 0;
}

/* Hairlines between adjacent squares, so the strip reads as one segmented
   control rather than a row of separate cards. */
.esri-ui-corner.esri-ui-bottom-left .esri-component + .esri-component,
.esri-ui-corner.esri-ui-bottom-left .esri-widget--button + .esri-widget--button {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* The chip surface, matched to MapToolbarChip: flat, squared, near-black, and
   exactly the chip height so the strip and the chips share one baseline grid. */
.esri-ui-corner.esri-ui-bottom-left .esri-widget--button {
  width: var(--map-chip-size);
  height: var(--map-chip-size);
  min-width: var(--map-chip-size);
  min-height: var(--map-chip-size);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--map-chip-surface);
  color: var(--map-chip-idle);
  font-size: 13px;
  transition: color 200ms, background-color 200ms;
}

.esri-ui-corner.esri-ui-bottom-left .esri-widget--button:hover {
  background-color: var(--map-chip-surface);
  color: var(--map-chip-hover);
}

/* Keyboard focus is the app's cyan, not Esri's default outline. */
.esri-ui-corner.esri-ui-bottom-left .esri-widget--button:focus-visible {
  outline: none;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 174, 238, 0.55);
}

/* Engaged — the navigation toggle while in rotate mode. Cyan is reserved for
   "this control is doing something", same as an active toolbar chip. */
.esri-ui-corner.esri-ui-bottom-left .esri-navigation-toggle__button--active,
.esri-ui-corner.esri-ui-bottom-left .esri-navigation-toggle__button--active:hover {
  background-color: rgba(0, 174, 238, 0.18);
  color: #7edfff;
}

/* The compass ships as a circle and its needle is coloured for a light card. */
.esri-ui-corner.esri-ui-bottom-left .esri-compass {
  border-radius: 0;
}

.esri-ui-corner.esri-ui-bottom-left .esri-compass__icon {
  color: currentColor;
}