:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1f2630;
  --line: #2d3643;
  --text: #e8edf3;
  --muted: #8b97a7;
  --accent: #3b82f6;
  --free: #22c55e;
  --busy: #3b82f6;
  --warn: #f59e0b;
  --danger: #ef4444;
  --reserved: #a855f7;
  --maint: #6b7280;
  --radius: 14px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  font-size: 17px; line-height: 1.5;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ===== الهيدر ===== */
header.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line);
}
header.top .brand { font-weight: 800; font-size: 19px; margin-inline-end: auto; }
header.top .who { color: var(--muted); font-size: 15px; }
nav.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); scrollbar-width: none; }
nav.tabs a {
  flex: none; padding: 8px 14px; border-radius: 999px; color: var(--muted); text-decoration: none;
  background: var(--panel-2); font-weight: 600; font-size: 15px; position: relative;
}
nav.tabs a.on { background: var(--accent); color: #fff; }
.badge { background: var(--danger); color: #fff; border-radius: 999px; font-size: 12px; padding: 0 7px; margin-inline-start: 6px; }
main { padding: 14px; max-width: 1200px; margin: 0 auto; }

/* ===== أزرار وحقول ===== */
.btn {
  border: 0; border-radius: 12px; padding: 12px 18px; min-height: 52px;
  background: var(--panel-2); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.ok { background: var(--free); color: #04210f; }
.btn.warn { background: var(--warn); color: #2a1a00; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); }
.btn.sm { min-height: 40px; padding: 6px 12px; font-size: 15px; border-radius: 10px; }
.btn:disabled { opacity: .45; }
.btn.block { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row > .grow { flex: 1; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
input, select, textarea {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; min-height: 48px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.seg { display: flex; background: var(--bg); border-radius: 12px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { flex: 1; border: 0; background: transparent; padding: 10px; border-radius: 9px; font-weight: 700; min-height: 46px; min-width: 70px; }
.seg button.on { background: var(--accent); color: #fff; }

/* ===== كروت الأجهزة ===== */
.devices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.dev {
  border: 0; text-align: start; border-radius: var(--radius); padding: 14px; min-height: 170px;
  background: var(--panel); border-top: 6px solid var(--free); display: flex; flex-direction: column; gap: 4px;
}
.dev .name { font-size: 21px; font-weight: 800; }
.dev .meta { color: var(--muted); font-size: 14px; }
.dev .state { font-weight: 700; }
.dev .big { font-size: 30px; font-weight: 800; }
.dev .money { font-size: 19px; font-weight: 700; }
.dev.free { border-color: var(--free); }
.dev.free .state { color: var(--free); }
.dev.busy { border-color: var(--busy); }
.dev.busy .state { color: var(--busy); }
.dev.paused { border-color: var(--maint); }
.dev.ending { border-color: var(--warn); background: #2a2110; }
.dev.ending .state { color: var(--warn); }
.dev.over { border-color: var(--danger); background: #2b1414; animation: pulse 1s infinite alternate; }
.dev.over .state { color: var(--danger); }
.dev.maint { border-color: var(--maint); opacity: .6; }
@keyframes pulse { to { background: #3b1616; } }
.chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.chip { background: var(--panel-2); border-radius: 999px; padding: 1px 9px; font-size: 13px; }

/* ===== البوفيه ===== */
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.prod {
  border: 0; background: var(--panel); border-radius: var(--radius); padding: 12px 8px; min-height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative;
}
.prod .emo { font-size: 34px; line-height: 1; }
.pending { background: var(--bg); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.pending { gap: 0; }
/* أعمدة ثابتة عشان علامات كل الأصناف تبقى تحت بعض */
.pend-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px 64px 40px; align-items: center; gap: 10px;
  padding: 10px 2px; border-bottom: 1px solid var(--line);
}
.pend-row:last-of-type { border-bottom: 0; }
.pend-name { font-weight: 700; font-size: 17px; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pend-name small { color: var(--muted); font-weight: 400; font-size: 13px; }
.stepper {
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  background: var(--panel-2); border-radius: 999px; padding: 3px; height: 50px;
}
.stepper button {
  border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 24px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--text);
}
.stepper button[data-m="dc-inc"], .stepper button[data-act="cart-inc"] { background: var(--accent); color: #fff; }
.stepper b { text-align: center; font-size: 20px; }
.pend-total { text-align: left; font-weight: 800; white-space: nowrap; }
.pend-rm {
  border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 50%;
  width: 38px; height: 38px; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.pending .btn.ok { margin-top: 10px; }
@media (max-width: 420px) {
  .pend-row { grid-template-columns: minmax(0, 1fr) 120px 54px 34px; gap: 6px; }
  .stepper { grid-template-columns: 40px 1fr 40px; height: 46px; }
  .stepper button { width: 40px; height: 40px; }
  .pend-rm { width: 34px; height: 34px; }
}
.prod .pimg { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: #fff; }
.pimg-sm { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; vertical-align: middle; background: #fff; }
.img-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text); }
.img-box { width: 96px; height: 96px; border-radius: 14px; background: var(--bg); border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.img-box img { width: 100%; height: 100%; object-fit: cover; }
.img-box .emo { font-size: 40px; }
.btn:has(> .file-over) { position: relative; overflow: hidden; }
.file-over { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; padding: 0; }
.prod .pn { font-weight: 700; text-align: center; }
.prod .pp { color: var(--muted); font-size: 14px; display: block; background: none; padding: 0; border-radius: 0; }
.prod .stock { position: absolute; top: 6px; inset-inline-start: 8px; font-size: 12px; color: var(--muted); }
.prod.low .stock { color: var(--warn); font-weight: 800; }
.prod.out { opacity: .4; }
.prod .qty { position: absolute; top: 6px; inset-inline-end: 8px; background: var(--accent); color: #fff; border-radius: 999px; min-width: 26px; padding: 0 6px; font-weight: 800; }

/* ===== لوحات ===== */
.card { background: var(--panel); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card h2, .card h3 { margin: 0 0 10px; font-size: 18px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--panel); border-radius: var(--radius); padding: 14px; }
.kpi .l { color: var(--muted); font-size: 14px; }
.kpi .v { font-size: 28px; font-weight: 800; }
.kpi .s { font-size: 14px; color: var(--muted); }
.up { color: var(--free); } .down { color: var(--danger); }
.hero .v { font-size: 40px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.scroll { overflow-x: auto; }
.muted { color: var(--muted); }
.void-row td { color: var(--danger); }
.strike { text-decoration: line-through; opacity: .7; }
.bar { height: 10px; background: var(--panel-2); border-radius: 999px; position: relative; overflow: visible; }
.bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--accent); border-radius: 999px; }
.bar > b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.bar > b.be { background: var(--warn); }
.alert-item { padding: 10px 12px; border-radius: 10px; background: var(--panel-2); margin-bottom: 6px; display: flex; gap: 10px; }
.alert-item.unread { border-inline-start: 4px solid var(--warn); }
.heat { display: grid; grid-template-columns: 52px repeat(24, 1fr); gap: 2px; font-size: 11px; min-width: 640px; }
.heat div { aspect-ratio: 1; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.heat .h { color: var(--muted); aspect-ratio: auto; }

/* ===== النافذة المنبثقة ===== */
@media (max-width: 520px) {
  body { font-size: 16px; }
  main { padding: 10px; }
  .devices { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dev { min-height: 140px; padding: 10px; }
  .dev .name { font-size: 18px; }
  .dev .big { font-size: 24px; }
  .kpi .v { font-size: 24px; }
  .hero .v { font-size: 32px; }
}
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal {
  background: var(--panel); width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto;
  border-radius: 20px 20px 0 0; padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 700px) { .modal-bg { align-items: center; } .modal { border-radius: 20px; } }
.modal h2 { margin: 0; font-size: 21px; }
.sum { display: flex; justify-content: space-between; padding: 4px 0; }
.sum.total { font-size: 22px; font-weight: 800; border-top: 1px solid var(--line); padding-top: 8px; }

/* ===== الدخول ===== */
.login { max-width: 420px; margin: 30px auto; display: flex; flex-direction: column; gap: 14px; }
.users { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.users button { min-height: 70px; }
.users button.on { outline: 3px solid var(--accent); }
.pin-dots { display: flex; justify-content: center; gap: 14px; direction: ltr; }
.pin-dots i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); }
.pin-dots i.on { background: var(--text); border-color: var(--text); }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; direction: ltr; }
.pad button { min-height: 66px; font-size: 26px; font-weight: 700; background: var(--panel); border: 0; border-radius: 14px; }

.toast {
  position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 99;
  background: var(--panel-2); border: 1px solid var(--line); padding: 12px 20px; border-radius: 12px; font-weight: 700; max-width: 90vw;
}
.toast.err { background: var(--danger); color: #fff; border: 0; }
.quickbar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.quickbar .btn { flex: none; }
.offline { background: var(--warn); color: #2a1a00; text-align: center; font-weight: 700; padding: 4px; font-size: 14px; }

/* ===== الفاتورة للطباعة ٨٠ مم ===== */
#receipt { display: none; }
.receipt-preview { background: #fff; border-radius: 12px; padding: 8px; display: flex; justify-content: center; align-items: flex-start; min-height: 120px; flex-shrink: 0; }
.receipt-preview .muted { color: #64748b; }
.receipt-img { width: 100%; max-width: 380px; height: auto; display: block; }
@media print {
  @page { size: 80mm auto; margin: 3mm; }
  body { background: #fff; color: #000; font-size: 12px; }
  body > *:not(#receipt) { display: none !important; }
  #receipt { display: block; width: 72mm; }
  #receipt img { width: 72mm; height: auto; display: block; }
  #receipt h1 { font-size: 16px; text-align: center; margin: 0 0 4px; }
  #receipt .c { text-align: center; }
  #receipt table { font-size: 12px; }
  #receipt td, #receipt th { border-bottom: 1px dashed #000; padding: 2px; color: #000; }
  #receipt .tot { font-size: 15px; font-weight: 800; }
  body.print-report > *:not(#print-report) { display: none !important; }
  body.print-report #print-report { display: block !important; }
  body.print-report #receipt { display: none; }
}
#print-report { display: none; page: wide; }
@page wide { size: A4; margin: 10mm; }

/* ===== اختيار المنتجات: الموبايل الأول ===== */
.picker .pk-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.picker #pk-search { min-height: 46px; border-radius: 999px; padding-inline: 16px; background: var(--panel-2); border-color: transparent; }
.pk-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -2px; padding: 2px; }
.pk-cats::-webkit-scrollbar { display: none; }
.pk-cats button {
  flex: none; border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 14px; min-height: 38px;
}
.pk-cats button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.picker .products { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.picker .prod { min-height: 112px; padding: 10px 6px; border: 2px solid transparent; transition: border-color .1s; }
.picker .prod.in-cart { border-color: var(--accent); background: #16233a; }
.picker .prod .pimg { width: 56px; height: 56px; }
.picker .prod .pn { font-size: 15px; line-height: 1.3; }
.pk-empty { text-align: center; padding: 20px 0; }
.pk-back { align-self: flex-start; }

.pk-bar { background: var(--panel); border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.pk-rows { max-height: 46vh; overflow-y: auto; padding: 4px 4px 0; }
.pk-bar-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; align-items: center; }
.pk-summary {
  border: 0; background: var(--panel-2); border-radius: 14px; min-height: 56px; padding: 0 14px;
  display: flex; align-items: center; gap: 6px; font-size: 16px; text-align: start; color: var(--text);
}
.pk-summary .pk-arrow { margin-inline-start: auto; color: var(--muted); font-size: 13px; }
.pk-confirm { min-height: 56px; font-size: 17px; padding-inline: 20px; white-space: nowrap; }
.pk-hint { color: var(--muted); text-align: center; padding: 14px 0; font-size: 14px; }

/* جوه نافذة الجهاز: البحث فوق والطلب تحت ثابتين والمنتجات بتتمرر بينهم */
.picker.in-modal .pk-top { position: sticky; top: -18px; z-index: 2; background: var(--panel); padding-top: 4px; }
.picker.in-modal .pk-bar { position: sticky; bottom: -18px; margin: 10px -18px -18px; padding: 0 18px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 20px rgba(0,0,0,.35); }

/* صفحة الشباك على الموبايل: الطلب شريط ثابت في آخر الشاشة */
.picker.page { padding-bottom: 96px; }
.picker.page .pk-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 14px env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px rgba(0,0,0,.45);
}
.picker.page .pk-bar.open .pk-rows { max-height: 52vh; }

/* التابلت والكمبيوتر: الطلب لوحة جانبية ثابتة */
@media (min-width: 900px) {
  .picker.page { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; padding-bottom: 0; }
  .picker.page .pk-bar {
    position: sticky; top: 130px; left: auto; right: auto; bottom: auto; border: 1px solid var(--line);
    border-radius: var(--radius); padding: 12px; box-shadow: none; max-height: calc(100vh - 150px);
  }
  .picker.page .pk-bar .pk-rows { max-height: none; flex: 1; }
  .picker.page .pk-bar-main { grid-template-columns: 1fr; }
  .picker.page .pk-arrow { display: none; }
  .picker.page .pk-hint { padding: 40px 0; }
}

/* نافذة إضافة مشروب بطول الشاشة على الموبايل */
.modal:has(.picker.in-modal) { height: 92vh; }
.modal:has(.picker.in-modal) .picker { display: flex; flex-direction: column; flex: 1; }
.modal:has(.picker.in-modal) .pk-main { flex: 1; }

/* ===== كروت الأجهزة ===== */
.dev { cursor: pointer; position: relative; }
.time-bar { display: block; height: 6px; border-radius: 999px; background: var(--panel-2); overflow: hidden; margin: 2px 0 4px; }
.time-bar i { display: block; height: 100%; background: var(--busy); border-radius: 999px; margin-inline-start: 0; transition: width .4s; }
.dev.ending .time-bar i { background: var(--warn); }
.dev.over .time-bar i { background: var(--danger); }
.dev-pay {
  margin-top: 8px; border: 0; border-radius: 10px; min-height: 44px; width: 100%;
  background: var(--free); color: #04210f; font-weight: 800; font-size: 15px;
}
.dev.over .dev-pay { background: var(--danger); color: #fff; }

/* ===== قايمة البداية ===== */
.onboard { border: 1px solid var(--line); }
.ob-step { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; min-height: 48px; }
.ob-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 900; flex: none; }
.ob-step.done { color: var(--muted); }
.ob-step.done .ob-check { background: var(--free); border-color: var(--free); color: #04210f; }
.ob-step.done .grow { text-decoration: line-through; }

/* ===== شاشة الجهاز الجديد ===== */
.welcome { display: flex; flex-direction: column; gap: 10px; }
.welcome-btn { min-height: 64px; font-size: 17px; text-align: center; white-space: normal; line-height: 1.4; }

/* ===== طلبات العملاء بالـ QR (عند الكاشير) ===== */
.order-bar { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 0; max-width: 1200px; margin: 0 auto; }
.order-card { background: #1d2a1d; border: 2px solid var(--free); border-radius: var(--radius); padding: 10px 12px; animation: pop .25s ease-out; }
.order-card.bill { background: #2a2110; border-color: var(--warn); }
.oc-head { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.oc-body { margin: 4px 0 8px; }
.oc-actions { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.oc-actions .btn { min-height: 46px; }
@keyframes pop { from { transform: scale(.97); opacity: .4; } }
.qr-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.qr-sheet img { width: 100%; break-inside: avoid; }

/* ===== المصاريف والأرباح ===== */
.month-nav { display: flex; align-items: center; gap: 8px; padding: 10px; }
.month-nav label { position: relative; text-align: center; }
.month-nav .mn { font-size: 20px; font-weight: 800; }
.month-nav input[type=month] { position: absolute; inset: 0; opacity: 0; cursor: pointer; min-height: 0; }
.month-nav .btn { font-size: 24px; min-width: 48px; }
.month-nav .btn:disabled { opacity: .3; }
.kpi.hero .v.down { color: var(--danger); }
table.pl { width: 100%; border-collapse: collapse; }
table.pl td { padding: 9px 4px; border-bottom: 1px solid var(--line); }
table.pl td.amt, td.amt { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.pl tr.sub td { font-weight: 800; background: var(--panel-2); }
table.pl tr.total td { font-size: 20px; font-weight: 800; color: var(--free); border-bottom: 0; padding-top: 12px; }
table.pl tr.total.neg td { color: var(--danger); }
.warn-card { border: 1px solid var(--warn); color: var(--warn); }
.tag { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); vertical-align: middle; }
.exp-list { display: flex; flex-direction: column; }
.exp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.exp-row:last-child { border-bottom: 0; }
.exp-acts { display: flex; gap: 6px; }
.danger-text { color: var(--danger); }
@media (max-width: 520px) {
  .exp-acts { width: 100%; }
  .exp-acts .btn { flex: 1; }
}

/* ===== الحضور والموظفين ===== */
.att-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.att-card .btn { min-width: 150px; }
.warn-line { color: var(--warn); font-size: 14px; margin-bottom: 6px; }
.staff-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
@media (max-width: 520px) { .staff-acts { grid-template-columns: repeat(2, 1fr); } }
.staff-card details { margin-top: 10px; }
.staff-card summary { cursor: pointer; color: var(--accent); padding: 6px 0; }
ol.steps { padding-inline-start: 22px; line-height: 1.9; }

/* ===== الحجوزات ===== */
.bk-badge { display: block; margin-top: 6px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(168,85,247,.18); color: #d8b4fe; }
.bk-badge.soon { background: rgba(245,158,11,.2); color: var(--warn); font-weight: 700; }
.bk-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bk-row:last-child { border-bottom: 0; }
.bk-time { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px; border-radius: 10px; background: var(--panel-2); }
.bk-time b { font-size: 17px; } .bk-time small { color: var(--muted); }
.bk-st { display: inline-block; font-size: 13px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); margin-top: 4px; }
.bk-st.ok { color: var(--free); } .bk-st.warn { color: var(--warn); } .bk-st.bad { color: var(--danger); }
.bk-row.bad { opacity: .75; }
.bk-acts { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) { .bk-acts { width: 100%; } .bk-acts .btn { flex: 1; } }
.bk-day { color: var(--muted); font-size: 13px; margin-top: 8px; }
.warn-t { color: var(--warn); }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chk { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: var(--panel-2); color: var(--text); }
.chk input { width: 20px; min-height: 20px; }
.bk-row a { color: var(--accent); text-decoration: none; }
.pay-opts { display: grid; gap: 8px; margin-top: 6px; }
.pay-opt { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; align-items: center; background: var(--panel-2); border-radius: 12px; padding: 8px 10px; color: var(--text); }
@media (max-width: 520px) { .pay-opt { grid-template-columns: 1fr; } }
.pay-logo { display: inline-flex; width: 34px; height: 34px; flex: none; }
.pay-logo svg { width: 100%; height: 100%; }
.pay-to { display: flex; gap: 10px; align-items: flex-start; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; margin-top: 8px; color: var(--text); }
.pay-to input { width: 22px; min-height: 22px; margin-top: 3px; flex: none; }
.prepaid-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.prepaid-toggle .box { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 2px solid var(--muted); font-weight: 800; flex: none; }
.prepaid-toggle.on { border-color: var(--free); }
.prepaid-toggle.on .box { background: var(--free); border-color: var(--free); color: #04210f; }
/* شاشة الدخول */
.login-screen { padding: 0 16px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-top: 10px; }
.login-brand img { width: 76px; height: 76px; border-radius: 20px; object-fit: contain; background: #fff; }
.login-brand .ic { font-size: 54px; line-height: 1; }
.login-brand img.app-logo { width: 112px; height: 112px; background: none; border-radius: 0; filter: drop-shadow(0 8px 24px rgba(59,130,246,.35)); }
.login-brand h2 { margin: 4px 0 0; }

/* ===== المتجر (من ناحية المحل) ===== */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.sp-card { background: var(--panel); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.sp-card.off { opacity: .55; }
.sp-img { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; font-size: 44px; }
.sp-img img { width: 100%; height: 100%; object-fit: contain; }
.sp-badge { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--danger); color: #fff; border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.sp-star { position: absolute; top: 8px; inset-inline-end: 8px; font-size: 18px; line-height: 1; }
.sp-body { padding: 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sp-card > .row { padding: 0 10px 10px; gap: 6px; }
.sp-imgs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sp-thumb, .sp-add { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: #fff; flex: none; }
.sp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.sp-thumb b { position: absolute; bottom: 0; inset-inline: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; text-align: center; }
.sp-thumb button { position: absolute; top: 2px; inset-inline-end: 2px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; font-size: 12px; padding: 0; }
.sp-thumb button.first { inset-inline-end: auto; inset-inline-start: 2px; }
.sp-add { background: var(--panel-2); border: 2px dashed var(--line); display: grid; place-items: center; text-align: center; font-size: 12px; color: var(--muted); cursor: pointer; }
textarea { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%; resize: vertical; }
/* منتجات المتجر في شاشة الطلبات */
.prod.store { border: 1px solid rgba(245,196,81,.55); background: linear-gradient(180deg, rgba(245,196,81,.08), transparent); }
.prod.store .pp { color: #f5c451; }
/* ترابيزات الكافيه */
.dev.table { border-top-color: #d97706; }
.dev.table.free .state { color: #f59e0b; }
.dev.table.busy { background: linear-gradient(180deg, rgba(217,119,6,.12), var(--panel)); }
.dev-filter { margin-bottom: 10px; }
/* لوحة الدفع */
.pp { display: flex; flex-direction: column; gap: 8px; background: var(--panel-2); border-radius: 14px; padding: 10px; }
.pp-results { display: flex; flex-direction: column; gap: 4px; }
.pp-cust { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; text-align: start; padding: 8px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
.pp-cust small { width: 100%; color: var(--muted); }
.pp-cust.new { color: var(--accent); justify-content: center; }
.pp-chosen { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 10px; padding: 8px 10px; border: 1px solid var(--accent); }
.pp-row { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.pp-row:first-of-type { border-top: 0; }
.pp-methods { flex-wrap: wrap; }
.pp-methods button { flex: 1 1 30%; }
.pp-foot { justify-content: space-between; }
/* المكافآت والنقاط في شاشة الدفع */
.perks { display: flex; flex-direction: column; gap: 6px; }
.perk { text-align: start; padding: 10px 12px; border-radius: 12px; border: 1px dashed #f5c451; background: rgba(245,196,81,.08); color: #f3dfa6; }
.perk b { float: left; }
.perk.on { border-style: solid; background: rgba(34,197,94,.15); border-color: var(--free); color: var(--free); }
.shift-rep { font-family: 'Cairo', sans-serif; color: #000; max-width: 380px; margin: 0 auto; }
.shift-rep h2, .shift-rep h3, .shift-rep p { text-align: center; margin: 4px 0; }
.shift-rep table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.shift-rep th { text-align: start; border-bottom: 2px solid #000; padding-top: 10px; }
.shift-rep td { padding: 3px 0; border-bottom: 1px dotted #999; }
/* كروت الأجهزة: عدّاد أكبر وأزرار على الكارت */
.devices { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.dev .big { font-size: 38px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.dev.busy, .dev.ending, .dev.over, .dev.paused { box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.dev-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.dev-acts .dev-pay { flex: 1; margin: 0; }
.dev-add { flex: none; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 10px; padding: 0 12px; font-weight: 800; min-height: 44px; }
@media (max-width: 520px) { .devices { grid-template-columns: repeat(2, 1fr); gap: 8px; } .dev .big { font-size: 28px; } .dev { padding: 10px; } .dev .name { font-size: 17px; } .dev-add { padding: 0 8px; } }

/* جوه تطبيق الأندرويد: يحس إنه تطبيق مش موقع (من غير سحب للآخر، ولا تحديد للأزرار والعناوين بالغلط) */
html.in-app, html.in-app body { overscroll-behavior: none; }
html.in-app button, html.in-app .btn, html.in-app nav, html.in-app header, html.in-app .tabs, html.in-app .card h2, html.in-app .chip, html.in-app .seg { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.in-app img { -webkit-touch-callout: none; }

/* الوصفات */
.rc-row { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.rc-unit { min-width: 38px; font-size: 13px; }
.tpl-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow: auto; }
.tpl { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.tpl input[type=checkbox] { width: 22px; min-height: 22px; }
.tpl.done { opacity: .6; }
.tpl-price { display: flex; align-items: center; gap: 4px; }
.tpl-price input { width: 64px; padding: 6px; }

/* ===================== شكل التطبيق (أندرويد) ===================== */
/* الموقع زي ما هو؛ جوه التطبيق: شريط علوي صغير + شريط تنقّل تحت + نوافذ من تحت */
.appbar, .bnav { display: none; }
html.in-app header.top, html.in-app nav.tabs { display: none; }
html.in-app { --bnav-h: 66px; }
html.in-app body { padding-bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); }
html.in-app main { padding: 12px 12px 20px; }

html.in-app .appbar {
  display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
  padding: 10px 14px; min-height: 58px;
  background: rgba(13, 17, 23, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(45, 54, 67, .6);
}
.ab-title { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ab-title b { font-size: 21px; font-weight: 800; }
.ab-title small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.dot.on { background: var(--free); box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.dot.off { background: var(--warn); box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.ab-btn { width: 42px; height: 42px; border-radius: 14px; border: 0; background: var(--panel-2); color: var(--text); font-size: 18px; display: grid; place-items: center; }
.ab-btn:active { transform: scale(.94); }
.sync-dot { font-size: 20px; line-height: 1; }
.sync-dot.ok { color: #60a5fa; } .sync-dot.busy { color: var(--warn); animation: pulse 1s infinite; }
.sync-dot.err, .sync-dot.off { color: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }

html.in-app .bnav {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--bnav-h) + env(safe-area-inset-bottom)); padding: 6px 6px env(safe-area-inset-bottom);
  background: rgba(22, 27, 34, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
}
.bnav a, .bnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; background: none; border: 0; font: inherit; padding: 0; min-width: 0;
}
.bnav .ic { position: relative; font-size: 21px; line-height: 1; width: 56px; height: 32px; display: grid; place-items: center; border-radius: 16px; transition: background .2s; filter: grayscale(.6); opacity: .8; }
.bnav .lb { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bnav .on { color: var(--text); }
.bnav .on .ic { background: rgba(59, 130, 246, .2); filter: none; opacity: 1; }
.bnav .on .lb { color: #93c5fd; }
.bnav em, .more-grid em {
  position: absolute; top: -4px; inset-inline-end: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--danger); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; display: grid; place-items: center;
}

/* «المزيد»: باقي الأقسام كأيقونات */
.sheet-head { display: flex; align-items: center; gap: 10px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; border-radius: 16px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 700; font-size: 14px;
}
.more-grid button .ic { position: relative; font-size: 28px; line-height: 1; }
.more-grid button.on { border-color: var(--accent); background: rgba(59, 130, 246, .15); }
.more-grid button:active { transform: scale(.96); }

/* النوافذ: بتطلع من تحت بمقبض */
html.in-app .modal-bg { z-index: 60; animation: fadeIn .18s ease; }
html.in-app .modal { border-radius: 24px 24px 0 0; padding: 10px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheetUp .24s cubic-bezier(.2, .9, .3, 1); }
html.in-app .modal::before { content: ''; display: block; width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 4px; flex: none; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } }
@keyframes fadeIn { from { opacity: 0; } }

/* لمس أسهل: أزرار وحقول أكبر وكروت أنعم */
html.in-app .btn { min-height: 48px; border-radius: 14px; }
html.in-app .btn.sm { min-height: 38px; border-radius: 11px; }
html.in-app input, html.in-app select, html.in-app textarea { min-height: 50px; border-radius: 14px; font-size: 16px; }
html.in-app .card { border-radius: 18px; }
html.in-app .btn:active, html.in-app .dev:active, html.in-app .prod:active { transform: scale(.97); }
/* صفوف الأزرار اللي فوق الصفحات: شريط يتسحب بالعرض بدل ما يلف على كذا سطر */
html.in-app main > .row:first-child { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
html.in-app main > .row:first-child::-webkit-scrollbar { display: none; }
html.in-app main > .row:first-child > .btn { flex: none; }
/* شريط الطلب في الشباك فوق شريط التنقّل */
html.in-app .picker.page .pk-bar { bottom: calc(var(--bnav-h) + env(safe-area-inset-bottom)); padding-bottom: 0; border-radius: 18px 18px 0 0; }
html.in-app .picker.page { padding-bottom: 110px; }
html.in-app .toast { top: calc(66px + env(safe-area-inset-top)); border-radius: 14px; }
@media (min-width: 900px) { html.in-app .picker.page .pk-bar { bottom: auto; top: 76px; } }
.dev-stats { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.dev-stats .st { flex: none; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 14px; }
.dev-stats .st b { font-size: 17px; color: var(--text); }
.dev-stats .st::before { content: ''; width: 9px; height: 9px; border-radius: 50%; }
.dev-stats .free::before { background: var(--free); } .dev-stats .busy::before { background: var(--busy); }
.dev-stats .maint::before { background: var(--maint); } .dev-stats .tbl::before { background: var(--warn); }
/* مسحوبات الموظفين */
.si-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow: auto; }
.si-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid transparent; }
.si-row.on { border-color: var(--accent); background: #16233a; }
.si-row .stepper { display: flex; align-items: center; gap: 8px; }
.si-row .stepper b { min-width: 20px; text-align: center; }
/* حالة الاتصال تحت السحابة */
.sync-pill { display: flex; flex-direction: column; align-items: center; gap: 1px; background: none; border: 0; padding: 2px 4px; font: inherit; color: inherit; }
.sync-pill .ic { position: relative; font-size: 24px; line-height: 1; }
.sync-pill .ic i { position: absolute; bottom: -2px; inset-inline-end: -6px; width: 15px; height: 15px; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 900; display: grid; place-items: center; color: #fff; border: 2px solid var(--bg); }
.sync-pill .lb { font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.sync-pill.ok .ic { color: #4ade80; } .sync-pill.ok .ic i { background: var(--free); } .sync-pill.ok .lb { color: #4ade80; }
.sync-pill.busy .ic { color: var(--warn); animation: pulse 1s infinite; } .sync-pill.busy .lb { color: var(--warn); }
.sync-pill.off .ic, .sync-pill.err .ic { color: var(--danger); } .sync-pill.off .ic i, .sync-pill.err .ic i { background: var(--danger); }
.sync-pill.off .lb, .sync-pill.err .lb { color: #f87171; }

/* ===== ألعاب الأجهزة ===== */
.g-search { margin-bottom: 12px; }
.g-bar { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 4px 6px 4px 10px; }
.g-bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.g-bar .g-ic { font-size: 18px; padding-inline-start: 6px; }
.g-bar input { flex: 1; border: 0 !important; background: none !important; box-shadow: none !important; min-height: 46px; padding: 0 4px; font-size: 16px; outline: none; }
.g-bar .g-x { border: 0; background: var(--panel-2); color: var(--muted); width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
#game-results { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.g-res { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.g-res > b { font-size: 16px; }
.g-devs { display: flex; flex-wrap: wrap; gap: 6px; }
.gchip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 14px; }
.gchip i { width: 9px; height: 9px; border-radius: 50%; }
.gchip small { color: var(--muted); font-weight: 600; }
.gchip.free i { background: var(--free); } .gchip.free { border-color: rgba(34,197,94,.45); }
.gchip.busy i { background: var(--busy); } .gchip.maint i { background: var(--maint); } .gchip.maint { opacity: .7; }
.g-empty { color: var(--muted); padding: 8px 4px; }
.dev.g-miss { opacity: .32; filter: grayscale(.6); }
.dev.g-hit { outline: 3px solid #60a5fa; outline-offset: 2px; }
.g-line { font-size: 12.5px; color: var(--muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.g-line b { color: #93c5fd; }
.dg-box { background: var(--panel-2); border-radius: 14px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.dg-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: auto; }
.ga-list { max-height: 34vh; }
.gtag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; }
.gtag.hit { border-color: #60a5fa; background: rgba(59,130,246,.18); color: #bfdbfe; }
.gtag button { border: 0; background: none; color: var(--muted); font-size: 12px; padding: 0 2px; min-height: 0; }
.gtag.sugg { color: #93c5fd; border-style: dashed; font: inherit; font-size: 13.5px; }
.g-add { display: flex; gap: 8px; }
.g-add input { flex: 1; }
.ga-sugg { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.gl-list { display: flex; flex-direction: column; gap: 8px; max-height: 48vh; overflow: auto; }
.gl-row { background: var(--panel-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.gl-dev { border: 1px solid var(--line); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 700; }
.gl-dev.on { border-color: var(--accent); background: rgba(59,130,246,.2); color: #bfdbfe; }
.gl-dev.all { border-style: dashed; }
#game-q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }