/* atlas-toolbar.css — shared TopNav-Styles für alle Atlas-Karten
 *
 * Drei Schichten in einem Flex-Row:
 *   .atl-tb-brandwrap (L1) · .atl-tb-spacer · selects/btns (L2) · .atl-tb-sep · tools (L3) · .atl-tb-right
 *
 * Mit cfg.overlay=true wandern die Items aus der oberen Toolbar in ein
 * Floating-Panel rechts auf der Map (.atl-tb-overlay) — Brand + Account
 * + Workspace bleiben oben.
 */

/* Map-Overlay: Settings-Controls direkt ueber den Maplibre-Zoom-Buttons
 * (rechts unten). 29x29-Buttons im gleichen hellen Look wie die Maplibre-
 * Controls (weisser bg, dunkle Icons). Alle Buttons vertikal gestackt,
 * Group-Labels + Item-Labels ausgeblendet — nur Icons. Hover-Tooltips erklaeren. */
.atl-tb-overlay {
  position: absolute;
  bottom: 145px;       /* ueber Zoom-Controls + Attribution + Pitch — alle Karten */
  right: 9px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
}
.atl-tb-overlay > .atl-tb-sep { display: none; }
.atl-tb-overlay .atl-tb-group-lbl { display: none; }
.atl-tb-overlay .atl-tb-lbl { display: none; }

/* Group: vertikal gestackt, keine eigene Pille — jedes Icon ist eine eigene Maplibre-artige Pille */
.atl-tb-overlay .atl-tb-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
  box-shadow: none;
}
.atl-tb-overlay .atl-tb-group-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Gruppen-Segmente (Stufe 3b): sichtbarer Abstand zwischen Gruppen statt einer langen Wurst */
.atl-tb-overlay .atl-tb-group { margin-top: 8px; }
.atl-tb-overlay .atl-tb-group:first-child { margin-top: 0; }
/* Einklappbare Gruppe: Items nur bei .open sichtbar; ausgeklappte Items ruecken leicht ein
   und bekommen eine dezente Verbindungslinie zum Kopf-Button */
.atl-tb-overlay .atl-tb-collapsible .atl-tb-group-items { display: none; }
.atl-tb-overlay .atl-tb-collapsible.open .atl-tb-group-items {
  display: flex;
  border-right: 2px solid var(--atl-border-mid, rgba(159, 200, 255, .28));
  padding-right: 4px;
}
/* Sprite-Icons in Overlay-Buttons: 16px bei 29px-Buttons */
.atl-tb-overlay .atl-ic { width: 16px; height: 16px; }

/* Einheitliche 29x29 Glass-Buttons fuer ALLE Controls im Overlay (Styleguide 2026-07-10;
 * 36px probiert 2026-07-11, User-Entscheid: 29px — kompakter neben der Karte)
 * (egal ob direct child oder nested in einer .atl-tb-group).
 * Default: dunkles Glas (loest die hell/dunkel-Naht der alten weissen Maplibre-Pillen)
 * Hover: hellere Surface · Active: primary-getoent = eingeschaltete Toggles sofort erkennbar. */
.atl-tb-overlay .atl-tb-group-icon,
.atl-tb-overlay .atl-tb-btn,
.atl-tb-overlay .atl-tb-sel,
.atl-tb-overlay select {
  width: 29px;
  height: 29px;
  padding: 0;
  background: var(--atl-glass, rgba(12, 19, 33, .85));
  backdrop-filter: blur(8px);
  border: 1px solid var(--atl-border-mid, rgba(159, 200, 255, .28));
  border-radius: 4px;
  color: var(--atl-text, #cdd9ec);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  transition: background .12s, color .12s, border-color .12s;
  overflow: hidden;
  line-height: 1;
  opacity: 1;
}
.atl-tb-overlay .atl-tb-group-icon:hover,
.atl-tb-overlay .atl-tb-btn:hover,
.atl-tb-overlay select:hover {
  background: rgba(50, 57, 73, .88);
  color: #fff;
  border-color: var(--atl-border-bright, rgba(159, 200, 255, .55));
  opacity: 1;
}
.atl-tb-overlay .atl-tb-group-icon.active,
.atl-tb-overlay .atl-tb-btn.active {
  background: var(--atl-primary-soft, rgba(74, 144, 226, .18));
  backdrop-filter: blur(8px);
  color: var(--atl-primary, #9fc8ff);
  border-color: rgba(159, 200, 255, .45);
  opacity: 1;
}
.atl-tb-overlay .atl-tb-group-icon.active:hover,
.atl-tb-overlay .atl-tb-btn.active:hover {
  background: rgba(74, 144, 226, .3);
  color: #fff;
}

/* Boost-Cycle-Button: zeigt nur die Zahl, klick cyclt durch Werte */
.atl-tb-overlay .atl-tb-cycle {
  font-size: 14px;
  font-weight: 700;
}

/* 3-Spalten-Grid bündig zum Body (vereinheitlicht 2026-06-03):
 * .atl-tb-slot.l (250px) = linke Sidebar · .atl-tb-slot.m (1fr) = Map · .atl-tb-slot.r (340px) = rechte Sidebar */
.atl-tb {
  display: grid;
  grid-template-columns: 250px 1fr 340px;
  gap: 8px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  background: transparent;
  border-bottom: none;
  color: #cdd9ec;
  font-family: inherit;
  font-size: 12px;
  position: relative;
  z-index: 5;
}
.atl-tb-slot {
  background: rgba(15, 22, 35, .94);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  min-width: 0;
  position: relative;
  /* overflow:visible damit Account-/Workspace-Dropdowns nicht abgeschnitten werden.
   * Lange Texte clippt .atl-tb-title selbst (text-overflow:ellipsis). */
  overflow: visible;
}
.atl-tb-slot.m { justify-content: center; }
.atl-tb-slot.r { justify-content: flex-end; padding-right: 10px; }
.atl-tb-title {
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* L1 Brand-Block */
.atl-tb-brandwrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.atl-tb-title {
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
.atl-tb-meta {
  color: #7d8ba0;
  font-size:12px;
  white-space: nowrap;
}

.atl-tb-spacer { flex: 1 1 8px; }
.atl-tb-bodyslot { display: inline-flex; align-items: center; gap: 6px; }
.atl-tb-sep {
  width: 1px;
  height: 22px;
  background: rgba(120, 160, 220, .22);
  margin: 0 4px;
}

/* L2/L3 Pillen + Selects */
.atl-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px;
  background: rgba(255, 255, 255, .05);
  color: #cdd9ec;
  border: 1px solid rgba(120, 160, 220, .25);
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.atl-tb-btn:hover:not(.disabled) {
  background: rgba(74, 144, 226, .18);
  border-color: rgba(74, 144, 226, .4);
  color: #fff;
}
.atl-tb-btn.active {
  background: rgba(74, 144, 226, .32);
  border-color: #4a90e2;
  color: #fff;
}
.atl-tb-btn.disabled {
  opacity: .4;
  cursor: not-allowed;
}

.atl-tb-sel {
  height: 32px;
  padding: 0 24px 0 10px;
  background: rgba(255, 255, 255, .05);
  color: #cdd9ec;
  border: 1px solid rgba(120, 160, 220, .25);
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23cdd9ec'/></svg>");
  background-repeat: no-repeat;
  background-position: right 9px center;
}
.atl-tb-sel:hover {
  background-color: rgba(74, 144, 226, .18);
  border-color: rgba(74, 144, 226, .4);
}

/* Gruppen-Pille (z.B. Outline-Toggles): Label + N Mini-Icons */
.atl-tb-group {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 12px;
  border: 1px solid rgba(120, 160, 220, .18);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
}
.atl-tb-group-lbl {
  font-size:12px; color: #7d8aa2; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
}
.atl-tb-group-items { display: inline-flex; gap: 2px; align-items: center; }
.atl-tb-group-icon {
  cursor: pointer; padding: 0;
  width: 32px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 7px; font-size: 14px; line-height: 1;
  color: #cdd9ec; opacity: .35;
  transition: opacity .12s, background .12s, border-color .12s;
  box-sizing: border-box;
}
/* Select im Group-Band (z.B. Boost in Anzeige) auf Icon-Höhe + kompakt */
.atl-tb-group-items .atl-tb-sel {
  height: 26px; padding: 0 16px 0 6px;
  font-size:12px; min-width: 44px;
  background-position: right 4px center;
}
.atl-tb-group-icon:hover { opacity: .8; background: rgba(255, 255, 255, .04); }
.atl-tb-group-icon.active { opacity: 1; background: rgba(74, 144, 226, .18); border-color: rgba(74, 144, 226, .55); }

/* L1-Right (Workspace + Account) — kein Trennstrich mehr, sitzt im eigenen Slot rechts */
.atl-tb-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}
.atl-tb-btn-ws {
  background: rgba(74, 144, 226, .18);
  border-color: rgba(74, 144, 226, .55);
  color: #9fc8ff;
}
.atl-tb-btn-save {
  background: rgba(255, 220, 80, .18);
  border-color: rgba(255, 220, 80, .55);
  color: #ffdc50;
}
.atl-tb-btn-save:hover {
  background: rgba(255, 220, 80, .3);
  color: #fff;
}
.atl-tb-acc-host { display: inline-flex; align-items: center; }
.atl-tb-acc-host .atl-acc-menu { z-index: 1100; }

.atl-tb-btn-x {
  width: 32px;
  padding: 0;
  justify-content: center;
  color: #7d8ba0;
}
.atl-tb-btn-x:hover { color: #fff; background: rgba(220, 80, 80, .2); border-color: rgba(220, 80, 80, .4); }

/* Save-Dialog (Label edit + optional Notiz) */
.atl-tb-modal-bg {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: atl-tb-modal-fade .15s ease;
}
@keyframes atl-tb-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.atl-tb-modal {
  width: min(440px, calc(100vw - 32px));
  background: var(--atl-surface-3, #0f1729);
  border: 1px solid rgba(120, 160, 220, .35);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
  padding: 20px 22px 18px;
  font-family: var(--atl-font, -apple-system, sans-serif);
  color: #cdd9ec;
}
.atl-tb-modal-h { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.atl-tb-modal-hint { font-size: 12px; color: #9fb3d1; margin-bottom: 12px; line-height: 1.4; }
.atl-tb-modal-lbl {
  display: block; font-size:12px; color: #9fb3d1; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px;
}
.atl-tb-modal-opt { color: #6b7d99; text-transform: none; letter-spacing: 0; font-weight: 400; }
.atl-tb-modal-name, .atl-tb-modal-note {
  width: 100%; box-sizing: border-box;
  background: #0b1220; color: #cdd9ec;
  border: 1px solid rgba(120, 160, 220, .25); border-radius: 5px;
  padding: 8px 10px; font-family: inherit; font-size: 13px;
}
.atl-tb-modal-name:focus, .atl-tb-modal-note:focus {
  outline: none; border-color: rgba(74, 144, 226, .8);
}
.atl-tb-modal-note { resize: vertical; min-height: 60px; }
.atl-tb-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;
}
.atl-tb-modal-cancel, .atl-tb-modal-ok {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 5px; cursor: pointer;
}
.atl-tb-modal-cancel {
  background: transparent; color: #9fb3d1;
  border: 1px solid rgba(120, 160, 220, .28);
}
.atl-tb-modal-cancel:hover { background: rgba(255, 255, 255, .04); color: #cdd9ec; }
.atl-tb-modal-ok {
  background: rgba(255, 220, 80, .18); color: #ffdc50;
  border: 1px solid rgba(255, 220, 80, .55);
}
.atl-tb-modal-ok:hover { background: rgba(255, 220, 80, .3); color: #fff; }

/* Mobile */
@media (max-width: 768px) {
  .atl-tb {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .atl-tb::-webkit-scrollbar { display: none; }
  .atl-tb-spacer { display: none; }
  .atl-tb-btn, .atl-tb-sel { height: 36px; font-size: 13px; }
  .atl-tb-title { font-size: 12px; }
}