/* TIKOS Listen (2.43.0) - ausschließlich scoped .tikos-lists-* Regeln, keine globalen Selektoren.
   Orientiert an public/tikos-import.css (gleiches Karten-/Formularraster wie der bestehende
   RUESS-Hub-Stil: weiße Karten, abgerundete Container, kompakte Formulare, RUESS-Grün-Akzent).
   UI/PDF-Nachbesserung 2.43.0: Ergebnisdarstellung als Karten-/Listenlayout statt breiter
   13-Spalten-Tabelle (Abschnitt 2), damit die Vorschau nie horizontal gescrollt werden muss. */

.tikos-lists-page{display:grid;gap:18px;max-width:1580px;margin:0 auto;}
.tikos-lists-card{margin:0;}
.tikos-lists-card-title{margin:0 0 4px;font-size:13px;font-weight:800;color:#232a27;text-transform:uppercase;letter-spacing:.03em;}

/* --- Filter (Abschnitt 5): gleichmäßige Breiten, klare Ausrichtung, sauberer Umbruch --- */
.tikos-lists-filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px 16px;
  margin-top:12px;
}
.tikos-lists-filter-grid label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#5b6260;min-width:0;}
.tikos-lists-filter-grid label small{font-weight:600;text-transform:none;color:#8a9188;}
.tikos-lists-filter-grid input{
  font-size:13px;
  width:100%;
  min-width:0;
  padding:8px 10px;
  border:1px solid #dfe4de;
  border-radius:8px;
  background:#fff;
}
.tikos-lists-filter-grid input:focus-visible{outline:2px solid #7ac74a;outline-offset:1px;}
/* 2.43.5: Größen-Dropdown im selben Look wie die Eingabefelder (nur innerhalb der Filterkarte). */
.tikos-lists-filter-grid select{
  font-size:13px;
  width:100%;
  min-width:0;
  padding:8px 10px;
  border:1px solid #dfe4de;
  border-radius:8px;
  background:#fff;
}
.tikos-lists-filter-grid select:focus-visible{outline:2px solid #7ac74a;outline-offset:1px;}

/* UI-Polishing 2.43.1: "Gruppieren nach" und "Infotext anzeigen" teilen sich jetzt eine
   gemeinsame, kompakte Werkzeugzeile statt zwei getrennter, vertikal gestapelter Blöcke
   (Punkte 3/5) - auf Desktop nebeneinander, bricht auf schmaleren Breiten sauber um. */
.tikos-lists-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 20px;
}
.tikos-lists-group-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
}
.tikos-lists-group-label{font-weight:800;color:#232a27;text-transform:uppercase;font-size:11px;letter-spacing:.03em;}

.tikos-lists-pill-group{display:flex;gap:8px;flex-wrap:wrap;}
.tikos-lists-pill{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border,#e3e7e4);
  border-radius:999px;
  padding:6px 14px;
  font-size:12px;
  font-weight:700;
  color:#5b6260;
  cursor:pointer;
  background:#fafbfa;
}
.tikos-lists-pill input{position:absolute;opacity:0;width:0;height:0;}
.tikos-lists-pill.is-active,
.tikos-lists-pill:has(input:checked){background:#e9f5df;border-color:#bfe3a0;color:#2f6d1f;}
.tikos-lists-pill:has(input:focus-visible){outline:2px solid #7ac74a;outline-offset:2px;}

/* Punkt 3: "Infotext anzeigen" als kompakter Inline-Toggle mit kleinem Icon statt einer isoliert
   wirkenden einzelnen Checkbox-Zeile - visuell ein kleiner Schalter, kein eigener Block. */
.tikos-lists-toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px 5px 6px;
  border:1px solid var(--border,#e3e7e4);
  border-radius:999px;
  background:#fafbfa;
  font-size:12.5px;
  font-weight:700;
  color:#5b6260;
  cursor:pointer;
  white-space:nowrap;
}
.tikos-lists-toggle input{position:absolute;opacity:0;width:0;height:0;}
.tikos-lists-toggle-icon{font-size:12px;color:#8a9188;line-height:1;}
.tikos-lists-toggle-track{
  position:relative;
  width:26px;
  height:15px;
  border-radius:999px;
  background:#d7ddd0;
  transition:background .15s ease;
  flex:0 0 auto;
}
.tikos-lists-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#fff;
  transition:left .15s ease;
}
.tikos-lists-toggle:has(input:checked){background:#e9f5df;border-color:#bfe3a0;color:#2f6d1f;}
.tikos-lists-toggle:has(input:checked) .tikos-lists-toggle-track{background:#7ac74a;}
.tikos-lists-toggle:has(input:checked) .tikos-lists-toggle-thumb{left:13px;}
.tikos-lists-toggle:has(input:focus-visible){outline:2px solid #7ac74a;outline-offset:2px;}

/* Punkt 2: Liste anzeigen/Drucken/PDF/Excel als kompakte, ruhige Aktionsleiste statt riesiger
   Vollbreiten-Balken - Ursache war die globale button{width:100%;padding:14px;margin-top:16px}-
   Basisregel (siehe public/style.css), die hier gezielt zurückgesetzt wird. */
.tikos-lists-actions-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px;}
.tikos-lists-actions-row button{
  width:auto;
  margin-top:0;
  padding:9px 18px;
  border-radius:10px;
  font-size:13px;
}

.tikos-lists-error{color:#a3271b;font-size:13px;margin-top:10px;}

/* --- KPI-Karten (Abschnitt 6): etwas kompakter --- */
.tikos-lists-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.tikos-lists-kpi{
  background:#fff;
  border:1px solid var(--border,#e3e7e4);
  border-radius:12px;
  padding:10px 14px;
  display:grid;
  gap:1px;
}
.tikos-lists-kpi strong{font-size:19px;color:#232a27;}
.tikos-lists-kpi span{font-size:11px;color:#7a8280;text-transform:uppercase;letter-spacing:.03em;}

.tikos-lists-result-card{overflow-x:hidden;}

/* --- Gruppen (Abschnitt 3/6): jede Gruppe ein eigener Kartenblock, ruhiger Ergebnisbereich --- */
.tikos-lists-group{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border,#eef1ec);}
.tikos-lists-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}

/* UI-Polishing 2.43.1 (Punkt 4): Kunde/Abteilung/Träger/Trägername/Lieferant nicht mehr als hoher
   vertikaler Block (eine Zeile je Feld), sondern als kompakte, horizontal fließende "Chips" in
   einer Zeile (Desktop) bzw. sauber umbrechend (Tablet/Mobile) - dieselbe Markup-Struktur wie
   zuvor (.tikos-lists-group-header-line je Feld), nur als flex-wrap-Zeile statt als Grid mit einer
   Zeile pro Feld gelayoutet. */
.tikos-lists-group-header{
  background:#e9f5df;
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:10px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:20px;
  row-gap:4px;
}
.tikos-lists-group-header-line{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-size:12.5px;
  line-height:1.3;
  min-width:0;
  max-width:100%;
}
.tikos-lists-group-header-label{
  font-weight:700;
  color:#5b7a3f;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.03em;
}
.tikos-lists-group-header-line-main .tikos-lists-group-header-label{font-size:10.5px;}
.tikos-lists-group-header-value{color:#232a27;font-weight:700;word-break:break-word;}
.tikos-lists-group-header-line-main .tikos-lists-group-header-value{font-size:14px;font-weight:800;}

/* Infotext (Abschnitt 3/4): eigene, dezente Info-Box unter dem Gruppenkopf statt Fließmüll in
   derselben Zeile - kleinerer Sekundärtext, sauberer Umbruch, begrenzte Breite, kein Überlauf. */
.tikos-lists-group-infobox{
  background:#f4f8ee;
  border:1px solid #d3e7c0;
  border-radius:10px;
  padding:9px 12px;
  margin-top:8px;
  max-width:100%;
  font-size:12.5px;
  line-height:1.5;
  color:#4a5148;
  white-space:pre-wrap;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.tikos-lists-group-infobox strong{
  display:block;
  font-size:10.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#5b7a3f;
  margin-bottom:3px;
}
.tikos-lists-group-infobox .tikos-lists-infobox-text{display:block;}
.tikos-lists-infobox-toggle{
  display:inline-block;
  margin-top:4px;
  border:none;
  background:none;
  padding:0;
  font-size:11.5px;
  font-weight:700;
  color:#2f6d1f;
  text-decoration:underline;
  cursor:pointer;
}
.tikos-lists-infobox-toggle:hover{color:#1f4d14;}

/* --- Positionen (kompakte Listen-/Tabellenoptik, Browser-Vorschau-Nachbesserung): jede Position
   ist eine durchgehende Zeile statt einer eigenständigen Karte. Kopfzeile und Positionen teilen
   sich dieselbe Spaltenaufteilung (--tikos-cols), dadurch bleiben Spalten ausgerichtet wie in
   einer Tabelle, ohne dass eine <table> mit fester Mindestbreite (= horizontaler Scroll) nötig
   wäre. Jede .tikos-lists-position ist display:contents - ihre Zellen reihen sich direkt als
   Grid-Items in .tikos-lists-positions ein; Zellen mit minmax(0, ...) und word-break sorgen
   dafür, dass lange Inhalte innerhalb der Spalte umbrechen statt die Breite zu sprengen. --- */
.tikos-lists-positions{
  --tikos-cols: minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr);
  display:grid;
  grid-template-columns:var(--tikos-cols);
  width:100%;
  max-width:100%;
}
.tikos-lists-col-head{
  padding:4px 10px 8px;
  font-size:10.5px;
  font-weight:700;
  color:#8a9188;
  text-transform:uppercase;
  letter-spacing:.03em;
  border-bottom:1px solid var(--border,#dfe4de);
  min-width:0;
}
.tikos-lists-position{display:contents;}
.tikos-lists-position:hover > .tikos-lists-cell{background:#f6f9f4;}
.tikos-lists-cell{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1px;
  min-width:0;
  padding:9px 10px;
  border-bottom:1px solid var(--border,#eef1ec);
  font-size:12.5px;
  color:#3f463f;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.tikos-lists-cell-primary{font-weight:700;color:#232a27;}
.tikos-lists-cell-artikel .tikos-lists-cell-primary{font-weight:800;font-size:13px;}
.tikos-lists-cell-secondary{color:#5b6260;font-size:12px;}
.tikos-lists-cell-line{font-weight:600;}
.tikos-lists-cell-change{color:#5b6f0c;}
.tikos-lists-cell-line small{font-weight:700;color:#8a9188;text-transform:uppercase;font-size:9.5px;letter-spacing:.02em;margin-right:3px;}
.tikos-lists-cell-status{align-items:flex-start;}

.tikos-lists-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  padding:3px 11px;
  border-radius:999px;
  background:#eceff0;
  color:#5b6260;
  white-space:normal;
  word-break:break-word;
}
.tikos-lists-status.geliefert{background:#e9f5df;color:#2f6d1f;}
.tikos-lists-status.teilgeliefert{background:#fff3df;color:#9a6b12;}
.tikos-lists-status.bestellt{background:#e6eef8;color:#2b5f9e;}
.tikos-lists-status.nicht-bestellt{background:#fbe4e1;color:#a3271b;}

/* Kommissionierstatus einer konkreten Reservierung (2.44.8: nur noch "In Arbeit") - dezent und in
   der bestehenden Pillen-Optik der Statusspalte, direkt unter dem unveränderten TIKOS-Bestellstatus. */
.tikos-lists-kom{display:flex;flex-direction:column;gap:1px;margin-top:5px;padding:4px 9px;border-radius:9px;font-size:11px;line-height:1.35;}
.tikos-lists-kom.is-active{background:#e8f0f8;color:#24527a;}
.tikos-lists-kom-label{font-weight:700;}
.tikos-lists-kom-meta{opacity:.85;}

.tikos-lists-empty{color:#7a8280;padding:12px 0;}

/* --- Performance-Hotfix 2.43.0: Client-Pagination der Browser-Vorschau (Abschnitt 5) - die
   vollständigen Daten bleiben geladen (KPIs/Exporte unverändert), nur das DOM zeigt jeweils
   eine Seite der bereits geladenen Gruppen/Rows. --- */
.tikos-lists-pagination{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border,#eef1ec);
  font-size:12.5px;
  color:#5b6260;
}
.tikos-lists-pagination-size{display:flex;align-items:center;gap:6px;font-weight:600;}
.tikos-lists-pagination-size select{padding:5px 8px;border:1px solid #dfe4de;border-radius:6px;font-size:12.5px;}
.tikos-lists-pagination-nav{display:flex;align-items:center;gap:10px;}
.tikos-lists-pagination-nav button{width:auto;margin-top:0;padding:6px 14px;border-radius:8px;font-size:12.5px;}
.tikos-lists-pagination-nav button:disabled{opacity:.5;cursor:not-allowed;}

/* --- Responsive Umbruch (Browser-Vorschau-Nachbesserung): unterhalb bestimmter Breiten reicht
   Platz nicht mehr für 8 nebeneinanderliegende Spalten. Statt horizontal zu scrollen, reduziert
   sich einfach die Spaltenzahl des Grids - dieselben 8 Kopf- und Zellen-Einträge pro Position
   brechen dadurch automatisch auf 2 bzw. 4 Zeilen um (Reihenfolge bleibt: Artikel, Größe/Menge,
   Farbe, Lieferant, Lager/gekürzt, Res.-Datum, Bestellung, Status) - die Kopfzeile bricht auf
   dieselbe Weise mit um, sodass die Zuordnung Spaltenname -> Wert erhalten bleibt. */
@media (max-width: 1100px){
  .tikos-lists-positions{grid-template-columns:repeat(4, minmax(0,1fr));}
  .tikos-lists-col-head{border-bottom:none;padding-bottom:2px;}
}
@media (max-width: 640px){
  .tikos-lists-positions{grid-template-columns:repeat(2, minmax(0,1fr));}
}

/* 2.59.1: offener TIKOS-Austausch. */
.tikos-lists-austausch{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:999px;background:#fdecea;border:1px solid #f5c2bd;color:#b42318;font-size:12px;font-weight:600;}

@media print{
  body[data-view="tikosLists"] #appSidebar,
  body[data-view="tikosLists"] .app-page-hero,
  body[data-view="tikosLists"] .sidebar-toggle,
  body[data-view="tikosLists"] .tikos-lists-filter-card,
  body[data-view="tikosLists"] .tikos-lists-options-card,
  body[data-view="tikosLists"] .tikos-lists-actions-row,
  body[data-view="tikosLists"] .tikos-lists-pagination{
    display:none!important;
  }
  body[data-view="tikosLists"] .tikos-lists-result-card{
    overflow-x:visible;
    border:none;
    box-shadow:none;
    padding:0;
  }
  /* Druckansicht (Abschnitt 8): kompakter Druckstil, keine Steuerelemente (mehr-anzeigen-
     Umschalter macht im Ausdruck keinen Sinn - der Infotext wird dafür beforeprint vollständig
     ausgeklappt, siehe public/tikos-lists.js). */
  body[data-view="tikosLists"] .tikos-lists-positions{
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  body[data-view="tikosLists"] .tikos-lists-cell{
    padding:5px 8px;
    break-inside:avoid;
  }
  body[data-view="tikosLists"] .tikos-lists-group{
    break-inside:avoid-page;
    margin-bottom:14px;
    padding-bottom:10px;
  }
  body[data-view="tikosLists"] .tikos-lists-infobox-toggle{display:none;}
  body[data-view="tikosLists"] .tikos-lists-group-header{padding:8px 10px;}
}