/* AL ARBAIK FOOD LAB - Main Stylesheet (Light Theme) */
* { margin:0; padding:0; box-sizing:border-box; }
html,body{ font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; }
:root{
  --bg:#F3F6FC;
  --card:#FFFFFF;
  --primary:#1D4ED8;
  --primary-dark:#1E3A8A;
  --primary-light:#E5EDFF;
  --primary-lighter:#F0F5FF;
  --accent:#F59E0B;
  --accent-light:#FEF3C7;
  --success:#15803D;
  --success-light:#DCFCE7;
  --danger:#DC2626;
  --danger-light:#FEE2E2;
  --text:#1F2A44;
  --muted:#6B7686;
  --border:#E4E9F2;
  --radius:14px;
}
body{ background:var(--bg); color:var(--text); }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; }
button{ font-family:inherit; }

/* ---------- Layout ---------- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{ width:246px; background:linear-gradient(190deg,#16234A 0%, #1E3A8A 100%); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; z-index:20; }
.sidebar .brand{ display:flex; align-items:center; gap:10px; padding:22px 20px 18px 22px; }
.logo-badge{ width:44px;height:44px;border-radius:50%; background:conic-gradient(from 220deg, var(--primary) 0 60%, var(--primary-dark) 60% 100%); display:flex;align-items:center;justify-content:center; color:#fff; font-size:19px; flex-shrink:0; box-shadow:0 3px 8px rgba(29,78,216,.35); }
.brand .name{ font-weight:800; font-size:16px; color:#fff; line-height:1.1; letter-spacing:.3px; }
.brand .sub{ font-size:10px; font-weight:700; color:var(--accent); letter-spacing:2px; }
.nav-list{ flex:1; padding:6px 12px; display:flex; flex-direction:column; gap:3px; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; color:#C6D3EF; font-size:13.5px; font-weight:600; }
.nav-item i{ font-size:16px; width:20px; text-align:center; }
.nav-item.active, .nav-item:hover{ background:rgba(255,255,255,.12); color:#fff; }
.nav-item.active{ box-shadow: inset 3px 0 0 var(--accent); }
.pak-credit{ display:block; text-align:center; font-size:10px; color:#9fb4dd; text-decoration:none; padding:9px 10px 2px; letter-spacing:.3px; opacity:.85; transition:opacity .15s; }
.pak-credit:hover{ opacity:1; color:#fff; text-decoration:underline; }
.pak-credit b{ color:#C6D3EF; font-weight:800; }
.side-footer{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-top:1px solid rgba(255,255,255,.12); }
.side-footer .name{ font-size:12.5px; font-weight:700; color:#fff; }
.side-footer .role{ font-size:10.5px; color:#9fb4dd; text-transform:capitalize; }
.side-footer .logout{ margin-left:auto; color:#C6D3EF; font-size:16px; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ min-height:70px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:14px 28px; flex-wrap:wrap; gap:10px; position:sticky; top:0; z-index:10;}
.content{ padding:26px 30px; flex:1; }
.page-title{ font-size:21px; font-weight:800; color:var(--text); }
.page-sub{ font-size:12.5px; color:var(--muted); margin-top:2px;}
.topbar-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.icon-btn{ width:38px;height:38px;border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;position:relative; color:var(--text); }

/* ---------- Cards / KPI ---------- */
.card{ background:var(--card); border-radius:var(--radius); border:1px solid var(--border); box-shadow:0 1px 3px rgba(20,30,60,.04); }
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px; }
.kpi{ padding:20px; }
.kpi .label{ font-size:12px; color:var(--muted); font-weight:600; }
.kpi .value{ font-size:24px; font-weight:800; margin-top:8px; }
.kpi .delta{ font-size:11.5px; margin-top:6px; font-weight:700; }
@media (max-width: 1100px){ .kpi-grid{ grid-template-columns:repeat(2,1fr);} }

/* ---------- Pills / Badges ---------- */
.pill{ padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; display:inline-block; }
.pill-success{ background:var(--success-light); color:var(--success); }
.pill-danger{ background:var(--danger-light); color:var(--danger); }
.pill-warn{ background:var(--accent-light); color:#92600A; }
.pill-info{ background:var(--primary-light); color:var(--primary); }
.pill-muted{ background:#EDEFF3; color:#6B7686; }

/* ---------- Buttons ---------- */
.btn{ border:none; border-radius:10px; font-weight:700; font-size:13px; padding:10px 18px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.15s; }
.btn:hover{ filter:brightness(1.05); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 4px 10px rgba(29,78,216,.25);}
.btn-accent{ background:var(--accent); color:#fff; }
.btn-outline{ background:#fff; color:var(--primary); border:1.5px solid var(--primary-light);}
.btn-danger{ background:var(--danger); color:#fff;}
.btn-success{ background:var(--success); color:#fff;}
.btn-ghost{ background:var(--primary-lighter); color:var(--primary-dark);}
.btn-sm{ padding:6px 12px; font-size:12px; }
.btn-block{ width:100%; justify-content:center; }
.btn:disabled, .btn-disabled{ background:#EDEFF3 !important; color:#A6ADBB !important; cursor:not-allowed; box-shadow:none; }

/* ---------- Tables ---------- */
table{ border-collapse:collapse; width:100%; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:10px 14px; border-bottom:1px solid var(--border);}
td{ padding:12px 14px; border-bottom:1px solid var(--border); font-size:13.5px; }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }

/* ---------- Forms ---------- */
.f-label{ font-size:11.5px; font-weight:700; color:var(--muted); display:block; margin-bottom:6px;}
.f-input, select.f-input, textarea.f-input{ width:100%; border:1.5px solid var(--border); border-radius:10px; padding:11px 14px; font-size:13px; color:var(--text); background:#fbfcfe; font-family:inherit; }
.f-input:focus{ outline:none; border-color:var(--primary); }
.f-group{ margin-bottom:14px; }
.f-row{ display:grid; gap:14px; }
.f-row-2{ grid-template-columns:1fr 1fr; }
.f-row-3{ grid-template-columns:1fr 1fr 1fr; }
.f-row-4{ grid-template-columns:2fr 1fr 1fr 1fr; }

/* ---------- Login page ---------- */
.login-wrap{ width:100vw; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 20% 20%, #274B9E 0%, #12224A 55%, #0B1730 100%); padding:20px;}
.login-card{ width:420px; max-width:100%; padding:44px 40px; text-align:center; border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.35); background:#fff; }
.login-card .logo-badge{ width:68px;height:68px;font-size:30px;margin:0 auto 14px; }

/* ---------- Flash messages ---------- */
.flash{ padding:12px 18px; border-radius:10px; font-size:13px; font-weight:600; margin-bottom:16px; }
.flash-success{ background:var(--success-light); color:var(--success); }
.flash-danger{ background:var(--danger-light); color:var(--danger); }

/* ---------- POS / Billing ---------- */
.pos-wrap{ display:flex; height:calc(100vh - 71px); }
.menu-pane{ flex:1; padding:22px; overflow-y:auto; }
.cat-row{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.cat{ padding:9px 18px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.cat.active{ background:var(--primary); color:#fff; border-color:var(--primary); }
.item-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.item-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px 14px; position:relative; cursor:pointer; }
.item-card:hover{ border-color:var(--primary); }
.item-ico{ font-size:24px; color:var(--primary); }
.item-name{ font-size:12.5px; font-weight:700; margin-top:10px; min-height:32px;}
.item-price{ font-size:13px; font-weight:800; color:var(--primary-dark); margin-top:6px;}
.item-add{ margin-top:10px; background:var(--primary-lighter); color:var(--primary); text-align:center; padding:6px; border-radius:8px; font-size:11.5px; font-weight:700;}
.item-add:hover{ background:var(--primary); color:#fff; }

.cart-pane{ width:390px; background:#fff; border-left:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.cart-head{ padding:18px 20px 10px; }
.order-type-row{ display:flex; gap:8px; padding:0 20px 14px; }
.order-type{ flex:1; text-align:center; padding:9px 0; border-radius:9px; border:1.5px solid var(--border); font-size:11.5px; font-weight:700; color:var(--muted); cursor:pointer;}
.order-type.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.cart-list{ flex:1; overflow-y:auto; padding:0 20px; min-height:80px;}
.cart-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px dashed var(--border); }
.qty-box{ display:flex; gap:8px; background:var(--bg); padding:4px 8px; border-radius:8px; font-size:12px; color:var(--muted); align-items:center;}
.qty-box span{ cursor:pointer; width:14px; text-align:center;}
.lock-ico{ font-size:14px; opacity:.55; color:var(--muted); cursor:not-allowed; }
.del-ico{ font-size:14px; color:var(--danger); cursor:pointer; }
.cart-summary{ padding:16px 20px; border-top:1px solid var(--border); }
.sum-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:8px;}
.sum-total{ display:flex; justify-content:space-between; font-size:18px; font-weight:800; margin:12px 0; color:var(--primary-dark);}
.cart-actions{ padding:0 20px 20px; display:flex; flex-direction:column; gap:10px; }
.empty-cart{ text-align:center; color:var(--muted); font-size:12.5px; padding:40px 10px;}

/* ---------- Modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(15,23,42,.5); display:none; align-items:center; justify-content:center; z-index:100; padding:20px;}
.modal-overlay.show{ display:flex; }
.modal-box{ width:460px; max-width:100%; background:#fff; border-radius:16px; padding:26px 28px; box-shadow:0 30px 60px rgba(0,0,0,.3); max-height:90vh; overflow-y:auto;}
.modal-box .close-x{ cursor:pointer; color:var(--muted); font-size:18px; }

/* ---------- Kitchen Display ---------- */
.kot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.kot-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; position:relative; overflow:hidden; }
.kot-items{ margin-top:10px; }
.kot-item{ font-size:12.5px; color:var(--text); padding:3px 0; }
.dup-tag{ position:absolute; top:40%; left:50%; transform:translate(-50%,-50%) rotate(-18deg); border:3.5px solid var(--danger); color:var(--danger); font-size:26px; font-weight:900; padding:4px 18px; border-radius:8px; letter-spacing:3px; background:rgba(255,255,255,.88); z-index:5; pointer-events:none; white-space:nowrap; }
@media (max-width: 1100px){ .kot-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .kot-grid{ grid-template-columns:1fr;} }

/* ---------- Kitchen ticket v2: left status stripe + 3-step control ---------- */
.kot-card-v2{ border-left:5px solid var(--border); }
.kot-card-v2.status-sent_to_kitchen{ border-left-color:var(--muted); }
.kot-card-v2.status-accepted{ border-left-color:var(--accent); }
.kot-card-v2.status-ready{ border-left-color:var(--success); }
.kot-card-v2.overdue{ border-left-color:var(--danger); }
.kstep-row{ display:flex; gap:6px; margin-top:14px; }
.kstep{ flex:1; padding:9px 4px; border-radius:9px; border:1.5px solid var(--border); background:#fff; color:var(--muted); font-size:11.5px; font-weight:700; cursor:default; }
.kstep.done{ color:var(--text); }
.kstep.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
.kstep.status-ready, .kstep.active.done:last-child{ }
.kstep:not([disabled]){ cursor:pointer; }
.kstep:not([disabled]):hover{ filter:brightness(0.97); }
.kot-card-v2 .kstep.active:last-child{ border-color:var(--success); color:var(--success); background:var(--success-light); }

/* ---------- Charts (simple bars) ---------- */
.bar-row{ margin-bottom:12px; }
.bar-row .bar-label{ display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:5px;}
.bar-track{ height:8px; background:var(--bg); border-radius:6px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:6px; background:var(--primary); }

/* ---------- Report tabs ---------- */
.rtab-row{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.rtab{ padding:10px 20px; border-radius:10px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--muted);}
.rtab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ---------- Print slips (thermal) ---------- */
.print-page{ background:#DCE2EC; min-height:100vh; display:flex; align-items:flex-start; justify-content:center; padding:40px 10px; }
.paper{ width:320px; background:#fff; padding:22px 20px 28px; box-shadow:0 10px 30px rgba(20,30,60,.18); font-family:'Courier New',monospace; }
.paper .center{ text-align:center; }
.paper .logo-line{ font-size:24px; color:var(--primary); }
.paper .title{ font-weight:800; font-size:15px; letter-spacing:1px; margin-top:4px;}
.paper .subtitle{ font-size:9px; letter-spacing:2px; color:#B8860B; font-weight:700; margin-top:2px;}
.paper .tag{ font-size:8.5px; letter-spacing:1px; color:#555; margin-top:4px;}
.paper hr{ border:none; border-top:1.5px dashed #999; margin:12px 0; }
.paper .row{ display:flex; justify-content:space-between; font-size:11.5px; margin-bottom:4px;}
.paper .bold{ font-weight:700; }
.paper .itemrow{ margin-bottom:8px; }
.paper .itemname{ font-size:11.5px; font-weight:700; }
.paper .itemsub{ display:flex; justify-content:space-between; font-size:10.5px; color:#444; }
.paper .totalrow{ display:flex; justify-content:space-between; font-size:14px; font-weight:800; margin-top:6px;}
.paper .footer{ text-align:center; font-size:9.5px; color:#555; margin-top:14px; line-height:1.5;}
.stamp{ display:inline-block; border:3px solid var(--danger); color:var(--danger); font-weight:900; font-size:18px; padding:3px 10px; border-radius:6px; transform:rotate(-10deg); letter-spacing:2px; margin-bottom:8px;}
.print-actions{ text-align:center; margin-bottom:16px; }
@media print {
  .no-print{ display:none !important; }
  .print-page{ background:#fff; padding:0; }
  .paper{ box-shadow:none; width:100%; }
}

/* ---------- Mobile kitchen app (chef) ---------- */
.mobile-shell{ max-width:460px; margin:0 auto; min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
.mobile-appbar{ background:#fff; padding:14px 18px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:5;}
.mobile-appbar .logo-badge{ width:34px;height:34px;font-size:14px; }
.mobile-appbar .name{ font-weight:800; font-size:14px; color:var(--primary-dark);}
.mobile-appbar .sub{ font-size:9px; color:var(--accent); font-weight:700; letter-spacing:1px;}
.mobile-appbar .live-dot{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--success); font-weight:700; flex-shrink:0; }
.mobile-appbar .live-dot span{ width:7px;height:7px;background:var(--success);border-radius:50%; display:inline-block; animation:liveBlink 1.8s infinite; }
@keyframes liveBlink{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }
.mobile-content{ flex:1; padding:16px 16px 90px; overflow-y:auto; }
.mobile-bottomnav{ position:fixed; bottom:0; left:0; right:0; max-width:460px; margin:0 auto; height:70px; background:#fff; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-around; z-index:5; }
.mobile-bottomnav a{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9.5px; color:var(--muted); font-weight:700; position:relative; padding:4px 10px; }
.mobile-bottomnav a.active{ color:var(--primary);}
.mobile-bottomnav i{ font-size:18px; }

/* ---------- Notification banner / badges / toast ---------- */
.notif-banner{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:12px; box-shadow:0 8px 20px rgba(29,78,216,.3); margin-bottom:14px; }
.notif-banner .ico{ font-size:22px; flex-shrink:0; }
.notif-banner .txt{ flex:1; font-size:11.5px; line-height:1.4; }
.notif-banner button{ background:#fff; color:var(--primary); border:none; border-radius:8px; padding:8px 14px; font-size:11.5px; font-weight:800; white-space:nowrap; cursor:pointer; }
.notif-banner.is-on{ background:var(--success-light); color:var(--success); box-shadow:none; }
.notif-banner.is-on .txt{ color:var(--success); }

.badge-dot{ position:absolute; top:-5px; right:-6px; background:var(--danger); color:#fff; border-radius:50%; min-width:17px; height:17px; padding:0 3px; font-size:9.5px; display:flex; align-items:center; justify-content:center; font-weight:800; border:2px solid #fff; }
.mobile-bottomnav .badge-dot{ top:-2px; right:auto; left:22px; }
.icon-btn .badge-dot{ top:-4px; right:-4px; }

.notify-toast{ position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-30px); width:min(92vw,420px); background:#fff; border-radius:14px; box-shadow:0 14px 34px rgba(0,0,0,.2); padding:14px; display:flex; gap:12px; align-items:flex-start; z-index:999; opacity:0; pointer-events:none; transition:.25s ease; border:1px solid var(--border); }
.notify-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.notify-toast .nt-icon{ width:36px;height:36px;border-radius:10px;background:var(--danger-light);color:var(--danger);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0; }
.notify-toast .nt-body{ font-size:12.5px; color:var(--text); line-height:1.4; }

/* ---------- Kitchen queue tabs (mobile) ---------- */
.qtab-row{ display:flex; gap:8px; padding:14px 16px 0; }
.qtab{ flex:1; text-align:center; padding:10px 0; border-radius:10px; background:#fff; border:1px solid var(--border); color:var(--muted); font-size:12px; font-weight:800; cursor:pointer; }
.qtab.active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 14px rgba(29,78,216,.25); }

/* ---------- Install-app hint banner (desktop/mobile) ---------- */
.install-hint{ display:flex; align-items:center; gap:10px; background:var(--primary-lighter); border:1px dashed var(--primary-light); color:var(--primary-dark); border-radius:12px; padding:10px 14px; font-size:11.5px; margin-bottom:14px; }

/* ---------- Utilities ---------- */
.flex{ display:flex; } .items-center{ align-items:center; } .justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-10{ gap:10px; } .gap-14{ gap:14px; } .gap-20{ gap:20px; }
.mt-10{ margin-top:10px;} .mt-14{ margin-top:14px;} .mt-20{ margin-top:20px;} .mb-14{ margin-bottom:14px;}
.text-muted{ color:var(--muted); } .text-danger{ color:var(--danger); } .text-success{ color:var(--success); }
.font-bold{ font-weight:700; } .font-800{ font-weight:800; }
.w-full{ width:100%; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-1-2{ display:grid; grid-template-columns:1.5fr 1fr; gap:20px; }
.grid-14-1{ display:grid; grid-template-columns:1.4fr 1fr; gap:20px; }
@media (max-width: 1000px){ .grid-2, .grid-1-2, .grid-14-1{ grid-template-columns:1fr; } }

/* ---------- Responsive: collapse sidebar on small screens ---------- */
@media (max-width: 900px){
  .app-shell{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; flex-direction:row; overflow-x:auto; }
  .sidebar .brand{ display:none; }
  .nav-list{ flex-direction:row; padding:10px; }
  .nav-item span:last-child{ display:none; }
  .side-footer{ display:none; }
  .item-grid{ grid-template-columns:repeat(2,1fr); }
  .pos-wrap{ flex-direction:column; height:auto; }
  .cart-pane{ width:100%; }
}

/* ---------- Phase 4: Item photos in POS ---------- */
.item-card.has-photo{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.item-card.has-photo .item-photo{ width:100%; height:92px; object-fit:cover; display:block; background:var(--bg); }
.item-card.has-photo .item-body{ padding:10px 12px 12px; }
.item-card.has-photo .item-ico{ display:none; }
.item-card.has-photo .item-name{ margin-top:0; }

/* ---------- Phase 4: Barcode scan button on POS ---------- */
.scan-fab{ position:fixed; right:412px; bottom:26px; width:54px; height:54px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 10px 24px rgba(29,78,216,.35); cursor:pointer; z-index:20; }
@media (max-width: 900px){ .scan-fab{ right:20px; bottom:90px; } }

/* ---------- Phase 4: Table Management - Floor Plan (v2, matches reference) ---------- */
.btn-dark{ background:var(--primary-dark); color:#fff; }
.btn-dark:hover{ background:#16234A; }
.floor-wrap{ display:flex; gap:20px; align-items:flex-start; }
.floor-sidebar{ width:230px; flex-shrink:0; background:#fff; border:1px solid var(--border); border-radius:14px; padding:16px; }
.floor-sidebar-title{ font-size:11px; font-weight:800; color:var(--muted); letter-spacing:1px; margin-bottom:12px; display:flex; align-items:center; gap:7px; }
.sidebar-table-item{ display:flex; align-items:center; justify-content:space-between; padding:10px 8px; border-radius:10px; cursor:pointer; margin-bottom:2px; }
.sidebar-table-item:hover{ background:var(--bg); }
.sidebar-table-item.active{ background:var(--primary-lighter); }
.floor-main{ flex:1; min-width:0; }
.floor-toolbar{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.section-tabs-underline{ display:flex; gap:26px; flex-wrap:wrap; border-bottom:2px solid var(--border); }
.section-tab-u{ padding:8px 2px 12px; font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-2px; }
.section-tab-u.active{ color:var(--accent); border-color:var(--accent); }
.floor-plan{ position:relative; width:100%; height:560px; background-image:
    linear-gradient(0deg, var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 5% 8.33%; background-color:#fbfcfe; border:2px solid var(--primary-dark); border-radius:10px; overflow:hidden; }
.table-icon{ position:absolute; width:64px; height:80px; margin-left:-32px; margin-top:-34px; cursor:pointer; user-select:none; touch-action:none; }
.table-icon .t-body{ position:absolute; top:8px; left:8px; right:8px; height:48px; border:2.5px solid var(--primary-dark); border-radius:6px; background:#fff; box-shadow:0 2px 6px rgba(20,30,60,.08); }
.table-icon .chair{ position:absolute; border:2px solid var(--primary-dark); border-radius:2px; background:#fff; }
.table-icon .chair.top{ top:0; left:50%; width:22px; height:9px; transform:translateX(-50%); }
.table-icon .chair.bottom{ top:56px; left:50%; width:22px; height:9px; transform:translateX(-50%); }
.table-icon .chair.left{ left:0; top:50%; width:9px; height:22px; transform:translateY(calc(-50% - 4px)); }
.table-icon .chair.right{ right:0; top:50%; width:9px; height:22px; transform:translateY(calc(-50% - 4px)); }
.table-icon .t-label{ position:absolute; top:68px; left:0; right:0; text-align:center; font-size:11.5px; font-weight:800; color:var(--text); white-space:nowrap; }
.table-icon .t-status-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.table-icon.status-free .t-status-dot{ background:var(--success); }
.table-icon.status-occupied .t-status-dot{ background:var(--danger); }
.table-icon.status-reserved .t-status-dot{ background:#F59E0B; }
.table-icon.selected .t-body{ border-color:var(--primary); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--primary); }
.table-icon.selected::before, .table-icon.selected::after{ content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--primary); border:2px solid #fff; top:6px; z-index:3; }
.table-icon.selected::before{ left:6px; }
.table-icon.selected::after{ right:6px; }
.table-icon.dragging{ opacity:.7; z-index:50; }
.fixture-block{ position:absolute; border:2px dashed var(--muted); border-radius:8px; background:rgba(107,118,134,.06); display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none; touch-action:none; }
.fixture-block span{ font-size:11px; font-weight:800; color:var(--muted); letter-spacing:1px; writing-mode: horizontal-tb; text-align:center; padding:4px; }
.fixture-block.selected{ border-color:var(--primary); background:var(--primary-lighter); }
.fixture-block.dragging{ opacity:.7; z-index:50; }
.floor-legend{ display:flex; gap:16px; align-items:center; font-size:11.5px; color:var(--muted); margin-top:12px; flex-wrap:wrap; }
.floor-legend .dot{ width:10px;height:10px;border-radius:50%; display:inline-block; margin-right:5px; vertical-align:middle;}
.seg-toggle{ display:flex; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:14px; gap:4px; }
.seg-opt{ flex:1; text-align:center; padding:9px 6px; border-radius:8px; font-size:12px; font-weight:700; color:var(--muted); cursor:pointer; }
.seg-opt.active{ background:#fff; color:var(--primary-dark); box-shadow:0 2px 6px rgba(20,30,60,.1); }
.table-select-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-height:46vh; overflow-y:auto; padding:4px; }
.table-select-card{ border:1.5px solid var(--border); border-radius:12px; padding:12px 8px; text-align:center; cursor:pointer; background:#fff; }
.table-select-card:hover{ border-color:var(--primary); }
.table-select-card.selected{ border-color:var(--primary); background:var(--primary-lighter); box-shadow:0 0 0 3px var(--primary-light); }

@media (max-width: 900px){
  .floor-wrap{ flex-direction:column; }
  .floor-sidebar{ width:100%; max-height:220px; overflow-y:auto; }
  .floor-plan{ height:420px; }
  .floor-toolbar{ flex-direction:column; align-items:flex-start; gap:8px; }
  .section-tabs-underline{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; }
  .section-tab-u{ white-space:nowrap; }
}

@media (max-width: 900px){ .table-select-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Phase 4: Kitchen Station tabs ---------- */
.station-tabs{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.station-tab{ padding:9px 18px; border-radius:999px; background:#fff; border:1px solid var(--border); font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; }
.station-tab.active{ background:#EA580C; color:#fff; border-color:#EA580C; }

/* ---------- Phase 4: Offline banner ---------- */
.offline-banner{ display:none; position:sticky; top:0; z-index:50; background:#78350F; color:#fff; text-align:center; padding:9px 14px; font-size:12.5px; font-weight:700; }
.offline-banner.show{ display:block; }
.offline-banner .sync-badge{ background:rgba(255,255,255,.2); padding:2px 9px; border-radius:999px; margin-left:8px; font-weight:800; }
/* Admin pages lock into view-only while offline — forms/buttons greyed & inert. */
body.offline-readonly .content form,
body.offline-readonly .content button:not(.offline-banner button),
body.offline-readonly .content .btn,
body.offline-readonly .content input,
body.offline-readonly .content select,
body.offline-readonly .content textarea,
body.offline-readonly .topbar-right .btn{
  pointer-events:none !important; opacity:.5 !important; filter:grayscale(.3);
}
body.offline-readonly .nav-item, body.offline-readonly .logout{ pointer-events:auto; opacity:1; filter:none; }

/* ---------- Order -> Kitchen -> Billing split (POS mode tabs) ---------- */
.mode-tabs{ display:flex; gap:10px; margin-top:12px; }
.mode-tab{ flex:1; max-width:320px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; background:#fff; border:1.5px solid var(--border); font-size:13px; font-weight:800; color:var(--muted); cursor:pointer; }
.mode-tab i{ font-size:15px; }
.mode-tab.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.mode-tab .pill{ background:rgba(255,255,255,.25); color:#fff; }
.mode-tab:not(.active) .pill{ background:var(--accent-light); color:#92600A; }

.billing-list{ display:flex; flex-direction:column; gap:12px; }
.billing-group-label{ font-size:11.5px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:14px 0 2px; }
.billing-group-label:first-child{ margin-top:0; }
.bill-card{ background:#fff; border:1.5px solid var(--border); border-left:5px solid var(--muted); border-radius:12px; padding:14px 16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.bill-card:hover{ border-color:var(--primary); }
.bill-card.selected{ border-color:var(--primary); background:var(--primary-lighter); box-shadow:0 0 0 3px var(--primary-light); }
.bill-card.status-sent_to_kitchen{ border-left-color:var(--muted); }
.bill-card.status-accepted{ border-left-color:var(--accent); }
.bill-card.status-ready{ border-left-color:var(--success); }
.bill-card.status-served{ border-left-color:var(--primary); }
.bill-card .bc-title{ font-weight:800; font-size:14px; }
.bill-card .bc-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
.bill-card .bc-amount{ font-weight:800; font-size:15px; color:var(--primary-dark); text-align:right; white-space:nowrap; }
.bill-round-label{ font-size:10.5px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin:10px 0 2px; }
.empty-billing{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty-billing i{ font-size:32px; display:block; margin-bottom:10px; }

@media (max-width: 900px){
  .mode-tabs{ flex-direction:column; }
  .mode-tab{ max-width:none; }
}