/*
 * components.css — App-weite Basisklassen (No-Build, direkt im Browser).
 *
 * NAVBAR (Basisklasse, Vorlage = list-A.html):
 *   Pflicht in ALLEN HTML-Dateien im Projekt-Hauptverzeichnis. Struktur, Farben,
 *   Spacing und States werden HIER definiert — Seiten erweitern nur (eigene
 *   Buttons/Toggles/Selects in der Navbar nutzen die unten definierten Stile).
 *   Markup-Vorlage:
 *     <nav class="navbar">
 *       <a href="table.html">Table</a>
 *       <a href="verbs.html">Verbs</a>
 *       <a href="list-A.html">Liste A</a>
 *       <a href="list-B.html">Liste B</a>
 *       <!-- danach optionale, seitenspezifische Bedien-Elemente -->
 *     </nav>
 *   Seitenspezifische Navbar-Regeln gehören NICHT mehr in die Seiten-CSS, sondern
 *   als Erweiterung hierher (z. B. .navbar--variant), damit alle Seiten konsistent
 *   bleiben.
 */

.navbar {
  background: #333;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.navbar a {
  color: #fff;
  margin-right: 10px;
  text-decoration: none;
}
.navbar a:hover { text-decoration: underline; }

/* Bedien-Elemente in der Navbar (konsistentes Aussehen für alle Seiten) */
.navbar button {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 10pt;
}
.navbar button:hover { background: #777; }

.navbar label { color: #eee; font-size: 10pt; }
.navbar label.tg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.navbar label.tg input { cursor: pointer; }

.navbar select {
  background: #555;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 10pt;
}

/* Status-/Hinweistext rechtsbündig (z. B. #status in table.html) */
.navbar #status,
.navbar .nav-status { color: #eee; font-size: 10pt; margin-left: auto; }

/* Navbar wird nie gedruckt (Buch-Layout). */
@media print { .navbar { display: none; } }

/*
 * Filter-/Sortier-Leiste (VerbFilter) — gemeinsame Steuerung für verbs.html,
 * list-A.html, list-B.html. Wird nicht gedruckt.
 */
.vf-controls {
  background: #e9edf3;
  border-bottom: 1px solid #c4d0e6;
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  font-size: 10pt;
  color: #1a3a6e;
}
.vf-controls .vf-show,
.vf-controls .vf-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vf-controls .vf-h { font-weight: 600; margin-right: 4px; }
.vf-controls .vf-grp { display: inline-flex; align-items: center; gap: 6px; padding-right: 6px; }
.vf-controls .vf-glab { color: #5a6b86; font-size: 9pt; }
.vf-controls .vf-opt { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; color: #222; }
.vf-controls .vf-opt input { cursor: pointer; }
.vf-controls .vf-sortsel { font-size: 10pt; padding: 2px 6px; }
@media print { .vf-controls { display: none; } }

/*
 * Ansichts-Toggles (Checkboxen). Gehören NICHT in die Navbar -> eigene Leiste
 * direkt unter der Navbar. Wird nicht gedruckt.
 */
.toggles {
  background: #eef1f6;
  border-bottom: 1px solid #d6deec;
  padding: 6px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  font-size: 10pt;
  color: #1a2b45;
}
.toggles label.tg { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.toggles label.tg input { cursor: pointer; }
@media print { .toggles { display: none; } }

/*
 * Auto-Hide-Navbar mit Hover-Reveal ("Peek"): von js/navbar-reveal.js gesteuert.
 * Navbar liegt fix oben; beim Scrollen klappt sie weg (translateY) und erscheint
 * wieder, sobald die Maus die obere Kante berührt. Ein Platzhalter reserviert die
 * Höhe (kein Layout-Sprung).
 */
.navbar--fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform 0.2s ease; }
.navbar--collapsed { transform: translateY(-100%); }
.navbar--collapsed.navbar--peek { transform: translateY(0); }

/*
 * Verb-Sidebar (rechts, Slide-in) — js/verb-sidebar.js. Öffnen über den Anhang
 * (Handle) mit Lupen-Icon am linken Rand. Wird nicht gedruckt.
 */
.vsb {
  position: fixed; top: 0; left: 0; height: 100vh; width: 300px; max-width: 86vw;
  background: #fff; box-shadow: 2px 0 14px rgba(6, 15, 28, 0.18);
  transform: translateX(-100%); transition: transform 0.2s ease;
  z-index: 1001; display: flex; flex-direction: column;
}
.vsb.is-open { transform: translateX(0); }
.vsb-handle {
  position: absolute; right: -38px; top: 96px; width: 38px; height: 48px;
  background: #2F5490; color: #fff; border: none; border-radius: 0 8px 8px 0;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 8px rgba(6, 15, 28, 0.18);
}
.vsb-handle:hover { background: #1a3a6e; }
.vsb-head { padding: 12px; border-bottom: 1px solid #d6deec; }
.vsb-search { width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 11pt; border: 1px solid #c4d0e6; border-radius: 4px; }
.vsb-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.vsb-item {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
  border: none; border-bottom: 1px solid #eef1f6; background: transparent;
  padding: 5px 8px; font-size: 11pt; color: #1a2b45;
}
.vsb-item:hover { outline: 2px solid #2F5490; outline-offset: -2px; }
.vsb-item .vsb-inf { font-weight: 600; }
.vsb-item .vsb-tr { color: #44546e; font-size: 9.5pt; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsb-empty { padding: 16px; color: #8a96ab; text-align: center; }
/* Kurzzeitige Hervorhebung des angesprungenen Verbs */
.vsb-flash { box-shadow: 0 0 0 3px #f0c000 inset; transition: box-shadow 0.2s ease; }
@media print { .vsb { display: none; } }