/* Seitenvorlage für alle App-Seiten außerhalb des Projekts (Projektliste, Gerätebibliothek,
   Inventar mit Unterseiten, Dokumente, Einstellungen). Eine Quelle für Maße und Abstände:

     Titelzeile   56 px  (shell.css, header.app-topbar)
     Toolbar      48 px  .page-toolbar  – feste Slots, siehe Toolbar-Vertrag unten
     Inhalt             .page-main     – volle Breite, 16 px oben, 24 px seitlich
     Zähler             .page-status   – immer links über der Tabelle („12 von 40 …“)
     Steuerelemente 32 px (Buttons, Auswahl, Suche, Segmente), Schrift 12.5 px
     Tabellenzeile  36 px .page-table / .page-tr, Kopf 32 px, Zeilenmenü (⋮) immer ganz rechts

   Seiten binden diese Datei nach shell.css/components.css ein und bauen ihre Toolbar nur aus
   den Klassen hier; seitenspezifische Stylesheets regeln nur noch Spalten und Inhalte. */

:root {
  --page-pad-x: 24px;
  --page-toolbar-min: 48px;
  --page-toolbar-h: 48px; /* tatsächliche Höhe, bei Umbruch gesetzt von js/toolbar-fit.js */
  --page-ctl-h: 32px;
  --page-row-h: 36px;
  --page-fs: 12.5px;
}

/* ============ TOOLBAR-VERTRAG ============
   Jede Seite füllt nur diese Slots (direkte Kinder von .page-toolbar); fehlt ein Slot, bleibt
   nichts leer. Die Reihenfolge erzwingt CSS (order), egal wie das Markup sortiert ist:

     links   .tb-primary  genau eine Primäraktion (.btn-primary), daneben höchstens Nebenaktionen (.pt-btn)
             .tb-status   Status-/Bereichssegment (.pt-seg)
             .tb-filters  Filter als Dropdowns mit Icon (.pt-select) und Filter-Knöpfe – keine zweite Filterzeile
     rechts  .tb-view     Sortierung und Ansicht-Umschalter
             .tb-search   Suche (.pt-search)
             .tb-commit   Abschluss-Aktionen (Speichern, Drucken, Abschließen) und ⋯-Menü

   Eine Primärtaste pro Bild: steht die Primäraktion rechts (Speichern/Drucken), bleibt
   .tb-primary leer bzw. enthält nur .pt-btn. Alle Elemente sind 32 px hoch.
   Passt nicht alles in eine Zeile, bricht die rechte Gruppe als Ganzes in eine zweite Zeile
   um (nie ein einzelnes Wort, nie waagrechtes Scrollen der Seite). */
.page-toolbar {
  position: sticky; top: var(--topbar-h); z-index: 9;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-height: var(--page-toolbar-min); padding: 8px var(--page-pad-x);
  background: var(--bg-chrome); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.page-toolbar > .tb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; flex-shrink: 0; min-width: 0; max-width: 100%; }
.tb-primary { order: 1; }
.tb-status { order: 2; }
.tb-filters { order: 3; }
.page-toolbar::before { content: ''; order: 4; flex: 1 1 0; min-width: 4px; } /* Trenner links | rechts */
.tb-view { order: 5; }
/* Suche: Grundmaß 140 px, wächst bis 240 px – so bricht die Zeile erst um, wenn nicht einmal die schmale Suche passt. */
.page-toolbar > .tb-search { order: 6; flex: 1 1 140px; min-width: 140px; max-width: 240px; }
.tb-search .pt-search { width: 100%; max-width: 240px; }
.tb-commit { order: 7; }
.tb-primary + .tb-status, .tb-status + .tb-filters { margin-left: 4px; }
.page-toolbar [hidden], .page-subbar [hidden], .page-toolbar[hidden] { display: none !important; }
.page-toolbar-note { font-size: 12px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Primärtaste in der Toolbar: Verlauf ja, Leuchten nein – sie soll führen, nicht schreien.
   Deaktiviert eindeutig grau (z. B. „Speichern“ ohne Änderungen). */
.page-toolbar .btn-primary { box-shadow: none; }
.page-toolbar .btn-primary:hover:not(:disabled) { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45); }
.page-toolbar .btn-primary:disabled, .page-main .btn-primary:disabled {
  opacity: 1; background: var(--bg-raised-2); color: var(--text-tertiary); border-color: var(--border-strong); box-shadow: none;
}

/* Kontextleiste unter der Toolbar – nur für Mehrfachauswahl, nie für Filter. */
.page-subbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 44px; padding: 6px var(--page-pad-x);
  border-bottom: 1px solid var(--border); background: var(--bg-black);
}

/* ============ STEUERELEMENTE (32 px) ============ */
/* Buttons: .btn aus style.css auf Toolbar-Maß gebracht; .pt-btn = ruhiger Rahmen-Button. */
.page-toolbar .btn, .page-subbar .btn, .page-main .btn, .plist-dialog .btn,
.pt-btn {
  height: var(--page-ctl-h); padding: 0 12px; gap: 7px;
  border-radius: var(--radius-sm); font-size: var(--page-fs); font-weight: 600; white-space: nowrap;
}
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary);
  font-family: inherit; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.pt-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); }
.pt-btn.is-on, .pt-btn[aria-pressed="true"] { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); background: var(--accent-soft); }
.pt-btn:disabled { opacity: .45; cursor: not-allowed; }
.pt-btn.pt-danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.page-toolbar .btn svg, .page-subbar .btn svg, .page-main .btn svg, .pt-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.pt-btn:focus-visible, .pt-icon:focus-visible, .pt-seg button:focus-visible, .pt-seg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Quadratischer Icon-Button (⋯-Menü, Ansicht). */
.pt-icon { width: var(--page-ctl-h); padding: 0; }

/* Auswahlfeld mit Icon/Präfix: <label class="pt-select"><svg/>|<span>Präfix</span><select/></label> */
.pt-select {
  display: inline-flex; align-items: center; gap: 6px; height: var(--page-ctl-h); padding: 0 6px 0 10px; flex-shrink: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-tertiary); font-size: 12px;
}
.pt-select svg { width: 13px; height: 13px; flex-shrink: 0; }
.pt-select select {
  background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--page-fs);
  cursor: pointer; max-width: 150px;
}
.pt-select select option { background: var(--bg-raised); color: var(--text-primary); }
/* Filter-Dropdowns in der Toolbar mit fester Breite, damit alle Slots in eine Zeile passen. */
.tb-filters .pt-select select, .tb-view .pt-select select { width: 112px; text-overflow: ellipsis; }
.pt-select:focus-within { border-color: var(--accent); }
.pt-select.is-on { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }

/* Segmentgruppe: <div class="pt-seg"><button class="is-on">…</button>…</div> */
.pt-seg { display: inline-flex; gap: 2px; padding: 2px; flex-shrink: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.pt-seg button, .pt-seg a {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--page-ctl-h) - 6px); padding: 0 9px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pt-seg button svg, .pt-seg a svg { width: 14px; height: 14px; }
.pt-seg button:hover, .pt-seg a:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.pt-seg button.is-on, .pt-seg a.is-active { background: var(--accent-strong); color: #fff; }
.pt-seg .n { font-weight: 400; opacity: .7; }

/* Suche: <label class="pt-search"><svg/><input type="search"></label> */
.pt-search {
  display: inline-flex; align-items: center; gap: 8px; height: var(--page-ctl-h); width: 240px; padding: 0 10px; flex-shrink: 1; min-width: 140px;
  background: var(--bg-black); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text-tertiary);
}
.pt-search:focus-within { border-color: var(--accent); }
.pt-search svg { width: 13px; height: 13px; flex-shrink: 0; }
.pt-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text-primary); font: inherit; font-size: var(--page-fs);
}
.pt-search input::placeholder { color: var(--text-tertiary); }
.pt-search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* Zähler-Badge an einem Button ("Filter 2"). */
.pt-badge { min-width: 17px; padding: 0 5px; border-radius: 9px; background: var(--accent-grad); color: var(--accent-ink); font: 700 10.5px/17px var(--font-mono); text-align: center; }

/* ============ ⋯-MENÜ (Dropdown an einem Toolbar-Button) ============ */
.pt-menu-wrap { position: relative; display: inline-flex; }
.pt-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 220px; padding: 5px;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}
.pt-menu[hidden] { display: none; }
.pt-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px;
  background: none; border: none; border-radius: 6px; cursor: pointer; text-align: left;
  color: var(--text-primary); font: inherit; font-size: var(--page-fs); white-space: nowrap;
}
.pt-menu-item svg { width: 15px; height: 15px; color: var(--text-tertiary); flex-shrink: 0; }
.pt-menu-item:hover, .pt-menu-item:focus-visible { background: rgba(255,255,255,0.06); outline: none; }
.pt-menu-sep { height: 1px; margin: 4px 2px; background: var(--border); }

/* ============ INHALT ============ */
body.has-shell main.page-main { padding: 16px var(--page-pad-x) 48px; min-width: 0; }

/* Statuszeile über einer Liste ("Zeige 40 von 289"). */
.page-status { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 24px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); }
.page-status b { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============ DICHTE TABELLE (36 px je Zeile) ============
   Ein Rahmen, Zeilen durch Linien getrennt – keine Einzelkarten. Spalten legt jede Seite per
   grid-template-columns auf .page-thead/.page-tr fest. */
.page-table {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.page-table > :first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.page-table > :last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.page-thead, .page-tr { display: grid; align-items: center; column-gap: 16px; padding: 0 10px 0 14px; }
.page-thead {
  position: sticky; top: calc(var(--topbar-h) + var(--page-toolbar-h)); z-index: 2; height: 32px;
  background: var(--bg-navy-2); border-bottom: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-tertiary); letter-spacing: .02em; white-space: nowrap;
}
/* Kopfzellen erben immer Größe/Farbe des Kopfs, egal welche Spaltenklasse sie tragen. */
.page-table .page-thead > * { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: var(--text-tertiary); }
.page-tr {
  position: relative; min-height: var(--page-row-h);
  border-bottom: 1px solid var(--border); font-size: var(--page-fs); color: var(--text-secondary);
  font-variant-numeric: tabular-nums; transition: background .1s;
}
.page-tr:last-child { border-bottom: none; }
.page-tr:hover { background: var(--bg-raised); }
.page-tr:focus-within { background: var(--bg-raised); }
.page-tr > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-tr.is-selected { background: rgba(var(--accent-rgb), 0.07); box-shadow: inset 2px 0 0 var(--accent); }

/* ============ EINKLAPPEN (Stufen setzt js/toolbar-fit.js, solange die Zeile sonst umbräche) ============ */
.tb-fit-1 .tb-filters .pt-select select, .tb-fit-1 .tb-view .pt-select select { width: 84px; max-width: 84px; }
.tb-fit-1 .pt-seg button, .tb-fit-1 .pt-seg a { padding: 0 7px; }
.tb-fit-1 > .tb-search { flex-basis: 140px; max-width: 160px; }
/* 2: Tasten mit Symbol zeigen nur das Symbol, der Name steht im Tooltip und bleibt für Screenreader. */
.tb-fit-2 :is(.tb-primary, .tb-commit) :is(.btn, .pt-btn):has(> svg) { font-size: 0; gap: 0; width: var(--page-ctl-h); padding: 0; justify-content: center; }
.tb-fit-2 :is(.tb-primary, .tb-commit) :is(.btn, .pt-btn):has(> svg) > svg { width: 15px; height: 15px; }
.tb-fit-2 :is(.tb-primary, .tb-commit) :is(.btn, .pt-btn):has(> svg) > :not(svg) { display: none; }
/* 3: Suche als Lupe; beim Fokus klappt sie über die Nachbarn nach links auf. */
.page-toolbar.tb-fit-3 > .tb-search { flex: 0 0 var(--page-ctl-h); min-width: var(--page-ctl-h); height: var(--page-ctl-h); position: relative; }
.tb-fit-3 .tb-search .pt-search { width: var(--page-ctl-h); min-width: 0; padding: 0; justify-content: center; }
.tb-fit-3 .tb-search .pt-search input { flex: 0 0 0; width: 0; }
.tb-fit-3 .tb-search .pt-search:has(input:not(:placeholder-shown)) { border-color: rgba(var(--accent-rgb), 0.5); color: var(--accent); }
.tb-fit-3 .tb-search .pt-search:focus-within {
  position: absolute; right: 0; top: 0; z-index: 5; width: 240px; padding: 0 10px; justify-content: flex-start; background: var(--bg-black);
}
.tb-fit-3 .tb-search .pt-search:focus-within input { flex: 1 1 auto; }
/* 4: Zähler in Segmenten, Präfixe und Symbole vor Filtern entfallen (die leere Auswahl nennt den Filter selbst). */
.tb-fit-4 .pt-seg .n, .tb-fit-4 .pt-select > span, .tb-fit-4 .tb-filters .pt-select > svg { display: none; }

/* ============ SCHMAL ============ */
@media (max-width: 900px) {
  :root { --page-pad-x: 16px; }
}
@media (max-width: 720px) {
  :root { --page-pad-x: 12px; }
  .page-toolbar::before { display: none; }
  .page-toolbar > .tb-search { flex: 1 1 100%; max-width: none; }
  .pt-search { width: auto; flex: 1; }
  .page-thead { display: none; }
  .pt-seg { max-width: 100%; overflow-x: auto; }
}

/* ============ DATUMSFELD (js/date-input.js) ============ */
.date-field { position: relative; display: flex; align-items: center; }
.date-field input[data-date-input] { width: 100%; padding-right: 36px; font-variant-numeric: tabular-nums; }
.date-field-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  background: none; border: none; border-radius: 6px; color: var(--text-tertiary); cursor: pointer;
}
.date-field-btn:hover { color: var(--accent); background: rgba(255,255,255,0.05); }
.date-field-btn svg { width: 15px; height: 15px; }
.date-field-picker { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }

@media print {
  .page-toolbar, .page-subbar, .pt-menu { display: none !important; }
}