/* =========================================================
   Werksräder24 PWA – app.css (v1.0, basiert auf Trumerholz PWA v0.6)
   Farben/Schrift wie werksraeder24.de
   ========================================================= */

@font-face{ font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url(../assets/fonts/inter-v12-latin-regular.woff2) format("woff2"); }
@font-face{ font-family:Inter; font-style:normal; font-weight:600 900; font-display:swap; src:url(../assets/fonts/inter-v12-latin-600.woff2) format("woff2"); }

/* ---------- Theme / Variables ---------- */
:root{
  /* Backgrounds */
  --bg-body: #ffffff;
  --bg-card: #ffffff;
  --bg-subtle: #f5f5f5;

  /* Text */
  --text-primary: #191919;
  --text-secondary: #4b5563;
  --text-disabled: #9ca3af;

  /* Buttons / Primary */
  --primary: #2e9bda;        /* werksraeder-blue */
  --primary-hover: #1f86c4;
  --primary-active: #0172b2;
  --primary-light: #d5ebf8;  /* color-secondary-lighter */
  --accent: #fcc900;         /* Gelb von werksraeder24.de */
  --success: #10b981;

  /* Borders / Dividers */
  --border: #e5e7eb;
  --border-strong: #c1c1c1;

  /* States */
  --danger: #ef4444;
  --shadow: 0 2px 6px rgba(0,0,0,0.06);
  --radius: .5rem;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{
  height: 100%;
}
body{
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-body);
}
a{ color: inherit; }
img{ max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.app{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.content{
  padding: 14px;
  flex: 1 1 auto;
}
.footer{
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 14px 0 18px;
}

/* ---------- Brand ---------- */
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.brand__logo{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #fff;
  object-fit: contain;
}
.brand__meta{
  min-width: 0;
}
.brand__title{
  font-weight: 800;
  line-height: 1.1;
}
.brand__subtitle{
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
.status{
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ---------- Card ---------- */
.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.card__title{
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

/* ---------- Forms ---------- */
.field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > span{
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* input + spinner wrapper */
.searchwrap{
  position: relative;
  width: 100%;
  min-width: 0;
}
input{
  width: 100%;
  font: inherit;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-primary);
  outline: none;
}
input:focus{
  border-color: var(--border-strong);
  box-shadow: 0 0 0 3px rgba(45,123,92,0.12);
}

/* ---------- Buttons ---------- */
.btn{
  font: inherit;
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  cursor: pointer;
  background: #fff;
  color: var(--text-primary);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .02s ease;
}
.btn:active{
  transform: translateY(1px);
}
.btn[disabled]{
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-primary{
  background: var(--primary);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}
.btn-primary:hover{
  background: var(--primary-hover);
  box-shadow: 0 2px 6px rgba(45,123,92,0.18);
}
.btn-primary:active{
  background: var(--primary-active);
}
.btn--ghost{
  background: transparent;
  border-color: var(--border);
  color: var(--text-primary);
}
.btn--ghost:hover{
  background: var(--bg-subtle);
}

/* ---------- Search row (50/50) ---------- */
.searchrow{
  display: flex;
  gap: 10px;
  align-items: stretch;
}

/* v0.6 – 50/50 wirklich exakt (Grid) */
.searchrow--5050{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 10px;
  align-items: stretch;
}
.searchrow--5050 .searchwrap{
  width: 100%;
  min-width: 0;
}
.searchrow--5050 .searchwrap input{
  width: 100%;
}
.searchrow--5050 .btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ---------- Spinner ---------- */
.spinner{
  position: absolute;
  right: 12px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.15);
  border-top-color: rgba(0,0,0,0.55);
  opacity: 0;
  pointer-events: none;
  animation: spin 0.75s linear infinite;
}
.spinner--on{
  opacity: 1;
}
@keyframes spin{
  to{ transform: rotate(360deg); }
}

/* ---------- List / Items ---------- */
.list{
  display: flex;
  flex-direction: column;
}
.item{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.item:first-child{
  border-top: 0;
}
.item--click{
  cursor: pointer;
}
.item--click:hover{
  background: var(--bg-subtle);
}
.item__left{
  flex: 1 1 auto;
  min-width: 0;
}
.item__nr{
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.item__meta{
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.item__meta b{
  color: var(--text-primary);
  font-weight: 700;
}
.item__right{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--text-secondary);
  min-width: 40px;
  text-align: center;
}

/* ---------- Empty helper (Back link) ---------- */
.emptyhelp{
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-card);
}
.emptyhelp a{
  color: var(--primary);
  font-weight: 800;
  text-decoration: none;
}
.emptyhelp a:hover{
  text-decoration: underline;
}

/* ---------- Modal (Scan) ---------- */
.modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.modal--open{
  display: flex;
}
.modal__panel{
  width: min(560px, 100%);
  background: var(--bg-card);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  overflow: hidden;
}
.modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.modal__body{
  padding: 14px;
}
.modal__actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Scan video */
.scanvideo{
  width: 100%;
  max-height: 55vh;
  background: #000;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ---------- Small screens tweaks ---------- */
@media (max-width: 380px){
  .content{ padding: 10px; }
  .card__header{ padding: 12px 14px; }
  .item{ padding: 12px 14px; }
  input{ padding: 11px 40px 11px 11px; }
  .btn{ padding: 11px 12px; }
}

/* Completed Badge (Index) */
.badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.badge--done{
  background: #e9f7ef;
  border-color: #bfe6cf;
  color: #23664a;
  font-weight: 900;
}

/* kleine grüne Flagge */
.badge--done::before{
  content: "⚑";
  color: #23664a;
  font-size: 0.95em;
  line-height: 1;
}

/* ---------- Werksräder24 ---------- */
/* Logo von werksraeder24.de (SVG, 790×52) */
.brand__logo--wide{
  width: auto; height: 20px; max-width: 46vw;
  border: none; border-radius: 0; background: none;
}
/* Markenblaue Linie unter der Kopfzeile */
.topbar{ border-bottom: 3px solid var(--primary); }

/* Palettentyp-Auswahl im Dialog */
.typepick{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.typepick__btn{
  padding:16px 10px; border:2px solid var(--border-strong); border-radius:var(--radius);
  background:var(--bg-card); color:var(--text-primary); font-weight:800; font-size:1rem; cursor:pointer;
}
.typepick__btn--on{ border-color:var(--primary); background:var(--primary-light); color:var(--primary-active); }

/* Ergebnis der DHL-Buchung */
.booking{ margin-top:14px; padding:12px; border-radius:var(--radius); border:1px solid var(--border); line-height:1.5; }
.booking__title{ font-weight:800; margin-bottom:4px; }
.booking--booked{ border-color:var(--success); background:#ecfdf5; }
.booking--failed, .booking--unknown{ border-color:var(--danger); background:#fdf0f0; }

/* Handy: Kopfzeile nur Logo + Buttons, Titel steht ohnehin in der Karte */
@media (max-width: 520px){
  .topbar .brand__meta{ display: none; }
  .brand__logo--wide{ height: 18px; max-width: 52vw; }
}

/* Modus-Banner Test/Live */
.modebar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; border-radius:var(--radius); border:1px solid; font-size:.92rem; line-height:1.4; }
.modebar--test{ border-color:#f59e0b; background:#fffbeb; color:#92400e; }
.modebar--live{ border-color:var(--success); background:#ecfdf5; color:#065f46; }
.modebar__tag{ font-weight:900; letter-spacing:.06em; padding:2px 8px; border-radius:6px; color:#fff; }
.modebar--test .modebar__tag{ background:#f59e0b; }
.modebar--live .modebar__tag{ background:var(--success); }
.modebar__text{ flex:1 1 220px; }
.modebar__btn{ padding:6px 10px; font-size:.85rem; }

/* Versandart HDL/ECD am Lieferschein */
.productpick{ margin-top:14px; }
.productpick__label{ font-weight:800; margin-bottom:6px; }
.productpick .typepick{ margin-bottom:6px; }
.booking__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.booking__actions .btn{ text-decoration:none; }
.hint--warn{ color:var(--danger); font-size:.9rem; margin-top:4px; }

/* Meldungen in Dialogen umbrechen (lange DHL-Fehler), Zeilenumbrüche aus den Prüfungen beibehalten */
.modal .status, #palletModalStatus, #completeStatus{ white-space: pre-line; overflow-wrap: anywhere; }
.hint--warn{ white-space: pre-line; }

/* Kopfzeile: Burger-Menü + Logout */
.topbar__actions, .topbar > div:last-child{ display:flex; align-items:center; gap:8px; }
.topbar__btn{ padding:10px 12px; line-height:1; text-decoration:none; white-space:nowrap; }
.menuwrap{ position:relative; }
.mainmenu{ position:absolute; right:0; top:calc(100% + 6px); min-width:190px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.12); padding:6px; z-index:30; display:flex; flex-direction:column; }
.mainmenu[hidden]{ display:none; }
.mainmenu__item{ padding:12px 12px; border-radius:8px; color:inherit; text-decoration:none; font-weight:600; }
.mainmenu__item:hover, .mainmenu__item:focus-visible{ background:var(--primary-light); }
.modebar__link{ margin-left:auto; color:inherit; font-weight:600; }

/* Einstellungen */
.settings{ margin-bottom:14px; }
.settings__body{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; }
.settings__text{ margin:0; }
.settings .status{ white-space:pre-line; }

/* Liste aktualisieren */
.card__header--row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.refresh{ display:flex; align-items:center; gap:8px; }
.refresh__time{ font-size:.85rem; color:var(--text-secondary); white-space:nowrap; }
.btn:disabled{ opacity:.6; }
@media (max-width: 420px){
  .topbar__btn{ padding:9px 10px; }
}
.mainmenu__item--sep{ border-top:1px solid var(--border); border-radius:0 0 8px 8px; margin-top:4px; padding-top:14px; }

/* Filter Offen / Erledigt / Alle */
.listfilter{ display:flex; gap:6px; padding:10px 16px 0; flex-wrap:wrap; }
.listfilter__btn{ flex:1 1 0; min-width:0; white-space:nowrap; padding:10px 6px; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-card); font:inherit; font-weight:600; cursor:pointer; color:inherit; }
.listfilter__btn--on{ background:var(--primary); border-color:var(--primary); color:#fff; }
.listfilter__count{ display:inline-block; min-width:1.6em; padding:0 6px; margin-left:4px; border-radius:999px; background:rgba(0,0,0,.08); font-size:.85em; }
.listfilter__btn--on .listfilter__count{ background:rgba(255,255,255,.25); }
.listinfo{ padding:8px 16px 10px; font-size:.85rem; color:var(--text-secondary); border-bottom:1px solid var(--border); }

/* Lazy Loading: "Weitere laden" am Listenende (lädt beim Scrollen automatisch) */
.listmore{ display:block; width:100%; padding:14px; border:0; border-top:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font:inherit; cursor:pointer; }
.listmore[hidden]{ display:none; }

/* Info-Seite */
.infolist{ display:grid; grid-template-columns:max-content 1fr; gap:10px 16px; margin:0; padding:14px 16px; }
.infolist dt{ color:var(--text-secondary); }
.infolist dd{ margin:0; overflow-wrap:anywhere; }
.infook{ color:#16a34a; font-weight:700; }
.infoerr{ color:var(--danger); font-weight:700; }
.infomuted{ color:var(--text-secondary); font-size:.9em; }

/* Detailseite: "Palette hinzufügen" breit im Datenblock, "Abschließen & buchen" orange unter den Paletten (finaler Schritt) */
.btn--block{ display:flex; width:100%; justify-content:center; align-items:center; gap:8px; padding:14px 16px; font-weight:700; font-size:1rem; }
.btn__plus{ font-size:1.3rem; line-height:1; font-weight:800; }
.completebar{ padding:14px 16px 16px; border-top:1px solid var(--border); }
.btn--final{ background:#ea580c; border-color:#ea580c; color:#fff; }
.btn--final:hover{ background:#c2410c; border-color:#c2410c; }
.btn--final:active{ background:#9a3412; border-color:#9a3412; }
.btn--final:disabled{ background:#fdba74; border-color:#fdba74; color:#fff; opacity:1; cursor:not-allowed; }

/* Logo oben links führt zur Startseite */
.brand__home{ display:inline-flex; align-items:center; border-radius:8px; }
.brand__home:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }