/* Erfassung – App-spezifische Ergänzungen zum REWADI Design System (rewadi-design-system.css).
   Farben, Schriften, Radien und Abstände kommen ausschließlich aus dessen Tokens. */

:root { --font-heading: "Space Grotesk", "Futura", "Century Gothic", system-ui, sans-serif; }

[hidden] { display: none !important; }
* { -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: var(--bg);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
.screen { min-height: 100%; display: flex; flex-direction: column; }

/* Tastenfelder groß genug für Handschuhe */
.btn { min-height: 48px; }
.btn--ghost { background: var(--surface); }
.btn svg { flex: none; }

/* ---------- Login ---------- */
#login { justify-content: center; padding: var(--space-6) var(--space-4); background: var(--surface-2); }
.login { display: grid; gap: var(--space-4); max-width: 420px; width: 100%; margin: 0 auto; padding: var(--space-6); box-shadow: var(--shadow-md); }
.login:hover { transform: none; }
.login__logo img { height: 56px; width: auto; }
.login h1 { font-size: var(--fs-h2); margin: 0; }
.login .eyebrow { margin-bottom: var(--space-2); }
.login .field { margin: 0; }

/* ---------- Kopfzeile ---------- */
.top {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.top__logo { height: 32px; width: auto; }
.top__title { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: .01em; }
.iconbtn { background: none; border: 0; padding: var(--space-2); cursor: pointer; color: var(--text); border-radius: var(--radius-sm); }
.iconbtn svg { width: 24px; height: 24px; }

.sync { margin-left: auto; font-size: var(--fs-xs); color: var(--text-mute); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-mute); }
.sync.ok::before { background: var(--success); }
.sync.pending::before { background: var(--primary); }
.sync.offline::before { background: var(--danger); }

/* ---------- Kamera ---------- */
.cam {
  position: relative; margin: var(--space-3) var(--space-3) 0; border-radius: var(--radius); overflow: hidden;
  background: var(--rw-ink-900); height: 38vh; min-height: 220px; box-shadow: var(--shadow-md);
}
.cam video { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cam.auto { height: 55vh; }
.cam.auto .frame { display: none; }
.frame { position: absolute; inset: 22% 8%; border: 2px solid rgba(255, 255, 255, .75); border-radius: var(--radius-sm); pointer-events: none; }
.laser { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--rw-terra-600); box-shadow: 0 0 8px var(--rw-terra-600); opacity: .85; }
.cam.paused .laser, .cam.idle .laser { display: none; }
.flash { position: absolute; inset: 0; border: 6px solid var(--rw-gold-500); opacity: 0; pointer-events: none; transition: opacity .35s; border-radius: var(--radius); }
.flash.on { opacity: 1; transition: none; }
.flash.again { border-color: var(--rw-gold-700); }
.start { position: absolute; inset: 0; margin: auto; width: max-content; height: 60px; }
.start svg { width: 20px; height: 20px; }
.camtools { position: absolute; right: var(--space-2); bottom: var(--space-2); display: flex; gap: var(--space-2); }
.camtool {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(11, 19, 32, .7); color: #fff; font-size: 18px; font-weight: 700;
}
.toast, .autoState {
  position: absolute; left: var(--space-2); right: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); background: rgba(11, 19, 32, .85); color: #fff;
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
}
.toast { top: var(--space-2); border-left: 4px solid var(--rw-gold-500); }
.autoState { bottom: var(--space-2); right: 120px; }
.autoState.ready { color: var(--rw-gold-300); }
.autoState.busy { color: var(--rw-terra-300); }
.autoState.done { color: #9fe0a8; }

/* ---------- Einstellungen ---------- */
.settings { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3) var(--space-3) 0; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 3px; }
.seg button { border: 0; background: none; padding: 9px 16px; border-radius: var(--radius-pill); font-weight: var(--fw-semibold); cursor: pointer; color: var(--text-soft); }
.seg button.on { background: var(--gradient-brand); color: var(--on-primary); }
.toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  padding: 9px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--rw-gold-700); }
#catSelect { flex: 1 1 160px; width: auto; border-radius: var(--radius-pill); border-color: var(--primary); font-weight: var(--fw-semibold); }

.actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3); }
.actions .btn { padding-inline: var(--space-3); min-width: 0; white-space: normal; font-size: var(--fs-sm); line-height: 1.2; }

/* ---------- Liste ---------- */
.listHead { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) var(--space-4) var(--space-2); font-size: var(--fs-xs); }
.listHead .eyebrow { margin: 0; font-size: var(--fs-xs); }
.list { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-6); display: grid; gap: var(--space-2); }
.item {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2);
}
.item.hl { border-color: var(--primary); box-shadow: var(--ring); }
.thumb {
  width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--surface-2); object-fit: cover;
  display: grid; place-items: center; border: 1px solid var(--border); padding: 0; cursor: pointer; color: var(--text-mute);
}
.thumb svg { width: 22px; height: 22px; }
img.thumb { border: 0; }
.info { min-width: 0; }
.name { font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-snug); }
.meta { font-size: var(--fs-xs); color: var(--text-mute); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-top: 2px; }
.meta .badge { padding: 1px 8px; }
.badge--ok { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.qty { display: flex; align-items: center; gap: var(--space-1); }
.qty button {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface); font-size: 20px; cursor: pointer; line-height: 1;
}
.qty .n { min-width: 38px; width: auto; border: 0; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.1rem; background: none; }

/* ---------- Dialoge ---------- */
dialog.sheet {
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--surface); color: var(--text);
  width: 100%; max-width: 560px; margin: auto auto 0; padding: var(--space-5) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: rgba(11, 19, 32, .6); }
dialog form { display: grid; gap: var(--space-3); }
#photoPreview { width: 100%; max-height: 40vh; object-fit: contain; border-radius: var(--radius); background: var(--rw-ink-900); }
.qtyRow { display: grid; grid-template-columns: 1fr 48px 90px 48px; gap: var(--space-2); align-items: center; }
.qtyRow input { text-align: center; }
.btn.sq { padding: 0; width: 48px; font-size: 22px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.qtyTitle { font-weight: var(--fw-semibold); text-align: center; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qtyValue { font-family: var(--font-heading); font-size: 48px; font-weight: var(--fw-bold); text-align: center; line-height: 1.1; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.pad button {
  height: 58px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2);
  font-family: var(--font-heading); font-size: 24px; font-weight: var(--fw-bold); cursor: pointer;
}
.pad button:active { background: var(--primary-soft); }
#menuDlg .text-muted { margin: 0; }