/* Lager-Ergänzungen zu style.css (Cockpit-Gestaltung) – Klassenübersicht in docs/UI.md.
   Farben ausschließlich über die Theme-Variablen (public/themes/<name>/theme.css). */

/* --- Kopfzeile: Tool-Wechsler, aktiver Navigationspunkt, Profil --- */
.tool-wechsler { position: relative; }
.tool-wechsler > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; }
.tool-wechsler > summary::-webkit-details-marker { display: none; }
.tool-wechsler .pfeil { font-size: 0.7rem; opacity: 0.8; }
.tool-wechsler .tool-menue {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 220px;
  background: var(--white); color: var(--primary); border-radius: 12px; padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tool-wechsler .tool-menue a, .tool-wechsler .tool-menue .aktuell {
  display: block; padding: 8px 12px; border-radius: 8px; color: inherit; text-decoration: none; opacity: 1;
}
.tool-wechsler .tool-menue a:hover { background: var(--primary-tint); text-decoration: none; }
.tool-wechsler .tool-menue .aktuell { background: var(--field-border); font-weight: 700; }

.topbar .topnav a.aktiv { opacity: 1; font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.topbar a.avatar {
  display: inline-flex; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--secondary); color: var(--primary); font-weight: 800; font-size: 0.78rem;
  align-items: center; justify-content: center; position: relative; flex: none; opacity: 1; text-decoration: none;
}
.topbar a.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Das Lager hat mehr Menüpunkte als das Cockpit: Burger-Menü schon unter 1100 px */
@media (max-width: 1100px) {
  .topbar { flex-wrap: wrap; row-gap: 4px; }
  .topbar .nav-toggle { display: block; }
  .topbar .topnav { display: none; }
  .topbar .topnav.open {
    display: flex; flex-basis: 100%; flex-direction: column;
    align-items: flex-start; gap: 4px; padding: 10px 4px 6px;
  }
  .topbar .topnav.open a, .topbar .topnav.open button.linklike { padding: 8px 4px; font-size: 1.02rem; } /* große Tipp-Ziele */
}

/* --- Rückmeldungen (?ok= / ?fehler=), automatisch aus head.ejs --- */
.meldungen { width: 100%; max-width: 1000px; margin: 18px auto 0; padding: 0 18px; }
.meldungen .error-box { margin-bottom: 0; }
.ok-box {
  background: var(--success-soft); color: var(--success); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 14px; font-weight: 600; font-size: 0.92rem;
}
.meldungen .ok-box { margin-bottom: 0; }
.hinweis-box {
  background: var(--accent-soft); color: var(--accent-text); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 14px; font-weight: 600; font-size: 0.92rem;
}
.info-box {
  background: var(--info-soft); color: var(--info-text); border-radius: var(--radius-sm);
  padding: 12px 16px; margin-bottom: 14px; font-size: 0.92rem;
}

/* --- Seitenbreite: breite Listen (Packplan, Artikel) dürfen mehr Platz nehmen --- */
main.breit { max-width: 1280px; }

/* --- Buttons --- */
.btn-secondary { /* Alias zu .btn.secondary */
  display: inline-block; background: var(--secondary); color: var(--primary); border: none; border-radius: 999px;
  padding: 11px 26px; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn-secondary:hover { background: var(--secondary-dark); }
.btn.gross, .btn-secondary.gross { padding: 14px 28px; font-size: 1.08rem; min-height: 50px; }
.btn.block { display: block; width: 100%; text-align: center; }
.btn.erfolg { background: var(--success); }
.werkzeugleiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.werkzeugleiste .spacer { flex: 1; }
.inline-form { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.tipp-ziel { min-height: 44px; min-width: 44px; }

/* --- Raster --- */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid-2 { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid > .card, .grid-2 > .card, .grid-3 > .card, .grid-4 > .card { margin-bottom: 0; }

/* --- Status-Pills --- */
.pill {
  display: inline-block; border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 700;
  white-space: nowrap; background: var(--primary-soft); color: var(--primary);
}
/* Einsatz: offen | teilweise | gepackt | zurueck */
.pill.offen { background: var(--danger-soft); color: var(--danger); }
.pill.teilweise { background: var(--accent-soft); color: var(--accent-text); }
.pill.gepackt { background: var(--success-soft); color: var(--success); }
.pill.zurueck { background: var(--secondary-soft); color: var(--secondary-text); }
/* Bestellung: entwurf | bestellt | teilgeliefert | geliefert | storniert */
.pill.entwurf { background: var(--muted-bg); color: var(--text-muted); }
.pill.bestellt { background: var(--info-soft); color: var(--info-text); }
.pill.teilgeliefert { background: var(--accent-soft); color: var(--accent-text); }
.pill.geliefert { background: var(--success-soft); color: var(--success); }
.pill.storniert { background: var(--muted-bg); color: var(--text-muted); text-decoration: line-through; }
/* Inventur: offen (s. o.) | abgeschlossen; allgemeine Hinweise */
.pill.abgeschlossen { background: var(--success-soft); color: var(--success); }
.pill.warnung { background: var(--accent-soft); color: var(--accent-text); }
.pill.fehler { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--info-soft); color: var(--info-text); }
.pill.neutral { background: var(--primary-soft); color: var(--primary); }

/* --- Ampel (Bestand vs. Mindestbestand): rot < Mindestbestand, gelb = Mindestbestand, grün darüber --- */
.ampel { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; margin-right: 6px; background: var(--line); flex: none; }
.ampel.rot { background: var(--danger); }
.ampel.gelb { background: var(--accent); }
.ampel.gruen { background: var(--success); }
tr.zeile-rot td { background: var(--danger-soft); }
tr.zeile-gelb td { background: var(--accent-soft); }
tr.zeile-gruen td { background: var(--success-soft); }
tr.zeile-grau td { opacity: 0.55; }

/* Bereichs-Farbmarke (Farbe per style="--farbe: #…") */
.farbmarke { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--farbe, var(--primary)); vertical-align: middle; margin-right: 6px; }

/* --- Zahlen und Tabellen --- */
.zahl, table.list td.zahl, table.list th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lagerplatz { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
table.list tr.klickbar { cursor: pointer; }
table.list tr.klickbar:hover td { background: var(--primary-tint); }
.tabelle-scroll { overflow-x: auto; }

/* Große Zahleneingabe für Packen/Rücknahme/Zählen am Handy */
input.zahl-eingabe, table.list input.zahl-eingabe {
  width: 96px; min-width: 96px; height: 48px; font-size: 1.15rem; font-weight: 700; text-align: center;
}

/* Kennzahlen-Kacheln (Dashboard), ergänzt .stat-grid/.stat aus style.css */
.stat.rot b { color: var(--danger); }
.stat.gelb b { color: var(--accent-text); }
.stat.gruen b { color: var(--success); }
a.stat { text-decoration: none; color: inherit; }
a.stat:hover { box-shadow: 0 0 0 2px var(--secondary), var(--shadow); }

/* --- Mobil: Tabellen als Karten (table.list.mobil-karten + data-label je Zelle) --- */
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .meldungen { padding: 0 10px; margin-top: 12px; }
  .werkzeugleiste .btn, .werkzeugleiste .btn-secondary { flex: 1 1 auto; text-align: center; }

  table.list.mobil-karten thead { display: none; }
  table.list.mobil-karten, table.list.mobil-karten tbody, table.list.mobil-karten tr, table.list.mobil-karten td { display: block; width: 100%; }
  table.list.mobil-karten tr {
    border: 2px solid var(--primary-soft); border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 10px; background: var(--white);
  }
  table.list.mobil-karten td { border: none; padding: 5px 0; display: flex; gap: 10px; justify-content: space-between; align-items: center; text-align: right; }
  table.list.mobil-karten td::before { content: attr(data-label); font-weight: 700; font-size: 0.8rem; opacity: 0.7; text-align: left; flex: none; }
  table.list.mobil-karten td[data-label=""]::before, table.list.mobil-karten td:not([data-label])::before { content: none; }
  table.list.mobil-karten td.zahl { justify-content: space-between; }
  table.list.mobil-karten tr.zeile-rot, table.list.mobil-karten tr.zeile-rot td { background: var(--danger-soft); }
  table.list.mobil-karten tr.zeile-gelb, table.list.mobil-karten tr.zeile-gelb td { background: var(--accent-soft); }
  table.list.mobil-karten tr.zeile-gruen, table.list.mobil-karten tr.zeile-gruen td { background: var(--success-soft); }
  .card:has(> table.list.mobil-karten) { overflow-x: visible; }
}

/* --- Fortschrittsbalken (Inventur): <div class="fortschritt"><span style="width: 40%"></span></div> --- */
.fortschritt { background: var(--line); border-radius: 999px; height: 12px; overflow: hidden; }
.fortschritt.gross { height: 14px; }
.fortschritt > span { display: block; height: 100%; background: var(--success); }

/* --- Zeilenhinweis unter Eingabezeilen (Rücknahme: „n mehr als gepackt"); leer = mobil ausblenden --- */
.zeilen-hinweis { font-size: 0.85rem; font-weight: 600; }
@media (max-width: 700px) { table.list.mobil-karten td.zeilen-hinweis:empty { display: none; } }

/* --- Druck (Packliste, Protokolle, Etiketten): nur Inhalt, keine Navigation --- */
.nur-druck { display: none; }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; color: #000; display: block; min-height: 0; font-size: 11pt; }
  .no-print, .topbar, .footer, .meldungen, .skip-link, .werkzeugleiste, .btn, .btn-secondary, .iconbtn, form button { display: none !important; }
  .nur-druck { display: block; }
  main, main.narrow, main.breit { max-width: none; padding: 0; margin: 0; }
  .card { box-shadow: none; border: none; padding: 0; margin: 0 0 10mm; border-radius: 0; overflow: visible !important; }
  h1 { font-size: 16pt; }
  a { color: #000; text-decoration: none; }
  table.list { font-size: 10pt; }
  table.list th, table.list td { border-bottom: 1px solid #999; padding: 4px 6px; }
  table.list tr { break-inside: avoid; }
  table.list.mobil-karten thead { display: table-header-group; }
  .pill, .badge { border: 1px solid #999; background: none !important; color: #000 !important; }
  .seitenumbruch { break-after: page; }
  .kein-umbruch { break-inside: avoid; }
  .druck-kopf { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; margin-bottom: 6mm; padding-bottom: 3mm; }
  .druck-kopf img { height: 14mm; }
  .ankreuzen::before { content: '☐'; font-size: 13pt; }
}