/* ================= Verwaltungsseite (/verwaltung) =================
   Eigenstaendiges Layout: linke Navigationsleiste + Inhalt mit voller Breite,
   fuer Verwaltungsaufgaben (viele Plaene/Feuerwehren/Benutzer) besser geeignet
   als das schmale Panel der Haupt-App. Nutzt dieselben Grundbausteine
   (.field, .btn, .section, .admin-row usw.) aus style.css. */

/* Verhindert, dass die gesamte Seite (und damit die Trennlinie zwischen
   Navigation und Inhalt) je nach Reiter um die Breite der Scrollleiste hin und
   her springt: manche Reiter haben mehr Inhalt als der Viewport hoch ist
   (Scrollleiste erscheint), andere nicht (keine Scrollleiste) -- ohne diese
   Regel aendert sich dadurch die verfuegbare Breite und alles verschiebt sich
   sichtbar beim Wechseln. Platz fuer die Scrollleiste wird daher immer
   reserviert, auch wenn gerade nicht gescrollt werden muss. */
html{ overflow-y: scroll; scrollbar-gutter: stable; }

#verwaltung-app{ min-height:100vh; display:flex; flex-direction:column; background: var(--bg); }

.verwaltung-layout{
  flex:1; display:flex; max-width:1600px; width:100%; margin:0 auto;
  min-height:0;
}

.verwaltung-nav{
  flex: 0 0 220px; min-width:0; display:flex; flex-direction:column; gap:2px;
  padding:20px 12px; border-right:1px solid var(--border);
}
.verwaltung-nav-item{
  text-align:left; background:none; border:none; color: var(--text-muted);
  padding:10px 14px; border-radius:8px; font-size:14px; font-weight:600;
  font-family: var(--font-display); cursor:pointer; white-space:nowrap;
}
.verwaltung-nav-item:hover{ background: var(--panel-2); color: var(--text); }
.verwaltung-nav-item.active{ background: var(--accent); color:#fff; }

/* Auf grossen Bildschirmen bewusst deutlich breiter als frueher (1000px) -- bei
   1600px Layout-Breite blieb sonst viel Platz rechts ungenutzt liegen, gerade bei
   den Tabellen (Plaene/Hydranten) waere jede Spalte unnoetig eng gewesen. */
.verwaltung-content{ flex:1; min-width:0; padding:24px 32px; max-width:1400px; }
.verwaltung-content h2{ font-size:22px; margin-bottom:4px; }
.verwaltung-content .sub{ color: var(--text-muted); font-size:13px; margin-bottom:20px; }
/* Reine Formular-Abschnitte (Neuer Plan/Neue Feuerwehr/Einstellungen usw.) bewusst
   schmaler halten als der verfuegbare Platz -- bei 1400px Content-Breite waeren
   einzelne, volle-Breite-Eingabefelder sonst unangenehm in die Laenge gezogen.
   Tabellen (.verwaltung-table-wrap) und Karten-Grids liegen bewusst AUSSERHALB
   von .section und nutzen dadurch weiterhin die volle Breite. */
.verwaltung-content > .section{ max-width:640px; }

/* Echte Tabelle fuer Plaene/Hydranten-Uebersicht -- bei vielen Eintraegen deutlich
   uebersichtlicher als gestapelte Karten im schmalen Panel. */
.verwaltung-table{ width:100%; border-collapse:collapse; font-size:13px; }
.verwaltung-table th{
  text-align:left; padding:8px 10px; border-bottom:2px solid var(--border);
  color: var(--text-muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em;
}
.verwaltung-table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.verwaltung-table tbody tr:hover{ background: var(--panel-2); }
.verwaltung-table input, .verwaltung-table select{
  width:100%; padding:5px 8px; border:1px solid var(--border); border-radius:6px;
  background: var(--panel); color: var(--text); font-size:13px;
}
.verwaltung-table .btn{ padding:5px 10px; font-size:12px; white-space:nowrap; }
.verwaltung-table-wrap{ overflow-x:auto; margin-bottom:20px; }

/* Karten-Grid fuer Feuerwehren/Benutzer/Zustaende/Dokumente -- bei voller
   Seitenbreite mehrspaltig statt einer langen Liste untereinander wie bisher im
   Panel. */
.verwaltung-card-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:14px; margin-top:20px; margin-bottom:20px;
}
.verwaltung-card-grid .admin-row, .verwaltung-card-grid .fw-card{ margin:0; }

/* ---------- Handy/schmales Tablet ---------- */
@media (max-width: 860px){
  .verwaltung-layout{ flex-direction:column; }

  /* Horizontal scrollbare Leiste statt umbrechender Buttons -- bei inzwischen 8
     Reitern wuerden umbrechende Buttons mehrere Zeilen hoch und viel vertikalen
     Platz fressen; eine einzeilige, wischbare Leiste bleibt kompakt (analog zu
     den mobilen Tabs der Haupt-App). */
  .verwaltung-nav{
    flex-direction:row; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-right:none; border-bottom:1px solid var(--border);
    padding:10px 12px; gap:6px;
  }
  .verwaltung-nav-item{ flex:0 0 auto; padding:8px 12px; font-size:13px; }

  .verwaltung-content{ padding:14px; max-width:none; }
  .verwaltung-content h2{ font-size:19px; }
  .verwaltung-card-grid{ grid-template-columns: 1fr; gap:10px; }

  /* Klassisches Responsive-Tabellen-Muster: statt eine breite Tabelle horizontal
     scrollen zu muessen (auf einem Handy-Bildschirm mit 6-7 Spalten kaum nutzbar),
     wird jede Zeile zu einer gestapelten Karte -- jede Zelle zeigt per
     data-label-Attribut (siehe verwaltung.js) ihre Spaltenbezeichnung davor. */
  .verwaltung-table-wrap{ overflow-x:visible; }
  .verwaltung-table thead{ display:none; }
  .verwaltung-table, .verwaltung-table tbody, .verwaltung-table tr, .verwaltung-table td{
    display:block; width:100%;
  }
  .verwaltung-table tr{
    margin-bottom:12px; border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; background: var(--panel);
  }
  .verwaltung-table td{
    border-bottom:none; padding:6px 0; display:flex; align-items:center; gap:10px;
  }
  .verwaltung-table td:not(:last-child){ border-bottom:1px solid var(--border); }
  .verwaltung-table td::before{
    content: attr(data-label); flex:0 0 100px; font-size:11px; text-transform:uppercase;
    letter-spacing:.04em; color: var(--text-muted); font-weight:600;
  }
  .verwaltung-table td[data-label=""]::before, .verwaltung-table td:not([data-label])::before{ display:none; }
}