/**
 * XtremScan App UI — Workbench shell
 * Hallmark · macrostructure: Workbench · design.md App-Dark
 * Hierarchy: ONE primary (Beleg scannen) → secondary → quiet tools
 * 2026-08-09 Premium-Pass: mehr Luft, kein Neon, Tiefenstaffelung
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 */

*, *::before, *::after { box-sizing: border-box; }
html, body {
  overflow-x: clip;
  margin: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
body {
  padding-bottom: env(safe-area-inset-bottom, 0);
  background:
    radial-gradient(1200px 480px at 50% -80px, rgba(59, 127, 255, 0.06), transparent 60%),
    var(--color-bg);
}

h1, h2, h3 {
  font-style: normal;
  letter-spacing: -0.02em;
  margin: 0;
}

.hidden { display: none !important; }

/* —— Shell —— */
.app-shell {
  width: min(100% - 2 * var(--space-5), var(--shell-max));
  margin: 0 auto;
  padding: 0 0 var(--space-9);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

/* —— Header —— */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 64px;
  padding: calc(var(--space-4) + env(safe-area-inset-top, 0)) var(--space-5) var(--space-4);
  margin: 0 calc(-1 * var(--space-5)) 0;
  width: calc(100% + 2 * var(--space-5));
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}
.app-header h1 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.app-header .badge {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: 4px;
  background: transparent;
}
.app-header .local-pill {
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-bg-mid);
  border: 1px solid var(--color-border);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* —— Loop strip —— */
.loop-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: var(--space-2);
}
.loop-step {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-mid);
  min-width: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  box-shadow: none;
}
.loop-step .n {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}
.loop-step .l {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-dim);
  overflow-wrap: anywhere;
}
.loop-step.is-active {
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}
.loop-step.is-active .n { color: var(--color-accent); }
.loop-step.is-active .l { color: var(--color-text); font-weight: 700; }
.loop-step.is-done {
  border-color: color-mix(in srgb, var(--color-ok) 28%, var(--color-border));
  background: var(--color-bg-mid);
}
.loop-step.is-done .n { color: var(--color-ok); }
.loop-step.is-done .l { color: var(--color-text-muted); }

/* —— Cards —— */
.card {
  width: 100%;
  min-width: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}
.card-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--space-4);
}

/* —— Buttons (eine Hauptaktion, Rest zurückhaltend) —— */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
  box-shadow: none;
}
.btn:hover { border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* DIE eine Hauptaktion */
.btn-primary,
.btn-camera {
  background: var(--color-accent);
  border-color: transparent;
  color: #fff;
  min-height: 56px;
  font-size: 1.0625rem;
  font-weight: 700;
  box-shadow: var(--shadow-raised);
}
.btn-primary:hover:not(:disabled),
.btn-camera:hover:not(:disabled) {
  background: var(--color-accent-2);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.btn-primary:active:not(:disabled),
.btn-camera:active:not(:disabled) {
  box-shadow: var(--shadow-soft);
}

/* Zweite Stufe — klar unter der Hauptaktion */
.btn-secondary {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--color-text);
  font-weight: 600;
  min-height: 48px;
  box-shadow: none;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
}

/* Stille Werkzeuge */
.btn-ghost,
.btn-import,
.btn-configure,
.btn-statistics,
.btn-view-followups,
.btn-test {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
  font-weight: 500;
  font-size: 0.875rem;
  min-height: 44px;
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled),
.btn-import:hover:not(:disabled),
.btn-configure:hover:not(:disabled),
.btn-statistics:hover:not(:disabled),
.btn-view-followups:hover:not(:disabled),
.btn-test:hover:not(:disabled) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--color-border);
}

.btn-danger-ghost,
.btn-reset {
  background: transparent;
  border-color: rgba(239, 68, 68, 0.22);
  color: #f0a8a8;
  min-height: 44px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: none;
}
.btn-danger-ghost:hover:not(:disabled),
.btn-reset:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.35);
}

.btn-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-1);
}
.btn-row .btn { width: 100%; }

/* —— Primary stack —— */
.primary-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-border));
  box-shadow: var(--shadow-raised);
}
.primary-stack .card-title {
  margin-bottom: var(--space-2);
}
.hint {
  margin: var(--space-1) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  text-align: center;
  line-height: 1.5;
}

.ocr-status {
  min-height: 1.25em;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-align: center;
}
.ocr-output {
  width: 100%;
  max-height: 160px;
  overflow: auto;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-mid);
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: pre-wrap;
}

/* —— Context (ticker) —— */
.context-panel {
  background: var(--color-bg-mid);
  box-shadow: none;
  padding: var(--space-5);
}
.context-panel label,
.supplier-input label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: var(--space-2);
}
.supplier-input input,
#supplierInput {
  width: 100%;
  min-height: var(--touch);
  padding: 0 var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.9375rem;
  font-family: inherit;
}
.supplier-input input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.order-info h3,
#orderListTitle {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--space-3);
}
#orderItemsContainer {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* —— More (collapsed tools) —— */
.more-panel {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: transparent;
  overflow: hidden;
  box-shadow: none;
}
.more-panel > summary {
  list-style: none;
  cursor: pointer;
  min-height: var(--touch);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
  user-select: none;
}
.more-panel > summary::-webkit-details-marker { display: none; }
.more-panel > summary::after {
  content: "+";
  color: var(--color-text-dim);
  font-weight: 700;
}
.more-panel[open] > summary::after { content: "−"; }
.more-panel[open] > summary {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-bg-mid);
}
.more-panel[open] {
  background: var(--color-bg-mid);
}
.more-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
}
.more-body .btn {
  min-height: var(--touch); /* 48px — Finger/Arbeitshandschuh-Ziel ≥44px */
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: transparent;
}
.more-body .span-2 { grid-column: 1 / -1; }

/* —— Archive —— */
.scans-section {
  width: 100%;
  background: var(--color-bg-mid);
  box-shadow: none;
}
.scans-section h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 var(--space-4);
}
.scans-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
}
.scan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: var(--space-4);
  min-width: 0;
  box-shadow: var(--shadow-soft);
}
.scan-card-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin-bottom: var(--space-2);
}
.scan-card-preview {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.scan-card-empty {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.55;
  background: transparent;
}

/* —— Footer —— */
.app-footer {
  text-align: center;
  padding: var(--space-5) var(--space-3) var(--space-8);
  font-size: 0.75rem;
  color: var(--color-text-dim);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}
.app-footer a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.app-footer a:hover { color: var(--color-text); }
.app-footer a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* —— Toast / badge / banner —— */
#toast-container {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(92vw, 360px);
  pointer-events: none;
}
#privacy-badge {
  display: none;
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: rgba(8, 10, 15, 0.94);
  border: 1px solid var(--color-border);
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

/* —— Modals —— */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.72);
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal.open,
.modal[style*="display: flex"],
.modal[style*="display:flex"] {
  display: flex !important;
}
.modal-content {
  width: min(100%, 380px);
  max-height: min(88vh, 640px);
  overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  box-shadow: var(--shadow-raised);
  position: relative;
}
.modal-content h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 var(--space-5);
  color: var(--color-text);
  padding-right: 28px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.close-modal {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-text-muted);
  border: none;
  background: transparent;
  padding: 4px 8px;
}
.close-modal:focus-visible {
  outline: 2px solid var(--color-accent);
}

/* legacy app-container = shell */
.app-container {
  width: min(100% - 2 * var(--space-5), var(--shell-max));
  margin: 0 auto;
  padding: var(--space-2) 0 var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  min-width: 0;
}

/* old header class if still present */
.header {
  display: none;
}

.ticker-fade { transition: opacity 0.35s var(--ease); }

/* Desktop: etwas mehr Breite + Luft, immer zentriert */
@media (min-width: 768px) {
  .app-container,
  .app-shell {
    width: min(100% - 2 * var(--space-8), var(--shell-max-desktop));
    gap: var(--space-6);
    padding-top: var(--space-4);
  }
  .app-header {
    margin: 0 calc(-1 * var(--space-8)) 0;
    width: calc(100% + 2 * var(--space-8));
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  .primary-stack {
    padding: var(--space-6);
  }
  .card {
    padding: var(--space-6);
  }
}

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