/**
 * SOLplan – Sidebar-Redesign
 * Ergaenzende Regeln. NACH styles.css einbinden.
 *
 * Nutzt ausschliesslich die bestehenden Variablen aus :root in styles.css:
 *   --solyco-primary  #3557A2   --solyco-dark     #203563
 *   --solyco-light-1  #5f86bf   --solyco-light-2  #bcdbf3
 *   --solyco-gray     #3b3e41   --solyco-green    #36A253
 *   --solyco-red      #A72D22   --solyco-input-bg #fafaff
 *
 * Keine neuen Farben. border-radius bleibt 2px.
 * Quelle: Temp/SOLplan-Redesign/tokens/solplan-redesign.css (Schritt 1 ergaenzt).
 */

/* ---------------------------------------------------------------
   Zonenlayout: Sidebar wird zum Flex-Container.
   Nur .sidebar-content scrollt, alle anderen Zonen sind fix.
   Ersetzt das bisherige "#sidebar { overflow: auto }".
   --------------------------------------------------------------- */
#sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;                 /* Innenabstand wandert in die Zonen */
  padding-bottom: 0;          /* .app-footer ist Teil des Flusses */
  overflow: hidden;
}

.sidebar-header,
.tool-bar,
.summary-bar,
.sidebar-cta {
  flex: 0 0 auto;
  padding-left: 14px;
  padding-right: 14px;
}

.sidebar-content {
  flex: 1 1 auto;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 0 14px 12px;
}

/* ---------------------------------------------------------------
   Zustandsabhaengige Sichtbarkeit des Inhaltsbereichs (A1)

   sidebarState.js setzt nur data-state / data-tool. Welche Bloecke das
   bedeutet, steht ausschliesslich hier.

   Es wird ausschliesslich VERSTECKT, nie erzwungen eingeblendet: Bloecke,
   die aus gutem Grund inline verborgen sind (z.B. #placebar vor der
   Platzierung), behalten dadurch ihren Zustand. Das !important ist noetig,
   weil der Bestand display per Inline-Style setzt.
   --------------------------------------------------------------- */

/* overview: Werkzeugparameter und Stueckliste gehoeren in eigene Zustaende (A9) */
.sidebar-content[data-state="overview"] > section > [data-tool-params],
.sidebar-content[data-state="overview"] > section > [data-summary] {
  display: none !important;
}

/* tool: nur die Parameter des aktiven Werkzeugs (A5) */
.sidebar-content[data-state="tool"] > section > *:not([data-tool-params]) {
  display: none !important;
}
.sidebar-content[data-state="tool"]:not([data-tool="array"]) > section > [data-tool-params="array"] {
  display: none !important;
}
.sidebar-content[data-state="tool"]:not([data-tool="roof"]) > section > [data-tool-params="roof"] {
  display: none !important;
}
.sidebar-content[data-state="tool"]:not([data-tool="obstacle"]) > section > [data-tool-params="obstacle"] {
  display: none !important;
}
/* Die Aufbauhoehe wird erst am gesetzten Modulfeld gewaehlt, nicht vorab */
.sidebar-content[data-state="tool"] [data-tool-hidden] {
  display: none !important;
}

/* object: nur die gewaehlte Objektkarte (A7) */
.sidebar-content[data-state="object"] > section > *:not([data-object-list]) {
  display: none !important;
}
.sidebar-content[data-state="object"] [data-object-list] > .array-item:not(.editing) {
  display: none !important;
}

/* summary: nur die Stueckliste (A9) */
.sidebar-content[data-state="summary"] > section > *:not([data-summary]) {
  display: none !important;
}

/* finish: Abschluss-Seite (A10). [data-finish] ist ueberall sonst verborgen,
   unabhaengig davon in welcher Section es steckt - deshalb ein globales Paar
   statt des ">section >"-Musters oben. */
.sidebar-content:not([data-state="finish"]) [data-finish] {
  display: none !important;
}
.sidebar-content[data-state="finish"] > section > *:not([data-finish]) {
  display: none !important;
}

/* Zone 3 (Werkzeugleiste) und Zone 5 (Abschliessen & Export) gehoeren zur
   Planung - auf der Abschluss-Seite selbst sind sie ueberfluessig/verwirrend
   (Rueckweg fuehrt bereits ueber "Zurueck zur Planung" im Kopf). !important
   noetig, weil .tool-bar seinen display-Wert per Inline-Style setzt. */
#sidebar[data-state="finish"] .tool-bar,
#sidebar[data-state="finish"] .sidebar-cta {
  display: none !important;
}

/* Zone 4 im Zustand summary hervorgehoben (02_Zustandsmodell) */
#sidebar[data-state="summary"] .summary-bar {
  background: var(--solyco-light-2);
  border-top-color: var(--solyco-light-1);
}

/* ---------------------------------------------------------------
   Dachflaechen-Gruppierung im Zustand overview (A3, Schritt 3)

   overviewGroups.js verschiebt die von den Managern gebauten Karten in
   #roofGroups. #roofGroups ist kein Kind eines <section>, daher eigene
   Sichtbarkeitsregeln getrennt vom Block oben.
   --------------------------------------------------------------- */

/* Die alten flachen Listen sind ueberholt (Karten wandern nach #roofGroups),
   sie bleiben in jedem Zustand leer und damit unsichtbar. */
.flat-list-legacy {
  display: none !important;
}

/* Ueberschriften/Hinweistexte der fruaeheren Einzelabschnitte - ersetzt durch
   die Gruppenkoepfe in #roofGroups. */
.sidebar-content[data-state="overview"] [data-overview-hidden] {
  display: none !important;
}

.sidebar-content:not([data-state="overview"]) #roofGroups {
  display: none;
}
/* object: #roofGroups bleibt im Fluss, aber nur die gewaehlte Karte selbst
   ist sichtbar - Gruppenkoepfe/Klappzeilen werden ausgeblendet. Nur bei
   Hindernis-/Modulfeld-Auswahl relevant (deren Karten dort verschoben werden) -
   bei Dachflaeche/Bild bleibt der Container verborgen, sonst zeigt jede
   Dachflaechen-Gruppe eine leere, graue Box ohne erkennbaren Inhalt. */
.sidebar-content[data-state="object"][data-object-type="obstacle"] #roofGroups,
.sidebar-content[data-state="object"][data-object-type="array"] #roofGroups {
  display: block;
}
.sidebar-content[data-state="object"] .roof-group-header,
.sidebar-content[data-state="object"] .group-row {
  display: none !important;
}
/* Im Zustand object bleibt nur die Gruppe der gewaehlten Karte stehen. Ohne das
   erscheinen alle uebrigen Dachflaechen-Gruppen als leere, umrandete Kaesten
   ("Geisterboxen"): ihr Kopf/ihre Klappzeilen sind ausgeblendet (Regel oben) und
   ihre Karten per :not(.editing) verborgen - uebrig bleibt nur der Rahmen samt
   Innenabstand von .roof-group / .roof-group .list. */
.sidebar-content[data-state="object"] .roof-group:not(:has(.array-item.editing)) {
  display: none !important;
}
/* Ein zusammengeklappter Zustand darf die gewaehlte Karte nicht verdecken.
   :not(.flat-list-legacy) ist noetig: #bom/#obstacleList/#roofList/#imagesList
   tragen selbst noch data-object-list (fuer die Manager) UND flat-list-legacy -
   ohne den Ausschluss gewinnt diese Regel gegen .flat-list-legacy (hoehere
   Selektor-Spezifitaet trotz !important auf beiden Seiten) und die volle,
   gerade neu aufgebaute Kartenliste blitzt zusaetzlich zur schon nach
   #roofGroups verschobenen Karte auf - das gewaehlte Objekt erschien doppelt. */
.sidebar-content[data-state="object"] .roof-group > .list,
.sidebar-content[data-state="object"] [data-object-list]:not(.flat-list-legacy) {
  display: block !important;
}

.chevron {
  color: var(--solyco-gray);
  font-size: 22px;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Zone 3 – Werkzeugleiste

   Nur 3 Werkzeuge (Hindernis/Modulfeld/Montagefuß) - sie werden waehrend
   der Planung staendig benutzt, deshalb deutlich groesser als vorher.
   Bleibt komplett versteckt (siehe main.js), bis die erste Dachflaeche
   existiert - vorher ist keins der drei nutzbar.
   --------------------------------------------------------------- */
.tool-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #e5e5e5;
  background: #fff;
}

.tool-bar .btn-s {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 8px;
  font-size: 13px;
  background: var(--solyco-primary);
  color: #fff;
  border-color: var(--solyco-primary);
}

.tool-bar .btn-s:hover {
  background: var(--solyco-dark);
  border-color: var(--solyco-dark);
}

.tool-bar .icon {
  width: 22px;
  height: 22px;
  stroke-width: 5;
}

/* Nur die Werkzeugleisten-Buttons selbst sind blau gefuellt (weisses Icon) -
   .tool-bar .icon allein waere zu breit und haette auch die Icons im
   aufgeklappten, weiss hinterlegten Klappmenue (Linie/Flaeche/Rechteck
   zeichnen) unsichtbar weiss auf weiss gefaerbt (Nutzer-Feedback). */
.tool-bar .btn-s .icon {
  color: #fff;
}

.tool-bar .btn-icon {
  flex: 0 0 auto;
}

/* War 13px (geerbt von .tool-bar .btn-s) - wirkte neben den jetzt grossen,
   fett gefuellten Werkzeugleisten-Buttons winzig. */
.dropdown-caret {
  font-size: 18px;
}

/* aktives Werkzeug – dunklerer Ton, damit es sich von den anderen (jetzt
   ebenfalls gefuellten) Werkzeugleisten-Buttons abhebt. */
.tool-bar .btn-s.active {
  background: var(--solyco-dark);
  border-color: var(--solyco-dark);
  color: #fff;
}

.tool-bar .btn-s.active:hover {
  background: var(--solyco-dark);
}

/* Werkzeug noch nicht verfuegbar (Workflow-Gating). Eigene Klasse statt
   "disabled", damit das bestehende disableAllButtons()/enableAllButtons()
   waehrend des Zeichnens (roofDrawing.js, obstacleManager.js) die Sperre
   nicht aufhebt. Nicht mehr auf .tool-bar beschraenkt, da der Dachflaeche-
   Button in den Scrollbereich verschoben wurde (Schritt 5). */
.btn-s.tool-locked,
.btn.tool-locked {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Hindernis-/Montagefuß-Werkzeug: Klappmenü */
.tool-bar .dropdown-wrap {
  position: relative;
  flex: 1 1 auto;
}

.tool-bar .dropdown-wrap .btn-s {
  width: 100%;
}

/* ---------------------------------------------------------------
   "Dachfläche hinzufügen" – im Scrollbereich statt in der Werkzeugleiste,
   da selten genutzt (meist 1-2x pro Projekt). Nur in der Übersicht sichtbar.
   --------------------------------------------------------------- */
.add-roof-bar {
  margin-bottom: 12px;
}

.add-roof-bar .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sidebar-content:not([data-state="overview"]) .add-roof-bar {
  display: none !important;
}

/* ---------------------------------------------------------------
   Kompakte Adresszeile (Projekt/Adresse/Bild nach dem Ausfüllen) –
   ab Schritt 5, Nutzer-Feedback. Gleiches Sticky-Muster wie .context-header.
   --------------------------------------------------------------- */
.address-summary-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -14px 12px;
  padding: 10px 14px;
  background: var(--solyco-input-bg);
  border-bottom: 1px solid var(--solyco-light-1);
}

.address-summary-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  color: var(--solyco-dark);
}

.address-summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-content:not([data-state="overview"]) .address-summary-bar {
  display: none !important;
}

/* ---------------------------------------------------------------
   Zone 4 – Zusammenfassung
   --------------------------------------------------------------- */
.summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-top: 1px solid #e5e5e5;
  background: var(--solyco-input-bg);
}

.summary-bar .small {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.summary-bar strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--solyco-dark);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Zone 5 – Abschluss
   --------------------------------------------------------------- */
.sidebar-cta {
  padding-top: 8px;
  padding-bottom: 8px;
}

.sidebar-cta .btn {
  width: 100%;
}

/* ---------------------------------------------------------------
   Zone 6 – Fuss: Teil des Flex-Flusses statt Overlay
   --------------------------------------------------------------- */
.app-footer {
  position: static;
  flex: 0 0 auto;
}

/* ---------------------------------------------------------------
   Dachflaechen-Gruppe (Zustand overview) – ab Schritt 3
   --------------------------------------------------------------- */
.roof-group {
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  margin-bottom: 8px;
  background: #fff;
}

.roof-group[data-open="true"] {
  border-color: var(--solyco-light-1);
}

.roof-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
}

.roof-group-header .item-title {
  flex: 1;
}

.roof-group-header:hover {
  background: var(--solyco-input-bg);
}

/* Statt Einrueckung per Randlinie + Margin (kostet ~20px Breite, die im
   schmalen Sidebar-Bereich fehlt): dezente Hintergrundflaeche als Gruppierungs-
   Hinweis, volle Breite fuer den Karteninhalt bleibt erhalten. */
.roof-group .list {
  margin: 0;
  padding: 4px 8px 8px;
  background: var(--solyco-input-bg);
}

/* Bearbeiten/Kopieren/Fokus/Löschen: eigene Zeile unter dem Titel statt
   nebeneinander-Umbruch pro Button - vermeidet Überlappung im schmalen,
   eingerückten Gruppenbereich. */
.roof-group .item-header {
  flex-wrap: wrap;
}
.roof-group .item-title-input {
  flex: 1 1 100%;
  min-width: 0;
}
.roof-group .item-actions {
  flex: 1 1 100%;
  justify-content: flex-end;
}
.roof-group .btn-icon {
  height: 24px;
  padding: 0 6px;
  font-size: 11px;
}

.group-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.group-row:last-child {
  border-bottom: 0;
}

.group-row > span:first-of-type {
  flex: 1;
}

.group-row:hover {
  color: var(--solyco-primary);
}

/* auf der Karte ueberfahren -> Zeile hervorheben (kein Zustandswechsel) */
.group-row.hovered,
.array-item.hovered {
  background: var(--solyco-input-bg);
  border-color: var(--solyco-light-1);
}

/* ---------------------------------------------------------------
   Kontextkopf (Zustaende tool / object / summary) – ab Schritt 2
   --------------------------------------------------------------- */
.context-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 -14px 12px;
  padding: 10px 14px;
  background: var(--solyco-light-2);
  border-bottom: 1px solid var(--solyco-light-1);
}

.context-path {
  display: block;
  font-size: 11px;
  color: var(--solyco-dark);
  opacity: 0.75;
  cursor: pointer;
}

.context-path:hover {
  opacity: 1;
  text-decoration: underline;
}

.context-header .item-title {
  display: block;
  font-size: 14px;
}

/* ---------------------------------------------------------------
   Statusblock im Zustand tool – ab Schritt 2
   --------------------------------------------------------------- */
.tool-status {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--solyco-input-bg);
  border: 1px solid var(--solyco-light-1);
  border-left-width: 4px;
  border-radius: 2px;
  font-size: 13px;
}

.tool-status strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--solyco-dark);
}

.tool-status .form-hint {
  margin-top: 6px;
}

.tool-status-extra:empty {
  display: none;
}

.tool-status-params {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--solyco-light-1);
}

/* ---------------------------------------------------------------
   Ergebniswerte im Zustand object – ab Schritt 2
   --------------------------------------------------------------- */
.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.result-table td {
  padding: 3px 0;
}

.result-table td:last-child {
  text-align: right;
  color: var(--solyco-gray);
}

.result-table tr:last-child td {
  font-weight: 600;
  color: var(--solyco-dark);
}

/* ---------------------------------------------------------------
   Icons – ab Schritt 4
   --------------------------------------------------------------- */
.icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--solyco-primary);
  stroke-width: 6;            /* ~1,1 px bei 18 px */
}

.icon--sm { width: 15px; height: 15px; stroke-width: 7; }
.icon--lg { width: 22px; height: 22px; stroke-width: 5; }
.icon--xl { width: 40px; height: 40px; stroke-width: 3; }

.btn-s.active .icon,
.btn .icon,
.btn-icon.active .icon,
.btn-icon.danger:hover .icon,
.btn-icon:hover .icon {
  color: currentColor;
}

/* Icon + Text nebeneinander in Werkzeugleiste und Hindernis-Klappmenue */
.tool-bar .btn-s,
.dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dropdown-menu button { justify-content: flex-start; }

/* Kopf: Laden/Neu/Speichern sind reine Icon-Buttons (Text bleibt als Tooltip/
   Screenreader-Text erhalten) - vorher sprengte Icon+Text die Kopfzeile und
   drueckte den Sprachumschalter aus dem sichtbaren Bereich. */
.header-actions .btn-s {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  box-sizing: border-box;
}

/* Etwas groesser als das Standard-icon--sm, aber duenner als der erste Versuch
   (stroke-width 9 wirkte zu klobig, nachdem das eigentliche Sichtbarkeits-
   Problem behoben war - siehe stroke-width-Fix in den Icon-Symbolen). */
.header-actions .icon {
  width: 20px;
  height: 20px;
  stroke-width: 6;
}

/* ---------------------------------------------------------------
   Pruefliste auf der Abschluss-Seite – ab Schritt 4
   --------------------------------------------------------------- */
.check-list {
  margin: 0 0 14px;
  padding: 10px 12px;
  background: var(--solyco-input-bg);
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  font-size: 13px;
}

.check-list li {
  list-style: none;
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.check-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.check-list li[data-ok="true"]  { color: var(--solyco-green); }
.check-list li[data-ok="false"] { color: var(--solyco-red); }
.check-list li[data-ok="true"] .check-list-icon  { background: var(--solyco-green); }
.check-list li[data-ok="false"] .check-list-icon { background: var(--solyco-red); }

/* Fehlende Angabe: klickbar, springt zum passenden Feld im Formular darunter. */
.check-list-actionable {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.check-list-actionable:hover {
  color: var(--solyco-dark);
}
.check-list-actionable:hover .check-list-icon {
  background: var(--solyco-dark);
}

/* ---------------------------------------------------------------
   Splitter zum Verbreitern der Sidebar (optional, nachgelagert)
   --------------------------------------------------------------- */
#app {
  grid-template-columns: var(--sidebar-width, 380px) 1fr;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 500;
}

.sidebar-resizer:hover {
  background: var(--solyco-light-2);
}