/* ═══════════════════════════════════════════════════════════════════════
 *  نظام الحسابات السحابي — الأسلوب
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ── خصائص منطقية لا يمين ويسار ─────────────────────────────────────────
 *
 * `margin-inline-start` لا `margin-left`. فالورقة الواحدة تخدم العربية
 * والإنجليزية معاً، ويكفي `dir` على وسم `html` ليقلب كل شيء. ومن كتب
 * `left` ثابتاً احتاج ورقةً ثانية للإنجليزية — ثم افترقت الورقتان.
 *
 * ── ولا خطوط من الشبكة ─────────────────────────────────────────────────
 *
 * خطوط النظام وحدها. فطلبٌ إلى خادم خطوط خارجي يُبطئ الصفحة في الشبكات
 * البطيئة، ويُسرّب زيارة كل مستخدم إلى طرف ثالث، ويتوقف حين يُحجب.
 *
 * ── وأهداف اللمس ٤٤ بكسل ───────────────────────────────────────────────
 *
 * أقل من ذلك يُخطئه الإصبع على الهاتف — وهذه شاشات تُستعمل في الميدان.
 */

/* ═══════════════════════════════════════════════════════════════════════
 *  الرموز
 * ═══════════════════════════════════════════════════════════════════════ */
/*
 | ═══════════════════════════════════════════════════════════════════════
 |  الرموزُ وحدَها تحمل اللون — والوضعان يبدّلانها ولا يبدّلان قاعدةً
 | ═══════════════════════════════════════════════════════════════════════
 |
 | كلُّ لونٍ في الورقة يمرّ من هنا. **فالوضع الليليّ ليس ورقةَ أنماطٍ
 | ثانية** تُصان مع الأولى وتفترق عنها في الدفعة القادمة — *بل جدولُ
 | رموزٍ آخر يحلّ محلّ هذا*. ومن كتب لوناً صريحاً في قاعدةٍ خرجت قاعدتُه
 | من الوضعين معاً، **ويحرسه اختبارٌ دائم**.
 */
:root {
    color-scheme: light;

    --brand: #0E5468;
    --brand-ink: #ffffff;

    /* الشريطُ والقائمة — رمزان مستقلّان لأن الداكن لا يجعلهما بلون العلامة */
    --topbar-bg: #0E5468;
    --topbar-ink: #ffffff;
    --topbar-hover: rgba(255, 255, 255, .14);
    --sidebar-bg: #ffffff;

    --bg: #F4F6F8;
    --surface: #ffffff;
    --surface-2: #F1F4F7;
    --ink: #16202A;
    --ink-soft: #5A6874;
    --line: #DFE5EA;
    --line-strong: #C6D0D8;

    --success: #1B7A4B;
    --success-bg: #E7F5EE;
    --success-line: #BFE3D0;
    --warning: #8A5A00;
    --warning-bg: #FDF3E0;
    --warning-line: #EFD8AC;
    --danger: #A31D1D;
    --danger-bg: #FBEAEA;
    --danger-line: #F0C9C9;
    --info: #12566B;
    --info-bg: #E6F1F4;
    --info-line: #C3DDE4;

    /*
     | ألوانُ شاشة الدخول — رموزٌ مستقلّة عن لون العلامة.
     |
     | فلوحُ الهويّة يُبنى من تدرّجٍ داكن، **ولون العلامة يفتحُ في الوضع
     | الليليّ** — فلو بُني منه لخرج لوحٌ فيروزيٌّ ساطع في شاشةٍ داكنة.
     */
    --auth-a: #0A3B49;
    --auth-b: #0E5468;
    --auth-c: #14738B;
    --auth-panel-a: #0E5468;
    --auth-panel-b: #0A3B49;
    --auth-ink: #ffffff;

    --radius: 10px;
    --radius-sm: 7px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    --shadow: 0 1px 2px rgba(22, 32, 42, .06), 0 2px 8px rgba(22, 32, 42, .05);
    --tap: 44px;

    --sidebar: 248px;
    --topbar: 56px;
}

/*
 | ═══════════════════════════════════════════════════════════════════════
 |  الوضعُ الليليّ — جدولُ رموزٍ ثانٍ لا ورقةُ أنماطٍ ثانية
 | ═══════════════════════════════════════════════════════════════════════
 |
 | ── وليس قلباً للألوان ──────────────────────────────────────────────────
 |
 | فقلبُ الأبيضِ أسودَ والأسودِ أبيضَ **يُخرج شاشةً تُرهق العين**: نصٌّ
 | أبيضُ ناصع على أسودَ ناصع يهتزّ حروفُه (halation)، *وهو أشدُّ على من
 | يقرأ أرقاماً ساعتين*. فالخلفيةُ رماديةٌ داكنة لا سوداء، والنصُّ أبيضُ
 | مكسور.
 |
 | ── والعلامةُ تفتحُ ولا تبقى ────────────────────────────────────────────
 |
 | لونُ العلامة `#0E5468` داكنٌ بطبعه، **ونصٌّ به على خلفيةٍ داكنة لا
 | يُقرأ**. فيفتحُ في الوضع الليليّ إلى `#5FBBD6` — *ونسبةُ تباينه على
 | الخلفية تتجاوز الحدّ المطلوب*، ويحرسه اختبار.
 |
 | ── والشريطُ ليس بلون العلامة هنا ───────────────────────────────────────
 |
 | فشريطٌ فيروزيٌّ فاتح فوق شاشةٍ داكنة **لوحةُ إعلانات لا رأسُ برنامج**.
 | فصار بلون السطح الثاني — والعلامةُ تبقى في الأيقونة والروابط.
 */
html[data-theme="dark"] {
    color-scheme: dark;

    --brand: #5FBBD6;
    --brand-ink: #08222B;

    --topbar-bg: #16202A;
    --topbar-ink: #E8EEF1;
    --topbar-hover: rgba(255, 255, 255, .10);
    --sidebar-bg: #131B23;

    --bg: #0E151B;
    --surface: #17212A;
    --surface-2: #1E2A34;
    --ink: #E7EDF2;
    --ink-soft: #A3B2BE;
    --line: #2A3843;
    --line-strong: #3E4F5C;

    --success: #6FD3A0;
    --success-bg: #14312A;
    --success-line: #2C5B49;
    --warning: #E9BC6A;
    --warning-bg: #33280F;
    --warning-line: #5E4A20;
    --danger: #F08F8F;
    --danger-bg: #3A1C1C;
    --danger-line: #6A3434;
    --info: #7FC6DC;
    --info-bg: #12313C;
    --info-line: #2A5866;

    --auth-a: #08161C;
    --auth-b: #0C2732;
    --auth-c: #103743;
    --auth-panel-a: #12303C;
    --auth-panel-b: #0A1D25;
    --auth-ink: #E7EDF2;

    --shadow: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 10px rgba(0, 0, 0, .30);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Noto Sans Arabic", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* الإنجليزية تأخذ ترتيب خطوط لاتينياً */
html[lang="en"] body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-2); line-height: 1.35; font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.h5 { font-size: 1.05rem; margin: 0 0 var(--space-2); }
.h6 { font-size: .95rem; margin: var(--space-4) 0 var(--space-2); }
.muted { color: var(--ink-soft); }
/*
 | ── الأرقام والرموز لا تنقلب مع اتجاه الصفحة ────────────────────────────
 |
 | رقم الفاتورة «مب-2026-00001» يبدأ بحرف عربي. وفي صفحةٍ إنجليزية (LTR)
 | تقلبه خوارزمية الاتجاه الثنائي فيظهر «00001-2026-مب» — رقمٌ صحيح في
 | القاعدة، مقلوبٌ على الشاشة، ويقرؤه العميل الإنجليزي خطأً وينقله خطأً.
 |
 | والعزل هنا **باتجاه ثابت يسار-إلى-يمين**: فالرقم يُعرَض كما يُكتب في
 | العربية والإنجليزية معاً، ولا يختلف ما يراه موظفان ينظران إلى نفس
 | الفاتورة. والمبالغ والتواريخ تُقرأ يساراً-يميناً أصلاً فلا تتأثر.
 */
.mono {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: .85em;
    unicode-bidi: isolate;
    direction: ltr;
}
.lede { color: var(--ink-soft); margin-bottom: var(--space-4); }
.ta-center { text-align: center; }

/* الوصول: ما يُقرأ ولا يُرى */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* حلقة التركيز — لا تُزال أبداً، فهي الطريق الوحيد لمن يتنقّل بالمفاتيح */
:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; inset-inline-start: -999px; top: 0;
    background: var(--brand); color: var(--brand-ink);
    padding: var(--space-2) var(--space-4); z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* ═══════════════════════════════════════════════════════════════════════
 *  الشريط العلوي
 * ═══════════════════════════════════════════════════════════════════════ */
.topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: var(--space-2);
    height: var(--topbar); padding: 0 var(--space-3);
    background: var(--topbar-bg); color: var(--topbar-ink);
}
.topbar a, .topbar button { color: var(--topbar-ink); }
.topbar-spacer { flex: 1; }

/* ── محدِّد المؤسسة — أداة الشريط العابرة لكل الشاشات ─────────────────── */
.topbar-tools { display: flex; align-items: center; gap: var(--space-2); }

.topbar-org {
    display: flex; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 var(--space-2);
    background: rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
}
.topbar-org-icon { display: inline-flex; opacity: .85; }
.topbar-org select {
    max-width: 200px; min-height: 34px;
    padding: 0 var(--space-1);
    border: 0; background: transparent; color: var(--brand-ink);
    font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
/* قائمة المتصفّح تُرسم بألوان النظام — فالخيارات تحتاج لوناً مقروءاً */
.topbar-org select option { color: var(--ink); background: var(--surface); }
.topbar-org-static { font-size: .88rem; font-weight: 600; }
.topbar-org-static span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── شجرة الحسابات وجدول القيود ──────────────────────────────────────── */
.ta-end { text-align: end; }

/* الإزاحة تحكي العمق — بلا خطوط ترسم شجرة لا تُقرأ على الهاتف */
.tree-indent {
    display: inline-block;
    inline-size: calc(var(--depth, 0) * 14px);
}

.row-group { background: var(--bg); }
.row-group td { font-weight: 600; }

.table tfoot th {
    border-top: 2px solid var(--line-strong);
    font-weight: 700;
    background: var(--bg);
}

/* سطور القيد: حقول ضيّقة تُقرأ في سطر واحد */
.table-entry .input { min-height: 38px; padding: 4px 8px; }
.table-entry td { padding: var(--space-1) var(--space-2); }

/* شبكة اختيارات — للصلاحيات وربط المؤسسات */
.check-grid {
    display: grid; gap: var(--space-1);
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    padding: var(--space-2);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: var(--bg);
}
.topbar-user { display: flex; align-items: center; gap: var(--space-1); }

.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.brand:hover { text-decoration: none; }
.brand-mark {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255, 255, 255, .18); font-weight: 700;
}
.brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-width: var(--tap); min-height: var(--tap);
    padding: 0 var(--space-2); border: 0; border-radius: var(--radius-sm);
    background: transparent; cursor: pointer; font: inherit;
}
.icon-btn:hover { background: rgba(255, 255, 255, .14); text-decoration: none; }
.lang-code { font-size: .75rem; font-weight: 700; letter-spacing: .04em; }

/*
 | جرسُ الإشعارات وعدّادُه — بألوان الرموز لا بلونٍ مكتوب.
 | والحبرُ `--surface` عمداً: فهو أبيضُ على أحمرَ داكنٍ في الفاتح،
 | وداكنٌ على أحمرَ فاتحٍ في الليليّ — **متباينٌ في الوضعين بلا رمزٍ جديد**.
 */
.ntf-bell { position: relative; }
.ntf-badge {
    position: absolute; top: 4px; inset-inline-end: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px;
    background: var(--danger); color: var(--surface);
    font-size: .65rem; font-weight: 700; line-height: 16px; text-align: center;
}
.user-name { font-size: .9rem; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.icon { flex: none; vertical-align: -.15em; }

/* ═══════════════════════════════════════════════════════════════════════
 *  الهيكل والقائمة
 * ═══════════════════════════════════════════════════════════════════════ */
.shell { display: flex; align-items: flex-start; }

.sidebar {
    position: sticky; top: var(--topbar);
    flex: none; width: var(--sidebar);
    height: calc(100vh - var(--topbar));
    overflow-y: auto;
    padding: var(--space-3) var(--space-2);
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
}

.nav-grp + .nav-grp { margin-top: var(--space-1); }

.nav-grp-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
    width: 100%; min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--ink);
    font: inherit; font-weight: 600; font-size: .9rem;
    text-align: start; cursor: pointer;
}
.nav-grp-head:hover { background: var(--bg); }

/* السهم يدور عند الفتح — والفتح بالنقر لا بالمرور */
.nav-grp-caret { display: inline-flex; transition: transform .18s ease; }
.nav-grp.open .nav-grp-caret { transform: rotate(180deg); }

.nav-grp-items { display: none; list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.nav-grp.open .nav-grp-items { display: block; }

.nav-item {
    display: flex; align-items: center; gap: var(--space-2);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    margin-inline-start: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink); font-size: .92rem;
}
.nav-item:hover { background: var(--bg); text-decoration: none; }
.nav-item.active {
    background: var(--info-bg); color: var(--brand); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--brand);
}
html[dir="rtl"] .nav-item.active { box-shadow: inset -3px 0 0 var(--brand); }

.nav-foot { margin-top: var(--space-4); padding: var(--space-3); font-size: .8rem; }

.content {
    flex: 1; min-width: 0;
    padding: var(--space-5);
    max-width: 1200px;
}

.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.page-title { font-size: 1.35rem; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
 *  البطاقات
 * ═══════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-4);
}
.card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
}
.card-title { font-size: 1rem; margin: 0; }
.card-sub { margin: var(--space-1) 0 0; color: var(--ink-soft); font-size: .875rem; }
.card-head-actions { display: flex; gap: var(--space-2); flex: none; }
.card-body { padding: var(--space-5); }

/* ═══════════════════════════════════════════════════════════════════════
 *  الأزرار
 * ═══════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); padding: 0 var(--space-4);
    border: 1px solid transparent; border-radius: var(--radius-sm);
    font: inherit; font-size: .92rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { filter: brightness(1.12); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-bg); filter: brightness(.96); }
.btn-block { display: flex; width: 100%; }

.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.sticky-actions {
    position: sticky; bottom: 0;
    padding: var(--space-3); margin-top: var(--space-4);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.row-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.inline { display: inline; }

/* ═══════════════════════════════════════════════════════════════════════
 *  النماذج — العنوان مرئي دائماً، والخطأ تحت حقله
 * ═══════════════════════════════════════════════════════════════════════ */
.field { margin-bottom: var(--space-4); }

.label {
    display: block; margin-bottom: var(--space-1);
    font-size: .875rem; font-weight: 600; color: var(--ink);
}
.req { color: var(--danger); margin-inline-start: 2px; }

.input {
    display: block; width: 100%; min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: .95rem;
}
.input:hover { border-color: var(--ink-soft); }
.input-invalid { border-color: var(--danger); background: var(--danger-bg); }
textarea.input { min-height: 96px; resize: vertical; }
select.input { cursor: pointer; }

.hint { margin: var(--space-1) 0 0; font-size: .82rem; color: var(--ink-soft); }
.error { margin: var(--space-1) 0 0; font-size: .82rem; color: var(--danger); font-weight: 600; }

.readonly { margin: 0; padding: var(--space-2) 0; font-weight: 600; }
.readonly-pair { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--space-2); }

.grid-2 { display: grid; gap: 0 var(--space-4); grid-template-columns: 1fr 1fr; }

.filters { margin-bottom: var(--space-2); }
.filters-row { display: grid; gap: var(--space-3); grid-template-columns: 2fr 1fr auto; align-items: end; }
.filters-row-4 { grid-template-columns: repeat(4, 1fr); }
.filters-row .field { margin-bottom: 0; }
.filters-row .btn { margin-bottom: 0; }

/* مفتاح تبديل */
.switch { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.switch input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.switch-body strong { display: block; font-size: .95rem; }
.switch-body .hint { margin-top: 2px; }

.swatch-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.swatch-row .label { margin: 0; }
.swatch { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-strong); }

/* خلايا الصلاحيات */
.perm-cell { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.perm-check {
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 32px; padding: 2px 6px;
    border-radius: var(--radius-sm); font-size: .8rem; cursor: pointer;
}
.perm-check:hover { background: var(--bg); }
.perm-check input { width: 17px; height: 17px; accent-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
 *  الجداول — وعلى الهاتف تصير بطاقات
 * ═══════════════════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td {
    padding: var(--space-3);
    text-align: start;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.table thead th {
    font-size: .8rem; font-weight: 700; color: var(--ink-soft);
    text-transform: none; white-space: nowrap;
    border-bottom: 2px solid var(--line-strong);
}
.table tbody tr:hover { background: var(--bg); }
.table tbody tr:last-child td { border-bottom: 0; }
.table-matrix td { vertical-align: top; }

/* ═══════════════════════════════════════════════════════════════════════
 *  البطاقات الرقمية
 * ═══════════════════════════════════════════════════════════════════════ */
.tiles {
    display: grid; gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: var(--space-4);
}
.tile {
    display: flex; flex-direction: column; gap: var(--space-1);
    padding: var(--space-4);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    color: var(--ink);
}
.tile:hover { text-decoration: none; border-color: var(--brand); }
.tile-icon { color: var(--ink-soft); }
.tile-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.tile-label { font-size: .85rem; color: var(--ink-soft); }
.tile-warning { border-inline-start: 4px solid var(--warning); }
.tiles-compact .tile-value { font-size: 1.15rem; }

/* ═══════════════════════════════════════════════════════════════════════
 *  التنبيهات — ولا تحمل معناها باللون وحده
 * ═══════════════════════════════════════════════════════════════════════ */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid; border-radius: var(--radius);
    margin-bottom: var(--space-4);
}
.alert p { margin: var(--space-1) 0 0; font-size: .9rem; }
.alert .btn { margin-top: var(--space-2); }
.alert-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger-line); color: var(--danger); }
.alert-info    { background: var(--info-bg);    border-color: var(--info-line); color: var(--info); }

.flash-stack { margin-bottom: var(--space-2); }

.badge {
    display: inline-block; padding: 2px 8px;
    border-radius: 999px; font-size: .78rem; font-weight: 600;
    border: 1px solid;
}
.badge-muted   { background: var(--bg); border-color: var(--line-strong); color: var(--ink-soft); }
.badge-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
.badge-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  border-color: var(--danger-line); color: var(--danger); }
.badge-info    { background: var(--info-bg);    border-color: var(--info-line); color: var(--info); }

/* ═══════════════════════════════════════════════════════════════════════
 *  الحالة الفارغة والخط الزمني والترقيم
 * ═══════════════════════════════════════════════════════════════════════ */
.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--ink-soft); }
.empty-mark { color: var(--line-strong); margin-bottom: var(--space-2); }
.empty-title { font-weight: 600; color: var(--ink); margin: 0 0 var(--space-1); }
.empty-hint { margin: 0 0 var(--space-3); font-size: .9rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-2) 0; border-bottom: 1px solid var(--line);
}
.timeline-item:last-child { border-bottom: 0; }
.timeline-dot {
    flex: none; width: 8px; height: 8px; margin-top: 9px;
    border-radius: 50%; background: var(--brand);
}
.timeline-time { font-size: .8rem; color: var(--ink-soft); }

.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.pager-info { font-size: .875rem; color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════════════
 *  التبويبات
 * ═══════════════════════════════════════════════════════════════════════ */
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 2px solid var(--line); }
.tab {
    display: inline-flex; align-items: center;
    min-height: var(--tap); padding: 0 var(--space-4);
    color: var(--ink-soft); font-weight: 600; font-size: .92rem;
    border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════
 *  قوائم الفحص والملفات
 * ═══════════════════════════════════════════════════════════════════════ */
.check-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.check {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3); border-bottom: 1px solid var(--line);
}
.check:last-child { border-bottom: 0; }
.check-mark { flex: none; margin-top: 3px; }
.check.ok .check-mark { color: var(--success); }
.check.bad .check-mark { color: var(--danger); }
.check-body { display: flex; flex-direction: column; gap: 2px; }
.check-detail { font-size: .85rem; color: var(--ink-soft); }
.check-action { font-size: .85rem; color: var(--danger); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
 *  تفصيلٌ يُطوى داخل صفّ — نموذجٌ لا يُزاحم الجدول حتى يُطلَب
 * ═══════════════════════════════════════════════════════════════════════ */
.inline-details { margin-top: var(--space-2); }
.inline-details > summary {
    cursor: pointer; color: var(--brand); font-size: .9rem; font-weight: 600;
    padding: var(--space-1) 0;
}
.inline-details[open] > summary { margin-bottom: var(--space-2); }
.inline-details .field { margin-bottom: var(--space-2); }
.inline-details .form-actions { margin-top: var(--space-2); }

.file-list {
    list-style: none; margin: 0 0 var(--space-4); padding: var(--space-3);
    max-height: 260px; overflow: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.file-list li { padding: 2px 0; }
.file-list-muted li { color: var(--ink-soft); }

/* ═══════════════════════════════════════════════════════════════════════
 *  شاشات الزائر (دخول، تسجيل، تركيب)
 * ═══════════════════════════════════════════════════════════════════════ */
body.guest { background: var(--bg); }
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--space-4); }
.auth-card {
    width: 100%; max-width: 420px;
    padding: var(--space-6);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.auth-card-wide { max-width: 640px; }
.auth-title { font-size: 1.25rem; text-align: center; margin-bottom: var(--space-1); }
.auth-sub { text-align: center; color: var(--ink-soft); font-size: .9rem; margin-bottom: var(--space-5); }
.auth-alt { text-align: center; font-size: .9rem; margin: var(--space-3) 0 0; }

/* خطوات التركيب */
.steps { display: flex; list-style: none; margin: 0 0 var(--space-5); padding: 0; gap: var(--space-2); }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); font-size: .78rem; color: var(--ink-soft); }
.step-num {
    display: grid; place-items: center; width: 30px; height: 30px;
    border-radius: 50%; border: 2px solid var(--line-strong); font-weight: 700;
}
.step.current .step-num { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.step.current .step-label { color: var(--brand); font-weight: 700; }
.step.done .step-num { border-color: var(--success); color: var(--success); }
.step-label { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
 *  الموبايل — الجداول بطاقات، والقائمة درج
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /*
     | حارس ضدّ التمرير الأفقي.
     |
     | القائمة المغلقة تُزاح بعرضها كاملاً خارج الحافة وهي `fixed`. وقياس
     | المستند في المتصفّح أثبت أن مجال التمرير لم يتمدّد إليها — لكن
     | متصفّحات الهواتف تختلف في هذا، والتمرير الأفقي المكسور شكوى متكرّرة
     | يصعب تشخيصها بعد وقوعها. فالحارس هنا وقاية لا علاج.
     |
     | و`clip` لا `hidden`: لأن `hidden` تُنشئ حاوية تمرير جديدة فتُبطل
     | `position: sticky` في الترويسة والقائمة معاً.
     */
    html, body { overflow-x: clip; }

    .sidebar {
        position: fixed; inset-block: var(--topbar) 0; inset-inline-start: 0;
        z-index: 40; width: 82vw; max-width: var(--sidebar);
        transform: translateX(-105%);
        transition: transform .2s ease;
        box-shadow: var(--shadow);
    }
    html[dir="rtl"] .sidebar { transform: translateX(105%); }
    .sidebar.open, html[dir="rtl"] .sidebar.open { transform: translateX(0); }

    .content { padding: var(--space-4); }
    .grid-2, .readonly-pair, .filters-row, .filters-row-4 { grid-template-columns: 1fr; }
    .filters-row .btn { width: 100%; }
    .page-head { flex-direction: column; align-items: stretch; }

    /*
     | الجدول يصير بطاقات.
     |
     | لأن التمرير الأفقي على الهاتف يُخفي أعمدة لا يعرف المستخدم أنها
     | هناك. وكل خلية تحمل عنوانها في `data-label` فتُقرأ وحدها.
     */
    .table-wrap { overflow: visible; margin: 0; padding: 0; }
    .table thead { display: none; }
    .table, .table tbody, .table tr, .table td, .table th { display: block; width: 100%; }
    .table tr {
        margin-bottom: var(--space-3); padding: var(--space-2);
        border: 1px solid var(--line); border-radius: var(--radius-sm);
        background: var(--surface);
    }
    .table td, .table th { border-bottom: 1px dashed var(--line); padding: var(--space-2); }
    .table tr td:last-child, .table tr th:last-child { border-bottom: 0; }
    /*
     | وصفُّ المجموع خلاياه `th` لا `td` — فلولا ضمّه هنا لظهر على الهاتف
     | أرقاماً عاريةً بلا عنوان، تحت بطاقاتٍ كلُّ خليةٍ فيها معنونة.
     */
    .table td[data-label]::before,
    .table tfoot th[data-label]::before {
        content: attr(data-label);
        display: block; font-size: .75rem; font-weight: 700; color: var(--ink-soft);
        margin-bottom: 2px;
    }
    .row-actions .btn { flex: 1; }
    .steps { flex-wrap: wrap; }
}

@media (min-width: 901px) {
    .nav-toggle { display: none; }
}

/* حجاب الدرج على الهاتف */
.scrim {
    position: fixed; inset: var(--topbar) 0 0; z-index: 35;
    background: rgba(22, 32, 42, .38);
}

/* ═══════════════════════════════════════════════════════════════════════
 *  تفضيل تقليل الحركة — يُحترم لا يُتجاهل
 * ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  الطباعة — A4 طولي، بلا قوائم ولا أزرار
 * ═══════════════════════════════════════════════════════════════════════ */
@media print {
    @page { size: A4 portrait; margin: 14mm; }

    .topbar, .sidebar, .btn, .form-actions, .filters, .pager, .skip-link, .tabs { display: none !important; }

    /*
     | ── ولا تنبيهات النظام في ورقةٍ تخرج إلى عميل ─────────────────────
     |
     | لافتةُ «نسخة تجريبية» أو تنبيهُ حدّ ائتمانٍ على **كشف حسابٍ يُرسَل
     | إلى عميل** تقول عنّا إننا لا نقرأ ما نرسله — وربّما كشفت للعميل
     | ما لا يعنيه. والورقة للمستند وحده.
     */
    /*
     | ── والورقةُ فاتحةٌ دائماً ولو كانت الشاشةُ ليلية ──────────────────
     |
     | **لا تُطبَع ورقةٌ سوداء.** فحبرُ الطابعة يُستنزَف، والفاتورةُ تخرج
     | لا تُقرأ، *ومن سلّمها لعميلٍ سلّمه ورقةً سوداء*. **والوضع الليليّ
     | شاشةٌ لا ورق** — فتُبطَل رموزُه هنا وتعود رموزُ الفاتح.
     */
    html[data-theme="dark"] {
        color-scheme: light;

        --brand: #0E5468;
        --brand-ink: #ffffff;
        --topbar-bg: #0E5468;
        --topbar-ink: #ffffff;
        --sidebar-bg: #ffffff;
        --bg: #ffffff;
        --surface: #ffffff;
        --surface-2: #F1F4F7;
        --ink: #16202A;
        --ink-soft: #5A6874;
        --line: #DFE5EA;
        --line-strong: #C6D0D8;
        --success: #1B7A4B;
        --success-bg: #E7F5EE;
        --success-line: #BFE3D0;
        --warning: #8A5A00;
        --warning-bg: #FDF3E0;
        --warning-line: #EFD8AC;
        --danger: #A31D1D;
        --danger-bg: #FBEAEA;
        --danger-line: #F0C9C9;
        --info: #12566B;
        --info-bg: #E6F1F4;
        --info-line: #C3DDE4;
    }

    .alert, .flash-stack, .banner, .license-banner { display: none !important; }
    body { background: #fff; font-size: 12pt; }   /* الورقُ أبيضُ دائماً */
    .content { padding: 0; max-width: none; }
    .card { border: 0; box-shadow: none; margin: 0 0 8mm; break-inside: avoid; }
    .card-body, .card-head { padding: 0 0 4mm; }
    .table { font-size: 10pt; }
    .table thead { display: table-header-group; }
    .table tr { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  ورقة التقرير — شاشةً وورقاً
 * ═══════════════════════════════════════════════════════════════════════ */
.report-actions {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 14px;
}

/* شريط أدوات فوق الورقة — يظهر على الشاشة ويختفي عند الطباعة */
.sheet-bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.sheet {
    background: var(--surface-2);
    margin: 0;
}

.sheet-page {
    background: var(--surface);
    max-width: 210mm;
    margin: 16px auto;
    padding: 14mm;
    box-shadow: 0 1px 3px rgba(22, 32, 42, .12);
}

.sheet-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    border-bottom: 2px solid var(--brand); padding-bottom: 8px; margin-bottom: 14px;
}

.sheet-org   { font-size: 1.15rem; margin: 0; }
.sheet-title { font-size: 1rem; margin: 2px 0 0; color: var(--brand); }
.sheet-meta  { margin: 4px 0 0; font-size: .85rem; color: var(--ink-soft); }
.sheet-legal { margin: 4px 0 0; font-size: .78rem; color: var(--ink-soft); line-height: 1.6; }
/* الشعار مقيَّد بالارتفاع — فلا يزيح الترويسة مهما كانت أبعاد الملف */
.sheet-logo  { max-block-size: 56px; max-inline-size: 180px; object-fit: contain;
               margin-inline-end: 14px; align-self: flex-start; }
.org-logo-preview { max-block-size: 64px; max-inline-size: 200px; object-fit: contain;
               border: 1px solid var(--line); border-radius: 8px; padding: 6px;
               background: var(--surface); }

.sheet-stamp {
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-size: .75rem; color: var(--ink-soft); text-align: end;
}

.sheet-foot {
    max-width: 210mm; margin: 0 auto 24px; padding: 8px 14mm;
    font-size: .75rem; color: var(--ink-soft); text-align: center;
}

/* صفوف القوائم المالية — الإزاحة تُظهر الشجرة بلا خطوط */
.rep-lvl-1 .rep-name { padding-inline-start: 14px; }
.rep-lvl-2 .rep-name { padding-inline-start: 28px; }
.rep-lvl-3 .rep-name { padding-inline-start: 42px; }
.rep-lvl-4 .rep-name { padding-inline-start: 56px; }
.rep-group   { background: var(--surface-2); font-weight: 600; }
.rep-section { background: var(--surface-2); font-weight: 700; }
.rep-total th, .rep-total td { border-top: 2px solid var(--line); font-weight: 700; }
.rep-net th, .rep-net td { border-top: 3px double var(--brand); font-weight: 700; }
/* مجمل الربح: سطر نتيجةٍ وسيط — أخفّ من الصافي وأثقل من المجموع */
.rep-gross th, .rep-gross td {
    border-top: 2px solid var(--brand);
    background: var(--surface-2);
    font-weight: 700;
}
.rep-cogs .rep-name::before {
    content: '';
    display: inline-block;
    inline-size: 6px; block-size: 6px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: var(--brand);
    vertical-align: middle;
}
.rep-neg { color: var(--danger); }

/* نسبة التغيّر تحت رقمه — أصغر وأخفت، فالرقم هو الأصل */
.rep-pct {
    display: block;
    font-size: .75rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}
.rep-compare-note { font-size: .875rem; color: var(--ink-soft); margin: 0 0 var(--space-3); }

/*
 | ── الانحراف: موافقٌ أخضر ومخالفٌ أحمر — واللون تأكيدٌ لا معنى ──────────
 |
 | العلامة (+ أو −) تحمل المعنى وحدها، فمن لا يميّز الألوان يقرأ نفس
 | الشيء. واللون يجعل السطر المخالف يُلتقط بنظرةٍ واحدة على قائمةٍ
 | من أربعين بنداً.
 */
.rep-good { color: var(--success); }

/* ═══════════════════════════════════════════════════════════════════════
 *  لوحة المؤشّرات — نبضٌ وقائمةُ عمل
 * ═══════════════════════════════════════════════════════════════════════ */

/*
 | بطاقة النبض: العنوان أوّلاً ثم الرقم كبيراً ثم الفرق صغيراً تحته.
 | والترتيب مقصود — العين تقرأ العنوان لتعرف «ما هذا»، ثم الرقم، ثم
 | الفرق إن أرادت. وعكسُه (الرقم أوّلاً) يجعل أربعة أرقامٍ متجاورة بلا
 | معنىً حتى تُقرأ عناوينها.
 */
.kpi-pulse { gap: var(--space-3); }

.kpi-tile {
    align-items: flex-start;
    text-align: start;
    gap: .15rem;
}

.kpi-tile .tile-value { font-size: 1.5rem; line-height: 1.2; }
.kpi-tile .tile-label { order: -1; font-weight: 600; }

.kpi-delta {
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.kpi-note { font-size: .75rem; color: var(--ink-soft); }

/*
 | ── ما جدَّ منذ آخر دخول: عددٌ ثم ما هو ─────────────────────────────────
 |
 | العدد أوّلاً وبخطٍّ كبير، فهو ما تبحث عنه العين. والمبلغ تحته أصغر —
 | *فمن أراد التفصيل نقر*.
 */
.kpi-news { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.kpi-news-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); color: inherit; text-decoration: none;
    min-height: 44px;
}

a.kpi-news-row:hover { border-color: var(--line-strong); }

.kpi-news-count {
    font-size: 1.35rem; font-weight: 700; line-height: 1;
    min-width: 2.5rem; text-align: center; color: var(--brand);
}

.kpi-news-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kpi-news-amount { font-size: .8125rem; color: var(--ink-soft); }

/*
 | قائمة العمل: سطرٌ واحد لكل شيءٍ يُفعل، وشريطٌ جانبيّ يحمل درجة الإلحاح.
 | والشريط في البداية المنطقية (inline-start) فينقلب مع اتجاه الصفحة.
 */
.kpi-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.kpi-action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-inline-start: 3px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
}

.kpi-action-mark { display: inline-flex; flex: none; }
.kpi-action-body { flex: 1 1 auto; min-width: 0; }
.kpi-action-detail { display: block; font-size: .8125rem; color: var(--ink-soft); }

.kpi-danger  { border-inline-start-color: var(--danger); }
.kpi-danger  .kpi-action-mark { color: var(--danger); }
.kpi-warning { border-inline-start-color: var(--warning); }
.kpi-warning .kpi-action-mark { color: var(--warning); }
.kpi-info    .kpi-action-mark { color: var(--ink-soft); }

@media (max-width: 640px) {
    /*
     | وعلى الموبايل يهبط الزرّ سطراً — فزرٌّ بجوار نصٍّ طويل في شاشةٍ
     | ضيّقة يعصر النصّ في عمودٍ من حرفين.
     */
    .kpi-action { flex-wrap: wrap; }
    .kpi-action .btn { width: 100%; min-height: 44px; }

    /*
     | ── والنبض رقمٌ واحد في السطر (الدفعة ٣٠) ─────────────────────────
     |
     | **المالك يفتح هاتفه ويريد الرقم في ثانية.** وشبكةُ `160px` تضع
     | رقمين في السطر على شاشةٍ عرضها ٣٩٠، فيصغر الخطّ ويُقطَع العنوان
     | في سطرين — <em>ويمرّ عليه البصر بلا أن يُقرأ</em>.
     |
     | فرقمٌ واحد في السطر، وخطٌّ أكبر، **وهدفُ لمسٍ لا يقلّ عن ٤٤ بكسلاً**
     | لمن ينقره ليفتح تقريره.
     */
    .kpi-pulse { grid-template-columns: 1fr; }
    .kpi-tile { min-height: 44px; }
    .kpi-tile .tile-value { font-size: 2rem; }
    .kpi-tile .tile-label { font-size: .95rem; }
}

@media print {
    /* اللوحة لا تُطبع أزرارها — الورقة لا يُضغط عليها */
    .kpi-action .btn { display: none; }
}
.rep-bad  { color: var(--danger); }

/* شبكة الموازنة: خلايا إدخالٍ ضيّقة، وصفٌّ لكل حساب */
.table-grid td { padding-block: var(--space-1); }
.input-cell {
    width: 8rem;
    min-width: 6rem;
    padding: .35rem .5rem;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    /*
     | وعلى الموبايل يبقى الجدول جدولاً — لا بطاقات.
     |
     | فشبكةُ إدخالٍ محوّلةً إلى بطاقات تُخرج اثني عشر حقلاً فوق بعضها لكل
     | حساب، وتُفقد المقارنة بين الفترات وهي الغرض. فيُمرَّر أفقياً هنا
     | **عمداً**، وعمود الحساب يثبت في مكانه.
     */
    .table-grid { min-width: 44rem; }
    .table-grid td, .table-grid th { display: table-cell; }
    .table-grid td::before { content: none; }
    .input-cell { width: 5.5rem; min-width: 5rem; }
}

@media print {
    .sheet-bar { display: none !important; }
    .sheet, .sheet-page { background: #fff; margin: 0; padding: 0; box-shadow: none; max-width: none; }
    .sheet-foot { display: none; }
    .report-actions { display: none !important; }
    .sheet-head { break-after: avoid; }
}

/* قائمة خطوات مرقّمة داخل بطاقة — للإرشادات القصيرة */
.steps-list { margin: 0 0 var(--space-3); padding-inline-start: 1.4em; line-height: 1.9; }
.steps-list li { margin-bottom: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════
 *  شريط التقدّم — للمهامّ التي تعمل على دفعات
 * ═══════════════════════════════════════════════════════════════════════ */
.progress {
    height: 12px; border-radius: 999px; overflow: hidden;
    background: var(--surface-2);
    border: 1px solid var(--line);
    margin: var(--space-3) 0 var(--space-2);
}

.progress-bar {
    height: 100%; background: var(--brand);
    transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   التطبيق — شرائط الحالة وطابور الإرسال
   ═══════════════════════════════════════════════════════════════════════
   شريطٌ في أعلى المحتوى لا نافذةٌ تعترض: فالمستخدم بلا شبكة يحتاج أن
   يُكمل عمله، لا أن يغلق تحذيراً كل دقيقة. */
.pwa-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    line-height: 1.7;
}

.pwa-banner-warn { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-line); }
.pwa-banner-info { background: var(--info-bg); color: var(--info); border: 1px solid var(--info-line); }

.pwa-banner-action {
    margin-inline-start: auto;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    border-radius: var(--radius-sm);
    /* ٤٤ بكسل حدُّ اللمس — وزرٌّ أصغر منه يُخطئه الإبهام على الهاتف. */
    min-height: 36px;
    padding: 4px 14px;
    font: inherit;
    cursor: pointer;
}

.pwa-banner-action:hover { background: rgba(0, 0, 0, .06); }

.pwa-toasts {
    position: fixed;
    inset-block-end: 16px;
    inset-inline-start: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(380px, calc(100vw - 32px));
}

.pwa-toast {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    font-size: .9rem;
    line-height: 1.7;
    background: var(--surface);
    border-inline-start: 4px solid var(--brand);
    transition: opacity .35s ease, transform .35s ease;
}

.pwa-toast-success { border-inline-start-color: var(--success); }
.pwa-toast-danger { border-inline-start-color: var(--danger); }
.pwa-toast.is-gone { opacity: 0; transform: translateY(8px); }

.preview-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* الأيقونة صغيرة دائماً — والحدُّ في الورقة لا في الملف. */
.pwa-icon-preview {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .pwa-toast { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  فاصلُ ربط الدعم في شاشة الدخول
 *
 *  فراغٌ وخطٌّ لا أكثر — والمحتوى يرسمه التكامل الخارجيّ بألوانه.
 *  ولا يظهر شيءٌ منه حين لا يُركَّب المجلَّد (ADR-131).
 * ═══════════════════════════════════════════════════════════════════════ */
.auth-connector { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════════
 *  شاشات الزائر — لوحتان: هويةٌ ونموذج
 *
 *  أوّلُ ما يراه المستخدم من النظام شاشةُ الدخول — وشاشةٌ عارية تجعله
 *  يسأل إن كان في المكان الصحيح. وتُبنى من توكنز النظام نفسها: لا لونَ
 *  مخترع ولا خطَّ إضافي. وعلى الهاتف تنزوي لوحةُ الهوية ويبقى النموذج
 *  كامل العرض — فمن يفتح من هاتفه جاء ليدخل لا ليقرأ تعريفاً.
 * ═══════════════════════════════════════════════════════════════════════ */
body.guest{
    background:
        radial-gradient(1100px 520px at 85% -10%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(160deg, var(--auth-a) 0%, var(--auth-b) 52%, var(--auth-c) 100%);
    min-height:100vh;
}
.auth-wrap{ padding:clamp(14px,4vw,40px); }

.auth-shell{
    display:grid; grid-template-columns:1.05fr .95fr;
    width:100%; max-width:940px; overflow:hidden;
    background:var(--surface); border-radius:22px;
    box-shadow:0 34px 90px rgba(4,26,33,.38), 0 2px 6px rgba(4,26,33,.16);
}

/* لوحة الهوية */
.auth-brand{
    position:relative; overflow:hidden; color:var(--auth-ink);
    padding:clamp(24px,3.4vw,42px);
    background:linear-gradient(158deg, var(--auth-panel-a) 0%, var(--auth-panel-b) 92%);
    display:flex; flex-direction:column; gap:18px;
}
.auth-brand::after{
    content:""; position:absolute; inset-inline-end:-70px; top:-70px;
    width:240px; height:240px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,255,255,.13), transparent 70%);
    pointer-events:none;
}
.auth-mark{
    width:54px; height:54px; border-radius:16px; display:grid; place-items:center;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
    font-weight:800; font-size:19px; letter-spacing:.5px;
}
.auth-brand h2{ font-size:clamp(19px,2.3vw,25px); line-height:1.35; margin:0; font-weight:800; }
/*
 | اللون صريحٌ هنا عمداً: القاعدة العامة `.lede` تلوّنه بالرمادي الهادئ،
 | وهي أخصُّ من الوراثة عن `.auth-brand` — فيخرج نصٌّ رماديّ على خلفيةٍ
 | داكنة لا يكاد يُقرأ. **وقد ظهر ذلك في لقطة المتصفّح لا في المراجعة.**
 */
.auth-brand .lede{ margin:0; font-size:14.5px; line-height:1.85; color:var(--auth-ink); opacity:.9; }
.auth-points{ list-style:none; padding:0; margin:auto 0 0; display:grid; gap:11px; }
.auth-points li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; opacity:.94; }
.auth-points .tick{
    flex:none; width:20px; height:20px; border-radius:50%; margin-top:2px;
    background:rgba(255,255,255,.16); display:grid; place-items:center; font-size:12px; font-weight:700;
}
.auth-foot{ margin:0; font-size:12px; color:var(--auth-ink); opacity:.72; }

/* لوحة النموذج */
.auth-side{ padding:clamp(24px,3.4vw,42px); display:flex; align-items:center; }
.auth-card{
    width:100%; max-width:none; padding:0;
    background:none; border:0; box-shadow:none; border-radius:0;
}
.auth-card-wide{ max-width:none; }
.auth-title{ font-size:23px; font-weight:800; text-align:start; margin:0 0 6px; }
.auth-sub{ text-align:start; font-size:.92rem; margin:0 0 22px; }
.auth-alt{ text-align:start; font-size:.9rem; margin:12px 0 0; }
.auth-side .btn-block{ min-height:48px; font-weight:700; }

@media (max-width:860px){
    .auth-shell{ grid-template-columns:1fr; max-width:440px; border-radius:18px; }
    .auth-brand{ padding:20px; gap:10px; }
    .auth-brand .lede, .auth-points{ display:none; }
    .auth-brand h2{ font-size:18px; }
    .auth-mark{ width:44px; height:44px; border-radius:13px; font-size:16px; }
    .auth-side{ padding:22px; }
}
@media (prefers-reduced-motion:reduce){ .auth-shell{ transition:none; } }

/* ── بطاقةُ طلبٍ ينتظر قراراً ─────────────────────────────────────────
   قرارٌ يُتَّخذ لكلِّ طلبٍ وحده، فصفٌّ في جدولٍ لا يكفي: فيه سطرُ سببٍ
   وزرّان. والبطاقةُ تفصل طلباً عن طلبٍ فلا يُعتمَد غيرُ المقصود. */
.pending-card {
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: var(--space-3);
}
.pending-card p { margin: 0 0 var(--space-2); }
.pending-card .form-actions { margin-top: var(--space-2); }