/* =====================================================================
 *  pos.css – ergänzende Styles zur CI aus kasse.php
 *  Basis: Bootstrap 5.3. Primär-Grün #198754, heller Hintergrund #f8f9fa.
 * ===================================================================== */
:root{
  --pos-bg:#f8f9fa;
  --pos-primary:#055A18;
  --pos-line:#dee2e6;
  --pos-tile-free:#a9d4ef;
  --pos-tile-busy:#aab4bd;
  --pos-tile-order:#ffcf6b;         /* belegt: offene Bestellung */
  --pos-tile-order-border:#e8941f;
  --pos-tile-sel:#f6d9a8;
  --pos-tile-sel-border:#e8941f;
  --pos-tap:60px;
}
html,body{height:100%;}
body{
  background:var(--pos-bg);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{ -webkit-tap-highlight-color:transparent; }

/* ── Dummy-Hinweisbanner ─────────────────────────────────────────── */
.dummy-banner{
  background:#fff3cd;color:#664d03;border-bottom:1px solid #ffe69c;
  font-size:.78rem;text-align:center;padding:4px 10px;
}

/* ── App-Container / View-Gerüst ─────────────────────────────────── */
#app{ display:block; }
.view{ display:flex; flex-direction:column; min-height: calc(100dvh - 27px); }

/* Kopfzeile je View (zurück | Titel | Aktionen) */
.pos-topbar{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem .9rem;background:#fff;border-bottom:1px solid var(--pos-line);
  position:sticky;top:0;z-index:20;
}
.pos-topbar .title{font-weight:600;font-size:1.05rem;margin:0;}
.pos-topbar .spacer{flex:1;}
.pos-iconbtn{
  width:42px;height:42px;border-radius:10px;border:0;background:transparent;
  display:grid;place-items:center;font-size:1.3rem;color:#212529;
}
.pos-iconbtn:active{background:#eef0f2;}
.pos-iconbtn.active{background:var(--pos-primary);color:#fff;}

/* ── Tischplan (Screen 01) ───────────────────────────────────────── */
.table-grid{
  display:grid;gap:.6rem;padding:.9rem;
  grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));
}
.table-tile{
  position:relative;border-radius:12px;border:2px solid transparent;
  background:var(--pos-tile-free);color:#0b3a57;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-weight:700;font-size:1.05rem;min-height:56px;
}
.table-tile .open{
  font-size:.72rem;font-weight:600;color:#0b3a57;opacity:.85;
}
/* belegt (offene Bestellung) – bleibt hervorgehoben bis vollständig kassiert */
.table-tile.occupied{background:var(--pos-tile-order);border-color:var(--pos-tile-order-border);color:#5c3600;}
.table-tile.reserved{background:var(--pos-tile-busy);color:#3a4149;}
.table-tile.selected{background:var(--pos-tile-sel);border-color:var(--pos-tile-sel-border);color:#7a4a06;}

/* Kachel-Modi ------------------------------------------------------- */
.table-grid.mode-standard .table-tile{aspect-ratio:1/1;}
/* Volle Breite: Kacheln randlos über die gesamte Breite, einheitlich flach */
.table-grid.mode-wide{padding:0;gap:3px;}
.table-grid.mode-wide .table-tile{aspect-ratio:auto;min-height:66px;border-radius:6px;}
/* Volle Höhe: Raster füllt die sichtbare Höhe, alle Reihen ohne Scrollen */
.table-grid.mode-tall{flex:1;padding:.4rem;grid-auto-rows:1fr;grid-template-rows:repeat(var(--rows,10),minmax(0,1fr));}
.table-grid.mode-tall .table-tile{aspect-ratio:auto;}

/* ── Bestell-/Kassier-Layout ─────────────────────────────────────── */
.order-layout{display:flex;flex-direction:column;flex:1;min-height:0;}
.order-main{flex:1;min-height:0;display:flex;flex-direction:column;}

/* Phone-Bestellansicht: Warenkorb oben (scrollt), Kacheln unten fixiert */
.order-phone{height:calc(100dvh - 27px);overflow:hidden;}
.order-phone .cart-items{flex:1;overflow-y:auto;min-height:0;}
.order-phone .mode-switch,
.order-phone .drill-back,
.order-phone .success-banner{flex:0 0 auto;}
.order-phone .product-grid{
  flex:0 0 auto;max-height:52vh;
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom));
}

/* Umschalter Bestellen / Kassieren */
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.6rem .9rem;background:#fff;}
.mode-switch .btn{font-weight:600;}
.cart-bar .mode-switch{padding:.6rem 0 0;background:transparent;}

/* Filter-Chips (Tablet/Suche) */
.filter-bar{display:flex;gap:.5rem;align-items:center;padding:.6rem .9rem;background:#fff;border-bottom:1px solid var(--pos-line);flex-wrap:wrap;}
.filter-bar .form-control{max-width:260px;}

/* Produkt-Kachelraster */
.product-grid{
  display:grid;gap:.55rem;padding:.7rem .9rem;align-content:start;overflow-y:auto;flex:1;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.product-tile{
  position:relative;
  border:0;border-radius:14px;padding:.8rem;min-height:88px;text-align:left;color:#1d1d1d;
  display:flex;flex-direction:column;justify-content:space-between;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.product-tile:active{transform:scale(.97);}
.product-tile .pt-name{font-weight:700;line-height:1.15;padding-right:1.6rem;}
.product-tile .pt-price{font-weight:700;margin-top:.3rem;}
.product-tile .pt-deposit{font-size:.74rem;opacity:.75;}
.product-tile.is-category .pt-more{font-size:.74rem;opacity:.75;}
/* Mengen-Label oben rechts (Anzahl bereits gewählter Produkte) */
.product-tile .tile-badge{
  position:absolute;top:6px;right:6px;min-width:24px;height:24px;padding:0 6px;
  border-radius:999px;background:var(--pos-primary);color:#fff;
  font-size:.82rem;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* Gruppen-Überschrift (Tablet-Liste) */
.group-head{font-size:.8rem;color:#6c757d;font-weight:600;padding:.3rem .2rem;grid-column:1/-1;}

/* Drill-down Zurück-Leiste */
.drill-back{display:flex;align-items:center;gap:.4rem;padding:.5rem .9rem;background:#fff;border-bottom:1px solid var(--pos-line);font-weight:600;}

/* ── Warenkorb ───────────────────────────────────────────────────── */
.cart-items{padding:.4rem .9rem;}
.cart-line{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #eef0f2;}
.cart-line:last-child{border-bottom:0;}
.cart-line .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;}
.cart-line .nm{flex:1;}
.cart-line .nm small{display:block;color:#6c757d;font-size:.72rem;}
.cart-line .lp{font-weight:700;min-width:64px;text-align:right;}
.qty{display:inline-flex;align-items:center;}
.qty .btn{width:38px;height:38px;display:grid;place-items:center;padding:0;font-size:1.2rem;}
.qty .val{min-width:30px;text-align:center;font-weight:700;}
.cart-empty{padding:1.5rem;text-align:center;color:#adb5bd;}

/* Sticky Warenkorb-Leiste (Phone) – Muster aus kasse.php */
.cart-bar{
  position:sticky;bottom:0;background:#fff;border-top:2px solid var(--pos-line);
  padding:.7rem .9rem calc(.7rem + env(safe-area-inset-bottom));z-index:15;
}
.cart-bar .sumline{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.cart-bar .sumline .amt{font-size:1.3rem;font-weight:800;}

/* ── Tablet-Querformat: zwei Spalten mit Warenkorb-Sidebar ───────── */
@media (min-width:992px){
  /* Bestellen/Kassieren: volle Höhe, interne Panels scrollen, Fußzeile fix */
  .view:has(.order-main.split),
  .view:has(.pay-main){height:calc(100dvh - 27px);overflow:hidden;}
  .order-main.split{display:grid;grid-template-columns:1fr 380px;grid-template-rows:1fr;gap:0;min-height:0;}
  .order-main.split .left{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
  .order-main.split .left .product-grid{overflow-y:auto;}
  .order-main.split .cart-side{
    border-left:1px solid var(--pos-line);background:#fff;display:flex;flex-direction:column;min-height:0;
  }
  .order-main.split .cart-side .cart-items{flex:1;overflow-y:auto;}
  .order-main.split .cart-bar{position:static;border-top:1px solid var(--pos-line);}
  /* Standard-Tischplan am Desktop zentriert begrenzen … */
  .table-grid.mode-standard{max-width:1100px;margin:0 auto;}
  /* … „Volle Breite"/„Volle Höhe" dagegen die komplette Browserbreite nutzen */
  .table-grid.mode-wide,
  .table-grid.mode-tall{max-width:none;width:100%;margin:0;}
}

/* ── Kassieren: Desktop links/rechts ─────────────────────────────── */
.pay-main{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0;}
.pay-col{display:flex;flex-direction:column;min-height:0;}
.pay-col.right{border-left:1px solid var(--pos-line);background:#fff;}
.pay-col-head{padding:.6rem .9rem;font-weight:600;background:#fff;border-bottom:1px solid var(--pos-line);}
.pay-col-body{flex:1;overflow-y:auto;padding:.2rem .9rem;}
.pay-col .split-line .breakdown{white-space:normal;}

/* ── Kassieren: Split-Listen (Phone) ─────────────────────────────── */
.pay-list{padding:.4rem .9rem;}
.pay-list .sec-label{font-size:.78rem;color:#6c757d;font-weight:600;margin:.6rem 0 .2rem;}
.split-line{display:flex;align-items:center;gap:.6rem;padding:.55rem 0;border-bottom:1px solid #eef0f2;}
.split-line .nm{flex:1;}
.split-line .breakdown{font-size:.74rem;color:#6c757d;text-align:right;white-space:nowrap;}
.split-divider{border-top:8px solid #e9ecef;margin:.4rem -.9rem;}

/* ── Zahlung (Screen 07) ─────────────────────────────────────────── */
.pay-amount{text-align:center;padding:1.2rem 0 .4rem;}
.pay-amount .big{font-size:3.2rem;font-weight:300;color:#495057;line-height:1;}
.pay-amount .stepper{display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;color:#adb5bd;font-size:1.4rem;}
.pay-amount .step-lbl{font-size:.62rem;color:#6c757d;line-height:1;}
.pay-breakdown{max-width:340px;margin:0 auto .6rem;color:#495057;}
.pay-breakdown .row-line{display:flex;justify-content:space-between;}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 .9rem;max-width:620px;margin:0 auto;}
.pay-methods .btn{min-height:var(--pos-tap);font-weight:700;}
.pay-extra{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.6rem .9rem;max-width:620px;margin:0 auto;}

/* Rückgeldrechner */
.change-calc{background:#fff;border-top:1px solid var(--pos-line);padding:.8rem .9rem calc(.8rem + env(safe-area-inset-bottom));}
.change-calc .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;}
.money-row{display:flex;gap:.4rem;flex-wrap:wrap;}
.money-btn{flex:1 1 60px;min-height:48px;border-radius:10px;border:1px solid var(--pos-line);background:#fff;font-weight:700;}
.money-btn:active{background:#eef0f2;}
.money-btn.note{background:#eaf6ee;}
.money-btn.coin{background:#fff8e6;}

/* ── Bottom-Sheet (Rückpfand etc.) ───────────────────────────────── */
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;z-index:1080;}
.sheet{background:#fff;width:100%;border-radius:18px 18px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));max-height:85dvh;overflow-y:auto;}
.sheet .sheet-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;}
.sheet .sheet-head .title{font-weight:600;font-size:1.05rem;flex:1;}
.sheet-row{display:flex;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid #eef0f2;}
.sheet-row .label{flex:1;}

/* Menü-Sheet-Einträge (mobiles Burger-Menü) */
.menu-row{display:flex;align-items:center;gap:.9rem;width:100%;padding:.85rem .6rem;
  border:0;border-bottom:1px solid #eef0f2;background:transparent;text-align:left;
  font-size:1rem;color:#212529;}
.menu-row i{font-size:1.25rem;width:1.6rem;text-align:center;color:#495057;}
.menu-row.text-danger i{color:inherit;}
.menu-row:last-child{border-bottom:0;}
.menu-row:active{background:#f1f3f5;}

/* ── Bon-Vorschau (Druckauftrag) ──────────────────────────────────── */
.bon-preview{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.35;
  white-space:pre;overflow-x:auto;background:#fff;border:1px dashed #cbd3da;border-radius:.5rem;
  padding:.9rem 1rem;margin:0;max-height:60vh;color:#212529;}

/* ── Login / PIN-Pad ─────────────────────────────────────────────── */
.login-view{align-items:center;justify-content:center;}
.login-box{width:100%;max-width:360px;padding:1.5rem 1.2rem;text-align:center;}
.login-title{font-size:1.3rem;font-weight:700;margin-bottom:.2rem;display:flex;align-items:center;justify-content:center;gap:.4rem;}
.login-sub{color:#6c757d;margin-bottom:1.2rem;}
.login-users{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;}
.login-user{border:1px solid var(--pos-line);background:#fff;border-radius:14px;padding:1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;}
.login-user:active{background:#eef0f2;}
.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:1.2rem;}
.avatar.sm{width:30px;height:30px;font-size:.9rem;}
.login-user .uname{font-weight:600;}
.login-user .urole{font-size:.72rem;color:#6c757d;}
.pin-dots{display:flex;gap:.7rem;justify-content:center;margin:.3rem 0 1.1rem;}
.pin-dot{width:14px;height:14px;border-radius:50%;border:2px solid #adb5bd;}
.pin-dot.on{background:var(--pos-primary);border-color:var(--pos-primary);}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
.pin-key{height:64px;border-radius:14px;border:1px solid var(--pos-line);background:#fff;font-size:1.5rem;font-weight:600;}
.pin-key:active{background:#eef0f2;}
.pin-key.ok{background:var(--pos-primary);color:#fff;border-color:var(--pos-primary);}
.pin-key.back{color:#6c757d;}

/* ── Benutzer-Menü in der Topbar ─────────────────────────────────── */
.user-chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;font-weight:600;color:#495057;padding:0 .3rem;white-space:nowrap;}
.user-chip .dot{width:12px;height:12px;border-radius:50%;}

/* gesperrter Tisch (andere Bedienung) */
.table-tile.locked{background:var(--pos-tile-busy);color:#495057;opacity:.85;}

/* ── Einstellungen / Stammdaten ──────────────────────────────────── */
.set-nav{display:flex;gap:.4rem;overflow-x:auto;padding:.6rem .9rem;background:#fff;border-bottom:1px solid var(--pos-line);}
.set-nav button{white-space:nowrap;border:1px solid var(--pos-line);background:#fff;border-radius:999px;padding:.35rem .8rem;font-size:.85rem;font-weight:600;color:#495057;}
.set-nav button.active{background:var(--pos-primary);color:#fff;border-color:var(--pos-primary);}
.set-body{padding:.9rem;max-width:760px;margin:0 auto;width:100%;}
.set-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem;border-bottom:1px solid #eef0f2;}
.set-row .flex-1{flex:1;min-width:0;}
.sw-dot{width:16px;height:16px;border-radius:4px;flex:0 0 auto;}
.settings-form .form-label{font-weight:600;color:#495057;}
.swatches{display:flex;flex-wrap:wrap;gap:.3rem;}
.swatches .sw{width:26px;height:26px;border-radius:6px;border:1px solid rgba(0,0,0,.12);padding:0;}
.sw-prev{width:28px;height:28px;border-radius:6px;border:1px solid var(--pos-line);flex:0 0 auto;display:inline-block;}
.set-row.active{background:#e8f5ec;border-radius:8px;}
.row-select{cursor:pointer;}
.row-move{display:flex;flex-direction:column;gap:2px;margin-right:.15rem;flex:0 0 auto;}
.row-move .mv{border:1px solid var(--pos-line);background:#fff;border-radius:5px;width:26px;height:18px;display:grid;place-items:center;font-size:.7rem;color:#495057;padding:0;line-height:1;}
.row-move .mv:disabled{opacity:.3;}

/* Produktverwaltung: Kategorien links, Produkte rechts (Desktop) */
.prod-col{min-width:0;}
@media (min-width:992px){
  .set-body:has(.prod-admin){max-width:1040px;}
  .prod-admin{display:grid;grid-template-columns:340px 1fr;gap:1.6rem;align-items:start;}
  .prod-admin .prod-col:first-child{border-right:1px solid var(--pos-line);padding-right:1.2rem;}
}

/* ── Layout-Editor (Tische anordnen) ─────────────────────────────── */
.le-toolbar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;}
.le-grid{display:grid;gap:4px;overflow:auto;padding:.2rem 0 .5rem;}
.le-head{border:0;background:#eef0f2;border-radius:6px;color:#6c757d;display:grid;place-items:center;padding:0;font-size:.8rem;}
.le-head.gap{background:#ced4da;color:#495057;}
.le-cell{border-radius:8px;font-weight:700;font-size:.85rem;padding:0;}
.le-table{background:var(--pos-tile-free);color:#0b3a57;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1;}
.le-table.locked{background:var(--pos-tile-busy);color:#495057;}
.le-table .bi{font-size:.7rem;}
.le-empty{background:#f1f3f5;border:1px dashed #ced4da;color:#adb5bd;display:grid;place-items:center;}
.le-gap{background:repeating-linear-gradient(45deg,#f1f3f5,#f1f3f5 4px,#e9ecef 4px,#e9ecef 8px);border-radius:4px;}

/* ── Letzte Bestellungen ─────────────────────────────────────────── */
.order-row{display:flex;gap:.8rem;align-items:flex-start;padding:.6rem .2rem;border-bottom:1px solid #eef0f2;}
.order-row .order-main{flex:1;min-width:0;}
.order-items{font-size:.82rem;color:#495057;margin-top:.15rem;word-break:break-word;}
.order-meta{font-size:.74rem;color:#6c757d;margin-top:.1rem;}
.order-amount{flex:0 0 auto;white-space:nowrap;}

/* ── Auswertungen ────────────────────────────────────────────────── */
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin-bottom:1.2rem;}
.stat-card{background:#fff;border:1px solid var(--pos-line);border-radius:12px;padding:.8rem;}
.stat-card .k{font-size:.78rem;color:#6c757d;}
.stat-card .v{font-size:1.5rem;font-weight:800;color:var(--pos-primary);}
.stat-section{margin-bottom:1.4rem;}
.stat-section h2{font-size:1rem;font-weight:700;margin-bottom:.6rem;}
.stat-bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem;}
.stat-bar .lbl{width:64px;font-size:.78rem;color:#495057;flex:0 0 auto;text-align:right;}
.stat-bar .track{flex:1;background:#eef0f2;border-radius:6px;height:18px;overflow:hidden;}
.stat-bar .fill{height:100%;background:var(--pos-primary);border-radius:6px;min-width:2px;}
.stat-bar .val{width:82px;text-align:right;font-weight:600;font-size:.82rem;flex:0 0 auto;}

/* ── Toast / Banner ──────────────────────────────────────────────── */
.pos-toast{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top, 0px) + 64px);transform:translateX(-50%);
  background:#212529;color:#fff;padding:.7rem 1.2rem;border-radius:10px;
  z-index:1090;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90vw;text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.pos-toast.show{opacity:1;}
.success-banner{
  background:#198754;color:#fff;padding:.8rem 1rem;display:flex;align-items:center;gap:.5rem;font-weight:500;
}