/**
 * @file map-measurements.css
 * @purpose Dark striped measurement table, readable values, toolbar close and edit feedback.
 * @dependencies styles.css base layout and map-measurements.js state classes.
 * @publicApi #measure-toggle, .measurement-* panels, and edit cursor state classes.
 * @sideEffects Styles measurement-only surfaces without altering map layout.
 */

/* Toolbar state — measurement glows in the shared blue; sun keeps its yellow state. */
#measure-toggle {
  border-color: rgba(175, 177, 196, 0.22);
  background: #25252d;
  box-shadow: 0 4px 12px rgba(16, 16, 22, 0.22);
  color: #c5c5d0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 130ms ease, color 130ms ease, border-color 130ms ease,
    box-shadow 130ms ease, transform 130ms ease;
}

#measure-toggle:hover:not(:disabled),
#measure-toggle:focus-visible {
  border-color: #77738c;
  background: #303039;
  color: #f2f1f5;
}

#measure-toggle:focus-visible {
  outline: 2px solid #4285F4;
  outline-offset: 3px;
}

#measure-toggle.is-active,
#measure-toggle.is-active:hover:not(:disabled),
#measure-toggle.is-active:focus-visible {
  border-color: #4285F4;
  background: #4285F4;
  box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.3),
    0 0 18px rgba(66, 133, 244, 0.58), 0 4px 12px rgba(16, 16, 22, 0.24);
  color: #f2f1f5;
}

/* Saved measurements — opaque charcoal surfaces and cool, quiet boundaries. */
.measurement-board,
.measurement-help {
  border-color: rgba(175, 177, 196, 0.2);
  background: #25252d;
  box-shadow: 0 6px 18px rgba(16, 16, 22, 0.22);
  color: #f2f1f5;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.measurement-board-heading small,
.measurement-row-copy small {
  color: #acacbc;
}

.measurement-board-heading output {
  border-color: rgba(175, 177, 196, 0.18);
  background: #2c2c36;
  color: #c5c5d0;
}

.measurement-row {
  border-color: rgba(175, 177, 196, 0.13);
  background: #2b2b35;
}

.measurement-row.is-current {
  border-color: rgba(66, 133, 244, 0.6);
  background: #303039;
}

.measurement-swatch {
  box-shadow: none;
}

.measurement-remove {
  border-color: rgba(175, 177, 196, 0.2);
  background: #30303a;
  color: #c5c5d0;
}

.measurement-remove:hover,
.measurement-remove:focus-visible {
  border-color: #4285F4;
  background: #303039;
  color: #f2f1f5;
}

/* Geometry-edit feedback — keep the existing anchoring and pointer behavior. */
.measurement-edit-hint {
  position: absolute;
  z-index: 9;
  width: max-content;
  max-width: min(15rem, calc(100% - 2rem));
  margin: 0;
  padding: 0.36rem 0.55rem;
  border: 1px solid rgba(175, 177, 196, 0.22);
  border-radius: 0.42rem;
  background: #25252d;
  box-shadow: 0 7px 20px rgba(16, 16, 22, 0.24);
  color: #f2f1f5;
  font-size: 0.56rem;
  font-weight: 750;
  line-height: 1.25;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.85rem));
  white-space: nowrap;
}

.measurement-edit-hint[hidden] {
  display: none;
}

body.is-editing-measurement .maplibregl-canvas {
  cursor: grabbing !important;
}

body.is-hovering-measurement:not(.is-editing-measurement) .maplibregl-canvas {
  cursor: grab !important;
}

/* Paired toolbar actions share the existing button silhouette; close stays neutral. */
.measurement-toolbar-group { position: relative; }
#measure-close {
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  background: #303039;
  border-color: #55545f;
  color: #f2f1f5;
  box-shadow: none;
  font-size: 25px;
}
#measure-close[hidden] { display: none; }
#measure-close:hover { background: #40404b; }

/* Reference-inspired table: one quiet header band, alternating rows, brighter data. */
.measurement-board {
  width: min(350px, calc(100% - 80px));
  padding: 0;
  border-radius: 7px;
  grid-template-rows: auto auto minmax(0, 1fr);
}
.measurement-board-heading {
  justify-content: flex-end;
  padding: 7px 10px;
  background: #35353f;
}
.measurement-board-heading output { font-size: 11px; }
.measurement-columns,
.measurement-row {
  display: grid;
  grid-template-columns: 4px minmax(62px, 0.8fr) minmax(0, 1.6fr) 28px;
  gap: 8px;
  align-items: center;
  padding: 10px;
}
.measurement-columns {
  background: #454550;
  color: #e0e0e8;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.measurement-list { display: block; gap: 0; min-height: 0; }
.measurement-row {
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid #3b3b46;
  border-radius: 0;
  background: #292932;
}
.measurement-row:nth-child(even) { background: #32323c; }
.measurement-row.is-current { background: #383844; }
.measurement-row-copy { display: contents; }
.measurement-row-copy strong { font-size: 12px; color: #e9e9f0; }
.measurement-row-copy small {
  font-size: 13px;
  line-height: 1.5;
  color: #f4f4f8;
  font-weight: 600;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.measurement-remove { width: 28px; height: 28px; border-radius: 5px; }