/* ============================================================
   PP Warehouse DB -- visual identity
   Reference world: warehouse asset tags, thermal barcode labels,
   vintage hifi front panels (brushed housings, amber dial glow,
   VU-meter green). The item ID is the one thing every physical
   piece in this business carries -- printed on a label, stapled to
   a device. The UI treats it the same way: a tag, not a table cell.
   ============================================================ */

@font-face {
  font-family: 'Big Shoulders Stencil';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/static/fonts/big-shoulders-stencil-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #efe7d3;
  --surface: #fbf7ec;
  --surface-2: #e4d9be;
  --ink: #211d16;
  --ink-muted: #7a7264;
  --accent: #bd5b1e;
  --accent-strong: #9c4715;
  --accent-ink: #fbf7ec;
  --accent2: #3e6357;
  --line: #cdbfa0;
  --danger: #9c3b2e;
  --shadow: rgba(33, 29, 22, 0.14);

  --font-display: 'Big Shoulders Stencil', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #17181a;
    --surface: #201f1d;
    --surface-2: #2b2a27;
    --ink: #ece3cf;
    --ink-muted: #a39b89;
    --accent: #e8873d;
    --accent-strong: #f2a868;
    --accent-ink: #1b1206;
    --accent2: #5fa491;
    --line: #3b3934;
    --danger: #e2685a;
    --shadow: rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme='light'] {
  color-scheme: light;
  --bg: #efe7d3;
  --surface: #fbf7ec;
  --surface-2: #e4d9be;
  --ink: #211d16;
  --ink-muted: #7a7264;
  --accent: #bd5b1e;
  --accent-strong: #9c4715;
  --accent-ink: #fbf7ec;
  --accent2: #3e6357;
  --line: #cdbfa0;
  --danger: #9c3b2e;
  --shadow: rgba(33, 29, 22, 0.14);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #17181a;
  --surface: #201f1d;
  --surface-2: #2b2a27;
  --ink: #ece3cf;
  --ink-muted: #a39b89;
  --accent: #e8873d;
  --accent-strong: #f2a868;
  --accent-ink: #1b1206;
  --accent2: #5fa491;
  --line: #3b3934;
  --danger: #e2685a;
  --shadow: rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Every link in this app already has a purpose-specific class (.wordmark, .btn,
   or is scoped under tbody) with its own explicit color -- no generic prose-link
   default needed, which also sidesteps specificity fights with those rules. */

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- barcode stripe motif ---------- */
.barcode-rule {
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 5px,
    var(--ink) 5px 6px,
    transparent 6px 11px,
    var(--ink) 11px 14px,
    transparent 14px 17px
  );
  opacity: 0.55;
}

/* ---------- header ---------- */
header.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  white-space: nowrap;
  align-items: baseline;
  gap: 0.4rem;
}
.wordmark .accent { color: var(--accent); }

.topbar-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.shop-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ---------- layout ---------- */
main { padding: 1.5rem; max-width: 1120px; margin: 0 auto; }
main.wide { max-width: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 1px 2px var(--shadow);
}
.table-card { padding: 0.75rem; }
.table-scroll { overflow-x: auto; }
/* Fuer Log-/Protokoll-Tabellen (Relist/Preisvorschlaege/Neulisting), die durch fehlende
   Aufraeum-Job in der Datenbank sonst unbegrenzt in die Seitenlaenge wachsen wuerden
   (Nutzerwunsch 2026-09-27) - begrenzt die Tabelle auf eine feste Hoehe mit eigenem
   vertikalen Scrollbalken, Kopfzeile bleibt beim Scrollen sichtbar. */
.table-scroll--log {
  max-height: 24rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.table-scroll--log thead th { position: sticky; top: 0; background: var(--surface); }
.label-preview-frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

/* ---------- theme toggle (rocker switch) ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font: inherit;
  color: var(--ink-muted);
}
.theme-toggle:hover { color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle-track {
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px var(--shadow);
}
.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform 0.2s ease;
  transform: translateX(0);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle-thumb { transform: translateX(16px); }
}
:root[data-theme='dark'] .theme-toggle-thumb { transform: translateX(16px); }
:root[data-theme='light'] .theme-toggle-thumb { transform: translateX(0); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--ink-muted); background: var(--surface-2); }
.btn.danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger); color: var(--accent-ink); }
.btn.small { padding: 0.2rem 0.6rem; font-size: 0.76rem; line-height: 1.25; }

.row-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; }

/* ---------- toolbar / inputs ---------- */
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }

input, select, textarea, button {
  font-family: var(--font-body);
}

.toolbar input, .toolbar select {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}

/* ---------- ledger table ----------
   Denser, full-width, ruled like a paper ledger / spreadsheet so more rows
   fit on screen -- ID and Aktionen stay fixed-width, Artikel takes the rest
   and truncates to one line (title attribute carries the full text). */
table { width: 100%; border-collapse: collapse; }
table.ledger { table-layout: fixed; min-width: 760px; }
thead th {
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 0.5rem 0.45rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
thead th:last-child { border-right: none; }
tbody td {
  padding: 0.2rem 0.65rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.25;
  vertical-align: middle;
}
tbody td:last-child { border-right: none; }
tbody tr:hover td { background: var(--surface-2); }
tbody a { text-decoration: none; color: var(--ink); }
tbody a:hover { color: var(--accent-strong); }
tr.row-clickable { cursor: pointer; }
tr.row-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.cell-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cell-truncate a { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Gegenstueck zu .cell-truncate: Zeilenumbruch statt Ellipsis, fuer Freitext-Spalten, bei
   denen der volle Inhalt direkt in der Tabelle lesbar sein soll (z.B. Defekt-Beschreibung in
   defekte_geraete/list.html), statt ihn hinter einem hover-Tooltip zu verstecken. */
.cell-wrap { white-space: normal; word-break: break-word; }

/* Macht die gesamte Zelle klickbar statt nur den Link-Text - Padding wandert vom td auf den
   Link, der die Zelle dadurch vollstaendig ausfuellt. */
td.cell-link { padding: 0; }
td.cell-link > a { display: block; padding: 0.2rem 0.65rem; }

/* ---------- defekte-geraete list: schmale Spalten fuer kurze Werte, Defekt-Spalte nimmt den
   Rest der Breite ein (table-layout: fixed auf .ledger, siehe oben) ---------- */
#defekte-geraete-table col.col-name { width: 13rem; }
#defekte-geraete-table col.col-lagerort { width: 7rem; }
#defekte-geraete-table col.col-teil { width: 6.5rem; }
#defekte-geraete-table col.col-actions { width: 11rem; }
/* tbody td ist app-weit vertical-align: middle (siehe oben) - bei einer zweizeiligen Zelle
   (Defekt oder ein langer Ersatzteil-Code wie "LG 3000 Series") wandern dadurch alle
   einzeiligen Zellen derselben Zeile in die vertikale Mitte der jetzt hoeheren Zeile statt an
   deren erste Zeile - sieht wie verrutschte Spalten aus. Hier auf top umgestellt, nicht
   app-weit, um den bewusst zentrierten Look anderer .ledger-Tabellen nicht anzutasten. */
#defekte-geraete-table tbody td { vertical-align: top; }

/* ---------- ebay-angebote: Artikel-Spalte nimmt den Rest der Breite ein (table-layout: fixed
   auf .ledger, siehe oben) - lange eBay-Titel bleiben per .cell-truncate einzeilig mit Tooltip,
   gleiches Prinzip wie bei den uebrigen .ledger-Tabellen dieser App. ---------- */
#ebay-angebote-table col.col-sku { width: 9rem; }
#ebay-angebote-table col.col-preis { width: 7rem; }
#ebay-angebote-table col.col-menge { width: 6rem; }
#ebay-angebote-table col.col-datum { width: 10rem; }
#ebay-angebote-table col.col-restzeit { width: 8rem; }
#ebay-angebote-table col.col-actions { width: 13rem; }

/* ---------- einzelstuecke: Lagerplatz/Datum/Auktion/Aktionen schmal, Bezeichnung nimmt den
   Rest der Breite ein (table-layout: fixed auf .ledger, siehe oben) - lange eBay-Titel bleiben
   per .cell-wrap vollstaendig lesbar statt abgeschnitten (analog zur Defekt-Spalte). ---------- */
.einzelstuecke-table col.col-bezeichnung { width: auto; }
.einzelstuecke-table col.col-lagerplatz { width: 7rem; }
.einzelstuecke-table col.col-datum { width: 8rem; }
.einzelstuecke-table col.col-auktion { width: 9rem; }
.einzelstuecke-table col.col-actions { width: 11rem; }

/* ---------- sortierbare Tabellen (app/static/sortable_table.js): Klick auf eine
   Spaltenueberschrift sortiert die Zeilen - generisch fuer jede table[data-sortable]. ---------- */
table[data-sortable] thead th:not([data-no-sort]) {
  cursor: pointer;
  user-select: none;
}
table[data-sortable] thead th:not([data-no-sort]):hover { color: var(--accent); }
table[data-sortable] thead th.sort-asc::after { content: " \25B2"; }
table[data-sortable] thead th.sort-desc::after { content: " \25BC"; }

/* ---------- versand (Packliste): Shop/DB-Nummer/Empfaenger schmal, Artikel nimmt den Rest der
   Breite ein - eBay-Auktionstitel sind lang und sollen komplett lesbar sein, nicht abgeschnitten
   (table-layout: fixed auf .ledger, siehe oben) ---------- */
#versand-table col.col-shop { width: 8rem; }
#versand-table col.col-dbnummer { width: 9rem; }
#versand-table col.col-empfaenger { width: 11rem; }
#versand-table col.col-actions { width: 9rem; }

/* ---------- handbuecher: Hersteller/Groesse/Status/Aktionen schmal, Modell(e) nimmt den Rest
   der Breite ein (table-layout: fixed auf .ledger, siehe oben) - Foto-Spalte traegt nur den
   Thumbnail-Button, die volle Ansicht oeffnet in der Lightbox (siehe unten). ---------- */
#handbuecher-table col.hb-col-foto { width: 4.5rem; }
#handbuecher-table col.hb-col-hersteller { width: 11rem; }
#handbuecher-table col.hb-col-groesse { width: 5rem; }
#handbuecher-table col.hb-col-anzahl { width: 5.5rem; }
#handbuecher-table col.hb-col-status { width: 10rem; }
#handbuecher-table col.hb-col-actions { width: 8rem; }
#handbuecher-table tbody td { vertical-align: middle; padding-top: 0.5rem; padding-bottom: 0.5rem; }
/* Bare <input>/<select> (siehe "input, select, textarea, button" oben) haben ohne eigene Regel
   nur die knappen Browser-Standardmasse - genau das vom Nutzer bemaengelte "zu klein". Gleiche
   Grosszuegigkeit wie .toolbar input/select, aber volle Zellenbreite statt fester Groesse, da
   die Spalte selbst schon die passende Breite vorgibt. */
#handbuecher-table td input[type="text"], #handbuecher-table td input[type="number"], #handbuecher-table td select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
}
#handbuecher-table .row-actions { flex-direction: column; align-items: stretch; }
#handbuecher-table .row-actions .btn { width: 100%; }

.hb-thumb-btn {
  display: block; width: 3.5rem; height: 3.5rem; padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); cursor: zoom-in; overflow: hidden;
}
.hb-thumb-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-thumb-btn:hover, .hb-thumb-btn:focus-visible { border-color: var(--accent); }

/* Natives <dialog> statt einer selbstgebauten Overlay-Div-Konstruktion - Fokus-Falle/Esc-zum-
   Schliessen kommen vom Browser kostenlos mit. ::backdrop ist ein eigener Pseudo-Baum, keine
   normale CSS-Vererbung von :root moeglich - Werte hier bewusst dupliziert. */
#handbuch-lightbox {
  max-width: min(92vw, 900px); max-height: 92vh; padding: 1rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink);
}
#handbuch-lightbox::backdrop { background: rgba(0, 0, 0, 0.75); }
#handbuch-lightbox img { display: block; max-width: 100%; max-height: 75vh; margin: 0.5rem auto 0; }
#handbuch-lightbox-label { text-align: center; }

/* ---------- configurable columns ----------
   Visibility toggled via a class on the persistent #items-table wrapper (not on the
   <table> itself, which gets replaced wholesale on search/filter) so hidden state
   survives htmx swaps and applies to infinite-scroll rows automatically. */
#items-table.hide-kategorie .col-kategorie,
#items-table.hide-hersteller .col-hersteller,
#items-table.hide-modell .col-modell,
#items-table.hide-farbe .col-farbe,
#items-table.hide-lagernummer .col-lagernummer,
#items-table.hide-status .col-status,
#items-table.hide-ankaufsdatum .col-ankaufsdatum,
#items-table.hide-verkaeufer .col-verkaeufer,
#items-table.hide-quelle .col-quelle,
#items-table.hide-einkaufspreis .col-einkaufspreis,
#items-table.hide-auktionsnummer_ebay .col-auktionsnummer_ebay,
#items-table.hide-einstelldatum .col-einstelldatum,
#items-table.hide-verkaufsdatum .col-verkaufsdatum {
  display: none;
}

.ebay-link { color: var(--accent-strong); }
:root[data-theme='dark'] .ebay-link { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ebay-link { color: var(--accent); }
}

/* Interner Link (kein target=_blank) auf eine Detailseite innerhalb dieser App - gleiche
   Optik wie .ebay-link, aber eigene Klasse, da es sich nicht um einen externen Link handelt. */
.geraetestamm-link { color: var(--accent-strong); }
:root[data-theme='dark'] .geraetestamm-link { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .geraetestamm-link { color: var(--accent); }
}

.col-picker { position: relative; }
.col-picker > summary {
  list-style: none;
  user-select: none;
}
.col-picker > summary::-webkit-details-marker { display: none; }
.col-picker[open] > summary { border-color: var(--accent); }
.col-picker-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--shadow);
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.col-picker-panel label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
  border-radius: 2px;
  cursor: pointer;
}
.col-picker-panel label:hover { background: var(--surface-2); }
.col-picker-panel input { accent-color: var(--accent); }

/* ---------- Merkmal-Wert-Mehrfachauswahl (geraetestamm/detail.html, kategorie_detail.html,
   merkmal_vorschlaege.js) - gleiches <details>/<summary>-Grundgeruest wie .col-picker, aber mit
   sichtbarem Dropdown-Pfeil (der bewusst schmucklose .col-picker-Trigger ist dafuer nicht
   gedacht - dort steht der Aktionsname selbst schon fuer eine Aufklapp-Fläche). ---------- */
.werte-picker { position: relative; display: inline-block; }
.werte-picker > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--accent);
  user-select: none;
}
.werte-picker > summary::-webkit-details-marker { display: none; }
.werte-picker > summary::after { content: "▾"; margin-left: 0.25rem; }
.werte-picker[open] > summary::after { content: "▴"; }

/* ---------- Gerätestamm-Suchpicker (items/_form_fields.html, geraetestamm_picker.js) ----------
   Inline-Trefferliste unterhalb des Suchfelds, kein Overlay wie .col-picker-panel - passt
   besser in den normalen Formular-Fluss. */
.picker-results {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 12rem;
  overflow-y: auto;
  background: var(--surface);
}
.picker-result {
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.picker-result:hover, .picker-result:focus { background: var(--surface-2); outline: none; }
.picker-result + .picker-result { border-top: 1px solid var(--line); }
/* Variante fuer den Nachfuell-Assistenten (app/ebay_angebote/) - Text + "Hinzufuegen"-Formular
   nebeneinander statt eines klickbaren Auswahl-Eintrags (kein cursor:pointer noetig). */
.picker-result--row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; cursor: default; }
.picker-selected {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.9rem;
}
.text-muted { color: var(--ink-muted); }
.text-danger { color: var(--danger); font-weight: 600; }

/* ---------- header settings dropdown ----------
   Gleiches native <details>/<summary>-Muster wie .col-picker (kein JS noetig), aber
   rechtsbuendig (sitzt am rechten Bildschirmrand) und als Link-/Aktions-Menue statt
   Checkbox-Filter gestaltet - jeder Eintrag navigiert weg oder sendet ein Formular ab,
   das Panel muss sich deshalb nie selbst per JS schliessen. */
.settings-menu { position: relative; }
.settings-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-menu > summary svg { width: 15px; height: 15px; flex-shrink: 0; }
.settings-menu[open] > summary { border-color: var(--accent); }
.settings-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px var(--shadow);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}
.settings-menu-panel a,
.settings-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-radius: 2px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.settings-menu-panel a:hover,
.settings-menu-panel button:hover { background: var(--surface-2); }
.settings-menu-panel form { margin: 0; }
.settings-menu-divider { height: 1px; background: var(--line); margin: 0.3rem 0.1rem; }

/* item ID rendered like a printed asset tag */
.id-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem 0.15rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-2);
  color: var(--ink);
  position: relative;
  white-space: nowrap;
}
.id-tag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--ink-muted);
  flex-shrink: 0;
}
tbody a .id-tag:hover, tbody tr:hover .id-tag { border-color: var(--accent); }
/* In der Ledger-Tabelle etwas kompakter als das grosse Tag auf Detail-/Formularseiten. */
tbody td .id-tag { padding: 0.08rem 0.45rem 0.08rem 0.35rem; }

/* Neuanlage: die ID steht noch nicht endgueltig fest - gestrichelt statt durchgezogen
   signalisiert "vorlaeufig", ohne eine zweite Farbe/Form-Sprache einzufuehren. */
.id-tag--preview {
  border-style: dashed;
  color: var(--ink-muted);
  background: transparent;
}
.id-tag--preview::before { border-style: dashed; }

/* ---------- forms ---------- */
form.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
form.form-grid label, .field-label {
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted); text-transform: uppercase;
}
form.form-grid input, form.form-grid select, form.form-grid textarea, .field-input {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  text-transform: none;
}
form.form-grid .full { grid-column: 1 / -1; }
.error { color: var(--danger); font-size: 0.8rem; font-weight: 600; }

/* ---------- item detail ---------- */
.detail-header {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.detail-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  margin: 0;
  text-transform: uppercase;
}
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem 1.5rem; margin: 0 0 1rem; }
.detail-grid .field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.detail-grid dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.detail-grid dd { margin: 0; font-size: 0.95rem; overflow-wrap: break-word; }

/* Zeilenweise Vorschau (ebay_listing/vorschau.html) - anders als .detail-grid (3-spaltiges
   Raster) steht hier jedes Feld auf einer eigenen, vollen Zeile: Label + Wert direkt
   nebeneinander statt Label über Wert. */
.zeilen-liste { margin: 0 0 1rem; }
.zeilen-liste .zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.zeilen-liste .zeile:last-child { border-bottom: none; }
.zeilen-liste dt {
  flex: 0 0 auto;
  min-width: 11rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.zeilen-liste dd { margin: 0; flex: 1 1 20rem; font-size: 0.95rem; overflow-wrap: break-word; }

/* Klick auf den Eintrag selbst (Feldwert, Artikel-Titel, ID) kopiert dessen Text in die
   Zwischenablage (siehe detail_copy.js) - Links (z.B. Auktionsnummer Ebay) bekommen diese
   Klasse bewusst nicht, die sollen ganz normal anklickbar/navigierbar bleiben. */
.copyable {
  cursor: pointer;
  position: relative;
  width: fit-content;
  border-radius: 2px;
}
.copyable:hover,
.copyable:focus-visible {
  color: var(--accent-strong);
}
.copyable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}
.copyable::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.3rem;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 5;
}
.copyable:hover::after,
.copyable:focus-visible::after {
  opacity: 1;
}
.copyable.copied::after {
  content: 'Kopiert!';
  background: var(--accent2);
  color: var(--accent-ink);
  opacity: 1;
}

/* ---------- module hub ---------- */
.modules-intro { margin-bottom: 0.5rem; }
.modules-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 0.3rem;
}
.modules-intro h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.1rem;
}

.module-station {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.4rem 1.2rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 1px 2px var(--shadow);
}

.station-badge {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.module-station h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
  color: var(--ink);
}

.module-station p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.45;
  flex: 1;
}

.station-status {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-muted);
  background: var(--surface-2);
}

.module-station.active {
  border-color: var(--accent2);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.module-station.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px var(--shadow);
}
.module-station.active .station-badge { color: var(--accent2); }
.station-status.status-active {
  color: var(--accent-ink);
  background: var(--accent2);
  border-color: var(--accent2);
}

.module-station.disabled {
  border-style: dashed;
  opacity: 0.62;
}
.module-station.disabled .station-badge { color: var(--ink-muted); }

/* ---------- Ankauf: Zahlung/Buchhaltung panels ----------
   Signature motif: the panel header reads like a torn receipt stub (dashed rule +
   punch-notches either side), echoing the id-tag's punch-hole and the barcode-rule
   already used elsewhere -- this is a purchase record, so it should look like one. */
.ankauf-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 800px) {
  .ankauf-columns { grid-template-columns: 1fr; }
}

.stub-header {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px dashed var(--line);
}
.stub-header::before, .stub-header::after {
  content: '';
  position: absolute;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}
.stub-header::before { left: -1.25rem; }
.stub-header::after { right: -1.25rem; }
.stub-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-muted);
}
.status-pill--warn { color: var(--accent-strong); border-color: var(--accent); }
.status-pill--ok { color: var(--accent-ink); background: var(--accent2); border-color: var(--accent2); }
.status-pill--error { color: var(--accent-ink); background: var(--danger); border-color: var(--danger); }

/* eBay-Abgleich (listing/list.html): ein Angebot kann mehrere Geraete umfassen (Kombi-/
   Sammelangebote), je eins pro Zeile mit eigenem Status/Uebernehmen-Button. */
.listing-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.listing-matches li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.copy-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.copy-field dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 8.5rem;
  flex-shrink: 0;
}
.copy-field dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  flex: 1;
  overflow-wrap: anywhere;
}
.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
}
.copy-btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.copied { color: var(--accent2); border-color: var(--accent2); }

.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
  margin: 0.8rem 0;
}
.screenshot-grid .shot {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-2);
}
.screenshot-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Gerätestamm-Fotogalerie (geraetestamm/detail.html) - eigenes Raster statt
   .screenshot-grid/.shot, da hier zusätzlich ein Löschen-Button je Foto sichtbar sein muss
   (.shot nutzt overflow:hidden auf einem quadratischen aspect-ratio-Container, ein Button
   darunter würde dort abgeschnitten). */
.foto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 0.6rem;
  margin: 0.8rem 0;
}
.foto-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
}
.foto-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.foto-card form { padding: 0.3rem; }
/* Foto-Wahlassistent (geraetestamm/detail.html) - Farbe/Fernbedienung je Foto, untereinander
   statt in einer Zeile (Karte ist mit min. 168px zu schmal fuer Input+Checkboxen+Button
   nebeneinander). Eigener Trennstrich zur Löschen-Zeile darunter (separate <form>) - trennt die
   Pflege-Aktion optisch von der destruktiven. */
.foto-tag-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-bottom: 1px solid var(--line);
}
.foto-card .foto-tag-form { padding-bottom: 0.5rem; }
.foto-tag-form input[type="text"] { width: 100%; }
/* .checkbox-label setzt bislang nur flex-direction/align-items/gap und verlässt sich auf ein
   umgebendes "form.form-grid label { display:flex }" (style.css weiter oben) - dieses Formular
   ist bewusst kein .form-grid (eigenes kompaktes Karten-Layout), die Klasse braucht ihr eigenes
   display:flex, sonst bleibt <label> beim Browser-Default (inline) und die beiden Checkbox-Zeilen
   rutschen nebeneinander statt untereinander (live gemeldeter Bug, 2026-09-24). */
.checkbox-label { display: flex; }
.foto-tag-form .checkbox-label { font-size: 0.85rem; }
/* eBay-Listing-Fotoauswahl (ebay_listing/vorschau.html) - Checkbox statt Löschen-Formular.
   .foto-select umschließt jetzt auch das Bild (nicht nur die Checkbox-Zeile), damit ein Klick
   aufs Bild denselben Haken setzt/entfernt wie ein Klick auf die Checkbox selbst - natives
   Label-Verhalten, kein JS nötig. */
.foto-select { display: block; cursor: pointer; }
.foto-select-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem;
}
/* Drag&Drop-Umsortierung (foto_reihenfolge.js im eBay-Listing-Assistenten, gleiches Prinzip
   fuer die reine Reihenfolge-Pflege am Geraetestamm ueber geraetestamm_foto_reihenfolge.js) -
   [data-foto-reihenfolge]/[data-geraetestamm-foto-reihenfolge] macht .foto-card draggable,
   .dragging markiert die gerade gezogene Karte. */
[data-foto-reihenfolge] .foto-card,
[data-geraetestamm-foto-reihenfolge] .foto-card { cursor: grab; }
[data-foto-reihenfolge] .foto-card.dragging,
[data-geraetestamm-foto-reihenfolge] .foto-card.dragging { opacity: 0.4; cursor: grabbing; }

/* Foto-Lightbox (Gerätestamm-Detailseite, foto_lightbox.js) - Klick/Enter auf ein Foto mit
   .foto-lightbox-trigger vergrössert es in einem Overlay. */
.foto-lightbox-trigger { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 100;
  cursor: zoom-out;
}
.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px var(--shadow);
}

.folder-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
  margin: 0.8rem 0;
  max-height: 260px;
  overflow-y: auto;
}
.folder-pick-grid label {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  display: block;
}
.folder-pick-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.folder-pick-grid input { position: absolute; top: 4px; left: 4px; accent-color: var(--accent); }
.folder-pick-grid label.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

/* ---------- shop picker ---------- */
.shop-pick { display: flex; flex-direction: column; gap: 0.6rem; }
.shop-pick button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.shop-pick button:hover { border-color: var(--accent); }
.shop-pick button.active { border-color: var(--accent); background: var(--surface-2); }
.shop-pick button.active::after { content: '\2713'; color: var(--accent); font-weight: 700; }

/* ---------- 2FA setup ----------
   Signature motif: the QR gets mounted like a printed asset tag being issued to a
   device -- dashed border + punch-notches, same language as .id-tag--preview and the
   Ankauf stub-header, so "pairing an authenticator" reads as one more tag in this
   business's world rather than a generic security-app QR block. */
.totp-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem;
  margin: 0.9rem 0 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  position: relative;
}
.totp-tag::before, .totp-tag::after {
  content: '';
  position: absolute;
  top: -5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
}
.totp-tag::before { left: 1.1rem; }
.totp-tag::after { right: 1.1rem; }
.totp-tag img {
  width: 176px;
  height: 176px;
  max-width: 100%;
  border-radius: 2px;
  background: #fff;
  padding: 8px;
}
.totp-tag-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.totp-code-input {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  text-align: center;
}
/* Kompakte Variante fuer den Sende-Button-Kontext (Ankauf-Detail, siehe .field-input) -
   schmaler und kleiner als die volle Setup-/Verify-Seiten-Eingabe. */
.totp-code-input--compact { width: 6.5rem; font-size: 1.1rem; }

/* ---------- auth screens (login / select-shop) ---------- */
.auth-shell {
  max-width: 400px;
  margin: 8vh auto 0;
}
.auth-shell .wordmark {
  font-size: 2.1rem;
  justify-content: center;
  margin-bottom: 0.35rem;
}
.auth-tagline {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 1.1rem;
}
.auth-shell .barcode-rule { margin-bottom: 1.4rem; }
.auth-shell .card { padding: 1.5rem; }
.auth-shell form.form-grid { grid-template-columns: 1fr; }
.auth-shell h1 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 1rem;
}

/* ---------- utility classes ----------
   Ersetzt Inline-style="..."-Attribute (CSP: style-src ohne 'unsafe-inline' braucht
   auschliesslich Klassen statt Inline-Styles, siehe CLAUDE.md). */
.hint { color: var(--ink-muted); font-size: 0.85rem; line-height: 1.4; margin: 0.5rem 0; }
.hint--tight { margin: -0.4rem 0 0.9rem; }
.hint--flush { margin: 0; }
.hint--tight-flush { margin: -0.4rem 0 0; }

.field-label-text {
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-muted); text-transform: uppercase;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-sm { margin-top: 0.4rem; }
.mt-md { margin-top: 0.8rem; }

.card--danger { border-color: var(--danger); margin-bottom: 1rem; }

.row { display: flex; gap: 0.5rem; }
.row--end { align-items: flex-end; }
.row--center { align-items: center; gap: 0.8rem; }
.row--wrap { flex-wrap: wrap; gap: 0.3rem; }
.col-flex { display: flex; flex-direction: column; gap: 0.4rem; }

.form-inline { display: inline; }
.form-contents { display: contents; }
.hidden { display: none; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.h1-compact { font-size: 1.3rem; }
.detail-header h1.h1-compact { font-size: 1.3rem; }
.h1-sm { font-size: 1.1rem; }
.toolbar-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  margin: 0;
}
.w-auto { width: auto; }
/* form.form-grid label ist ein Flex-Container (column) mit dem Default align-items:stretch -
   ein Button als weiteres Kind (z.B. "Preisrecherche" neben dem Startpreis-Feld) wuerde dadurch
   ungewollt auf die volle Feldbreite gestreckt; diese Klasse haelt ihn bei seiner Inhaltsbreite. */
.align-self-start { align-self: flex-start; }
.min-w-200 { min-width: 200px; }
.min-w-320 { min-width: 320px; }
.min-w-640 { min-width: 640px; }
.text-center-muted { text-align: center; opacity: 0.6; }
.meta-note { opacity: 0.6; font-size: 0.8rem; }

/* Abgesetzter Unterabschnitt innerhalb einer .detail-grid-Karte (z.B. "Zahlung (Ankauf)",
   "Buchhaltung (sevDesk)" auf items/detail.html + items/form.html). */
.section-divider { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.section-label {
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  text-transform: none;
}

/* Bedingt eingeblendete Formularfelder (Quelle: Sonstige/Kleinanzeigen, Produktart:
   Sonstiges - siehe app/static/quelle_select.js). Spezifitaet bewusst auf dem Niveau von
   "form.form-grid label" gehalten, sonst gewinnt dessen display:flex im Cascade-Konflikt
   (siehe CLAUDE.md-Hinweis zu Selektor-Spezifitaets-Fallen). */
form.form-grid label.conditional-field { display: none; }
form.form-grid label.conditional-field.conditional-field--visible { display: flex; }

/* Ordner-Picker-Button (Ankauf-Screenshot-Upload) - startet versteckt, JS zeigt ihn nur,
   wenn die File System Access API tatsaechlich verfuegbar ist (siehe app/static/ankauf.js). */
#pick-folder-btn.hidden { display: none; }

/* Offscreen-Textarea fuer den execCommand('copy')-Fallback ohne Clipboard-API (siehe
   app/static/detail_copy.js) - unsichtbar, aber fokussierbar/selektierbar. */
.copy-fallback-textarea { position: fixed; top: 0; left: 0; opacity: 0; }

/* Feste Spaltenbreiten der Artikel-Uebersicht (siehe app/items/columns.py Column.width) -
   ein kleines, festes Set, deshalb per Slug direkt hier statt per Inline-style="width:...". */
#items-table col.col-id { width: 9rem; }
#items-table col.col-actions { width: 11rem; }
#items-table col.col-kategorie { width: 9rem; }
#items-table col.col-hersteller { width: 8rem; }
#items-table col.col-modell { width: 8rem; }
#items-table col.col-lagernummer { width: 5.5rem; }
#items-table col.col-status { width: 8rem; }
#items-table col.col-ankaufsdatum { width: 6.5rem; }
#items-table col.col-verkaeufer { width: 8rem; }
#items-table col.col-quelle { width: 8rem; }
#items-table col.col-einkaufspreis { width: 5rem; }
#items-table col.col-auktionsnummer_ebay { width: 8rem; }
#items-table col.col-einstelldatum { width: 6.5rem; }
#items-table col.col-verkaufsdatum { width: 6.5rem; }

@media (max-width: 640px) {
  main { padding: 1rem; }
  form.form-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  header.topbar { flex-wrap: wrap; }
}