:root{
  --blue:#2563eb;
  --bg:#f3f4f6;
  --panel:#ffffff;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;
  --accent:#ff7a00;
  --accent2:#ff9a3b;
  /* Login dialog background (themeable) */
  --loginBackdrop:linear-gradient(135deg,#0a8f5a 0%,#70e08b 100%);
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --radius: 0px;
  --font:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
/* Prevent unwanted bottom (horizontal) scrollbar */
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);overflow-x:hidden}

/* TOP BAR */
.topbar{
  height:44px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  /* Leave room for native window controls when using Electron titleBarOverlay */
  padding:0 160px 0 12px;
  background:#ffffff;
  border-bottom:0;
  /* Electron: allow dragging from the top bar (like a native title bar) */
  -webkit-app-region: drag;
}

/* Don't block clicks on interactive elements if added later */
.topbar button,
.topbar a,
.topbar input,
.topbar select,
.topbar textarea{
  -webkit-app-region: no-drag;
}
.topbar-left{justify-self:start;display:flex;align-items:center;gap:10px}
.app-icon{width:22px;height:22px;object-fit:contain}
.brand-title{font-weight:700;font-size:17px;color:var(--text);letter-spacing:.2px}
.topbar-center{
  justify-self:center;
  display:flex;
  align-items:center;
  gap:10px;
  max-width: 720px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.support{font-size:13px;color:var(--muted);margin-right:0}
.topbar-right{justify-self:end}
.status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(17,24,39,.25);display:inline-block}
.dot.ok{background:#22c55e}
.dot.bad{background:#ef4444}
.dot.sm{width:8px;height:8px}

/* Do not drag from interactive elements */
.topbar a,
.topbar button,
.topbar input,
.topbar select,
.topbar textarea,
.topbar .status,
.topbar .support{
  -webkit-app-region: no-drag;
}

/* APP LAYOUT */
/* Topbar is 44px, keep app exactly within viewport to avoid extra scrollbars */
.app{height:calc(100% - 44px);display:flex;overflow:hidden}
.sidebar{
  /* Reduce sidebar width by 25px (190 -> 165) */
  width:165px;
  background:#f8fafc;
  border-right:1px solid var(--line);
  padding:8px 0;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: rgba(100,116,139,.45) transparent;
}

/* Modern thin scrollbar for sidebar (Chrome/Edge/Safari) */
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(100,116,139,.35);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.sidebar:hover::-webkit-scrollbar-thumb{background:rgba(100,116,139,.55)}
.sidebar-item{
  padding:8px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-size:15px; /* Zaytuna update: sidebar buttons font +1px */
  color:#111827;
}
.sidebar-item:hover{background:#eef2f7}
.sidebar-item.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;
}
.sidebar-item.active .ico svg{filter:drop-shadow(0 1px 0 rgba(0,0,0,.1))}
/* NOTE: Don't force icon color on active state.
   Icons should keep their original per-icon color classes (c-blue, c-green, etc.)
   and special multi-color SVGs (gear/printer/backup/restore). */

/* Apply selected color to ALL sidebar buttons (Settings → Theme → Sidebar Buttons Color) */
:root{--sbAccent:var(--accent);--sbAccent2:var(--accent2)}
.sidebar-color-all .sidebar-item{
  background:linear-gradient(90deg,var(--sbAccent),var(--sbAccent2));
  color:#fff;
  /* keep same square shape as default sidebar buttons */
  margin:0;
  border-radius:0;
}
.sidebar-color-all .sidebar-item:hover{
  background:linear-gradient(90deg,var(--sbAccent2),var(--sbAccent));
}
/* NOTE: Don't override icon colors when applying sidebar button color.
   We only want the button background/text to change, not the icon palette. */
.sidebar-color-all .sidebar-item.active{
  outline:2px solid rgba(255,255,255,.35);
  box-shadow:0 10px 18px rgba(0,0,0,.12);
}
.sidebar-sep{height:1px;background:var(--line);margin:8px 0}
.sidebar-foot{margin-top:auto;padding:10px 12px;border-top:1px solid var(--line)}
.user-pill{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.sidebar-logout{margin-top:8px;border-radius:10px}

/* ICON COLORS (similar feel to reference) */
.ico{width:18px;height:18px;display:grid;place-items:center;color:#64748b}
.ico svg{width:18px;height:18px;fill:currentColor}
.c-blue{color:#3b82f6}
.c-green{color:#22c55e}
.c-amber{color:#f59e0b}
.c-purple{color:#a855f7}
.c-teal{color:#14b8a6}
.c-pink{color:#ec4899}
.c-red{color:#ef4444}
.c-indigo{color:#6366f1}
.c-cyan{color:#06b6d4}
.c-lime{color:#84cc16}
.c-orange{color:#f97316}
.c-gray{color:#6b7280}
.c-slate{color:#475569}
.c-brown{color:#a16207}

/* Avoid nested/duplicate scrollbars: content hosts views; each view can scroll if needed */
.content{flex:1;padding:0;overflow:hidden;min-width:0}
.view{height:100%;overflow:auto}
/* New Order view: remove the middle scrollbar; left (cart) and right (items) panels handle scrolling */
#view-newOrder{overflow:hidden}
.view.hidden{display:none}
.hidden{display:none !important;}

/* DASHBOARD */
.dash-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.dash-head h2{margin:0;font-size:19px}
.dash-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow)}
.card-k{font-size:13px;color:var(--muted)}
.card-v{font-size:23px;font-weight:800;margin-top:6px}

.today-sales-card,.today-orders-card{padding-top:12px;padding-bottom:12px}
.dash-sales-breakdown{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.dash-sales-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;line-height:1.25}
.dash-sales-row span{color:var(--muted);font-weight:700}
.dash-sales-row strong{font-size:17px;font-weight:800;color:var(--text);white-space:nowrap;text-align:right}
.dash-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.panel-title{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;font-size:14px}
.list{padding:8px 12px}
.list .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed #e5e7eb}
.list .row:last-child{border-bottom:none}

/* ===== Backup/Restore: full page width =====
   NOTE: Never force `display` here.
   Views are shown/hidden using the `.hidden` class.
   If we override display, hidden views will appear on every page.
*/
#view-backup:not(.hidden),
#view-restore:not(.hidden){
  width: 100% !important;
  max-width: none !important;
}

#view-backup .dash-head,
#view-restore .dash-head{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#view-backup .panel,
#view-restore .panel{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#view-backup .list,
#view-restore .list{
  width: 100% !important;
}

/* Simple table-like list (Orders / Settlement) */
.tbl{width:100%;overflow:auto}
.tbl .thead,.tbl .trow{display:grid;grid-template-columns:110px 120px 110px 1fr 140px 170px;gap:10px;align-items:center}
.tbl .thead{padding:10px 12px;background:#f3f4f6;color:#111827;font-weight:700;border-radius:12px}
.tbl .trow{padding:10px 12px;border-bottom:1px solid #eef2f7}
.tbl .trow:last-child{border-bottom:none}
.tbl .trow.clickable{cursor:pointer}
.tbl .trow.clickable:hover{background:#fafafa}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums}
.tbl .muted{color:#6b7280}

/* Orders list needs extra columns (Table/Waiter/Customer/Rider) */
#ordersTable .thead,
#ordersTable .trow{
  grid-template-columns:110px 100px 85px 110px 120px 145px 120px 105px 1fr 110px 165px;
}
.muted{color:var(--muted)}

/* KPI cards (Attendance summary, Reports) */
.kpi{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--card);
}
.kpi-title{font-size:13px;color:var(--muted)}
.kpi-value{font-size:21px;font-weight:700;margin-top:4px}

/* ORDER TABS */
.order-tabs{display:flex;gap:6px;margin-bottom:8px;align-items:center}

/* Smart POS header: show Categories on left and Order No on right in the same top row */
.pos-cats-order-head{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  margin-left:8px;
}
.pos-cats-head-title{
  font-weight:800;
  font-size:14px;
  color:#111827;
  padding:6px 0;
}

.order-no-pill{
  margin-left:auto;
  border:1px solid var(--line);
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  color:#111;
}
.pos-cats-order-head .order-no-pill{ margin-left:0; }
.tab{
  border:1px solid var(--line);
  background:#fff;
  padding:6px 10px;
  border-radius:4px;
  font-size:13px;
  cursor:pointer;
}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ORDER GRID */
/* Match requested fixed widths:
   - Left (cart + inputs) : 410px
   - Right (categories + items) : 730px */

/* Keep left/right panels usable on smaller heights: scroll body, sticky action bars */
.order-left,.order-right{display:flex;flex-direction:column;min-height:0}
.order-left-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.order-right-body{flex:1;min-height:0;overflow:auto}

/* Cart: keep cart area taller (Dine In/Takeaway) by letting only cart rows scroll */
.cart-table{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.cart-b{flex:1;min-height:0;overflow:auto;overflow-x:hidden}

/* Remove horizontal scrollbar caused by any child overflow in the left/cart panel */
.order-left, .order-left-body, .cart-table, .bottom-actions{overflow-x:hidden}

/* Buttons should wrap without creating horizontal overflow */
.bottom-actions{flex-wrap:wrap;max-width:100%}
.bottom-actions .btn{max-width:100%}

/* Sticky action bars */
.bottom-actions{
  position:sticky;
  bottom:0;
  background:var(--panel);
  padding:10px 0 0 0;
  border-top:1px solid var(--line);
  margin-top:0;
}

.items-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  position:sticky;
  bottom:0;
  background:var(--panel);
  padding:10px 0 0 0;
  border-top:1px solid var(--line);
}

.order-grid{display:grid;grid-template-columns:520px 1fr;gap:10px;align-items:start}
.order-left,.order-right{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
.order-left{width:520px;max-width:520px}
.order-right{width:auto;max-width:none}

.order-left-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.order-search{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field.inbox label{display:none}
/* Autocomplete host positioning:
   - Previously only .field.inbox had position:relative.
   - Modals use plain .field (no .inbox), so the dropdown could render off-screen.
*/
.field.has-suggest{position:relative}
.field.inbox.has-suggest{position:relative}

/* placeholders like reference (text inside boxes) */
.field.inbox input::placeholder{color:#7a7a7a;opacity:1}
.field input{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:4px;outline:none;background:#fff}
.field input:focus{border-color:#cbd5e1;box-shadow:0 0 0 3px rgba(255,122,0,.15)}

/* Quick Customer Add button inside Customer Name box */
.field.cust-quick{position:relative}
.field.cust-quick input{padding-right:36px}
.cust-quick-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:900;line-height:1;color:#111827}
.cust-quick-btn:hover{background:#f8fafc}
.cust-quick-btn:active{transform:translateY(-50%) scale(.98)}


/* Autocomplete / Google-like suggestions */
.suggest-box{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.12);z-index:60;overflow:hidden}
.suggest-box.hidden{display:none}
.suggest-item{padding:9px 10px;cursor:pointer;display:flex;gap:10px;align-items:center}
.suggest-item:hover{background:#f5f7fb}
.suggest-item.active{background:#eaf2ff}
.suggest-item .sid{min-width:44px;font-weight:700;color:#111827}
.suggest-item .sname{flex:1;color:#334155}
.suggest-item .stag{font-size:12px;color:#64748b}
.suggest-scroll{max-height:240px;overflow:auto}

.cart-table{margin-top:10px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.cart-h{display:grid;grid-template-columns:80px 1fr 80px 80px 90px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;padding:8px}

/* Pixel-perfect cart height: show exactly 5 rows, then scroll inside the cart. */
:root{
  --blue:#2563eb; --cart-row-h: 40px; }
.cart-b{height:clamp(calc(var(--cart-row-h) * 5), 41vh, 360px); max-height:360px; overflow:auto; overflow-x:hidden}
.cart-row{display:grid;grid-template-columns:80px 1fr 80px 80px 90px;align-items:center;height:var(--cart-row-h);padding:0 8px;border-bottom:1px solid #f1f5f9;font-size:13px}
.cart-row:last-child{border-bottom:none}
.r{text-align:right}
.qtybox{display:flex;justify-content:flex-end;gap:6px;align-items:center}
.qedit{width:56px;padding:2px 4px;font-size:13px;border:1px solid var(--line);border-radius:4px;text-align:center;display:none}
.cart-row:not(.printed) .qedit{display:inline-block}
.cart-row:not(.printed) .qnum{display:none}
.cart-row.printed .qedit{display:none}
.cart-row.printed .qnum{display:inline}

.mini{width:22px;height:22px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer}
.mini:hover{background:#f8fafc}

.actionbtn{display:flex;gap:6px}
.chip{border:1px solid var(--line);background:#fff;border-radius:4px;padding:4px 6px;font-size:12px;cursor:pointer}
.chip:hover{background:#f8fafc}

.totals{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.trow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#111827}
.trow.total{font-weight:800;font-size:14px}

.bottom-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btn{border:1px solid var(--line);background:#fff;padding:7px 10px;border-radius:4px;font-size:13px;cursor:pointer}
.btn.sm{padding:5px 8px;font-size:13px;}
.btn:hover{filter:brightness(0.98)}
.btn.gray{background:#f3f4f6}
.btn.green{background:#22c55e;color:#fff;border-color:#22c55e}
.btn.red{background:#ef4444;color:#fff;border-color:#ef4444}
.btn.dark{background:#111827;color:#fff;border-color:#111827}
.btn.purple{background:#a855f7;color:#fff;border-color:#a855f7}
.btn.indigo{background:#6366f1;color:#fff;border-color:#6366f1}
.btn.amber{background:#f59e0b;color:#111827;border-color:#f59e0b}
.btn.teal{background:#14b8a6;color:#fff;border-color:#14b8a6}
.btn.orange{background:#fb923c;color:#111827;border-color:#fb923c}
.btn.yellow{background:#facc15;color:#111827;border-color:#facc15}
.btn.hotpink{background:#ff69b4;color:#fff;border-color:#ff69b4}
.btn.sky{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.btn.peacock{background:#00a6a6;color:#fff;border-color:#00a6a6}

#btnNote{
  background:#10e3ec;
  color:#ffffff;
  border-color:#10e3ec;
}
#btnNote:hover{
  filter:brightness(0.98);
}
:root[data-theme="fullgreen"] #btnNote{
  background:#10e3ec;
  color:#ffffff;
  border-color:#10e3ec;
}

#btnClose{
  background:#1d7f98;
  color:#ffffff;
  border-color:#1d7f98;
}
#btnClose:hover{
  filter:brightness(0.98);
}
:root[data-theme="fullgreen"] #btnClose{
  background:#1d7f98;
  color:#ffffff;
  border-color:#1d7f98;
}
#btnLessItem{
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color:#ffffff;
  border-color:#b91c1c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
#btnLessItem:hover{
  filter: brightness(1.02);
}
#btnLessItem:active{
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14);
}

#btnChgQty{
  background: linear-gradient(180deg, #9dd75c 0%, #7ec142 100%);
  color:#ffffff;
  border-color:#6cae34;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.14);
  text-shadow: 0 1px 0 rgba(0,0,0,.12);
}
#btnChgQty:hover{
  filter: brightness(1.02);
}
#btnChgQty:active{
  transform: translateY(1px);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

/* Hotkey labels are intentionally hidden (shortcuts still work) */
.btn.hotkey .hk{ display:none !important; }

.cart-row .note{font-size:12px;opacity:0.75;margin-top:2px;line-height:1.2}

/* CUSTOMER/TIME AREA (top of left panel) */
.cust{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:8px}
.cust-left{display:flex;flex-direction:column;gap:8px}
.cust-right{display:flex;flex-direction:column;gap:8px}
.timebox{
  border:1px solid var(--line);
  border-radius:4px;
  padding:6px 8px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  background:#f8fafc;
  font-size:11px;
  color:var(--muted);
  width:max-content;
  max-width:180px;
}
.timebox strong{display:block;color:#111827;font-size:12px}

.section-title{font-weight:800;font-size:14px;margin:10px 0 6px}
.cats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:0}
.cat{
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  padding:6px;
  text-align:center;
  cursor:pointer;
}
.cat.active{outline:2px solid rgba(255,122,0,.35);border-color:rgba(255,122,0,.35)}
.cat img{width:100%;height:48px;object-fit:cover;border-radius:4px;background:#f3f4f6}
.cat .t{margin-top:6px;font-size:12px;font-weight:700}

.items-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.item{
  border:1px solid var(--line);
  border-radius:6px;
  background:#fff;
  cursor:pointer;
  overflow:hidden;
}
.item img{width:100%;height:60px;object-fit:cover;background:#f3f4f6}
.item .body{padding:6px}
.item .n{font-size:12px;font-weight:800;line-height:1.1}
.item .p{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:var(--muted)}
.item .p strong{color:#111827}
.item:focus-visible{outline:2px solid rgba(255,122,0,.45);outline-offset:2px}

.item-info-tooltip{
  position:fixed;
  z-index:5000;
  max-width:260px;
  min-width:190px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(17,24,39,.97);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  opacity:1;
  transform:translateY(0);
}
.item-info-tooltip.hidden{
  opacity:0;
  transform:translateY(4px);
}
.item-info-tooltip-name{font-size:13px;font-weight:800;line-height:1.25;margin-bottom:4px}
.item-info-tooltip-price{font-size:14px;font-weight:900;color:#facc15;margin-bottom:4px}
.item-info-tooltip-code{font-size:12px;opacity:.85;margin-bottom:6px}
.item-info-tooltip-details{font-size:12px;line-height:1.45;color:rgba(255,255,255,.9);white-space:pre-wrap;word-break:break-word}

/* TOAST */
.toast{border:none;border-radius:999px;padding:10px 14px;background:#111827;color:#fff}
.toast::backdrop{background:transparent}

/* RESPONSIVE */
@media (max-width:1100px){
  .order-grid{grid-template-columns:1fr}
  .order-left,.order-right{width:auto;max-width:none}
  .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-two{grid-template-columns:1fr}
  .cats-grid,.items-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* MOBILE-FIRST POS: collapse sidebar and simplify cart for small screens */
@media (max-width: 720px){
  /* Give content more space */
  .sidebar{width:56px;padding:8px 0}
  .sidebar .lbl{display:none}
  .sidebar-item{justify-content:center;gap:0;padding:10px 0}
  .sidebar-item .ico{width:22px;height:22px}

  /* Topbar: keep it compact */
  .topbar-center{display:none}
  .topbar{justify-content:space-between}
  .brand-title{font-size:15px}

  /* New Order: single column + comfy spacing */
  .order-grid{grid-template-columns:1fr !important}
  .order-left,.order-right{width:auto !important;max-width:none !important}

  /* Items grid: bigger tap targets */
  .items-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cats-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}

  /* Cart: hide rate/amount columns to avoid horizontal squeeze */
  .cart-h{grid-template-columns:36px 1fr 120px !important}
  .cart-row{grid-template-columns:36px 1fr 120px !important}

  /* Hide header labels + cells for Rate/Amount */
  .cart-h > div:nth-child(4),
  .cart-h > div:nth-child(5){display:none !important}
  .cart-row .rate,
  .cart-row .amt{display:none !important}

  /* Reduce cart fixed height so totals/buttons remain visible */
  .cart-b{height:clamp(calc(var(--cart-row-h) * 5), 41vh, 360px) !important; max-height:360px !important; overflow:auto !important; overflow-x:hidden !important}
  .bottom-actions{position:sticky;bottom:0;background:var(--panel);padding-top:10px}
}

/* Extra small phones */
@media (max-width: 420px){
  .items-grid{grid-template-columns:1fr !important}
  .cats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .cart-h,.cart-row{grid-template-columns:34px 1fr 110px !important}
  .mini{width:26px;height:26px}
  .btn{padding:10px 10px}
}

/* Qty header alignment fix */
.qty-header, th.qty, .qty-title {
  text-align: left !important;
  padding-left: 6px !important;
}

/* Qty header fine alignment - more left */
.qty-header, th.qty, .qty-title {
  text-align: left !important;
  padding-left: 0px !important;
  margin-left: -8px !important;
}

/* Qty header centered between - and + */
.qty-header, th.qty, .qty-title {
  text-align: center !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* FINAL Qty center fix */
.qty-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.qty-col .qty-header {
  margin-bottom: 4px;
  text-align: center !important;
}

.qty-controls {
  display: flex !important;
  justify-content: center !important;
  gap: 6px;
}

/* Move customer fields below Dine In / Takeaway / Delivery tabs */
.order-type-tabs {
  order: 1 !important;
}

.customer-fields,
.customer-info,
.customer-section {
  order: 2 !important;
  margin-top: 8px !important;
}

/* Ensure parent uses flex */
.new-order-container,
.order-header {
  display: flex !important;
  flex-direction: column !important;
}


/* ===== New Order: Top layout (Customer + Search) ===== */
.order-top-panel{
  max-width: 760px;
  margin: 10px 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-top-row{
  display: grid;
  gap: 10px;
  align-items: center;
}
.order-top-row .field{ min-width: 0; }
.order-top-row .field input{ width: 100%; }

.order-top-row.customer-row{ grid-template-columns: 1fr 1fr; }
.order-top-row.address-row{ grid-template-columns: 1fr; }

/* Address row now: Address + Table button + ServTime */
.order-top-row.address-row{ grid-template-columns: 1fr auto auto; }
.btn-inline{ height: 33px; padding: 0 8px; align-self: center; }
.order-top-row.search-row-3{ grid-template-columns: 1fr 1fr 1fr; }
.order-top-row.search-row-2{ grid-template-columns: 1fr 1fr; }

/* Keep the main grid below */
.order-grid{ margin-top: 8px; }

/* Make sure old right-side customer block doesn't take extra height */
.order-right .cust{ margin-bottom: 8px; }


/* === FINAL LOCKED INPUT WIDTHS (Approved) === */

/* Row 1 */
.input-customer-name { width: 200px !important; }
.input-contact { width: 175px !important; }
.input-address { width: 185px !important; }

/* Row 2 */
.input-table-no { width: 150px !important; }
.input-waiter { width: 150px !important; }
.input-discount { width: 110px !important; }

/* Row 3 */
.input-item-name { width: 202px !important; }
.input-item-code { width: 202px !important; }

/* Prevent flex stretch */
.new-order-container input {
  flex: 0 0 auto !important;
}


/* === FINAL LOCKED INPUT WIDTHS (ID-based, Electron + PWA) === */
#custName { width: 200px !important; }
#custContact { width: 175px !important; }
#custAddr { width: 202px !important; }

#tableNo { width: 150px !important; }
#waiter { width: 150px !important; }
#disc { width: 110px !important; }

#searchName { width: 202px !important; }
#searchCode { width: 202px !important; }

/* Make sure these inputs don't stretch */
.order-top-panel input {
  flex: 0 0 auto !important;
}


/* === Spacing + cart width adjustments (Electron + PWA) === */
.order-top-panel{
  gap: 6px !important;
}
.order-top-row{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* --- NEW ORDER: match reference screenshot (Start/Serv time near Customer fields) --- */
.order-top-row.customer-row{
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.order-top-row.address-row{
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}
.order-top-row.search-row-3,
.order-top-row.search-row-2{
  flex-wrap: nowrap !important;
}

/* Start/Serv time as two separate boxes (match reference screenshot) */
.timecol{
  /* Keep compact so only the label/time fits */
  width: 76px !important;
  flex: 0 0 76px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  /* Force Start time column to sit at the far right of the row */
  margin-left: auto !important;
}

/* Address row: align ServTime box to the right, on the same row as Address */
.address-row .spacer{
  /* Remove spacer so ServTime can align exactly under Start time */
  display: none !important;
  flex: 0 0 auto !important;
}
.timebox.timebox-serv-inline{
  margin-left: 5px !important;
  width: 76px !important;
  flex: 0 0 76px !important;
  /* Align ServTime box to the far right like Start time */
  margin-left: auto !important;
}

.timebox.timebox-mini{
  display:flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 6px 8px !important;
}

/* Height tuning requested by user */
.timebox.timebox-start{ height: 27px !important; }
.timebox.timebox-serv{ height: 27px !important; }

/* Keep address row neat: let Address fill remaining space */
.address-row .field{ flex: 1 1 auto !important; }

/* === FIX (New Order): Address width reduced + Table button between Address and ServTime,
   and ServTime stays on the same row (no drop). === */
.order-top-row.address-row{
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Address input: keep it compact and shrinkable */
.order-top-row.address-row #custAddr{
  width: 230px !important;      /* reduced by 10px */
  flex: 0 1 230px !important;
  min-width: 170px !important;
}

/* Keep the wrapper from forcing full width */
.order-top-row.address-row .field{
  flex: 0 1 auto !important;
}

/* Table button: fixed, sits between Address and ServTime */
.order-top-row.address-row #btnTablePicker{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  margin-left: 6px !important; /* small gap from address box */
}

/* ServTime box: never wrap and stay at the far right */
.order-top-row.address-row .timebox-serv-inline{
  flex: 0 0 86px !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

/* Fixed layout sizes requested */
.order-grid{ grid-template-columns: 410px 730px !important; }
.order-left{ width: 410px !important; max-width: 410px !important; }
.order-right{ width: 730px !important; max-width: 730px !important; }
.cart-table{ width: 100% !important; }
.order-left{ max-width: 540px !important; }
.cart-table{ width: 540px !important; }
.totals{ width: 540px !important; }


/* === Cart header tweaks: smaller Action col + single-line Item Name === */
.cart-h, .cart-row{
  grid-template-columns: 40px 1fr 70px 70px 80px !important;
}

.cart-h > div:nth-child(1),
.cart-row > .actions{
  width: 40px !important;
}

.cart-h > div:nth-child(2){
  white-space: nowrap !important;
  text-align: left !important;
}

/* Keep action button centered in smaller column */
.cart-row .actions{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Slightly tighter padding to help fit */
.cart-h, .cart-row{
  padding-left: 6px !important;
  padding-right: 6px !important;
}


/* === Totals right column overflow fix === */
.totals{
  box-sizing: border-box !important;
  padding-right: 6px !important;
  width: 540px !important;
  max-width: 100% !important;
}
.trow{
  gap: 10px !important;
}
.trow span{
  box-sizing: border-box !important;
}
/* Keep label flexible, amount fixed and aligned inside */
.trow span:first-child{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.trow span:last-child{
  flex: 0 0 90px !important;
  text-align: right !important;
  padding-right: 4px !important;
}


/* --- Title bar overlay layout (Electron/PWA) ---
   Support + Online indicator now live in the CENTER of the top-most line.
   We keep room on the right for native window controls.
*/



/* === Right panel (Categories/Items): keep aligned normally with tabs (no negative lift) === */
.order-right{
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  /* Slightly taller so Items grid reaches down near left "Order Type" line */
  height: calc(100vh - 44px - 60px) !important;
}

/* Scrollable grids */
/* Categories: show ~10 (5x2) then scroll */
/* Zaytuna update: increase only Categories table/container height by 25px; picture sizes unchanged. */
#cats{ flex: 0 0 auto !important; max-height: 185px !important; overflow: auto !important; }
#items{ flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; }


/* ==========================================================
   FIX v7 (Jan-2026): Pixel-perfect 5-row cart + stable inputs
   - Prevent Rate/Amount going off-screen
   - Keep top inputs aligned (no wrap distortion)
   - Show cart scrollbar after 5 rows
   ========================================================== */

/* Left/Right panel widths (authoritative) */
.order-grid{grid-template-columns:410px 730px !important; align-items:start !important;}
.order-left{width:410px !important; max-width:410px !important; min-width:410px !important;}
.order-right{width:730px !important; max-width:730px !important;}

/* Order-left should not grow with cart rows */
.order-left{display:flex !important; flex-direction:column !important; height:100% !important; min-height:0 !important;}

/* --- Top panel: keep grid layout (no flex wrapping) --- */
.order-top-panel{max-width:100% !important; margin:0 0 10px 0 !important; gap:8px !important;}
.order-top-row{display:grid !important; gap:8px !important; align-items:center !important;}

.order-top-row.customer-row{grid-template-columns: 1fr 1fr auto !important;}
/* Address row must be: Address (narrow) + Table button + ServTime (same line) */
.order-top-row.address-row{grid-template-columns: 200px auto auto !important;}
.order-top-row.search-row-3{grid-template-columns: 1fr 1fr 1fr !important;}
.order-top-row.search-row-2{grid-template-columns: 1fr 1fr !important;}

/* Inputs should fill their grid cell (avoid weird fixed px causing wrap) */
#custName,#custContact,#custAddr,#tableNo,#waiter,#discPct,#discFix,#searchName,#searchCode{width:100% !important;}
.order-top-panel input{flex:initial !important;}

/* Keep Table button visually centered between Address and ServTime */
#btnTablePicker{ width: 64px !important; justify-self: center !important; }

/* ServTime must never drop to a new line */
.timebox.timebox-serv-inline{
  margin-left: 5px !important; justify-self: end !important; white-space: nowrap !important; }

/* Split Discount into two small inputs but keep the SAME total width as the old single box */
.disc-split{display:flex !important; gap:4px !important;}
.disc-split input{flex:1 1 0 !important; min-width:0 !important;}

/* Time boxes: compact and no extra right space */
.timecol{display:flex !important; align-items:stretch !important; justify-content:flex-end !important;}
.timebox.timebox-mini{width:auto !important; min-width:77px !important; max-width:95px !important;}
.timebox.timebox-serv-inline{
  margin-left: 5px !important;width:auto !important; min-width:77px !important; max-width:95px !important; justify-self:end !important; white-space:nowrap !important;}

/* --- Cart table: keep columns inside left panel --- */
.cart-table{width:100% !important; max-width:100% !important;}
.cart-h{grid-template-columns:40px 1fr 70px 70px 80px !important;}
.cart-row{grid-template-columns:40px 1fr 70px 70px 80px !important;}

/* Pixel-perfect: exactly 5 visible rows, then scroll inside cart */
:root{
  --blue:#2563eb; --cart-row-h: 40px; }
.cart-row{height:var(--cart-row-h) !important;}
.cart-row.selected{background:rgba(99,102,241,.08) !important;}
.cart-b{
  height:clamp(calc(var(--cart-row-h) * 5), 41vh, 360px) !important;
  max-height:360px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

/* Totals + buttons should stay visible and not be pushed */
.totals,.bottom-actions{width:100% !important; max-width:100% !important;}

/* ==========================================================
   FIX v8 (Jan-2026): 5-column categories + 5x6 items view
   - Categories: 5 per row, compact height; scroll after ~10
   - Items: 5 per row, compact cards; items area scrolls when overflow
   ========================================================== */

/* 5 columns on normal screens */
.order-right .cats-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px !important;}
.order-right .items-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important; gap:8px !important;}

/* Compact category cards */
.order-right .cat{padding:5px !important; border-radius:6px !important;}
.order-right .cat img{height:56px !important; border-radius:4px !important;}
.order-right .cat .t{margin-top:5px !important; font-size:11px !important;}

/* Zaytuna update: New Order category and item pictures increased by 20px in Electron + PWA. */
.order-right .item img{height:78px !important;}
.order-right .item .body{padding:5px !important;}
.order-right .item .n{font-size:11px !important; line-height:1.1 !important;}
.order-right .item .p{margin-top:3px !important; font-size:11px !important;}

/* On smaller widths, reduce to 4 columns to avoid cramping */
@media (max-width:1200px){
  .order-right .cats-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
  .order-right .items-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;}
}

/* ==========================================================
   Modals: Change Price / Change Qty (simple desktop-style)
   ========================================================== */
dialog.modal{border:0; padding:0; background:transparent;}
dialog.modal::backdrop{background:rgba(0,0,0,.25);}

.modal-card{
  width:340px;
  border:1px solid #cfcfcf;
  border-radius:4px;
  background:#f2efe8;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
  padding:14px 16px 16px;
}
.modal-title{
  text-align:center;
  font-weight:700;
  font-size:27px;
  color:#1b2a57;
  margin:4px 0 14px;
}
.modal-body{padding:0 8px 8px;}
.modal-label{display:block; font-size:13px; color:#333; margin:6px 0 4px;}
.modal-input{
  width:100%;
  height:32px;
  border:1px solid #222;
  border-radius:2px;
  padding:4px 8px;
  font-size:15px;
  outline:none;
  background:#fff;
}
.modal-actions{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:14px;
}

/* Compact action row (used for Order Details / Void dialogs) so all buttons fit */
.modal-actions.compact{
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.modal-actions.compact .modal-btn{
  min-width:86px;
  height:32px;
  font-size:14px;
  padding:0 10px;
}
.modal-btn{
  min-width:92px;
  height:34px;
  border:1px solid #6c6c6c;
  border-radius:3px;
  background:linear-gradient(#f7f7fb,#cfcfe3);
  font-weight:600;
  cursor:pointer;
}
.modal-btn.ok{background:linear-gradient(#f7f7fb,#bdbde0);}
.modal-btn.danger{
  border:1px solid rgba(176,0,32,0.5);
  color:#b00020;
  background:linear-gradient(#fff7f8,#ffdfe3);
}
.modal-btn:active{transform:translateY(1px);}

/* ===== Table Picker (New Order) ===== */
.modal-card.modal-wide{ width: 1350px; max-width: 1350px; height: 600px; max-height: 600px; display:flex; flex-direction:column; }
.modal-card.modal-wide .modal-body{ flex:1; overflow-y:auto; }

/* ---- Take Payment ---- */
.pay-top{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }

.pay-loyalty{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; padding:12px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; background: rgba(255,255,255,0.03); }
.pay-loyalty-left{ flex:1; min-width:220px; }
.pay-loyalty-right{ flex:1; min-width:260px; }
.pay-methods{ display:grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap:10px; flex: 1 1 520px; }
.pay-method{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: var(--text);
  padding:14px 12px;
  border-radius: 12px;
  font-weight: 700;
  cursor:pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.pay-method.active{ outline: 2px solid rgba(110,200,255,.55); }
.pay-method.warn{ outline: 2px solid rgba(255,200,90,.55); }
.pay-kpis{ display:grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap:10px; flex: 0 0 360px; }
.pay-kpi{ border:1px solid rgba(255,255,255,.14); border-radius: 12px; padding:10px 12px; background: rgba(255,255,255,.06); }
.pay-val{ font-size: 19px; font-weight: 800; margin-top:4px; }
.pay-entry{ display:flex; gap:10px; align-items:flex-end; margin-top:14px; flex-wrap:wrap; }
.pay-entry .field{ min-width: 240px; }
.pay-table-wrap{ margin-top: 12px; border:1px solid rgba(255,255,255,.12); border-radius: 12px; overflow:hidden; }
.pay-table-wrap .tbl{ width:100%; }
.pay-table-wrap .tbl th, .pay-table-wrap .tbl td{ padding:10px 12px; }
.pay-del{ background: transparent; border:1px solid rgba(255,255,255,.18); border-radius: 10px; color: var(--text); padding:6px 10px; cursor:pointer; }
.pay-note{ margin-top: 10px; }

@media (max-width: 880px){
  .pay-methods{ grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .pay-kpis{ grid-template-columns: 1fr; flex: 1 1 220px; }
}

.floor-tabs{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:4px 6px 10px;
  border-bottom:1px solid #cfcfcf;
  margin-bottom:10px;
}
.floor-tab{
  border:1px solid #111;
  background:#f8f6f0;
  padding:6px 10px;
  font-weight:700;
  cursor:pointer;
}
.floor-tab.active{ background:#fff; outline:2px solid #111; }

.tables-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap:10px;
  min-height:120px;
  padding:6px;
}
.tbl-tile{
  height:62px;
  border:1px solid #9a9a9a;
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  cursor:pointer;
  user-select:none;
  position:relative;
}

.tbl-num{ font-size:19px; line-height:1; }
.tbl-time{
  position:absolute;
  right:6px;
  bottom:6px;
  font-size:12px;
  font-weight:900;
  padding:2px 6px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  background: rgba(255,255,255,.35);
}
.tbl-green{ background:#93f293; }
.tbl-amber{ background:#ffd48a; }
.tbl-orange{ background:#ffbf7a; }
.tbl-purple{ background:#d2b3ff; }
.tbl-red{ background:#ff9b9b; }

/* Simple HTML table styling used in some admin reports (class="t") */
table.t{width:100%;border-collapse:separate;border-spacing:0}
table.t th, table.t td{padding:10px 12px;border-bottom:1px solid #eef2f7;vertical-align:middle}
/* Default browser style centers <th>. We want headers to align with column content. */
table.t th{ text-align:left; }
table.t thead th{background:#f3f4f6;color:#111827;font-weight:700;position:sticky;top:0;z-index:1}
table.t tbody tr:hover{background:#fafafa}

/* Customers table: keep header labels perfectly aligned with their columns */
table.customers-t{table-layout:fixed}
table.customers-t th, table.customers-t td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.customers-t td:first-child{white-space:normal} /* allow action buttons to wrap */
.row-sel{background:rgba(20,52,113,0.12) !important}
.tbl-blue{ background:#8fb7ff; }
.tbl-gray{ background:#d6d6d6; }
.tbl-inactive{ background:#e3e3e3; color:#777; cursor:not-allowed; }

.legend{ display:flex; gap:14px; align-items:center; padding:8px 6px 0; font-size:13px; color:#333; }
.legend .lg{ display:flex; gap:6px; align-items:center; }
.dot{ width:10px; height:10px; border:1px solid #222; display:inline-block; border-radius:50%; }
.dot-green{ background:#93f293; }
.dot-amber{ background:#ffd48a; }
.dot-orange{ background:#ffbf7a; }
.dot-purple{ background:#d2b3ff; }
.dot-red{ background:#ff9b9b; }
.dot-blue{ background:#8fb7ff; }
.dot-gray{ background:#d6d6d6; }

/* Split Order dialog */
.split-meta{display:flex;justify-content:space-between;gap:10px;margin:2px 0 8px;}
.split-hint{font-size:13px;margin:6px 0 8px;}
.split-list{max-height:260px;overflow:auto;border:1px solid #e7e7e7;}
.split-row{display:grid;grid-template-columns:1fr 90px 110px;gap:8px;align-items:center;padding:10px 10px;border-bottom:1px solid #f1f1f1;}
.split-row:last-child{border-bottom:0;}
.split-name{font-weight:600;}
.split-sub{font-size:13px;color:#666;}
.split-qty{justify-self:end;font-size:13px;color:#444;}
.split-input{width:100%;padding:8px 10px;border:1px solid #d7d7d7;background:#fff;}
.split-actions-row{display:flex;justify-content:flex-end;margin-top:10px;}



.tablebtn{
  margin-left: 5px !important;
}


/* === SQUARE UI OVERRIDES (No rounded corners) === */
/* Make major UI elements sharp/square (Dine In/TakeAway/New Order + right side Categories/Items) */
:root{
  --blue:#2563eb; --radius: 0px; }

/* Buttons & tabs */
.btn, .tab, .modal-btn, .tablebtn, #btnTablePicker{
  border-radius: 0 !important;
}

/* Inputs/fields */
input, select, textarea, .field, .field input, .field select, .field textarea{
  border-radius: 0 !important;
}

/* Time boxes */
.timebox, .timebox.timebox-mini, .timebox.timebox-serv-inline{
  border-radius: 0 !important;
}

/* Tables / cart */
.cart-table, .cart-h, .cart-row, .tbl, .tbl .thead, .tbl .trow{
  border-radius: 0 !important;
}

/* Right panel: categories/items cards */
.cat, .cat img, .item, .item img{
  border-radius: 0 !important;
}

/* Dialogs/Toasts (if any) */
dialog, .modal, .toast{
  border-radius: 0 !important;
}


/* === FORCE SQUARE CATEGORIES === */
.cats-grid,
.cat,
.cat * ,
.cat img{
  border-radius: 0 !important;
}


/* === ULTRA FORCE SQUARE: CATEGORIES ONLY === */
.order-right .cats-grid,
.order-right .cat,
.order-right .cat img,
.order-right .cat .t,
.order-right .cat *{
  border-radius: 0px !important;
}

.order-top-row.address-row #btnTablePicker{
  position: relative !important;
  left: 18px !important;
  transform: none !important;
}

/* === Takeaway mode: hide Address/Table/TableNo/Waiter and show timing+discounts in one line === */
#view-newOrder .unpaid-wrap{ display:none; }
/* Unpaid row hidden by default (shown in Takeaway) */
#view-newOrder .order-top-row.unpaid-row{ display:none; }

#view-newOrder.takeaway-mode .order-top-row.address-row{
  display: flex !important; /* override grid */
  align-items: center !important;
  flex-wrap: nowrap !important;
}

#view-newOrder.takeaway-mode .unpaid-wrap{
  display:flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-left: 0;
  width: 100%;
}

#view-newOrder.takeaway-mode .unpaid-wrap input#unpaidSearch{
  /* Per request: make search a bit shorter and white */
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  width: 100%;
}
#view-newOrder.takeaway-mode .unpaid-wrap select{
  /* Per request: match Online Orders dropdown height and white background */
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  min-width: 190px;
  width: 100%;
}

/* Keep Online Orders dropdown height consistent with Unpaid Bills in New Order */
#view-newOrder.online-mode .online-wrap select#onlineSelect{
  height: 26px;
}

/* Delivery mode: show Unpaid Bills (same UX as Takeaway) */
#view-newOrder.delivery-mode .unpaid-wrap{
  display:flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-left: 0;
  width: 100%;
}

#view-newOrder.delivery-mode .unpaid-wrap input#unpaidSearch{
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  width: 100%;
}

#view-newOrder.delivery-mode .unpaid-wrap select{
  height: 26px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
   color: #111827;
  min-width: 190px;
  width: 100%;
}

/* Unpaid Bills dropdown placed on its own row in Takeaway */
#view-newOrder.takeaway-mode .order-top-row.unpaid-row{
  display:flex !important;
  align-items:center;
}

/* Unpaid Bills dropdown placed on its own row in Delivery */
#view-newOrder.delivery-mode .order-top-row.unpaid-row{
  display:flex !important;
  align-items:center;
}

/* Hard-hide controls in Takeaway even if JS fails */
#view-newOrder.takeaway-mode #custAddr,
#view-newOrder.takeaway-mode #btnTablePicker,
#view-newOrder.takeaway-mode #tableNo,
#view-newOrder.takeaway-mode #waiter{
  display: none !important;
}

#view-newOrder.takeaway-mode .order-top-row.search-row-3{
  display:none !important;
}

#view-newOrder.takeaway-mode .order-top-row.customer-row .timecol{
  display:none !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-start{
  flex: 0 0 76px !important;
  width: 76px !important;
  margin-left: 0 !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-serv-inline{
  flex: 0 0 86px !important;
  width: 86px !important;
  margin-left: 0 !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .disc-split{
  flex: 0 0 170px !important;
  width: 170px !important;
  margin-left: auto !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .disc-split input{
  width: 80px !important;
}

/* === H Delivery mode: align Start time with ServTime and widen Address/Rider === */
#view-newOrder.delivery-mode .order-top-row.customer-row{
  grid-template-columns: 1fr 1fr !important;
}
#view-newOrder.delivery-mode .order-top-row.customer-row .timecol{
  display:none !important;
}

/* Address should stretch to the end of Contact line; keep Start/Serv time on the same row */
#view-newOrder.delivery-mode .order-top-row.address-row{
  grid-template-columns: 1fr auto auto !important;
}

/* Rider should be wide (like Search Item by Code end) with Discount on the right */
#view-newOrder.delivery-mode .order-top-row.search-row-3{
  grid-template-columns: 1fr 1fr !important;
}

/* === Dine In: remove extra vertical gaps (DO NOT affect Online Orders tab) === */
#view-newOrder.dinein-mode .order-top-panel{
  /* Reduce the vertical gap between Address row and search rows */
  gap: 2px !important;
  margin-bottom: 6px !important;
}

/* Remove the extra gap above the cart table (second red arrow area) */
#view-newOrder.dinein-mode .cart-table{
  margin-top: 4px !important;
}

/* Tighten row spacing a bit more for the two highlighted gaps */
#view-newOrder.dinein-mode .order-top-row.address-row{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.dinein-mode .order-top-row.search-row-3{ margin-top: 0 !important; padding-top: 0 !important; }
#view-newOrder.dinein-mode .order-top-row.search-row-2{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* === Takeaway: remove extra vertical gaps (only Takeaway tab) === */
#view-newOrder.takeaway-mode .order-top-panel{
  /* Tighten the vertical gap between Unpaid Bills row and the Item search row */
  gap: 2px !important;
  margin-bottom: 6px !important;
}

/* Unpaid Bills block has an internal gap; reduce it so it doesn't create extra white space */
#view-newOrder.takeaway-mode .unpaid-wrap{ gap: 2px !important; }

/* First red-arrow gap: between Unpaid Bills row and Item Search row */
#view-newOrder.takeaway-mode .order-top-row.unpaid-row{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.takeaway-mode .order-top-row.search-row-2{ margin-top: 0 !important; padding-top: 0 !important; }

/* Second red-arrow gap: reduce space between Item Search row and cart table */
#view-newOrder.takeaway-mode .order-top-row.search-row-2{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.takeaway-mode .cart-table{ margin-top: 4px !important; }


/* === H Delivery: remove extra vertical gaps (only H Delivery tab) === */
#view-newOrder.delivery-mode .order-top-panel{
  /* Tighten vertical gaps between Unpaid Bills, Rider row, and Item search */
  gap: 2px !important;
  margin-bottom: 6px !important;
}

/* Optional: reduce internal spacing inside Unpaid Bills block */
#view-newOrder.delivery-mode .unpaid-wrap{ gap: 2px !important; }

/* First red-arrow gap: between Unpaid Bills row and Rider row */
#view-newOrder.delivery-mode .order-top-row.unpaid-row{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.delivery-mode .order-top-row.search-row-3{ margin-top: 0 !important; padding-top: 0 !important; }

/* Second red-arrow gap: reduce space between Item Search row and cart table */
#view-newOrder.delivery-mode .order-top-row.search-row-2{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.delivery-mode .cart-table{ margin-top: 4px !important; }

/* === Online Orders: remove the two extra vertical gaps (Online Orders tab only) === */
/* 1) Gap between Address row and the Online Orders controls (first red arrow) */
/* 2) Gap between Search row and the cart table (second red arrow) */
#view-newOrder.online-mode .order-top-panel{
  gap: 2px !important;
  margin-bottom: 6px !important;
}

/* Keep the Online Orders block itself compact */
#view-newOrder.online-mode .order-top-row.online-row{ margin-bottom: 0 !important; padding-bottom: 0 !important; }
#view-newOrder.online-mode .online-wrap{ gap: 4px !important; }

/* Tighten the gap above the cart table */
#view-newOrder.online-mode .cart-table{ margin-top: 4px !important; }

/* Remove any extra row spacing around search inputs */
#view-newOrder.online-mode .order-top-row.search-row-3{ margin-top: 0 !important; padding-top: 0 !important; }
#view-newOrder.online-mode .order-top-row.search-row-2{ margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* Online Orders → Delivery: make Rider wider and push Discount box to the far right
   so its right edge lines up with “Search Item by Code”. */
#view-newOrder.online-mode.online-submode-delivery .order-top-row.search-row-3{
  grid-template-columns: 1.35fr 1fr !important;
}

/* -------- Receipt / Print -------- */
.print-area{ display:none; }

.receipt{ width: 80mm; max-width: 80mm; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color:#000; }
.receipt .rhead{ text-align:center; margin-bottom:10px; }
.receipt .brand{ font-weight:800; font-size:17px; letter-spacing:0.3px; }
.receipt .title{ font-weight:900; font-size:15px; margin-top:2px; }
.receipt .orderno{ margin-top:6px; padding:8px 10px; border:2px solid #000; border-radius:8px; display:inline-block; }
.receipt .orderno .lbl{ font-size:12px; display:block; }
.receipt .orderno .val{ font-size:23px; font-weight:900; line-height:1.1; }
.receipt .meta{ font-size:12px; margin-top:8px; }
.receipt .line{ display:flex; justify-content:space-between; gap:10px; font-size:13px; }
/* KOT/Receipt: prevent right-side cutting on some 80mm printers */
.receipt .line span:last-child{ margin-right:16px; }
.receipt .sep{ border-top:1px dashed #000; margin:10px 0; }
.receipt .items .it{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-size:13px; margin:4px 0; line-height:1.25; }
.receipt .items .name{ flex:1; min-width:0; white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; word-break:break-word; }
.receipt .items .qty{ width:30px; text-align:right; font-weight:800; white-space:nowrap; }
.receipt .items .rate{ width:52px; text-align:right; white-space:nowrap; }
.receipt .items .amt{ width:64px; text-align:right; font-weight:800; white-space:nowrap; margin-right:6px; }
/* Slightly move Amount column left (avoid edge cut) */
.receipt .items .amt{ margin-right:2px; }
.receipt .total{ font-weight:800; font-size:14px; }
.receipt .foot{ text-align:center; font-size:12px; margin-top:10px; }

@media print {
  #printArea, #printArea * { font-weight:700 !important; color:#000 !important; }

  /* hide app */
  body * { visibility:hidden !important; }
  #printArea, #printArea * { visibility:visible !important; }
  #printArea { 
    display:block !important;
    position:absolute; left:0; top:0; 
    padding:0;
  }
  /* Better print margins */
  @page { size: 80mm auto; margin: 0; }
}

/* Online Orders (status-based) */
#view-newOrder .online-wrap{ display:none; }
#view-newOrder.online-mode .online-wrap{ display:flex; flex-direction:column; gap:8px; }
#view-newOrder.online-mode .online-wrap select,
#view-newOrder.online-mode .online-wrap input{ width:100%; }
#view-newOrder.online-mode .online-wrap .online-head{ display:flex; gap:8px; }
#view-newOrder.online-mode .online-wrap .online-head > *{ flex:1; }

/* =========================
   Online Orders → Self Pickup: exact alignment (Requested)
   - Under Customer (col 1): ServTime + Start time (right-aligned to Customer column edge)
   - Under Contact  (col 2): Disc% + Disc Fix (full-width, aligned to Contact column)
   - Remove the Table/Waiter/Discount row completely (no extra blank space)
   ========================= */

/* Two equal columns like the Online dropdown row */
#view-newOrder.online-mode.online-submode-pickup .order-top-row.customer-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}

/* Let the inputs fill their column (no fixed pixel widths in this submode) */
#view-newOrder.online-mode.online-submode-pickup #custName,
#view-newOrder.online-mode.online-submode-pickup #custContact{
  width: 100% !important;
}

/* === Fix: Online Orders → Delivery: customer name & contact width same as Self Pickup === */
#view-newOrder.online-mode.online-submode-delivery .order-top-row.customer-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}

#view-newOrder.online-mode.online-submode-delivery #custName,
#view-newOrder.online-mode.online-submode-delivery #custContact{
  width: 100% !important;
}

/* Also cover legacy delivery-mode flag if used */
#view-newOrder.delivery-mode .order-top-row.customer-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}

#view-newOrder.delivery-mode #custName,
#view-newOrder.delivery-mode #custContact{
  width: 100% !important;
}

/* Address row becomes the "under Customer/Contact" row */
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: start !important;
}

/* The temporary wrapper that holds both time boxes under Customer */
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row .pickup-times{
  grid-column: 1 / 2 !important;
  display: flex !important;
  gap: 6px !important;
  justify-content: flex-end !important; /* right edge = Customer column edge */
  width: 100% !important;
}

/* Discount box (Disc% + Disc Fix) under Contact */
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row .disc-split{
  grid-column: 2 / 3 !important;
  width: 100% !important;
  display: flex !important;
  gap: 6px !important;
}
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row .disc-split input{
  flex: 1 1 0 !important;
  width: 100% !important;
}

/* Time box widths (Start time a bit narrower) */
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row .timebox-serv-inline{
  width: 92px !important;
  flex: 0 0 92px !important;
  margin-left: 0 !important;
}
#view-newOrder.online-mode.online-submode-pickup .order-top-row.address-row .timebox-start{
  width: 78px !important;
  flex: 0 0 78px !important;
  margin-left: 0 !important;
}

/* =========================
   Online Orders → Dine-In: exact alignment (Requested)
   - Customer Name width = Online Mode dropdown width (col 1)
   - Contact width       = Pending/Status dropdown width (col 2)
   - Table button under Customer (full width of col 1)
   - ServTime + Start time under Contact (col 2), aligned to column edge
   ========================= */

#view-newOrder.online-mode.online-submode-dinein .order-top-row.customer-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}

#view-newOrder.online-mode.online-submode-dinein #custName,
#view-newOrder.online-mode.online-submode-dinein #custContact{
  width: 100% !important;
}

/* Under-row: Table (col 1) + Times (col 2) */
#view-newOrder.online-mode.online-submode-dinein .order-top-row.address-row{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: start !important;
}

#view-newOrder.online-mode.online-submode-dinein #btnTablePicker{
  grid-column: 1 / 2 !important;
  width: 100% !important;
  margin-left: 0 !important;
  /* override legacy rule that shifted the table button to the right */
  position: static !important;
  left: 0 !important;
  justify-self: stretch !important;
}

#view-newOrder.online-mode.online-submode-dinein .order-top-row.address-row .dinein-times{
  grid-column: 2 / 3 !important;
  width: 100% !important;
  display: flex !important;
  gap: 6px !important;
  justify-self: stretch !important;
  justify-content: flex-start !important; /* ServTime stays at column start */
}

#view-newOrder.online-mode.online-submode-dinein .order-top-row.address-row .timebox-serv-inline{
  width: 92px !important;
  flex: 0 0 92px !important;
  margin-left: 0 !important;
}
#view-newOrder.online-mode.online-submode-dinein .order-top-row.address-row .timebox-start{
  width: 78px !important;
  flex: 0 0 78px !important;
  margin-left: 0 !important;
  /* push Start time to the right edge of the Contact column */
  margin-left: auto !important;
}


/* =========================
   Takeaway: alignment tweaks requested
   ========================= */
/* Contact field width +10px (Takeaway only) */
#view-newOrder.takeaway-mode #custContact{ width: calc(100% + 10px) !important; }

/* In Takeaway, Start Time + Discounts are moved into .address-row.
   Make that row behave like the two input columns above (Name | Contact):
   - ServTime stays left
   - Start time aligns to end of column 1 (Customer Name end)
   - Disc% starts at beginning of column 2 (Contact start) */
#view-newOrder.takeaway-mode .order-top-row.address-row{
  display: grid !important; /* override existing flex */
  grid-template-columns: 1fr 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-serv-inline{
  grid-column: 1 / 2 !important;
  justify-self: start !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-start{
  grid-column: 1 / 2 !important;
  justify-self: end !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row .disc-split{
  grid-column: 2 / 3 !important;
  justify-self: start !important;
}
#view-newOrder.takeaway-mode .order-top-row.address-row > .hidden{ display:none !important; }



/* ===== Takeaway: make ServTime + StartTime same line (align with Customer/Contact columns) ===== */
#view-newOrder.takeaway-mode .order-top-row.address-row{
  display: grid !important;           /* override previous flex */
  grid-template-columns: 1fr 1fr 1fr 1fr !important; /* split into 4 sub-columns */
  align-items: center !important;
  column-gap: 8px !important;
}

/* ServTime: left side of Customer Name column */
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-serv-inline{
  grid-column: 1 / 2 !important;
  justify-self: start !important;
  margin-left: 0 !important; /* cancel any auto spacing */
}

/* Start time: right side of Customer Name column */
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-start{
  grid-column: 2 / 3 !important;
  justify-self: end !important;
  margin-left: 0 !important;
}

/* Break Disc% + Disc Fix into two grid items without changing widths */
#view-newOrder.takeaway-mode .order-top-row.address-row .disc-split{
  display: contents !important;
}

/* Disc % aligns with Contact left edge */
#view-newOrder.takeaway-mode .order-top-row.address-row #discPct{
  grid-column: 3 / 4 !important;
  justify-self: start !important;
}

/* Disc Fix stays on Contact right side */
#view-newOrder.takeaway-mode .order-top-row.address-row #discFix{
  grid-column: 4 / 5 !important;
  justify-self: start !important;
}


/* ===== Takeaway micro-adjustments (final polish) ===== */

/* Start Time: thora sa LEFT (Customer Name ke end se) */
#view-newOrder.takeaway-mode .order-top-row.address-row .timebox-start{
  margin-right: 8px !important;
}

/* Disc %: thora sa LEFT (Contact ke start se) */
#view-newOrder.takeaway-mode .order-top-row.address-row #discPct{
  margin-left: -6px !important;
}

/* Disc Fix: Contact ke RIGHT end par */
#view-newOrder.takeaway-mode .order-top-row.address-row #discFix{
  justify-self: end !important;
  margin-right: 0 !important;
}


/* === Global height fix: All inputs, selects, buttons = 27px === */
input, select, button {
  height: 27px !important;
  min-height: 27px !important;
  line-height: 27px !important;
  box-sizing: border-box !important;
}


/* === Fix: Center text vertically in tabs & buttons === */
button,
.nav-tabs button,
.tab-btn,
.order-actions button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: normal !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}


/* --- FIX: keep totals fixed (not inside scroll) and give slight gap above bottom buttons --- */
.totals.totals-fixed{
  margin-top:0;
  border-top:1px solid var(--line);
  padding:8px 0 6px 0;
  background:var(--panel);
}

.totals.totals-fixed{ /* small gap from action buttons */
  margin-bottom:4px;
}

.bottom-actions{
  padding:6px 0 0 0;
  margin-top:0;
}

/* === FULL WIDTH RIGHT PANEL FIX === */
.main-content {
    display: flex;
    width: 100%;
}

.right-panel {
    flex: 1;
    width: 100% !important;
    max-width: 100% !important;
}

.categories,
.items {
    width: 100% !important;
}

/* === REMOVE RIGHT SIDE EMPTY SPACE === */
.right-panel,
.right-content,
.items-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

.categories,
.items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    width: 100% !important;
}

.items img,
.categories img {
    width: 100%;
    object-fit: cover;
}


/* === FULL WINDOW WIDTH OVERRIDE (REMOVE FIXED RIGHT GAP) === */
/* Previous fixed 410px/730px rules created unused space on wide screens.
   Keep left fixed, let right fill remaining window width. */
.order-grid{
  grid-template-columns: 410px 1fr !important;
  width: 100% !important;
}
.order-right{
  width: auto !important;
  max-width: none !important;
}
.order-left{
  width: 410px !important;
  max-width: 410px !important;
}

/* Make sure inner grids also stretch fully */
.order-right-body,
.order-right .cats-grid,
.order-right .items-grid{
  width: 100% !important;
  max-width: 100% !important;
}

/* ---------- Items & Categories (Admin) ---------- */
.placeholder{padding:22px;border:1px dashed var(--border);border-radius:12px;background:rgba(0,0,0,.02)}
.ic-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:10px 10px 0 10px}
.ic-tab{border:1px solid var(--border);background:var(--panel);padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600;font-size:14px;color:var(--text)}
.ic-tab.active{background:var(--soft);border-color:var(--softBorder)}
.ic-pane{padding:10px}
.ic-split{display:grid;grid-template-columns: 1.2fr .9fr;gap:12px}
@media (max-width: 980px){
  .ic-split{grid-template-columns:1fr}
}
.form-grid{display:grid;grid-template-columns: repeat(2, minmax(0,1fr));gap:10px}
@media (max-width: 720px){
  .form-grid{grid-template-columns:1fr}
}
.fg{display:flex;flex-direction:column;gap:6px}
.fg span{font-size:13px;color:var(--muted)}
.req{color:var(--red);margin-left:4px}
.chk{display:flex;align-items:center;gap:8px}
.ic-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.btn.primary{background:var(--blue);color:#fff;border-color:rgba(0,0,0,.08)}

/* WhatsApp Settings: make "Connect WhatsApp" text visible */
#waConnectBtn{color:#000 !important;font-weight:600;}

/* lightweight table used in admin panes */
.t{width:100%;border-collapse:collapse}
.t th,.t td{padding:10px 10px;border-bottom:1px solid #eef2f7;font-size:14px;vertical-align:top}
.t thead th{position:sticky;top:0;background:#f3f4f6;color:#111827;font-weight:800;z-index:1}
.t tr:hover{background:#fafafa;cursor:pointer}
.t .r{text-align:right;font-variant-numeric:tabular-nums}
.row-active{background:rgba(59,130,246,.12) !important}



/* === Visibility Fix: buttons with light backgrounds === */

.settings button,
.settings .btn,
.modal button,
.modal .btn,
#waConnectBtn,
#waDisconnectBtn {
  color: #000000 !important;
}

/* ------------------------------
   Zaytuna Smart POS — Login Screen (Electron + PWA)
   Fullscreen dialog (brand style)
------------------------------ */

.zsp-login-dlg{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  /* allow smaller Electron/PWA windows to scroll instead of hiding top content */
  overflow:auto;
}

.zsp-login-dlg::backdrop{
  background:var(--loginBackdrop);
}

.zsp-login{
  width:100vw;
  height:100vh;
  margin:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:22px;
}

.zsp-login-wrap{
  width:min(520px,92vw);
  text-align:center;
  color:#fff;
  /* extra top padding because support line is fixed */
  padding:58px 18px 12px;
  position:relative;
}

.zsp-login-support{
  font-size:15px;
  opacity:.95;
  letter-spacing:.2px;
  /* keep support always visible at the very top */
  position:fixed;
  top:10px;
  left:0;
  right:0;
  margin:0;
  z-index:20;
  pointer-events:none;
}

.zsp-login-brand{margin-top:4px}
.zsp-login-title{font-weight:900;font-size:65px;line-height:.98;margin-top:6px}
/* add a bit more breathing room so SMART POS doesn't touch the tail of 'y' */
.zsp-login-sub{font-weight:800;letter-spacing:2px;opacity:.9;margin-top:10px}
.zsp-login-logo{display:flex;justify-content:center;opacity:.95}

.zsp-login-welcome{
  margin-top:26px;
  font-weight:900;
  font-size:45px;
  line-height:1.1;
}

.zsp-login-card{
  margin:22px auto 0;
  width:min(460px,92vw);
  display:grid;
  gap:12px;
}

.zsp-field{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(255,255,255,.20);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:14px 16px;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.zsp-field input{
  flex:1;
  border:0;
  outline:none;
  background:transparent;
  color:#fff;
  font-size:17px;
}

.zsp-field input::placeholder{color:rgba(255,255,255,.85)}

.zsp-ico{display:flex;align-items:center;justify-content:center;opacity:.95}

.zsp-login-err{
  min-height:18px;
  font-size:14px;
  color:#ffe3e3;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}

.zsp-login-btn{
  border:0;
  border-radius:16px;
  padding:16px 18px;
  font-size:19px;
  font-weight:900;
  cursor:pointer;
  background:rgba(0,0,0,.22);
  color:#fff;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.zsp-login-btn:hover{filter:brightness(1.05)}

.zsp-login-forgot{
  border:0;
  background:transparent;
  color:var(--muted);
  font-weight:800;
  cursor:pointer;
  padding:6px 8px;
}

.zsp-login-tag{margin-top:18px}
.zsp-login-tagline{font-size:21px;font-weight:900}
.zsp-login-tagline2{font-size:15px;opacity:.9;margin-top:6px}

.zsp-login-globe{
  margin:10px auto 0;
  width:min(520px,92vw);
  opacity:.85;
  filter:drop-shadow(0 20px 28px rgba(0,0,0,.18));
}

@media (max-width:520px){
  .zsp-login-title{font-size:55px}
  .zsp-login-welcome{font-size:39px}
}

/* While login dialog is open, hide app chrome (sidebar/topbar) */
body:has(.zsp-login-dlg[open]) .topbar,
body:has(.zsp-login-dlg[open]) .sidebar,
body:has(.zsp-login-dlg[open]) .content{
  filter:blur(2px);
  pointer-events:none;
  user-select:none;
}


/* WhatsApp status dot (sidebar) */
.wa-dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-left:8px;vertical-align:middle;background:#94a3b8;box-shadow:0 0 0 2px rgba(0,0,0,.06);}
.wa-dot.on{background:#22c55e;}
.wa-dot.off{background:#ef4444;}
.wa-dot.unk{background:#94a3b8;}


/* Reports: stable table alignment */
.report-table-wrap{
  width:100%;
  overflow:auto;
  border:1px solid #dfe7ea;
  background:#fff;
}
.report-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  table-layout:auto;
}
.report-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f3f4f6;
  color:#111827;
  font-weight:800;
  text-align:left;
  padding:11px 12px;
  border-bottom:1px solid #dfe7ea;
  white-space:nowrap;
}
.report-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid #eef2f7;
  color:#111827;
  white-space:nowrap;
  vertical-align:middle;
}
.report-table tbody tr:hover{
  background:#fafafa;
}
.report-table th.num,
.report-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.report-table th.wide,
.report-table td.wide{
  min-width:170px;
}
.report-table th.thin,
.report-table td.thin{
  min-width:80px;
}
@media (max-width: 900px){
  .report-table{
    min-width:640px;
  }
}


/* === Professional Full Green Theme === */
:root[data-theme="fullgreen"] .topbar,
:root[data-theme="fullgreen"] .sidebar{
  background:linear-gradient(180deg,#052b15 0%,#0a3b1d 100%);
}
:root[data-theme="fullgreen"] .brand-title,
:root[data-theme="fullgreen"] .support,
:root[data-theme="fullgreen"] .status,
:root[data-theme="fullgreen"] .sidebar-item,
:root[data-theme="fullgreen"] .sidebar-foot,
:root[data-theme="fullgreen"] .user-pill,
:root[data-theme="fullgreen"] .panel-title,
:root[data-theme="fullgreen"] .field label,
:root[data-theme="fullgreen"] .trow,
:root[data-theme="fullgreen"] .timebox,
:root[data-theme="fullgreen"] .item .p,
:root[data-theme="fullgreen"] .muted,
:root[data-theme="fullgreen"] .legend,
:root[data-theme="fullgreen"] .floor-tabs,
:root[data-theme="fullgreen"] .floor-tab,
:root[data-theme="fullgreen"] .tbl .thead,
:root[data-theme="fullgreen"] .tbl .trow,
:root[data-theme="fullgreen"] table.t thead th,
:root[data-theme="fullgreen"] table.t th,
:root[data-theme="fullgreen"] table.t td{ color:#ecfdf5; }

:root[data-theme="fullgreen"] .content,
:root[data-theme="fullgreen"] .view,
:root[data-theme="fullgreen"] #view-newOrder,
:root[data-theme="fullgreen"] body{
  background:radial-gradient(circle at top left,#0f4d26 0%,#062e16 45%,#041f0f 100%);
}

:root[data-theme="fullgreen"] .sidebar{ border-right:1px solid rgba(134,239,172,.25); }

/* Zaytuna AI Command Center (shared by Electron and PWA) */
.zsp-ai-sidebar{position:relative}
.zsp-ai-badge{margin-left:auto;padding:2px 5px;border-radius:5px;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:9px;font-weight:800;letter-spacing:.4px}
.zai-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:12px;padding:22px 24px;border:1px solid #ddd6fe;border-radius:16px;background:linear-gradient(120deg,#f5f3ff,#eff6ff 55%,#ecfeff);box-shadow:0 8px 24px rgba(76,29,149,.07)}
.zai-hero h3{margin:5px 0 7px;font-size:22px;color:#312e81}.zai-hero p{margin:0;color:#475569}
.zai-kicker{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#7c3aed}
.zai-status{white-space:nowrap;border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:700}
.zai-status span{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.zai-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px}
.zai-kpi{padding:15px;border:1px solid var(--line);border-radius:13px;background:#fff}.zai-kpi span{display:block;color:#64748b;font-size:12px}.zai-kpi b{display:block;margin-top:6px;font-size:21px;color:#0f172a}.zai-kpi small{display:block;margin-top:4px;color:#64748b}
.zai-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:10px;align-items:start}
.zai-side{display:grid;gap:10px}.zai-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.zai-quick{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.zai-quick button{border:1px solid #ddd6fe;background:#f5f3ff;color:#5b21b6;border-radius:999px;padding:7px 10px;cursor:pointer;font-size:12px}.zai-quick button:hover{background:#ede9fe}
.zai-messages{min-height:260px;max-height:420px;overflow:auto;padding:12px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc}
.zai-msg{width:fit-content;max-width:88%;margin:0 0 9px;padding:10px 12px;border-radius:12px;white-space:pre-line;line-height:1.45;font-size:13px}
.zai-msg.ai{background:#fff;border:1px solid #ddd6fe;color:#312e81}.zai-msg.user{margin-left:auto;background:#4f46e5;color:#fff}
.zai-compose{display:flex;gap:8px;margin-top:10px}.zai-compose .inbox{flex:1}
.zai-insights{display:grid;gap:8px}.zai-insight{display:grid;grid-template-columns:30px 1fr;gap:9px;padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#fff}.zai-insight>span{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#f5f3ff}.zai-insight b,.zai-insight small{display:block}.zai-insight small{margin-top:3px;color:#64748b;line-height:1.35}
.zai-module-list{display:grid;gap:7px}.zai-module-list>div{display:grid;grid-template-columns:32px 1fr;gap:0 8px;padding:8px;border-bottom:1px solid #eef2f7}.zai-module-list>div:last-child{border:0}.zai-module-list span{grid-row:1/3;color:#7c3aed;font-weight:800}.zai-module-list b{font-size:13px}.zai-module-list small{color:#64748b}
@media(max-width:900px){.zai-layout{grid-template-columns:1fr}.zai-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.zai-hero{align-items:flex-start;flex-direction:column}}
.zai-phase2{margin-top:14px}.zai-phase-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:8px 2px}.zai-phase-title span{font-size:10px;font-weight:900;letter-spacing:1.5px;color:#7c3aed}.zai-phase-title h3{margin:2px 0 0;color:#1e1b4b}
.zai-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.zai-tabs button{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:9px;padding:9px 13px;cursor:pointer;font-weight:700}.zai-tabs button.active{border-color:#6366f1;background:#4f46e5;color:#fff}
.zai-inline{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.zai-inline label{font-size:12px;color:#64748b}.zai-inline .inbox{width:85px}
.zai-table-wrap{overflow:auto;margin-top:10px}.zai-table{width:100%;border-collapse:collapse;font-size:13px}.zai-table th,.zai-table td{padding:9px;border-bottom:1px solid #e2e8f0;text-align:left;white-space:nowrap}.zai-table th{background:#f8fafc;color:#475569}.zai-table .r{text-align:right}.zai-pill{display:inline-block;border-radius:999px;padding:3px 7px;background:#fef3c7;color:#92400e;font-size:11px;font-weight:700}.zai-pill.ok{background:#dcfce7;color:#166534}
.zai-forecast-chart{height:190px;display:flex;align-items:end;gap:7px;padding:18px 10px 2px;border:1px solid #e2e8f0;border-radius:12px;background:linear-gradient(#fff,#f8fafc)}.zai-bar-col{flex:1;min-width:34px;text-align:center}.zai-bar{width:100%;min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#8b5cf6,#3b82f6)}.zai-bar-col b{display:block;margin-bottom:4px;font-size:10px;color:#475569}.zai-bar-col small{display:block;margin-top:5px;font-size:10px;color:#64748b}
.zai-deal-grid{display:grid;grid-template-columns:2fr 1fr;gap:10px}.zai-deal-grid label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:#475569}.zai-deal-items{grid-column:1/-1}.zai-deal-items>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;max-height:230px;overflow:auto;padding:8px;border:1px solid #e2e8f0;border-radius:10px}.zai-deal-check{display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #eef2f7;border-radius:8px;background:#f8fafc}.zai-deal-check small{margin-left:auto;color:#64748b}.zai-deal-result{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.zai-deal-result>div{padding:12px;border-radius:10px;background:#eef2ff}.zai-deal-result span,.zai-deal-result b{display:block}.zai-deal-result span{font-size:11px;color:#64748b}.zai-deal-result b{margin-top:4px;color:#312e81}.zai-actions{display:flex;gap:8px;margin-top:10px}
.zai-manager-brief{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.zai-brief-card{padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}.zai-brief-card h4{margin:0 0 8px;color:#312e81}.zai-brief-card ul{margin:0;padding-left:18px}.zai-brief-card li{margin:5px 0;color:#475569;font-size:13px;line-height:1.4}
@media(max-width:900px){.zai-deal-items>div{grid-template-columns:1fr 1fr}.zai-manager-brief{grid-template-columns:1fr}.zai-deal-result{grid-template-columns:1fr 1fr}}
.zai-phase3{margin-top:18px}.zai-marketing-tools{display:grid;grid-template-columns:180px minmax(240px,1fr) auto;gap:8px;align-items:center}.zai-check-all{display:flex;gap:6px;align-items:center;font-size:13px;font-weight:700;color:#475569}.zai-campaign-box{margin-top:12px;padding:12px;border:1px solid #ddd6fe;border-radius:12px;background:#fafaff}.zai-campaign-box label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:#475569}.zai-campaign-box textarea{width:100%;resize:vertical}.zai-risk-critical{color:#b91c1c;font-weight:800}.zai-risk-warning{color:#b45309;font-weight:800}.zai-risk-info{color:#1d4ed8;font-weight:800}
.zai-executive-head{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center;margin-bottom:12px}.zai-health-ring{--score:0;display:grid;place-items:center;align-content:center;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at center,#fff 57%,transparent 58%),conic-gradient(#22c55e calc(var(--score)*1%),#e2e8f0 0);box-shadow:0 8px 20px rgba(15,23,42,.08)}.zai-health-ring b{font-size:34px;color:#0f172a}.zai-health-ring span{font-size:11px;color:#64748b}.zai-executive-advice{padding:14px;border-radius:12px;background:linear-gradient(135deg,#f5f3ff,#eff6ff);color:#312e81;line-height:1.55}.zai-score-up{color:#15803d}.zai-score-down{color:#b91c1c}
@media(max-width:900px){.zai-marketing-tools{grid-template-columns:1fr}.zai-executive-head{grid-template-columns:1fr}.zai-health-ring{margin:auto}}
.zai-phase4{margin-top:18px}.zai-p4-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.zai-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.zai-settings-grid label{padding:10px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc}.zai-settings-grid span{display:block;margin-bottom:6px;font-size:12px;font-weight:700;color:#475569}.zai-settings-grid .inbox{width:100%}.zai-approval-actions{display:flex;gap:5px}.zai-alert-critical{border-left:4px solid #dc2626}.zai-alert-warning{border-left:4px solid #f59e0b}.zai-alert-information{border-left:4px solid #3b82f6}
@media(max-width:900px){.zai-p4-two{grid-template-columns:1fr}.zai-settings-grid{grid-template-columns:1fr 1fr}}
.zai-phase5{margin-top:18px}.zai-voice-box{display:grid;grid-template-columns:auto 1fr 180px;gap:14px;align-items:center;padding:18px;border-radius:14px;background:linear-gradient(135deg,#eef2ff,#ecfeff)}.zai-mic{width:64px;height:64px;border:0;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;font-size:28px;cursor:pointer;box-shadow:0 8px 20px rgba(79,70,229,.3)}.zai-mic.listening{animation:zaiPulse 1.2s infinite;background:#dc2626}@keyframes zaiPulse{50%{transform:scale(1.08);box-shadow:0 0 0 12px rgba(220,38,38,.12)}}.zai-voice-answer,.zai-agent-result{margin-top:10px;padding:14px;border:1px solid #ddd6fe;border-radius:12px;background:#fafaff;white-space:pre-line;line-height:1.5}.zai-scan-grid{display:grid;grid-template-columns:minmax(260px,.8fr) 1.2fr;gap:12px}.zai-scan-preview{display:grid;place-items:center;min-height:280px;border:2px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#64748b;overflow:hidden}.zai-scan-preview img{max-width:100%;max-height:420px}.zai-scan-fields{grid-template-columns:1fr 1fr}.zai-phase5 .zai-executive-advice{margin-top:10px}
@media(max-width:900px){.zai-voice-box{grid-template-columns:auto 1fr}.zai-voice-box select{grid-column:1/-1}.zai-scan-grid{grid-template-columns:1fr}}
:root[data-theme="fullgreen"] .sidebar-item{ color:#d1fae5; }
:root[data-theme="fullgreen"] .sidebar-item:hover{ background:rgba(34,197,94,.14); }
:root[data-theme="fullgreen"] .sidebar-item.active,
:root[data-theme="fullgreen"] .sidebar-color-all .sidebar-item.active{
  background:linear-gradient(90deg,#16a34a,#22c55e);
  color:#ffffff;
  outline:1px solid rgba(134,239,172,.35);
}

:root[data-theme="fullgreen"] .order-left,
:root[data-theme="fullgreen"] .order-right,
:root[data-theme="fullgreen"] .panel,
:root[data-theme="fullgreen"] .card,
:root[data-theme="fullgreen"] .modal-card,
:root[data-theme="fullgreen"] .pay-table-wrap,
:root[data-theme="fullgreen"] .cart-table,
:root[data-theme="fullgreen"] .suggest-box,
:root[data-theme="fullgreen"] .split-list{
  background:rgba(8,48,24,.96);
  border-color:#2e7d32;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}

:root[data-theme="fullgreen"] .cart-h,
:root[data-theme="fullgreen"] .timebox,
:root[data-theme="fullgreen"] .tbl .thead,
:root[data-theme="fullgreen"] table.t thead th,
:root[data-theme="fullgreen"] .floor-tab.active,
:root[data-theme="fullgreen"] .pay-loyalty,
:root[data-theme="fullgreen"] .pay-kpi,
:root[data-theme="fullgreen"] .pay-method,
:root[data-theme="fullgreen"] .modal-btn,
:root[data-theme="fullgreen"] .modal-body,
:root[data-theme="fullgreen"] .modal-foot{
  background:rgba(15,77,38,.95);
  border-color:#2e7d32;
}

:root[data-theme="fullgreen"] .field input,
:root[data-theme="fullgreen"] .field select,
:root[data-theme="fullgreen"] textarea,
:root[data-theme="fullgreen"] .inbox,
:root[data-theme="fullgreen"] .split-input,
:root[data-theme="fullgreen"] .qedit,
:root[data-theme="fullgreen"] .mini,
:root[data-theme="fullgreen"] .chip,
:root[data-theme="fullgreen"] .cust-quick-btn{
  background:#0b341a;
  color:#ecfdf5;
  border-color:#2e7d32;
}
:root[data-theme="fullgreen"] .field input::placeholder{ color:#bbf7d0; }
:root[data-theme="fullgreen"] .field input:focus,
:root[data-theme="fullgreen"] .field select:focus,
:root[data-theme="fullgreen"] textarea:focus{
  border-color:#86efac;
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
}

:root[data-theme="fullgreen"] .tab,
:root[data-theme="fullgreen"] .btn,
:root[data-theme="fullgreen"] .tablebtn,
:root[data-theme="fullgreen"] #btnTablePicker,
:root[data-theme="fullgreen"] .chip,
:root[data-theme="fullgreen"] .mini,
:root[data-theme="fullgreen"] .floor-tab{
  background:#0b341a;
  color:#ecfdf5;
  border-color:#2e7d32;
}
:root[data-theme="fullgreen"] .tab.active,
:root[data-theme="fullgreen"] .btn.primary,
:root[data-theme="fullgreen"] .btn.green,
:root[data-theme="fullgreen"] .btn.sky,
:root[data-theme="fullgreen"] .btn.peacock,
:root[data-theme="fullgreen"] .btn.teal,
:root[data-theme="fullgreen"] .btn.orange,
:root[data-theme="fullgreen"] .btn.indigo,
:root[data-theme="fullgreen"] .btn.purple,
:root[data-theme="fullgreen"] .btn.amber{
  background:linear-gradient(90deg,#16a34a,#22c55e);
  border-color:#22c55e;
  color:#fff;
}
:root[data-theme="fullgreen"] .btn.yellow{background:#facc15;color:#111827;border-color:#facc15;}
:root[data-theme="fullgreen"] .btn.hotpink{background:#ff69b4;color:#fff;border-color:#ff69b4;}
:root[data-theme="fullgreen"] .btn.gray,
:root[data-theme="fullgreen"] .btn.dark,
:root[data-theme="fullgreen"] .btn.red{
  background:#0f4d26;
  color:#ecfdf5;
  border-color:#2e7d32;
}

:root[data-theme="fullgreen"] .cat,
:root[data-theme="fullgreen"] .item,
:root[data-theme="fullgreen"] .tbl-tile{
  background:linear-gradient(180deg,#0c421f 0%,#093519 100%);
  border-color:#2e7d32;
  color:#ecfdf5;
}
:root[data-theme="fullgreen"] .cat.active,
:root[data-theme="fullgreen"] .item:hover,
:root[data-theme="fullgreen"] .tbl-tile:hover,
:root[data-theme="fullgreen"] .row-sel{
  outline:2px solid rgba(134,239,172,.45);
  background:linear-gradient(180deg,#14532d 0%,#0c421f 100%) !important;
}
:root[data-theme="fullgreen"] .cat img,
:root[data-theme="fullgreen"] .item img{ background:#14532d; }
:root[data-theme="fullgreen"] .item .p strong,
:root[data-theme="fullgreen"] .timebox strong,
:root[data-theme="fullgreen"] .suggest-item .sid,
:root[data-theme="fullgreen"] .suggest-item .sname,
:root[data-theme="fullgreen"] .section-title,
:root[data-theme="fullgreen"] .card-v{ color:#ffffff; }

:root[data-theme="fullgreen"] .cart-row,
:root[data-theme="fullgreen"] .totals,
:root[data-theme="fullgreen"] .bottom-actions,
:root[data-theme="fullgreen"] .items-actions,
:root[data-theme="fullgreen"] .list .row,
:root[data-theme="fullgreen"] .tbl .trow,
:root[data-theme="fullgreen"] table.t th,
:root[data-theme="fullgreen"] table.t td,
:root[data-theme="fullgreen"] .split-row,
:root[data-theme="fullgreen"] .panel-title,
:root[data-theme="fullgreen"] .sidebar-foot,
:root[data-theme="fullgreen"] .floor-tabs,
:root[data-theme="fullgreen"] .tbl-tile,
:root[data-theme="fullgreen"] .pay-table-wrap,
:root[data-theme="fullgreen"] .legend{
  border-color:#2e7d32;
}

:root[data-theme="fullgreen"] .cart-row{ background:rgba(8,48,24,.7); }
:root[data-theme="fullgreen"] .cart-row.selected{ background:rgba(34,197,94,.18) !important; }
:root[data-theme="fullgreen"] .suggest-item:hover{ background:rgba(34,197,94,.15); }
:root[data-theme="fullgreen"] .suggest-item.active{ background:rgba(34,197,94,.22); }
:root[data-theme="fullgreen"] .tbl-green{ background:#16a34a; color:#fff; }
:root[data-theme="fullgreen"] .tbl-amber{ background:#4d7c0f; color:#fff; }
:root[data-theme="fullgreen"] .tbl-orange{ background:#15803d; color:#fff; }
:root[data-theme="fullgreen"] .tbl-purple{ background:#166534; color:#fff; }
:root[data-theme="fullgreen"] .tbl-red{ background:#14532d; color:#fff; }
:root[data-theme="fullgreen"] .tbl-blue{ background:#0f766e; color:#fff; }
:root[data-theme="fullgreen"] .tbl-gray,
:root[data-theme="fullgreen"] .tbl-inactive{ background:#1f2937; color:#d1d5db; }


/* === PRINT FIX FOR BLACK TEXT === */
@media print {
  * {
    color: #000000 !important;
  }

  .muted,
  .text-muted {
    color: #000000 !important;
  }

  .report,
  .report * {
    color: #000000 !important;
  }
}


/* === Cart visible rows by order type (Apr-2026) ===
   Dine In: show 7 rows, then scrollbar
   Takeaway: show 6 rows, then scrollbar
   H Delivery: show 5 rows, then scrollbar
   Keeps totals/buttons visible below cart.
*/
#view-newOrder.dinein-mode .cart-b{
  height: calc(var(--cart-row-h) * 7) !important;
  max-height: calc(var(--cart-row-h) * 7) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#view-newOrder.takeaway-mode .cart-b{
  height: calc(var(--cart-row-h) * 6) !important;
  max-height: calc(var(--cart-row-h) * 6) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#view-newOrder.delivery-mode .cart-b{
  height: calc(var(--cart-row-h) * 5) !important;
  max-height: calc(var(--cart-row-h) * 5) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}


/* ===== New Order button: Hot Pink (Electron + PWA) ===== */
#btnNew,
#btnNew.btn,
#btnNew.btn.gray{
  background:#ff1493 !important;
  color:#fff !important;
  border-color:#ff1493 !important;
}
#btnNew:hover,
#btnNew.btn:hover,
#btnNew.btn.gray:hover{
  background:#e01284 !important;
  border-color:#e01284 !important;
  color:#fff !important;
}
#btnNew:active,
#btnNew.btn:active,
#btnNew.btn.gray:active{
  background:#c81073 !important;
  border-color:#c81073 !important;
  color:#fff !important;
}


/* Font update: total displays slightly larger as requested */
.trow.total{font-size:15px !important;}
.receipt .total{font-size:15px !important;}
#tTotal,
#dlgOrderTotal,
#eodNetSales,
#eodSales,
#eodCash,
#eodCard,
#eodBank,
#eodExpense,
#eodRefund,
#shiftNetSales,
#shiftSales,
#shiftCash,
#shiftCard,
#shiftBank,
#shiftExpense,
#shiftRefund{
  font-size:15px !important;
  font-weight:800 !important;
}


/* === Zaytuna POS: New Order type tabs fixed size (Electron + PWA) === */
#view-newOrder > .order-tabs > button.tab[data-otype="Dine In"],
#view-newOrder > .order-tabs > button.tab[data-otype="Takeaway"],
#view-newOrder > .order-tabs > button.tab[data-otype="Home Delivery"]{
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* === Zaytuna POS: New Order action buttons fixed 92px width (Electron + PWA) === */
#btnNew,
#btnKot,
#btnBill,
#btnClose{
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* === Zaytuna POS: Item action buttons fixed 92px width (Electron + PWA) === */
#btnLessItem,
#btnNote,
#btnChgPrice,
#btnChgQty,
#btnTableTransfer,
#btnSplitOrder{
  width: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}


/* Orders list bulk delete (admin only) */
#view-orders .dash-head{gap:12px}
#view-orders .dash-actions{display:flex;align-items:center;justify-content:flex-end;flex:1;flex-wrap:nowrap;gap:6px;min-width:0}
#view-orders .orders-toolbar-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#view-orders .orders-toolbar-actions .btn{white-space:nowrap}
#view-orders #ordersSearch{flex:1 1 260px;min-width:220px!important}
#ordersSelectAllDelete,#ordersBulkDelete{background:#dc2626;color:#fff;border-color:#dc2626}
#ordersSelectAllDelete:hover,#ordersBulkDelete:hover{filter:brightness(.96)}
#ordersTable .orders-bulk-head,#ordersTable .orders-bulk-row{min-width:1180px}
#ordersTable input[type=checkbox]{width:18px;height:18px;accent-color:#dc2626;cursor:pointer}
@media (max-width:1100px){
  #view-orders .dash-head{align-items:flex-start;flex-direction:column}
  #view-orders .dash-actions{width:100%;justify-content:flex-start;flex-wrap:wrap}
  #view-orders .orders-toolbar-actions{order:0}
  #view-orders #ordersSearch{flex-basis:280px}
}

/* Dashboard Sales Graph (Electron + PWA) */
.sales-graph-panel{margin-top:10px;overflow:hidden}
.sales-graph-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:10px}
.sales-graph-total-heading{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.1}
.sales-graph-total-amount{font-size:26px;font-weight:900;color:#0f172a;letter-spacing:.2px}
.sales-graph-total-label{font-size:14px;font-weight:700;color:#64748b}
.sales-graph-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.compact-select{min-width:150px;height:34px;padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--text)}
.sales-graph-wrap{position:relative;padding:6px 22px 12px 18px;min-height:280px}
#dashSalesGraph{display:block;width:100%;max-width:100%;box-sizing:border-box;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdff)}
.sales-graph-tooltip{position:absolute;z-index:5;padding:8px 10px;border-radius:10px;background:#111827;color:#fff;font-size:12px;line-height:1.45;box-shadow:0 8px 24px rgba(15,23,42,.18);pointer-events:none;min-width:130px}
.sales-graph-report{margin:0 16px 16px 16px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sales-report-head{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.sales-report-row{display:grid;grid-template-columns:110px 120px minmax(180px,1fr) 120px;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px dashed #e5e7eb;font-size:13px}
.sales-report-row:last-child{border-bottom:none}
@media (max-width:720px){.sales-report-row{grid-template-columns:1fr 1fr}.compact-select{min-width:130px}.sales-graph-title{align-items:flex-start}.sales-graph-total-amount{font-size:24px}}

/* === Zaytuna Update: Table List full-page responsive layout (Electron + PWA) === */
#view-tables:not(.hidden){
  height:100%;
  width:100%;
  max-width:none !important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding:0;
}
#view-tables .dash-head{
  width:100%;
  max-width:none !important;
  flex:0 0 auto;
  gap:10px;
  padding:0 0 10px 0;
  margin:0;
}
#view-tables .dash-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
#view-tables #tablesSearch{
  flex:1 1 260px;
  min-width:220px !important;
  max-width:420px;
}
#view-tables .panel{
  flex:1 1 auto;
  min-height:0;
  width:100% !important;
  max-width:none !important;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
#view-tables .panel-title{
  flex:0 0 auto;
}
#view-tables #tablesTable{
  flex:1 1 auto;
  min-height:0;
  width:100% !important;
  overflow:auto;
}
#view-tables #tablesTable .thead,
#view-tables #tablesTable .trow{
  min-width:900px;
  width:100%;
  box-sizing:border-box;
}
#view-tables #tablesTable .r{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  text-align:right;
}
#view-tables #tablesTable .thead .r{
  display:block;
}
@media (max-width: 900px){
  #view-tables .dash-head{align-items:flex-start;flex-direction:column;}
  #view-tables .dash-actions{width:100%;justify-content:flex-start;}
  #view-tables #tablesSearch{max-width:none;width:100%;}
}

/* ==========================================================
   FINAL FIX: Table List / Select Table must open full page
   Electron + PWA: remove left/right/top/bottom gaps in dialog
   ========================================================== */
#dlgTablePicker.modal[open]{
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  max-height:100vh !important;
  margin:0 !important;
  padding:0 !important;
  inset:0 !important;
  display:flex !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  overflow:hidden !important;
  background:#f2efe8 !important;
}
#dlgTablePicker.modal::backdrop{
  background:transparent !important;
}
#dlgTablePicker .modal-card.modal-wide{
  width:100vw !important;
  height:100vh !important;
  max-width:100vw !important;
  max-height:100vh !important;
  min-width:100vw !important;
  min-height:100vh !important;
  margin:0 !important;
  padding:18px 28px 14px 28px !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  background:#f2efe8 !important;
}
#dlgTablePicker .modal-title{
  flex:0 0 auto !important;
  margin:4px 0 12px !important;
}
#dlgTablePicker .modal-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  padding:0 !important;
}
#dlgTablePicker .floor-tabs{
  margin:0 0 14px 0 !important;
  padding:4px 0 10px 0 !important;
}
#dlgTablePicker .tables-grid{
  width:100% !important;
  box-sizing:border-box !important;
  grid-template-columns:repeat(auto-fill, minmax(122px, 1fr)) !important;
  gap:10px !important;
  padding:2px 2px 10px 2px !important;
  align-content:start !important;
}
#dlgTablePicker .tbl-tile{
  min-height:62px !important;
  height:62px !important;
}
#dlgTablePicker .legend{
  margin:8px 0 0 0 !important;
}
#dlgTablePicker .modal-actions{
  flex:0 0 auto !important;
  margin-top:10px !important;
  padding:0 !important;
}
@media (max-width:900px){
  #dlgTablePicker .modal-card.modal-wide{
    padding:12px 14px 10px 14px !important;
  }
  #dlgTablePicker .tables-grid{
    grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap:8px !important;
  }
  #dlgTablePicker .tbl-tile{
    min-height:56px !important;
    height:56px !important;
  }
}

/* Dine-In table-first workflow: highlight Table No when item add is blocked */
.input-warn {
  outline: 2px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18) !important;
}

/* Second language display controlled by General Settings */
.second-lang{
  font-size: 12px;
  line-height: 1.15;
  opacity: .78;
  margin-top: 2px;
  direction: auto;
}
.cat .second-lang{font-weight:600;}
.item .second-lang{font-weight:600;}


/* Zaytuna Arabic full UI / RTL numeric fix */
body.zsp-lang-ar {
  direction: rtl;
  text-align: right;
}
body.zsp-lang-ar input,
body.zsp-lang-ar textarea,
body.zsp-lang-ar select {
  direction: rtl;
  text-align: right;
}
body.zsp-lang-ar .cart-row .rate,
body.zsp-lang-ar .cart-row .amt,
body.zsp-lang-ar .cart-row .qty,
body.zsp-lang-ar #tSub,
body.zsp-lang-ar #tSvc,
body.zsp-lang-ar #tTax,
body.zsp-lang-ar #tDisc,
body.zsp-lang-ar #tTotal {
  font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
}
body.zsp-lang-ar .cart-row {
  direction: rtl;
}


/* Zaytuna fix: Dashboard sales graph must never cut on the right side (Electron + PWA). */
#view-dashboard{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
#view-dashboard .sales-graph-panel{
  width:100%;
  max-width:100%;
  overflow:hidden;
}
#view-dashboard .sales-graph-wrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  padding-right:22px;
}
#view-dashboard #dashSalesGraph{
  width:100% !important;
  max-width:100% !important;
}
@media (max-width:900px){
  #view-dashboard .sales-graph-summary{gap:8px}
  #view-dashboard .sales-graph-wrap{padding-left:10px;padding-right:18px}
}


/* Zaytuna Arabic language deep fix: Electron + PWA */
html[dir="rtl"],
body.zsp-lang-ar{
  direction: rtl;
  unicode-bidi: embed;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}
body.zsp-lang-ar input,
body.zsp-lang-ar select,
body.zsp-lang-ar button,
body.zsp-lang-ar textarea,
body.zsp-lang-ar table,
body.zsp-lang-ar th,
body.zsp-lang-ar td{
  direction: rtl;
  text-align: right;
}
body.zsp-lang-ar input[type="date"],
body.zsp-lang-ar input[data-zsp-date-ar="1"],
body.zsp-lang-ar input[data-zsp-time-ar="1"]{
  direction: rtl !important;
  text-align: right !important;
  unicode-bidi: plaintext;
}
body.zsp-lang-ar .dash-head,
body.zsp-lang-ar .dash-actions,
body.zsp-lang-ar .topbar,
body.zsp-lang-ar .filters,
body.zsp-lang-ar .date-range{
  direction: rtl;
}
body.zsp-lang-ar .r{ text-align:left; }
body.zsp-lang-ar .panel-title,
body.zsp-lang-ar .card-k,
body.zsp-lang-ar .card-v{ direction:rtl; text-align:right; }


/* Zaytuna reports Arabic RTL polish */
body.zsp-lang-ar #view-reports .dash-actions{ justify-content:flex-start; }
body.zsp-lang-ar #view-reports select,
body.zsp-lang-ar #view-reports input,
body.zsp-lang-ar #view-reports button{ direction:rtl; text-align:right; }
body.zsp-lang-ar #view-reports .panel-title{ direction:rtl; text-align:right; }

/* === Zaytuna Smart POS: Modern green dashboard like reference design === */
#view-dashboard:not(.hidden){
  background:linear-gradient(135deg,#f8fff9 0%,#ffffff 44%,#f2fbf4 100%);
  min-height:100%;
  padding:18px 22px 28px;
  overflow:auto;
}
#view-dashboard .dash-head{
  margin:0 0 16px;
  padding:14px 16px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,132,35,.10);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,60,20,.07);
}
#view-dashboard .dash-head h2{margin:0;font-size:28px;letter-spacing:.2px;color:#0f172a}
#view-dashboard .btn{border-radius:12px}
.zsp-dashboard-modern{display:flex;flex-direction:column;gap:16px;width:100%}
.zsp-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(150px,1fr));gap:14px}
.zsp-kpi-card,
.zsp-modern-panel{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.07);
  border-radius:18px;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
}
.zsp-kpi-card{
  height:90px;
  min-height:90px;
  box-sizing:border-box;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
}
.zsp-kpi-card:after{
  content:"";position:absolute;right:-28px;bottom:-34px;width:92px;height:92px;border-radius:999px;
  border:10px solid rgba(0,132,35,.10);
}
.zsp-kpi-card .card-k{font-size:12px;color:#374151;margin-bottom:4px;font-weight:700;line-height:1.12}
.zsp-kpi-card .card-v{font-size:20px;font-weight:900;color:#020617;white-space:nowrap;line-height:1.05}
.zsp-kpi-icon{
  width:40px;height:40px;min-width:40px;border-radius:14px;
  display:grid;place-items:center;font-weight:900;font-size:22px;
  color:#008423;background:linear-gradient(135deg,#e8f8ea,#f7fff8);
  box-shadow:inset 0 0 0 1px rgba(0,132,35,.10);
}
.zsp-kpi-sub{margin-top:4px;font-size:11px;color:#6b7280;font-weight:700;line-height:1.1}.zsp-kpi-sub.good{color:#008423}.zsp-kpi-sub.bad{color:#e11d48}
.zsp-dashboard-main-grid{display:grid;grid-template-columns:minmax(420px,1.7fr) minmax(260px,.8fr) minmax(250px,.75fr);gap:16px;align-items:stretch}
.zsp-dashboard-bottom-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}
.zsp-modern-panel{padding:18px;overflow:hidden}.zsp-modern-panel .panel-title{font-size:18px;font-weight:900;margin:0 0 12px;color:#111827}
.zsp-sales-graph-card{padding:18px 18px 8px}.zsp-sales-graph-card .sales-graph-wrap{min-height:300px;padding:4px 12px 14px 8px}.zsp-sales-graph-card #dashSalesGraph{background:linear-gradient(180deg,#fff,#f9fffa);border-radius:16px}.compact-select{border-radius:12px;background:#fff}
.zsp-top-items-list{display:flex;flex-direction:column;gap:10px}.zsp-top-item{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid #eef2f7;font-size:14px}.zsp-top-item .rank{color:#111827;font-weight:800}.zsp-top-item b{background:#e8f8ea;color:#008423;border-radius:999px;padding:5px 12px;min-width:54px;text-align:center}
.zsp-top-items-panel{background:linear-gradient(180deg,#ffffff 0%,#fbfffc 100%)}
.zsp-top-items-panel .panel-title{display:flex;align-items:center;justify-content:space-between}.zsp-top-items-panel .panel-title:after{content:"●●●";font-size:11px;letter-spacing:2px;background:linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);-webkit-background-clip:text;background-clip:text;color:transparent}
.zsp-top-items-list{gap:11px}
.zsp-top-item.zsp-top-item-donut{--c1:#16a34a;--c2:#86efac;--pct:10%;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:10px 10px 10px 8px;border:1px solid rgba(15,23,42,.06);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(248,250,252,.92));box-shadow:0 9px 22px rgba(15,23,42,.06);position:relative;overflow:hidden}
.zsp-top-item.zsp-top-item-donut:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--c1),var(--c2))}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut{width:42px;height:42px;border-radius:999px;background:conic-gradient(var(--c1) 0 var(--pct),rgba(226,232,240,.9) var(--pct) 100%);display:grid;place-items:center;box-shadow:0 8px 18px color-mix(in srgb,var(--c1) 23%,transparent)}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut span{width:26px;height:26px;border-radius:999px;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:900;color:#0f172a;box-shadow:inset 0 0 0 1px rgba(15,23,42,.06)}
.zsp-top-item.zsp-top-item-donut .zsp-top-info{min-width:0;display:flex;flex-direction:column;gap:4px;text-align:left}
.zsp-top-item.zsp-top-item-donut .zsp-top-info strong{font-size:14px;font-weight:900;color:#111827;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.zsp-top-item.zsp-top-item-donut .zsp-top-info em{font-style:normal;font-size:10px;font-weight:800;color:#64748b;text-align:left}
.zsp-top-item.zsp-top-item-donut .zsp-top-info i{height:6px;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--c1) 0 var(--pct),#e5e7eb var(--pct) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.zsp-top-item.zsp-top-item-donut b{background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;box-shadow:0 8px 16px color-mix(in srgb,var(--c1) 22%,transparent);min-width:46px}
.zsp-top-item.zsp-top-item-donut.tone-1{--c1:#16a34a;--c2:#86efac}
.zsp-top-item.zsp-top-item-donut.tone-2{--c1:#2563eb;--c2:#93c5fd}
.zsp-top-item.zsp-top-item-donut.tone-3{--c1:#f59e0b;--c2:#fde68a}
.zsp-top-item.zsp-top-item-donut.tone-4{--c1:#ec4899;--c2:#f9a8d4}
.zsp-top-item.zsp-top-item-donut.tone-5{--c1:#8b5cf6;--c2:#c4b5fd}
body.zsp-lang-ar .zsp-top-item.zsp-top-item-donut .zsp-top-info,body.zsp-lang-ar .zsp-top-item.zsp-top-item-donut .zsp-top-info strong,body.zsp-lang-ar .zsp-top-item.zsp-top-item-donut .zsp-top-info em{text-align:right}
.zsp-side-money-cards{display:flex;flex-direction:column;gap:16px}.zsp-money-card{height:90px;min-height:90px}.zsp-money-card.danger .zsp-kpi-icon{color:#ef4444;background:#fff0f0}.zsp-money-card.danger:after{border-color:rgba(239,68,68,.12)}
.zsp-sales-overview-content{display:grid;grid-template-columns:290px 1fr;gap:26px;align-items:center;min-height:265px}.zsp-donut{--dine:0%;--take:0%;width:240px;height:240px;border-radius:50%;background:conic-gradient(#008423 0 var(--dine),#43bf3c var(--dine) var(--take),#a7d90f var(--take) 100%);display:grid;place-items:center;box-shadow:0 18px 32px rgba(0,132,35,.16)}.zsp-donut-hole{width:138px;height:138px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:inset 0 0 0 1px #eef2f7}.zsp-donut-hole strong{font-size:22px;color:#111827}.zsp-donut-hole span{font-size:13px;color:#6b7280;margin-top:5px}.zsp-donut-legend{display:flex;flex-direction:column;gap:18px}.zsp-donut-legend div{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px}.zsp-donut-legend .dot{width:12px;height:12px;border-radius:999px;display:inline-block}.zsp-donut-legend .dot.dine{background:#008423}.zsp-donut-legend .dot.take{background:#43bf3c}.zsp-donut-legend .dot.home{background:#a7d90f}.zsp-donut-legend b{font-size:18px}.zsp-donut-legend small{grid-column:3;color:#6b7280;font-weight:700}
.zsp-summary-list{display:flex;flex-direction:column;border-top:1px solid #eef2f7}.zsp-summary-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid #eef2f7;font-size:14px}.zsp-summary-row span{width:26px;height:26px;border-radius:9px;background:#e8f8ea;display:grid;place-items:center}.zsp-summary-row em{font-style:normal;color:#374151}.zsp-summary-row b{font-weight:900;color:#0f172a}
@media(max-width:1320px){.zsp-kpi-grid{grid-template-columns:repeat(3,1fr)}.zsp-dashboard-main-grid{grid-template-columns:1fr 1fr}.zsp-side-money-cards{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.zsp-money-card{height:auto}.zsp-dashboard-bottom-grid{grid-template-columns:1fr}}
@media(max-width:860px){#view-dashboard:not(.hidden){padding:12px}.zsp-kpi-grid,.zsp-dashboard-main-grid,.zsp-dashboard-bottom-grid,.zsp-side-money-cards{grid-template-columns:1fr}.zsp-sales-overview-content{grid-template-columns:1fr;justify-items:center}.zsp-donut{width:210px;height:210px}.zsp-kpi-card{height:90px;min-height:90px}}

/* Zaytuna dashboard: keep Total Sales Review donut directly below Total Expense and Total Purchase */
.zsp-side-money-cards .zsp-sales-review-card{
  padding:12px 14px;
  min-height:164px;
}
.zsp-side-money-cards .zsp-sales-review-card .panel-title{
  font-size:12px;
  margin:0 0 8px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,132,35,.14);
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-sales-overview-content{
  display:grid;
  grid-template-columns:118px 1fr;
  gap:12px;
  min-height:0;
  align-items:center;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut{
  width:118px;
  height:118px;
  box-shadow:0 10px 24px rgba(0,132,35,.14);
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-hole{
  width:64px;
  height:64px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-hole strong{
  font-size:11px;
  line-height:1.05;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-hole span{
  font-size:8px;
  margin-top:2px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-legend{
  gap:8px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-legend div{
  grid-template-columns:10px 1fr auto;
  gap:6px;
  font-size:10px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-legend .dot{
  width:7px;
  height:7px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-legend b{
  font-size:11px;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut-legend small{
  font-size:9px;
}
.zsp-dashboard-bottom-grid{
  grid-template-columns:1fr;
}
@media(max-width:1320px){
  .zsp-side-money-cards .zsp-sales-review-card{grid-column:1/-1;}
}
@media(max-width:860px){
  .zsp-side-money-cards .zsp-sales-review-card .zsp-sales-overview-content{grid-template-columns:1fr;justify-items:center;}
}


/* === Zaytuna dashboard compact alignment fix: Top Selling Items + Sales Graph (Electron + PWA) === */
.zsp-dashboard-main-grid{
  align-items:start !important;
}
.zsp-sales-graph-card{
  padding:14px 18px 6px !important;
}
.zsp-sales-graph-card .sales-graph-title{
  padding-bottom:6px !important;
}
.zsp-sales-graph-card .sales-graph-wrap{
  min-height:250px !important;
  padding:2px 12px 8px 8px !important;
}
.zsp-sales-graph-card #dashSalesGraph{
  height:250px !important;
}
.zsp-top-items-panel{
  padding:10px 14px 12px !important;
  align-self:start !important;
}
.zsp-top-items-panel .panel-title{
  margin:0 0 8px !important;
  font-family:Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.15 !important;
  color:#111827 !important;
}
.zsp-top-items-list{
  gap:7px !important;
}
.zsp-top-item.zsp-top-item-donut{
  min-height:54px !important;
  padding:7px 9px 7px 7px !important;
  border-radius:16px !important;
  grid-template-columns:42px minmax(0,1fr) auto !important;
  gap:9px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut{
  width:36px !important;
  height:36px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut span{
  width:23px !important;
  height:23px !important;
  font-size:10px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info{
  gap:3px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info strong{
  font-family:Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  line-height:1.15 !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info em{
  font-family:Arial, sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info i{
  height:5px !important;
}
.zsp-top-item.zsp-top-item-donut b{
  font-family:Arial, sans-serif !important;
  font-size:14px !important;
  font-weight:400 !important;
  min-width:42px !important;
  padding:4px 10px !important;
}

/* === Zaytuna dashboard side-card height + 5px alignment fix (Electron + PWA) === */
.zsp-side-money-cards{
  gap:5px !important;
  align-self:start !important;
}
.zsp-side-money-cards .zsp-money-card{
  height:72px !important;
  min-height:72px !important;
  padding:8px 12px !important;
  border-radius:0 !important;
}
.zsp-side-money-cards .zsp-money-card .zsp-kpi-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  font-size:17px !important;
  border-radius:0 !important;
}
.zsp-side-money-cards .zsp-money-card .card-k{
  font-size:12px !important;
  line-height:1.05 !important;
  margin:0 !important;
}
.zsp-side-money-cards .zsp-money-card .card-v{
  font-size:18px !important;
  line-height:1.1 !important;
  margin:2px 0 0 !important;
}
.zsp-side-money-cards .zsp-money-card .zsp-kpi-sub{
  font-size:10px !important;
  line-height:1.05 !important;
  margin-top:2px !important;
}
.zsp-side-money-cards .zsp-sales-review-card{
  margin-top:0 !important;
  border-radius:0 !important;
  min-height:196px !important;
  padding:10px 12px !important;
}
.zsp-side-money-cards .zsp-sales-review-card .panel-title{
  margin:0 0 6px !important;
  padding-bottom:5px !important;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-sales-overview-content{
  grid-template-columns:112px 1fr !important;
  gap:10px !important;
}
.zsp-side-money-cards .zsp-sales-review-card .zsp-donut{
  width:112px !important;
  height:112px !important;
}
@media(max-width:1320px){
  .zsp-side-money-cards{
    gap:5px !important;
  }
  .zsp-side-money-cards .zsp-money-card{
    height:72px !important;
    min-height:72px !important;
  }
}

/* === Zaytuna dashboard final alignment: reduce Top Selling Items height (Electron + PWA) === */
.zsp-top-items-panel{
  padding:8px 14px 8px !important;
}
.zsp-top-items-panel .panel-title{
  margin:0 0 6px !important;
  line-height:1.1 !important;
}
.zsp-top-items-list{
  gap:5px !important;
}
.zsp-top-item.zsp-top-item-donut{
  min-height:50px !important;
  padding:6px 8px 6px 7px !important;
  border-radius:15px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut{
  width:34px !important;
  height:34px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut span{
  width:22px !important;
  height:22px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info{
  gap:2px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info strong{
  line-height:1.1 !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info em{
  line-height:1.05 !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-info i{
  height:4px !important;
}

/* === Zaytuna dashboard exact line alignment: Top Selling Items with Total Sales Review (Electron + PWA) === */
.zsp-top-items-panel{
  padding:9px 14px 10px !important;
}
.zsp-top-items-panel .panel-title{
  margin:0 0 7px !important;
}
.zsp-top-items-list{
  gap:6px !important;
}
.zsp-top-item.zsp-top-item-donut{
  min-height:53px !important;
  padding:7px 8px 7px 7px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut{
  width:35px !important;
  height:35px !important;
}
.zsp-top-item.zsp-top-item-donut .zsp-top-donut span{
  width:22px !important;
  height:22px !important;
}

/* === Dashboard graph height reduced and aligned with Top Selling + Sales Review === */
.zsp-sales-graph-card{
  padding:10px 18px 0 !important;
}
.zsp-sales-graph-card .sales-graph-wrap{
  min-height:220px !important;
  padding:0 10px 2px 6px !important;
}
.zsp-sales-graph-card #dashSalesGraph{
  height:220px !important;
}

/* === Dashboard Sales Graph UP Alignment Fix (Electron + PWA) ===
   Sales Graph card ko Top Selling Items aur Total Expense ki top line ke barabar karta hai. */
#view-dashboard .zsp-dashboard-main-grid{
  align-items:start !important;
}
#view-dashboard .zsp-sales-graph-card{
  margin-top:-14px !important;
  padding-top:8px !important;
  height:calc(100% - 0px) !important;
}
#view-dashboard .zsp-sales-graph-card .sales-graph-wrap{
  min-height:210px !important;
  padding-top:0 !important;
}
#view-dashboard .zsp-sales-graph-card #dashSalesGraph{
  height:210px !important;
}
@media(max-width:1320px){
  #view-dashboard .zsp-sales-graph-card{
    margin-top:0 !important;
  }
}

/* === Dashboard right panels UP Alignment Fix (Electron + PWA) ===
   Sales Graph ab sahi position par hai; Top Selling Items + right side cards
   ko graph ki upper line ke barabar lane ke liye 14px upar shift. */
#view-dashboard .zsp-top-items-panel,
#view-dashboard .zsp-side-money-cards{
  margin-top:-14px !important;
}
#view-dashboard .zsp-side-money-cards{
  align-self:start !important;
}
#view-dashboard .zsp-top-items-panel{
  align-self:start !important;
}
@media(max-width:1320px){
  #view-dashboard .zsp-top-items-panel,
  #view-dashboard .zsp-side-money-cards{
    margin-top:0 !important;
  }
}

/* === Dashboard bottom alignment fix: reduce right panels height (Electron + PWA) ===
   Top alignment stays unchanged; only right-panel heights are compacted so bottom lines
   match the Sales Graph card. */
#view-dashboard .zsp-top-items-panel{
  padding:7px 14px 7px !important;
}
#view-dashboard .zsp-top-items-panel .panel-title{
  margin:0 0 5px !important;
  line-height:1.05 !important;
}
#view-dashboard .zsp-top-items-list{
  gap:4px !important;
}
#view-dashboard .zsp-top-item.zsp-top-item-donut{
  min-height:48px !important;
  padding:5px 8px 5px 7px !important;
  border-radius:14px !important;
}
#view-dashboard .zsp-top-item.zsp-top-item-donut .zsp-top-donut{
  width:33px !important;
  height:33px !important;
}
#view-dashboard .zsp-top-item.zsp-top-item-donut .zsp-top-donut span{
  width:21px !important;
  height:21px !important;
}
#view-dashboard .zsp-top-item.zsp-top-item-donut .zsp-top-info{
  gap:1px !important;
}
#view-dashboard .zsp-top-item.zsp-top-item-donut .zsp-top-info i{
  height:3px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card{
  height:68px !important;
  min-height:68px !important;
  padding:7px 12px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-sales-review-card{
  min-height:180px !important;
  height:180px !important;
  padding:9px 12px 8px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-sales-review-card .panel-title{
  margin:0 0 5px !important;
  padding-bottom:4px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-sales-review-card .zsp-sales-overview-content{
  grid-template-columns:106px 1fr !important;
  gap:9px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-sales-review-card .zsp-donut{
  width:106px !important;
  height:106px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-sales-review-card .zsp-donut-hole{
  width:60px !important;
  height:60px !important;
}
@media(max-width:1320px){
  #view-dashboard .zsp-top-items-panel,
  #view-dashboard .zsp-side-money-cards{
    margin-top:0 !important;
  }
  #view-dashboard .zsp-side-money-cards .zsp-sales-review-card{
    height:auto !important;
    min-height:164px !important;
  }
}

/* === Dashboard final side stack bottom alignment (Electron + PWA) ===
   Sales Graph + Top Selling Items top/bottom alignment already OK.
   Total Expense and Total Purchase are slightly compacted so the Total Sales Review
   bottom line matches Sales Graph and Top Selling Items. */
#view-dashboard .zsp-side-money-cards{
  gap:5px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card{
  height:60px !important;
  min-height:60px !important;
  padding:5px 12px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  font-size:15px !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-k{
  font-size:11px !important;
  line-height:1.0 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-v{
  font-size:17px !important;
  line-height:1.0 !important;
  margin:1px 0 0 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-sub{
  font-size:9px !important;
  line-height:1.0 !important;
  margin-top:1px !important;
}
@media(max-width:1320px){
  #view-dashboard .zsp-side-money-cards .zsp-money-card{
    height:auto !important;
    min-height:60px !important;
  }
}

/* === Zaytuna dashboard final graph height alignment (Electron + PWA) ===
   Top Selling Items + Total Sales Review alignment is OK. Increase only Sales Graph
   card height so its bottom line matches the Top Selling Items bottom line. */
#view-dashboard .zsp-sales-graph-card{
  height:313px !important;
  min-height:313px !important;
  padding-bottom:10px !important;
}
#view-dashboard .zsp-sales-graph-card .sales-graph-wrap{
  min-height:228px !important;
  padding-bottom:4px !important;
}
#view-dashboard .zsp-sales-graph-card #dashSalesGraph{
  height:228px !important;
}
@media(max-width:1320px){
  #view-dashboard .zsp-sales-graph-card{
    height:auto !important;
    min-height:300px !important;
  }
}

/* === Zaytuna Dashboard final spacing fix (Electron + PWA) ===
   Dashboard title/header box removed. 5px clean space between KPI cards
   and Sales Graph / Top Selling Items / Total Expense area. */
#view-dashboard .dash-head{
  display:none !important;
}
#view-dashboard:not(.hidden){
  padding-top:5px !important;
}
#view-dashboard .zsp-dashboard-modern{
  gap:5px !important;
  row-gap:5px !important;
}
#view-dashboard .zsp-kpi-grid{
  margin:0 !important;
}
#view-dashboard .zsp-dashboard-main-grid{
  margin-top:5px !important;
  gap:16px !important;
  align-items:start !important;
}
#view-dashboard .zsp-sales-graph-card{
  margin-top:0 !important;
}
#view-dashboard .zsp-top-items-panel,
#view-dashboard .zsp-side-money-cards{
  margin-top:0 !important;
}
#view-dashboard .zsp-dashboard-bottom-grid{
  margin-top:8px !important;
}


/* Zaytuna dashboard total sales green icon/text fix (Electron + PWA) */
#view-dashboard .kpi-sales .zsp-total-sales-icon,
#view-dashboard .zsp-summary-row.zsp-summary-total-sales span{
  color:#16a34a !important;
  background:linear-gradient(135deg,#dcfce7,#f0fdf4) !important;
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.18),0 8px 18px rgba(22,163,74,.10) !important;
}
#view-dashboard .kpi-sales .zsp-total-sales-icon svg,
#view-dashboard .zsp-summary-row.zsp-summary-total-sales span svg{
  width:23px;
  height:23px;
  display:block;
  color:#16a34a !important;
  stroke:#16a34a !important;
}
#view-dashboard .kpi-sales .zsp-total-sales-sub{
  color:#16a34a !important;
}


/* === Zaytuna dashboard graph full-width line fix (Electron + PWA) ===
   Canvas graph grid/wave ab right side tak full stretch hoti hai. */
#view-dashboard .sales-graph-wrap{
  padding-left:18px !important;
  padding-right:10px !important;
}
#view-dashboard #dashSalesGraph{
  width:100% !important;
  max-width:100% !important;
}


/* Zaytuna dashboard summary: make requested order/open/closed icons green (Electron + PWA) */
#view-dashboard .zsp-summary-row.zsp-summary-green-icon span{
  color:#16a34a !important;
  background:linear-gradient(135deg,#dcfce7,#f0fdf4) !important;
  box-shadow:inset 0 0 0 1px rgba(22,163,74,.18),0 8px 18px rgba(22,163,74,.10) !important;
  font-weight:900 !important;
}

/* === Zaytuna dashboard square icon border fix (Electron + PWA) ===
   Dashboard top KPI cards and bottom summary icons should be square/choras, not rounded. */
#view-dashboard .zsp-kpi-grid .zsp-kpi-card .zsp-kpi-icon,
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-icon,
#view-dashboard .zsp-summary-list .zsp-summary-row > span,
#view-dashboard .zsp-summary-row.zsp-summary-total-sales > span,
#view-dashboard .zsp-summary-row.zsp-summary-green-icon > span{
  border-radius:0 !important;
}

/* === Zaytuna dashboard KPI cards center amount + one-line top labels (Electron + PWA) ===
   Fix: all main card figures stay exactly in the card center; headings stay top-left in one line. */
#view-dashboard .zsp-kpi-grid{
  grid-template-columns:repeat(6,minmax(178px,1fr)) !important;
  gap:14px !important;
}
#view-dashboard .zsp-kpi-card{
  height:90px !important;
  min-height:90px !important;
  padding:0 !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
}
#view-dashboard .zsp-kpi-card > div:not(.zsp-kpi-icon){
  position:static !important;
}
#view-dashboard .zsp-kpi-card .card-k{
  position:absolute !important;
  top:9px !important;
  left:12px !important;
  right:12px !important;
  margin:0 !important;
  color:#374151 !important;
  font-size:10.5px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  text-align:left !important;
  z-index:3 !important;
}
#view-dashboard .zsp-kpi-card .zsp-kpi-icon{
  position:absolute !important;
  left:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  z-index:2 !important;
}
#view-dashboard .zsp-kpi-card .card-v{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  width:max-content !important;
  max-width:calc(100% - 72px) !important;
  text-align:center !important;
  font-size:20px !important;
  font-weight:900 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  color:#020617 !important;
  z-index:3 !important;
}
#view-dashboard .zsp-kpi-card .zsp-kpi-sub{
  position:absolute !important;
  left:58px !important;
  right:12px !important;
  bottom:10px !important;
  margin:0 !important;
  text-align:center !important;
  font-size:10.5px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:3 !important;
}
#view-dashboard .zsp-kpi-card:after{z-index:1 !important;pointer-events:none !important;}
@media(max-width:1320px){
  #view-dashboard .zsp-kpi-grid{grid-template-columns:repeat(3,minmax(178px,1fr)) !important;}
}
@media(max-width:860px){
  #view-dashboard .zsp-kpi-grid{grid-template-columns:1fr !important;}
}

/* === Zaytuna dashboard KPI final alignment: keep icon clear, amount slightly right (Electron + PWA) === */
#view-dashboard .zsp-kpi-card .card-v{
  left:calc(50% + 18px) !important;
  transform:translate(-50%,-50%) !important;
  max-width:calc(100% - 90px) !important;
}
#view-dashboard .zsp-kpi-card .zsp-kpi-sub{
  left:74px !important;
  right:12px !important;
  text-align:center !important;
}
#view-dashboard .zsp-kpi-card.kpi-sales .card-v,
#view-dashboard .zsp-kpi-card.kpi-closed-sales .card-v{
  left:calc(50% + 22px) !important;
}
#view-dashboard .zsp-kpi-card.kpi-sales .zsp-kpi-sub,
#view-dashboard .zsp-kpi-card.kpi-closed-sales .zsp-kpi-sub{
  left:78px !important;
}

/* === Zaytuna dashboard side money cards: Total Expense / Total Purchase layout (Electron + PWA) ===
   Make these two right-side cards match the reference: icon on left, label on top,
   amount below the label, subtitle directly below amount, with the pale ring on right. */
#view-dashboard .zsp-side-money-cards .zsp-money-card{
  height:60px !important;
  min-height:60px !important;
  padding:0 !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:#ffffff !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card:after{
  right:-34px !important;
  bottom:-36px !important;
  width:92px !important;
  height:92px !important;
  border-width:8px !important;
  border-color:rgba(0,132,35,.10) !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card.danger:after{
  border-color:rgba(239,68,68,.10) !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-icon{
  position:absolute !important;
  left:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  border-radius:0 !important;
  font-size:15px !important;
  z-index:3 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card > div:not(.zsp-kpi-icon){
  position:static !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-k{
  position:absolute !important;
  left:62px !important;
  right:10px !important;
  top:10px !important;
  margin:0 !important;
  text-align:left !important;
  font-size:11px !important;
  font-weight:800 !important;
  line-height:1 !important;
  color:#1f2937 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  z-index:3 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-v{
  position:absolute !important;
  left:62px !important;
  top:26px !important;
  transform:none !important;
  width:auto !important;
  max-width:calc(100% - 118px) !important;
  margin:0 !important;
  text-align:left !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#020617 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:3 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-sub{
  position:absolute !important;
  left:62px !important;
  right:10px !important;
  bottom:8px !important;
  margin:0 !important;
  text-align:left !important;
  font-size:9px !important;
  font-weight:800 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:3 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-sub.bad{
  color:#e11d48 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-sub.good{
  color:#008423 !important;
}

/* === Zaytuna dashboard Total Expense / Total Purchase fixed reference layout (Electron + PWA) ===
   Amount is kept under the title, aligned with title/subtitle like the reference image. */
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-k{
  left:62px !important;
  top:9px !important;
  right:10px !important;
  text-align:left !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .card-v{
  position:absolute !important;
  left:62px !important;
  top:25px !important;
  transform:none !important;
  width:auto !important;
  max-width:calc(100% - 118px) !important;
  margin:0 !important;
  text-align:left !important;
  font-size:18px !important;
  font-weight:900 !important;
  line-height:1 !important;
  color:#020617 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  z-index:4 !important;
}
#view-dashboard .zsp-side-money-cards .zsp-money-card .zsp-kpi-sub{
  left:62px !important;
  right:10px !important;
  bottom:7px !important;
  text-align:left !important;
}

/* ==========================================================
   Zaytuna update (Jun-2026): Classic desktop scrollbar style
   for New Order Categories and Items panels (Electron + PWA).
   Matches the provided Arabian Pizza Point screenshot: visible
   right-side grey track, slim thumb and arrow-button look.
   ========================================================== */
#cats,
#items{
  scrollbar-width: thin !important;                 /* Firefox / PWA */
  scrollbar-color: #9a9a9a #eeeeee !important;
  scrollbar-gutter: stable !important;
}

#cats::-webkit-scrollbar,
#items::-webkit-scrollbar{
  width: 15px !important;
  height: 15px !important;
}

#cats::-webkit-scrollbar-track,
#items::-webkit-scrollbar-track{
  background: #eeeeee !important;
  border-left: 1px solid #cfcfcf !important;
  box-shadow: inset 0 0 0 1px #f8f8f8 !important;
}

#cats::-webkit-scrollbar-thumb,
#items::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg,#bdbdbd 0%,#9b9b9b 48%,#bdbdbd 100%) !important;
  border: 1px solid #8f8f8f !important;
  border-radius: 0 !important;
  min-height: 34px !important;
}

#cats::-webkit-scrollbar-thumb:hover,
#items::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(90deg,#ababab 0%,#858585 48%,#ababab 100%) !important;
}

#cats::-webkit-scrollbar-corner,
#items::-webkit-scrollbar-corner{
  background: #eeeeee !important;
}

/* Chrome/Edge/Electron arrow buttons */
#cats::-webkit-scrollbar-button:single-button,
#items::-webkit-scrollbar-button:single-button{
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background-color: #eeeeee !important;
  border-left: 1px solid #cfcfcf !important;
  border-top: 1px solid #d8d8d8 !important;
  border-bottom: 1px solid #bdbdbd !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#cats::-webkit-scrollbar-button:single-button:vertical:decrement,
#items::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image: linear-gradient(45deg, transparent 50%, #555 50%), linear-gradient(135deg, #555 50%, transparent 50%) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: 4px 6px, 8px 6px !important;
}

#cats::-webkit-scrollbar-button:single-button:vertical:increment,
#items::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image: linear-gradient(225deg, transparent 50%, #555 50%), linear-gradient(315deg, #555 50%, transparent 50%) !important;
  background-size: 5px 5px, 5px 5px !important;
  background-position: 4px 5px, 8px 5px !important;
}

/* ==========================================================
   Zaytuna fix (Jun-2026): Categories + Items scrollbar line
   dono panels ka scrollbar ek hi seedhi vertical line mein rahe.
   Outer right-panel scrollbar disabled; only #cats and #items scroll.
   ========================================================== */
#view-newOrder .order-right,
#view-newOrder .order-right-body{
  overflow: hidden !important;
}
#view-newOrder .order-right-body{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#view-newOrder #cats,
#view-newOrder #items{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  border-right: 1px solid #d6d6d6 !important;
}
#view-newOrder #cats{
  flex: 0 0 auto !important;
}
#view-newOrder #items{
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#view-newOrder .section-title{
  flex: 0 0 auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

/* ==========================================================
   Zaytuna final fix (Jun-2026): Items scrollbar must be visible
   and aligned with Categories scrollbar (Electron + PWA).
   Previous flex sizing allowed Items content to be clipped without
   its own scrollbar. This keeps right body fixed and makes #items
   the scrolling panel.
   ========================================================== */
#view-newOrder .order-right{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  overflow:hidden !important;
}
#view-newOrder .order-right-body{
  flex:1 1 auto !important;
  min-height:0 !important;
  height:auto !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  box-sizing:border-box !important;
}
#view-newOrder #cats{
  flex:0 0 auto !important;
  max-height:185px !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable !important;
}
#view-newOrder #items{
  flex:1 1 0 !important;
  min-height:0 !important;
  height:auto !important;
  max-height:none !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable !important;
}
#view-newOrder .items-actions{
  flex:0 0 auto !important;
}

/* ==========================================================
   Zaytuna fix (Jun-2026): Items card height/name restore
   Items scrollbar was visible but grid rows became too short, so
   pictures looked squeezed and item names were hidden. Keep the
   same right-side scrollbar, but restore the old card height and
   show item names under every picture (Electron + PWA).
   ========================================================== */
#view-newOrder #items.items-grid{
  align-content:start !important;
  align-items:start !important;
  grid-auto-rows:minmax(112px, auto) !important;
  row-gap:8px !important;
  column-gap:8px !important;
  padding-bottom:8px !important;
}
#view-newOrder .order-right .item{
  min-height:112px !important;
  height:auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
#view-newOrder .order-right .item img{
  height:78px !important;
  min-height:78px !important;
  max-height:78px !important;
  flex:0 0 78px !important;
  object-fit:cover !important;
}
#view-newOrder .order-right .item .body{
  flex:0 0 auto !important;
  min-height:29px !important;
  padding:5px !important;
  display:block !important;
  overflow:visible !important;
  background:#fff !important;
}
#view-newOrder .order-right .item .n{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  color:#111827 !important;
  font-size:11px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  white-space:normal !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Zaytuna urgent: per table/order Service Charges ON/OFF switch */
.totals .service-charge-row{
  display:grid !important;
  grid-template-columns: 1fr auto minmax(78px, auto) !important;
  align-items:center !important;
  column-gap:8px !important;
}
.svc-toggle{
  width:38px;
  height:18px;
  border:0;
  border-radius:999px;
  padding:0;
  cursor:pointer;
  position:relative;
  background:#cbd5e1;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  vertical-align:middle;
}
.svc-toggle::after{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  transition:left .15s ease;
}
.svc-toggle.on{ background:#72b83a; }
.svc-toggle.on::after{ left:23px; }
.svc-toggle .svc-toggle-text{
  display:block;
  font-size:8px;
  line-height:18px;
  font-weight:900;
  color:#fff;
  padding:0 6px 0 15px;
  text-align:right;
}
.svc-toggle.on .svc-toggle-text{ padding:0 15px 0 6px; text-align:left; }

/* ==========================================================
   Zaytuna update (Jun-2026): Moveable Categories/Items splitter
   User can drag the divider up/down in Electron and PWA.
   Height is saved in localStorage and restored on next app open.
   ========================================================== */
#view-newOrder .zsp-cat-resizer{
  flex:0 0 14px !important;
  height:14px !important;
  min-height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:ns-resize !important;
  user-select:none !important;
  touch-action:none !important;
  background:linear-gradient(#f8fafc,#eef2f7) !important;
  border-top:1px solid #cfd6df !important;
  border-bottom:1px solid #cfd6df !important;
  box-sizing:border-box !important;
  margin:4px 0 !important;
  position:relative !important;
  z-index:4 !important;
}
#view-newOrder .zsp-cat-resizer span{
  width:34px !important;
  height:8px !important;
  display:block !important;
  position:relative !important;
}
#view-newOrder .zsp-cat-resizer span:before,
#view-newOrder .zsp-cat-resizer span:after{
  content:'' !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  height:2px !important;
  background:#6b7280 !important;
}
#view-newOrder .zsp-cat-resizer span:before{top:1px !important;}
#view-newOrder .zsp-cat-resizer span:after{bottom:1px !important;}
#view-newOrder .zsp-cat-resizer:hover,
#view-newOrder .zsp-cat-resizer:focus{
  background:#e8eef8 !important;
  outline:2px solid rgba(37,99,235,.22) !important;
}
#view-newOrder.zsp-resizing-cats,
#view-newOrder.zsp-resizing-cats *{
  cursor:ns-resize !important;
  user-select:none !important;
}
#view-newOrder #cats.zsp-cats-resized{
  max-height:none !important;
}

/* WhatsApp recipient matrix */
.wa-recipient-table{display:grid;grid-template-columns:minmax(220px,1fr) 110px 110px;gap:0;border:1px solid #cfeee2;border-radius:10px;overflow:hidden;background:#fff}
.wa-recipient-table>div,.wa-recipient-table>label{padding:8px 10px;border-bottom:1px solid #e5f5ee;display:flex;align-items:center;min-height:34px}
.wa-recipient-table>label{justify-content:center;border-left:1px solid #e5f5ee}
.wa-recipient-table>*:nth-last-child(-n+3){border-bottom:0}
.wa-recipient-head{font-weight:800;background:#eafaf3;color:#087b48}
@media (max-width:700px){.wa-recipient-table{grid-template-columns:minmax(160px,1fr) 84px 84px;font-size:13px}}

/* =========================================================
   Zaytuna Smart POS - Mobile PWA New Order desktop-layout fix
   User requested: keep the same desktop design on mobile:
   left cart/order panel + right Categories/Items panel, not stacked.
   Mobile will scroll horizontally if the screen is narrow.
   ========================================================= */
@media (max-width: 900px){
  html, body{
    overflow-x:auto !important;
  }
  body{
    min-width:0 !important;
  }
  .app{
    overflow:auto !important;
    align-items:stretch !important;
  }
  .content{
    overflow:auto !important;
    min-width:1160px !important;
    width:1160px !important;
    flex:0 0 1160px !important;
  }
  #view-newOrder{
    overflow:auto !important;
    padding:0 !important;
    min-width:1160px !important;
  }

  /* Keep Categories and Items on the RIGHT side exactly like desktop */
  #view-newOrder .order-grid{
    display:grid !important;
    grid-template-columns:410px 1fr !important;
    gap:10px !important;
    align-items:start !important;
    min-width:1160px !important;
    width:1160px !important;
  }
  #view-newOrder .order-left{
    width:410px !important;
    max-width:410px !important;
    min-width:410px !important;
  }
  #view-newOrder .order-right{
    width:auto !important;
    max-width:none !important;
    min-width:730px !important;
  }

  /* Same desktop-style grids on mobile/tablet */
  #view-newOrder .cats-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:8px !important;
  }
  #view-newOrder .items-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  /* Cart columns must remain desktop-like, not squeezed/hidden */
  #view-newOrder .cart-h,
  #view-newOrder .cart-row{
    grid-template-columns:70px 1fr 60px 70px 80px !important;
  }
  #view-newOrder .cart-h > div,
  #view-newOrder .cart-row > div,
  #view-newOrder .cart-row .rate,
  #view-newOrder .cart-row .amt{
    display:block !important;
  }

  /* Bottom action buttons in horizontal rows, not one-over-one */
  #view-newOrder .bottom-actions,
  #view-newOrder .items-actions{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    align-items:center !important;
  }
  #view-newOrder .bottom-actions .btn,
  #view-newOrder .items-actions .btn{
    flex:0 0 auto !important;
    min-width:84px !important;
    width:auto !important;
    padding:7px 10px !important;
  }
}

/* =========================================================
   Zaytuna Smart POS - Mobile PWA sidebar visibility fix
   Keep the full desktop sidebar visible on mobile when using
   the desktop-style New Order layout.
   ========================================================= */
@media (max-width: 900px){
  html, body{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:auto !important;
  }
  .app{
    display:flex !important;
    flex-direction:row !important;
    overflow:auto !important;
    min-width:1325px !important; /* 165 sidebar + 1160 content */
    width:max-content !important;
    height:calc(100% - 44px) !important;
  }
  .sidebar{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:165px !important;
    min-width:165px !important;
    max-width:165px !important;
    flex:0 0 165px !important;
    padding:8px 0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:50 !important;
  }
  .sidebar .lbl{
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
    white-space:normal !important;
  }
  .sidebar-item{
    justify-content:flex-start !important;
    gap:10px !important;
    padding:8px 12px !important;
    min-height:38px !important;
  }
  .sidebar-item .ico{
    width:22px !important;
    height:22px !important;
    flex:0 0 22px !important;
  }
  .content{
    flex:0 0 1160px !important;
    min-width:1160px !important;
    width:1160px !important;
  }
  .topbar{
    min-width:1325px !important;
  }
}
/* General Settings contextual help: shared by Electron and PWA. */
.settings-title-with-help,
.settings-label-with-help{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.second-language-settings-grid{
  display:grid;
  grid-template-columns:minmax(320px,1fr) 140px minmax(280px,.8fr) 140px;
  gap:12px;
  align-items:end;
  width:100%;
}
.settings-help-icon{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:20px;
  height:20px;
  min-width:20px;
  padding:0;
  border:1px solid #16a34a;
  border-radius:50%;
  background:#ecfdf3;
  color:#15803d;
  font:800 13px/1 Arial,sans-serif;
  cursor:help;
  vertical-align:middle;
  z-index:5;
}
.settings-help-icon:hover,
.settings-help-icon:focus-visible,
.settings-help-icon:focus{
  color:#fff;
  background:#16a34a;
  outline:none;
}
.settings-help-icon::after{
  content:attr(data-help);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  width:max-content;
  max-width:min(360px, calc(100vw - 40px));
  padding:9px 11px;
  border-radius:8px;
  background:#17202a;
  color:#fff;
  box-shadow:0 7px 20px rgba(0,0,0,.22);
  font:600 12px/1.45 Arial,sans-serif;
  text-align:left;
  white-space:normal;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%,5px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  z-index:1000;
}
.settings-help-icon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:calc(100% + 4px);
  border:5px solid transparent;
  border-top-color:#17202a;
  opacity:0;
  visibility:hidden;
  transform:translateX(-50%);
  transition:opacity .15s ease,visibility .15s ease;
  z-index:1001;
}
.settings-help-icon:hover::after,
.settings-help-icon:hover::before,
.settings-help-icon:focus::after,
.settings-help-icon:focus::before,
.settings-help-icon:focus-visible::after,
.settings-help-icon:focus-visible::before{
  opacity:1;
  visibility:visible;
}
.settings-help-icon:hover::after,
.settings-help-icon:focus::after,
.settings-help-icon:focus-visible::after{
  transform:translate(-50%,0);
}
/* Kitchen Display: wide cards, three orders per row on desktop. */
#view-kitchen .dash-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 0 10px !important;
  padding:0 10px 0 0 !important;
}
#view-kitchen .kitchen-head-left{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:18px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}
#view-kitchen .kitchen-head-left h2,
#view-kitchen .kitchen-head-left .fg{
  margin:0 !important;
  min-width:auto !important;
}
#view-kitchen .kitchen-order-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
#view-kitchen .kitchen-order-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  min-height:190px;
  padding:16px;
  border:1px solid #d8e2dc;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.06);
}
#view-kitchen .kitchen-order-main{
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
}
#view-kitchen .kitchen-order-footer{
  min-width:0;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid #e5e7eb;
  text-align:right;
}
@media (max-width:1050px){
  #view-kitchen .kitchen-order-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:700px){
  #view-kitchen .dash-head{height:auto !important;min-height:42px !important;padding:6px 10px !important;}
  #view-kitchen .kitchen-head-left{gap:9px !important;overflow-x:auto;}
  #view-kitchen .kitchen-head-left h2{font-size:16px;}
  #view-kitchen .kitchen-order-grid{grid-template-columns:minmax(0,1fr);}
}