/* ════════════════════════════════════════════════════════════
   شاشة الموظف. الألوان هون للوضع الغامق (خيار من ⚙)؛ الفاتحة هي الأساسية وتعريفها آخر الملف
   ════════════════════════════════════════════════════════════ */
.staff{
  --board:#0B2E33; --board-2:#103C43; --board-3:#174A52; --board-line:#215B64;
  --b-text:#E9F4F2; --b-muted:#93B4B0;
  background:var(--board);color:var(--b-text);min-height:100vh;min-height:100dvh;overflow:hidden}
.staff :focus-visible{box-shadow:0 0 0 3px var(--board),0 0 0 5px var(--signal)}
.staff__app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* ── الشريط العلوي */
.bar{display:flex;align-items:center;gap:16px;padding:10px 18px;padding-top:max(10px,env(safe-area-inset-top));border-bottom:1px solid var(--board-line)}
.bar__shop{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:22px;line-height:1;min-width:0;padding-top:3px}
.bar__shop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar__counts{display:flex;gap:18px;margin-inline:auto;color:var(--b-muted);font-size:14px}
.bar__counts b{color:var(--b-text);font-size:18px;margin-inline-end:4px}
.bar__tools{display:flex;align-items:center;gap:12px}
.bar__btn{min-height:36px;padding:0 12px;border:1px solid var(--board-line);border-radius:999px;background:transparent;color:var(--b-muted);font-size:13px;font-weight:600}
.bar__btn[hidden]{display:none}
.bar__btn--install{background:#FFC53D;border-color:#FFC53D;color:#0F3A40}
/* «فاتورة عالشاشة»: بتطلع بس إذا المحل عنده شاشة زبون. وفي فاتورة عالشاشة بتصير صفرا مع العدّاد */
.bar__btn--recent{color:var(--b-text)}
.js-recent.is-on{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.cmp__recent{margin-inline-start:auto;min-height:26px;padding:0 10px;border:1px solid var(--board-line);border-radius:999px;background:transparent;color:var(--b-text);font:600 12px var(--font)}
.bar__btn[aria-pressed="true"]{background:var(--board-3);color:var(--b-text);border-color:var(--board-3)}
.bar__live{width:10px;height:10px;border-radius:50%;background:var(--ready);box-shadow:0 0 0 3px rgba(25,185,123,.2)}
.bar__live.is-off{background:var(--danger);box-shadow:0 0 0 3px rgba(194,65,45,.25)}
.bar__clock{font-family:var(--display);font-size:22px;min-width:52px;text-align:left;padding-top:4px}

.banner{padding:10px 18px;background:var(--danger);color:#fff;font-weight:600;text-align:center}

/* ── الجسم: لوحة الأرقام + الطلبات */
.staff__body{flex:1;min-height:0;display:grid;grid-template-columns:340px 1fr}

.pad{display:flex;flex-direction:column;gap:12px;padding:18px;border-inline-end:1px solid var(--board-line);background:var(--board-2);overflow:auto}
.pad__head{display:flex;justify-content:space-between;align-items:center}
.pad__title{font-weight:600;color:var(--b-muted)}
.pad__close{display:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--board-3);color:var(--b-text);font-size:16px}
.pad__display{display:flex;align-items:center;justify-content:center;min-height:86px;border-radius:var(--r-md);background:var(--board);
  font-family:var(--display);font-size:64px;letter-spacing:.04em;color:var(--signal);padding-top:10px}
.pad__display:empty::before{content:"—";color:var(--board-line)}
.pad__keys{direction:ltr;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad__keys button{min-height:56px;border:0;border-radius:var(--r-md);background:var(--board-3);color:var(--b-text);font-family:var(--display);font-size:32px;font-weight:400;padding-top:6px;
  font-variant-numeric:tabular-nums;transition:background-color .1s,transform .06s}
.pad__keys button:active{background:var(--board-line);transform:scale(.96)}
.pad__keys .pad__fn{font-family:var(--font);font-size:17px;font-weight:600;color:var(--b-muted);padding-top:0}
.pad__times{display:grid;gap:8px;margin-top:4px}
.pad__label{font-size:14px;font-weight:600;color:var(--b-muted)}
.pad__time-btns{direction:ltr;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pad__time-btns button{min-height:54px;border:0;border-radius:var(--r-md);background:var(--signal);color:var(--signal-ink);font-family:var(--display);font-size:28px;font-weight:400;
  font-variant-numeric:tabular-nums;display:grid;place-content:center;line-height:1;padding-top:6px;transition:transform .06s,filter .1s}
.pad__time-btns button small{font-family:var(--font);font-size:11px;font-weight:600;opacity:.75}
.pad__time-btns button:active{transform:scale(.95);filter:brightness(.92)}
.pad__now{min-height:48px;border:1.5px solid #2B7A63;border-radius:var(--r-md);background:transparent;color:#9EE6C4;font-weight:600;font-size:15px}
.pad__now:active{background:#0E4A3C}
.pad__hint{font-size:13px;color:var(--b-muted);text-align:center}

.board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}
.col{display:flex;flex-direction:column;min-height:0;min-width:0;padding:16px 12px 0}
.col + .col{border-inline-start:1px solid var(--board-line)}
.col__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--b-muted);margin-bottom:12px}
.col__title::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--signal)}
.col--ready .col__title::before{background:var(--ready)}
.col--ready .col__title{flex-wrap:wrap;row-gap:2px}
.col__note{flex-basis:100%;padding-inline-start:20px;font-size:12px;font-weight:500;color:var(--b-muted);opacity:.8}
.col__list{flex:1;overflow:auto;display:grid;align-content:start;gap:8px;padding:12px 2px 90px}
.col__empty{margin:6px 0 auto;padding:22px;border:1.5px dashed var(--board-line);border-radius:var(--r-md);color:var(--b-muted);font-size:14px;text-align:center}

/* ── كرت الطلب */
.card{position:relative;display:grid;gap:8px;padding:10px 12px;border-radius:14px;background:var(--board-2);border:1.5px solid transparent}
.card.is-in{animation:slidein .25s ease-out}
.card--new{border-color:var(--signal);padding-top:14px}
.card__top{display:flex;align-items:center;gap:10px}
.card__num{flex:none;min-width:2ch;font-family:var(--display);font-weight:400;font-size:38px;line-height:.9;color:#fff;padding-top:6px}
.card__info{flex:1;min-width:0;display:grid;justify-items:start;gap:3px}
.card__meta{display:flex;flex-wrap:wrap;gap:0 8px;font-size:12px;color:var(--b-muted)}
.card__plus{flex:none;min-width:44px;min-height:44px;padding:0 6px;border:0;border-radius:var(--r-sm);background:transparent;box-shadow:inset 0 0 0 1.5px var(--board-line);
  color:var(--b-text);font-family:var(--display);font-size:19px;padding-top:4px}
.card__plus:active{background:var(--board-line)}
.card__go{flex:none;min-height:46px;padding:0 14px;font-size:17px}
.card--ready .card__go{font-size:15px}
.card__phone{display:inline-flex;align-items:center;gap:5px;font-weight:600;color:var(--b-text)}
.card__phone svg{width:14px;height:14px}
.card__phone--none{color:#F0B9A9}
.card__phone--warn{color:var(--signal)}
.card__tag{position:absolute;top:-10px;inset-inline-start:14px;padding:1px 10px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-size:12px;font-weight:700}

.eta__left{max-width:100%;border:0;background:none;padding:4px 0 0;font-family:var(--display);font-size:21px;line-height:1;color:var(--signal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:pointer}
.eta__left.is-late{color:#FF9B85}
.eta__bar{height:5px;border-radius:3px;background:var(--board);overflow:hidden}
.eta__fill{height:100%;background:var(--signal);border-radius:3px;transition:width 1s linear}
.eta__fill.is-late{background:#FF9B85}

.times{direction:ltr;display:flex;flex-wrap:wrap;gap:6px}
.times button{flex:1;min-width:48px;min-height:40px;border:0;border-radius:var(--r-sm);background:var(--board-3);color:var(--b-text);font-weight:600;font-size:15px}
.times button.num{font-family:var(--display);font-weight:400;font-size:21px;padding-top:4px}
.times button:active{background:var(--board-line)}
.times .times__plus{background:transparent;box-shadow:inset 0 0 0 1.5px var(--board-line)}
.card__link{flex:none;background:none;border:0;color:var(--b-muted);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;padding:6px}

.card--ready{background:#0E4A3C;border-color:transparent}
.card--ready .card__num{color:#C8F7E1}
.card--ready .btn--ghost{color:var(--b-text);box-shadow:inset 0 0 0 1.5px #2B7A63}
.card.is-flash{animation:flash .8s ease-out}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(25,185,123,.7)}100%{box-shadow:0 0 0 18px rgba(25,185,123,0)}}

.fab{display:none}

/* ── جهاز مش مربوط */
.unlinked{min-height:100vh;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px;text-align:center}
.unlinked h1{font-family:var(--display);font-weight:400;font-size:34px}
.unlinked ol{margin:0;padding:0 18px;text-align:right;color:var(--b-muted);max-width:420px;display:grid;gap:6px}
.unlinked__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.unlinked .btn--ghost{color:var(--b-text);box-shadow:inset 0 0 0 1.5px var(--board-line)}

/* ── جوال أو تابلت عمودي: لوحة الأرقام بتصير نافذة من تحت */
@media (max-width:900px){
  .bar{flex-wrap:wrap;gap:8px 14px}
  .bar__counts{order:3;width:100%;margin:0;justify-content:space-between}
  .bar__today{display:none}
  .staff__body{grid-template-columns:1fr}
  .board{display:block;overflow:auto}
  .col{padding-bottom:0}
  .col + .col{border-inline-start:0;border-top:1px solid var(--board-line);padding-top:16px}
  .col__list{overflow:visible;padding-bottom:12px}
  .col--ready{padding-bottom:110px}
  .pad{position:fixed;inset:auto 0 0 0;z-index:30;border:0;border-radius:22px 22px 0 0;padding-bottom:max(18px,env(safe-area-inset-bottom));
    box-shadow:0 -12px 40px rgba(0,0,0,.45);transform:translateY(105%);transition:transform .25s ease;max-height:92dvh}
  .pad.is-open{transform:none}
  .pad__close{display:grid;place-items:center}
  .pad__keys button{min-height:52px}
  .pad__time-btns button{min-height:56px}
  .fab{display:flex;align-items:center;justify-content:center;position:fixed;bottom:max(18px,env(safe-area-inset-bottom));inset-inline:16px;z-index:20;
    min-height:60px;border:0;border-radius:18px;background:var(--signal);color:var(--signal-ink);font-size:19px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}
}
.col__list:empty{flex:0;padding:0}
.pad__now.is-busy,.pad__time-btns button.is-busy{opacity:.55;pointer-events:none}
.col__empty{padding:16px;text-align:center}
.col__empty:empty{display:none}

/* ── شاشة عريضة بس قصيرة (آيباد بالعرض، كاشير 1024×768 مع شريط المتصفح): لوحة الأرقام أقصر عشان تبين كلها */
@media (min-width:701px) and (max-height:760px){
  .bar{padding-block:6px}
  .pad{gap:7px;padding:12px 14px}
  .pad__display{min-height:52px;font-size:40px;padding-top:6px}
  .pad__keys{gap:6px}
  .pad__keys button{min-height:42px;font-size:26px;padding-top:4px}
  .pad__keys .pad__fn{font-size:15px}
  .pad__times{gap:6px;margin-top:0}
  .pad__label{font-size:13px}
  .pad__time-btns button{min-height:42px;font-size:22px;padding-top:4px}
  .pad__time-btns button small{display:none}
  .pad__now{min-height:40px;font-size:14px}
}


/* ════════════════════════════════════════════════════════════
   الوضع الصغير (نافذة ضيقة جنب الكاشير): رقم + Enter
   ════════════════════════════════════════════════════════════ */
.cmp{display:none;flex:1;min-height:0;flex-direction:column}
.cmp__entry{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:10px 12px;border-bottom:1px solid var(--board-line)}
.cmp__label{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:18px;font-size:13px;font-weight:600;color:var(--b-muted)}
.cmp__msg{display:inline-flex;align-items:center;gap:6px;text-align:left;overflow:hidden;white-space:nowrap}
.cmp__msg.is-on{color:var(--b-text)}
.cmp__undo{border:0;background:none;padding:0 2px;color:var(--signal);font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.cmp__row{display:flex;gap:8px}
.cmp__input{flex:1;min-width:0;height:52px;box-sizing:border-box;padding:6px 14px 0;border:2px solid var(--signal);border-radius:12px;background:var(--board);color:var(--b-text);
  font-family:var(--display);font-size:30px;letter-spacing:.04em;outline:none}
.cmp__input::placeholder{font-family:var(--font);font-size:16px;font-weight:500;letter-spacing:0;color:var(--b-muted)}
.cmp__go{height:52px;padding:0 16px;border:0;border-radius:12px;background:var(--signal);color:var(--signal-ink);font-size:16px;font-weight:700}
.cmp__go:active{filter:brightness(.92)}
.cmp__times{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.cmp__times::-webkit-scrollbar{display:none}
.cmp__times button{flex:0 0 auto;min-width:54px;height:40px;padding:0 10px;border:1px solid var(--board-line);border-radius:10px;background:transparent;color:var(--b-text);font-size:15px;font-weight:600}
.cmp__times button[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--signal-ink)}
.cmp__head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding:0 12px;font-size:13px;font-weight:600;color:var(--b-muted)}
.cmp__late{color:#FF9B85}
.cmp__list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:3px;padding:0 8px 8px}
.cmp__empty{padding:14px;border:1.5px dashed var(--board-line);border-radius:10px;color:var(--b-muted);font-size:14px;text-align:center}

.crow{flex:none;display:flex;align-items:center;gap:10px;min-height:46px;border-radius:10px;background:var(--board-2);overflow:hidden}
.crow.is-in,.cchip.is-in{animation:slidein .25s ease-out}
.crow:has(.is-late){background:#3A2E2B}
.crow--new{box-shadow:inset 0 0 0 1.5px var(--signal)}
.crow__num{flex:none;width:64px;text-align:center;font-family:var(--display);font-size:28px;line-height:1;padding-top:6px;color:var(--b-text)}
.crow__mid{flex:1;min-width:0;display:grid;gap:5px}
.crow__line{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:13px;font-weight:600;color:var(--b-muted);white-space:nowrap}
.crow__left{font-size:14px;color:var(--b-text);font-variant-numeric:tabular-nums}
.crow__left.is-late{color:#FF9B85}
.crow__left--new{color:var(--signal);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.crow__ph{overflow:hidden;text-overflow:ellipsis}
.crow__ph--none{color:#F0B9A9}
.crow__ph--warn{color:var(--signal)}
.crow__bar{height:4px;border-radius:2px;background:var(--board);overflow:hidden}
.crow__fill{height:100%;border-radius:2px;background:var(--signal);transition:width 1s linear}
.crow__fill.is-late{background:#FF9B85}
.crow__ready{flex:none;align-self:stretch;width:76px;border:0;border-radius:10px;background:var(--ready);color:#04281A;font-size:16px;font-weight:700}
.crow__ready:active{filter:brightness(.9)}

.cmp__ready{flex:none;border-top:1px solid var(--board-line);background:var(--board-2);padding-bottom:max(8px,env(safe-area-inset-bottom))}
.cmp__chips{display:flex;gap:6px;overflow-x:auto;padding:0 12px 2px}
.cmp__chips .cmp__empty{flex:1;border:0;padding:12px 0;text-align:right}
.cchip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:46px;padding:0 12px;border:1px solid #2B7A63;border-radius:12px;background:#0E4A3C;color:#C8F7E1}
.cchip__num{font-family:var(--display);font-size:24px;line-height:1;padding-top:5px}
.cchip__ago{font-size:12px;font-weight:600;opacity:.85}
.cchip.is-old{background:transparent;border-color:var(--signal);color:var(--signal)}
.crow.is-flash,.cchip.is-flash{animation:flash .8s ease-out}

/* لوحة الأرقام الصغيرة (أجهزة اللمس) */
.cmp__keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px} /* نفس ترتيب أرقام الجوال: 1 2 3 فوق، و⌫ 0 ↵ تحت */
.cmp__keys[hidden]{display:none}
.cmp.has-keys .cmp__go{display:none}
.cmp__keys button{height:44px;border:0;border-radius:10px;background:var(--board-3);color:var(--b-text);font-family:var(--display);font-size:26px;line-height:1;padding-top:5px;
  font-variant-numeric:tabular-nums;touch-action:manipulation;transition:background-color .1s,transform .06s}
.cmp__keys button:active{background:var(--board-line);transform:scale(.96)}
.cmp__keys .cmp__fn{font-family:var(--font);font-size:20px;padding-top:0;color:var(--b-muted)}
.cmp__keys .cmp__enter{background:var(--signal);color:var(--signal-ink);font-family:var(--font);font-size:24px;padding-top:0}
.cmp__keys .cmp__enter:active{background:var(--signal);filter:brightness(.9)}
.cmp__pipbar{display:none}
.cmp-away{display:none}
.bar__more,#keysBtn{display:none}

/* ── النافذة العائمة فوق الكاشير */
.staff--pip{min-height:0;height:100vh;display:flex;flex-direction:column}
.staff--pip .cmp{display:flex;height:100vh}
.staff--pip .cmp__pipbar{display:flex;gap:14px;padding:6px 12px;border-bottom:1px solid var(--board-line);font-size:13px;color:var(--b-muted)}
.staff--pip .cmp__pipbar b{color:var(--b-text);font-size:15px;margin-inline-end:3px}
.staff--pip #keysBtn{display:none}

@media (max-width:700px){
  .staff__body,.fab{display:none !important}
  .cmp{display:flex}
  .cmp-away{display:grid;place-content:center;justify-items:center;gap:12px;flex:1;padding:24px;text-align:center;color:var(--b-muted)}
  .bar{padding:6px 10px;gap:6px 8px;flex-wrap:wrap}
  .bar__shop{font-size:18px}
  .bar__shop img{width:26px;height:26px}
  .bar__shop span,.bar__clock,.bar__today{display:none}
  .bar__counts{order:0;width:auto;margin:0 auto 0 0;gap:10px;justify-content:flex-start;font-size:13px}
  .bar__counts b{font-size:15px}
  .bar__tools{display:contents}
  .bar__live{order:1}
  /* بالوضع الصغير الإعدادات مطوية تحت زر ⚙ */
  .bar__tools .bar__btn{display:none;order:5;min-height:34px;padding:0 10px;font-size:12px}
  .bar.is-open .bar__tools .bar__btn:not([hidden]){display:inline-flex;align-items:center}
  #keysBtn:not([hidden]){display:none}
  .bar.is-open #keysBtn{display:inline-flex}
  .bar__more{display:grid;place-items:center;order:3;width:34px;height:34px;padding:0;border:1px solid var(--board-line);border-radius:10px;background:transparent;color:var(--b-text)}
  .bar.is-open .bar__more{background:var(--board-3)}
  .bar__tools .bar__btn--install:not([hidden]){display:inline-flex;align-items:center;order:2}
  /* «فاتورة عالشاشة» بتضل ظاهرة بالوضع الصغير (مش مطوية تحت ⚙) لأنها بتنكبس وقت الزحمة */
  .bar__tools .bar__btn--recent:not([hidden]){display:inline-flex;align-items:center;order:2}
}


/* ── مربوط بنظام الكاشير: الطلبات بتنزل لحالها، الموظف بيختار الوقت وبيكبس جاهز */
.entry-none .cmp__entry,.entry-none .pad,.entry-none .fab{display:none !important}
.entry-none .staff__body{grid-template-columns:1fr}
.crow--pick{flex-wrap:wrap;row-gap:0}
.crow__times{flex-basis:100%;direction:ltr;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0 6px 6px}
.crow__times button{min-width:0;min-height:40px;border:0;border-radius:8px;background:var(--board-3);color:var(--b-text);font-family:var(--display);font-size:20px;padding-top:4px}
.crow__times button:active{background:var(--board-line)}
.crow--pick .crow__ready{align-self:center;min-height:46px}
.crow__left--btn{border:0;background:none;padding:0;font:inherit;font-size:14px;color:var(--b-text);text-decoration:underline dotted;text-underline-offset:3px;cursor:pointer}

/* طريقة الإدخال: كيبورد خارجي بس = ما في أزرار أرقام على الشاشة، والرقم بيبين كبير */
.pad__kbhint{display:none;margin:0;font-size:14px;color:var(--b-muted);text-align:center}
.entry-kb .pad__keys,.entry-kb .cmp__keys{display:none !important}
.entry-kb .pad__kbhint{display:block}
.entry-kb .pad__display{min-height:120px;font-size:64px}
.pad__time-btns button[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--b-text)}
/* حذف طلب: كبستين */
.card__del{color:#F29B9B}
.times .card__del{flex:0 0 auto;min-width:0;background:transparent;color:#F29B9B;font-family:var(--font);font-size:13px;padding:0 8px} /* بصف الأوقات (لما يكبس على الوقت) */
.card__del.is-armed,.crow__del.is-armed{color:#fff;background:#C0392B;border-radius:8px;padding:4px 8px;text-decoration:none}
.crow__del{border:0;background:transparent;color:#F29B9B;font:600 12px/1 var(--font);padding:6px;cursor:pointer;white-space:nowrap}

/* ── English (المحل لغته إنجليزي): الشاشة من اليسار لليمين */
[dir="ltr"] .times__label{direction:ltr;text-align:left}
[dir="ltr"] .unlinked ol{text-align:left}
[dir="ltr"] .cmp__chips .cmp__empty{text-align:left}
[dir="ltr"] .cmp__msg{text-align:right}
[dir="ltr"] .card__meta{text-align:right}

/* ════════════════════════════════════════════════════════════
   الأعداد فوق: حبّة صفرا للانتظار وحبّة خضرا للجاهز (بالوضعين)
   ════════════════════════════════════════════════════════════ */
:where(.bar__counts)>span{display:inline-flex;align-items:baseline;gap:5px;padding:3px 12px 2px;border-radius:999px}
:where(.bar__counts)>span>b{margin:0}
.bar__counts>span:nth-child(1){background:rgba(255,197,61,.14)}
.bar__counts>span:nth-child(2){background:rgba(25,185,123,.16)}
:where(.bar__counts)>.bar__today{padding-inline:4px}

/* ════════════════════════════════════════════════════════════
   «فاتورة عالشاشة»: آخر 5 فواتير، الموظف بيختار رقم الزبون اللي ما لحق يصوّر
   ════════════════════════════════════════════════════════════ */
.pick{position:fixed;z-index:50;top:64px;inset-inline:12px;margin-inline:auto;max-width:460px;padding:16px 16px 18px;border-radius:20px;
  background:var(--board-2);color:var(--b-text);box-shadow:0 0 0 1px var(--board-line),0 24px 60px rgba(0,0,0,.4);animation:pick-in .16s ease-out}
.pick__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pick__title{font-family:var(--display);font-size:26px;line-height:1.2;padding-top:4px}
.pick__x{flex:none;display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;background:var(--board-3);color:var(--b-text);font-size:15px}
.pick__sub{margin:2px 0 14px;font-size:14px;color:var(--b-muted)}
.pick__list{direction:ltr;display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.pick__item{display:grid;justify-items:center;align-content:start;gap:3px;min-height:104px;padding:12px 8px 10px;border:1.5px solid var(--board-line);border-radius:16px;
  background:var(--board);color:var(--b-text);transition:transform .06s}
.pick__item:active{transform:scale(.96)}
.pick__num{font-family:var(--display);font-size:42px;line-height:1;padding-top:6px}
.pick__meta{font-size:12px;font-weight:600;color:var(--b-muted)}
.pick__tag{padding:1px 9px;border-radius:999px;background:var(--signal);color:var(--signal-ink);font-size:11px;font-weight:700}
.pick__item.is-ready .pick__num{color:var(--ready)}
.pick__empty{padding:20px;border:1.5px dashed var(--board-line);border-radius:14px;text-align:center;color:var(--b-muted)}
@keyframes pick-in{from{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.pick{animation:none}}
.staff--pip .pick{top:40px;inset-inline:8px;padding:12px}
.staff--pip .pick__list{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}

/* ════════════════════════════════════════════════════════════
   الشاشة الفاتحة — الأساسية من هلّأ (نفس ألوان موقع دورك). الغامقة بتضل خيار من ⚙
   فكرتها: أبيض نظيف، والحالة بتنقرا من خط ملوّن على طرف الكرت بدل ما الكرت كله يتلوّن:
   أصفر = بالانتظار، أحمر = متأخر، أخضر = جاهز. الأحمر بس للتأخير عشان يلفت النظر
   ════════════════════════════════════════════════════════════ */
.staff--light{
  --board:#F3F7F5; --board-2:#FFFFFF; --board-3:#EBF1EF; --board-line:#DBE4E1;
  --b-text:#0F3A40; --b-muted:#5F7774;
  --amber-ink:#8A5A00; --late:#D9483B; --late-soft:#FFF3F1; --soon-soft:#FFF8E3; --ready-ink:#0B6B47; --mint:#EDF8F2;
  --lift:0 1px 2px rgba(15,58,64,.06),0 3px 10px rgba(15,58,64,.05)}
.staff--light :focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--b-text)}

/* الشريط */
.staff--light .bar{background:#FFFFFF}
.staff--light .bar__counts>span:nth-child(1){background:#FFF4D4;color:var(--amber-ink)}
.staff--light .bar__counts>span:nth-child(1) b{color:var(--amber-ink)}
.staff--light .bar__counts>span:nth-child(2){background:#E1F6EC;color:var(--ready-ink)}
.staff--light .bar__counts>span:nth-child(2) b{color:var(--ready-ink)}
.staff--light .bar__btn{color:var(--b-text)}
.staff--light .bar__btn--install{color:#0F3A40}
.staff--light .js-recent.is-on{color:var(--signal-ink)}

/* لوحة الأرقام */
.staff--light .pad{background:#FFFFFF}
.staff--light .pad__display{color:var(--b-text);background:var(--board);box-shadow:inset 0 0 0 1.5px var(--board-line)}
.staff--light .pad__display:empty::before{color:#C4D1CD}
.staff--light .pad__keys button{background:var(--board-3);color:var(--b-text)}
.staff--light .pad__keys button:active{background:var(--board-line)}
.staff--light .pad__time-btns button{background:#FFF4D4;color:var(--amber-ink)}
.staff--light .pad__time-btns button[aria-pressed="true"]{background:var(--signal);color:var(--signal-ink);box-shadow:inset 0 0 0 2px #E0A92A}
.staff--light .pad__now{border-color:var(--ready);color:var(--ready-ink)}
.staff--light .pad__now:active{background:var(--mint)}

/* الأعمدة: «جاهز» عموده مايل للأخضر عشان ينفصل بالعين */
.staff--light .col--ready{background:var(--mint)}
.staff--light .col--ready + .col,.staff--light .col + .col--ready{border-inline-start-color:#D3EBDF}
.staff--light .col__empty{border-color:#CFDBD7}

/* كرت بالانتظار */
.staff--light .card{background:#FFFFFF;border:0;border-inline-start:5px solid var(--signal);box-shadow:var(--lift)}
.staff--light .card--new{border:2px solid var(--signal);border-inline-start-width:5px}
.staff--light .card.is-soon{border-inline-start-color:#F0A800;background:var(--soon-soft)}
.staff--light .card.is-late{border-inline-start-color:var(--late);background:var(--late-soft)}
.staff--light .card__num{color:var(--b-text)}
.staff--light .eta__left{color:var(--b-text);text-decoration-color:#B9C8C4}
.staff--light .is-soon .eta__left,.staff--light .is-soon .crow__left{color:var(--amber-ink)}
.staff--light .eta__left.is-late{color:var(--late)}
.staff--light .eta__bar{background:var(--board-3)}
.staff--light .eta__fill.is-late{background:var(--late)}
.staff--light .card__plus{color:var(--b-text)}
.staff--light .card__phone{color:var(--b-text)}
.staff--light .card__phone--none{padding:1px 8px;border-radius:8px;line-height:1.35;background:var(--board-3);color:var(--b-text)}
.staff--light .card__phone--warn{color:var(--amber-ink)}
.staff--light .times button{background:var(--board-3);color:var(--b-text)}
.staff--light .card__del,.staff--light .crow__del,.staff--light .times .card__del{color:#B3261E}

/* كرت جاهز: أبيض بخط أخضر، و«تم الاستلام» زر واضح */
.staff--light .card--ready{background:#FFFFFF;border-inline-start-color:var(--ready)}
.staff--light .card--ready .card__num{color:var(--ready-ink)}
.staff--light .card--ready .btn--ghost{background:var(--b-text);color:#FFFFFF;box-shadow:none}
.staff--light .card__link{color:var(--b-muted)}

/* الوضع الصغير (جنب الكاشير / النافذة العائمة) */
.staff--light .cmp__entry{background:#FFFFFF}
.staff--light .cmp__input{background:#FFFFFF;border-color:#E0A92A}
.staff--light .cmp__undo{color:var(--amber-ink)}
.staff--light .cmp__late{color:var(--late)}
.staff--light .cmp__keys .cmp__fn{color:var(--b-muted)}
.staff--light .crow{background:#FFFFFF;box-shadow:var(--lift);border-inline-start:4px solid var(--signal)}
.staff--light .crow.is-soon{background:var(--soon-soft);border-inline-start-color:#F0A800}
.staff--light .crow.is-late{background:var(--late-soft);border-inline-start-color:var(--late)}
.staff--light .crow__left.is-late{color:var(--late)}
.staff--light .crow__left--new,.staff--light .crow__ph--warn{color:var(--amber-ink)}
.staff--light .crow__ph--none{color:var(--b-text)}
.staff--light .crow__fill.is-late{background:var(--late)}
.staff--light .crow__bar{background:var(--board-3)}
.staff--light .crow__times button{background:var(--board-3);color:var(--b-text)}
.staff--light .cmp__ready{background:var(--mint)}
.staff--light .cchip{background:#FFFFFF;border-color:#A6DDC3;color:var(--ready-ink)}
.staff--light .cchip.is-old{background:#FFFFFF;border-color:#E0A92A;color:var(--amber-ink)}

/* «فاتورة عالشاشة» */
.staff--light .pick{box-shadow:0 0 0 1px var(--board-line),0 24px 60px rgba(15,58,64,.22)}
.staff--light .pick__item{background:#FFFFFF}
.staff--light .pick__item.is-ready .pick__num{color:var(--ready-ink)}

.staff--light .unlinked .btn--ghost{color:var(--b-text)}
@media (max-width:900px){
  .staff--light .pad{box-shadow:0 -12px 40px rgba(15,58,64,.18)}
  .staff--light .fab{box-shadow:0 10px 30px rgba(15,58,64,.22)}
  .staff--light .col--ready{background:transparent}
}

/* ════════════════════════════════════════════════════════════
   عمر الطلب على الكرت كله (بالوضع الغامق كمان) + شريط انقطاع الاتصال + إعدادات الشاشة تحت ⚙
   ════════════════════════════════════════════════════════════ */
.card.is-soon,.crow.is-soon{background:#3A3423}
.card.is-late,.crow.is-late{background:#3A2E2B}
.banner--off{position:sticky;top:0;z-index:45;background:#B3261E}
/* الشريط فوق: بس اللي بينكبس كل يوم ظاهر. الشاشة الغامقة والنافذة العائمة والحجم تحت ⚙ */
@media (min-width:701px){
  .bar__more{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--board-line);border-radius:10px;background:transparent;color:var(--b-text)}
  .bar.is-open .bar__more{background:var(--board-3)}
  .bar:not(.is-open) .bar__tools .bar__btn:not(.bar__btn--recent):not(.bar__btn--install){display:none}
}
/* زر «حذف» عالكرت نفسه (رقم انكتب غلط): كبستين، الأولى بتسأل «متأكد؟» */
.card__top .card__del{min-height:44px;padding:0 8px;color:#F29B9B}
.staff--light .card__top .card__del{color:#B3261E}
.card__top .card__del.is-armed{min-height:36px;color:#fff}