/* =====================================================================
   ADMIN DASHBOARD — Bagdad Döner
   PIN-Login · Kanban Board · Bon-Druck
   ===================================================================== */
:root{
  --ink:#1a1a1f;
  --ink-2:#222228;
  --ink-3:#2a2a32;
  --bone:#f8f4ec;
  --bone-2:#ede7da;
  --paper:#fdfbf7;
  --muted:#8a8578;
  --accent:#D4A843;
  --accent-2:#E8C26A;
  --red:#C0392B;
  --green:#27ae60;
  --blue:#2980b9;
  --line:rgba(26,26,31,.12);
  --serif:"Playfair Display",Georgia,serif;
  --grotesk:"Space Grotesk",-apple-system,Segoe UI,sans-serif;
  --sans:"Inter",-apple-system,Segoe UI,Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:#141417;
  color:var(--bone);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.hidden{display:none!important}

/* =====================================================================
   LOGIN
   ===================================================================== */
.login-overlay{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  background:#141417;
}
.login-card{
  display:flex;flex-direction:column;align-items:center;gap:1.8rem;
  width:min(380px,90vw);padding:3rem 2rem;
  background:var(--ink-2);border:1px solid rgba(255,255,255,.06);
  border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.5);
}
.login-brand{display:flex;flex-direction:column;align-items:center;line-height:.92}
.login-brand .brand-b{font-family:var(--serif);font-size:1.8rem;font-weight:700;letter-spacing:.2em;color:var(--accent)}
.login-brand .brand-sub{font-family:var(--grotesk);font-size:.55rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}
.login-hint{font-family:var(--grotesk);font-size:.82rem;letter-spacing:.1em;color:var(--muted)}

.pin-dots{display:flex;gap:1rem}
.pin-dots span{
  width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
  transition:.2s var(--ease);
}
.pin-dots span.filled{
  background:var(--accent);border-color:var(--accent);
  transform:scale(1.2);
}
.pin-dots span.error{
  background:var(--red);border-color:var(--red);
  animation:shake .4s var(--ease);
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}
}

.pin-pad{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;
  width:260px;
}
.pin-pad button{
  width:70px;height:58px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  color:var(--bone);font-family:var(--grotesk);font-size:1.4rem;font-weight:500;
  cursor:pointer;transition:.2s var(--ease);
  display:grid;place-items:center;
}
.pin-pad button:hover{background:rgba(255,255,255,.1)}
.pin-pad button:active{transform:scale(.95)}
.pin-pad .pin-empty{visibility:hidden}
.pin-pad .pin-del{font-size:1.1rem;letter-spacing:0}
.pin-error{font-size:.82rem;color:var(--red);min-height:1.2rem;transition:.3s}

/* =====================================================================
   ADMIN HEADER
   ===================================================================== */
.admin-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 2rem;
  background:rgba(20,20,23,.95);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:50;
}
.admin-brand{display:flex;flex-direction:column;line-height:.92}
.admin-brand .brand-b{font-family:var(--serif);font-size:1.2rem;font-weight:700;letter-spacing:.2em;color:var(--accent)}
.admin-brand .brand-sub{font-family:var(--grotesk);font-size:.5rem;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);margin-top:.2rem}

.admin-stats{display:flex;gap:.8rem}
.stat-pill{
  display:flex;align-items:center;gap:.4rem;
  padding:.45rem 1rem;border-radius:100px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-family:var(--grotesk);font-size:.72rem;letter-spacing:.06em;color:var(--muted);
}
.stat-pill.active{border-color:rgba(41,128,185,.4);color:var(--blue)}
.stat-pill.done{border-color:rgba(39,174,96,.4);color:var(--green)}
.stat-num{font-weight:700;font-size:.95rem;color:var(--bone)}
.stat-pill.active .stat-num{color:var(--blue)}
.stat-pill.done .stat-num{color:var(--green)}

.logout-btn{
  padding:.55rem 1.2rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.12);background:transparent;
  color:var(--muted);font-family:var(--grotesk);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  transition:.3s var(--ease);
}
.logout-btn:hover{background:rgba(255,255,255,.06);color:var(--bone)}

.admin-nav{display:flex;gap:.3rem;background:var(--ink-2);border-radius:12px;padding:.3rem}
.admin-nav-link{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.45rem .85rem;border-radius:9px;
  font-family:var(--grotesk);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);transition:.25s var(--ease);text-decoration:none;font-weight:500;
}
.admin-nav-link:hover{color:var(--bone);background:rgba(255,255,255,.04)}
.admin-nav-link.active{background:var(--accent);color:var(--ink);font-weight:600}
.admin-nav-link svg{width:13px;height:13px}

/* =====================================================================
   KANBAN
   ===================================================================== */
.kanban{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  height:calc(100vh - 64px);min-height:500px;
  background:rgba(255,255,255,.04);
}
.kanban-col{
  display:flex;flex-direction:column;
  background:#141417;overflow:hidden;
}
.kanban-col-head{
  display:flex;align-items:center;gap:.6rem;
  padding:1.2rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;background:#141417;z-index:2;
}
.kanban-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.kanban-dot.new{background:var(--accent)}
.kanban-dot.prep{background:var(--blue)}
.kanban-dot.ready{background:var(--green)}
.kanban-dot.out{background:var(--muted)}
.kanban-col-head h3{
  font-family:var(--grotesk);font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bone);font-weight:500;flex:1;
}
.kanban-count{
  font-family:var(--grotesk);font-size:.68rem;font-weight:700;
  background:rgba(255,255,255,.06);border-radius:100px;
  padding:.2rem .65rem;color:var(--muted);
}

.kanban-cards{
  flex:1;overflow-y:auto;padding:.8rem;
  display:flex;flex-direction:column;gap:.7rem;
}
.kanban-cards::-webkit-scrollbar{width:4px}
.kanban-cards::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* =====================================================================
   ORDER CARD
   ===================================================================== */
.order-card{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:1.2rem;
  display:flex;flex-direction:column;gap:.8rem;
  transition:.3s var(--ease);
  animation:cardIn .4s var(--ease-out);
}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.order-card:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.order-card.overdue{border-color:rgba(192,57,43,.4);animation:pulseOverdue 2s infinite}
@keyframes pulseOverdue{0%,100%{border-color:rgba(192,57,43,.4)}50%{border-color:rgba(192,57,43,.15)}}

.order-card-top{display:flex;justify-content:space-between;align-items:center}
.order-id{
  font-family:var(--grotesk);font-size:.68rem;letter-spacing:.08em;
  color:var(--accent);font-weight:600;text-transform:uppercase;
}
.order-time{font-family:var(--grotesk);font-size:.68rem;color:var(--muted)}

.order-customer{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--bone);
}
.order-address{font-size:.82rem;color:var(--muted);line-height:1.4}

.order-items{display:flex;flex-direction:column;gap:.3rem}
.order-item{
  display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;
  font-size:.85rem;padding:.3rem 0;
}
.order-item-name{flex:1;color:var(--bone)}
.order-item-qty{
  font-family:var(--grotesk);font-size:.72rem;font-weight:600;
  color:var(--accent);white-space:nowrap;
}
.order-item-details{
  font-size:.76rem;color:var(--muted);line-height:1.4;
  padding-left:.3rem;
}

.order-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.order-tag{
  font-family:var(--grotesk);font-size:.66rem;letter-spacing:.06em;
  padding:.3rem .6rem;border-radius:100px;
  background:rgba(255,255,255,.06);color:var(--muted);
}
.order-tag.delivery{background:rgba(41,128,185,.15);color:var(--blue)}
.order-tag.pickup{background:rgba(39,174,96,.15);color:var(--green)}
.order-tag.bar{background:rgba(212,168,67,.15);color:var(--accent)}
.order-tag.ec{background:rgba(41,128,185,.15);color:var(--blue)}
.order-tag.paypal{background:rgba(0,112,192,.15);color:#0070c0}
.order-total{
  font-family:var(--grotesk);font-size:.95rem;font-weight:700;color:var(--accent);
  margin-top:.2rem;
}

.order-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.order-btn{
  flex:1;min-width:80px;
  padding:.55rem .8rem;border-radius:10px;
  font-family:var(--grotesk);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:.25s var(--ease);border:none;
  text-align:center;
}
.order-btn.bon{background:rgba(255,255,255,.06);color:var(--bone)}
.order-btn.bon:hover{background:rgba(255,255,255,.1)}
.order-btn.advance{background:var(--accent);color:var(--ink)}
.order-btn.advance:hover{background:var(--accent-2)}
.order-btn.done{background:var(--green);color:#fff}
.order-btn.done:hover{background:#2ecc71}
.order-btn.ship{background:var(--blue);color:#fff}
.order-btn.ship:hover{background:#3498db}

.order-card.delivered{opacity:.45;border-style:dashed}

/* =====================================================================
   MODAL OVERLAY — Bon & generic
   ===================================================================== */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  place-items:center;
  background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.modal-overlay.on{display:grid}
.modal{
  background:rgba(20,20,23,.96);border:1px solid rgba(255,255,255,.1);
  border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.6);
  width:min(440px,92vw);max-height:88vh;overflow:hidden;
  display:flex;flex-direction:column;
  animation:modalIn .25s var(--ease-out);
}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.6rem;border-bottom:1px solid rgba(255,255,255,.06);
}
.modal-head h3{font-family:var(--grotesk);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.modal-close{
  width:32px;height:32px;border-radius:8px;border:none;
  background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;transition:.2s;
}
.modal-close:hover{background:rgba(255,255,255,.12);color:var(--bone)}
.modal-close svg{width:16px;height:16px}
.modal-body{flex:1;overflow-y:auto;padding:1.4rem 1.6rem}

/* =====================================================================
   BON
   ===================================================================== */
.bon-modal{max-width:400px}
.bon-modal .modal-body{
  background:#fff;color:#000;font-family:"Courier New",monospace;
  padding:2rem;font-size:.85rem;line-height:1.6;
  white-space:pre-wrap;word-break:break-word;
}
.bon-header{text-align:center;border-bottom:2px dashed #000;padding-bottom:.8rem;margin-bottom:.8rem}
.bon-header h4{font-size:1.1rem;font-weight:700;letter-spacing:.1em;margin-bottom:.2rem}
.bon-header p{font-size:.72rem;color:#555}
.bon-divider{border-top:1px dashed #999;margin:.6rem 0}
.bon-item{display:flex;justify-content:space-between;margin:.2rem 0}
.bon-item-det{font-size:.78rem;color:#555}
.bon-total{border-top:2px dashed #000;padding-top:.6rem;margin-top:.6rem;font-weight:700;font-size:1rem;display:flex;justify-content:space-between}
.bon-footer{text-align:center;margin-top:.8rem;font-size:.72rem;color:#555;border-top:1px dashed #999;padding-top:.6rem}

.bon-actions{
  display:flex;justify-content:center;padding:1rem 1.8rem;
  border-top:1px solid var(--line);gap:.8rem;
}
.bon-actions .btn{font-size:.74rem;padding:.7rem 1.4rem}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:1100px){
  .kanban{grid-template-columns:repeat(2,1fr);height:auto}
  .kanban-col{min-height:40vh}
}
@media(max-width:640px){
  .kanban{grid-template-columns:1fr}
  .kanban-col{min-height:auto}
  .admin-header{flex-wrap:wrap;gap:.8rem;padding:.8rem 1.2rem}
  .admin-nav{order:3;width:100%;justify-content:center}
  .admin-stats{order:4;width:100%;justify-content:center}
  .pin-pad{width:240px}
  .pin-pad button{width:64px;height:52px;font-size:1.2rem}
}

/* =====================================================================
   MENU MANAGEMENT BUTTON
   ===================================================================== */
.menu-mgmt-btn{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.5rem 1rem;border-radius:100px;
  border:1px solid rgba(212,168,67,.3);background:rgba(212,168,67,.1);
  color:var(--accent);font-family:var(--grotesk);font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  cursor:pointer;transition:.25s var(--ease);white-space:nowrap;
}
.menu-mgmt-btn:hover{background:rgba(212,168,67,.2);border-color:var(--accent)}

/* =====================================================================
   SPEISEKARTE MANAGER
   ===================================================================== */
.menu-manager-modal{max-width:700px}
.mm-toolbar{display:flex;gap:.6rem;margin-bottom:1rem;flex-wrap:wrap}
.mm-search,.mm-filter{
  padding:.5rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:var(--bone);font-family:var(--sans);font-size:.82rem;
}
.mm-search{flex:1;min-width:140px}
.mm-filter{min-width:120px}
.mm-filter option{background:var(--ink-2);color:var(--bone)}
.mm-add-btn{
  padding:.5rem 1.2rem;border-radius:10px;border:none;
  background:var(--accent);color:var(--ink);font-family:var(--grotesk);
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:.2s;
}
.mm-add-btn:hover{background:var(--accent-2)}

.mm-list{display:flex;flex-direction:column;gap:.4rem;max-height:55vh;overflow-y:auto}
.mm-item{
  display:flex;align-items:center;gap:.8rem;
  padding:.7rem 1rem;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  transition:.2s;
}
.mm-item:hover{border-color:rgba(255,255,255,.12)}
.mm-item.oos{opacity:.45}
.mm-item-img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mm-item-info{flex:1;min-width:0}
.mm-item-name{font-family:var(--grotesk);font-size:.82rem;font-weight:600;color:var(--bone)}
.mm-item-meta{font-size:.72rem;color:var(--muted);margin-top:.15rem}
.mm-item-price{font-family:var(--grotesk);font-size:.82rem;font-weight:700;color:var(--accent);white-space:nowrap}
.mm-item-actions{display:flex;gap:.3rem}
.mm-item-btn{
  width:30px;height:30px;border-radius:8px;border:none;
  background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;transition:.2s;font-size:.85rem;
}
.mm-item-btn:hover{background:rgba(255,255,255,.12);color:var(--bone)}
.mm-item-btn.del:hover{background:rgba(239,68,68,.2);color:var(--red)}
.mm-item-btn.oos-toggle.active{background:rgba(239,68,68,.15);color:var(--red)}

/* =====================================================================
   MENU ITEM FORM
   ===================================================================== */
.menu-item-modal{max-width:500px}
.mm-field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.mm-field span{font-family:var(--grotesk);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mm-field input,.mm-field select{
  padding:.55rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);color:var(--bone);font-family:var(--sans);font-size:.85rem;
}
.mm-field select option{background:var(--ink-2);color:var(--bone)}
.mm-field-row{display:flex;gap:.8rem}
.mm-field-row .mm-field{flex:1}
.mm-check{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .8rem;border-radius:10px;border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);cursor:pointer;transition:.2s;
  font-family:var(--grotesk);font-size:.78rem;color:var(--muted);
}
.mm-check:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(212,168,67,.1)}
.mm-check input{display:none}
.mm-cancel-btn,.mm-save-btn{
  padding:.6rem 1.4rem;border-radius:10px;border:none;
  font-family:var(--grotesk);font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.2s;
}
.mm-cancel-btn{background:rgba(255,255,255,.06);color:var(--muted)}
.mm-cancel-btn:hover{background:rgba(255,255,255,.1)}
.mm-save-btn{background:var(--accent);color:var(--ink)}
.mm-save-btn:hover{background:var(--accent-2)}

/* =====================================================================
   SITE SETTINGS
   ===================================================================== */
.site-settings-modal{max-width:560px}

/* ---- Aggregated Sum Bar ---- */
.admin-sum-bar{
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .8rem;border-radius:100px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.2);
  font-family:var(--grotesk);font-size:.68rem;color:var(--amber);
  max-width:100%;overflow-x:auto;white-space:nowrap;
}
.sum-label{font-weight:600;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}
.sum-items{display:flex;gap:.35rem}
.sum-tag{
  padding:.2rem .5rem;border-radius:6px;
  background:rgba(255,255,255,.06);color:var(--bone);font-size:.72rem;
}
.sum-tag strong{color:var(--gold)}

/* ---- Skewer Capacity Meter ---- */
.skewer-section{
  display:flex;gap:.6rem;padding:.6rem 1.5rem;
  background:rgba(11,15,23,.6);border-bottom:1px solid rgba(255,255,255,.04);
}
.skewer-card{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .7rem;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  min-height:40px;
}
.skewer-label{
  font-family:var(--grotesk);font-size:.7rem;font-weight:600;color:var(--bone);
  display:flex;align-items:center;gap:.3rem;white-space:nowrap;
}
.skewer-icon{font-size:.9rem}
.skewer-bar-bg{
  width:80px;height:8px;border-radius:4px;
  background:rgba(255,255,255,.1);overflow:hidden;
}
.skewer-bar{
  height:100%;border-radius:4px;
  background:var(--emerald);transition:width .5s var(--ease-out);
}
.skewer-bar.mid{background:var(--amber)}
.skewer-bar.low{background:var(--crimson);animation:pulse 1.2s infinite}
.skewer-pct{
  font-family:var(--grotesk);font-size:.68rem;font-weight:700;color:var(--muted);white-space:nowrap;
}

/* ---- 86 Button ---- */
.order-item-oos{
  width:26px;height:26px;border-radius:6px;border:none;
  background:rgba(255,255,255,.06);color:var(--muted);cursor:pointer;
  font-family:var(--grotesk);font-size:.6rem;font-weight:700;letter-spacing:0;
  display:grid;place-items:center;transition:.2s;flex-shrink:0;
}
.order-item-oos:hover{background:rgba(239,68,68,.2);color:var(--crimson)}
.order-item-oos.oos{background:rgba(239,68,68,.15);color:var(--crimson);border:1px solid rgba(239,68,68,.3)}

/* ---- Kanban Tab Bar (mobile) ---- */
.kanban-tab-bar{
  display:none;gap:.3rem;padding:.4rem .6rem;
  background:rgba(11,15,23,.6);border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.kanban-tab{
  flex:1;min-height:48px;padding:.4rem .6rem;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  color:var(--muted);font-family:var(--grotesk);font-size:.7rem;font-weight:600;
  letter-spacing:.04em;cursor:pointer;transition:.2s;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:.3rem;
}
.kanban-tab.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.kanban-tab-count{
  font-size:.6rem;background:rgba(255,255,255,.12);padding:.1rem .35rem;border-radius:100px;
}
.kanban-tab.active .kanban-tab-count{background:rgba(0,0,0,.12)}

@media(max-width:767px){
  .kanban-tab-bar{display:flex}
  .kanban{grid-template-columns:1fr!important;height:auto}
  .kanban-col{display:none}
  .kanban-col#colNew{display:flex}
  .kanban-cards{max-height:calc(100vh - 280px)}
}