/* Minimal styles */
:root { --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af; --accent:#22c55e; --danger:#ef4444; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial; background: var(--bg); color: var(--text); }
header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:#0b1220; position:sticky; top:0; z-index:10; border-bottom:1px solid #1f2937; }
h1 { font-size: 20px; margin:0; }
nav button { margin-right:8px; padding:8px 12px; background:#1f2937; color:#fff; border:1px solid #374151; border-radius:10px; cursor:pointer; }
nav button.active { background:#111827; border-color:#22c55e; }
.container { padding:18px; display:grid; gap:16px; grid-template-columns: 1fr; max-width: 1100px; margin: 0 auto; }
.card { background: var(--card); border:1px solid #1f2937; border-radius:16px; padding:16px; }
label { display:block; font-size:12px; color:#fefeff; margin-bottom:6px; }
input, select, textarea { width:100%; padding:10px; border-radius:10px; border:1px solid #374151; background:#0b1220; color:#fff; }
input[type="date"], input[type="datetime-local"], input[type="number"] { color-scheme: dark; }
button.primary { background: var(--accent); color:#052e16; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600; }
button.secondary { background:#1f2937; border:1px solid #374151; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; }
button.danger { background: var(--danger); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.table { width:100%; border-collapse: collapse; font-size:14px; }
.table th, .table td { border-bottom:1px solid #1f2937; padding:8px; text-align:center; }
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:12px; border:1px solid #374151; }
.badge.green { background:#052e16; color:#22c55e; border-color:#14532d; }
.badge.yellow { background:#3d2a00; color:#f59e0b; border-color:#7c5900; }
.badge.red { background:#3f1d1d; color:#ef4444; border-color:#7f1d1d; }
.grid { display:grid; gap:12px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; color:#9ca3af; }
.video { width:100%; aspect-ratio: 16/9; background:#0b1220; border-radius:12px; border:1px solid #1f2937; }
hr.sep { border:0; border-top:1px dashed #334155; margin: 16px 0; }
footer { text-align:center; color:#9ca3af; padding:16px; font-size:12px; }
/* Lagerplatz-Block in der Artikelliste */
.loc-block{
  display:inline-block;
  min-width: 140px;
  background:#f8fafc;        /* helles Grau/Blau */
  border:1px solid #e5e7eb;  /* zartes Grau */
  border-radius:10px;
  padding:6px 8px;
  line-height:1.2;
}


.loc-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:12px;
  margin:2px 0;
}

.loc-label{
  opacity:.65;
}
.scanlager {
  background-color: brown;
  width: 100px;
  font-size: 20px;
  font-weight: bold;
}


.loc-value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight:600;
}

/* Kompakter Lagerplatz-Chip */
.loc-chip{
  display:inline-block;
  background:#e5e7eb;       /* leicht dunkles Grau */
  color:#111827;            /* sehr dunkles Grau für gute Lesbarkeit */
  padding:4px 10px;
  border-radius:9999px;     /* Pill-Form */
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
}
.col-name {
  text-align: left;
  vertical-align: middle;
}

/* optional: leicht enger, damit die Tabellenzeile nicht springt */
.table td .loc-chip{
  vertical-align:middle;
}

.moni {
  border: #f7f7f7;
  font-size: 27px;
  background-color: brown;
  margin-right: 75%;
  border-style: ;
  box-sizing: ;
  padding-bottom: 5px;
  font-style: ;
  text-align: center;
}

#items-table th.col-img {
  text-align: left;
}

/* ====== Responsive + Offcanvas ====== */

/* Variablen */
:root{
  --header-h: 56px;
  --oc-width: 280px;
  --oc-z: 1000;
}

/* Header: Platz für Hamburger-Button */
header{
  min-height: var(--header-h);
  gap: 10px;
}

/* Hamburger-Button (nur Mobile sichtbar) */
.hamburger{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:#1f2937; border:1px solid #374151; color:#e5e7eb;
  cursor:pointer; padding:0;
}
.hamburger .bar{
  position:relative; width:18px; height:2px; background:#e5e7eb; border-radius:2px;
}
.hamburger .bar::before,
.hamburger .bar::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#e5e7eb; border-radius:2px;
}
.hamburger .bar::before{ top:-6px; }
.hamburger .bar::after{  top: 6px; }

/* Desktop: Hamburger ausblenden */
@media (min-width: 992px){
  .hamburger{ display:none; }
}

/* ---------- Offcanvas Container ---------- */
.offcanvas{
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: var(--oc-width);
  background: var(--card);
  border-right: 1px solid #1f2937;
  padding: 14px;
  transform: translateX(-100%);
  transition: transform .25s ease, box-shadow .25s ease;
  z-index: var(--oc-z);
  overflow-y: auto;
}
.offcanvas.is-open{
  transform: translateX(0);
  box-shadow: 8px 0 24px rgba(0,0,0,.35);
}

/* Inhalt im Offcanvas */
.offcanvas .menu-title{
  font-size:14px; color:var(--muted); margin:6px 0 10px;
}
.offcanvas a,
.offcanvas button.link{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; color:var(--text);
  text-decoration:none; background:#0b1220; border:1px solid #1f2937;
  margin-bottom:8px;
}
.offcanvas a:hover{ background:#111827; }

/* Backdrop */
.offcanvas-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  z-index: calc(var(--oc-z) - 1);
}
.offcanvas-backdrop.is-open{ opacity: 1; pointer-events: auto; }

/* Body bei offenem Menü fixieren */
body.has-offcanvas-open{ overflow: hidden; }

/* ---------- Desktop-Verhalten: als feste Sidebar ---------- */
@media (min-width: 992px){
  .offcanvas{
    position: sticky;
    top: calc(var(--header-h) + 12px);
    height: calc(100dvh - var(--header-h) - 24px);
    transform: none; box-shadow: none;
    border-radius: 16px; margin-left: 18px;
  }
  .offcanvas-backdrop{ display:none !important; }
}

/* ---------- Table Responsiveness ---------- */

/* Tabelle in Scroll-Wrapper legen (Markup: <div class="table-wrap"><table class="table">...) */
.table-wrap{
  width:100%; overflow:auto; -webkit-overflow-scrolling: touch;
  border:1px solid #1f2937; border-radius: 12px; background: var(--card);
}
.table-wrap .table{ margin:0; min-width: 760px; } /* verhindert zu engen Umbruch */

/* Sticky Kopf auf mobilen Geräten optional */
@supports (position: sticky){
  .table thead th{
    position: sticky; top: 0; z-index: 2;
    background: #0f1526; /* leicht dunkler für Kontrast */
  }
}

/* Kleinere Typo auf sehr schmalen Geräten */
@media (max-width: 420px){
  .table{ font-size: 13px; }
  .table th, .table td{ padding: 8px 6px; }
}

/* ---------- Formulare/Buttons Mobile ---------- */
@media (max-width: 768px){
  .container{ padding: 14px; }
  .grid.two, .grid.three{ grid-template-columns: 1fr; } /* untereinander */
  .actions{ gap:10px; }
  .actions > button{ width:100%; } /* Buttons vollbreit, wenn gewünscht */
}

/* ---------- Bildspalte & Platzhalter ---------- */

.img-thumb{
  width:36px; height:36px; object-fit:cover; border-radius:6px;
  border:1px solid #1f2937; background:#0b1220;
}

/* Fallback-Bild (wenn <img> fehlt, z. B. via <div class="img-fallback">) */
.img-fallback{
  width:36px; height:36px; border-radius:6px; border:1px solid #1f2937; background:#0b1220;
}


/* Danger-Farbe in Tabellenzellen */
.table td.danger{ color:#ef4444; font-weight:600; }

/* Lagerplatz-Pill optisch an Tabelle angepasst (hell auf dunklem Hintergrund) */
.loc-chip{
  background:#e5e7eb; color:#111827; border:0;
}
.table td .loc-chip{ vertical-align:middle; }

/* ---------- Utility: Verstecke Text auf XS, zeige Icon etc. ---------- */
.hide-xs{ display:none; }
@media (min-width: 480px){
  .hide-xs{ display:initial; }
}

/* ---------- Kleine Quality-of-Life Tweaks ---------- */
button, .hamburger{ -webkit-tap-highlight-color: transparent; }
a, button{ touch-action: manipulation; }

/* Falls du die Tabellenüberschriften linksbündig willst */
#items-table th{ text-align: center; }
#items-table th.col-id, #items-table th.col-stock, #items-table th.col-free, #items-table th.col-qr{ text-align:center; }

.table-wrap { overflow:auto; -webkit-overflow-scrolling:touch; }
#items-table th.col-img, #items-table td.col-img { width:56px; }
.img-thumb { display:block; }



/* -------- Offcanvas: Desktop aus, Mobile an -------- */

/* Standard (Desktop-first): alles verstecken */
#sideMenu,
#ocBackdrop,
#menuBtn {
  display: none;
}

/* Mobile/Tablet */
@media (max-width: 1024px) {
  /* Hamburger-Button anzeigen */
  #menuBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid #374151;
    background: #1f2937;
    color: #e5e7eb;
    cursor: pointer;
  }
  #menuBtn:active { transform: scale(0.98); }

  /* Panel sichtbar (aber zugeklappt nach links) */
  #sideMenu {
    display: block;
    position: fixed;
    inset: 0 auto 0 0;       /* top:0; left:0; bottom:0 */
    width: min(80vw, 320px);
    background: #0b1220;
    border-right: 1px solid #1f2937;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
    padding: 16px;
    overflow-y: auto;
  }
  /* aufgeklappt */
  #sideMenu.is-open { transform: translateX(0); }

  /* Backdrop */
  #ocBackdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 999;
  }
  #ocBackdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* Menü-Inhalte hübsch */
  #sideMenu .menu-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: #e5e7eb;
  }
  #sideMenu a {
    display: block;
    padding: 12px 10px;
    color: #e5e7eb;
    text-decoration: none;
    border-radius: 12px;
    border: 1px solid transparent;
    margin: 4px 0;
  }
  #sideMenu a:hover {
    background: #111827;
    border-color: #1f2937;
  }
}


/* Burger-Button standardmäßig verstecken (nur mobil zeigen) */
.menu-toggle {
  display: none;
  background: #1f2937;
  color: #fff;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 18px;
  cursor: pointer;
}

/* Offcanvas-Basis */
.offcanvas {
  position: fixed;
  top: 0;
  left: -280px;           /* außerhalb des Screens */
  width: 260px;
  height: 100vh;
  background: #0b1220;
  border-right: 1px solid #1f2937;
  padding: 16px;
  z-index: 1000;
  transition: left 0.25s ease;
  overflow-y: auto;
}
.offcanvas .menu-title {
  font-weight: 700;
  margin-bottom: 12px;
}
.offcanvas a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  color: #e5e7eb;
  text-decoration: none;
  border: 1px solid transparent;
}
.offcanvas a:hover {
  background: #111827;
  border-color: #1f2937;
}

.offcanvas.open { left: 0; }

.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
  display: none;
}
.offcanvas-backdrop.show { display: block; }

body.no-scroll { overflow: hidden; }

/* ====== Responsive Regeln ====== */

/* Mobil & Tablet: Desktop-Nav ausblenden, Burger + Offcanvas aktivieren */
@media (max-width: 768px) {
  header .nav-main { display: none !important; }
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .offcanvas { display: block; }            /* Offcanvas existiert mobil */
}

/* Desktop: Offcanvas komplett ausschalten */
@media (min-width: 769px) {
  .offcanvas,
  .offcanvas-backdrop,
  .menu-toggle { display: none !important; }
}


/* Overlay */
#edit-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  /* du schaltest per JS display:block/none – lassen wir so */
  background: rgba(0,0,0,.45);
  padding: 12px; /* etwas Rand, damit die Karte auf kleinen Screens Luft hat */
}

/* Der eigentliche Dialog-Container.
   Wenn du schon einen inneren Wrapper hast, gib ihm die Klasse .dialog.
   Fallback: der erste direkte Child wird ebenso getroffen (siehe Selektor unten). */
#edit-modal > .dialog,
#edit-modal > div.dialog,
#edit-modal > :first-child:not(script):not(style){
  margin: auto;
  background: #fff;
  color: #111;
  width: min(720px, 96vw);
  max-height: min(92vh, 1000px);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Header/Footer sticky, Body scrollt */
}

/* Optionale Bereiche, falls vorhanden */
#edit-modal .dialog-header{
  position: sticky; top: 0;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 1;
}
#edit-modal .dialog-body{
  padding: 12px 14px;
  overflow: auto; /* nur der Body scrollt */
}
#edit-modal .dialog-footer{
  position: sticky; bottom: 0;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid #eee;
  z-index: 1;
}

/* Form & Medien im Modal */
#edit-modal input,
#edit-modal select,
#edit-modal textarea,
#edit-modal button{
  max-width: 100%;
}

/* Bildvorschau mobil verkleinern */
#edit-modal img#edit-image-preview{
  width: clamp(100px, 36vw, 180px);
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 8px;
}

/* Zwei-Spalten-Formulare auf Mobil stapeln */
#edit-modal .two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px){
  #edit-modal .two-col{ grid-template-columns: 1fr; }
}

/* Mobile Finetuning */
@media (max-width: 640px){
  #edit-modal > .dialog,
  #edit-modal > div.dialog,
  #edit-modal > :first-child:not(script):not(style){
    width: 96vw;
    max-height: 92vh;
    border-radius: 14px;
  }
  /* iOS: Verhindert Zoom beim Fokus */
  #edit-modal input,
  #edit-modal select,
  #edit-modal textarea{
    font-size: 16px;
  }
}

/* Scrollen des Hintergrunds verhindern, wenn Modal offen */
body.no-scroll{ overflow: hidden; }


.loc-stack{
  display:flex;
  flex-direction:column;
  gap:2px;
  line-height:1.15;
  white-space:nowrap; /* wenn du Umbruch willst: auf normal ändern */
}

.grid.four{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
}

@media (max-width: 900px){
  .grid.four{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid.four{ grid-template-columns: 1fr; }
}


/* Accordion Styling */
.supplier-group {
    background: #111827;
    border: 1px solid #374151;
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.supplier-group summary {
    padding: 12px 16px;
    background: #1f2937;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

.supplier-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mini-btn {
    font-size: 11px;
    padding: 4px 10px;
    margin: 0;
}

/* Tabelle innerhalb des Accordions etwas kompakter */
.supplier-group .table-wrap {
    padding: 0;
}

.supplier-group table {
    margin: 0;
    border: none;
    font-size: 0.9rem;
}