/* ╔══════════════════════════════════════════════════════════════════╗
   ║  cafe — امتدادُ الهويّة (HobeRadius Design System) لشاشات الكافي    ║
   ║  الكاشير والبار والمطبخ والطاولات. لا لونَ خارج توكنات --hub-*.   ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* ═════════ شاشة الكاشير ═════════ */
.pos{
  display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:var(--hub-gap-md);
  height:calc(100vh - var(--topbar-h));padding:var(--hub-gap-md);overflow:hidden;
}
.pos-left{display:flex;flex-direction:column;min-height:0;min-width:0;
  gap:var(--hub-gap-sm)}
.pos-search{display:flex;gap:var(--hub-gap-sm);min-width:0}
.pos-search input{min-height:44px;font-size:14px;background:var(--hub-bg-card);min-width:0}

.cat-strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:5px;
  min-width:0;
  background:var(--hub-bg-card);border:1px solid var(--hub-border);
  border-radius:var(--hub-r-xl);box-shadow:var(--hub-sh-sm)}
.cat-chip{padding:8px 15px;border-radius:var(--hub-r-lg);white-space:nowrap;border:0;
  background:transparent;font:inherit;font-weight:800;font-size:13px;cursor:pointer;
  color:var(--hub-text-soft);min-height:38px;display:inline-flex;align-items:center;
  transition:all var(--hub-anim-fast) var(--hub-ease)}
.cat-chip:hover{background:var(--hub-bg-soft)}
.cat-chip.active{background:var(--hub-purple-soft);color:var(--hub-brand)}

.item-grid{flex:1 1 auto;min-height:0;min-width:0;overflow-y:auto;display:grid;
  gap:var(--hub-gap-sm);
  grid-template-columns:repeat(auto-fill,minmax(152px,1fr));align-content:start;
  padding-bottom:var(--hub-gap-md)}
.item-tile{background:var(--hub-bg-card);border:1px solid var(--hub-border);
  border-radius:var(--hub-r-xl);padding:12px;cursor:pointer;min-height:96px;
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;
  box-shadow:var(--hub-sh-sm);text-align:start;font:inherit;color:var(--hub-text);
  transition:all var(--hub-anim-fast) var(--hub-ease);position:relative;overflow:hidden}
.item-tile::after{content:"";position:absolute;inset-block:12px;inset-inline-start:0;
  width:3px;border-radius:999px;background:var(--hub-brand-line);opacity:0;
  transition:opacity var(--hub-anim-fast) var(--hub-ease)}
.item-tile:hover{transform:translateY(-2px);border-color:var(--hub-brand-line);
  box-shadow:var(--hub-sh-md)}
.item-tile:hover::after{opacity:1}
.item-tile:active{transform:scale(.985)}
.item-tile .nm{font-weight:800;font-size:13.5px;line-height:1.45}
.item-tile .pr{font-weight:900;color:var(--hub-brand-ink);font-size:15px;
  direction:ltr;unicode-bidi:isolate}
.item-tile .meta{font-size:11px;color:var(--hub-text-mute);font-weight:700}
.item-tile.out{opacity:.42;cursor:not-allowed}
.item-tile.kind-card{background:linear-gradient(135deg,var(--hub-bg-card),var(--hub-blue-soft))}

/* ═════════ السلّة ═════════ */
.cart{background:var(--hub-bg-card);border:1px solid var(--hub-border-strong);
  border-radius:var(--hub-r-card);display:flex;flex-direction:column;min-height:0;min-width:0;
  box-shadow:var(--hub-sh-card);overflow:hidden}
.cart-head{padding:10px 14px;border-bottom:1px solid var(--hub-border-soft);
  display:flex;align-items:center;gap:var(--hub-gap-sm);flex-wrap:wrap;
  background:linear-gradient(180deg,var(--hub-tint-a),var(--hub-bg-card))}
.cart-head select{width:auto;min-height:32px;padding:4px 10px;font-size:12px;
  padding-inline-end:28px!important}
.cart-lines{flex:1 1 auto;overflow-y:auto;min-height:110px}
.cart-line{padding:10px 14px;border-bottom:1px solid var(--hub-border-soft);
  display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.cart-line:hover{background:var(--hub-tint-a)}
.cart-line .nm{font-weight:800;font-size:13.5px}
.cart-line .sub{font-size:11.5px;color:var(--hub-text-mute);grid-column:1/-1;
  font-weight:700;overflow-wrap:anywhere}
.cart-line .amt{font-weight:900;white-space:nowrap;direction:ltr;unicode-bidi:isolate;
  color:var(--hub-text)}
.cart-line .nm{overflow-wrap:anywhere}
.cart-actions .btn{min-width:0;white-space:normal;line-height:1.25}
.qty-ctl{display:inline-flex;align-items:center;gap:4px}
.qty-ctl button{width:30px;height:30px;border-radius:var(--hub-r-md);
  border:1px solid var(--hub-border);background:var(--hub-bg-card);font-size:15px;
  cursor:pointer;line-height:1;color:var(--hub-text-soft);
  transition:all var(--hub-anim-fast) var(--hub-ease)}
.qty-ctl button:hover{border-color:var(--hub-brand-line);color:var(--hub-brand-ink);
  background:var(--hub-brand-soft)}
.qty-ctl .q{min-width:26px;text-align:center;font-weight:900;font-variant-numeric:tabular-nums}

.totals{border-top:1px solid var(--hub-border);padding:12px 14px;
  background:linear-gradient(180deg,var(--hub-bg-soft),var(--hub-brand-soft))}
.totals .t-row{display:flex;justify-content:space-between;font-size:12.5px;
  padding:3px 0;font-weight:700;color:var(--hub-text-soft)}
.totals .t-row span:last-child{direction:ltr;unicode-bidi:isolate}
.totals .t-row.grand{font-size:20px;font-weight:900;color:var(--hub-brand-deep);
  border-top:1px dashed var(--hub-border-strong);margin-top:7px;padding-top:9px}
.cart-actions{padding:12px 14px;display:grid;gap:var(--hub-gap-sm);
  grid-template-columns:1fr 1fr;border-top:1px solid var(--hub-border-soft)}
.cart-actions .full{grid-column:1/-1}

.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--hub-gap-sm)}
.keypad button{min-height:52px;font-size:19px;font-weight:800;
  border-radius:var(--hub-r-lg);border:1px solid var(--hub-border);
  background:var(--hub-bg-card);cursor:pointer;color:var(--hub-text);
  transition:all var(--hub-anim-fast) var(--hub-ease)}
.keypad button:hover{border-color:var(--hub-brand-line);background:var(--hub-brand-soft)}
.keypad button:active{background:var(--hub-purple-soft);transform:scale(.97)}

/* ═════════ شاشة البار والمطبخ ═════════ */
.kds-grid{display:grid;gap:var(--hub-gap-md);
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.ticket{background:var(--hub-bg-card);border:1px solid var(--hub-border);
  border-radius:var(--hub-r-card);box-shadow:var(--hub-sh-card);overflow:hidden;
  border-inline-start:4px solid var(--hub-brand-line)}
.ticket.warn{border-inline-start-color:var(--hub-amber);background:var(--hub-bad-wash)}
.ticket.late{border-inline-start-color:var(--hub-red);box-shadow:var(--hub-sh-md)}
.ticket .t-head{padding:10px 13px;border-bottom:1px solid var(--hub-border-soft);
  display:flex;align-items:center;gap:var(--hub-gap-sm);flex-wrap:wrap;
  background:linear-gradient(180deg,var(--hub-tint-a),var(--hub-tint-b))}
.ticket .t-line{padding:11px 13px;border-bottom:1px solid var(--hub-border-soft)}
.ticket .t-line:last-child{border-bottom:none}
.ticket .t-line .nm{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:8px}
.ticket .t-line .adds{font-size:12px;color:var(--hub-brand-ink);font-weight:800;
  margin-top:4px}
.ticket .t-line .kds-note{font-size:12px;color:var(--hub-red-ink);font-weight:800;
  margin-top:4px}
.ticket .t-line .acts{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.qty-badge{background:linear-gradient(135deg,var(--hub-brand),var(--hub-brand-deep));
  color:#fff;border-radius:var(--hub-r-md);min-width:28px;height:28px;
  display:inline-grid;place-items:center;font-weight:900;font-size:13px;
  box-shadow:var(--hub-glow);flex:0 0 28px}

/* ═════════ الطاولات ═════════ */
.table-grid{display:grid;gap:var(--hub-gap-md);
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.table-tile{border-radius:var(--hub-r-xl);border:1px solid var(--hub-border);
  background:var(--hub-bg-card);padding:14px;text-align:center;min-height:100px;
  box-shadow:var(--hub-sh-sm);display:flex;flex-direction:column;
  justify-content:center;gap:4px;transition:all var(--hub-anim-fast) var(--hub-ease);
  color:var(--hub-text)}
.table-tile:hover{transform:translateY(-2px);box-shadow:var(--hub-sh-md);
  text-decoration:none;border-color:var(--hub-brand-line)}
.table-tile.busy{background:var(--hub-amber-soft);border-color:var(--hub-amber-line)}
.table-tile.reserved{background:var(--hub-blue-soft);border-color:var(--hub-blue-line)}
.table-tile .nm{font-weight:900;font-size:17px}
.table-tile .seats{font-size:11.5px;color:var(--hub-text-mute);font-weight:700}

/* ═════════ الإيصال الحراريّ ═════════ */
.receipt{width:80mm;max-width:100%;margin-inline:auto;background:#fff;color:#000;
  padding:6mm 4mm;font-family:var(--hub-font);font-size:12px;line-height:1.7}
.receipt.w58{width:58mm}
.receipt h1{font-size:16px;text-align:center;margin:0 0 2px;font-weight:900}
.receipt .r-sub{text-align:center;font-size:11px;margin-bottom:8px}
.receipt hr{border:0;border-top:1px dashed #000;margin:7px 0}
.receipt table{width:100%;font-size:11.5px;border-collapse:collapse}
.receipt th,.receipt td{padding:2px 0;text-align:start;white-space:normal;border:0;
  background:none;color:#000;position:static}
.receipt td.n,.receipt th.n{text-align:end;direction:ltr;white-space:nowrap}
.receipt .r-tot{display:flex;justify-content:space-between;font-size:12.5px;padding:1px 0}
.receipt .r-tot.big{font-size:16px;font-weight:900;border-top:1px solid #000;
  margin-top:5px;padding-top:5px}
.receipt .r-card{border:1px dashed #000;border-radius:4px;padding:5px 7px;margin-top:5px}
.receipt .r-foot{text-align:center;font-size:10.5px;margin-top:9px}
@media print{
  @page{margin:3mm}
  body{background:#fff}
  .receipt{width:auto;padding:0}
}

/* ═════════ الجوّال ═════════ */
@media (max-width:1100px){.pos{grid-template-columns:minmax(0,1fr) 340px}}
@media (max-width:900px){
  .pos{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible;
    padding:var(--hub-gap-sm)}
  .item-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));
    max-height:46vh}
  /* على الجوّال السلّةُ جزءٌ من الصفحة تتمرّر معها — لا لصقٌ ولا سقفٌ يقصّ الأزرار */
  .cart{position:static;max-height:none;overflow:visible}
  .cart-lines{max-height:38vh;min-height:80px}
  .cart-actions{grid-template-columns:1fr 1fr}
  .cart-actions .btn.full{min-height:50px}
  .content.pos-page{padding-bottom:24px}
}

/* ═════════ فواصل مجموعات الشريط الجانبيّ ═════════ */
.nav-sep{display:flex;align-items:center;gap:8px;padding:13px 12px 4px;font-size:10.5px;
  font-weight:800;color:var(--hub-text-faint);letter-spacing:.04em;white-space:nowrap}
.nav-sep::after{content:"";flex:1;height:1px;background:var(--hub-border)}
.shell.collapsed .nav-sep{display:none}
.topbar .badge{text-decoration:none}

/* صفحة الكاشير تملأ الشاشة بلا حشو المحتوى العامّ */
.content.pos-page{padding:0;max-width:none}
@media (min-width:901px){.content.pos-page{max-width:none}}

/* شريط الزبائن الدائمين: الزرّ يرث الخطّ، وكلّ الرقائق بارتفاعٍ واحد حملت دَينًا أم لا */
.regulars{display:flex;flex-wrap:wrap;gap:8px}
.regulars form{display:contents}
.regulars .chip{font-family:inherit;font-size:13.5px;font-weight:700;color:var(--hub-text);
  display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;line-height:1;
  margin:0;appearance:none;-webkit-appearance:none}
.regulars .chip:focus-visible{outline:2px solid var(--hub-brand);outline-offset:2px}
.regulars .chip .badge{font-size:11px;font-weight:800;padding:2px 8px;line-height:1.5;margin:0}
.regulars .chip .badge::before{content:"دين ";font-weight:700}
@media (max-width:600px){.regulars .chip{min-height:42px;font-size:14px}}
/* أيّ زرٍّ عارٍ يرث خطّ الصفحة — المتصفّح يعطيه serif افتراضيًّا */
button{font-family:inherit}
/* .num على خليّة جدولٍ كانت تجعلها inline-block فتخرج من الصفّ وتترك خليّةً بيضاء */
th.num,td.num{display:table-cell}
/* وحدات الشراء: رأسٌ فوق الحقلين بنفس شبكة الصفّ */
.urow-head{display:grid;grid-template-columns:160px 1fr auto;gap:8px;margin-bottom:4px}
.urow-head span:last-child{width:32px}
@media (max-width:600px){.urow-head{display:none}}