/* ============================================================
   مكانك — نظام التصميم «فيروز وطين»
   منصة حجز الطاولات والخدمات للمطاعم والكافيهات والفنادق.

   الهوية: أسطح باردة فاتحة، حبر داكن مخضرّ، فيروزي عراقي للهوية،
   ودلالات لونية منفصلة تماماً (زمردي/عنبري/أحمر) حتى لا تلتبس
   حالة الحجز بلون الهوية.

   البنية:
     1  الرموز            10 الأزرار           19 الشرائح والوسوم
     2  الأساس            11 الحقول            20 التحميل والهياكل
     3  الطباعة           12 العدّادات          21 الحالات الفارغة والأخطاء
     4  الهيكل والتنقّل     13 الجداول            22 الحركة
     5  الأسطح            14 مخطط الطاولات      23 طبقة توافق Bootstrap
     6  السكة الزمنية      15 التقويم            24 المقاسات
     7  أسطر البطاقة       16 التنبيهات          25 الطباعة الورقية
     8  حالات الحجز        17 الخطوات (Stepper)
     9  شريط الأدوات       18 النوافذ (Modal)
   ============================================================ */

/* ---------- 1. الرموز ---------- */
:root {
    /* الأسطح — بارد فاتح */
    --bg:        #F4F7F7;
    --bg-2:      #E8EFEF;
    --surface:   #FFFFFF;
    --surface-2: #FAFCFC;
    --surface-3: #EDF4F4;

    /* أسماء قديمة مبقاة (بعض الـ views تستعملها inline) */
    --field:      var(--bg);
    --field-deep: var(--bg-2);
    --chit:       var(--surface);
    --chit-edge:  var(--surface-2);

    /* الحبر — داكن مخضرّ */
    --ink:   #122225;
    --ink-2: #3A5257;
    --ink-3: #5A6F73;   /* 4.5:1 على الأبيض */

    /* الخطوط الفاصلة */
    --line:        #DBE6E7;
    --line-strong: #C3D5D7;
    --rule:        var(--line);
    --rule-steel:  var(--line-strong);

    /* الهوية — فيروزي */
    --brand:      #0E7C86;
    --brand-deep: #0A5F67;
    --brand-soft: #E1F1F2;
    --brand-line: #B5DDE0;

    /* الفعل الأساسي — فيروزي داكن */
    --action:      #0B2E33;
    --action-deep: #061B1E;

    /* الدلالات — منفصلة عن الهوية */
    --go:      #2F7D3E;
    --go-deep: #22622F;
    --go-wash: #E7F4E9;
    --go-line: #BCDFC3;

    --brass:      #9A6B12;
    --brass-deep: #7A540B;
    --brass-wash: #FBF1DC;
    --brass-line: #E7D0A2;

    --signal:      #B3261E;
    --signal-deep: #8C1B15;
    --signal-wash: #FCECEA;
    --signal-line: #EFC4C0;

    --info:      #4A4FA0;
    --info-deep: #373B7C;
    --info-wash: #ECEDF9;
    --info-line: #C6C8EC;

    --void:      #647578;
    --void-wash: #EFF3F3;
    --void-line: #D6E0E1;

    /* ألسنة الأقسام */
    --st-1: #0E7C86; --st-2: #4A4FA0; --st-3: #8A3E86; --st-4: #B25733;
    --st-5: #2F7D3E; --st-6: #A32B5E; --st-7: #9A6B12; --st-8: #6A4BA8;

    /* الخطوط */
    --ui:    "Cairo", "Segoe UI", system-ui, sans-serif;
    --meter: "IBM Plex Mono", ui-monospace, monospace;

    /* الإيقاع */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* الانحناء */
    --r-xs: 5px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;

    /* الظلال — باردة الميل */
    --sh-1: 0 1px 2px rgba(11,34,38,.06);
    --sh-2: 0 1px 3px rgba(11,34,38,.08), 0 10px 24px -12px rgba(11,34,38,.18);
    --sh-3: 0 4px 10px rgba(11,34,38,.08), 0 24px 50px -18px rgba(11,34,38,.32);
    --ring: 0 0 0 3px rgba(14,124,134,.26);

    --lift:   var(--sh-1);
    --lift-2: var(--sh-3);
    --ease:   cubic-bezier(.16, 1, .3, 1);

    /* التنقّل الجانبي */
    --nav-bg:    #16262A;
    --nav-bg-2:  #233A40;
    --nav-line:  rgba(255,255,255,.10);
    --nav-ink:   #B3C7CA;
    --nav-ink-2: #7D9498;

    --header-h: 60px;
}

/* ---------- 2. الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* الأرقام والهواتف تُقرأ يساراً داخل نص عربي */
.ltr, [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }

::selection { background: var(--brand); color: #fff; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); }

* { scrollbar-width: thin; scrollbar-color: #B4C9CB transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #CFC0AC; border: 3px solid transparent; background-clip: padding-box; border-radius: var(--r-pill); }
*::-webkit-scrollbar-thumb:hover { background: #B7A48C; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.link { color: var(--brand-deep); font-weight: 600; text-decoration: none; }
a.link:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }
b, strong { font-weight: 700; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--s3); font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
h1 { font-size: clamp(23px, 3vw, 29px); }
h2 { font-size: 21px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }
p  { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ---------- 3. سُلّم الطباعة ---------- */
.t-hero    { font-size: clamp(23px, 3.1vw, 31px); font-weight: 700; letter-spacing: -.018em; line-height: 1.25; }
.t-title   { font-size: clamp(17px, 2vw, 20px); font-weight: 700; letter-spacing: -.012em; }
.t-section { font-size: 15px; font-weight: 700; }
.t-body    { font-size: 15px; }
.t-small   { font-size: 13px; color: var(--ink-2); }
.t-micro   { font-size: 11.5px; color: var(--ink-3); }

.t-tab {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    font-size: 11px; font-weight: 600;
    color: var(--ink-2); background: var(--surface-3);
    border-radius: var(--r-pill);
}

.meter    { font-family: var(--meter); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.meter-lg { font-family: var(--meter); font-size: 24px; font-weight: 600; letter-spacing: -.03em; }
.meter-xl { font-family: var(--meter); font-size: 32px; font-weight: 600; letter-spacing: -.035em; }

.num-pos { color: var(--go-deep); }
.num-due { color: var(--signal); }

/* عنوان قسم صغير فوق مجموعة */
.eyebrow {
    display: block; margin-bottom: var(--s2);
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand-deep);
}

/* ---------- 4. الهيكل والتنقّل ---------- */
.shell { min-height: 100vh; display: grid; grid-template-columns: 264px 1fr; background: var(--bg); }

.rail-nav {
    grid-column: 1;
    position: sticky; top: 0; align-self: start;
    height: 100vh;
    display: flex; flex-direction: column;
    background: var(--nav-bg);
    color: var(--nav-ink);
    z-index: 40;
}

.rail-brand {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s4);
    text-decoration: none; color: #fff;
    border-bottom: 1px solid var(--nav-line);
}
.rail-brand img { display: block; flex: none; border-radius: var(--r-sm); }
.rail-brand .n { font-size: 17px; font-weight: 700; line-height: 1.15; }
.rail-brand .r { display: block; font-size: 11.5px; font-weight: 500; color: var(--nav-ink-2); margin-top: 1px; }

.rail-scroll { flex: 1; overflow-y: auto; padding: var(--s4) 0 var(--s5); }
.rail-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }

.rail-group { padding: 0 var(--s3); margin-bottom: var(--s5); }
.rail-group > h6 {
    margin: 0 0 var(--s2); padding: 0 var(--s3);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--nav-ink-2);
}

.rail-nav a.item, .rail-nav button.item {
    position: relative;
    display: flex; align-items: center; gap: var(--s3);
    width: 100%; margin-bottom: 2px;
    padding: 10px var(--s3);
    font: inherit; font-size: 14px; font-weight: 500;
    color: var(--nav-ink); text-decoration: none;
    background: none; border: 0; border-radius: var(--r-sm);
    cursor: pointer; text-align: start;
    transition: color .14s, background .14s;
}
.rail-nav .item svg { flex: none; width: 18px; height: 18px; stroke-width: 1.8; opacity: .8; }
.rail-nav .item:hover { color: #fff; background: var(--nav-bg-2); }
.rail-nav .item:hover svg { opacity: 1; }
.rail-nav .item.on { color: var(--ink); background: var(--brand); font-weight: 700; }
.rail-nav .item.on svg { opacity: 1; }
.rail-nav .item .count {
    margin-inline-start: auto;
    font-family: var(--meter); font-size: 11px; font-weight: 600;
    background: var(--signal); color: #fff;
    padding: 1px 7px; border-radius: var(--r-pill);
}

.rail-foot { padding: var(--s3); border-top: 1px solid var(--nav-line); }
.rail-user {
    display: flex; align-items: center; gap: var(--s3);
    width: 100%; padding: 8px var(--s2);
    background: none; border: 0; border-radius: var(--r-sm);
    color: var(--nav-ink); font: inherit; font-size: 13.5px; font-weight: 500;
    cursor: pointer; text-align: start;
    transition: background .14s;
}
.rail-user:hover { background: var(--nav-bg-2); color: #fff; }
.rail-user .who { min-width: 0; flex: 1; }
.rail-user .who b { display: block; color: #fff; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user .who span { display: block; font-size: 11.5px; color: var(--nav-ink-2); }
.rail-user .av {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    background: var(--brand); color: var(--ink);
    font-size: 14px; font-weight: 700; border-radius: 50%;
}

.menu { position: relative; }
.drop {
    position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; inset-inline-end: 0;
    min-width: 200px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-3);
    padding: var(--s1); z-index: 60;
    animation: pop .16s var(--ease) both;
}
.drop.below { top: calc(100% + 8px); bottom: auto; }
.drop a, .drop button {
    display: flex; align-items: center; gap: var(--s2);
    width: 100%; text-align: start;
    padding: 9px 11px; font: inherit; font-size: 13.5px;
    background: none; border: 0; border-radius: var(--r-sm);
    color: inherit; text-decoration: none; cursor: pointer;
}
.drop a:hover, .drop button:hover { background: var(--surface-3); }
.drop svg { width: 16px; height: 16px; opacity: .7; }
.drop hr { margin: var(--s1) 0; }

/* خارج الشبكة على الشاشات الكبيرة — وإلا احتلّا خلية وأزاحا الشريط */
.scrim { display: none; }
.mobar { display: none; }

.main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

/* margin-inline:auto ضروري — بدونه يلصق الـ max-width المحتوى بحافة البداية
   (اليمين في RTL) ويتكدّس كل الفائض فراغاً على اليسار في الشاشات العريضة */
.page {
    flex: 1; width: 100%;
    max-width: 1600px;
    margin-inline: auto;
    padding: var(--s6) var(--s6) var(--s8);
}

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap;
    margin-bottom: var(--s5);
    padding-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}
.page-head > div:first-child { min-width: 0; }
.page-head h1, .page-head h2, .page-head h4 { margin-bottom: 0; }
.page-head .sub { margin-top: 4px; }

/* الصفحات القديمة تستعمل <h4> كعنوان صفحة */
.page > h4, .page > .d-flex > h4 { font-size: 23px; letter-spacing: -.015em; }

/* فتات الطريق */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s2); font-size: 12.5px; color: var(--ink-3); }
.crumbs a { text-decoration: none; color: var(--ink-3); }
.crumbs a:hover { color: var(--brand-deep); }
.crumbs .sep { opacity: .5; }

/* ---------- 5. الأسطح ---------- */
.chit, .card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-1);
    min-width: 0;
}
.chit { overflow: hidden; }
.chit + .chit { margin-top: var(--s3); }

.chit-head, .card-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 14.5px; font-weight: 700;
    border-start-start-radius: var(--r); border-start-end-radius: var(--r);
}
.chit-head { justify-content: space-between; }
.chit-body, .card-body { padding: var(--s4); }
.chit-body.flush, .card-body.flush, .card-body.p-0 { padding: 0; }
.chit-foot, .card-footer {
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    border-end-start-radius: var(--r); border-end-end-radius: var(--r);
}
.card-img-top { display: block; width: 100%; height: auto; object-fit: cover; }

/* لسان القسم على الحافة الأمامية */
.chit[data-station]::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; }
.chit[data-station="1"]::after { background: var(--st-1); }
.chit[data-station="2"]::after { background: var(--st-2); }
.chit[data-station="3"]::after { background: var(--st-3); }
.chit[data-station="4"]::after { background: var(--st-4); }
.chit[data-station="5"]::after { background: var(--st-5); }
.chit[data-station="6"]::after { background: var(--st-6); }
.chit[data-station="7"]::after { background: var(--st-7); }
.chit[data-station="8"]::after { background: var(--st-8); }

/* ---------- 6. السكة الزمنية ---------- */
.rail { position: relative; }

.rail-row { display: grid; grid-template-columns: 78px 1fr; gap: var(--s4); align-items: start; }
.rail-row + .rail-row { margin-top: var(--s3); }

.rail-time { position: relative; padding-top: 12px; text-align: center; }
.rail-time::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px;
    width: 2px; background: var(--line); border-radius: var(--r-pill);
}
.rail-row:first-child .rail-time::after { top: 16px; }
.rail-row:last-child  .rail-time::after { bottom: calc(100% - 16px); }

.rail-time .hhmm { font-family: var(--meter); font-size: 18px; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.rail-time .dur { display: block; margin-top: 4px; }

.rail-pin {
    position: absolute; inset-inline-start: -6px; top: 16px;
    width: 11px; height: 11px;
    background: var(--surface); border: 2px solid var(--line-strong); border-radius: 50%;
}
.rail-row[data-live="1"] .rail-pin { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 4px var(--signal-wash); }

.now-line { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: var(--s4); align-items: center; margin: var(--s4) 0; }
.now-line .now-stamp { font-family: var(--meter); font-size: 12px; font-weight: 600; color: var(--signal); text-align: center; letter-spacing: -.02em; }
.now-line .now-bar { height: 2px; background: var(--signal); border-radius: var(--r-pill); position: relative; }
.now-line .now-bar::after {
    content: "الآن";
    position: absolute; inset-inline-start: 0; top: -10px;
    background: var(--signal); color: #fff;
    font-size: 10.5px; font-weight: 700;
    padding: 2px 9px; border-radius: var(--r-pill);
}

.rail-row[data-past="1"] .chit { opacity: .58; }
.rail-row[data-past="1"]:hover .chit { opacity: 1; }

/* حجز فات وقته ولم يصل صاحبه */
.chit[data-aging="1"] { border-color: var(--signal-line); }
.chit[data-aging="1"]::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 3px; background: var(--signal);
}

/* ---------- 7. أسطر البطاقة ---------- */
.chit-line { display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s4); align-items: start; }
.chit-name { font-size: 18px; font-weight: 700; letter-spacing: -.012em; line-height: 1.3; }
.chit-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3);
    margin-top: 5px; font-size: 12.5px; color: var(--ink-2);
}
.chit-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.chit-meta .sep { color: var(--line-strong); }

/* قائمة حقل/قيمة — تحل محل الأعمدة اليدوية في صفحات التفاصيل */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); }
.fact > .k { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.fact > .v { display: block; font-size: 14.5px; font-weight: 600; word-break: break-word; }
.fact > .v:empty::after { content: "—"; color: var(--ink-3); font-weight: 400; }

/* ---------- 8. حالات الحجز ---------- */
.state {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    font-size: 11.5px; font-weight: 700;
    border: 1px solid transparent; border-radius: var(--r-pill);
    white-space: nowrap;
}
.state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.state-wait { color: var(--brass-deep);  background: var(--brass-wash);  border-color: var(--brass-line); }
.state-go   { color: var(--go-deep);     background: var(--go-wash);     border-color: var(--go-line); }
.state-live { color: var(--info-deep);   background: var(--info-wash);   border-color: var(--info-line); }
.state-bad  { color: var(--signal-deep); background: var(--signal-wash); border-color: var(--signal-line); }
.state-off  { color: var(--void);        background: var(--void-wash);   border-color: var(--void-line); }

/* قوس التقدّم */
.arc { display: flex; align-items: stretch; gap: 4px; }
.arc-step {
    flex: 1; min-width: 0; padding: 9px 6px;
    background: var(--surface-3); border-radius: var(--r-sm);
    border-top: 3px solid var(--line-strong); text-align: center;
}
.arc-step .lbl { font-size: 10.5px; font-weight: 600; color: var(--ink-3); display: block; line-height: 1.35; }
.arc-step[data-done="1"] { background: var(--go-wash); border-top-color: var(--go); }
.arc-step[data-done="1"] .lbl { color: var(--go-deep); }
.arc-step[data-at="1"] { background: var(--action); border-top-color: var(--brand); }
.arc-step[data-at="1"] .lbl { color: #fff; font-weight: 700; }
.arc-step[data-dead="1"] { background: var(--signal-wash); border-top-color: var(--signal); }
.arc-step[data-dead="1"] .lbl { color: var(--signal-deep); font-weight: 700; }

/* ---------- 9. شريط الأدوات وشريط التصفية ---------- */
.toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    margin-bottom: var(--s4);
}
.toolbar .grow { flex: 1; min-width: 0; }

/* شريط تصفية: حقول متجاورة تنهار عمودياً على الموبايل */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--s3);
    align-items: end;
}
.filters .act { display: flex; gap: var(--s2); }
.filters .act .btn { flex: 1; }

/* مجموعة أزرار مقسّمة (الكل/مفتوحة/مغلقة) */
.seg { display: inline-flex; padding: 3px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-sm); gap: 2px; }
.seg > a, .seg > button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--ink-2); background: none; border: 0; border-radius: var(--r-xs);
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.seg > a:hover, .seg > button:hover { color: var(--ink); background: var(--surface); }
.seg > .on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-1); }

/* تبويبات */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); overflow-x: auto; }
.tabs > a {
    padding: 10px var(--s3); font-size: 14px; font-weight: 600;
    color: var(--ink-3); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs > a:hover { color: var(--ink); }
.tabs > a.on { color: var(--brand-deep); border-bottom-color: var(--brand); }

/* ---------- 10. الأزرار ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 42px; padding: 0 18px;
    font: inherit; font-size: 13.5px; font-weight: 700;
    border: 1px solid var(--action); border-radius: var(--r-sm);
    background: var(--action); color: #fff;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    box-shadow: var(--sh-1);
    transition: background .14s, border-color .14s, box-shadow .14s, transform .1s var(--ease), opacity .14s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { background: var(--action-deep); border-color: var(--action-deep); box-shadow: var(--sh-2); color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled], .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }

.btn-brand   { background: var(--brand); border-color: var(--brand); color: var(--ink); }
.btn-brand:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.btn-go      { background: var(--go);     border-color: var(--go); }
.btn-go:hover{ background: var(--go-deep);border-color: var(--go-deep); }
.btn-danger  { background: var(--signal); border-color: var(--signal); }
.btn-danger:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn-dark    { background: var(--action); border-color: var(--action); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }

.btn-quiet { background: transparent; color: var(--ink-2); border-color: transparent; box-shadow: none; }
.btn-quiet:hover { background: var(--surface-3); color: var(--ink); border-color: transparent; box-shadow: none; }

.btn-sm { min-height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-xs); }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { min-height: 50px; padding: 0 24px; font-size: 15px; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn-icon { padding: 0; width: 38px; min-height: 38px; }
.btn-icon.btn-sm { width: 32px; min-height: 32px; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.btn-row form { display: contents; }

/* زر يعمل: دوّار داخلي بدل النص */
.btn[data-loading="1"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[data-loading="1"]::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-top-color: transparent;
    color: #fff;
    animation: spin .7s linear infinite;
}
.btn-ghost[data-loading="1"]::after, .btn-quiet[data-loading="1"]::after { color: var(--ink); }

/* ---------- 11. الحقول ---------- */
.field { display: block; margin-bottom: var(--s4); }
.field > label, .lbl-field, .form-label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.field .hint, .form-text { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.req::after { content: " *"; color: var(--signal); }

.input,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], input[type="search"],
input[type="url"], input[type="datetime-local"], input[type="month"], input[type="week"],
select, textarea {
    width: 100%; min-height: 42px;
    padding: 9px 13px;
    font: inherit; font-size: 14px;
    color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    box-shadow: var(--sh-1);
    transition: border-color .14s, box-shadow .14s;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.65; }

select {
    appearance: none; padding-inline-end: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7969' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 12px center; background-size: 16px;
}

.input:focus, input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand); box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input[disabled], select[disabled], textarea[disabled], input[readonly] {
    background: var(--surface-3); color: var(--ink-3); cursor: not-allowed; box-shadow: none;
}
/* حقل بخطأ */
.input.bad, input.bad, select.bad, textarea.bad, .input-validation-error {
    border-color: var(--signal) !important; background: var(--signal-wash);
}
.field-error, .text-danger.field-validation-error, span.field-validation-error {
    display: block; margin-top: 5px; font-size: 12px; font-weight: 600; color: var(--signal);
}

input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; min-height: 0;
    accent-color: var(--brand); margin: 0; flex: none; cursor: pointer;
}
input[type="file"] {
    width: 100%; font: inherit; font-size: 13.5px;
    padding: 10px; background: var(--surface-2);
    border: 1px dashed var(--line-strong); border-radius: var(--r-sm); cursor: pointer;
}
input[type="file"]:hover { border-color: var(--brand); background: var(--brand-soft); }
input[type="color"] { width: 48px; height: 42px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }

.check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; }

/* حقل مع لاصقة (د.ع، %) */
.affix { display: flex; align-items: stretch; }
.affix > input, .affix > select { border-start-end-radius: 0; border-end-end-radius: 0; }
.affix > .tag {
    display: grid; place-items: center; flex: none;
    padding: 0 13px; font-size: 12.5px; font-weight: 700; color: var(--ink-3);
    background: var(--surface-3);
    border: 1px solid var(--line-strong); border-inline-start: 0;
    border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm);
}

.grid { display: grid; gap: var(--s4); }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ---------- 12. العدّادات ---------- */
.meters { display: grid; gap: var(--s3); }
.meter-cell {
    position: relative; overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-1);
    padding: var(--s4);
    display: block; text-decoration: none; color: inherit;
    transition: border-color .14s, box-shadow .14s, transform .14s var(--ease);
}
a.meter-cell:hover { border-color: var(--brand-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.meter-cell .v { font-family: var(--meter); font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.15; display: block; }
.meter-cell .k { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.meter-cell[data-alert="1"] { border-color: var(--signal-line); background: linear-gradient(180deg, var(--signal-wash), var(--surface) 64%); }
.meter-cell[data-alert="1"] .v { color: var(--signal); }
.meter-cell[data-good="1"] .v { color: var(--go-deep); }
/* عمولة المنصة: رقم الهوية — نحاسي، لا دلالة حالة */
.meter-cell[data-brand="1"] { border-color: var(--brand-line); background: linear-gradient(180deg, var(--brand-soft), var(--surface) 64%); }
.meter-cell[data-brand="1"] .v { color: var(--brand-deep); }

/* ---------- 13. الجداول ---------- */
.sheet, table.table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: 13.5px; background: var(--surface);
}
.sheet th, table.table > * > tr > th {
    text-align: start; padding: 12px var(--s4);
    font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
    color: var(--ink-3); background: var(--surface-2);
    border-bottom: 1px solid var(--line); white-space: nowrap;
}
.sheet td, table.table > * > tr > td {
    padding: 13px var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle;
}
.sheet tbody tr:hover, table.table.table-hover tbody tr:hover { background: var(--surface-2); }
.sheet tbody tr:last-child td, table.table > tbody > tr:last-child > td { border-bottom: 0; }
.sheet .num, table.table .num { font-family: var(--meter); font-variant-numeric: tabular-nums; }
.sheet a, table.table a { color: var(--brand-deep); font-weight: 600; text-decoration: none; }
.sheet a:hover, table.table a:hover { text-decoration: underline; }
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.table { margin-bottom: 0; }
table.table-sm > * > tr > th, table.table-sm > * > tr > td { padding: 9px var(--s3); font-size: 13px; }
table.table-bordered > * > tr > th, table.table-bordered > * > tr > td { border: 1px solid var(--line); }
caption { color: var(--ink-3); font-size: 12.5px; padding: var(--s2) 0; text-align: start; }

/* عمود الإجراءات دائماً بمحاذاة النهاية وبلا التفاف */
.sheet td.acts, table.table td.acts { text-align: end; white-space: nowrap; }
.sheet td.acts .btn-row, table.table td.acts .btn-row { justify-content: flex-end; }

/* ---------- 14. مخطط الطاولات ---------- */
.floor, .table-map { display: flex; flex-wrap: wrap; gap: var(--s3); }
.tbl, .table-box {
    width: 136px; min-height: 100px; padding: var(--s3);
    border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); box-shadow: var(--sh-1);
    text-align: center; text-decoration: none; color: var(--ink);
    font-size: 12px; line-height: 1.45;
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    transition: transform .14s var(--ease), box-shadow .14s, border-color .14s;
}
a.tbl:hover, a.table-box:hover { transform: translateY(-2px); box-shadow: var(--sh-2); color: var(--ink); text-decoration: none; }
.tbl .no, .table-box .t-name {
    font-family: var(--meter); font-size: 18px; font-weight: 600;
    letter-spacing: -.03em; display: block; color: var(--ink);
}
.tbl-free, .table-free { border-color: var(--go-line); background: var(--go-wash); }
.tbl-busy, .table-busy { border-color: var(--signal-line); background: var(--signal-wash); }
.tbl-off,  .table-off  { border-color: var(--void-line); background: var(--void-wash); color: var(--ink-3); }
.table-off .t-name { color: var(--ink-3); }

/* مفتاح الألوان */
.legend { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 12.5px; color: var(--ink-2); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 11px; height: 11px; border-radius: 3px; border: 1px solid; display: block; }
.legend .i-free { background: var(--go-wash);     border-color: var(--go); }
.legend .i-busy { background: var(--signal-wash); border-color: var(--signal); }
.legend .i-off  { background: var(--void-wash);   border-color: var(--void); }

/* ---------- 15. التقويم الأسبوعي ---------- */
.week, .week-grid { display: grid; grid-template-columns: repeat(7, minmax(155px,1fr)); gap: var(--s2); }
.week-col, .week-day {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    min-height: 200px; padding: var(--s3);
}
.week-col[data-today="1"], .week-day[data-today="1"] { border-color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.week-col h4, .week-day h6 {
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.week-col h4 .d, .week-day h6 .d { font-family: var(--meter); font-weight: 500; color: var(--ink-3); }
.week-item {
    display: block; text-decoration: none; color: var(--ink);
    padding: 7px 9px; margin-bottom: 5px;
    font-size: 11.5px; line-height: 1.45;
    background: var(--surface-3); border-radius: var(--r-sm);
    border-inline-start: 3px solid var(--ink-3);
}
.week-item:hover { background: var(--brand-soft); text-decoration: none; }
.week-item .w-t { font-family: var(--meter); font-weight: 600; }
.week-item[data-s="go"]   { border-inline-start-color: var(--go);     background: var(--go-wash); }
.week-item[data-s="wait"] { border-inline-start-color: var(--brass);  background: var(--brass-wash); }
.week-item[data-s="live"] { border-inline-start-color: var(--info);   background: var(--info-wash); }
.week-item[data-s="bad"]  { border-inline-start-color: var(--signal); background: var(--signal-wash); }
.week-item[data-s="off"]  { border-inline-start-color: var(--void);   background: var(--void-wash); opacity: .75; }

/* ---------- 16. التنبيهات ---------- */
.note, .alert {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--ink-3);
    border-radius: var(--r);
    font-size: 13.5px; background: var(--surface);
    margin-bottom: var(--s4);
}
.note svg, .alert svg { width: 19px; height: 19px; flex: none; margin-top: 2px; }
.note-go,   .alert-success { background: var(--go-wash);     border-color: var(--go-line);     border-inline-start-color: var(--go);     color: var(--go-deep); }
.note-bad,  .alert-danger  { background: var(--signal-wash); border-color: var(--signal-line); border-inline-start-color: var(--signal); color: var(--signal-deep); }
.note-warn, .alert-warning { background: var(--brass-wash);  border-color: var(--brass-line);  border-inline-start-color: var(--brass);  color: var(--brass-deep); }
.note-info, .alert-info    { background: var(--info-wash);   border-color: var(--info-line);   border-inline-start-color: var(--info);   color: var(--info-deep); }
.note a, .alert a { color: inherit; font-weight: 700; }
.note button {
    margin-inline-start: auto; background: none; border: 0;
    font-size: 21px; line-height: 1; cursor: pointer; color: inherit; opacity: .5;
    padding: 0 3px; border-radius: var(--r-xs);
}
.note button:hover { opacity: 1; }

/* شريط تنبيه عائم أعلى المحتوى */
.toast-stack { position: sticky; top: var(--s3); z-index: 30; }

/* ---------- 17. الخطوات (Stepper) ---------- */
.stepper { display: flex; align-items: center; gap: var(--s2); overflow-x: auto; padding-bottom: var(--s2); margin-bottom: var(--s5); }
.step { display: flex; align-items: center; gap: var(--s2); flex: none; }
.step .dot {
    width: 30px; height: 30px; flex: none;
    display: grid; place-items: center;
    font-family: var(--meter); font-size: 13px; font-weight: 600;
    background: var(--surface); color: var(--ink-3);
    border: 1px solid var(--line-strong); border-radius: 50%;
}
.step .lbl { font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.step + .step::before { content: ""; width: 26px; height: 1px; background: var(--line-strong); flex: none; }
.step[data-done="1"] .dot { background: var(--go); border-color: var(--go); color: #fff; }
.step[data-done="1"] .lbl { color: var(--ink-2); }
.step[data-at="1"] .dot { background: var(--action); border-color: var(--action); color: #fff; box-shadow: var(--ring); }
.step[data-at="1"] .lbl { color: var(--ink); font-weight: 700; }

/* ---------- 18. النوافذ (Modal) ---------- */
dialog.modal {
    width: min(520px, calc(100vw - 32px));
    padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: var(--surface); color: var(--ink);
    box-shadow: var(--sh-3);
}
dialog.modal::backdrop { background: rgba(36,27,22,.5); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: pop .18s var(--ease) both; }
.modal-head { padding: var(--s4) var(--s5) 0; }
.modal-head h3 { margin-bottom: var(--s1); }
.modal-body { padding: var(--s3) var(--s5) var(--s4); font-size: 14px; color: var(--ink-2); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--s2); padding: var(--s3) var(--s5) var(--s5); }

/* ---------- 19. الشرائح والوسوم ---------- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    font-size: 11.5px; font-weight: 700; line-height: 1.6;
    border: 1px solid transparent; border-radius: var(--r-pill);
    white-space: nowrap; background: var(--surface-3); color: var(--ink-2);
}
.badge + .badge { margin-inline-start: 4px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; font-size: 12.5px; font-weight: 600;
    background: var(--surface); color: var(--ink-2);
    border: 1px solid var(--line-strong); border-radius: var(--r-pill);
    text-decoration: none; cursor: pointer;
}
.chip:hover { border-color: var(--brand); color: var(--ink); }
.chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }

.avatar {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--brand-soft); color: var(--brand-deep);
    font-size: 13px; font-weight: 700; border: 1px solid var(--brand-line);
}

/* ---------- 20. التحميل والهياكل ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid var(--line-strong); border-top-color: var(--brand);
    border-radius: 50%; animation: spin .7s linear infinite;
}
.loading-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s6); justify-content: center; color: var(--ink-3); font-size: 13.5px; }

@keyframes shimmer { to { background-position-x: -200%; } }
.skeleton {
    background: linear-gradient(90deg, var(--surface-3) 8%, var(--surface-2) 18%, var(--surface-3) 33%);
    background-size: 200% 100%;
    animation: shimmer 1.3s linear infinite;
    border-radius: var(--r-xs); min-height: 14px;
}
.skeleton + .skeleton { margin-top: var(--s2); }
.skeleton.w-60 { width: 60%; } .skeleton.w-40 { width: 40%; }

/* الصفحة تُعتم بلطف أثناء إرسال نموذج */
body[data-busy="1"] { cursor: progress; }
body[data-busy="1"] .page { opacity: .6; pointer-events: none; transition: opacity .2s; }

/* ---------- 21. الحالات الفارغة والأخطاء ---------- */
.empty {
    padding: var(--s7) var(--s4); text-align: center; color: var(--ink-3);
    display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.empty > svg { width: 40px; height: 40px; color: var(--line-strong); stroke-width: 1.5; }
.empty .big { font-size: 16px; color: var(--ink); font-weight: 700; }
.empty p { max-width: 46ch; margin: 0; font-size: 13.5px; }
.empty .btn { margin-top: var(--s2); }

.state-page {
    min-height: 72vh; display: grid; place-items: center; padding: var(--s6) var(--s4); text-align: center;
}
.state-page .code { font-family: var(--meter); font-size: 56px; font-weight: 600; color: var(--brand); letter-spacing: -.05em; line-height: 1; }
.state-page h1 { margin: var(--s4) 0 var(--s2); }
.state-page p { color: var(--ink-2); max-width: 48ch; margin-inline: auto; }
.state-page .btn-row { justify-content: center; margin-top: var(--s5); }

/* ---------- 22. الحركة ---------- */
@keyframes stamp { 0% { transform: translateY(-6px) scale(.985); opacity: 0; } 100% { transform: none; opacity: 1; } }
.stamped { animation: stamp .26s var(--ease) both; }

@keyframes pop { from { transform: translateY(5px) scale(.99); opacity: 0; } to { transform: none; opacity: 1; } }

@keyframes crawl { from { opacity: .5; } to { opacity: 1; } }
.now-line .now-bar { animation: crawl 2.6s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
}

/* ============================================================
   23. طبقة توافق Bootstrap
   تبقى لأن بعض الصفحات ما زالت تستعمل هذي الأسماء؛ كلها منفَّذة
   بلغة التصميم نفسها فلا يظهر فرق بصري بين صفحة وأخرى.
   ============================================================ */
.row { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--s4); }
.row > * { min-width: 0; }
.g-0{gap:0} .g-1{gap:var(--s1)} .g-2{gap:var(--s2)} .g-3{gap:var(--s4)} .g-4{gap:var(--s5)}

.col { grid-column: span 12; }
.col-1{grid-column:span 1}   .col-2{grid-column:span 2}   .col-3{grid-column:span 3}
.col-4{grid-column:span 4}   .col-5{grid-column:span 5}   .col-6{grid-column:span 6}
.col-7{grid-column:span 7}   .col-8{grid-column:span 8}   .col-9{grid-column:span 9}
.col-10{grid-column:span 10} .col-11{grid-column:span 11} .col-12{grid-column:span 12}

[class*="col-md-"], [class*="col-lg-"], [class*="col-xl-"] { grid-column: span 12; }

@media (min-width: 768px) {
    .col-md-1{grid-column:span 1}   .col-md-2{grid-column:span 2}   .col-md-3{grid-column:span 3}
    .col-md-4{grid-column:span 4}   .col-md-5{grid-column:span 5}   .col-md-6{grid-column:span 6}
    .col-md-7{grid-column:span 7}   .col-md-8{grid-column:span 8}   .col-md-9{grid-column:span 9}
    .col-md-10{grid-column:span 10} .col-md-11{grid-column:span 11} .col-md-12{grid-column:span 12}
}
@media (min-width: 992px) {
    .col-lg-1{grid-column:span 1}   .col-lg-2{grid-column:span 2}   .col-lg-3{grid-column:span 3}
    .col-lg-4{grid-column:span 4}   .col-lg-5{grid-column:span 5}   .col-lg-6{grid-column:span 6}
    .col-lg-7{grid-column:span 7}   .col-lg-8{grid-column:span 8}   .col-lg-9{grid-column:span 9}
    .col-lg-10{grid-column:span 10} .col-lg-11{grid-column:span 11} .col-lg-12{grid-column:span 12}
}
@media (min-width: 1200px) {
    .col-xl-1{grid-column:span 1}   .col-xl-2{grid-column:span 2}   .col-xl-3{grid-column:span 3}
    .col-xl-4{grid-column:span 4}   .col-xl-5{grid-column:span 5}   .col-xl-6{grid-column:span 6}
    .col-xl-7{grid-column:span 7}   .col-xl-8{grid-column:span 8}   .col-xl-9{grid-column:span 9}
    .col-xl-10{grid-column:span 10} .col-xl-11{grid-column:span 11} .col-xl-12{grid-column:span 12}
}

/* أزرار Bootstrap */
.btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-deep); border-color: var(--action-deep); }
.btn-secondary { background: var(--void); border-color: var(--void); color: #fff; }
.btn-secondary:hover { background: #5F5145; border-color: #5F5145; }
.btn-success { background: var(--go); border-color: var(--go); color: #fff; }
.btn-success:hover { background: var(--go-deep); border-color: var(--go-deep); }
.btn-warning { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn-warning:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }
.btn-info:hover { background: var(--info-deep); border-color: var(--info-deep); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-success,
.btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark {
    background: var(--surface); box-shadow: var(--sh-1);
}
.btn-outline-primary   { color: var(--brand-deep); border-color: var(--brand-line); }
.btn-outline-primary:hover   { background: var(--brand-soft);  border-color: var(--brand);  color: var(--brand-deep); }
.btn-outline-secondary { color: var(--ink-2); border-color: var(--line-strong); }
.btn-outline-secondary:hover { background: var(--surface-2);   border-color: var(--ink-3);  color: var(--ink); }
.btn-outline-success   { color: var(--go-deep); border-color: var(--go-line); }
.btn-outline-success:hover   { background: var(--go-wash);     border-color: var(--go);     color: var(--go-deep); }
.btn-outline-danger    { color: var(--signal); border-color: var(--signal-line); }
.btn-outline-danger:hover    { background: var(--signal-wash); border-color: var(--signal); color: var(--signal-deep); }
.btn-outline-warning   { color: var(--brass-deep); border-color: var(--brass-line); }
.btn-outline-warning:hover   { background: var(--brass-wash);  border-color: var(--brass);  color: var(--brass-deep); }
.btn-outline-info      { color: var(--info-deep); border-color: var(--info-line); }
.btn-outline-info:hover      { background: var(--info-wash);   border-color: var(--info);   color: var(--info-deep); }
.btn-outline-dark      { color: var(--ink); border-color: var(--line-strong); }
.btn-outline-dark:hover      { background: var(--action); border-color: var(--action); color: #fff; }

.btn-link {
    background: none; border-color: transparent; color: var(--brand-deep);
    box-shadow: none; padding: 0 6px; min-height: 32px;
}
.btn-link:hover { background: var(--brand-soft); border-color: transparent; color: var(--brand-deep); box-shadow: none; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--s1); vertical-align: middle; }

/* نماذج Bootstrap */
.form-control-sm, .form-select-sm { min-height: 36px; padding: 6px 11px; font-size: 13px; }
.form-select-sm { padding-inline-end: 32px; background-size: 14px; }
.form-check { display: flex; align-items: center; gap: 9px; min-height: 36px; }
.form-check-inline { display: inline-flex; margin-inline-end: var(--s4); }
.form-check-label { font-size: 13.5px; cursor: pointer; margin: 0; color: var(--ink); font-weight: 500; }
.form-check-input { flex: none; }
.input-group { display: flex; align-items: stretch; }
.input-group > .form-control { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > .btn { border-start-start-radius: 0; border-end-start-radius: 0; }

/* شارات Bootstrap */
.bg-success   { background: var(--go-wash)     !important; color: var(--go-deep)     !important; border-color: var(--go-line); }
.bg-danger    { background: var(--signal-wash) !important; color: var(--signal-deep) !important; border-color: var(--signal-line); }
.bg-warning   { background: var(--brass-wash)  !important; color: var(--brass-deep)  !important; border-color: var(--brass-line); }
.bg-info      { background: var(--info-wash)   !important; color: var(--info-deep)   !important; border-color: var(--info-line); }
.bg-primary   { background: var(--brand-soft)  !important; color: var(--brand-deep)  !important; border-color: var(--brand-line); }
.bg-secondary { background: var(--void-wash)   !important; color: var(--void)        !important; border-color: var(--void-line); }
.bg-light     { background: var(--surface-3)   !important; color: var(--ink-2)       !important; border-color: var(--line); }
.bg-dark      { background: var(--action) !important; color: #fff !important; }
.bg-white     { background: var(--surface) !important; }
.badge.bg-warning.text-dark { color: var(--brass-deep) !important; }
/* عناصر التقويم الملوّنة تستعمل bg-* مع text-white */
.week-item.text-white { color: var(--ink) !important; }

/* أدوات مساعدة */
.d-none{display:none!important} .d-block{display:block!important} .d-inline{display:inline!important}
.d-inline-block{display:inline-block!important} .d-inline-flex{display:inline-flex!important}
.d-flex{display:flex!important} .d-grid{display:grid!important}
.d-none-empty:empty{display:none!important}
.flex-wrap{flex-wrap:wrap!important} .flex-column{flex-direction:column!important} .flex-grow-1{flex-grow:1!important}
.align-items-center{align-items:center!important} .align-items-start{align-items:start!important} .align-items-end{align-items:end!important}
.align-self-center{align-self:center!important}
.justify-content-between{justify-content:space-between!important} .justify-content-center{justify-content:center!important}
.justify-content-end{justify-content:flex-end!important} .justify-content-start{justify-content:flex-start!important}
.gap-1{gap:var(--s1)!important} .gap-2{gap:var(--s2)!important} .gap-3{gap:var(--s4)!important}

.m-0{margin:0!important} .m-1{margin:var(--s1)!important} .m-2{margin:var(--s2)!important}
.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:var(--s1)!important} .mb-2{margin-bottom:var(--s2)!important}
.mb-3{margin-bottom:var(--s4)!important} .mb-4{margin-bottom:var(--s5)!important} .mb-5{margin-bottom:var(--s6)!important}
.mt-0{margin-top:0!important} .mt-1{margin-top:var(--s1)!important} .mt-2{margin-top:var(--s2)!important}
.mt-3{margin-top:var(--s4)!important} .mt-4{margin-top:var(--s5)!important} .mt-5{margin-top:var(--s6)!important}
.ms-1{margin-inline-start:var(--s1)!important} .ms-2{margin-inline-start:var(--s2)!important}
.ms-3{margin-inline-start:var(--s4)!important} .ms-auto{margin-inline-start:auto!important}
.me-1{margin-inline-end:var(--s1)!important} .me-2{margin-inline-end:var(--s2)!important}
.me-3{margin-inline-end:var(--s4)!important} .me-auto{margin-inline-end:auto!important}

.p-0{padding:0!important} .p-1{padding:var(--s1)!important} .p-2{padding:var(--s2)!important}
.p-3{padding:var(--s4)!important} .p-4{padding:var(--s5)!important}
.py-1{padding-block:var(--s1)!important} .py-2{padding-block:var(--s2)!important}
.py-3{padding-block:var(--s4)!important} .py-4{padding-block:var(--s5)!important} .py-5{padding-block:var(--s6)!important}
.px-2{padding-inline:var(--s2)!important} .px-3{padding-inline:var(--s4)!important}

.w-100{width:100%!important} .w-50{width:50%!important} .h-100{height:100%!important}

.text-center{text-align:center!important} .text-start{text-align:start!important} .text-end{text-align:end!important}
.text-nowrap{white-space:nowrap!important}
.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-muted{color:var(--ink-3)!important} .text-danger{color:var(--signal)!important}
.text-success{color:var(--go-deep)!important} .text-warning{color:var(--brass-deep)!important}
.text-primary{color:var(--brand-deep)!important} .text-dark{color:var(--ink)!important} .text-white{color:#fff!important}
.fw-bold{font-weight:700!important} .fw-normal{font-weight:400!important}
.small, small { font-size: 12.5px; }

.border{border:1px solid var(--line)!important} .border-0{border:0!important}
.rounded{border-radius:var(--r)!important} .rounded-circle{border-radius:50%!important}
.shadow-sm{box-shadow:var(--sh-1)!important}
.float-start{float:inline-start} .float-end{float:inline-end}
.img-thumbnail{padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.list-unstyled{list-style:none;padding:0;margin:0}
.display-5{font-size:clamp(25px,3.4vw,33px);font-weight:700;letter-spacing:-.02em}
.display-6{font-size:clamp(21px,2.8vw,27px);font-weight:700;letter-spacing:-.018em}

.stat-card { border-inline-start: 3px solid var(--brand); }
.stat-card .stat-value { font-family: var(--meter); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.04em; }
.stat-card .stat-label { color: var(--ink-3); font-size: 12.5px; }

/* ---------- 24. المقاسات (Mobile First في السلوك) ---------- */
@media (max-width: 1400px) { .shell { grid-template-columns: 248px 1fr; } }
@media (max-width: 1280px) {
    .shell { grid-template-columns: 232px 1fr; }
    .page { padding: var(--s5) var(--s5) var(--s8); }
}
@media (max-width: 1100px) {
    .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .week, .week-grid { grid-template-columns: 1fr; }
    .week-col, .week-day { min-height: 0; }
}

/* تحت 980: التنقّل يصير درجاً منزلقاً */
@media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; }

    .mobar {
        display: flex; align-items: center; gap: var(--s3);
        position: sticky; top: 0; z-index: 45;
        height: var(--header-h); padding: 0 var(--s3);
        background: var(--nav-bg); color: #fff;
    }
    .mobar .burger {
        width: 42px; height: 42px; flex: none;
        display: grid; place-items: center;
        background: rgba(255,255,255,.08); border: 0; border-radius: var(--r-sm);
        color: #fff; cursor: pointer;
    }
    .mobar .burger:hover { background: rgba(255,255,255,.18); }
    .mobar .brand-m { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #fff; text-decoration: none; }

    /* الدرج يخرج من جهة البداية — الإزاحة فيزيائية لا منطقية */
    .rail-nav {
        position: fixed; inset-block: 0; inset-inline-start: 0;
        width: min(304px, 86vw);
        transform: translateX(100%);
        transition: transform .28s var(--ease);
        box-shadow: var(--sh-3);
    }
    [dir="ltr"] .rail-nav { transform: translateX(-100%); }
    .shell[data-open="1"] .rail-nav { transform: translateX(0); }

    .scrim { position: fixed; inset: 0; z-index: 39; background: rgba(30,22,17,.5); backdrop-filter: blur(3px); }
    .shell[data-open="1"] .scrim { display: block; }

    .main { grid-column: 1; }
    .rail-nav .item { padding: 13px var(--s3); }
}

@media (max-width: 760px) {
    .page { padding: var(--s4) var(--s3) var(--s7); }
    .page-head { align-items: flex-start; flex-direction: column; }
    .page-head .btn-row { width: 100%; }
    .g2, .g3, .g4 { grid-template-columns: 1fr; }
    .meters.g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .meter-cell { padding: var(--s3); }
    .meter-cell .v { font-size: 23px; }
    .page > .grid { grid-template-columns: 1fr !important; }
    .facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); }

    /* السكة: الوقت داخل البطاقة */
    .rail-row { grid-template-columns: 1fr; gap: 0; }
    .rail-time { display: flex; align-items: baseline; gap: var(--s2); padding: 0 0 6px; text-align: start; }
    .rail-time::after, .rail-pin { display: none; }
    .now-line { grid-template-columns: 1fr; gap: var(--s1); }
    .now-line .now-stamp { text-align: start; }
    .chit-line { grid-template-columns: 1fr; }

    /* ===== الجداول تتحول بطاقات مرتّبة ===== */
    .sheet, .sheet thead, .sheet tbody, .sheet tr, .sheet td,
    table.table, table.table thead, table.table tbody, table.table tr, table.table td { display: block; width: 100%; }
    .sheet thead, table.table thead { display: none; }
    .table-responsive { overflow: visible; }
    .sheet tr, table.table tr {
        border: 1px solid var(--line); border-radius: var(--r);
        background: var(--surface); box-shadow: var(--sh-1);
        margin-bottom: var(--s3); padding: var(--s3) var(--s4);
    }
    .sheet td, table.table td {
        border: 0 !important; padding: 6px 0;
        display: grid; grid-template-columns: 40% 1fr; gap: var(--s3);
        align-items: baseline; text-align: start;
    }
    .sheet td + td, table.table td + td { border-top: 1px dashed var(--line) !important; }
    .sheet td::before, table.table td::before {
        content: attr(data-k);
        font-size: 11.5px; font-weight: 700; color: var(--ink-3);
    }
    .sheet td:not([data-k]), table.table td:not([data-k]) { grid-template-columns: 1fr; }
    .sheet td:empty, table.table td:empty { display: none; }
    .sheet td.acts, table.table td.acts { text-align: start; white-space: normal; padding-top: var(--s3); }
    .sheet td.acts .btn-row, table.table td.acts .btn-row { justify-content: flex-start; }

    .btn { min-height: 46px; }
    .btn-sm { min-height: 38px; }
    .arc { flex-wrap: wrap; }
    .arc-step { flex: 1 1 30%; }
    .tbl, .table-box { width: calc(50% - var(--s2)); }
    .seg { width: 100%; }
    .seg > a, .seg > button { flex: 1; justify-content: center; }

    /* ملخّص مثبّت أسفل الشاشة (مراجعة الحجز / إجراءات النموذج) */
    .sticky-bar {
        position: sticky; bottom: 0; z-index: 25;
        margin: var(--s4) calc(var(--s3) * -1) calc(var(--s7) * -1);
        padding: var(--s3) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom));
        background: var(--surface); border-top: 1px solid var(--line);
        box-shadow: 0 -8px 24px -12px rgba(11,34,38,.3);
    }
    .sticky-bar .btn { width: 100%; }
}

@media (max-width: 420px) {
    .meters.g4 { grid-template-columns: 1fr; }
    .tbl, .table-box { width: 100%; }
    .filters { grid-template-columns: 1fr; }
}

/* ---------- 25. الطباعة الورقية ---------- */
@media print {
    .rail-nav, .mobar, .scrim, .no-print, .btn, .toolbar, .tabs, .seg { display: none !important; }
    body { background: #fff; font-size: 12px; }
    .shell { display: block; }
    .chit, .card, .meter-cell { box-shadow: none; border: 1px solid #C9BCA8; break-inside: avoid; }
    .page { padding: 0; max-width: none; }
}