/* ============================================================
   KWS POS — ثيم Graphite + Ember (نفس نظام لوحة التحكّم)
   كل الألوان من توكنات app.css — بلا أي لون hardcoded.
   ============================================================ */

.pos-shell {
    min-height: 100vh;
    background: var(--bg-grad), var(--bg);
    color: var(--text);
    font-family: 'Cairo', system-ui, sans-serif;
    display: flex;
    flex-direction: column;
}

/* ===== الشريط العلوي — surface مصمت =====
   مهم: بلا backdrop-filter/transform هون، لأنهم بيصنعوا "containing block"
   فيحصروا الدرج (PosMenu) المثبّت جوّا التوبار بارتفاع التوبار بدل الشاشة. */
.pos-topbar {
    position: sticky; top: 0; z-index: 40;
    height: 74px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 28px;
    background: linear-gradient(180deg, var(--surface), var(--surface-2));
    border-bottom: 1px solid var(--border-2);
    box-shadow: var(--shadow-sm);
}
.pos-brand { display: flex; align-items: center; gap: 12px; }
.pos-brand .name { font-weight: 800; font-size: 21px; color: var(--text); }
.pos-brand .name b { color: var(--brand-500); }
.pos-brand .logo {
    width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff; font-weight: 900; font-size: 13px;
    box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--brand-500) 55%, transparent),
                inset 0 1px 0 rgba(255,255,255,.25);
}
.pos-top-actions { display: flex; align-items: center; gap: 10px; }

/* زر القائمة — outline */
.pos-iconbtn {
    width: 46px; height: 46px; border-radius: var(--radius-ctl); cursor: pointer;
    border: 1px solid var(--border); background: var(--surface); color: var(--text);
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pos-iconbtn:hover { background: var(--surface-2); border-color: var(--brand-300); }
.pos-iconbtn .mud-icon-root { font-size: 1.4rem; }

.pos-body { flex: 1; min-height: 0; padding: 26px 28px 40px; max-width: 1560px; width: 100%; margin: 0 auto; }

/* ===== قائمة القبّعة (درج جانبي ينزلق من اليمين) ===== */
.pos-drawer-scrim {
    position: fixed; inset: 0; z-index: 60; background: var(--scrim);
    backdrop-filter: blur(3px);
    animation: posFade .2s var(--ease) both;
}
@keyframes posFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes posSlideIn { from { transform: translateX(100%) } to { transform: none } }
/* لوحة مصمتة كاملة الطول ملتصقة بيمين الشاشة */
.pos-menu {
    position: fixed; top: 0; bottom: 0; right: 0; width: min(370px, 88vw);
    display: flex; flex-direction: column;
    background: var(--surface); border-inline-start: 1px solid var(--border-2);
    box-shadow: -10px 0 34px -12px rgba(0,0,0,.35);
    animation: posSlideIn .26s var(--ease) both;
}
/* رأس الدرج: عنوان + زر إغلاق */
.pos-menu-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.pos-menu-title { font-family: 'Cairo'; font-weight: 800; font-size: 18px; color: var(--text); }
.pos-menu-close {
    width: 40px; height: 40px; border-radius: 12px; border: none; cursor: pointer;
    background: var(--surface-2); color: var(--text-muted); display: grid; place-items: center;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pos-menu-close:hover { background: var(--border); color: var(--text); }
.pos-menu-close .mud-icon-root { font-size: 1.5rem; }
/* قائمة الخيارات — تمرير لو طالت */
.pos-menu-list {
    flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px;
}
/* خيار القائمة = صف مسطّح + أيقونة بمربّع brand فاتح + عنوان ووصف (بلا ظل عشان يقعد نظيف داخل اللوحة) */
.pos-menu-btn {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: start;
    padding: 13px 14px; border-radius: var(--radius-ctl); cursor: pointer;
    background: transparent; border: 1px solid transparent; font-family: 'Cairo';
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pos-menu-btn:hover { background: var(--surface-2); border-color: var(--border-2); }
.pos-menu-ico {
    width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--icbg1), var(--icbg2)); color: var(--brand-600);
}
.pos-menu-ico .mud-icon-root { font-size: 1.4rem; }
.pos-menu-txt { flex: 1; min-width: 0; }
.pos-menu-txt b { display: block; font-weight: 800; font-size: 16px; color: var(--text); }
.pos-menu-txt span { display: block; font-weight: 600; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* الخروج — أيقونته تحذيرية + فاصل فوقه عشان ينقرأ إنه مختلف عن باقي الخيارات */
.pos-menu-btn.exit { margin-top: 8px; padding-top: 15px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-ctl) var(--radius-ctl); }
.pos-menu-btn.exit:hover { background: var(--danger-50); border-color: transparent; }
.pos-menu-btn.exit .pos-menu-ico { background: var(--danger-50); color: var(--danger-600); }
.pos-menu-btn.exit b { color: var(--danger-600); }

/* ===== لوحة الطلبات — عمودين ===== */
.pos-board { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .pos-board { grid-template-columns: 1fr; } }

/* العمود بياخد ارتفاع محتواه — min-height صغير بس يكفّي حالة الفراغ
   تبيّن مقصودة (كان 560px فبيّن فراغ أبيض كبير مع طلب أو طلبين) */
.pos-col {
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-card);
    box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; min-height: 250px;
}
.pos-col-head {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-2);
}
/* شريط تدرّج علوي 4px بلون الحالة */
.pos-col-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.pos-col.new .pos-col-head::before { background: linear-gradient(90deg, var(--brand-400), var(--gold-500)); }
.pos-col.acc .pos-col-head::before { background: linear-gradient(90deg, var(--success-400), var(--success-600)); }

.pos-col-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.pos-col-ico .mud-icon-root { font-size: 1.3rem; }
.pos-col.new .pos-col-ico { background: linear-gradient(145deg, var(--icbg1), var(--icbg2)); color: var(--brand-600); }
.pos-col.acc .pos-col-ico { background: linear-gradient(145deg, var(--success-50), var(--success-150)); color: var(--success-600); }

.pos-col-title { font-weight: 800; font-size: 17px; color: var(--text); }
.pos-col-count {
    margin-inline-start: auto; min-width: 30px; height: 30px; padding: 0 10px; border-radius: 10px;
    display: grid; place-items: center; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.pos-col.new .pos-col-count { background: var(--icbg1); color: var(--brand-600); }
.pos-col.acc .pos-col-count { background: var(--success-50); color: var(--success-600); }

.pos-list { padding: 14px; display: flex; flex-direction: column; gap: 12px; flex: 1;
    overflow-y: auto; max-height: calc(100vh - 240px); }

/* ===== تذكرة الطلب ===== */
.pos-card {
    position: relative; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-ctl);
    padding: 15px 16px; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease);
}
.pos-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand-300); }

.pos-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pos-id { font-weight: 800; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.pos-id .hash { color: var(--brand-500); }
.pos-when { font-size: 12.5px; color: var(--text-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-cust { text-align: start; font-weight: 700; font-size: 14px; color: var(--text); }
.pos-rest { color: var(--text-muted); font-size: 12.5px; font-weight: 600; }

.pos-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pos-chip {
    display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
}
.pos-chip .mud-icon-root { font-size: .95rem; }
.pos-chip.price { background: var(--icbg1); color: var(--brand-600); font-variant-numeric: tabular-nums; }
.pos-chip.type { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border-2); }
.pos-chip.paid { background: var(--success-50); color: var(--success-600); }
.pos-chip.unpaid { background: var(--danger-50); color: var(--danger-600); }
.pos-age { color: var(--text-soft); font-size: 12px; font-weight: 600; margin-inline-start: auto; }

.pos-card-foot {
    margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-weight: 800; font-size: 13.5px;
}
.pos-prep-done { color: var(--success-600); }
.pos-prep-todo { color: var(--brand-600); }

/* ===== حالة الفراغ ===== */
.pos-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 26px 20px; color: var(--text-soft);
}
.pos-empty-ico {
    width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-soft);
}
.pos-empty-ico .mud-icon-root { font-size: 1.8rem; }
.pos-empty p { font-weight: 700; font-size: 15px; color: var(--text-muted); }

/* ===== الطلبات الحالية — شريط أدوات + شبكة تذاكر ===== */
.pos-toolbar {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-card);
    padding: 18px 22px; box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.pos-toolbar-ttl h1 {
    font-size: 24px; font-weight: 800; letter-spacing: -.3px;
    background: linear-gradient(120deg, var(--text), var(--brand-500));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pos-toolbar-ttl p {
    color: var(--text-muted); font-size: 13.5px; font-weight: 600; margin-top: 5px;
    display: flex; align-items: center; gap: 7px;
}
.pos-cnt { background: var(--icbg1); color: var(--brand-600); font-weight: 800; font-size: 12.5px;
    padding: 3px 10px; border-radius: 20px; }

.pos-filter { display: flex; align-items: flex-end; gap: 12px; }
.pos-field label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; font-weight: 700; }
.pos-datebox {
    display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border: 1px solid var(--border); background: var(--surface-2);
    border-radius: var(--radius-ctl); box-shadow: var(--shadow-sm);
}
.pos-datebox .mud-icon-root { font-size: 1.15rem; color: var(--brand-500); }
.pos-datebox input {
    border: none; background: transparent; outline: none; color: var(--text);
    font-family: 'Cairo'; font-size: 14.5px; font-weight: 700;
}
.pos-today-btn {
    border: 1px solid var(--border); background: var(--surface); cursor: pointer;
    font-family: 'Cairo'; font-weight: 700; font-size: 13.5px; color: var(--text-muted);
    padding: 11px 16px; border-radius: var(--radius-ctl); box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pos-today-btn:hover { border-color: var(--brand-300); color: var(--text); }

.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; align-items: start; }

/* تذكرة الطلبات الحالية */
.pos-tk {
    position: relative; overflow: hidden; cursor: pointer;
    background: var(--surface); border: 1px solid var(--border-2);
    border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow);
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pos-tk::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--brand-400), var(--gold-500)); }
.pos-tk:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pos-tk-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pos-tk-cust { font-weight: 800; font-size: 16px; color: var(--text); }
.pos-tk-rest { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: 3px; }
.pos-tk-num { font-weight: 800; font-size: 16px; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.pos-tk-time { font-size: 12.5px; color: var(--text-soft); font-weight: 600;
    display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.pos-tk-time .mud-icon-root { font-size: 1rem; }
.pos-tk-chips { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    padding-bottom: 15px; border-bottom: 1px dashed var(--border); }
.pos-tk-chip { font-weight: 700; font-size: 13px; padding: 8px 13px; border-radius: 11px;
    display: inline-flex; align-items: center; gap: 6px; }
.pos-tk-chip .mud-icon-root { font-size: 1rem; }
.pos-tk-chip.paid   { background: var(--success-50); color: var(--success-600); }
.pos-tk-chip.unpaid { background: var(--danger-50);  color: var(--danger-600); }
.pos-tk-chip.type   { background: var(--surface-2);  color: var(--text-muted); border: 1px solid var(--border); }
.pos-tk-chip.price  { background: var(--icbg1); color: var(--brand-600); font-weight: 800; margin-inline-start: auto; }
.pos-tk-foot { display: flex; justify-content: center; padding-top: 15px; }
.pos-tk-state {
    font-family: 'Cairo'; font-weight: 800; font-size: 14.5px; color: #fff;
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    padding: 11px 26px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 10px 20px -7px color-mix(in srgb, var(--brand-500) 50%, transparent);
}
.pos-tk-state .mud-icon-root { font-size: 1.1rem; }
.pos-tk-state.done {
    background: linear-gradient(145deg, var(--success-500), var(--success-600));
    box-shadow: 0 10px 20px -7px color-mix(in srgb, var(--success-600) 50%, transparent);
}

/* ===== توفّر الأصناف (تنقّل) ===== */
.pos-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font-weight: 700; }
.pos-crumb {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-ctl);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pos-crumb:hover { border-color: var(--brand-300); background: var(--surface-2); }
.pos-crumb.cur {
    background: linear-gradient(145deg, var(--brand-400), var(--brand-600));
    color: #fff; border-color: transparent; cursor: default;
}
.pos-crumb-sep { color: var(--text-soft); }

.pos-avail-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.pos-avail-group-title { font-weight: 800; font-size: 15px; margin: 16px 0 4px; color: var(--brand-600); }
.pos-avail-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px;
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-ctl);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pos-avail-row.drill { cursor: pointer; }
.pos-avail-row:hover { border-color: var(--brand-300); box-shadow: var(--shadow); }
.pos-avail-name { flex: 1; min-width: 0; font-weight: 700; color: var(--text); }
.pos-avail-name .sub { display: block; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
.pos-avail-state { font-size: 12.5px; font-weight: 700; }
.pos-avail-state.on { color: var(--success-600); }
.pos-avail-state.off { color: var(--danger-600); }

/* ===== سويتش (متوفّر/نفد & تشغيل/إيقاف) ===== */
.pos-switch {
    position: relative; width: 56px; height: 31px; border-radius: 999px; border: none; padding: 0;
    cursor: pointer; flex-shrink: 0; background: var(--border);
    transition: background var(--t-base) var(--ease);
}
.pos-switch.on { background: linear-gradient(145deg, var(--success-500), var(--success-600)); }
.pos-switch::after {
    content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 25px; height: 25px;
    border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm);
    transition: inset-inline-start var(--t-base) var(--ease);
}
.pos-switch.on::after { inset-inline-start: 28px; }
.pos-switch:disabled { opacity: .55; cursor: wait; }

/* ===== حالة الفروع (تشغيل / إيقاف المتجر) ===== */
.pos-store-list { display: flex; flex-direction: column; gap: 18px; max-width: 760px; margin: 0 auto; }
.pos-store-card {
    background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-card);
    box-shadow: var(--shadow); overflow: hidden;
}
.pos-store-head {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border-2);
}
.pos-store-head::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--border); }
.pos-store-card.open   .pos-store-head::before { background: linear-gradient(90deg, var(--success-400), var(--success-600)); }
.pos-store-card.closed .pos-store-head::before { background: linear-gradient(90deg, var(--danger-400), var(--danger-600)); }
.pos-store-name { flex: 1; min-width: 0; font-weight: 800; font-size: 16px; color: var(--text); }

.pos-state-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px;
    border-radius: 999px; font-weight: 800; font-size: 12.5px;
}
.pos-state-badge .mud-icon-root { font-size: 1rem; }
.pos-state-badge.open   { background: var(--success-50); color: var(--success-600); }
.pos-state-badge.closed { background: var(--danger-50);  color: var(--danger-600); }
.pos-state-badge.busy   { background: var(--gold-100);   color: var(--gold-600); }
.pos-state-badge.calm   { background: var(--surface-2);  color: var(--text-muted); border: 1px solid var(--border-2); }

.pos-store-row { display: flex; align-items: center; gap: 14px; padding: 15px 20px; }
.pos-store-row + .pos-store-row { border-top: 1px solid var(--border-2); }
.pos-store-ico {
    width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text-muted);
}
.pos-store-ico .mud-icon-root { font-size: 1.25rem; }
.pos-store-txt { flex: 1; min-width: 0; }
.pos-store-txt b { display: block; font-weight: 800; font-size: 14.5px; color: var(--text); }
.pos-store-txt span { display: block; color: var(--text-muted); font-size: 12.5px; font-weight: 600; }

/* سويتش «مشغول» بلون تحذيري — مش أخضر، لأنه مش حالة إيجابية */
.pos-switch.warn.on { background: linear-gradient(145deg, var(--gold-500), var(--gold-600)); }

/* ===== زر «تم التحضير» بنافذة التفاصيل ===== */
.pos-prep-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px; border-radius: var(--radius-ctl); border: none; cursor: pointer; color: #fff;
    font-family: 'Cairo'; font-weight: 800; font-size: 15px;
    background: linear-gradient(145deg, var(--success-500), var(--success-600));
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--success-600) 60%, transparent);
    transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.pos-prep-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.pos-prep-btn:disabled { opacity: .6; cursor: not-allowed; }
.pos-prep-btn.done { background: var(--success-50); color: var(--success-600); box-shadow: none; }

.pos-loading { padding: 70px; text-align: center; color: var(--text-muted); font-weight: 700; }

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .pos-card, .pos-iconbtn, .pos-menu-btn, .pos-crumb, .pos-avail-row, .pos-switch, .pos-switch::after,
    .pos-prep-btn { transition: none; }
    .pos-card:hover, .pos-menu-btn:hover, .pos-prep-btn:hover:not(:disabled) { transform: none; }
    .pos-menu, .pos-drawer-scrim { animation: none; }
}