/* ==========================================================================
   Clopra — لوحة التحكم
   واجهة كثيفة تُقرأ بالمسح لا بالقراءة: شريط جانبي ثابت وجداول بيانات.
   ========================================================================== */

:root {
    --navy-950: #12161F;
    --navy-900: #171C27;
    --navy-800: #1E2431;
    --navy-700: #1F2739;
    --navy-600: #2C3549;

    --brand-700: #A6321F;
    --brand-600: #C43F2B;
    --brand-500: #E0533D;
    --brand-400: #EC6B54;
    --brand-100: #FBDDD6;
    --brand-50: #FDF0EC;

    --slate-700: #384047;
    --slate-500: #5B6673;
    --slate-400: #8A94A3;
    --slate-300: #B9C1CC;
    --slate-200: #DCE2E9;
    --slate-100: #EDF1F5;
    --slate-50: #F6F8FA;

    --amber: #A86B2E;
    --amber-soft: #FBF3E7;
    --danger: #B4453F;
    --danger-soft: #FBEDEC;

    --ink: var(--navy-700);
    --ink-soft: var(--slate-500);
    --line: var(--slate-200);
    --page: #F4F6F8;

    /* ★ أسماءٌ اسْتُعملت في ٥٢ موضعًا **بلا أن تُعرَّف قطّ**. و`var()` بلا
       بديلٍ لمتغيّرٍ غير معرَّف تُسقط التصريحَ كلَّه بلا خطأٍ ولا تحذير: تبويبٌ
       نشط كُتب له `background: var(--ink-900); color: #fff` خرج أبيضَ على
       أبيض — أي غير مقروءٍ إطلاقًا — وثلاثةٌ وعشرون نصًّا ثانويًّا خرجت بلون
       المتن. لا شيء في المتصفّح يشير إلى السبب، فالسطر مكتوبٌ ويبدو سليمًا.
       ★ Names used in 52 places that were **never defined**. A `var()` with no
       fallback for an undefined custom property drops the whole declaration,
       silently: an active tab written `background: var(--ink-900); color:#fff`
       came out white on white — unreadable — and twenty-three secondary texts
       rendered at body colour. Nothing in the browser points at the cause; the
       line is there and looks right. */
    --ink-900: var(--navy-800);
    --ink-700: var(--navy-700);
    --ink-600: var(--navy-600);
    --ink-500: var(--slate-500);
    --muted:   var(--slate-500);

    --paper:   #fff;
    --paper-2: var(--slate-50);
    --card:    #fff;

    --brand-200: #F6C7BC;
    --radius: 10px;
    --sp-4: 1rem;

    --sidebar-w: 248px;
    --topbar-h: 60px;

    --font-base: 'Tajawal', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

    --shadow-sm: 0 1px 2px rgba(20, 24, 34, .06), 0 2px 8px rgba(20, 24, 34, .05);
    --shadow-md: 0 4px 12px rgba(20, 24, 34, .08), 0 12px 28px rgba(20, 24, 34, .07);

    /* سُلَّم الطبقات — مُعلَن في مكان واحد.
       الأرقام المتناثرة في الملف هي ما جعل اللوح المنبثق (٦٠) يُرسم تحت
       الشريط الجانبي (١٠٤٠). القيم فوق ١٠٥٥ لأن حزمة Bootstrap المرفقة
       تحجز ١٠٥٠ للخلفية و١٠٥٥ للنافذة.
       The layer scale, declared in one place. Scattered numbers are what put
       the modal (60) underneath the sidebar (1040). Values clear 1055 because
       the bundled Bootstrap reserves 1050/1055 for its own modal. */
    --z-topbar: 1020;
    --z-scrim: 1035;
    --z-sidebar: 1040;
    --z-sheet: 1060;
}

/* الحزمة المرفقة هي ثيم Bootswatch Litera الذي يفرض خطًا مذيّلًا على الفقرات */
body, p, li, a, span, small, strong, label, th, td,
button, input, select, textarea, .btn, .form-control, .form-select {
    font-family: var(--font-base);
}

* { box-sizing: border-box; }

body.console {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-size: 12px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-base);
    color: var(--navy-700);
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-500); }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

code, .mono {
    font-family: var(--font-mono);
    direction: ltr;
    unicode-bidi: embed;
}

code {
    font-size: .86em;
    background: var(--slate-100);
    color: var(--navy-700);
    padding: 1px 5px;
    border-radius: 3px;
}

/* --------------------------------------------------------------------------
   الشريط الجانبي
   -------------------------------------------------------------------------- */
.sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--sidebar-w);
    background: var(--navy-900);
    color: var(--slate-300);
    display: flex;
    flex-direction: column;
    z-index: var(--z-sidebar);
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-brand img { width: 30px; height: 34px; object-fit: contain; }

.sidebar-brand .brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.sidebar-brand b { color: #fff; font-size: .98rem; font-weight: 700; }
.sidebar-brand b em { font-style: normal; color: var(--brand-400); }
.sidebar-brand small { color: var(--slate-400); font-size: .74rem; }

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .55rem .6rem .8rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 99px; }

/* ---------------------------------------------------------------
   البحث في القائمة / The menu filter
   ★ خارج `.sidebar-nav` فلا يُمرَّر معها، و`flex: 0 0 auto` فلا يُضغط
   (القاعدة ١٤). ★ Outside the scroller, and never squeezed.
   --------------------------------------------------------------- */
.nav-find {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .7rem .7rem .2rem;
    padding-inline: .65rem .4rem;
    min-height: 2.35rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--slate-400);
    transition: border-color .16s ease, background-color .16s ease;
}
.nav-find[hidden] { display: none; }
.nav-find:focus-within { border-color: var(--brand-400); background: rgba(255, 255, 255, .09); color: #fff; }
.nav-find > i { font-size: .9rem; flex: 0 0 auto; }
.nav-find input {
    flex: 1 1 auto;
    min-width: 0;
    background: none;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: .9rem;
    padding-block: .45rem;
}
.nav-find input::placeholder { color: var(--slate-400); }
.nav-find input::-webkit-search-cancel-button { display: none; }
.nav-find kbd {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: .66rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .08);
    color: var(--slate-400);
    box-shadow: none;
}
.nav-find.has-q kbd { display: none; }
.nav-find-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--slate-300);
    font-size: .8rem;
}
.nav-find-x[hidden] { display: none; }
.nav-find-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.nav-tools {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .35rem .7rem .25rem;
    color: var(--slate-500);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
}
.nav-tools[hidden] { display: none; }
.nav-tools > span { flex: 1; }
.nav-tools button {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--slate-400);
    font-size: .85rem;
}
.nav-tools button:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.nav-none {
    margin: 1.2rem .7rem;
    text-align: center;
    color: var(--slate-400);
    font-size: .85rem;
}
.nav-none[hidden] { display: none; }
.nav-none i { display: block; font-size: 1.3rem; margin-bottom: .4rem; opacity: .6; }

/* ما لا يطابق البحث يُخفى بسِمةٍ لا بصنف: `hidden` يخرجه من ترتيب التنقّل
   بلوحة المفاتيح أيضًا. */
.sidebar-nav [data-nav-item][hidden], .sidebar-nav .nav-sec[hidden] { display: none; }
/* أثناء البحث: العدّاد يقول عدد المجموعة لا عدد النتائج، فيُخفى ولا يكذب */
.sidebar-nav.is-searching .nav-sec-caret, .sidebar-nav.is-searching .nav-sec-count { visibility: hidden; }
.sidebar-nav.is-searching .nav-tools { display: none; }
.sidebar .nav-link:focus-visible, .nav-sec-head:focus-visible {
    outline: 2px solid var(--brand-400);
    outline-offset: -2px;
}

/* عنوانٌ صغير داخل الصفحات — لا في القائمة. تستعمله شاشة الطاولات
   لتسمية كل منطقة. A small in-page heading, used by the tables screen. */
.nav-group {
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--slate-500);
    font-weight: 700;
}

/* ---------------------------------------------------------------
   القائمة الجانبية: مجموعاتٌ منسدلة / Collapsible sidebar groups

   ثلاثون رابطًا في عمودٍ واحد يعني تمريرًا في كل مرة، والكاشير يفتح هذه
   القائمة مئة مرة في النوبة. المجموعة المطويّة تُبقي البنية مقروءةً
   بالنظر — عنوانٌ وأيقونةٌ وعدد — وتفتح ما يُحتاج وحده.
   Thirty links in one column means scrolling on every use, and a cashier
   opens this menu a hundred times a shift. A folded group keeps the shape
   readable at a glance — title, icon, count — and opens only what is needed.
   --------------------------------------------------------------- */

.nav-solo { margin-bottom: .5rem; }

.nav-sec { border-radius: 8px; margin-bottom: .2rem; }

.nav-sec-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: 7px;
    cursor: pointer;
    color: var(--slate-400);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
    list-style: none;
    transition: color .16s ease, background-color .16s ease;
}

/* السهم الافتراضي يُخفى في كل المحرّكات: WebKit يرسمه بمزيّفٍ خاصّ به */
.nav-sec-head::-webkit-details-marker { display: none; }
.nav-sec-head::marker { content: ''; }

.nav-sec-head:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.nav-sec-icon {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, .06);
    font-size: .92rem;
    flex-shrink: 0;
    transition: background-color .16s ease, color .16s ease;
}
.nav-sec.has-active > .nav-sec-head .nav-sec-icon { background: rgba(255, 255, 255, .12); color: var(--brand-400); }
.nav-sec-head > span { flex: 1; min-width: 0; }

.nav-sec-count {
    font-style: normal;
    font-size: .68rem;
    font-weight: 700;
    padding: .05rem .38rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .07);
    color: var(--slate-400);
}

.nav-sec-caret {
    font-size: .7rem;
    transition: transform .18s ease;
    flex-shrink: 0;
}

.nav-sec[open] > .nav-sec-head > .nav-sec-caret { transform: rotate(180deg); }

/* ★ المجموعة التي فيها الصفحة الحالية تُعلَّم بخطٍّ لا بلون: اللون وحده
   ينافس البند النشط داخلها، فيتنازعان النظر ولا يفوز أحدهما.
   ★ The group holding the current page is marked with a rule, not a colour:
   colour alone competes with the active item inside it. */
.nav-sec.has-active > .nav-sec-head { color: #fff; }
.nav-sec.has-active > .nav-sec-head .nav-sec-count {
    background: var(--brand-500);
    color: #fff;
}

.nav-sec-body {
    padding-block: .15rem .4rem;
    padding-inline-start: .5rem;
    margin-inline-start: 1.5rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .08);
}

.nav-sec[open] > .nav-sec-body { animation: navOpen .18s ease; }

@keyframes navOpen {
    from { opacity: 0; transform: translateY(-.25rem); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-sec-caret, .nav-sec[open] > .nav-sec-body { transition: none; animation: none; }
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .65rem;
    border-radius: 7px;
    color: var(--slate-300);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .16s ease, color .16s ease;
}

.sidebar .nav-link i { font-size: 1rem; width: 1.2rem; text-align: center; flex-shrink: 0; opacity: .85; }
.sidebar .nav-link > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-solo { font-weight: 700; }
.sidebar .nav-solo i { width: 1.7rem; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.sidebar .nav-link.active {
    background: var(--brand-500);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}
.sidebar .nav-link.active i { opacity: 1; }

.sidebar-foot {
    padding: .8rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.sidebar-foot a {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--slate-400);
    font-size: .85rem;
}

.sidebar-foot a:hover { color: var(--brand-400); }

.sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(13, 19, 30, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
    z-index: var(--z-scrim);
}

.sidebar-scrim.show { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   الهيكل والشريط العلوي
   -------------------------------------------------------------------------- */
.shell {
    margin-inline-start: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding-inline: 1.3rem;
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-topbar);
}

/* ★ العنوان وحده هو ما يُقصّ، وكلّ ما عداه لا يُضغط.
   كانت أدوات الترويسة عناصر flex بعرضٍ ثابت وقابلية ضغطٍ افتراضية، ومجموعها
   يفوق شاشة الهاتف — فيضغطها المتصفّح كلَّها: خرج زرُّ الدرج بعرض ١٤ بكسلًا
   (هدفُ لمسٍ لا يُصاب)، وفاض ما لم يُضغط خلف الحافّة، وصارت **كل** شاشة في
   اللوحة تُمرَّر أفقيًّا على الجوال.
   ★ Only the title is allowed to clip; nothing else may shrink. The topbar's
   controls were fixed-width flex items with shrinking left on, and their sum
   exceeds a phone's width — so the browser squeezed them all: the drawer
   button came out 14px wide (a tap target nobody can hit) and whatever would
   not squeeze spilled past the edge, making **every** console screen scroll
   sideways on a phone. */
.topbar-title {
    font-size: 1.06rem;
    font-weight: 700;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar > *:not(.topbar-title) { flex: 0 0 auto; }

.topbar-actions {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.topbar-actions > * { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   قائمة المستخدم / The user menu

   `<details>` مفتوحةً تحتاج موضعًا نسبيًّا لتُعلَّق اللوحة عليه، ولا شيء غير
   ذلك: الفتح والإغلاق والتنقّل بلوحة المفاتيح من المتصفّح نفسه.
   -------------------------------------------------------------------------- */
.user-menu { position: relative; }

.user-menu-btn {
    list-style: none;
    display: inline-grid;
    place-items: center;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--slate-700);
    font-size: 1.25rem;
    cursor: pointer;
    transition: all .16s ease;
}
/* السهم الافتراضيّ لـ<summary> — يظهر في Safari بمُحدِّدٍ آخر */
.user-menu-btn::-webkit-details-marker { display: none; }
.user-menu-btn::marker { content: ''; }

.user-menu-btn:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }
.user-menu[open] > .user-menu-btn { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }
.user-menu-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* النقطة: الرؤية جزئية. تُقرأ بلا نصٍّ وتشغل ثمانية بكسلات */
.user-menu-dot {
    position: absolute;
    inset-block-start: 1px;
    inset-inline-end: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    border: 2px solid #fff;
}

.user-pop {
    position: absolute;
    inset-block-start: calc(100% + .45rem);
    inset-inline-end: 0;
    z-index: var(--z-topbar);
    min-width: 15rem;
    max-width: min(19rem, calc(100vw - 1.6rem));
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: .4rem;
    text-align: start;
}

.user-pop-id, .user-pop-scope {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .55rem;
}
.user-pop-id > i { font-size: 1.5rem; color: var(--brand-600); flex: 0 0 auto; }
.user-pop-scope > i { font-size: 1.05rem; color: var(--slate-400); flex: 0 0 auto; }
.user-pop-id span, .user-pop-scope span { display: flex; flex-direction: column; min-width: 0; }
.user-pop-id b { font-size: .92rem; color: var(--ink-900); }
.user-pop-scope b { font-size: .86rem; color: var(--ink-700); }
.user-pop-id small, .user-pop-scope small {
    font-size: .78rem;
    color: var(--slate-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-pop hr { border: 0; border-top: 1px solid var(--line); margin: .35rem .2rem; }

.user-pop-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .55rem .55rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-700);
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    min-height: 2.4rem;
}
.user-pop-item > i { font-size: 1rem; color: var(--slate-400); flex: 0 0 auto; }
.user-pop-item:hover { background: var(--slate-50); color: var(--ink-900); }
.user-pop-item:hover > i { color: var(--brand-600); }
.user-pop-item.is-danger { color: var(--danger); }
.user-pop-item.is-danger > i { color: var(--danger); }
.user-pop-item.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.icon-btn {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--slate-700);
    display: inline-grid;
    place-items: center;
    font-size: 1.05rem;
    transition: all .16s ease;
}

.icon-btn:hover { border-color: var(--brand-500); color: var(--brand-600); background: var(--brand-50); }
.sidebar-open { display: none; }

/* مبدّل اللغة */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 34px;
    padding-inline: .75rem;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--slate-700);
    font-size: .84rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .16s ease;
}

.lang-switch i { font-size: 1rem; }

.lang-switch:hover {
    border-color: var(--brand-500);
    color: var(--brand-600);
    background: var(--brand-50);
}

.content { flex: 1; padding: 1.4rem 1.3rem 2.4rem; }

.shell-foot {
    border-top: 1px solid var(--line);
    padding: .9rem 1.3rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
    font-size: .82rem;
    color: var(--slate-400);
}

/* --------------------------------------------------------------------------
   البطاقات ومؤشرات الأرقام
   -------------------------------------------------------------------------- */
.card-x {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

.card-x > header {
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}

.card-x > header h2 { font-size: 1rem; margin: 0; }
.card-x > header .spacer { margin-inline-start: auto; }
.card-x > .body { padding: 1.1rem; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(172px, 100%), 1fr));
    gap: .9rem;
    margin-bottom: 1.4rem;
}

.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .95rem 1.1rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.stat .label {
    font-size: .82rem;
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: .4rem;
}

.stat .label i { color: var(--brand-600); }

.stat .value {
    font-family: var(--font-mono);
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--navy-700);
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.stat .hint { font-size: .78rem; color: var(--slate-400); }
.stat.warn .value { color: var(--amber); }
.stat.warn .label i { color: var(--amber); }

/* --------------------------------------------------------------------------
   الجداول
   -------------------------------------------------------------------------- */
.table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

table.dt {
    width: 100%;
    border-collapse: collapse;
    font-size: .89rem;
    font-variant-numeric: tabular-nums;
}

table.dt th, table.dt td {
    padding: .6rem .85rem;
    text-align: start;
    border-bottom: 1px solid var(--slate-100);
    vertical-align: middle;
    white-space: nowrap;
}

table.dt thead th {
    background: var(--slate-50);
    color: var(--slate-700);
    font-weight: 700;
    font-size: .8rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
}

table.dt tbody tr:hover { background: var(--brand-50); }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt td.wrap { white-space: normal; min-width: 240px; }
table.dt td.num { text-align: end; font-family: var(--font-mono); font-size: .84rem; }
table.dt td.mono, table.dt th.mono { font-family: var(--font-mono); font-size: .84rem; }

.muted { color: var(--slate-400); }

/* --------------------------------------------------------------------------
   الشارات
   -------------------------------------------------------------------------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    font-weight: 700;
    padding: .12rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.chip-brand   { background: var(--brand-50);   color: var(--brand-700); border-color: var(--brand-100); }
.chip-slate  { background: var(--slate-100); color: var(--slate-700); border-color: var(--slate-200); }
.chip-amber  { background: var(--amber-soft); color: var(--amber);   border-color: #EBD9BF; }
.chip-danger { background: var(--danger-soft); color: var(--danger); border-color: #F0CFCD; }
.chip-navy   { background: #E7EAEF; color: var(--navy-700); border-color: #D3D9E2; }

/* شريط المجموعة بألوان الكتالوج المطبوع */
.band {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .1rem .6rem;
    border-radius: 4px;
    font-size: .76rem;
    font-weight: 700;
    color: #12181C;
}

.band-base  { background: #6F9FB5; }
.band-wall  { background: #7FB394; }
.band-tall  { background: #D98A73; }
.band-other { background: #B9A96B; }

/* --------------------------------------------------------------------------
   الأدوات والنماذج
   -------------------------------------------------------------------------- */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
}

.toolbar form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.field {
    border: 1px solid var(--line);
    border-radius: 7px;
    padding: .45rem .8rem;
    font-size: .9rem;
    background: #fff;
    color: var(--ink);
    /* ★ `min(160px, 100%)` لا `160px`: الحدّ الأدنى يغلب الأقصى في CSS،
       فحقلٌ حدُّه ١٦٠ داخل مسارٍ عرضه ١١٧ يخرج من الشاشة رغم
       `max-width: 100%` المكتوبة تحته. الصيغةُ تعطي ١٦٠ حين تتّسع
       الحاوية، وعرضَ الحاوية حين لا تتّسع.
       ★ `min(160px, 100%)`, not `160px`: a minimum outranks a maximum in
       CSS, so a 160px-floor field inside a 117px track leaves the screen
       despite the `max-width: 100%` written below it. This gives 160 when
       the container allows and the container's width when it does not. */
    min-width: min(160px, 100%);
    /* عرضُ `select` يأتي من أطول خيارٍ فيه لا من حاويته: اسم فرعٍ طويل
       كان يخرج بالبطاقة كلّها من شاشة الهاتف.
       A `select` is sized by its longest option, not by its container: a
       long branch name pushed the whole card off a phone screen. */
    max-width: 100%;
}

.field:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(224, 83, 61, .13); }

.btn-x {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: .45rem 1rem;
    font-size: .9rem;
    font-weight: 700;
    background: var(--brand-500);
    color: #fff;
    cursor: pointer;
    transition: all .16s ease;
}

.btn-x:hover { background: var(--brand-600); color: #fff; }

.btn-ghost { background: #fff; color: var(--slate-700); border-color: var(--line); }
.btn-ghost:hover { background: var(--slate-50); color: var(--navy-700); border-color: var(--slate-300); }

.pager {
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    font-size: .87rem;
}

.pager a, .pager span {
    padding: .3rem .7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--slate-700);
}

.pager .cur { background: var(--brand-500); border-color: var(--brand-500); color: #fff; font-weight: 700; }
.pager .gap { border: 0; background: none; }

.empty {
    padding: 2.6rem 1rem;
    text-align: center;
    color: var(--slate-400);
}

.empty i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--slate-300); }

/* تنبيه */
.note-box {
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--amber);
    background: var(--amber-soft);
    border-radius: 8px;
    padding: .9rem 1.1rem;
    font-size: .89rem;
    color: var(--slate-700);
    margin-bottom: 1.2rem;
}

.note-box b { color: var(--navy-700); }

/* قائمة تعريف */
.deflist { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1rem; font-size: .9rem; }
.deflist dt { color: var(--slate-500); }
.deflist dd { margin: 0; color: var(--navy-700); font-weight: 500; }

/* --------------------------------------------------------------------------
   شاشة الدخول
   -------------------------------------------------------------------------- */
body.login-page {
    display: grid;
    place-items: center;
    min-height: 100vh;
    background: linear-gradient(160deg, var(--navy-900), var(--navy-700) 60%, #1D3A3C);
    padding: 1.5rem;
}

.login-card {
    width: min(400px, 100%);
    background: #fff;
    border-radius: 14px;
    padding: 2rem 1.9rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.login-card .brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-bottom: 1.5rem;
}

.login-card .brand img { width: 38px; height: 43px; object-fit: contain; }
.login-card .brand b { font-size: 1.1rem; color: var(--navy-700); display: block; }
.login-card .brand b em { font-style: normal; color: var(--brand-500); }
.login-card .brand small { color: var(--slate-400); font-size: .8rem; }

.login-card label { font-size: .87rem; font-weight: 700; color: var(--navy-700); display: block; margin-bottom: .3rem; }
.login-card .field { width: 100%; margin-bottom: .9rem; }
.login-card .btn-x { width: 100%; justify-content: center; padding-block: .6rem; }

.login-error {
    background: var(--danger-soft);
    border: 1px solid #F0CFCD;
    color: var(--danger);
    border-radius: 7px;
    padding: .6rem .9rem;
    font-size: .87rem;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   الاستجابة
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* الانزلاق عبر inset-inline-start لا عبر translateX: خاصية منطقية تعرف
       الاتجاه بنفسها، فلا نحتاج قاعدة RTL منفصلة. القاعدة السابقة
       (html[dir="rtl"] .sidebar) كانت أعلى أولوية من (.sidebar.open) فتغلبها،
       وكان الشريط لا ينفتح في العربية أصلًا.
       Slide with inset-inline-start rather than translateX: a logical property
       knows the direction itself, so no separate RTL rule is needed. The old
       RTL rule outranked .sidebar.open, so the drawer never opened in Arabic. */
    .sidebar {
        inset-inline-start: calc(var(--sidebar-w) * -1);
        transition: inset-inline-start .25s ease;
    }

    .sidebar.open { inset-inline-start: 0; }

    .shell { margin-inline-start: 0; }
    .sidebar-open { display: inline-grid; }
}

@media (max-width: 767.98px) {
    /* الحساب على ٣٢٠ بكسل، وهو أضيق ما يُباع: درج ٣٤ + عنوانٌ يُقصّ
       + قائمة المستخدم ٣٦ + فجوتان ٦ + حاشيتان ١٢٫٨ = ١٠٧ — والباقي
       كلّه للعنوان. كانت الأربعة السابقة تأكل ستّين بالمئة منه.
       The sum at 320px, the narrowest handset sold: drawer 34 + a
       clipping title + user menu 36 + two gaps + two paddings = 107,
       and everything else goes to the title. The four controls this
       replaced ate sixty per cent of it. */
    .topbar { gap: .4rem; padding-inline: .8rem; }
    /* مبدّل المنشأة للمشرف الأعلى: يتقلّص ولا يدفع */
    .sa-switch select { max-width: 8rem; }
}

@media (max-width: 575.98px) {
    .content { padding: 1rem .8rem 2rem; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   الهاتف: أهداف لمس أكبر ومساحة أوضح
   -------------------------------------------------------------------------- */
/* ★ المدى ٩٩١ لا ٧٦٧: الدرج المنزلق — أي التخطيط اللمسيّ — يبدأ عند ٩٩١،
   فكان اللوحيّ ٧٦٨ يأخذ درجًا يُنقر بالإصبع وأزرارًا بمقاس الفأرة ٣٤.
   ★ 991, not 767: the sliding drawer — the touch layout — starts at 991,
   so a 768 tablet got a finger-driven drawer with 34px mouse-sized
   buttons. */
@media (max-width: 991.98px) {
    /* الأصابع تحتاج مساحة أكبر من مؤشّر الفأرة */
    .sidebar .nav-link { padding-block: .7rem; font-size: .97rem; }
    .icon-btn { width: 40px; height: 40px; }
    /* ومبدّل اللغة يبقى مربّعًا حين يُخفى نصّه، لا شريطًا عرضه ١٨ */
    .lang-switch { height: 40px; min-width: 40px; justify-content: center; }
    .btn-x { padding-block: .55rem; }

    .toolbar { gap: .5rem; }
    .toolbar form { width: 100%; }
    .toolbar .field { flex: 1 1 100%; min-width: 0; }
    .toolbar .btn-x { flex: 1 1 auto; justify-content: center; }

    /* الجداول تُمرَّر أفقيًا، فنوضّح ذلك بحافة متدرّجة */
    .table-wrap {
        -webkit-overflow-scrolling: touch;
        background:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
            linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
            linear-gradient(to right, rgba(19,26,38,.10), rgba(19,26,38,0)) left / 10px 100% no-repeat,
            linear-gradient(to left,  rgba(19,26,38,.10), rgba(19,26,38,0)) right / 10px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }

    table.dt th, table.dt td { padding: .55rem .7rem; }

    .shell-foot { justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
    .stat-grid { grid-template-columns: 1fr; }
    .topbar-title { font-size: .96rem; }
}

/* المؤشّر يتكفّل بالسحب على اللمس، فنمنع تمرير الصفحة داخل اللوحة فقط */


/* ==========================================================================
   مكوّنات النظام المتكامل / Full-system components
   أُضيفت مع شاشات البيع والمنيو والطاولات والنماذج.
   ========================================================================== */

/* --------------------------------------------------------- رسائل الحالة */

.flash {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .7rem .95rem;
    border: 1px solid var(--line);
    border-inline-start-width: 4px;
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: .9rem;
    font-size: .92rem;
}
.flash i { font-size: 1.05rem; line-height: 1.5; }
.flash span { flex: 1; }
.flash-x {
    border: 0;
    background: none;
    color: var(--slate-400);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
}
.flash-x:hover { color: var(--ink); }
.flash-success { border-inline-start-color: #2F7D5B; }
.flash-success i { color: #2F7D5B; }
.flash-error { border-inline-start-color: var(--danger); background: var(--danger-soft); }
.flash-error i { color: var(--danger); }
.flash-info { border-inline-start-color: var(--brand-500); }
.flash-info i { color: var(--brand-500); }

/* --------------------------------------------------------------- النماذج */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: .9rem 1rem;
}
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-all { grid-column: 1 / -1; }

.fld { display: flex; flex-direction: column; gap: .3rem; }
.fld > label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--slate-500);
}
.fld .hint {
    font-size: .78rem;
    color: var(--slate-400);
    line-height: 1.5;
}
.fld textarea.field { min-height: 74px; resize: vertical; }

/* مربّع اختيار يُقرأ كسطر لا كحقل / a checkbox that reads as a line */
.fld-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-top: 1.3rem;
}
.fld-check input { width: 17px; height: 17px; accent-color: var(--brand-500); }
.fld-check label { font-size: .88rem; font-weight: 500; color: var(--ink); }

.form-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
}
.form-actions .spacer { margin-inline-start: auto; }

/* --------------------------------------------------------------- الأزرار */

.btn-x.btn-sm { padding: .3rem .6rem; font-size: .8rem; }
.btn-x.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-x.btn-danger:hover { background: #9C3B36; }
.btn-x.btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--slate-500);
}
.btn-x.btn-quiet:hover { background: var(--slate-100); color: var(--ink); }
.btn-x[disabled] { opacity: .5; cursor: not-allowed; }

.row-actions { display: flex; gap: .3rem; justify-content: flex-end; }

/* ------------------------------------------------------ اللوح المنبثق */

.sheet {
    position: fixed;
    inset: 0;
    z-index: var(--z-sheet);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(18, 22, 31, .45);
}
.sheet.open { display: flex; }
.sheet-card {
    width: min(720px, 100%);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}
.sheet-card > header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--line);
    background: #fff;
    border-radius: 14px 14px 0 0;
}
.sheet-card > header h2 { font-size: 1rem; }
.sheet-card > header .spacer { margin-inline-start: auto; }
.sheet-body { padding: 1.1rem; }

/* حقلٌ كبير للمبالغ — الفلوت والدفع والجرد */
.field-lg {
    font-size: 1.35rem !important;
    font-family: var(--font-mono);
    font-weight: 700;
    padding: .5rem .7rem !important;
    text-align: center;
}

/* ------------------------------------------------------------ التبويبات */

.tabs {
    display: flex;
    gap: .2rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.tabs a {
    padding: .55rem .9rem;
    font-size: .89rem;
    font-weight: 600;
    color: var(--slate-500);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--brand-600); border-bottom-color: var(--brand-500); }

/* ------------------------------------------------------------- الطاولات */

.table-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(126px, 100%), 1fr));
    gap: .7rem;
}
.table-card {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem .7rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease;
}
.table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.table-card .no {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--navy-700);
    font-family: var(--font-mono);
    direction: ltr;
}
.table-card .meta { font-size: .77rem; color: var(--slate-400); }
.table-card.is-occupied { border-color: var(--brand-400); background: var(--brand-50); }
.table-card.is-occupied .no { color: var(--brand-700); }
.table-card.is-reserved { border-color: var(--amber); background: var(--amber-soft); }
.table-card.is-disabled { opacity: .5; }

/* مجاميع الفاتورة في صفحة الطلب (`pages/order.php`) — والصندوق له ورقته (`pos.css`) */
.ticket-totals { padding: .7rem .9rem; border-top: 1px solid var(--line); }
.ticket-totals div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .87rem;
    padding: .15rem 0;
}
.ticket-totals div.grand {
    margin-top: .4rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--line);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--navy-700);
}
.ticket-totals .val { font-family: var(--font-mono); direction: ltr; }
.ticket-totals .off { color: var(--danger); }

/* -------------------------------------------------------------- متفرّقات */

.kv-inline { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .84rem; color: var(--slate-500); }
.kv-inline b { color: var(--ink); font-weight: 700; }

.sub-list { margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--slate-500); }
.sub-list li { padding: .1rem 0; }

/* ★ مخزون الطلب: كلُّ صنفٍ مطويٌّ بملخّصه، وجدولُه تحته — طلبٌ طويل لا يصير جدارًا.
   ★ Order stock: each item folds under its summary so a long order is not a wall. */
.chip-ok { background: #E6F3EC; color: #2F7D5B; border-color: #CBE5D6; }
.stk-note { margin: 0 0 .7rem; font-size: .88rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.stk-item { border: 1px solid var(--slate-200); border-radius: 10px; margin-bottom: .45rem; background: #fff; }
.stk-item > summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .55rem .75rem; cursor: pointer; list-style: none; min-height: 2.6rem; }
.stk-item > summary::-webkit-details-marker { display: none; }
.stk-item > summary::after { content: "▾"; margin-inline-start: auto; color: var(--slate-500); transition: transform .15s; }
.stk-item[open] > summary::after { transform: rotate(180deg); }
.stk-item-name { font-weight: 700; flex: 1 1 8rem; min-width: 0; }
.stk-item.stk-total { background: var(--slate-100); margin-top: .8rem; }
.stk-wrap { border-top: 1px solid var(--slate-200); }
.stk-table { width: 100%; border-collapse: collapse; }
.stk-table th, .stk-table td { padding: .4rem .45rem; font-size: .85rem; text-align: start; vertical-align: top; }
/* ★ العنوان والرقم لا ينكسران: «المفرو/ض» على ٣٢٠ تُقرأ عطلًا — والاسمُ وحده يلتفّ */
.stk-table th { font-size: .76rem; color: var(--slate-500); font-weight: 700; background: var(--slate-100); white-space: nowrap; }
.stk-table td { border-top: 1px solid var(--slate-200); }
.stk-table td:first-child { overflow-wrap: break-word; }
.stk-table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stk-todo { color: var(--danger); font-weight: 800; }
.stk-over { color: var(--amber); }
/* عمود المخزون في قائمة الطلبات: الشارةُ رابطٌ إلى قسم المخزون في الطلب */
a.chip { text-decoration: none; }
.ord-main { display: flex; flex-direction: column; gap: .1rem; }
.ord-main small { font-size: .78rem; }
.ord-chips { display: flex; gap: .3rem; flex-wrap: wrap; }
/* شريطُ بحث المخزون لاصقٌ: جدولٌ من مئتَي صفٍّ يُمرَّر والبحثُ لا يغيب */
.stk-bar { position: sticky; inset-block-start: var(--topbar-h); z-index: 5; background: var(--page); padding-block: .5rem; margin-top: .6rem; }

.money-pos { color: #2F7D5B; }
.money-neg { color: var(--danger); }

.dt td.tight, .dt th.tight { width: 1%; white-space: nowrap; }

/* ==========================================================================
   لوح الخيارات — اختيار الحجم والإضافات
   صفوف كاملة العرض بأهداف لمس كبيرة، لا مربّعات نظام صغيرة: الاختيار هنا
   يقع بالإبهام على شاشة كاشير، لا بالفأرة.
   Full-width rows with large touch targets rather than small native boxes:
   this choice is made by thumb on a till screen, not by mouse.
   ========================================================================== */

.sheet-opt {
    width: min(520px, 100%);
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 780px);
}
.sheet-opt > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}
.sheet-opt .sheet-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: .4rem;
}
.sheet-opt > header h2 {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-opt > header small { font-size: .8rem; display: block; direction: ltr; text-align: start; }

/* ------------------------------------------------------------ المجموعة */

.opt-group {
    border: 0;
    padding: 0;
    margin: 0 0 1.15rem;
}
.opt-group:last-of-type { margin-bottom: .6rem; }

.opt-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .45rem;
}
.opt-group-name {
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy-700);
}
.opt-badge {
    margin-inline-start: auto;
    font-size: .71rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--slate-100);
    color: var(--slate-500);
    white-space: nowrap;
}
.opt-badge.is-required { background: var(--brand-50); color: var(--brand-700); }

/* المجموعة الناقصة تُعلَّم عند محاولة الإضافة، لا قبلها: التحذير المسبق ضوضاء */
.opt-group.is-missing .opt-values {
    outline: 2px solid var(--danger);
    outline-offset: 3px;
    border-radius: 11px;
}
.opt-group.is-missing .opt-badge { background: var(--danger-soft); color: var(--danger); }

/* -------------------------------------------------------------- الخيار */

.opt-values {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    font-weight: 500;
    font-size: .91rem;
    transition: border-color .14s ease, background-color .14s ease;
}
.opt:hover { border-color: var(--brand-400); background: var(--brand-50); }
.opt:active { transform: scale(.995); }

/* الحقل الأصلي مخفيّ بصريًا لا وظيفيًا: لوحة المفاتيح وقارئ الشاشة
   يصلانه، والعلامة المرسومة تتبع حالته. */
.opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.opt-mark {
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    border: 2px solid var(--slate-300);
    display: inline-grid;
    place-items: center;
    transition: all .14s ease;
}
.opt input[type="radio"] ~ .opt-mark { border-radius: 50%; }
.opt input[type="checkbox"] ~ .opt-mark { border-radius: 6px; }

.opt-mark::after {
    content: "";
    opacity: 0;
    transition: opacity .14s ease;
}
.opt input[type="radio"] ~ .opt-mark::after {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
}
.opt input[type="checkbox"] ~ .opt-mark::after {
    width: 11px;
    height: 6px;
    border-inline-start: 2px solid #fff;
    border-block-end: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

.opt input:checked ~ .opt-mark {
    border-color: var(--brand-500);
    background: var(--brand-500);
}
.opt input:checked ~ .opt-mark::after { opacity: 1; }

.opt:has(input:checked) {
    border-color: var(--brand-500);
    background: var(--brand-50);
    font-weight: 700;
}
.opt:has(input:focus-visible) { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* الخيار المعطَّل حين يبلغ الحد الأقصى — ظاهر لكن غير قابل للضغط،
   فيفهم الكاشير أنه بلغ الحدّ بدل أن يظنّ الشاشة معطّلة. */
.opt.is-capped { opacity: .42; cursor: not-allowed; }
.opt.is-capped:hover { border-color: var(--line); background: #fff; }

.opt-name { flex: 1; min-width: 0; }
.opt-price {
    font-family: var(--font-mono);
    font-size: .85rem;
    font-weight: 700;
    color: var(--brand-600);
    white-space: nowrap;
}
.opt-price.is-off { color: #2F7D5B; }
.opt-price.is-free { color: var(--slate-400); font-family: var(--font-base); font-weight: 500; }

.opt-foot-fields { padding-top: .3rem; }
.opt-foot-fields label { font-size: .82rem; font-weight: 600; color: var(--slate-500); }

/* -------------------------------------------------- الشريط السفلي الثابت */

.opt-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    border-top: 1px solid var(--line);
    background: var(--slate-50);
    border-radius: 0 0 14px 14px;
    flex-shrink: 0;
}

.qty-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}
.qty-stepper button {
    width: 38px;
    height: 40px;
    border: 0;
    background: none;
    font-size: 1.2rem;
    color: var(--slate-500);
    cursor: pointer;
    line-height: 1;
}
.qty-stepper button:hover { background: var(--slate-100); color: var(--brand-600); }
.qty-stepper input {
    width: 46px;
    height: 40px;
    border: 0;
    border-inline: 1px solid var(--line);
    text-align: center;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink);
    -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.opt-add {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    height: 40px;
    font-size: .95rem;
    font-weight: 700;
}
.opt-add .amt { font-family: var(--font-mono); direction: ltr; }

.opt-error {
    margin: 0;
    padding: .55rem .9rem;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: .85rem;
    font-weight: 600;
    border-radius: 0 0 14px 14px;
}

@media (max-width: 560px) {
    .sheet { padding: 0; align-items: flex-end; }
    .sheet-opt { max-height: 92vh; border-radius: 16px 16px 0 0; }
    .sheet-opt > header { border-radius: 16px 16px 0 0; }
    .opt-bar, .opt-error { border-radius: 0; }
}

/* المتصفّحات بلا :has تُبقي العلامة المرسومة وحدها دليلًا — تعمل، بلا تلوين
   الصف. Browsers without :has keep the drawn mark as the sole indicator. */
@supports not selector(:has(*)) {
    .opt input:checked ~ .opt-name { font-weight: 700; color: var(--brand-700); }
}

/* شريط الفرع على شاشات المنيو والإضافات — السؤال «أي فرع؟» يبقى ظاهرًا */
.branch-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .55rem .9rem;
    margin-bottom: .9rem;
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: 10px;
    font-size: .9rem;
}
.branch-bar > i { color: var(--brand-600); font-size: 1.05rem; }
.branch-bar .field { height: 32px; padding-block: 0; font-weight: 700; width: auto; }
.branch-bar strong { color: var(--brand-700); }
.branch-bar-note {
    margin-inline-start: auto;
    font-size: .79rem;
    color: var(--slate-500);
}
@media (max-width: 720px) { .branch-bar-note { display: none; } }

/* ساعات العمل — سبعة صفوف تُقرأ عمودًا واحدًا */
.hours-grid { display: flex; flex-direction: column; gap: .4rem; max-width: 420px; }
.hours-row { display: flex; align-items: center; gap: .5rem; }
.hours-day { flex: 0 0 5.5rem; font-size: .87rem; font-weight: 600; color: var(--slate-500); }
.hours-row .field { flex: 1; min-width: 0; padding-block: .3rem; }

/* شاشة المطبخ — بطاقات تُقرأ من بعيد */
/* ---------------------------------------------------------------
   لوحة المطبخ / The kitchen board

   أربعة مساراتٍ متجاورة تُقرأ من مترين. عرض المسار ثابتٌ لا مرن: مسارٌ
   يتّسع لأن فيه طلبًا واحدًا يجعل الشاشة تتراقص مع كل قبولٍ ورفض، والعين
   تفقد المكان الذي حفظته.
   Four side-by-side lanes readable from two metres. The lane width is fixed,
   not fluid: a lane that widens because it holds one order makes the screen
   dance on every accept, and the eye loses the place it had memorised.
   --------------------------------------------------------------- */

.kds-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7rem;
    align-items: start;
}

@media (max-width: 1100px) { .kds-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .kds-board { grid-template-columns: 1fr; } }

.kds-lane {
    background: var(--slate-50, #f7f7f5);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .55rem;
    min-height: 6rem;
}

.kds-lane-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .15rem .3rem .5rem;
}

.kds-lane-head h2 { font-size: .88rem; font-weight: 800; margin: 0; flex: 1; min-width: 0; }

.kds-lane-head em {
    font-style: normal;
    font-size: .78rem;
    font-weight: 800;
    min-width: 1.4rem;
    text-align: center;
    padding: .05rem .4rem;
    border-radius: 99px;
    background: rgba(0, 0, 0, .07);
}

.kds-lane-dot { width: .6rem; height: .6rem; border-radius: 50%; flex-shrink: 0; }
.kds-lane.is-placed    .kds-lane-dot { background: var(--danger); }
.kds-lane.is-accepted  .kds-lane-dot { background: var(--amber); }
.kds-lane.is-preparing .kds-lane-dot { background: var(--navy-600); }
.kds-lane.is-ready     .kds-lane-dot { background: #2F7D5B; }

/* المسار الأول يحمل ما لم يُنظر إليه بعد، فيُعلَّم — والباقي يهدأ */
.kds-lane.is-placed { background: #fdf1f1; border-color: #f0cfcf; }

.kds-lane-body { display: flex; flex-direction: column; gap: .55rem; }
.kds-lane-empty { text-align: center; color: var(--slate-400); margin: .6rem 0; font-size: 1.1rem; }

/* ★ البطاقة المتأخّرة تنبض: لونٌ ثابت يُعتاد ويُهمَل بعد نصف ساعة في
   الذروة، والحركة لا تُعتاد. وتُطفأ لمن يطلب تقليل الحركة.
   ★ A late card pulses: a static colour is learned and then ignored after
   half an hour of rush; motion is not. Off for reduced-motion. */
.kds-card.is-late { border-inline-start-color: var(--danger); animation: kdsLate 2s ease-in-out infinite; }

@keyframes kdsLate {
    0%, 100% { box-shadow: 0 0 0 0 rgba(190, 60, 60, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(190, 60, 60, .18); }
}

@media (prefers-reduced-motion: reduce) {
    .kds-card.is-late { animation: none; outline: 2px solid var(--danger); }
}

.kds-late-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 800;
    color: #fff;
    background: var(--danger);
    padding: .15rem .55rem;
    border-radius: 99px;
    margin-inline-start: .5rem;
}

/* ★ أزرار المطبخ أكبر من أزرار اللوحة: تُضغط بإبهامٍ مبلَّل أو بظهر
   المفصل، ٤٤ بكسل هو الحدّ الذي دونه تُخطئ الضغطة.
   ★ Kitchen buttons are larger than console buttons: they are pressed with a
   wet thumb or a knuckle, and 44px is where taps start to miss. */
.kds-card > footer .btn-x { min-height: 2.5rem; padding-inline: .8rem; font-size: .88rem; }
.kds-card {
    display: flex; flex-direction: column; gap: .5rem;
    background: #fff; border: 1px solid var(--line); border-inline-start-width: 4px;
    border-radius: 12px; padding: .85rem 1rem; box-shadow: var(--shadow-sm);
}
.kds-card.is-placed    { border-inline-start-color: var(--danger); }
.kds-card.is-accepted  { border-inline-start-color: var(--amber); }
.kds-card.is-preparing { border-inline-start-color: var(--navy-600); }
.kds-card.is-ready     { border-inline-start-color: #2F7D5B; }
.kds-card > header { display: flex; align-items: center; gap: .5rem; }
.kds-card > header strong { font-size: 1rem; }
.kds-age { margin-inline-start: auto; font-size: .8rem; font-weight: 700; color: var(--slate-400); font-family: var(--font-mono); }
.kds-age.is-late { color: var(--danger); }
.kds-meta { font-size: .82rem; color: var(--slate-500); margin: 0; }
.kds-items { list-style: none; margin: 0; padding: .4rem 0; border-block: 1px solid var(--slate-100); }
.kds-items li { padding: .22rem 0; font-size: .93rem; }
.kds-items b { color: var(--brand-600); }
.kds-opts, .kds-note { display: block; font-size: .78rem; color: var(--slate-400); }
.kds-note { color: var(--amber); margin: 0; }
.kds-card > footer { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.kds-total { margin-inline-end: auto; font-weight: 800; }

/* مفاتيح API */
.keybox { border-color: var(--brand-500); }
.keybox-warn {
    background: var(--amber-soft); border: 1px solid #E8D4AE; color: #8A5A1E;
    padding: .55rem .8rem; border-radius: 9px; font-size: .85rem; margin: 0 0 .7rem;
}
.keybox-key {
    display: block; background: var(--navy-900); color: #7FE0B0; padding: .8rem 1rem;
    border-radius: 10px; font-family: var(--font-mono); font-size: .95rem;
    word-break: break-all; direction: ltr; margin-bottom: .6rem; user-select: all;
}
.ep-list { display: flex; flex-direction: column; gap: .4rem; }
.ep { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .88rem; }
.ep .verb {
    background: var(--navy-700); color: #fff; font-size: .7rem; font-weight: 800;
    padding: .1rem .45rem; border-radius: 5px;
}
.ep code { direction: ltr; }
.ep .desc { color: var(--slate-500); font-size: .82rem; }
.ep-sample {
    display: inline-block; background: var(--slate-100); padding: .4rem .7rem;
    border-radius: 7px; direction: ltr; font-family: var(--font-mono); font-size: .84rem;
}

/* ================================================================
   حقول الصور ومعاينة نتيجة البحث
   ================================================================ */

/* ★ `min(19rem, 100%)` لا `19rem` — وهي القاعدة في كل شبكات `auto-fit`
   و`auto-fill` في هذا الملف. المسار الأدنى للمسار ثابتٌ لا يتقلّص: شبكةٌ
   حدُّها ١٩rem تبقى ٣٠٤ بكسلًا داخل بطاقةٍ عرضها ٢٦٢ على هاتف ٣٢٠، فتخرج
   من الشاشة. و`min(…, 100%)` تسمح للمسار بالنزول إلى عرض حاويته حين لا
   يتّسع، وتتصرّف كما هي فوق ذلك.
   ★ `min(19rem, 100%)`, not `19rem` — the rule for every `auto-fit` and
   `auto-fill` grid in this file. A track minimum is a floor that does not
   yield: a 19rem grid stays 304px inside a 262px card on a 320px phone and
   leaves the screen. `min(…, 100%)` lets the track fall to its container's
   width when there is no room, and behaves unchanged above that. */
.imgf-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.imgf > label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: .4rem; }
.imgf-row { display: flex; gap: .8rem; align-items: flex-start; }

/* المعاينة بالحجم الذي ستُرى به: أيقونةٌ تُعرض كبيرةً هنا تُخدع من يرفعها */
.imgf-preview {
    flex: 0 0 auto; display: grid; place-items: center; overflow: hidden;
    border: 1px dashed var(--line); border-radius: 10px; background: #FAFAFA;
}
.imgf-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.imgf-preview.is-empty i { font-size: 1.4rem; color: #C8CDD6; }
.imgf-preview.logo    { width: 5.5rem; height: 3.6rem; }
.imgf-preview.favicon { width: 3.2rem; height: 3.2rem; border-radius: 8px; }
.imgf-preview.cover   { width: 6.4rem; height: 3.6rem; }
.imgf-preview.og      { width: 6.4rem; height: 3.4rem; }
.imgf-preview.cover img, .imgf-preview.og img { object-fit: cover; }

.imgf-side { flex: 1 1 auto; min-width: 0; }
.imgf-side input[type="file"] { font-size: .82rem; padding: .35rem; }
.imgf-remove { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .8rem; color: var(--danger, #B4453F); cursor: pointer; }

/* بطاقة نتيجة البحث — تُحاكي شكل جوجل بما يكفي لتُقاس عليه الأطوال */
.serp { margin: 1.2rem 0 .4rem; }
.serp-label { display: block; font-size: .78rem; font-weight: 700; color: var(--muted, #6B7280); margin-bottom: .4rem; }
.serp-card {
    max-width: 38rem; padding: .8rem 1rem; border: 1px solid var(--line);
    border-radius: 10px; background: #fff;
}
.serp-url   { display: block; font-size: .78rem; color: #4D5156; margin-bottom: .1rem; }
.serp-title { display: block; font-size: 1.05rem; color: #1A0DAB; line-height: 1.4; }
.serp-desc  { display: block; font-size: .84rem; color: #4D5156; line-height: 1.6; margin-top: .2rem; }
/* التجاوز يُقصّ بصريًا كما يقصّه المحرّك، ولا يُمنع في الحقل */
.serp-title, .serp-desc { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; }
.serp-title { -webkit-line-clamp: 1; }
.serp-desc  { -webkit-line-clamp: 2; }
.serp-over  { color: var(--danger, #B4453F) !important; }

.rule { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }

/* ================================================================
   شاشة نقاط QR
   شاشةٌ يقف أمامها موظّف واقفًا بين طلبين: أرقامٌ كبيرة تُقرأ من مسافة،
   ورمزٌ كبير يُصوَّر بهاتفٍ من نصف متر.
   ================================================================ */

/* شريط الطابعة الحرارية على شاشة النقاط */
.qr-print { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: .7rem; }
.qr-print-state {
    margin: .45rem 0 0;
    text-align: center;
    font-size: .8rem;
    color: var(--ink-500);
    min-height: 1.2em;
}
.qr-print-state.is-on { color: #1f6b3a; font-weight: 700; }
.qr-print-state.is-bad { color: var(--danger); }

.qr-screen { display: grid; gap: 1rem; grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: start; }
@media (max-width: 60rem) { .qr-screen { grid-template-columns: 1fr; } }

.qr-panel { margin: 0; }
.qr-form { display: grid; gap: .8rem; }

/* حقل المبلغ: أكبر ما على الشاشة، فهو الشيء الوحيد الذي يُكتب */
.qr-amount { position: relative; }
.qr-amount input {
    width: 100%; font-size: 2.4rem; font-weight: 800; text-align: center;
    padding: .7rem 3.5rem .7rem 1rem; letter-spacing: .02em;
    font-family: ui-monospace, Menlo, monospace;
}
.qr-cur {
    position: absolute; inset-inline-end: 1rem; top: 50%; transform: translateY(-50%);
    font-size: .9rem; font-weight: 700; color: var(--muted, #6B7280); pointer-events: none;
}
.qr-ref { font-size: .9rem; }
.qr-hint { font-size: .8rem; color: var(--muted, #6B7280); margin: 0; text-align: center; }
.btn-lg { padding: .9rem 1.4rem; font-size: 1.05rem; width: 100%; justify-content: center; }

.qr-display .body { display: grid; place-items: center; min-height: 24rem; }

.qr-idle { text-align: center; color: var(--muted, #6B7280); }
.qr-idle > i { font-size: 3.4rem; color: var(--line); display: block; margin-bottom: .6rem; }
.qr-idle p { margin: 0 0 1rem; font-size: .95rem; }

.qr-live { text-align: center; display: grid; gap: .7rem; justify-items: center; }
.qr-live-amount { font-size: 2rem; font-weight: 800; margin: 0; font-family: ui-monospace, Menlo, monospace; }
.qr-live-amount small { font-size: .9rem; font-weight: 600; color: var(--muted, #6B7280); }

/* الرمز أبيض على أبيض بحافّة هادئة: الهاتف يقرؤه أسرع بلا زخرفة حوله */
.qr-code {
    background: #fff; padding: .8rem; border-radius: 14px; border: 1px solid var(--line);
    line-height: 0;
}
/* ★ ٢٦٠ بكسل لا ٢٤٠: الرمز من ٤١ وحدة (إصدار ٤ بهامشه)، فـ٢٤٠ تعطي
   ٥٫٨ بكسل للوحدة — وهو الحدّ الذي يبدأ عنده المسح يفشل من بُعد ذراع أو
   خلف انعكاسٍ على الشاشة. و٢٦٠ تعطي ٦٫٣، وهي فرقٌ يُقاس بالمحاولات.
   ★ 260px, not 240: a 41-module code (version 4 with its quiet zone) at 240
   gives 5.8px per module — the width at which scanning starts failing at
   arm's length or behind a reflection. 260 gives 6.3, and the difference is
   measured in retries. */
/* ★ ٢٠rem (٣٢٠بك): الرمز من ٤٥ وحدة على الأكثر، فـ٢٦٠بك تعطي ٥٫٨ بكسل
   للوحدة و٣٢٠ تعطي ٧٫١. والفرق يُقاس بعدد المحاولات: هذه الشاشة تُقلَب
   نحو زبونٍ يمسحها من نصف متر خلف انعكاسٍ على الزجاج، لا من قريب.
   ★ 320px: at most 45 modules, so 260 gives 5.8px per module and 320 gives
   7.1. The difference is measured in retries — this screen is turned toward a
   customer scanning from half a metre behind a reflection. */
.qr-code svg { width: min(20rem, 76vw); height: auto; display: block; }

.qr-short { margin: 0; font-size: .9rem; color: var(--muted, #6B7280); }
.qr-short b {
    font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem; letter-spacing: .18em;
    color: var(--ink, #1F2739); margin-inline-start: .4rem;
}
.qr-expect { margin: 0; font-size: .92rem; font-weight: 700; color: var(--brand-600, #B8402C); }
.qr-countdown { margin: 0; font-size: .85rem; color: var(--muted, #6B7280); font-variant-numeric: tabular-nums; }
.qr-countdown.is-soon { color: var(--danger, #B4453F); font-weight: 700; }
.qr-cancel { margin: 0; }

/* لحظة النجاح: تُقرأ من بعيد فلا يسأل الموظّف العميلَ «صار معك؟» */
.qr-done { text-align: center; display: grid; gap: .5rem; justify-items: center; }
.qr-done > i { font-size: 3.6rem; color: #2F7D5B; }
.qr-done-points { font-size: 3rem; font-weight: 800; margin: 0; line-height: 1; color: #2F7D5B; }
.qr-done-points small { font-size: 1rem; font-weight: 600; color: var(--muted, #6B7280); }
.qr-done-who { margin: 0 0 .6rem; font-size: 1rem; }
.qr-done-who span { display: block; font-size: .85rem; color: var(--muted, #6B7280); font-family: ui-monospace, Menlo, monospace; }

.chip-warn { background: #FFF3DC; color: #8A6410; }

/* وضعا شاشة الرموز: إضافةٌ وحسم */
.qr-modes { display:flex; gap:.4rem; margin-bottom:1rem; }
.qr-mode {
    flex:1; display:flex; align-items:center; justify-content:center; gap:.4rem;
    padding:.7rem 1rem; border:1px solid var(--line); border-radius:12px;
    background:#fff; color:var(--muted,#6B7280); font-weight:700; font-size:.92rem;
    text-decoration:none; transition:background .15s, color .15s, border-color .15s;
}
.qr-mode:hover { border-color:var(--brand-500,#E0533D); color:var(--brand-600,#B8402C); }
.qr-mode.on { background:var(--brand-500,#E0533D); border-color:var(--brand-500,#E0533D); color:#fff; }
.qr-done-sub { margin:0 0 .6rem; font-size:.9rem; color:var(--muted,#6B7280); }

/* ================================================================
   شاشة الدخول — تصويبان ظهرا في اللقطة
   ================================================================ */

/* ★ مبدّل اللغة كان بين حقل كلمة المرور وزرّ الدخول، فيقطع مسار العين
   في منتصف النموذج. مكانه أسفل البطاقة: خيارٌ يُتَّخذ مرة، لا خطوةٌ في
   تسلسل الدخول.
   ★ The language switch sat between the password field and the sign-in
   button, cutting the eye's path through the middle of the form. It belongs
   under the card: a choice made once, not a step in signing in. */
.login-card .lang-switch {
    order: 99;
    margin: var(--sp-4) auto 0;
    background: transparent;
    border: 0;
    color: var(--muted, #6B7280);
    font-size: .85rem;
}
.login-card form { display: flex; flex-direction: column; }
.login-card .fld, .login-card .form-actions, .login-card button[type="submit"] { order: 1; }

/* حلقة التركيز البرتقالية على حقلٍ فارغ تُقرأ كخطأ. الحلّ حلقةٌ خارجية
   خفيفة بدل حدٍّ ملوّن يشبه حدّ الخطأ.
   An orange ring on an empty field reads as an error. A soft outer ring
   instead of a coloured border that looks like the error border. */
.login-card .field:focus,
.login-card .field:focus-visible {
    border-color: var(--line);
    outline: 3px solid color-mix(in srgb, var(--brand-500, #E0533D) 22%, transparent);
    outline-offset: 0;
}

/* ---------------------------------------------------------------
   الصلاحيات / Permissions
   --------------------------------------------------------------- */

.perm-tabs { display: flex; gap: .3rem; margin-bottom: .5rem; flex-wrap: wrap; }

.perm-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-600);
    font-size: .9rem;
    font-weight: 600;
    min-height: 2.4rem;
}

.perm-tab:hover { border-color: var(--brand-400); color: var(--ink-900); }
.perm-tab.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.perm-hint { margin: .1rem 0 1rem; font-size: .86rem; color: var(--ink-500); }

/* عمودان: القائمة ثابتة والنموذج يتمدّد. وعلى الضيّق تُكدَّس، فالقائمة
   أوّلًا لأن الاختيار يسبق التحرير. */
.perm-layout {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* هدفٌ واحدٌ لا يُختار: تبويب المنشأة يعرض النموذج بعرض الشاشة */
.perm-layout.is-single { grid-template-columns: minmax(0, 1fr); }

/* `minmax(0, 1fr)` لا `1fr`: أدنى مسارٍ ضمنيّ هو `auto`، أي عرض المحتوى —
   فقائمةٌ منسدلة باسم فرعٍ طويل توسّع العمود ٣٥٢ بكسلًا داخل شاشة ٣٢٠.
   `minmax(0, 1fr)`, not `1fr`: a track's implicit minimum is `auto`, i.e.
   its content's width — so a select holding a long branch name widens the
   column to 352px inside a 320px screen. */
@media (max-width: 820px) { .perm-layout { grid-template-columns: minmax(0, 1fr); } }

.perm-list { display: flex; flex-direction: column; gap: .4rem; }
.perm-search { position: relative; display: block; }
.perm-search > i {
    position: absolute;
    inset-inline-start: .7rem;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--ink-500);
    font-size: .9rem;
    pointer-events: none;
}
.perm-search .field { width: 100%; padding-inline-start: 2.1rem; }

/* ★ القائمة تُمرَّر داخل نفسها لا مع الصفحة: منشأةٌ بأربعين موظّفًا كانت
   تدفع النموذج أربعين صفًّا لأسفل، فيُفتح المستخدم ثم يُبحث عن الميزات.
   ★ The list scrolls inside itself, not with the page: a merchant with forty
   employees pushed the form forty rows down, so one picked a user and then
   went looking for the features. */
.perm-list-items {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    max-height: 28rem;
    overflow-y: auto;
    padding-inline-end: .15rem;
}

.perm-nomatch { margin: .4rem 0 0; font-size: .85rem; color: var(--ink-500); text-align: center; }

.perm-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-700);
    font-size: .89rem;
    min-height: 2.5rem;
}

.perm-item:hover { border-color: var(--brand-400); }
.perm-item.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.perm-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.perm-item-off, .perm-item-all {
    flex-shrink: 0;
    font-size: .72rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 99px;
    font-family: var(--font-mono, inherit);
}

.perm-item-off { background: #fdecec; color: #a12c2c; }
.perm-item-all { background: #eaf6ee; color: #1f6b3a; }
.perm-item.active .perm-item-off, .perm-item.active .perm-item-all { background: rgba(255,255,255,.16); color: #fff; }

.perm-tally { font-size: .85rem; color: var(--ink-500); }
.perm-tally b { font-size: 1rem; color: var(--ink-900); font-family: var(--font-mono, inherit); }

.perm-group { border: 0; padding: 0; margin: 0 0 1.3rem; }

/* ★ الزرّان داخل <legend> بتدفّقٍ عاديّ. أوّل صياغةٍ وضعتهما بـ`position:
   absolute` داخل <fieldset> مُموضَعة، فخرج عرضُ شبكة البطاقات **صفرًا**
   في المجموعتين اللتين فيهما زرّان — دون غيرهما — فبدت الوحدات شرائط
   بعرض ٢٧ بكسلًا. <fieldset> يرسم محتواه في صندوقٍ مجهول، وموضعةُ أبنائه
   إطلاقًا تصيب حسابَ مقاسه.
   ★ Both buttons live inside the <legend>, in normal flow. The first
   version placed them `position: absolute` inside a positioned
   <fieldset>, and the card grid came out **zero** wide in exactly the
   two groups that had buttons, rendering the modules as 27px slivers.
   A <fieldset> lays its contents out in an anonymous box, and absolutely
   positioning its children disturbs that box's sizing. */
.perm-group legend {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    font-size: .74rem;
    letter-spacing: .05em;
    font-weight: 800;
    color: var(--ink-500);
    padding: 0 0 .45rem;
}

.perm-group legend > span { margin-inline-end: auto; }

.perm-group-all {
    background: none;
    border: 1px solid var(--line);
    border-radius: 99px;
    padding: .2rem .55rem;
    font-size: .74rem;
    font-weight: 700;
    color: var(--ink-500);
    cursor: pointer;
}
.perm-group-all:hover { border-color: var(--brand-400); color: var(--brand-600); }

/* ★ شبكةٌ لا قائمة: تسع وحداتٍ صفًّا صفًّا بعرض الشاشة تترك ثلثي كل سطر
   فارغًا وتدفع زرّ الحفظ خلف تمريرة.
   ★ A grid, not a list: nine modules stacked full-width leave two thirds of
   every row empty and push Save past a scroll. */
.perm-cards {
    /* `auto-fill` لا `auto-fit`: الأخيرة تطوي المسارات الفارغة فتمدّ وحدةً
       وحيدةً في مجموعتها على ١١١٣ بكسلًا، فتبدو أهمَّ من جاراتها بلا سبب.
       `auto-fill`, not `auto-fit`: the latter collapses empty tracks and
       stretches a group's lone module across 1113px, making it look more
       important than its neighbours for no reason. */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: .45rem;
}

.perm-row {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.perm-row:hover { border-color: var(--brand-400); }
.perm-row.is-on { border-color: var(--brand-200, #f3cfc6); background: var(--brand-50); }

/* ★ مفتاحُ تبديلٍ مرسومٌ من مربّع الاختيار نفسه: يبقى العنصر `checkbox`
   فيُرسل في النموذج ويعمل بلوحة المفاتيح وبقارئ الشاشة كما هو، ويُقرأ من
   بعيدٍ بموضع المقبض لا بعلامةٍ بحجم ظفر.
   ★ A switch drawn from the checkbox itself: it stays a `checkbox`, so it
   posts, tabs and reads to a screen reader unchanged, while its state is
   legible across a room from the knob's position rather than a nail-sized
   tick. */
.perm-switch {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    margin-top: .12rem;
    width: 2.3rem;
    height: 1.3rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: var(--slate-100, #eceef2);
    position: relative;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
.perm-switch::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: .16rem;
    transform: translateY(-50%);
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: inset-inline-start .16s ease;
}
.perm-switch:checked { background: var(--brand-500); border-color: var(--brand-500); }
.perm-switch:checked::after { inset-inline-start: calc(100% - 1.11rem); }
.perm-switch:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.perm-switch:disabled { cursor: not-allowed; opacity: .5; }

.perm-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.perm-row-text b { font-size: .92rem; font-weight: 700; color: var(--ink-900); }
.perm-row-text small { font-size: .8rem; color: var(--ink-500); }

.perm-row-pages {
    flex-shrink: 0;
    font-size: .72rem;
    color: var(--ink-500);
    background: var(--paper-2, #f5f4f1);
    border-radius: 99px;
    padding: .12rem .5rem;
    align-self: center;
    white-space: nowrap;
}

/* ★ الممنوعة من المنشأة تُعرض باهتةً لا مخفيّة: من يبحث عن ميزةٍ ولا يجدها
   يظنّها غير موجودة في النظام، ويسأل عنها من لا يملك جوابًا.
   ★ Merchant-denied features show dimmed rather than hidden: whoever looks
   for one and cannot find it concludes the system has no such thing. */
.perm-row.is-locked { opacity: .58; cursor: not-allowed; background: repeating-linear-gradient(
    135deg, transparent, transparent 6px, rgba(0,0,0,.02) 6px, rgba(0,0,0,.02) 12px); }
.perm-row.is-locked:hover { border-color: var(--line); }

.perm-row-why {
    font-style: normal;
    font-size: .76rem;
    font-weight: 700;
    color: #a12c2c;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .15rem;
}

/* ★ لاصقٌ في أسفل النموذج: الحفظ يجب أن يكون تحت الإبهام لا خلف تمريرة */
.perm-actions {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    padding: .8rem 1.1rem;
    border-top: 1px solid var(--line);
    background: #fff;
    border-radius: 0 0 var(--radius, 12px) var(--radius, 12px);
    z-index: 2;
}

.perm-dirty {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--brand-600);
}

/* ---------------------------------------------------------------
   شريط المدد / The range bar
   --------------------------------------------------------------- */

.range-bar {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.range-chip {
    padding: .32rem .8rem;
    border-radius: 99px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-600);
    font-size: .85rem;
    font-weight: 600;
}

.range-chip:hover { border-color: var(--brand-400); color: var(--ink-900); }
.range-chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.range-chip.is-clear { border-style: dashed; }

.range-note {
    margin-inline-start: auto;
    font-size: .8rem;
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* ---------------------------------------------------------------
   ★ جدولٌ يصير بطاقات / A table that becomes cards

   الجدول العريض على هاتفٍ يُمرَّر أفقيًّا، فتُقرأ أعمدته الأولى ويُنسى ما
   بعدها — والأعمدة المنسيّة هي عادةً الإجمالي والوقت. البطاقة تُبقي كل
   قيمةٍ ملتصقةً باسمها.
   A wide table on a phone scrolls sideways: the first columns get read and
   the rest forgotten — and the forgotten ones are usually the total and the
   time. A card keeps every value beside its own name.
   --------------------------------------------------------------- */

/* مخفيٌّ عن العين، حاضرٌ لقارئ الشاشة ولمولّد البطاقات.
   `display: none` يحذفه من الشجرة أيضًا، وهذا ما لا نريد.
   Hidden from the eye, present to a screen reader and to the card
   builder. `display: none` would remove it from the tree as well. */
.u-vh {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .dt-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .dt-cards, .dt-cards tbody, .dt-cards tr, .dt-cards td { display: block; width: 100%; }

    .dt-cards tr {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: .5rem .7rem;
        margin-bottom: .55rem;
        background: var(--paper);
    }

    .dt-cards td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .8rem;
        padding: .28rem 0;
        border: 0;
        text-align: start;
        /* بريدٌ أو اسمُ مستخدمٍ بلا مسافةٍ لا ينكسر من نفسه، فيوسّع البطاقة
           ويُعيد التمرير الأفقيّ الذي جاءت البطاقة لتمنعه.
           An email or username with no space will not break on its own; it
           widens the card and brings back the sideways scroll the card was
           meant to end. */
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .dt-cards td + td { border-top: 1px dashed var(--line); }

    .dt-cards td::before {
        content: attr(data-th);
        flex: 0 0 auto;
        font-size: .74rem;
        font-weight: 700;
        color: var(--ink-500);
    }

    /* الخلية الفارغة تختفي: صفٌّ يقول «الكاشير —» يشغل مكانًا بلا خبر */
    .dt-cards td:empty { display: none; }

    /* وعمودُ الإجراءات عنوانُه فارغٌ عمدًا، فلا يُترك له عمودُ عنوانٍ خاوٍ
       يُقرأ فجوةً في البطاقة. An actions column has a deliberately empty
       heading, so it is not given an empty label column that reads as a
       gap in the card. */
    .dt-cards td[data-th=""]::before { display: none; }
}

/* ---------------------------------------------------------------
   بطاقة الطاولة / The table card

   الرقم أوّلًا وأكبر: من يقف على الباب يبحث عن «١٢» لا عن حالتها. والحالة
   لونٌ لا كلمة — تُقرأ الصالة كلّها بنظرةٍ واحدة بدل تسع كلمات.
   The number first and largest: whoever stands at the door is looking for
   "12", not for its status. Status is colour rather than a word, so the whole
   floor reads in one glance instead of nine words.
   --------------------------------------------------------------- */

.tc-top { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.tc-seats { font-size: .76rem; color: var(--ink-500); flex-shrink: 0; }

.tc-bill {
    margin-top: .35rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.tc-bill-amt { font-size: 1rem; font-weight: 800; font-family: var(--font-mono); }
.tc-bill-sub { font-size: .74rem; color: var(--ink-500); }
.tc-bill-sub b.is-long { color: var(--danger); }
.tc-bill.is-empty .tc-bill-sub { color: var(--amber); }

.tc-actions { margin-top: .4rem; justify-content: flex-start; flex-wrap: wrap; gap: .25rem; }

/* ★ الجالس أكثر من ساعةٍ ونصف يُعلَّم بحافّة: هو إمّا زبونٌ يحتاج الفاتورة
   أو طاولةٌ نسيها أحدهم مفتوحة — وكلاهما يستحقّ نظرة.
   ★ Seated over ninety minutes gets an edge: either a guest waiting for the
   bill or a table somebody left open — both worth a look. */
.table-card.is-long { box-shadow: inset 0 0 0 2px rgba(190, 60, 60, .35); }

/* ---------------------------------------------------------------
   بناء النموذج ورسائله / The form builder and its inbox
   --------------------------------------------------------------- */

.ffield {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .55rem;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: .35rem;
}

.ffield-kind {
    flex-shrink: 0;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 99px;
    background: var(--paper-2, #f5f4f1);
    color: var(--ink-600);
}

.ffield-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ffield-label b { font-size: .9rem; }
.ffield-label small { font-size: .7rem; color: var(--ink-500); }
.ffield .btn-x.is-on { color: var(--brand-600); }

.ffield-add {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px dashed var(--line);
}

.entry-list { display: flex; flex-direction: column; gap: .6rem; }

.entry {
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
    padding: .7rem .9rem;
}

/* غير المقروءة تُميَّز بحافّةٍ ونقطة لا بخلفيةٍ كاملة: عشرون رسالةً جديدة
   بخلفيةٍ ملوّنة تجعل الشاشة كلّها لونًا واحدًا فلا يبرز شيء.
   Unread is marked by an edge and a dot, not a filled background: twenty new
   messages tinted whole make the screen one colour and nothing stands out. */
.entry.is-new { border-inline-start: 3px solid var(--brand-500); }
.entry-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand-500); flex-shrink: 0; }

.entry > header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.entry > header time { margin-inline-start: auto; font-size: .78rem; }

.entry-body {
    display: grid;
    grid-template-columns: minmax(5rem, 10rem) 1fr;
    gap: .2rem .8rem;
    margin: .5rem 0 0;
    font-size: .88rem;
}

@media (max-width: 520px) { .entry-body { grid-template-columns: 1fr; gap: 0 0; } }

.entry-body dt { color: var(--ink-500); font-size: .8rem; }
.entry-body dd { margin: 0 0 .25rem; }

/* تنبيه جهاز التطوير على شاشة الرمز */
.qr-devnote {
    margin: .6rem auto 0;
    max-width: 22rem;
    font-size: .78rem;
    line-height: 1.6;
    color: #8a5a00;
    background: #fff6e5;
    border: 1px solid #f0d9a8;
    border-radius: 8px;
    padding: .5rem .7rem;
}

.qr-devnote a { display: block; margin-top: .25rem; word-break: break-all; font-size: .74rem; }

/* ---------------------------------------------------------------
   مسار الطلب / The order's journey

   خطٌّ أفقيّ لا قائمة: المسار زمنٌ، والزمن يُقرأ على خطّ. والمرحلة الحالية
   تُعلَّم بنبضةٍ لا بلونٍ وحده — من ينظر يبحث عن «أين هو الآن؟» لا عن قائمة.
   A horizontal line, not a list: a journey is time, and time reads along a
   line. The current stage pulses rather than merely tinting, because the
   question being asked is "where is it now?".
   --------------------------------------------------------------- */

.oflow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0;
    overflow-x: auto;
}

.oflow li {
    flex: 1;
    min-width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    position: relative;
    padding-top: 1.1rem;
    text-align: center;
}

/* الخطّ الواصل يُرسم من النقطة إلى جارتها، ولا يخرج من الطرفين */
.oflow li::before {
    content: '';
    position: absolute;
    top: .42rem;
    inset-inline: 50% -50%;
    height: 2px;
    background: var(--line);
}

.oflow li:last-child::before { display: none; }
.oflow li.is-done::before { background: var(--brand-500); }

.oflow-dot {
    position: absolute;
    top: 0;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid var(--line);
    z-index: 1;
}

.oflow li.is-done .oflow-dot { background: var(--brand-500); border-color: var(--brand-500); }

.oflow li.is-now .oflow-dot {
    box-shadow: 0 0 0 4px rgba(180, 85, 47, .2);
    animation: oflowNow 1.8s ease-in-out infinite;
}

@keyframes oflowNow {
    0%, 100% { box-shadow: 0 0 0 3px rgba(180, 85, 47, .18); }
    50%      { box-shadow: 0 0 0 7px rgba(180, 85, 47, .08); }
}

@media (prefers-reduced-motion: reduce) { .oflow li.is-now .oflow-dot { animation: none; } }

.oflow-name { font-size: .78rem; font-weight: 700; color: var(--ink-500); }
.oflow li.is-done .oflow-name { color: var(--ink-900); }
.oflow-at { font-size: .72rem; color: var(--ink-500); font-family: var(--font-mono); }

.oflow-actions {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

/* شارة الطلبات المنتظِرة في القائمة */
.nav-badge {
    font-style: normal;
    font-size: .68rem;
    font-weight: 800;
    min-width: 1.15rem;
    text-align: center;
    padding: .05rem .35rem;
    border-radius: 99px;
    background: var(--danger);
    color: #fff;
    margin-inline-start: auto;
}

.sidebar .nav-link { position: relative; }

/* ★ صندوقٌ تحذيريّ: يُستعمل حين يكون الإعداد مُطفأً بما يُضعف الحماية —
   واللون هنا ليس زينة، هو ما يجعل من يفتح الشاشة بعد شهرٍ يرى أن شيئًا
   مقصودًا قد أُطفئ. A warning box: the colour is not decoration — it is what
   shows whoever opens the screen a month later that something was
   deliberately switched off. */
.note-box.is-warn {
    background: #fff6e5;
    border-color: #f0c98a;
    color: #7a4a00;
}

.note-box.is-warn b { color: #8a3d00; }

/* أيقونة واتساب في الجداول: لونها هو ما يجعلها تُرى بين عشرين صفًّا */
/* `flex: 0 0 auto` لأن الخليّة في وضع البطاقات صندوقُ flex: ضابطٌ أيقونيّ
   عرضُه ١٫٩rem يقبل الانكماش إلى محتواه — وهو صفرٌ لأيقونةٍ بلا نصّ.
   The card-mode cell is a flex box, and a 1.9rem icon control will shrink
   to its content — which is zero for an icon with no text. */
.wa-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 7px;
    font-size: 1.05rem;
    color: #25D366;
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.wa-link:hover { background: #25D3661a; border-color: #25D36655; }

/* --------------------------------------------------------------------------
   الهاتف: تجاوزات تأتي بعد المكوّنات / Phone overrides, after the components

   ★ موضعُ هذه الكتلة جزءٌ من صحّتها. كانت أوّل صياغةٍ لها في قسم الاستجابة
   أعلى الملف — قبل تعريف `.form-grid` — وأولويّتهما واحدة، فالمتأخّر يغلب:
   طُبِّق تعريفُ سطح المكتب على الهاتف وبقيت العلّة كما هي والقاعدة مكتوبة.
   ★ Where this block sits is part of whether it works. The first version
   lived in the responsive section near the top — before `.form-grid` is
   defined — and with equal specificity the later rule wins: the desktop
   definition applied on phones and the fault stood with the fix written.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    /* ★ `span 2` داخل شبكةٍ انهارت إلى عمودٍ واحد **يخلق عمودًا ثانيًا**
       ضمنيًّا خارج الشاشة: حقلٌ عرضه ٤٦٩ على هاتف ٣٩٠. لا يكشفه فحصُ HTML
       ولا قراءةُ الـCSS — `auto-fit` يبدو كافيًا وحده.
       ★ `span 2` inside a grid that has collapsed to one column creates a
       second, implicit column off-screen: a 469px field on a 390px phone.
       Neither the HTML nor reading the CSS shows it; `auto-fit` looks
       sufficient on its own. */
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-grid .span-2, .form-grid .span-all { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   اللمس والقراءة على الأجهزة الصغيرة / Touch and legibility on small screens
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* ★ الزرّ الأيقونيّ في صفوف الجداول — تعديلٌ وحذفٌ وإظهار — كان ٢١×١٢:
       هدفٌ لا يُصاب بإبهام، وهو أكثر ما يُنقر في اللوحة. حشوةُ الفأرة لا
       تصلح للإصبع، والفارق أن الكاشير يعمل على لوحيّ لا على حاسوب.
       ★ The icon buttons in table rows — edit, delete, show — measured 21x12:
       a target no thumb hits, and the most-clicked control in the console.
       Mouse padding does not serve a finger, and the cashier works on a
       tablet, not a desktop. */
    .btn-x { min-height: 2.25rem; }
    .btn-x.btn-sm { min-height: 2.25rem; min-width: 2.25rem; justify-content: center; }

    /* ورابطُ الخليّة يُنقر بالإصبع أيضًا: رقم الطلب، واسم العضو، والهاتف.
       والجداول صنفان — `.tbl` و`.dt` — وقاعدةٌ لأحدهما تترك نصف الشاشات.
       Cell links are tapped too. There are two table classes, `.tbl` and
       `.dt`; a rule for one leaves half the screens untouched. */
    /* الحشوة وحدها توسّع هدف اللمس، وصندوقُ الرابط السطريّ يشملها. أوّل
       صياغةٍ أضافت `display: inline-block` أيضًا، فأطاحت بـ`inline-flex`
       لضابطٍ أيقونيّ في الجدول وانكمش إلى بكسلين.
       Padding alone widens the tap target and an inline link's box includes
       it. The first version also set `display: inline-block`, which
       overrode `inline-flex` on an icon control in the table and shrank it
       to two pixels. */
    .tbl a, .dt a { padding-block: .45rem; }
    .empty a, .note-box a { display: inline-block; padding-block: .3rem; }
    a.chip { min-height: 1.9rem; }

    /* مربّع الاختيار يُصاب بالإصبع لا بالمؤشّر، وهدفُه الحقيقيّ عنوانُه —
       فيُعطى العنوانُ ارتفاعًا يُنقر. `:has` تغني عن صنفٍ يُضاف في عشرين موضعًا.
       A checkbox is hit by a finger, and its real target is its label, so the
       label gets a height worth tapping. `:has` spares adding a class in
       twenty places. */
    input[type="checkbox"], input[type="radio"] { width: 1.4rem; height: 1.4rem; }
    label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
        display: flex;
        align-items: center;
        min-height: 2rem;
    }
    /* والعنوان المرتبط بـ«for» ليس أبًا للمربّع فلا تبلغه القاعدة أعلاه */
    .fld-check label { display: flex; align-items: center; min-height: 2rem; }

    /* ورقمُ الهاتف على لوح المطبخ يُتّصل به بالإبهام أثناء العمل */
    a[href^="tel:"] { display: inline-block; padding-block: .3rem; }

    /* ★ لا نصّ تحت ١٢ بكسلًا على شاشةٍ تُقرأ على بُعد ذراع. القيم أدناه
       مقصودةٌ على الحاسوب — تُخفّف الثانويّ — وعلى الهاتف تصير غير مقروءة.
       ★ Nothing below 12px on a screen read at arm's length. The values are
       deliberate on a desktop, where they play down the secondary; on a phone
       they stop being readable. */
    small, .hint,
    .sidebar-brand small, .nav-group, .nav-sec-count, .nav-sec-caret, .nav-badge,
    .opt-badge, .ep .verb, .perm-item-off, .perm-item-all,
    .perm-group legend, .perm-row-pages, .perm-row-text small, .dt-cards td::before,
    .tc-bill-sub, .ffield-kind, .ffield-label small, .qr-devnote a, .oflow-at {
        font-size: .75rem;
    }
}
/* --------------------------------------------------------------------------
   منطقة الخطر / The danger zone

   ★ تُقرأ خطرًا قبل أن تُقرأ نصًّا: حدٌّ أحمر وأرضيّةٌ فاتحة. وهي في آخر الشاشة
   لا في أوّلها — من جاء ليعدّل شعار الفرع لا يمرّ عليها.
   ★ It reads as danger before it reads as text: a red edge on a pale ground.
   And it sits at the end of the screen, not the start — whoever came to change
   a logo does not pass through it.
   -------------------------------------------------------------------------- */
.danger-zone { border-color: #ecc9c7; }
.danger-zone > header { background: var(--danger-soft); border-bottom-color: #ecc9c7; }
.danger-zone > header h2 { color: var(--danger); }

.dz-what { margin: 0 0 .8rem; font-size: .9rem; color: var(--ink-700); }

/* التصفير: مدّةٌ ونطاقات — كلُّ نطاقٍ صفٌّ يُلمس، وأعدادُه بجواره */
.dz-dates { display: grid; gap: .6rem; align-items: end; grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr)); margin-bottom: .7rem; }
.dz-dates .hint { align-self: center; }
.dz-scopes { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .4rem; }
.dz-scopes li {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem;
    padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: #fff;
}
.dz-scopes li.is-on { border-color: var(--danger); background: var(--danger-soft); }
.dz-scopes li.is-zero .dz-s-nums { opacity: .5; }
.dz-scopes label { display: flex; align-items: flex-start; gap: .55rem; flex: 1 1 16rem; min-width: 0; margin: 0; cursor: pointer; min-height: 2rem; }
.dz-scopes label input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--danger); }
.dz-scopes label > i { flex: 0 0 auto; color: var(--danger); margin-top: .15rem; }
.dz-s-text { display: flex; flex-direction: column; min-width: 0; }
.dz-s-text small { color: var(--slate-500); font-size: .8rem; line-height: 1.5; }
.dz-s-nums { display: flex; flex-wrap: wrap; gap: .2rem .8rem; font-size: .84rem; color: var(--ink-700); }
.dz-s-nums b { font-family: var(--font-mono); }
.dz-sum { margin: 0 0 .7rem; font-size: .9rem; }
/* الاختيار تغيّر والمعاينةُ في الطريق: الأرقامُ القديمة تبهت فلا تُقرأ حكمًا */
.dz-form[data-dirty] .dz-confirm { opacity: .45; }
.dz-form .form-actions { margin-bottom: .9rem; }

.dz-keep {
    margin: 0 0 .9rem;
    padding: .6rem .7rem;
    border-radius: 8px;
    background: var(--slate-50);
    font-size: .84rem;
    color: var(--ink-600);
    line-height: 1.6;
}
.dz-keep > i { color: var(--brand-600); }

.dz-empty { margin: 0; font-size: .9rem; color: #1f6b3a; font-weight: 600; }
.dz-empty > i { margin-inline-end: .3rem; }

.dz-confirm > label { display: block; font-size: .86rem; font-weight: 700; margin-bottom: .35rem; }
.dz-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.dz-row .field { flex: 1 1 12rem; min-width: 0; }
.dz-form .hint { display: block; margin-top: .45rem; }

.btn-x.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-x.btn-danger:hover { background: #9d3a35; border-color: #9d3a35; }
/* ★ المعطّل يبدو معطّلًا: زرٌّ أحمر لا يعمل يُنقر مرّاتٍ ثمّ يُظنّ النظام معطوبًا */
.btn-x.btn-danger[disabled] { background: var(--slate-200); border-color: var(--slate-200);
                              color: var(--slate-500); cursor: not-allowed; }

/* منتقي مقاس الورق — بجوار أزرار وصل الطابعة */
.paper-pick { display: inline-flex; align-items: center; gap: .35rem; }
.paper-pick > i { color: var(--ink-500); }
/* ★ حشوةٌ أضيق من صفٍّ عاديّ لأن الشريط ضيّق — لكن ليس دون حدّ اللمس.
   أوّل صياغةٍ أعطته ٢٨ بكسلًا ارتفاعًا، وهو قائمةٌ منسدلة تُفتح بالإصبع
   على لوحيّ الكاشير. Tighter than an ordinary row because the bar is
   narrow — but not below the touch floor. The first version gave it 28
   pixels, and it is a dropdown opened by a finger on the till tablet. */
.paper-pick .field { padding-block: .3rem; font-size: .84rem; min-width: 5.5rem; min-height: 2rem; }
.qr-print-state.is-warn { color: var(--amber); font-weight: 700; }

/* ------------------------------------------- ترشيح المواد / Ingredient filter
 |  ★ العدد داخل التبويب لا بجواره: «نفدت ٣» قرارٌ يُتّخذ من نظرةٍ واحدة،
 |  و«نفدت» وحدها تحتاج نقرةً لتُعرف أفارغةٌ هي أم لا — والنقرةُ تُعيد
 |  تحميل الصفحة لتقول «لا شيء».
 |  ★ The count sits inside the tab, not beside it: "Out 3" is a decision made
 |  at a glance, while "Out" alone needs a click to learn whether it is empty
 |  — and that click reloads the page to say "nothing". */
.ing-tabs { margin-inline-end: auto; margin-bottom: 0; border-bottom: 0; }
.tab-n {
    display: inline-block; min-width: 1.35rem; padding: 0 .32rem;
    margin-inline-start: .25rem;
    /* ★ ٠٫٧٥rem = ١٢ بكسلًا بالضبط، وهو الحدّ الأدنى للقراءة على الهاتف
       (القاعدة ١٤). كانت ٠٫٧٤ فخرجت ١١٫٨٤ — فرقٌ لا تراه العين في
       الملف ويراه من يقرأ رقمًا صغيرًا على شاشةٍ صغيرة.
       ★ 0.75rem is exactly 12px, the phone legibility floor (rule 14). It
       was 0.74, which renders 11.84 — a difference invisible in the file
       and visible to whoever reads a small number on a small screen. */
    font-size: .75rem; font-weight: 700; line-height: 1.35rem; text-align: center;
    color: var(--slate-500); background: var(--slate-100, #f1f2f4);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.tabs a.active .tab-n { color: #fff; background: var(--brand-500); }

/* ------------------------------------------- حقل البحث في شريط الأدوات
 |  ★ يأخذ ما بقي من العرض ولا يزيد: حقلٌ بعرضٍ ثابت يترك الشريط نصفه
 |  فارغًا على الحاسوب، وحقلٌ ينمو بلا حدٍّ يدفع زرّ «جديد» خارج الصفّ.
 |  ★ Takes the remaining width and no more: a fixed-width box leaves half the
 |  bar empty on a desktop, and one that grows unbounded pushes the "New"
 |  button out of the row.
 |
 |  ★ و`min-width: min(…, 100%)` لا `min-width` وحدها — القاعدة ١٤: الحدّ
 |  الأدنى يغلب `max-width: 100%` المكتوبة تحته، فيخرج الحقل من مسارٍ أضيق
 |  منه على هاتف ٣٢٠.
 |  ★ And `min-width: min(…, 100%)`, not a bare `min-width` — rule 14: the
 |  minimum beats a `max-width: 100%` written below it, and the field escapes a
 |  track narrower than itself on a 320px phone. */
.toolbar-find { flex: 1 1 16rem; min-width: min(16rem, 100%); }
.toolbar-find .field {
    flex: 1 1 auto;
    min-width: min(11rem, 100%);
}
/* ما لا يجوز ضغطه: زرّ العدسة وزرّ الإلغاء — القاعدة ١٤ */
.toolbar-find .btn-x { flex: 0 0 auto; }

/* ═══════════════════════════════════════════════════════════════
 |  شجرة الصلاحيات: وحدة ← شاشات ← أفعال
 |  The permission tree: module → screens → actions
 |
 |  ★ الوحدة صفٌّ كامل العرض لا بطاقةٌ في شبكة: صار تحتها تفصيلٌ يُفتح،
 |  وفتحُ بطاقةٍ في عمودٍ من ثلاثة يدفع جاراتها ويعيد ترتيب الشبكة تحت
 |  إصبع القارئ. والصفّ الكامل يفتح تحت نفسه ولا يزيح شيئًا.
 |  ★ A module is a full-width row, not a card in a grid: it now carries an
 |  expanding detail, and opening one card in a three-column grid shoves its
 |  neighbours and reflows under the reader's finger. A full-width row opens
 |  beneath itself and displaces nothing.
 ═══════════════════════════════════════════════════════════════ */
.perm-cards:has(.perm-mod) { grid-template-columns: minmax(0, 1fr); }

.perm-mod {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    transition: border-color .15s ease, background-color .15s ease;
}
.perm-mod .perm-row { border: 0; background: none; border-radius: 10px; }
.perm-mod.is-on   { border-color: var(--brand-200, #f3cfc6); background: var(--brand-50); }
.perm-mod.is-open { border-color: var(--brand-400); }
.perm-mod.is-locked { opacity: .62; }

/* ★ زرّ الطيّ هدفٌ للإصبع لا أيقونةُ فأرة: ثلاثون بكسلًا حدًّا أدنى
   (القاعدة ١٤)، وهو داخل `<label>` فيجب أن يمنع قلبَ المفتاح بنفسه. */
.perm-expand {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; min-height: 32px;
    border: 1px solid transparent; border-radius: 8px;
    background: none; color: var(--slate-500); cursor: pointer;
    transition: transform .15s ease, background-color .15s ease;
}
.perm-expand:hover { background: var(--slate-100, #f1f2f4); color: var(--ink); }
.perm-expand[aria-expanded="true"] { transform: rotate(180deg); }

.perm-detail {
    padding: .2rem .8rem .8rem;
    border-top: 1px dashed var(--line);
    margin-top: -.2rem;
}
/* 🚨 ★ وحدةٌ مُطفأة: ما تحتها باهتٌ ومعه سطرٌ يقول لماذا. تتبع `is-on` التي
   يرسمها الخادم ويحدّثها السكربت — فتعمل بلا سكربت.
   ★ A module that is off: its children fade and a line says why. */
.perm-off-note {
    display: none;
    margin: .7rem 0 0; padding: .45rem .6rem;
    border: 1px solid var(--amber, #c98a1b); border-radius: 8px;
    font-size: .8rem; line-height: 1.5; color: var(--ink);
}
.perm-mod:not(.is-on) .perm-off-note { display: block; }
.perm-mod:not(.is-on) .perm-sub { opacity: .55; }
.perm-sub + .perm-sub { margin-top: .9rem; }
.perm-sub h4 {
    display: flex; align-items: center; gap: .4rem;
    margin: .7rem 0 .5rem;
    font-size: .8rem; font-weight: 700; color: var(--slate-500);
}
.perm-sub-all { display: flex; gap: .3rem; margin-inline-start: auto; }
.perm-sub-all button {
    min-height: 30px; padding: 0 .55rem;
    font: inherit; font-size: .74rem; font-weight: 600;
    color: var(--slate-500); background: none;
    border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.perm-sub-all button:hover { color: var(--brand-600); border-color: var(--brand-400); }

/* ── الشاشات: رقائق، لأنها أسماءٌ قصيرة كثيرة ── */
.perm-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.perm-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 32px; padding: .25rem .6rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); cursor: pointer;
    font-size: .82rem;
}
.perm-chip.is-on { border-color: var(--brand-400); background: var(--brand-50); color: var(--brand-600); }
.perm-chip input { width: 15px; height: 15px; accent-color: var(--brand-500); }
/* ★ المفتاح البرمجيّ للشاشة يبقى ظاهرًا: من يقرأ سجلّ التدقيق أو يكتب
   عنوانًا يبحث عن `form_entries` لا عن «رسائل النموذج». */
.perm-chip code {
    font-size: .68rem; color: var(--slate-500); opacity: .75;
    font-variant-numeric: tabular-nums;
}
.perm-chip.is-on code { color: var(--brand-600); opacity: .85; }

/* ── الأفعال: صفوفٌ بشرحٍ تحتها، لأن كلًّا منها قرار ── */
.perm-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: .4rem; }
@media (min-width: 40rem) {
    .perm-acts { grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
}
.perm-act {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--paper); cursor: pointer;
}
.perm-act.is-on { border-color: var(--amber, #b54708); background: #fff8ec; }
.perm-act-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.perm-act-text b { font-size: .86rem; font-weight: 600; }
.perm-act-text small { font-size: .76rem; color: var(--slate-500); line-height: 1.45; }

/* ★ القسم الحسّاس يُميَّز بلونٍ آخر: «افتح شاشة» و«ألغِ بيعًا» لا يُقرآن
   بالوزن نفسه، ومن يمرّ على الشاشة مسرعًا يجب أن تتوقّف عينه هنا. */
.perm-sub.is-actions h4 { color: var(--amber, #b54708); }

.perm-tally { display: flex; flex-wrap: wrap; gap: .1rem .7rem; font-size: .8rem; }
.perm-tally b { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------- العبوات / Packs
 |  ★ شارةُ عددٍ على زرّ العبوات: من يفتح شاشة المواد يريد أن يعرف **أيّ**
 |  مادّةٍ عُرّفت عبواتُها وأيّها لم تُعرَّف بعد — بلا فتح كلٍّ منها.
 |  ★ A count on the packs button: whoever opens the ingredients screen wants
 |  to see which ingredients have packs defined and which do not, without
 |  opening each one. */
.pack-n {
    display: inline-block; min-width: 1.1rem; padding: 0 .25rem;
    margin-inline-start: .2rem;
    font-size: .68rem; font-weight: 700; line-height: 1.1rem; text-align: center;
    color: #fff; background: var(--brand-500); border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

/* ★ اللوح المفتوح من الرابط: `is-open` يفتحه من الخادم قبل أي سكربت، فمن
   أطفأ JS يرى المحرّر كاملًا — وهو شاشةٌ لها عنوان لا نافذةٌ منبثقة.
   ★ Opened from the URL by the server before any script runs, so with JS off
   the editor is fully visible — it is an addressed screen, not a popup. */
.sheet.is-open { display: flex; }

/* ---------------------------------------------- الوردية والدرج / Shift & drawer
 |  ★ الرقم أوّلًا وبحجمٍ يُقرأ من بعيد: من يفتح الشاشة آخر يومه جاء لرقمٍ
 |  يعدّ عليه، لا لتقريرٍ يقرؤه. وتفصيلُ كيف بلغه تحته لا فوقه.
 |  ★ The figure first and large: whoever opens this at close of day came for
 |  a number to count against, not a report. The breakdown sits beneath it. */
.shift-hero {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    padding: 1.4rem 1rem;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--brand-50); margin-bottom: .9rem;
    text-align: center;
}
.shift-hero-label { font-size: .84rem; color: var(--slate-500); }
.shift-hero-num {
    font-size: clamp(1.9rem, 7vw, 2.7rem); font-weight: 800; line-height: 1.1;
    color: var(--brand-700); font-variant-numeric: tabular-nums;
}
.shift-hero-num small { font-size: .42em; font-weight: 600; color: var(--slate-500); }

.shift-lines { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.shift-line {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--line); border-radius: 9px; background: var(--paper);
    font-size: .88rem;
}
.shift-line i { color: var(--slate-400); }
.shift-line strong { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.shift-line strong.is-out { color: var(--danger); }

/* ★ عمودان على الحاسوب وعمودٌ على الهاتف — والقاعدة ١٤: `minmax(0,1fr)` هو
   ما ينزل تحت عرض محتواه، و`1fr` وحده لا ينزل. */
.shift-actions {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

/* ---------------------------------------------- سند المخزون / Stock voucher
 |  ★ أربعة سنداتٍ مطويّة لا أربعة نماذج مفتوحة: كلٌّ منها صار جدولًا بأسطر،
 |  وأربعةُ جداول مفتوحةً معًا شاشةٌ لا تُقرأ. والأوّل مفتوحٌ لأن الاستلام هو
 |  أكثر ما يُفعل.
 |  ★ Four collapsed vouchers, not four open forms: each is now a table of
 |  lines, and four open at once is a screen nobody reads. The first is open
 |  because receiving is what happens most. */
/* ★ `minmax(0, 1fr)` لا عمودًا ضمنيًّا: العمود التلقائيّ `auto` لا ينزل
 |  تحت أوسع محتوى فيه، فبطاقةُ السند خرجت ٣١٥ في مسارٍ عرضه ٢٩٤ — أي
 |  ثمانيةَ بكسلاتٍ خارج شاشة ٣٢٠، إلى **يسار** الصفحة في RTL حيث لا
 |  يراها من يقرأ. ولا يظهر ذلك على مخزنٍ فارغ: الكتلة كلُّها لا تُرسم
 |  بلا موادّ (القاعدة ١٤).
 |  ★ `minmax(0, 1fr)`, not an implicit track: an `auto` column will not go
 |  below its widest content, so the voucher card came out 315 in a 294
 |  track — eight pixels off a 320 screen, to the *left* in RTL where the
 |  reader never looks. Invisible on an empty store: the whole block is not
 |  rendered without ingredients. */
.doc-forms { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
.doc-card { padding: 0; }
.doc-card > summary {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .85rem 1rem; cursor: pointer; list-style: none;
}
.doc-card > summary::-webkit-details-marker { display: none; }
.doc-card > summary b { font-size: .95rem; }
.doc-card > summary small { color: var(--slate-500); font-size: .8rem; }
.doc-card[open] > summary { border-bottom: 1px solid var(--line); }
.doc-card > .body { padding-top: .9rem; }

/* ★ أعمدة السند لا تُضغط تحت حدّها: `min-width` على الخليّة لا على الحقل،
   والغلاف يُمرَّر أفقيًّا على الهاتف كبقيّة الجداول (القاعدة ١٤). */
.doc-lines td { padding: .3rem .35rem; }
.doc-lines td:first-child { min-width: 11rem; }
.doc-lines td .field { min-width: min(6.5rem, 100%); }

/* ---------------------------------------------- محطّات اللوح / Board stations
 |  ★ روابطُ لا قائمةٌ منسدلة: اللوح يُفتح على جهازٍ لمسيّ في مطبخ، والانتقال
 |  ضغطةٌ واحدة لا فتحُ قائمةٍ واختيار. والهدف يسع الإبهام (القاعدة ١٤).
 |  ★ Links, not a dropdown: the board runs on a touch device in a kitchen, and
 |  switching is one tap. The target fits a thumb (rule 14). */
.kds-stations { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.kds-st {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 34px; padding: 0 .7rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--slate-500);
    font-size: .85rem; font-weight: 600; text-decoration: none;
}
.kds-st:hover { border-color: var(--brand-400); color: var(--ink); }
.kds-st.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.kds-st-n {
    min-width: 1.25rem; padding: 0 .3rem;
    font-size: .75rem; font-weight: 700; line-height: 1.25rem; text-align: center;
    background: var(--slate-100, #edf1f5); color: var(--ink); border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.kds-st.is-on .kds-st-n { background: rgba(255, 255, 255, .28); color: #fff; }

/* إدارة المحطّات: مطويّةٌ في آخر اللوح — تُفتح مرّةً كل بضعة أشهر */
.kds-admin { margin-top: 1.4rem; padding: 0; }
.kds-admin > summary {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    padding: .85rem 1rem; cursor: pointer; list-style: none;
    color: var(--slate-500);
}
.kds-admin > summary::-webkit-details-marker { display: none; }
.kds-admin > summary b { color: var(--ink); font-size: .95rem; }
.kds-admin > summary small { font-size: .8rem; }
.kds-admin[open] > summary { border-bottom: 1px solid var(--line); }

/* ★ شارةُ الوصول: تُرى في مطبخٍ صاخب لا يُسمع فيه الصوت، ومن كتمه يبقى يرى.
   وثابتةٌ فوق كل شيء لأن اللوح يُقرأ من بعيد، ونابضةٌ حتى تُقرّ فلا تُهمَل.
   ★ Stays and pulses until acknowledged: a badge that fades in four seconds is
   missed by whoever glanced away. Tapping it silences the alarm. */
.kds-ding {
    position: fixed; inset-block-start: 1rem; inset-inline-start: 50%;
    transform: translateX(50%);
    z-index: 90;
    display: flex; align-items: center; gap: .6rem;
    padding: .85rem 1.4rem;
    background: var(--danger, #d64550); color: #fff;
    font-size: 1.15rem; font-weight: 800;
    border-radius: 999px; box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    cursor: pointer; user-select: none;
    animation: kds-ding-pulse 1s ease-in-out infinite;
    transition: opacity .3s ease, transform .3s ease;
}
.kds-ding i { font-size: 1.3rem; }
.kds-ding .kds-ding-ok {
    margin-inline-start: .3rem; padding: .2rem .7rem;
    background: rgba(255, 255, 255, .22); border-radius: 999px;
    font-size: .85rem; font-weight: 700;
}
.kds-ding.is-out { opacity: 0; transform: translateX(50%) translateY(-8px); animation: none; }
@keyframes kds-ding-pulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, .22), 0 0 0 0 rgba(214, 69, 80, .55); }
    50%      { box-shadow: 0 6px 24px rgba(0, 0, 0, .22), 0 0 0 12px rgba(214, 69, 80, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .kds-ding { transition: none; animation: none; }
}

/* ═══════════ جدول أقساط السلفة ═══════════
 |  ★ الجدول رقائقُ في سطرٍ لا جدولٌ داخل جدول: صفٌّ فرعيّ يحمل <table>
 |  يرث `dt-cards` على الهاتف فينهار إلى بطاقاتٍ داخل بطاقة، ويخرج ركامًا.
 |  والرقائق تلتفّ وحدها وتُقرأ بالعرضين.
 |  ★ Chips in a row, not a table inside a table: a nested <table> inherits
 |  `dt-cards` on a phone and collapses into cards inside a card. Chips wrap
 |  on their own and read at either width. */
.row-sub > td { padding-block: .2rem .6rem; background: var(--slate-50); }
/* ★ وثلاثون بكسلًا ارتفاعًا: خرج ٩٦×٢٠ فأمسكه فحصُ اللمس — والمطويّ
 |  الذي يُنقر بالإصبع أولى بالحدّ من غيره (القاعدة ١٤).
 |  ★ 30px tall: it came out 96x20 and the touch check caught it. */
.row-sub summary {
    display: inline-flex; align-items: center; gap: .35rem;
    min-height: 30px; padding-inline: .2rem;
    cursor: pointer; list-style: none;
    font-size: .75rem; font-weight: 600; color: var(--brand-600);
}
.row-sub summary::-webkit-details-marker { display: none; }
.row-sub summary::before { content: "\F229"; font-family: bootstrap-icons; font-weight: 400; }
.row-sub details[open] summary::before { content: "\F235"; }
.sched { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .5rem; }
.sched-i {
    display: flex; align-items: baseline; gap: .3rem;
    padding: .28rem .55rem; font-size: .75rem;
    border: 1px solid var(--slate-200); border-radius: .5rem; background: #fff;
    font-variant-numeric: tabular-nums;
}
/* ★ الواقع يختلف عن المتوقّع بلونٍ لا بترتيب: من قرأ الجدول يريد أن يعرف
 |  أين هو الآن منه، والترتيب وحده لا يقوله.
 |  ★ Past differs from projected by colour, not order: the reader wants to
 |  know where in the schedule they stand, and order alone does not say. */
.sched-i.is-paid { border-color: var(--brand-400); background: var(--brand-50); }
.sched-i.is-paid b { color: var(--brand-700); }
.sched-i b { font-weight: 700; }
.sched-i small { font-size: .75rem; }

/* ═══════════ صفّ «لا شيء بعد» ═══════════
 |  ★ كان حشوةً سطريّة (`style="padding:2rem"`) في تسع شاشات — والسطريّة تغلب
 |  ورقة الأنماط، فتبقى أربعةُ سنتيمترات من الحشوة قائمةً في صيغة البطاقات
 |  على هاتفٍ عرضُه ٣٦٢، ويعود التمرير الأفقيّ الذي جاءت البطاقةُ لتمنعه.
 |  ولا يظهر هذا إلا حين يكون الجدول فارغًا **وفيه رأس** — أي على قاعدةٍ فيها
 |  موظّفٌ بلا كشف، لا على قاعدةٍ خالية.
 |  ★ It was an inline `padding: 2rem` across nine screens — and inline wins
 |  over the stylesheet, so four centimetres of padding survived into card mode
 |  on a 362px phone and brought back the very sideways scroll cards exist to
 |  prevent. It shows only when the table is empty *and* has a head. */
.row-none { text-align: center; padding: 2rem; }
/* ★ وليس خليّةً في بطاقة: `.dt-cards td` مرنةٌ بفجوةٍ ٠٫٨rem وعنوانٍ
 |  زائفٍ يبقى صندوقًا ولو كانت `data-th` غائبة — فتُضاف ١٢٫٨ بكسلًا إلى
 |  سطرٍ لا عنوان له أصلًا، وهي وحدها ما جعل ٣٦٥ تتجاوز ٣٦٢.
 |  ★ Not a cell in a card: `.dt-cards td` is a flex box with a .8rem gap
 |  and a pseudo label that stays a box even with no `data-th` — 12.8px
 |  added to a line that has no label, and that alone put 365 past 362. */
@media (max-width: 640px) {
    .dt-cards .row-none { display: block; padding: 1.4rem .6rem; }
    .dt-cards .row-none::before { content: none; }
}

/* ═══════════ رمز موقع الفرع ═══════════
 |  ★ الرمز وما يشرحه جنبًا إلى جنب على الشاشة العريضة، وينهار إلى عمودٍ على
 |  الهاتف — والرمز أوّلًا في الحالتين، لأنه ما جاء القارئ لأجله.
 |  ★ The code and its explanation sit side by side on a wide screen and
 |  collapse to one column on a phone — the code first in both, since it is
 |  what the reader came for.
 |
 |  ★ و`minmax(min(…), 1fr)` لا `auto`: العمود `auto` لا ينزل تحت أوسع
 |  محتواه، وعنوانٌ طويل بلا مسافات يدفع البطاقة خارج شاشة ٣٢٠ (القاعدة ١٤).
 |  ★ `minmax(min(…), 1fr)`, never `auto`: an `auto` column will not go below
 |  its widest content, and a long address with no spaces pushes the card off
 |  a 320px screen. */
.site-qr {
    display: grid;
    grid-template-columns: auto minmax(min(16rem, 100%), 1fr);
    gap: 1.1rem;
    align-items: start;
}
.site-qr-code {
    flex: 0 0 auto;
    padding: .55rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .6rem;
    line-height: 0;
}
/* 🚨 ★ ١٨rem لا ١٠٫٥: الرمز حتى ٤٥ وحدةً بهامشه (رابطُ نطاقٍ طويل)، و١٦٨
 |  بكسلًا تعطي ٣٫٧ للوحدة — والمسح يبدأ يفشل دون ٦ (القاعدة ١٢-ج). و٢٨٨
 |  تعطي ٦٫٤ في أسوأ حالة و٧٫٨ في المعتاد. قِيس بـ`qrMatrix()` على ثلاثة
 |  روابط فرعٍ حقيقية، ولم يُقدَّر.
 |  🚨 ★ 18rem, not 10.5: the code runs to 45 modules with its quiet zone (a
 |  long domain), and 168px gives 3.7px per module — scanning starts to fail
 |  below 6. 288px gives 6.4 at worst and 7.8 typically. Measured with
 |  `qrMatrix()` on three real branch links, not guessed. */
.site-qr-code svg { display: block; width: min(18rem, 76vw); height: auto; }
.site-qr-side { min-width: 0; }

/* ★ العنوان يُكسر عند أي محرف: رابطٌ بلا مسافات لا ينكسر من نفسه فيوسّع
 |  العمود ويعيد التمرير الأفقيّ الذي جاءت الشبكة لتمنعه.
 |  ★ The address breaks anywhere: a link with no spaces will not wrap on its
 |  own, widening the column and bringing back the sideways scroll. */
.site-qr-url {
    display: block;
    padding: .4rem .55rem;
    font-size: .8rem;
    background: var(--slate-50);
    border: 1px solid var(--line);
    border-radius: .45rem;
    overflow-wrap: anywhere;
}
.site-qr-acts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }

/* ★ وعلى الهاتف عمودٌ واحد: عمودُ الرمز `auto` يبقى ١٨rem، فلا يترك للشرح
 |  إلا ما دونه — والشبكة تنهار من نفسها فيصطفّان.
 |  ★ One column on a phone: the code's `auto` column stays 18rem and leaves
 |  the text nothing beside it. */
@media (max-width: 640px) {
    .site-qr { grid-template-columns: minmax(0, 1fr); }
    .site-qr-code { justify-self: center; }
}

/* ═══════════ لوح «لا صلاحية» ═══════════
 |  ★ أضيق من لوح النماذج: فيه جملتان وزرّ، ولوحٌ بعرض ٣٦rem لجملتين يُقرأ
 |  عطلًا لا رسالة.
 |  ★ Narrower than a form sheet: two sentences and a button, and a 36rem
 |  panel holding two sentences reads as a fault, not a message. */
.sheet-card.sheet-sm { max-width: min(26rem, 100%); }
.denied-line { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.6; }
.sheet-head .bi-shield-lock { color: #B4413A; margin-inline-end: .35rem; }

/* ═══════════ الترحيب: الشاشة الرئيسية لمن لا يرى المؤشرات ═══════════
 |  ★ لا شبكةَ أرقام هنا بل شبكةُ أبواب: من فتح الشاشة يريد أن يعرف أين
 |  يضغط، فالبطاقة هدفٌ كبيرٌ للإصبع لا سطرٌ في قائمة.
 |  ★ Not a grid of numbers but a grid of doors: whoever opens the screen
 |  wants to know where to press, so a card is a large finger target rather
 |  than a line in a list. */
.welcome { max-width: 62rem; }
.welcome-head { margin-bottom: 1.6rem; }
.welcome-head h1 {
    margin: 0 0 .3rem;
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.35;
}
.welcome-head p { margin: 0; font-size: .9rem; }
.welcome-h { margin: 0 0 .8rem; font-size: 1rem; }

/* ★ `minmax(min(…), 1fr)` لا `auto`: عمودٌ ضمنيّ لا ينزل تحت أوسع محتواه،
 |  واسمُ شاشةٍ طويل يدفع الشبكة خارج شاشة ٣٢٠ (القاعدة ١٤). */
.welcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: .7rem;
}
.welcome-card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-height: 5.5rem;
    padding: .9rem;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: .7rem;
    transition: border-color .15s ease, transform .15s ease;
}
.welcome-card:hover,
.welcome-card:focus-visible { border-color: var(--brand-400); transform: translateY(-1px); }
.welcome-card .bi { font-size: 1.35rem; color: var(--brand-600); }
.welcome-card-t { font-weight: 600; font-size: .92rem; overflow-wrap: anywhere; }
.welcome-card small { font-size: .75rem; }
.welcome-foot { margin-top: 1.6rem; font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .welcome-card { transition: none; } }

/* ═══════════ ترويسة الشاشة وشريط الترشيح ═══════════
 |  🚨 ★ خمسةُ أصنافٍ كانت مستعملةً في ثلاثة عشر موضعًا **بلا تعريف** —
 |  `page-head` و`inline-lbl` و`field-sm` و`th-sort` و`chips-row`. وصنفٌ بلا
 |  تعريفٍ يُرسَم عاديًّا: لا خطأ ولا تحذير، والسطر يبدو سليمًا لمن يقرأ
 |  المصدر — وهي القاعدة ١٥ نفسها في طبقة الأصناف بدل المتغيّرات.
 |  🚨 ★ Five classes were used in thirteen places with **no definition**. An
 |  undefined class renders plain: no error, no warning, and the markup looks
 |  right to whoever reads it — rule 15 again, one layer up. */
.page-head {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.page-head > div:first-child { flex: 1 1 min(18rem, 100%); min-width: 0; }
.page-head h2 { margin: 0 0 .25rem; font-size: 1.1rem; }
.page-head p  { margin: 0; font-size: .85rem; }
.page-head > a, .page-head > button { flex: 0 0 auto; margin-inline-start: auto; }

/* تسميةٌ فوق حقلها في شريطٍ أفقيّ */
.inline-lbl {
    display: inline-flex;
    flex-direction: column;
    gap: .2rem;
    font-size: .78rem;
    color: var(--slate-500);
}
.field-sm { padding: .4rem .55rem; font-size: .85rem; min-width: min(9rem, 100%); }

/* ★ رأسُ عمودٍ يُرتَّب: هدفُ نقرٍ لا نصٌّ — وثلاثون بكسلًا حدُّ اللمس
 |  (القاعدة ١٤). */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 30px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.th-sort .bi { font-size: .8em; opacity: .45; }
.th-sort.is-on { color: var(--brand-600); }
.th-sort.is-on .bi { opacity: 1; }
.th-sort:hover { color: var(--brand-600); }

.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ★ شريط التقارير يلتفّ ولا يُمرَّر: ستّة حقولٍ على هاتفٍ عرضه ٣٢٠ تعني
 |  صفًّا يخرج من الشاشة إن لم يُسمح له بالنزول. */
.rep-bar { align-items: flex-end; }
@media (max-width: 640px) {
    .rep-bar .inline-lbl,
    .rep-bar .field-sm { flex: 1 1 min(8rem, 100%); min-width: min(8rem, 100%); }
}

/* ═══════════ قائمة الدخل ═══════════
 |  ★ تُقرأ كما تُقرأ على الورق: بندٌ في سطر، والمشتقُّ منه مميَّزٌ بخطٍّ فوقه
 |  لا بلونٍ وحده — الخطّ يقول «هذا حاصلُ ما قبله» ولو طُبعت بالأسود.
 |  ★ Read as it reads on paper: one line per item, and each derived line
 |  marked by a rule above it rather than colour alone — the rule says "this
 |  is the sum of what precedes" even printed in black. */
.pnl td { padding-block: .5rem; }
.pnl td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pnl-sub td { border-top: 1px solid var(--line); }
.pnl-total td {
    border-top: 2px solid var(--ink-500, var(--slate-700));
    border-bottom: 3px double var(--ink-500, var(--slate-700));
    font-size: 1.05rem;
}

/* عنوانُ قسمٍ داخل شاشة — بين الجداول */
.sec-h { margin: 1.6rem 0 .7rem; font-size: 1rem; }

/* ═══════════ أعمدةٌ بيانيّة ═══════════
 |  ★ `preserveAspectRatio="none"` مع `viewBox`: الرسم يتمدّد عرضًا ويبقى
 |  ارتفاعُه ثابتًا — فشهرٌ كامل يُقرأ على هاتفٍ وعلى شاشةٍ عريضة بلا نسختين.
 |  ★ The chart stretches horizontally and keeps its height, so a full month
 |  reads on a phone and on a wide screen without two versions. */
.chart-card { margin-bottom: 1rem; }
.chart-card > .body { padding: .9rem 1rem .4rem; }
.bars { display: block; width: 100%; height: 160px; }
.bars-b rect { fill: var(--brand-400); }
/* ★ القمّة بلونٍ أغمق: «أين أعلى يوم» أوّلُ ما يُسأل عن شكلٍ كهذا */
.bars-b rect.is-peak { fill: var(--brand-600); }
/* ★ والنصّ لا يتمدّد مع الشكل: `preserveAspectRatio="none"` يمطّ المحارف
 |  أفقيًّا فتخرج مشوّهة — فيُعاد ضبطُها بحجمٍ ثابتٍ بالبكسل عبر `vector-effect`
 |  البديل: تُكتب خارج الـSVG. وهنا تُصغَّر ويُقبل تمدّدُها الطفيف. */
.bars-t text { font-size: 11px; fill: var(--slate-500); }
@media (max-width: 640px) { .bars { height: 120px; } }

/* ═══════════ طلبيّات الأقسام / Station tickets ═══════════
   ★ «طلبية ٢» رقعةٌ بلونٍ لا نصٌّ رماديّ: إضافةٌ على طاولةٍ قائمة تُقرأ من
   مترين، وخلطُها بطاولةٍ جديدة يُخرج الطبق إلى غير مكانه. */
.kds-round {
    font-size: .72rem; font-weight: 800; padding: .08rem .45rem; border-radius: 999px;
    background: var(--amber-soft); color: var(--amber); border: 1px solid #EBD9BF;
    flex: 0 0 auto;
}
.kds-station-tag {
    display: inline-block; font-size: .72rem; font-weight: 800; padding: .05rem .4rem;
    border-radius: .3rem; background: var(--slate-100); color: var(--ink); margin-inline-end: .25rem;
}
.kds-locked { cursor: default; }
.kds-hint { flex-basis: 100%; font-size: .8rem; color: var(--slate-500); margin: .2rem 0 0; }

/* ═══════════ قائمةٌ يُبحث فيها / Searchable select ═══════════
   ★ المنتقي الأصليّ يبقى في مكانه مخفيًّا بصريًّا لا `display:none`: هو
   الحقل الذي يُرسَل، وإخفاؤه كلّيًّا يُسقط ترتيب النموذج عند بعض المتصفّحات.
   ★ واللوح `position: fixed` في `body`: داخل `.table-wrap` يُقصّ بحدودها. */
.ss-wrap { position: relative; display: block; min-width: min(11rem, 100%); }
.ss-wrap > .ss-native {
    position: absolute !important; inset-inline-start: 0; bottom: 0;
    width: 1px !important; height: 1px !important; min-width: 0 !important;
    padding: 0 !important; border: 0 !important;
    opacity: 0; pointer-events: none; overflow: hidden;
}
.ss-input { width: 100%; }
.ss-panel {
    position: fixed; z-index: 1200; margin: 0; padding: .25rem 0; list-style: none;
    background: #fff; border: 1px solid var(--line); border-radius: .55rem;
    max-height: min(18rem, 50vh); overflow-y: auto; box-shadow: 0 8px 24px rgba(20, 30, 45, .12);
}
.ss-panel li { padding: .5rem .75rem; font-size: .9rem; cursor: pointer; line-height: 1.35; }
.ss-panel li.is-on { background: var(--slate-100); }
.ss-panel li[aria-selected="true"] { font-weight: 800; }
.ss-panel li.ss-empty { color: var(--slate-500); cursor: default; }

/* ═══════════ تقرير الكاش وإغلاق اليوم / Cash report ═══════════ */
.cash-filter {
    display: grid; gap: .6rem; align-items: end; margin-bottom: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
}
.cash-filter-go { display: flex; gap: .35rem; flex-wrap: wrap; }
/* نموذجُ التسديد في صفّ المحفظة: يلتفّ ولا يفيض، وحقولُه لا تُضغط دون حدّها */
.acc-settle { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.acc-settle .field { flex: 1 1 6.5rem; min-width: min(6.5rem, 100%); max-width: 11rem; }
.cash-locked { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
.cash-title { font-size: 1.15rem; margin: .2rem 0 .8rem; }
.cash-h { font-size: 1rem; margin: 1.4rem 0 .55rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.cash-h small { font-weight: 500; }
.kds-away { opacity: .6; font-style: normal; }
.cash-sub { font-size: .88rem; margin: 1.1rem 0 .45rem; color: var(--slate-700); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.cash-sub small { font-weight: 500; font-family: var(--font-mono); }
.dt tr.is-sum td { border-top: 2px solid var(--line); background: var(--slate-100, #f1f2f4); }
.cash-bar {
    display: inline-block; width: min(8rem, 40vw); height: .5rem; border-radius: 999px;
    background: var(--slate-100); vertical-align: middle; margin-inline-end: .35rem; overflow: hidden;
}
.cash-bar > i { display: block; height: 100%; background: var(--brand-500); }
.cash-close { margin-top: 1.6rem; }
.cash-z { max-width: 46rem; }
.cash-z-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cash-z-table td { padding: .42rem .2rem; border-bottom: 1px solid var(--line); }
.cash-z-table td.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-z-table tr.is-sum td { font-weight: 800; }
.cash-sign { margin: 1rem 0 0; font-size: .85rem; }
.cash-signatures { display: flex; gap: 2rem; margin-top: 2.2rem; flex-wrap: wrap; }
.cash-signatures span { flex: 1 1 12rem; border-top: 1px solid var(--ink); padding-top: .35rem; font-size: .85rem; }

/* ═══════════ طلبات الإلغاء / Void requests ═══════════ */
.void-decide { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.void-decide .field { flex: 1 1 9rem; min-width: min(9rem, 100%); }

/* ★ الطباعة: الورقة تحمل الأرقام لا الترشيح ولا القائمة ولا الأزرار */
@media print {
    .sidebar, .sidebar-scrim, .topbar, .no-print, .flash, .flashes { display: none !important; }
    .shell, main.content { margin: 0 !important; padding: 0 !important; }
    body { background: #fff !important; }
    .table-wrap { overflow: visible !important; }
    .stat-grid { break-inside: avoid; }
    .cash-z { max-width: none; border: 0; box-shadow: none; }
}

/* ★ رابطٌ بلا شرطةٍ لا ينكسر: `clopr-loyality` كان يعطي المتصفّح موضعَ كسرٍ عند
   الشرطة، فلمّا صار المسار `/clopra/api/v1/…` خرج سطرُ نقطة الوصول ٤٩ بكسلًا من
   هاتفٍ عرضُه ٣٢٠. النصّ البرمجيّ يُكسر حيث لزم لا حيث صادف.
   ★ A URL with no hyphen has no break point; code wraps wherever it must. */
main.content code { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------
 |  تطبيق اللوحة: الطابور والتثبيت والإشعارات / The console app
 --------------------------------------------------------------- */
.pwa-queue { position: relative; flex: 0 0 auto; }
.pwa-queue em {
    position: absolute; inset-block-start: 2px; inset-inline-end: 0;
    min-width: 1.1rem; height: 1.1rem; padding-inline: .25rem; border-radius: 999px;
    background: var(--amber); color: #fff; font: 700 .68rem/1.1rem var(--font-base); font-style: normal;
    text-align: center;
}
.pwa-queue.is-review em { background: var(--danger); }
.pwa-bell { flex: 0 0 auto; }
.pwa-bell .user-menu-btn { position: relative; }
.pwa-dot {
    position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 8px; height: 8px;
    border-radius: 50%; background: #2E8B57; box-shadow: 0 0 0 2px var(--paper);
}
.pwa-pop { width: min(20rem, calc(100vw - 2rem)); padding: .9rem 1rem; }
.pwa-pop-title { display: block; margin-bottom: .25rem; }
.pwa-status { margin: 0 0 .6rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }
.pwa-topic {
    display: flex; align-items: flex-start; gap: .5rem; padding-block: .4rem; font-size: .9rem;
    cursor: pointer; min-height: 30px;
}
.pwa-topic input { margin-top: .3rem; flex: 0 0 auto; }
.pwa-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .5rem .25rem; }
.pwa-toast {
    position: fixed; inset-block-end: 1rem; inset-inline-start: 50%; transform: translateX(50%);
    max-width: calc(100vw - 2rem); padding: .6rem 1rem; border-radius: var(--radius);
    background: var(--navy-700); color: #fff; font-size: .9rem; z-index: 2000;
    transition: opacity .5s;
}
[dir="ltr"] .pwa-toast { transform: translateX(-50%); }
.pwa-toast.is-out { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════
   ★ شاشة التجميع (الباس) — اللوح نفسه بترشيحٍ معكوس: بالطلب لا بالمحطّة
   The pass view — the same board grouped by order instead of station
   ═══════════════════════════════════════════════════════════════ */
.kds-expo {
    display: grid;
    gap: .8rem;
    /* `minmax(min(…, 100%), 1fr)`: العمود لا ينزل تحت عرضه فيفيض على ٣٢٠ */
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.kds-xcard {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .8rem;
    background: var(--paper, #fff);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.kds-xcard > header { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kds-xcard.is-ready { border-color: #2F7D5B; box-shadow: inset 4px 0 0 #2F7D5B; }
.kds-xcard.is-late  { border-color: #B4413A; }
.kds-xcount { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.kds-xcount b { font-size: 1.2rem; color: var(--ink); }
.kds-xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.kds-xlist li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; }
.kds-xlist li > i { color: var(--slate-400); }
.kds-xlist li.is-ready > i, .kds-xlist li.is-collected > i { color: #2F7D5B; }
.kds-xst { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.kds-xcard form { margin: 0; }
.kds-xcard form .btn-x { inline-size: 100%; justify-content: center; min-block-size: 40px; }
/* «٨٦» على سطر اللوح، وقائمةُ ما أُوقف تحته */
.kds-86 { display: inline; margin: 0; }
.kds-86 button {
    min-inline-size: 34px; min-block-size: 30px;   /* هدف إصبعٍ لا حشوة فأرة */
    margin-inline-start: .35rem; padding: 0 .4rem;
    font-size: .8rem; font-weight: 800; line-height: 1;
    color: var(--danger); background: var(--danger-soft);
    /* ⚠️ `--danger-line` معرَّفٌ في ورقة الموقع لا في اللوحة — ومتغيّرٌ بلا
       تعريفٍ ولا بديلٍ يُسقط التصريح صامتًا (القاعدة ١٥). */
    border: 1px solid var(--danger); border-radius: 7px; cursor: pointer;
}
.kds-86 button:hover { background: var(--danger); color: #fff; }
.kds-86-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.kds-86-list form { margin: 0; }
/* شطبُ سطرٍ داخل الطلبيّة: ما انتهى يبهت ويُشطب فيبقى المتبقّي وحده للعين */
.kds-done { display: inline; margin: 0; }
.kds-done button {
    min-inline-size: 32px; min-block-size: 30px;
    margin-inline-end: .3rem; padding: 0 .25rem;
    background: none; border: 0; cursor: pointer;
    color: var(--slate-400); font-size: 1rem; line-height: 1;
}
.kds-done button:hover { color: var(--brand-600); }
.kds-items li.is-done { opacity: .5; text-decoration: line-through; }
.kds-items li.is-done .kds-done button { color: #2F7D5B; }
.kds-items li.is-done .kds-86 { display: none; }   /* ما انتهى لا يُسأل عن نفاده */
.kds-left { margin: .2rem 0 .4rem; font-weight: 800; color: var(--brand-700); font-size: .9rem; }
/* زرُّ ملء الشاشة شقيقُ روابط المحطّات: الصنف نفسه على زرٍّ لا رابط */
button.kds-st { background: none; font: inherit; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   ★ شاشة موقع الفرع: تبويباتٌ وشريطُ حفظٍ لاصق
   Branch site screen: tabs and a sticky save bar
   ═══════════════════════════════════════════════════════════════ */
.stab-nav {
    display: flex; flex-wrap: wrap; gap: .4rem;
    margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid var(--line);
}
.stab-nav a {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 38px; padding: 0 .85rem;          /* هدفُ إصبعٍ لا حشوةُ فأرة */
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--paper); color: var(--slate-500);
    font-size: .88rem; font-weight: 600; text-decoration: none;
}
.stab-nav a:hover { border-color: var(--brand-400); color: var(--ink); }
.stab-nav a.is-on { background: var(--brand-500); border-color: var(--brand-500); color: #fff; }

/* ★ شريطٌ لاصقٌ في ذيل الشاشة: الشاشة طويلة، وزرٌّ في ذيلها يعني تمريرًا
   لكلّ تعديل. ويُحسب ارتفاعُه في حشوة المحتوى فلا يغطّي آخر حقل. */
.stab-bar {
    position: sticky; inset-block-end: 0; z-index: 5;
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .7rem .9rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 -6px 18px rgba(18, 22, 31, .06);
}
.stab-bar .muted { font-size: .82rem; }

/* رفعُ الصورة نموذجٌ مستقلّ — زرُّه تحت حقلها لا في ذيل الشاشة */
.imgf-form { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.imgf-form .btn-x { align-self: flex-start; }
/* «٢٤ ساعة» على صفّ اليوم — والصفّ المعطَّل يُقال لا يُخفى */
.hours-24 { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--slate-500); white-space: nowrap; }
.hours-24 input { min-inline-size: 18px; min-block-size: 18px; }
.hours-row.is-24 .field { opacity: .45; }
.hours-row.is-24 .hours-24 { color: var(--brand-700); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════
 |  الحركات / The ledger report
 |  صفٌّ لكل عميل، وحركاتُه في لوح — انظر `pages/ledger.php`.
 ═══════════════════════════════════════════════════════════════ */
.lg-presets { margin-bottom: .8rem; flex-wrap: wrap; }
/* ستُّ بطاقاتٍ في صفٍّ واحد على الحاسوب — السادسة وحدها في صفٍّ تُقرأ منسيّة */
.stat-grid.lg-stats { grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr)); }
.stat-grid.lg-stats .stat .value { font-size: 1.4rem; }

/* تفصيلٌ بالنوع يُنقر — بطاقاتٌ صغيرة تلتفّ ولا تُمرَّر */
.lg-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: .6rem;
    margin-bottom: 1.2rem;
}
.lg-type {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
    padding: .6rem .8rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: #fff; color: var(--ink); text-decoration: none;
    min-width: 0;
}
.lg-type b { font-family: var(--font-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.lg-type small { font-size: .76rem; }
.lg-type:hover { border-color: var(--brand-400); }
.lg-type.is-on { border-color: var(--brand-500); background: var(--brand-50); }

/* اللوح: أعرض من لوح النماذج — فيه جدولٌ بسبعة أعمدة */
.sheet-card.lg-sheet { width: min(980px, 100%); }
.lg-who { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .4rem; }
.lg-scope { margin: 0 0 .9rem; font-size: .82rem; color: var(--slate-500); }
.stat-grid.lg-mini { grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .6rem; margin-bottom: 1rem; }
.stat-grid.lg-mini .stat { padding: .6rem .8rem; box-shadow: none; }
.stat-grid.lg-mini .stat .value { font-size: 1.2rem; }
.lg-sheet.is-busy { opacity: .6; }

/* اختصارُ لوحة المفاتيح لا يُعرض على شاشةٍ بلا لوحة مفاتيح، وعنوانُ الأقسام
   لا ينزل تحت ١٢ بكسلًا على الهاتف (القاعدة ١٤). */
@media (hover: none), (max-width: 900px) {
    .nav-find kbd { display: none; }
    .nav-tools { font-size: .75rem; }
    .nav-find input { font-size: 1rem; }
}

/* ★ أرصدةُ المخزون وحركاتُه على الهاتف: بطاقةٌ بخمسة أسطرٍ لكل مادّة تجعل مئتَي
   مادّةٍ ألفَ سطر. فالاسمُ سطرٌ كامل والأرقامُ شبكةٌ بعمودين تحته — نصفُ الارتفاع.
   ★ Stock balances and movements on a phone: a five-line card per material
   turns two hundred materials into a thousand lines. Name on one row, figures
   in a two-column grid beneath — half the height. */
@media (max-width: 720px) {
    table[data-stock-table].dt-cards tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: .6rem; padding-block: .35rem; }
    table[data-stock-table].dt-cards tr[hidden] { display: none; }
    table[data-stock-table].dt-cards td { flex-direction: column; align-items: flex-start; gap: 0; padding-block: .3rem; border-top: 0; min-width: 0; }
    table[data-stock-table].dt-cards td + td { border-top: 0; }
    table[data-stock-table].dt-cards td br { display: none; }
    table[data-stock-table="levels"].dt-cards td:first-child,
    table[data-stock-table="moves"].dt-cards td:nth-child(2),
    table[data-stock-table].dt-cards td.row-none { grid-column: 1 / -1; }
    table[data-stock-table="levels"].dt-cards td:first-child::before,
    table[data-stock-table="moves"].dt-cards td:nth-child(2)::before { display: none; }
    table[data-stock-table="moves"].dt-cards td:nth-child(2) { order: -1; font-weight: 700; }
}