/* ==========================================================================
   desk.css — CaptureDesk-Design-Ebene (zweite Schicht ueber shared.css)
   --------------------------------------------------------------------------
   shared.css ist die Flotten-Referenz (md5-Guard, NICHT anfassen). Hier
   wird gebuendelt, was vorher 2-3x in den Page-<style>-Bloecken von
   capture/index.html, capture/admin/index.html und capture/mail-inbox/
   dupliziert war -- mit sichtbarer Drift (Fokus-Ring 3px/2px, Button-Hoehen
   44/36/32px, Badge-Radius 4/10px, Header-Offset 111/113px).

   Geladen NACH shared.css, VOR dem jeweiligen Seiten-<style>-Block. Die
   Seiten-Bloecke behalten nur echte Seiten-Spezifika (Sidebar-Layouts,
   Candidate-Tabelle, PLZ-Regel-Tabelle etc.).
   ========================================================================== */

/* ── Alias-Tokens (frueher pro Seite dupliziert) ─────────────────────────
   Aeltere Inline-Styles/JS-generierte Markups referenzieren noch diese
   Namen -- die Aliasse zeigen auf die shared.css-Tokens, damit es nur eine
   Quelle der Wahrheit fuer die Farbwerte gibt. */
:root {
  --color-text: var(--text);
  --color-text-muted: var(--muted);
  --color-text-secondary: var(--secondary);
  --card-border: var(--border);
  --input-border: var(--border-strong);
  --table-bg: var(--card-bg);
  --table-border: var(--border);
  --th-bg: var(--bg-alt);
  --th-color: var(--muted);
  --td-border: var(--border);
  --tr-hover: var(--hover);
  --tr-selected: #e0f2fe;
  --error-text: var(--error);
  --missing-color: var(--muted);
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-dark);
  --btn-primary-disabled: #9ca3af;
  --btn-secondary-bg: var(--bg-alt);
  --btn-secondary-color: var(--text);

  /* Header (64px) + Tab-Bar -- am Markup nachgemessen (getBoundingClientRect):
     64px + 48.67px ≈ 113px. Ersetzt die widerspruechlichen 111px
     (mail-inbox) und 113px (admin) durch EINEN Wert. */
  --header-offset: 113px;
}

/* ── Karten-Titel (CaptureDesk: nicht uppercase, anders als shared.css' .card h2) ── */
.card h2 { margin: 0 0 16px; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* ── Status-Badges (Pillenform, wie von den Seiten gelebt: radius 10,
   weight 500, kein Uppercase -- ueberschreibt shared.css' .badge, die
   radius 4 + uppercase fuer Cockpit/Bridge-Seiten nutzt). Modifier-Klassen
   bleiben bindestrich-getrennt (badge-ok statt badge ok), weil das
   bestehende JS-Markup in allen drei Seiten schon so erzeugt wird. ────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
}
.badge-ok,
.badge-accepted { background: #dcfce7; color: #15803d; }
.badge-review,
.badge-warn,
.badge-pending  { background: #fef9c3; color: #854d0e; }
.badge-mandatory,
.badge-failed   { background: #fee2e2; color: #b91c1c; }
.badge-info,
.badge-ready    { background: #dbeafe; color: #1e40af; }
.badge-rejected { background: #e5e7eb; color: #374151; }
/* Neutraler Zaehl-Chip (frueher index.html: eigenes badge-info mit
   btn-secondary-Farben -- kollidierte mit dem blauen "info"-Badge aus
   admin/mail-inbox. Eigene Klasse loest die Namenskollision auf. */
.badge-neutral  { background: var(--btn-secondary-bg); color: var(--btn-secondary-color); }
.badge-mandatory { margin-right: 4px; }
.badge-ready     { margin-left: 6px; }
.badge-neutral   { margin-left: 6px; }

/* ── Formulare: form-grid, Fieldsets/Legenden, Aktions-Reihe ─────────────
   span-2 einheitlich als `1 / -1` (admin nutzte vorher `1 / span 2`, das
   bei mehr als 2 Spalten in schmaleren Layouts nicht bis zum Rand reicht). */
fieldset { border: 1px solid var(--card-border); border-radius: 8px; padding: 10px 14px 14px; margin: 0; }
legend { color: var(--accent); font-weight: 600; padding: 0 6px; font-size: 13px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--color-text-secondary); }
.form-grid label.span-2 { grid-column: 1 / -1; }
.form-grid input, .form-grid select {
  box-sizing: border-box;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--color-text);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-grid input:focus, .form-grid select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26,163,232,.15);
}
.form-grid .field-hint { font-size: 11px; color: var(--color-text-muted); font-style: italic; margin-top: 2px; }
.form-grid .field-hint:empty { display: none; }
.form-grid .field-hint code { background: var(--bg-alt); padding: 1px 4px; border-radius: 3px; font-style: normal; }

.edit-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; flex-wrap: wrap; }

/* ── Dropzone + Datei-Liste ───────────────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--input-border);
  border-radius: 8px;
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  background: var(--input-bg);
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--accent); background: var(--tr-hover); }
.dropzone strong { color: var(--color-text); }
.dropzone input[type=file] { display: none; }

.file-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.file-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--th-bg); border-radius: 6px; }
.file-list .file-name { flex: 1; color: var(--color-text); }
.file-list .file-size { color: var(--color-text-muted); font-size: 11px; }
.file-list .file-remove { background: transparent; border: 0; color: var(--color-text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 4px; }
.file-list .file-remove:hover { color: var(--error-text); }

/* ── Fokus-Sichtbarkeit: fokussierbare Tabellenzeilen ─────────────────────
   shared.css deckt a/button/[tabindex]/summary bereits mit 2px ab; hier nur
   die CaptureDesk-Zeilen (Kandidaten/Packstuecke), die zusaetzlich einen
   Hover-Hintergrund zeigen sollen, damit Tastatur- und Maus-Fokus optisch
   gleichwertig sind. */
tr[tabindex]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: -2px;
  background: var(--tr-hover);
}

/* ── Tastatur-Hinweiszeile (dezent, kein Overlay) ─────────────────────── */
.kbd-hint { font-size: 12px; color: var(--color-text-muted); margin: -8px 0 12px; }
.kbd-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: var(--th-bg);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  color: var(--color-text);
}

/* ── Feedback-Banner (Dreifarb-System aus mail-inbox) ─────────────────────
   Erfolg gruen, Fehler rot, Hinweis blau. `.banner-dismissible` ist die
   schliessbare Variante (Top-Level-Banner mit X-Button); Inline-Nutzungen
   (z.B. in einer Tabellenzelle) bleiben ohne die Flex-Regel unveraendert. */
#banner-container { margin: 0 0 14px; }
#banner-container:empty { display: none; }
.error-banner, .info-banner, .success-banner {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
}
.error-banner   { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.success-banner { background: #dcfce7; color: #15803d; border-color: #86efac; }
.info-banner    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }

.banner-dismissible { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.banner-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: inherit;
  opacity: 0.7;
  padding: 0 2px;
  flex-shrink: 0;
}
.banner-close:hover { opacity: 1; }

/* Modal-lokales Feedback (Top-Banner liegt hinter einem offenen Overlay/
   Modal und ist dann nicht sichtbar -- Aktions-Feedback wird stattdessen
   direkt im Dialog gezeigt). */
.modal-feedback { margin: 0; padding: 0; }
.modal-feedback:empty { display: none; }
.modal-feedback .error-banner,
.modal-feedback .success-banner,
.modal-feedback .info-banner { display: block; margin: 0 16px 12px; }

/* Erfolgs-Toast: unten rechts fixiert, auto-dismiss, stoert den Workflow
   nicht (kein Overlay, blockiert keine Klicks). Fehler bleiben bewusst im
   persistenten Top-Banner mit Schliessen-Button -- die sollen nicht von
   selbst verschwinden. */
.toast-region {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
  pointer-events: none;
}
.toast-region .success-banner {
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  animation: toast-in 0.2s ease;
  pointer-events: auto;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Modal-Dialog-System (aus mail-inbox konsolidiert) ────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--z-modal); padding: 24px;
}
.overlay[hidden] { display: none; }
.modal {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 10px; width: min(1200px, 95vw); height: min(880px, 92vh);
  display: grid; grid-template-rows: auto 1fr auto; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--card-border);
}
.modal-header h2 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-header .modal-sub { font-size: 12px; color: var(--color-text-muted); }
.modal-close {
  background: transparent; border: 0; color: var(--color-text-muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 4px;
}
.modal-close:hover { background: var(--tr-hover); color: var(--color-text); }
.modal-body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0;
  overflow: hidden;
}
.modal-pdf { background: #525659; display: flex; align-items: stretch; }
.modal-pdf iframe { width: 100%; height: 100%; border: 0; background: #ffffff; }
.modal-pdf .pdf-empty { color: #f3f4f6; padding: 24px; text-align: center; font-size: 13px; align-self: center; width: 100%; }
.modal-side { padding: 16px 18px; overflow-y: auto; border-left: 1px solid var(--card-border); }
.modal-side h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 16px 0 8px; }
.modal-side h3:first-child { margin-top: 0; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
dl.meta dt { color: var(--color-text-muted); font-weight: 500; }
dl.meta dd { margin: 0; word-break: break-word; }

.candidate-card {
  border: 1px solid var(--card-border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px; background: var(--bg-alt);
}
.candidate-card .cc-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.candidate-card .cc-ref { font-weight: 600; font-size: 13px; }
.candidate-card .cc-stop { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0; }
.candidate-card .cc-stop strong { color: var(--color-text); font-weight: 500; }
.candidate-card .cc-warn { color: #b91c1c; font-size: 11px; margin-top: 4px; }
.candidate-card .cc-warn-ok { color: #15803d; font-size: 11px; margin-top: 4px; }

.modal-footer {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 18px; border-top: 1px solid var(--card-border); background: var(--bg-alt);
}
.modal-footer .reject-form { display: flex; gap: 8px; flex: 1; align-items: center; }
.modal-footer input.reject-reason {
  flex: 1; padding: 8px 12px; border: 1px solid var(--input-border);
  background: var(--input-bg); color: var(--color-text); border-radius: 6px;
  font-size: 13px; min-height: 36px;
}
.modal-footer input.reject-reason:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,163,232,0.15); }

@media (max-width: 900px) {
  .modal-body { grid-template-columns: 1fr; grid-template-rows: 50% 50%; }
  .modal-pdf { border-bottom: 1px solid var(--card-border); }
  .modal-side { border-left: 0; }
}

/* ── Split-Pane-Dokumentvorschau (CaptureDesk-Hauptseite) ──────────────── */
.edit-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.edit-preview-col {
  border: 1px solid var(--card-border); border-radius: 8px; overflow: hidden;
  background: #525659; min-height: 320px; display: flex; flex-direction: column;
}
.edit-preview-col iframe { flex: 1; width: 100%; height: 100%; min-height: 320px; border: 0; background: #ffffff; }
.edit-preview-col img { max-width: 100%; display: block; margin: auto; }
.edit-preview-col .preview-empty { color: #f3f4f6; padding: 24px; text-align: center; font-size: 13px; margin: auto; }
.edit-preview-toggle { display: none; }
@media (max-width: 1100px) {
  .edit-split { grid-template-columns: 1fr; }
  .edit-preview-col { display: none; }
  .edit-preview-col.expanded { display: flex; min-height: 260px; }
  .edit-preview-toggle { display: inline-flex; }
}

/* ── Dichte-Toggle-Button-Styling + generische Tabellen-/Card-Kompakt-
   Overrides sind seit dem Fleet-Sync Teil der Flotten-Referenz
   (logistic-bridge: cockpit/shared.css, Abschnitte "Dichte-Toggle" und
   "Dichte-Modus") -- hier NICHT mehr doppelt fuehren, sonst driftet es
   wieder auseinander. Nur echtes CaptureDesk-Spezifikum bleibt: die
   .form-grid/fieldset-Kompakt-Overrides, weil .form-grid keine
   shared-Komponente ist. */
html[data-density="compact"] .form-grid { gap: 6px 8px; }
html[data-density="compact"] .form-grid label { gap: 2px; }
html[data-density="compact"] .form-grid input,
html[data-density="compact"] .form-grid select { min-height: 30px; padding: 4px 10px; }

html[data-density="compact"] fieldset { padding: 6px 10px 10px; }

/* ── Tabellen-Scroll-Wrapper (sticky thead) ─────────────────────────────────
   Fuer Tabellen, die im Seiten-Scroll leben (kein eigener Scroll-Container
   wie mail-inbox's .main): begrenzt die Tabelle auf eine feste Hoehe, thead
   bleibt beim Scrollen innerhalb sichtbar. Hintergrund fuer thead th kommt
   schon aus den Seiten-Styles (opak gesetzt) -- sonst wuerde die Kopfzeile
   beim Ueberscrollen durchscheinen. */
.table-scroll { max-height: 60vh; overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; }

/* ── Tabellarische Zahlen ────────────────────────────────────────────────
   Ziffern in Zaehler-/Gewichts-/PLZ-/Datums-Spalten bekommen gleich breite
   Ziffern, damit Spalten vergleichbar untereinander stehen. */
.num { font-variant-numeric: tabular-nums; }

/* ── Empty-State (aus mail-inbox konsolidiert, jetzt auch fuer den
   Haupt-Desk verfuegbar) ────────────────────────────────────────────────── */
.empty-state { padding: 48px 16px; text-align: center; color: var(--color-text-muted); }
.empty-state strong { color: var(--color-text); display: block; margin-bottom: 6px; font-weight: 600; }
.empty-state a { color: var(--accent); font-weight: 600; text-decoration: none; }
.empty-state a:hover { text-decoration: underline; }

/* ── Lade-Skeleton (Analysiere-Phase im Haupt-Desk) ─────────────────────────
   2-3 Platzhalter-Zeilen statt nur Button-Text; dezente Puls-Animation.
   shared.css deckelt @media (prefers-reduced-motion: reduce) global (setzt
   animation-duration auf .01ms) -- kein eigener reduced-motion-Block noetig. */
tr.skeleton-row td { padding: 10px 12px; }
.skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: var(--th-bg);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
tr.skeleton-row:nth-child(1) .skeleton-bar { width: 70%; }
tr.skeleton-row:nth-child(2) .skeleton-bar { width: 55%; }
tr.skeleton-row:nth-child(3) .skeleton-bar { width: 62%; }
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}