/* Shared Styles fuer Leergut-Subseiten (Tabellen, Modals, Forms) */

/* Schriftart-Konsistenz: Form-Elemente + Buttons erben die RUDI-Schrift (Inter) nicht automatisch */
button, input, select, textarea {
  font-family: inherit;
}

/* Embed-Modus (scan-detail im Worklist-Drawer): nav + Chat-Panel ausblenden */
body.embed-mode nav { display: none !important; }
body.embed-mode .rudi-chat-fab,
body.embed-mode .rudi-chat-overlay,
body.embed-mode .rudi-chat-modal { display: none !important; }
/* Im Worklist-iframe volle Breite nutzen — 75%-Zentrierung von container-full aufheben */
body.embed-mode .container,
body.embed-mode .container.container-full,
body.embed-mode .scan-detail-container {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 10px !important;
}

/* Kompakter Header im Worklist-Editor: kleiner Titel, weniger Abstaende */
body.embed-mode .scan-detail-header { margin-bottom: 8px; }
body.embed-mode .page-title {
  font-size: 16px; margin: 0 0 4px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.embed-mode .scan-status-row { gap: 8px; margin-top: 2px; }
body.embed-mode .scan-meta { font-size: 12px; }
body.embed-mode .container-info { margin-top: 6px; padding: 6px 10px; font-size: 12px; }
body.embed-mode .rek-banner, body.embed-mode .locked-banner { margin-top: 6px; padding: 8px 12px; }

/* Karten kompakter, mehr Platz fuer Inhalt */
body.embed-mode .scan-card { padding: 12px; }
body.embed-mode .scan-form-panel { gap: 10px; }

/* PDF-Panel im Worklist-Editor groesser, Grid mehr Platz fuer PDF — nebeneinander erzwingen */
body.embed-mode .scan-detail-grid { gap: 10px; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; }
body.embed-mode .scan-pdf-panel { min-height: calc(100vh - 170px); }
body.embed-mode .scan-pdf-frame { min-height: calc(100vh - 210px); }
@media (max-width: 700px) {
  body.embed-mode .scan-detail-grid { grid-template-columns: 1fr !important; }
}

/* Volle Bildschirmbreite fuer Board + Scan-Detail (nutzt verfuegbaren Platz maximal) */
.container.container-full {
  max-width: none;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
  .container.container-full { width: 90%; }
}
@media (max-width: 600px) {
  .container.container-full { width: 100%; padding-left: 14px; padding-right: 14px; }
}

/* ===== NAV (uebernommen aus lager/index.css, fuer alle Leergut-Sub-Pages) ===== */
.nav-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav-logo { height: 28px; width: auto; }
[data-theme="dark"] .nav-logo { filter: brightness(2.2) contrast(0.85); }
.nav-brand { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; }
.nav-divider { width: 1px; height: 18px; background: var(--nav-border, rgba(0,0,0,0.1)); margin: 0 2px; }
.nav-subtitle {
  font-size: 12px; color: var(--text-secondary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 50vw;
}
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-back { font-size: 13px; font-weight: 500; color: var(--accent, #04b3d6); text-decoration: none; padding: 5px 10px; border-radius: 8px; transition: all 0.2s; }
.nav-back:hover { background: rgba(4,179,214,0.1); }
.user-info { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.user-dot { width: 7px; height: 7px; border-radius: 50%; background: #30d158; flex-shrink: 0; }

@media (max-width: 600px) {
  .nav-back { display: none; }
  .nav-subtitle { max-width: 30vw; font-size: 11px; }
  .user-info { display: none; }
}


.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
.toolbar input[type="search"],
.toolbar input[type="text"],
.toolbar select,
.toolbar input[type="date"],
.toolbar input[type="number"] {
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
}
.toolbar input[type="search"] { min-width: 240px; flex: 1 1 240px; max-width: 380px; }

.btn-primary, .btn-secondary, .btn-danger {
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dark, #038ba8); }
.btn-secondary {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--card-border);
}
.btn-secondary:hover { background: var(--card-hover-bg); }
.btn-danger {
  background: #dc3545;
  color: #fff;
}
.btn-danger:hover { background: #c82333; }

/* Das hidden-Attribut muss display-Overrides schlagen: .btn-* setzen display:inline-flex,
   .scan-pdf-frame display:block usw. — diese (Spezifitaet 0,1,0) gewinnen sonst gegen das
   UA-Default [hidden]{display:none}, wodurch per JS (element.hidden=true) ausgeblendete
   Elemente sichtbar bleiben (Buttons zeigen sich falsch, das PDF-Embed bleibt stehen und
   schiebt den Bearbeiten-Canvas aus dem Bild). Auf scan-detail gescoped (0,2,0, kein
   !important) — andere Seiten, die teils style.display nutzen, bleiben unberuehrt. */
.scan-detail-container [hidden] { display: none; }

.spacer { flex: 1; }

/* Tabelle */
.data-table-wrap {
  background: var(--card-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  margin-bottom: 24px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th, .data-table td {
  padding: 11px 14px;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--card-border);
}
.data-table th {
  font-weight: 600;
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme="dark"] .data-table th { background: rgba(255,255,255,0.04); }
.data-table tbody tr:hover {
  background: rgba(4,179,214,0.06);
}
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.row-actions {
  display: inline-flex;
  gap: 6px;
}
.row-actions button {
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 7px 12px;
  min-height: 36px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-primary);
}
.row-actions button:hover { background: rgba(4,179,214,0.1); }
.row-actions button.danger:hover { background: rgba(220,53,69,0.12); border-color: #dc3545; color: #dc3545; }

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-secondary);
}
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state-title { font-size: 18px; font-weight: 500; margin-bottom: 6px; color: var(--text-primary); }
.empty-state-sub { font-size: 14px; }

.loading-state {
  padding: 40px;
  text-align: center;
  color: var(--text-secondary);
}
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--card-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 10px;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.modal-overlay.active { display: flex; }
.modal {
  background: var(--card-bg);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.modal-large { max-width: 880px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--card-border);
}
.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}
.modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-secondary);
  padding: 0 4px;
}
.modal-body {
  padding: 20px;
}
.modal-textarea {
  width: 100%; box-sizing: border-box;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--card-border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.form-row { display: flex; flex-direction: column; gap: 4px; }
.form-row.full { grid-column: 1 / -1; }
.form-row label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-row input, .form-row select, .form-row textarea {
  padding: 8px 12px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}
.form-row textarea { min-height: 80px; resize: vertical; }
.form-row input[type="checkbox"] { width: auto; margin-right: 8px; }
.form-row.check { flex-direction: row; align-items: center; }

/* Badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge.einweg { background: rgba(255,193,7,0.15); color: #b07a00; }
.badge.mehrweg { background: rgba(4,179,214,0.15); color: var(--accent); }
.badge.ausgeschlossen { background: rgba(220,53,69,0.15); color: #b32a2a; }
.badge.aktiv { background: rgba(40,167,69,0.15); color: #1e7e34; }
.badge.warn { background: rgba(255,140,0,0.15); color: #d97706; }
[data-theme="dark"] .badge.einweg { color: #ffd970; }
[data-theme="dark"] .badge.ausgeschlossen { color: #ff8a8a; }
[data-theme="dark"] .badge.aktiv { color: #79e8a3; }

/* Toast */
.toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  font-size: 14px;
  color: var(--text-primary);
  pointer-events: auto;
  animation: toast-in 0.25s ease;
}
.toast.error { border-color: #dc3545; }
.toast.success { border-color: #28a745; }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

@media (max-width: 600px) {
  .data-table th, .data-table td { padding: 8px 10px; font-size: 13px; }
  .data-table th:nth-child(n+4):not(:last-child),
  .data-table td:nth-child(n+4):not(:last-child) { display: none; }
  .toolbar input[type="search"] { min-width: 100%; max-width: 100%; }
  .modal { border-radius: 14px; }
}

/* ============================================================
   Scans-Inbox (Phase 3b/3c)
   ============================================================ */

.scan-dropzone {
  border: 2px dashed var(--card-border);
  border-radius: 18px;
  padding: 26px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--card-bg);
  transition: all 0.2s ease;
  margin-bottom: 18px;
}
.scan-dropzone:hover, .scan-dropzone.drag {
  border-color: #04b3d6;
  background: rgba(4, 179, 214, 0.06);
}
.scan-dropzone-icon { font-size: 38px; margin-bottom: 6px; }
.scan-dropzone-title { font-size: 17px; font-weight: 600; color: var(--text-primary); }
.scan-dropzone-sub { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.scan-dropzone-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; opacity: 0.7; }

.filter-pill {
  padding: 6px 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  font-size: 13px;
  color: var(--text-secondary);
}

.stat-card[data-action] { cursor: pointer; transition: transform 0.15s ease; }
.stat-card[data-action]:hover { transform: translateY(-2px); }
.stat-card.active { border-color: #04b3d6; box-shadow: 0 0 0 2px rgba(4, 179, 214, 0.25); }

.cell-truncate {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.empty-state {
  padding: 28px;
  text-align: center;
  color: var(--text-secondary);
}

.btn-sm { padding: 5px 11px; font-size: 13px; }
.btn-big { padding: 13px 22px; font-size: 16px; font-weight: 600; }

.badge.badge-info { background: rgba(4, 179, 214, 0.15); color: #04b3d6; }
.badge.badge-warn { background: rgba(255, 159, 10, 0.15); color: #c77a00; }
.badge.badge-ok { background: rgba(52, 199, 89, 0.15); color: #248a3d; }
.badge.badge-err { background: rgba(255, 69, 58, 0.15); color: #c82333; }
[data-theme="dark"] .badge.badge-warn { color: #ffcc80; }
[data-theme="dark"] .badge.badge-ok { color: #79e8a3; }
[data-theme="dark"] .badge.badge-err { color: #ff8a8a; }
[data-theme="dark"] .badge.badge-info { color: #6fd9f0; }

#toast.toast.info { border-color: #04b3d6; }
#toast.toast.ok { border-color: #28a745; }
#toast.toast.err { border-color: #dc3545; }
#toast {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 3000;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
  font-size: 14px;
  color: var(--text-primary);
  max-width: 360px;
}

/* ============================================================
   Scan-Detail (PDF + Form-Panel)
   ============================================================ */

.scan-detail-container { max-width: none; }

.scan-detail-header { margin-bottom: 14px; }

.locked-banner {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(52, 199, 89, 0.10);
  border: 1px solid rgba(52, 199, 89, 0.35);
  color: var(--text-primary);
  font-size: 14px;
}
.locked-banner a { color: #04b3d6; text-decoration: underline; }

.rek-banner {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 69, 58, 0.10);
  border: 1px solid rgba(255, 69, 58, 0.5);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
[data-theme="dark"] .rek-banner { background: rgba(255, 69, 58, 0.20); }
.rek-banner .rek-text { flex: 1; min-width: 220px; }
.rek-banner .rek-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rek-banner .rek-meta { font-size: 12px; color: var(--text-secondary); }
.rek-banner.rek-bestaetigt { background: rgba(255, 69, 58, 0.12); border-color: rgba(255, 69, 58, 0.5); }
.rek-banner.rek-abgelehnt {
  background: rgba(108, 117, 125, 0.10);
  border-color: rgba(108, 117, 125, 0.4);
}
.rek-banner.rek-abgelehnt strong { color: var(--text-secondary); }
.rek-banner a { color: #04b3d6; text-decoration: underline; }

.container-info {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(4, 179, 214, 0.08);
  border: 1px solid rgba(4, 179, 214, 0.3);
  font-size: 13px;
  color: var(--text-secondary);
}
.container-info a { color: #04b3d6; text-decoration: underline; }

/* Vermerke & Abweichungen Karte */
#card-vermerke { background: rgba(255, 204, 0, 0.08); border-color: rgba(255, 204, 0, 0.35); }
[data-theme="dark"] #card-vermerke { background: rgba(255, 204, 0, 0.15); }
.mini-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin: 10px 0 6px 0; }
.vermerk-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--card-border); }
.vermerk-item:last-child { border-bottom: 0; }
.vermerk-item.halluzination { opacity: 0.55; }
.vermerk-flag { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(220,53,69,0.15); color: #b32a2a; }
.abw-item { padding: 6px 0; font-size: 14px; border-bottom: 1px solid var(--card-border); }
.abw-item:last-child { border-bottom: 0; }
.abw-feld { font-weight: 600; color: var(--text-secondary); }
.abw-alt { text-decoration: line-through; color: #c82333; }
.abw-neu { font-weight: 600; color: #248a3d; }

/* Inbox Anmerkungs-Icon */
.anmerkung-icon { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--card-bg-subtle, rgba(0,0,0,0.04)); }
.anmerkung-icon.icon-note { color: #c77a00; }
.anmerkung-icon.icon-rek { background: rgba(255, 69, 58, 0.15); color: #c82333; font-weight: 600; }
[data-theme="dark"] .anmerkung-icon.icon-note { color: #ffcc80; }
[data-theme="dark"] .anmerkung-icon.icon-rek { color: #ff8a8a; }
.scan-status-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 6px;
}
.scan-meta { font-size: 13px; color: var(--text-secondary); }

.scan-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 1100px) {
  .scan-detail-grid { grid-template-columns: 1fr; }
}

.scan-pdf-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 600px;
}
.scan-pdf-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
}
.scan-pdf-frame {
  flex: 1;
  width: 100%;
  min-height: 600px;
  display: block;
  border: 0;
  background: #ffffff;
}
[data-theme="dark"] .scan-pdf-frame { background: #1c1c1e; }
.pdf-fallback { padding: 20px; text-align: center; color: var(--text-secondary); }
.pdf-fallback a { color: #04b3d6; text-decoration: underline; }

/* Kommentare-Thread */
.kommentare-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.kommentar-empty { padding: 10px; color: var(--text-secondary); font-style: italic; font-size: 13px; }
.kommentar-item {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--card-bg-subtle, rgba(0,0,0,0.03));
  border-left: 3px solid var(--card-border);
}
[data-theme="dark"] .kommentar-item { background: rgba(255,255,255,0.04); }
.kommentar-item.komm-frage { border-left-color: #dc3545; }
.kommentar-item.komm-antwort { border-left-color: #34c759; }
.kommentar-item.komm-notiz { border-left-color: #6c757d; }
.kommentar-head { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-secondary); margin-bottom: 3px; }
.kommentar-typ { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.komm-frage .kommentar-typ { color: #c82333; }
.komm-antwort .kommentar-typ { color: #248a3d; }
.kommentar-autor { font-weight: 600; }
.kommentar-zeit { margin-left: auto; }
.kommentar-text { font-size: 14px; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.kommentar-form { display: flex; flex-direction: column; gap: 8px; }
.kommentar-form textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.kommentar-form-actions { display: flex; gap: 8px; align-items: center; }
.kommentar-form-actions select {
  padding: 7px 10px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 13px;
}

/* Combobox mit Suche */
.combobox { position: relative; }
.combobox-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
  box-sizing: border-box;
}
.combobox-input-empty { color: var(--text-secondary); font-style: italic; }
.combobox-options {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  list-style: none; margin: 0; padding: 4px 0;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 50;
}
[data-theme="dark"] .combobox-options { background: #242833; }
.combobox-option {
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
}
.combobox-option:hover { background: rgba(4, 179, 214, 0.10); }
.combobox-empty { padding: 10px 12px; font-size: 13px; color: var(--text-secondary); font-style: italic; }

.scan-form-panel { display: flex; flex-direction: column; gap: 14px; }

.scan-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 16px;
}
.scan-card-title { font-size: 15px; font-weight: 600; margin: 0 0 12px 0; color: var(--text-primary); }
.scan-card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.scan-card-title-row .scan-card-title { margin: 0; }

.form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-row > label { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="date"],
.form-row select {
  padding: 9px 11px;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--input-bg, var(--card-bg));
  color: var(--text-primary);
  font-size: 14px;
}
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-row-2col > div { display: flex; flex-direction: column; gap: 4px; }

.hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* Verknuepfung Leergutartikel -> HFX360 (Artikel-Tabelle) */
.muted { color: var(--text-secondary); }
.hfx-link { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Synonyme / Regeln im Artikel-Formular */
.syn-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.syn-empty { color: var(--text-secondary); font-style: italic; font-size: 13px; }
.syn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg-subtle, rgba(4,179,214,0.10));
  border: 1px solid var(--card-border);
  border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px;
  color: var(--text-primary);
}
.syn-del {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-secondary); font-size: 16px; line-height: 1; padding: 0 2px;
}
.syn-del:hover { color: #dc3545; }
.syn-add { display: flex; gap: 8px; align-items: center; }
.syn-add input {
  flex: 1; padding: 8px 11px; border: 1px solid var(--card-border);
  border-radius: 10px; background: var(--input-bg, var(--card-bg));
  color: var(--text-primary); font-size: 14px; font-family: inherit;
}

.positions-list { display: flex; flex-direction: column; gap: 10px; }

.position-item {
  background: var(--card-bg-subtle, rgba(0,0,0,0.02));
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 7px 10px;
  transition: background 0.3s ease;
}
[data-theme="dark"] .position-item { background: rgba(255,255,255,0.03); }
.position-item.saved-flash { background: rgba(52, 199, 89, 0.10); }

/* Kompakte einzeilige Position: Nr | Artikel | Richtung | Menge | Loeschen */
.position-compact-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 116px 78px 30px;
  gap: 8px; align-items: center;
}
.position-compact-row .pos-typ,
.position-compact-row .pos-menge {
  padding: 7px 9px; border: 1px solid var(--card-border); border-radius: 8px;
  background: var(--input-bg, var(--card-bg)); color: var(--text-primary); font-size: 13px;
}
.position-compact-row .pos-del { padding: 4px 8px; line-height: 1; }
.position-compact-row .combobox-input { padding: 7px 9px; font-size: 13px; }
.position-num { font-weight: 600; color: var(--text-secondary); font-size: 13px; text-align: center; }
.position-subline {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--text-secondary);
  padding-left: 32px; margin-top: 2px;
}
.position-subline:empty { display: none; }
.position-erkannt { font-style: italic; opacity: 0.85; }
.position-erkannt:empty, .position-meta:empty { display: none; }

.scan-card-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

.scan-debug summary { cursor: pointer; font-size: 13px; color: var(--text-secondary); }
.scan-debug pre {
  font-size: 11px;
  background: rgba(0,0,0,0.04);
  padding: 10px;
  border-radius: 8px;
  overflow: auto;
  max-height: 260px;
}
[data-theme="dark"] .scan-debug pre { background: rgba(255,255,255,0.04); }

.loading-state {
  display: flex; align-items: center; gap: 8px;
  padding: 14px; color: var(--text-secondary);
}
.spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--card-border);
  border-top-color: #04b3d6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }