/* settings-dialog.css — Modal für globale Einheiten-Einstellungen.
   <dialog>-Element (browser-native), kein eigenes Overlay-Z-Index-Spiel nötig. */

dialog.settings-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: var(--radius-lg, 12px);
  background: var(--surface, #1c1f25);
  color: var(--text, #fff);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
  width: min(420px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 64px));
  overflow: hidden;
  z-index: 50;
}
dialog.settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}

.settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.settings-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.settings-close {
  background: none;
  border: 0;
  color: var(--text-muted, rgba(255,255,255,0.55));
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color 0.15s;
}
.settings-close:hover { color: var(--text); }

.settings-body {
  padding: 14px 18px 16px;
  max-height: min(510px, calc(100vh - 174px));
  overflow-y: auto;
}

.settings-row {
  margin-bottom: 14px;
}
.settings-row:last-child { margin-bottom: 0; }

.settings-row-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  /* --text-muted ist NICHT als Token definiert → wäre weiß im Light-Mode.
     --menu-label ist theme-aware (Light: dunkelblau, Dark: hell). */
  color: var(--menu-label, rgba(11,79,114,0.55));
  margin-bottom: 6px;
}

/* Segmented-Control-Style: Pills nebeneinander, eine "selected" */
.settings-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* theme-aware Track: Light = helles Grau, Dark = leicht aufgehelltes Panel.
     (--surface-secondary ist kein Token → war im Light weiß/unsichtbar.) */
  background: var(--menu-input-bg, rgba(11,79,114,0.04));
  border: 1px solid var(--menu-input-border, rgba(11,79,114,0.14));
  border-radius: var(--radius-pill, 14px);
  padding: 3px;
}
.settings-option {
  flex: 1 1 auto;
  min-width: 60px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-pill, 14px);
  background: transparent;
  color: var(--text);
  border: 0;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  white-space: nowrap;
}
.settings-option:hover { background: var(--menu-hover); }
.settings-option.is-selected {
  background: var(--accent);
  color: var(--accent-ink, #fff);
  font-weight: 600;
}

/* Trenner mit kleinem Untertitel (z.B. "Karten-Beschriftung") */
.settings-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  /* theme-aware (--text-muted ist NICHT als Token definiert → wäre weiß im Light) */
  color: var(--menu-label, rgba(11,79,114,0.55));
}
.settings-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--menu-input-border, rgba(11,79,114,0.14));
}

/* Stepper (A− / Wert / A+) für die Marker-Schriftgröße */
.settings-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--menu-input-bg, rgba(11,79,114,0.04));
  border: 1px solid var(--menu-input-border, rgba(11,79,114,0.14));
  border-radius: var(--radius-pill, 14px);
  padding: 3px;
}
.settings-step {
  flex: 0 0 auto;
  min-width: 40px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-pill, 14px);
  background: transparent;
  color: var(--text);
  border: 0;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.settings-step:hover { background: var(--menu-hover); }
.settings-step:disabled { opacity: 0.4; cursor: default; background: transparent; }
.settings-step-value {
  flex: 1 1 auto;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.settings-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  background: var(--surface-secondary, rgba(0,0,0,0.10));
}
.settings-reset {
  background: none;
  border: 0;
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.55));
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-pill, 14px);
  transition: color 0.15s, background 0.15s;
}
.settings-reset:hover { color: var(--text); background: var(--menu-hover); }
.settings-done {
  font-size: 12px;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-ink, #fff);
  border: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill, 14px);
  cursor: pointer;
}
.settings-done:hover { filter: brightness(1.08); }

/* Map-Button: Settings-Icon (Zahnrad) im Right-Stack */
.map-btn[data-map-action="settings"] svg {
  width: 18px;
  height: 18px;
}

/* Hamburger-Variante: kompakter (schmaleres Popover) — gleiche Klassen,
   aber innerhalb von .menu-group--settings etwas kleiner skaliert. */
.menu-group--settings .settings-row { margin-bottom: 10px; }
.menu-group--settings .settings-row-label {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--menu-label);       /* gleiche Farbe wie .menu-label (NAVIGATION etc.) */
}
.menu-group--settings .settings-option { font-size: 11px; padding: 5px 8px; min-width: 0; }
/* Sichtbarer Segmented-Track wie bei Sprache/Theme (die --surface-secondary-
   Variante ist im hellen Menü unsichtbar). Grauer Rahmen + Hintergrund. */
.menu-group--settings .settings-options {
  gap: 3px; padding: 3px;
  background: var(--menu-input-bg);
  border: 1px solid var(--menu-input-border);
  border-radius: 11px;
}
.menu-group--settings .settings-option { border-radius: 8px; }
.menu-group--settings .settings-option:hover { color: var(--accent); background: transparent; }
.menu-group--settings .settings-option.is-selected {
  background: linear-gradient(180deg, var(--brand-sun), var(--brand-sun-2));
  border-color: var(--accent-soft-border);
  color: var(--accent-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

/* Im aufklappbaren „Ajustes": Einheiten-Zeilen kompakt in EINE Reihe —
   Bezeichnung links, Segment-Umschalter rechtsbündig. Spart Höhe, wirkt
   weniger wuchtig; bei Platzmangel bricht das Segment sauber in die nächste
   Zeile um (flex-wrap). Betrifft NUR den Hamburger, nicht den Karten-Dialog. */
.menu-ajustes-body .menu-group--settings .settings-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.menu-ajustes-body .menu-group--settings .settings-row-label {
  margin-bottom: 0; flex: 1 1 auto; min-width: 64px;
  text-transform: none; letter-spacing: .2px;
}
.menu-ajustes-body .menu-group--settings .settings-options,
.menu-ajustes-body .menu-group--settings .settings-stepper {
  flex: 0 0 auto; margin-left: auto;
}