/* ===== RESPONSIVE-SCHICHT (Handy + 10"-Tablet) =====
 * Wird als LETZTE Stilvorlage geladen. Jede Regel hier steht in einer Media-Query — am
 * Desktop mit Maus greift keine davon, die Desktop-Ansicht bleibt Pixel fuer Pixel gleich.
 *
 * Drei Achsen:
 *   pointer: coarse      Finger statt Maus — Tippziele, Schriftgroesse in Feldern.
 *                        Gilt fuer Handy UND Tablet, egal wie breit (das 10"-Tablet hat
 *                        800px im Hochformat und fiel durch die alte 768px-Grenze).
 *   769px – 1024px       Tablet-Layout: schmale Leiste, Menue als Overlay, gestapelte Splits.
 *   <= 640px             Handy: Tabellen werden Karten (data-label aus responsive-tables.js).
 */

/* ---------- Touch: Tippziele und Felder ---------- */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding-left: 0.8rem; padding-right: 0.8rem; }
  .btn-xs { min-height: 36px; padding-left: 0.6rem; padding-right: 0.6rem; }
  .btn-link { min-height: 36px; display: inline-flex; align-items: center; }
  .tab-btn { min-height: 44px; }
  .pager-btn { min-width: 40px; height: 40px; }
  .pager-ellipsis { line-height: 40px; }
  .nav-item { padding-top: 0.75rem; padding-bottom: 0.75rem; }

  /* 16px verhindert das automatische Hineinzoomen von iOS/Android beim Antippen eines Feldes */
  input[type="text"], input[type="number"], input[type="date"], input[type="email"],
  input[type="url"], input[type="tel"], input[type="search"], input[type="password"],
  input:not([type]), select, textarea {
    font-size: 16px; min-height: 44px;
  }
  .search-bar { min-height: 44px; }
  /* Zaehlen in der Inventur: +/- muessen mit dem Daumen sicher treffen */
  .qty-stepper .btn { min-width: 44px; min-height: 44px; justify-content: center; font-size: 1.1rem; }
  .search-bar input { min-height: 0; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; min-height: 22px; }

  /* Hover-Effekte bleiben am Touchgeraet sonst nach dem Tippen "haengen" */
  .kpi-card:hover { border-color: var(--color-border); box-shadow: var(--shadow); }
  .kpi-card:active { border-color: var(--color-primary); }
}

/* ---------- Tablet (769px – 1024px) ---------- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Das Menue: schmale Icon-Leiste, das Hamburger-Symbol klappt es MIT Beschriftung als Overlay
     auf. Vorher war die Leiste fest auf 60px gesperrt — der Ausklapp-Knopf drehte nur seinen
     Pfeil, die Beschriftung kam nie (.tablet-expanded setzte kein Code). */
  .sidebar-toggle { display: flex; }
  #sidebarCollapseBtn { display: none; }
  .sidebar.open { width: var(--sidebar-width); box-shadow: 4px 0 24px rgba(0,0,0,0.25); }
  .sidebar.open .sidebar-logo-text,
  .sidebar.open .nav-label { display: inline; }
  .sidebar.open .nav-section { display: block; }
  .sidebar.open .nav-badge:not(.hidden) { display: inline-block; }
  .sidebar.open .nav-item { justify-content: flex-start; padding-left: 1.2rem; padding-right: 1.2rem; }
  .sidebar.open .nav-item.active { padding-left: calc(1.2rem - 3px); }
  .sidebar.open .nav-icon { width: 1.3rem; }
  .main, .main.sidebar-collapsed { margin-left: 60px; }

  /* Kopfzeile: Platz fuer Suche und Knoepfe */
  .topbar { padding: 0 1rem; }
  #topbarUser { display: none; }
  .search-bar--global { max-width: 220px; }
  .content { padding: 1.25rem; }

  /* Formular + Uebersicht nebeneinander passt erst ab ~1000px Inhalt — vorher blieben der
     Uebersicht 144px (Entnahme bei 800px) */
  .split-layout { grid-template-columns: minmax(0, 1fr); }

  /* Tabellen: kompakter, Kopfzeilen duerfen umbrechen — spart bis zu einem Drittel Breite */
  th { white-space: normal; padding: 0.55rem 0.6rem; }
  td { padding: 0.6rem 0.6rem; }

  .detail-modal-panel { width: 94vw; height: 90vh; }
  .modal-lg, .modal-xl { max-width: 94vw; }
}

/* Tablet quer (Touch, bis 1366px): Desktop-Layout, aber dichter — sonst scrollten Auftraege,
   Bedarf und Berichte um 40–180px seitlich, und der Entnahme blieben 464px fuer eine 640px-Tabelle.
   Nur bei Touch: ein Laptop mit Maus in derselben Breite behaelt die Desktop-Ansicht. */
@media (pointer: coarse) and (min-width: 1025px) and (max-width: 1366px) {
  th { white-space: normal; padding: 0.55rem 0.6rem; }
  td { padding: 0.6rem 0.6rem; }
  .split-layout { grid-template-columns: minmax(0, 1fr); }
  .pl-raster { grid-template-columns: minmax(0, 1fr) !important; }
  .pl-raster > .card:first-child { max-height: none !important; }
  .content { padding: 1.25rem; }
}

/* Tablet und Handy gemeinsam */
@media (max-width: 1024px) {
  /* Plantafel: "Noch nicht geplant" ueber die Tafel statt daneben — nebeneinander blieben der
     Wochentafel am Tablet keine 500px, sie scrollte doppelt so weit wie noetig */
  .pl-raster { grid-template-columns: minmax(0, 1fr) !important; }
  .pl-raster > .card:first-child { max-height: none !important; }
  .text-clamp { max-width: 14rem; }
}

/* ---------- Handy (<= 768px): Kopfzeile ---------- */
@media (min-width: 769px) {
  .topbar-btn-icon { display: none; }
}
@media (max-width: 768px) {
  /* Konto/Abmelden nur als Symbol — "Mein Konto" nahm ein Drittel der Kopfzeile */
  .topbar-btn-label { display: none; }
  #btnLogout { font-size: inherit; }
  #btnLogout::after { content: none; }
  .topbar-logout { padding: 0.35rem 0.6rem; }
  .topbar-logout svg { width: 1.1rem; height: 1.1rem; }
  /* Titel nimmt den Rest und kuerzt mit "…" — bei 360px passten Titel + drei Knoepfe sonst nicht
     und die Kopfzeile schob die ganze Seite auf 373px */
  .topbar-left { flex: 1 1 auto; min-width: 0; gap: 0.5rem; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .topbar-right { flex-shrink: 0; }
  .topbar-right .btn { padding-left: 0.55rem; padding-right: 0.55rem; }
  .chart-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .chart-grid > * { min-width: 0; }
  #topbarUserArea { display: flex; gap: 0.4rem; }

  /* Knoepfe brechen lieber um, als aus ihrer Karte zu ragen (Eingangskorb, lange Aktionen) */
  .btn { white-space: normal; max-width: 100%; text-align: center; }
  .page-header h1 { font-size: 1.2rem; }
  /* Kopf untereinander: einige Seiten setzen align-items:center inline — in Spaltenrichtung
     zentrierte das den Titel (Buero) */
  .page-header { align-items: stretch !important; }
  /* Aktionsknoepfe im Seitenkopf fuellen ihre Zeile gleichmaessig statt zu flattern */
  .page-header > div:last-child > .btn, .page-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .card { padding: 1rem; }
  .modal-body { padding: 1rem; }
  .detail-modal-body { padding: 1rem; }
  .detail-modal-header { padding: 0.85rem 1rem; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
  .filter-row .search-bar { max-width: none; }
}

/* ---------- Schmales Handy (<= 520px): Seiten-Einzelfaelle ---------- */
@media (max-width: 520px) {
  /* Meine Auftraege, "Was wurde gemacht?": Text ueber die ganze Breite, darunter Dauer | Pause,
     dann Eintragen. Nebeneinander blieb dem Text kaum ein Drittel der Zeile. */
  .mw-eintrag { grid-template-columns: 1fr 1fr !important; }
  .mw-eintrag > :first-child, .mw-eintrag > :last-child { grid-column: 1 / -1; }
  /* Meine Auftraege, Material: Hinweis ("bestellt (PO-…) — kommt ca. …") unter den Artikel statt in
     eine schmale rechte Spalte, wo er in vier Zeilen zerfiel; der Entnehmen-Knopf bleibt rechts */
  .mw-material-zeile { flex-wrap: wrap; row-gap: 0.2rem; }
  .mw-material-zeile > :first-child { flex: 1 1 12rem; min-width: 0; }
  .mw-material-zeile > span { flex: 1 1 100%; max-width: none !important; text-align: left !important; }
  .mw-material-zeile > .btn { margin-left: auto; }
}

/* ---------- Handy-Dialog (Bottom-Sheet, components.css <= 600px) ---------- */
@media (max-width: 600px) {
  /* Titel und Schliessen-Knopf in einer Zeile, der Griff schwebt darueber — vorher stand das ✕
     mittig UNTER dem Titel und kostete eine ganze Zeile */
  .modal-header { flex-direction: row; align-items: center; padding-top: 1.35rem; gap: 0.75rem; }
  .modal-header::before { position: absolute; top: 0.5rem; left: 50%; transform: translateX(-50%); margin: 0; }
  .modal { padding-bottom: env(safe-area-inset-bottom); }
  /* Spaltenkopf der Positionszeilen passt nicht mehr, sobald die Zeilen am Handy umbrechen
     (components.css, .item-rows <= 600px) — jedes Feld traegt dort ohnehin seinen Platzhalter */
  .item-rows-head { display: none !important; }
  .detail-modal-panel { width: 100vw; height: 100%; max-height: 100dvh; border-radius: 0; }
}

/* ---------- Tabellen als Karten (.rt-karten) ----------
 * Die Klasse setzt responsive-tables.js — am Handy fuer jede Tabelle ab drei Spalten, am Tablet
 * hochkant nur fuer breite Tabellen ab sieben Spalten. Am Desktop wird sie nie gesetzt; darum
 * stehen diese Regeln ohne Media-Query. */
.table-wrapper:has(> table.rt-karten) { border: none; overflow: visible; border-radius: 0; }
.table-wrapper:has(> table.rt-karten)::after { display: none; }
table.rt-karten, table.rt-karten > tbody { display: block; width: 100%; }
/* display:block ist noetig: overflow greift nicht an einer table-header-group — der versteckte
   Kopf zaehlte sonst weiter zur Seitenbreite (360px-Handy: 48px seitlicher Ueberhang) */
table.rt-karten > thead {
  display: block; position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
table.rt-karten > tbody > tr {
  display: block; margin-bottom: 0.6rem; padding: 0.55rem 0.85rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
table.rt-karten > tbody > tr:last-child { margin-bottom: 0; }
/* Zwei Spalten je Zelle: Beschriftung links (fest 38 %), Wert rechts in eigener Spalte. Lange
   Werte brechen in IHRER Spalte um, mehrere Elemente (Badge + Text) bleiben beieinander. */
table.rt-karten > tbody > tr > td {
  display: block; position: relative; padding: 0.3rem 0 0.3rem 40%;
  border: none; text-align: left; min-width: 0; min-height: 1.9rem; overflow-wrap: anywhere;
}
table.rt-karten > tbody > tr > td::before {
  content: attr(data-label); position: absolute; left: 0; top: 0.4rem; width: 37%;
  font-size: 0.72rem; font-weight: 600; line-height: 1.3;
  color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em;
}
/* Ohne Beschriftung (Aktionsspalte): volle Breite, rechtsbuendig */
table.rt-karten > tbody > tr > td[data-label=""] { padding-left: 0; text-align: right; }
table.rt-karten > tbody > tr > td[data-label=""]::before { content: none; }
table.rt-karten > tbody > tr > td:empty,
table.rt-karten > tbody > tr > td[data-leer]:not(:first-child):not(:only-child) { display: none; }

/* Erste Spalte = Titel der Karte (Nummer, Name, Datum) */
table.rt-karten > tbody > tr > td:first-child {
  padding-left: 0; text-align: left; font-weight: 600; font-size: 0.95rem;
  padding-bottom: 0.4rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--color-border);
}
table.rt-karten > tbody > tr > td:first-child::before { content: none; }
/* Leere erste Spalte (Inventur: Lagerplatz steht in der Gruppenzeile) — dann ist die zweite der Titel */
table.rt-karten > tbody > tr > td:empty:first-child + td {
  padding-left: 0; font-size: 0.95rem;
  padding-bottom: 0.4rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--color-border);
}
table.rt-karten > tbody > tr > td:empty:first-child + td::before { content: none; }

/* Leer-/Gruppenzeilen ueber die ganze Breite (colspan) */
table.rt-karten > tbody > tr:has(> td:only-child) { padding: 0.5rem 0.75rem; }
table.rt-karten > tbody > tr > td:only-child { display: block; text-align: center; border-bottom: none; margin: 0; padding: 0.4rem 0; font-weight: 500; }

/* Inventur: Lagerplatz-Kopf als kompakte Leiste (Code links, Knoepfe rechts) ueber seinen Artikeln */
table.rt-karten > tbody > tr.inventur-loc-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 1rem; background: var(--color-bg); box-shadow: none;
}
table.rt-karten > tbody > tr.inventur-loc-header.loc-confirmed { background: var(--color-success-light); }
table.rt-karten > tbody > tr.inventur-loc-header > td {
  padding: 0 !important; margin: 0; border: none; background: transparent !important; min-height: 0;
}

/* Gefaerbte Zeilen (Meldebestand, leer, frei) faerben die Karte statt jede Zelle */
table.rt-karten > tbody > tr.row-low { background: var(--color-warning-light); }
table.rt-karten > tbody > tr.row-empty { background: var(--color-danger-light); }
table.rt-karten > tbody > tr.location-free { background: var(--color-success-light); }
table.rt-karten > tbody > tr.row-low > td,
table.rt-karten > tbody > tr.row-empty > td,
table.rt-karten > tbody > tr.location-free > td { background: transparent !important; }

/* Felder und Knoepfe in Kartenzellen nicht auf Inhaltsbreite schrumpfen lassen */
table.rt-karten > tbody > tr > td > input:not([type="checkbox"]):not([type="radio"]),
table.rt-karten > tbody > tr > td > select { width: 100%; max-width: 100%; }
table.rt-karten .text-clamp { max-width: none; }

.card table.rt-karten > tbody > tr { box-shadow: none; }
/* Plantafel am Handy als Agenda: eine Karte je Monteur, darin seine Tage. Die feste
   Tafelbreite (inline 900px) wuerde sonst die ganze Seite seitlich verschieben. */
table.rt-karten.pl-tafel { min-width: 0 !important; table-layout: auto !important; }
table.rt-karten.pl-tafel > tbody > tr > td { padding-left: 0; }
table.rt-karten.pl-tafel > tbody > tr > td::before { position: static; display: block; width: auto; margin-bottom: 0.3rem; }

/* Tablet hochkant: Karten im Zweierraster statt einer langen Spalte */
@media (min-width: 641px) {
  table.rt-karten > tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
  table.rt-karten > tbody > tr { margin-bottom: 0; }
  table.rt-karten > tbody > tr:has(> td[colspan]) { grid-column: 1 / -1; }
}

/* ---------- Handy (<= 640px) ---------- */
@media (max-width: 640px) {
  /* Feste Zweierraster (inline, z. B. Management, Fahrzeugakte, Besuch planen) untereinander.
     Per innerHTML gesetzt steht "columns:1fr", per style.cssText "columns: 1fr" — beides abfangen. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }

  .text-clamp { max-width: 100%; }
  /* Filterzeilen untereinander und volle Breite. Viele Seiten setzen Breite und Ausrichtung
     inline (style="width:150px", align-items:center) — das schlaegt nur !important. */
  .filter-row { flex-direction: column; align-items: stretch !important; gap: 0.5rem; }
  .filter-row > input, .filter-row > select, .filter-row > .search-bar,
  .filter-row > div > input, .filter-row > div > select {
    width: 100% !important; max-width: none !important; min-width: 0 !important;
  }
  .filter-row > .btn, .filter-row > button { align-self: flex-start; }
  .filter-row > label { align-self: flex-start; }
}