/* =====================================================================
   lab - werkzeuge/stapelbilder/app.css
   LabImageBatch: Werkzeugleiste mit lab-Marke, Bildliste mit Auswahl und
   Ergebnis-Vorschau, Einstellungen in Reitern, feste Aktionsleiste.
   Konventionen (AGENTS.md §5):
     - Alle Klassen mit Prefix .lab_ (hier .lab_sb_ fuer LabImageBatch)
     - Keine harten Farben, nur Variablen aus css/colors.css
   ===================================================================== */

/* ---------- Werkzeugleiste ---------- */
.lab_sb_leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-1);
}

/* App im Fokus: lab-Marke links in der Leiste (AGENTS.md 5.7) */
.lab_sb_marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--blk-color);
  font-weight: 700;
  margin-right: 0.3rem;
  padding: 0.1rem 0.3rem;
  border-radius: 8px;
}

.lab_sb_marke:hover {
  background: var(--alt-div-color);
}

.lab_sb_marke img {
  display: block;
}

/* Sortierart als kompakte Auswahl in der Leiste */
.lab_sb_sichtfeld {
  display: inline-flex;
  align-items: center;
}

.lab_sb_sichtfeld select {
  padding: 0.4rem 0.5rem;
  font-size: 0.88rem;
  border-radius: 10px;
  border: var(--lab-border);
  background: var(--div-color);
  color: var(--blk-color);
}

.lab_sb_meldung {
  margin: 0;
  flex: 1 1 12rem;
}

.lab_sb_meldung:empty {
  display: none;
}

/* ---------- Auswahlleiste (Mehrfachauswahl) ---------- */
.lab_sb_auswahlleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.55rem 0.7rem;
  background: var(--div-color);
  border: var(--lab-border);
  border-left: 3px solid var(--bt-color);
  border-radius: 10px;
}

.lab_sb_auswahlleiste[hidden] {
  display: none;
}

.lab_sb_auswahlleiste strong {
  margin-right: 0.3rem;
}

.lab_sb_auswahlleiste .lab_btn {
  padding: 0.3rem 0.55rem;
  font-size: 0.84rem;
}

/* ---------- Arbeitsfeld ---------- */
.lab_sb_layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .lab_sb_layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.lab_sb_karte {
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: 1rem 1.1rem 1.1rem;
  box-shadow: var(--lab-shadow-1);
  min-width: 0;
}

.lab_sb_kopfzeile {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.lab_sb_kopfzeile h2 {
  font-size: 1rem;
  margin: 0;
}

/* ---------- Ablage (leerer Zustand / Drop-Hinweis) ---------- */
.lab_sb_ablage {
  border: 2px dashed var(--lab-border-color);
  border-radius: 10px;
  padding: 1.6rem 1rem;
  text-align: center;
  color: var(--grey600-color);
  margin-bottom: 0.8rem;
}

.lab_sb_karte_liste.is_darueber .lab_sb_ablage,
.lab_sb_karte_liste.is_darueber .lab_sb_tabelle_wickel {
  border-color: var(--bt-color);
}

.lab_sb_tabelle_wickel.is_darueber {
  border: 2px dashed var(--bt-color);
  border-radius: 10px;
}

.lab_sb_ablage[hidden] {
  display: none !important;
}

/* ---------- Bildtabelle ---------- */
.lab_sb_tabelle_wickel {
  overflow-x: auto;
}

.lab_sb_tabelle {
  width: 100%;
  border-collapse: collapse;
}

.lab_sb_tabelle th,
.lab_sb_tabelle td {
  padding: 0.4rem 0.55rem;
  border-bottom: var(--lab-border);
  font-size: 0.88rem;
  text-align: left;
  vertical-align: top;
}

.lab_sb_tabelle thead th {
  background: var(--alt-div-color);
  font-weight: 700;
  white-space: nowrap;
}

.lab_sb_tabelle tbody tr:last-child th,
.lab_sb_tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.lab_sb_vorschau {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border: var(--lab-border);
  border-radius: 8px;
  display: block;
  background: var(--div-color);
}

/* Ergebnis-Vorschau: das verarbeitete Bild direkt in der Zeile */
.lab_sb_ergebnisvorschau {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border: var(--lab-border);
  border-radius: 8px;
  display: block;
  background: var(--div-color);
  margin-bottom: 0.3rem;
}

.lab_sb_vorschau_knopf {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  line-height: 0;
}

.lab_sb_vorschau_knopf:hover .lab_sb_ergebnisvorschau {
  border-color: var(--bt-color);
}

/* Kästchen-Spalte links */
.lab_sb_spalte_wahl {
  width: 2.2rem;
}

.lab_sb_spalte_wahl input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
}

.lab_sb_tabelle tbody tr.is_gewaehlt > th,
.lab_sb_tabelle tbody tr.is_gewaehlt > td {
  background: var(--alt-div-color);
}

.lab_sb_tabelle tbody tr.is_markiert > th,
.lab_sb_tabelle tbody tr.is_markiert > td {
  box-shadow: inset 3px 0 0 var(--bt-color);
}

.lab_sb_name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lab_sb_zeile_klein {
  color: var(--grey600-color);
  font-size: 0.82rem;
  margin: 0.1rem 0 0;
  font-family: var(--lab-mono);
}

.lab_sb_ergebnisname {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lab_sb_status_fehler {
  color: var(--lab-fehler-fg);
}

.lab_sb_drehung {
  margin: 0.15rem 0 0;
}

.lab_sb_aktionenzelle {
  white-space: nowrap;
}

.lab_sb_aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.25rem;
}

.lab_sb_aktionen:last-child {
  margin-bottom: 0;
}

/* Kompakte Icon-Knoepfe in den Zeilen (Drehen, Verschieben) */
.lab_sb_iknopf {
  padding: 0.25rem 0.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.lab_sb_iknopf span {
  font-size: 0.8rem;
  font-family: var(--lab-mono);
}

.lab_sb_iknopf.is_aktiv {
  border-color: var(--bt-color);
  color: var(--bt-color);
}

.lab_sb_aktionenzelle .lab_btn {
  padding: 0.3rem 0.55rem;
  font-size: 0.82rem;
  margin: 0 0.25rem 0.25rem 0;
}

/* ---------- Größenart (Pixel-Grenzen oder Prozent) ---------- */
.lab_sb_art {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  margin-bottom: 0.4rem;
}

.lab_sb_prozent_hinweis {
  flex: 1 1 10rem;
}

/* ---------- Einstellungen ---------- */
.lab_sb_gruppe {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.8rem;
  border: var(--lab-border);
  border-radius: 10px;
  background: var(--alt-div-color);
}

.lab_sb_gruppe legend {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0 0.3rem;
}

.lab_sb_gruppe .lab_hinweis {
  margin: 0.4rem 0 0;
}

.lab_sb_zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.lab_sb_feld {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  flex: 1 1 9rem;
  min-width: 0;
}

.lab_sb_feld input,
.lab_sb_feld select {
  font-weight: 400;
}

.lab_sb_wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  margin: 0.35rem 0 0;
}

.lab_sb_qualitaet {
  margin: 0.5rem 0 0.2rem;
}

.lab_sb_qualitaet label {
  font-size: 0.88rem;
  font-weight: 600;
}

.lab_sb_qualitaet input[type="range"] {
  width: 100%;
  margin-top: 0.3rem;
}

/* ---------- Reiter der Einstellungen ---------- */
.lab_sb_reiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  border-bottom: var(--lab-border);
  margin-bottom: 0.8rem;
}

.lab_sb_reiter_knopf {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 0.45rem 0.7rem;
  margin-bottom: -1px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--grey600-color);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.lab_sb_reiter_knopf:hover {
  color: var(--blk-color);
  background: var(--alt-div-color);
}

.lab_sb_reiter_knopf[aria-selected="true"] {
  color: var(--bt-color);
  border-bottom-color: var(--bt-color);
}

.lab_sb_bereich[hidden] {
  display: none;
}

/* Bildkorrektur: Regler wie beim Qualitaetsschieber */
.lab_sb_regler {
  margin-bottom: 0.7rem;
}

.lab_sb_regler label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
}

.lab_sb_regler output {
  font-family: var(--lab-mono);
  color: var(--bt-color);
}

.lab_sb_regler input[type="range"] {
  width: 100%;
  margin-top: 0.3rem;
}

/* ---------- Knöpfe, feste Aktionsleiste, Fortschritt ---------- */
.lab_sb_knopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Die Aktionsleiste bleibt am unteren Rand stehen, auch wenn die
   Bildliste lang wird (gefordert in der Oberflaechen-Runde 05.10.). */
.lab_sb_aktionen_leiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 1rem;
  padding: 0.7rem 0.8rem;
  background: var(--lab-toolbar-bg, var(--ct-color));
  backdrop-filter: blur(6px);
  border: var(--lab-border);
  border-radius: 12px;
  box-shadow: var(--lab-shadow-2);
}

.lab_sb_fortschritt {
  margin: 0 0 0.4rem;
  min-height: 1.1em;
}

.lab_sb_fortschritt:empty {
  display: none;
}

.lab_sb_ersparnis {
  margin: 0.2rem 0 0;
  font-family: var(--lab-mono);
}

.lab_sb_ersparnis:empty {
  display: none;
}

/* ---------- Hinweise ---------- */
.lab_sb_hilfe {
  margin-top: 1rem;
  background: var(--ct-color);
  border: var(--lab-border);
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  box-shadow: var(--lab-shadow-1);
}

.lab_sb_hilfe summary {
  cursor: pointer;
  font-weight: 600;
}

.lab_sb_hilfetext {
  margin: 0.7rem 0 0.2rem;
  padding-left: 1.2rem;
}

.lab_sb_hilfetext li {
  margin-bottom: 0.4rem;
}

/* ---------- Kleine Schirme ---------- */
@media (max-width: 30rem) {
  .lab_sb_karte {
    padding: 1rem 1rem 1.1rem;
  }

  .lab_sb_leiste {
    gap: 0.35rem;
  }

  .lab_sb_auswahlleiste {
    gap: 0.3rem;
  }

  .lab_sb_aktionen_leiste {
    padding: 0.6rem;
  }

  .lab_sb_reiter_knopf {
    padding: 0.4rem 0.5rem;
    font-size: 0.85rem;
  }

  .lab_sb_ergebnisvorschau {
    width: 60px;
    height: 60px;
  }
}

/* Auf dem Handy die Tabelle seitlich scrollen lassen, statt die Spalten
   bis zur Unlesbarkeit zu quetschen (der Wickel hat overflow-x: auto). */
@media (max-width: 40rem) {
  .lab_sb_tabelle {
    min-width: 30rem;
  }

  .lab_sb_name,
  .lab_sb_ergebnisname {
    overflow-wrap: normal;
    word-break: normal;
  }

  .lab_sb_tabelle th,
  .lab_sb_tabelle td {
    padding: 0.35rem 0.45rem;
  }
}

/* Auf sehr schmalen Schirmen stapeln sich die Reiter nicht zu breit */
@media (max-width: 22rem) {
  .lab_sb_reiter {
    gap: 0.15rem;
  }

  .lab_sb_reiter_knopf {
    padding: 0.35rem 0.4rem;
  }
}

/* ------------------------------------------------------------------
   Ergebnis gross ansehen (eigener Dialog)
   ------------------------------------------------------------------ */
.lab_sb_bild {
  position: fixed;
  inset: 0;
  z-index: 32;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lab_sb_bild[hidden] { display: none; }

.lab_sb_bild_kasten {
  position: relative;
  width: 100%;
  max-width: 52rem;
  max-height: 92vh;
  overflow: auto;
  background: var(--ct-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--lab-shadow-2);
}

.lab_sb_bild_kasten h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }

.lab_sb_bild_kasten img {
  display: block;
  max-width: 100%;
  max-height: 74vh;
  margin: 0 auto;
  border: var(--lab-border);
  border-radius: 10px;
  background: var(--div-color);
}

.lab_sb_bild_kasten p {
  margin: 0.7rem 0 0;
  text-align: center;
  font-family: var(--lab-mono);
  font-size: 0.85rem;
}

.lab_sb_bild_x {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.3rem 0.5rem;
}

/* ------------------------------------------------------------------
   Nachfrage-Dialog (statt Browser-Dialog)
   ------------------------------------------------------------------ */
.lab_sb_frage {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.lab_sb_frage[hidden] { display: none; }

.lab_sb_frage_kasten {
  width: 100%;
  max-width: 26rem;
  background: var(--ct-color);
  color: var(--blk-color);
  border: var(--lab-border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  box-shadow: var(--lab-shadow-2);
}
.lab_sb_frage_kasten h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.lab_sb_frage_kasten p { margin: 0 0 0.9rem; }
.lab_sb_frage_reihe {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}