/* =========================================================================
   Maadaty Admin — design system
   «فولاذ وسلامة»: لون تمييز واحد (أزرق فولاذي من درع الأيقونة) وثانويٌّ كهرماني
   (خوذة السلامة) على محايداتٍ رماديةٍ باردة. أسطح بيضاء مسطّحة، لا تدرّجات ولا
   ضباب ولا توهّج: كل حالةٍ تُقرأ من الحدّ واللون الخلفي الخفيف وحده.
   ========================================================================= */

:root {
    /* Brand — the single accent. القيم الصريحة على أسماء --brand-* لأن صفحات الخصوصية التي
       يرسمها الخادم (LegalHtmlRenderer) تُطابَق بها حرفياً في اختبار التكامل.
       الأسماء ثابتة والقيم وحدها تتبدّل. */
    --brand-teal: #1C5A80;
    --brand-teal-strong: #154A6B;
    --brand-teal-soft: #E9F2F8;
    --brand-teal-softer: #F4F8FB;
    --brand-champagne: #A0680A;
    --brand-champagne-soft: #FDF1DA;
    --accent: var(--brand-teal);
    --accent-strong: var(--brand-teal-strong);
    --accent-soft: var(--brand-teal-soft);
    --accent-softer: var(--brand-teal-softer);
    --accent-ring: rgba(28, 90, 128, 0.20);

    /* Neutrals */
    --bg: #F6F8FA;
    --bg-elevated: #EFF3F7;
    --surface: #FFFFFF;
    --surface-2: #F7F9FB;
    --hover: #F1F5F9;
    --border: #E4EAF0;
    --border-strong: #CFD9E2;
    --divider: #EDF1F5;

    /* Text */
    --text: #16232E;
    --text-strong: #0B131B;
    --text-muted: #46586A;
    --text-faint: #74828E;

    /* Semantic */
    --success: #0D6B44;
    --success-soft: #E4F5EA;
    --danger: #B01C2E;
    --danger-strong: #8F1626;
    --danger-soft: #FDEAEC;
    --warning: #7A5A07;
    --warning-soft: #FBF0D9;
    --info: #125A7A;
    --info-soft: #E6F1F8;
    --neutral-soft: #EFF3F7;

    /* على الأسطح الملوّنة: نصٌّ أبيض فوق لون التمييز والخطر والنجاح. */
    --on-accent: #FFFFFF;

    /* حدود الحالات — نغمةٌ أغمق قليلاً من الخلفية الخفيفة تحدّ الصندوق بلا صراخ. */
    --border-hover: #B4C0CC;
    --accent-border: #A9C7DC;
    --danger-border: #F5C6CD;
    --success-border: #BCE0CA;
    --warning-border: #F0DCAE;
    --info-border: #C3DCEC;

    /* نصّ الحالة على خلفيتها الخفيفة حين يحتاج تبايناً أعلى من لون الحالة نفسه. */
    --danger-text-strong: #7A1220;
    --success-text-strong: #0A4E32;
    --warning-text-strong: #5E4505;
    --info-text-strong: #0E4159;

    /* بنفسجيّ حالة «قيد التجهيز» وحده — ليس لوناً من النظام بل تمييزُ حالةٍ واحدة. */
    --purple: #5B3A9E;
    --ready: #0A5F55;
    --ready-soft: #E0F1EE;
    --purple-soft: #F0EAFA;

    /* ستارة ما تحت النوافذ المنبثقة والدرج. */
    --scrim: rgba(22, 35, 46, 0.46);

    /* Type */
    --font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
    /* الأرقام بخطّ الواجهة نفسه بأعداد جدولية: الخطّ أحادي المسافة كان يباعد «د.ل»
       ويسقط على Courier في ويندوز. */
    --font-numeric: var(--font-sans);

    /* Geometry */
    --r-xs: 6px;
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    /* أهدافُ لمسٍ لا مواضعَ مؤشّر: 40 أرضيةً للحقول والأزرار، و34 للمصغَّر منها. */
    --control-h: 40px;
    --control-h-sm: 34px;
    --sidebar-w: 252px;
    --appbar-h: 56px;

    /* Elevation — used only where something floats above the page */
    --shadow-xs: 0 1px 2px rgba(22, 35, 46, 0.05);
    --shadow-sm: 0 1px 3px rgba(22, 35, 46, 0.08);
    --shadow-md: 0 10px 28px rgba(22, 35, 46, 0.12);
    --shadow-lg: 0 24px 56px rgba(22, 35, 46, 0.20);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.6;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button, input, select, textarea { font-family: inherit; }
h1:focus { outline: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }

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

/* ---------- Utilities ---------- */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.strong { font-weight: 600; color: var(--text-strong); }
.mono, .num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: right; }
/* نصّ أدخله الناس (اسم صنف لاتيني فيه نقطة أو قوس): يُقرأ اتجاهه من أوّل حرف قوي
   فلا تقفز النقطة إلى أوّل السطر. */
.bidi { unicode-bidi: plaintext; text-align: right; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Boot & fatal states ---------- */
.full-screen-loader {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 14px;
    z-index: 1000;
}
.spinner {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: spin .8s linear infinite;
    flex: none;
}
.spinner.small { width: 16px; height: 16px; border-width: 2px; }
.btn-primary .spinner, .btn-danger-sm .spinner, .btn-primary-glow .spinner { border-color: color-mix(in srgb, var(--on-accent) 35%, transparent); border-top-color: var(--on-accent); }
@keyframes spin { to { transform: rotate(360deg); } }

#blazor-error-ui {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 14px 22px;
    background: var(--text-strong);
    color: var(--on-accent);
    display: none;
    z-index: 1100;
    direction: rtl;
}
#blazor-error-ui .reload { color: var(--accent-border); margin-inline-start: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; top: 12px; inset-inline-start: 16px; }

.blazor-error-boundary {
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger-strong);
    padding: 16px;
    border-radius: var(--r-lg);
}
.blazor-error-boundary::after { content: "حدث خطأ غير متوقع في هذا الجزء من الصفحة."; }

.loading-progress {
    position: relative;
    display: block;
    width: 6rem; height: 6rem;
    margin: 22vh auto 1rem auto;
}
.loading-progress circle {
    fill: none;
    stroke: var(--accent-soft);
    stroke-width: 0.5rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}
.loading-progress circle:last-child {
    stroke: var(--accent);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text { text-align: center; color: var(--text-muted); font-weight: 500; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "تحميل…"); }

/* =========================================================================
   Login
   ========================================================================= */
.login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    background: var(--bg);
}
.login-wrap { width: 100%; max-width: 420px; }
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 32px 30px 26px;
    box-shadow: var(--shadow-sm);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-logo {
    width: 42px; height: 42px;
    border-radius: 11px;
    background: var(--accent);
    display: grid; place-items: center;
    color: var(--on-accent);
    font-weight: 700;
    font-size: 18px;
}
.login-brand-text { display: flex; flex-direction: column; line-height: 1.3; }
.login-brand-text .name { font-size: 16px; font-weight: 700; color: var(--text-strong); }
.login-brand-text .sub { font-size: 12.5px; color: var(--text-muted); }
.login-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; color: var(--text-strong); }
.login-subtitle { font-size: 14px; color: var(--text-muted); margin: 0 0 22px; line-height: 1.7; }

/* قواعد حقول الدخول محصورة في بطاقة الدخول: كانت عامّة على `.field input` فتسرّبت إلى
   فلاتر التاريخ في اللوحة فكبّرتها وعكست «يوم/شهر». */
.login-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.login-card .field label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.login-card .input-wrap { position: relative; }
.login-card .field input {
    width: 100%;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 0 14px;
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.login-card .field input[type=tel] { direction: ltr; text-align: right; }
.login-card .field input::placeholder { color: var(--text-faint); }
.login-card .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.login-card .input-wrap input { padding-inline-end: 44px; }
.login-card .reveal {
    position: absolute;
    inset-inline-end: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; background: transparent;
    color: var(--text-muted);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.login-card .reveal:hover { background: var(--hover); color: var(--text); }
.login-card .reveal svg { width: 18px; height: 18px; }

.btn-primary-glow {
    margin-top: 8px;
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--on-accent);
    cursor: pointer;
    background: var(--accent);
    transition: background-color .12s;
}
.btn-primary-glow:hover:not(:disabled) { background: var(--accent-strong); }
.btn-primary-glow:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary-glow .btn-row { display: inline-flex; align-items: center; gap: 10px; justify-content: center; width: 100%; }
a.btn-primary-glow { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

.login-alert, .login-notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.6;
}
.login-alert { background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger-strong); }
.login-notice { background: var(--info-soft); border: 1px solid var(--info-border); color: var(--info-text-strong); }
.login-alert svg, .login-notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

.login-card.not-found { text-align: center; }
.login-card.not-found .login-logo { width: 64px; height: 42px; margin: 0 auto 16px; font-size: 16px; }

.login-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--text-faint);
}
.login-footer .secure { display: inline-flex; align-items: center; gap: 6px; }
.login-footer svg { width: 14px; height: 14px; }

/* =========================================================================
   Shell: sidebar · app bar · page
   ========================================================================= */
.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    background: var(--bg);
}

.shell-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-inline-end: 1px solid var(--border);
    z-index: 70;
}

.shell-brand {
    flex: none;
    height: var(--appbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-bottom: 1px solid var(--divider);
}
.shell-brand .logo {
    width: 32px; height: 32px;
    border-radius: 9px;
    background: var(--accent);
    display: grid; place-items: center;
    color: var(--on-accent);
    font-weight: 700;
    font-size: 15px;
    flex: none;
}
.shell-brand .text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.shell-brand .text strong { font-size: 14.5px; color: var(--text-strong); }
.shell-brand .text span { font-size: 11.5px; color: var(--text-muted); }
/* زرّا التنقّل على الجوّال — الوحيدان لفتح الدرج وإغلاقه، فأرضيّتهما أوسع من بقية
   أزرار الأيقونات. */
.shell-brand .sidebar-close { margin-inline-start: auto; display: none; width: 40px; height: 40px; }

/* الشريط يمرّر وحده: كان بارتفاع الشاشة بلا تمرير، فيسقط «تكامل الأفق» وصندوق الحساب
   وزرّ الخروج تحت حافة أي شاشة حاسوب محمول. */
.shell-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.shell-nav .label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-faint);
    padding: 14px 10px 6px;
}
.shell-nav .label:first-child { padding-top: 4px; }
.shell-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    transition: background-color .12s, color .12s;
}
.shell-nav a:hover { background: var(--hover); color: var(--text-strong); text-decoration: none; }
.shell-nav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.shell-nav a.active svg { color: var(--accent); }
.shell-nav svg { width: 18px; height: 18px; flex: none; }
.shell-nav .nav-count {
    margin-inline-start: auto;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 11.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-variant-numeric: tabular-nums;
}

.shell-userbox {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--divider);
    background: var(--surface);
}
.shell-userbox .avatar, .avatar-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 13px;
    flex: none;
}
.shell-userbox .who { flex: 1; min-width: 0; line-height: 1.3; }
/* الاسم لا يُقصّ: يلتفّ على سطرين ويُحدّ بهما، والسمة title تحمله كاملاً. كان
   ellipsis يبتر أسماء المسؤولين الطويلة فلا يُعرف صاحب الجلسة من الشريط. */
.shell-userbox .who strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-strong);
    font-size: 13.5px;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.shell-userbox .who span { color: var(--text-muted); font-size: 12px; }
.shell-userbox .who a { color: inherit; }
.shell-userbox button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.shell-userbox button:hover { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.shell-userbox svg { width: 15px; height: 15px; }

.shell-scrim { display: none; }

.shell-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
}

.shell-appbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: var(--appbar-h);
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.shell-appbar .nav-toggle { display: none; width: 40px; height: 40px; }
.shell-appbar .appbar-brand { display: none; font-weight: 700; color: var(--text-strong); }
/* تاريخ اليوم: يبقى على سطرٍ واحد (تاريخ لا عنوان) لكنه لا يُبتر بثلاث نقاط. */
.shell-appbar .appbar-context { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.shell-appbar .spacer { flex: 1; }
.appbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.appbar-link:hover { background: var(--hover); text-decoration: none; }
.appbar-link svg { width: 16px; height: 16px; color: var(--text-muted); }
.appbar-link .count {
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px;
    background: var(--warning-soft);
    color: var(--warning);
    font-size: 11.5px; font-weight: 700;
    display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- Account menu ---------- */
.account-menu { position: relative; }
/* ارتفاعٌ أدنى لا ثابت: الاسم صار يلتفّ على سطرين فالزرّ ينمو معه بدل أن يقصّه. */
.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 8px 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: right;
}
.account-trigger:hover, .account-menu.open .account-trigger { background: var(--hover); border-color: var(--border); }
.account-trigger .avatar-circle { width: 32px; height: 32px; font-size: 12.5px; }
.account-trigger .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.account-trigger .who strong {
    font-size: 13.5px;
    color: var(--text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
}
.account-trigger .who span { font-size: 11.5px; color: var(--text-muted); }
.account-trigger .caret { width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s; }
.account-menu.open .account-trigger .caret { transform: rotate(180deg); }

.menu-scrim { position: fixed; inset: 0; z-index: 80; background: transparent; }
.account-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 90;
    /* لا تتجاوز عرض الشاشة على الهواتف الضيّقة. */
    width: min(264px, calc(100vw - 32px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    padding: 6px;
}
.account-dropdown .menu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--divider);
    margin-bottom: 6px;
}
.account-dropdown .menu-head .avatar-circle { width: 38px; height: 38px; }
.account-dropdown .menu-head div { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
/* رأس القائمة المنسدلة يعرض الاسم كاملاً بلا حدٍّ للأسطر: هو الموضع الذي يتأكّد
   فيه صاحب الجلسة من هويّته قبل الخروج. */
.account-dropdown .menu-head strong { font-size: 14px; color: var(--text-strong); white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.account-dropdown .menu-head span { font-size: 12.5px; color: var(--text-muted); }
.account-dropdown .menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    text-align: right;
    cursor: pointer;
}
.account-dropdown .menu-item:hover { background: var(--hover); text-decoration: none; }
.account-dropdown .menu-item svg { width: 17px; height: 17px; color: var(--text-muted); flex: none; }
.account-dropdown .menu-item.danger { color: var(--danger); }
.account-dropdown .menu-item.danger svg { color: var(--danger); }
.account-dropdown .menu-item.danger:hover { background: var(--danger-soft); }
.account-dropdown .menu-sep { height: 1px; background: var(--divider); margin: 6px 4px; }

/* ---------- Page header & body ---------- */
.shell-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding: 22px 28px 6px;
}
.shell-topbar > div:first-child { min-width: 0; flex: 1 1 320px; }
.shell-topbar h1 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
    color: var(--text-strong);
}
.shell-topbar .crumb {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 3px;
    line-height: 1.6;
    max-width: 78ch;
}
.shell-topbar .crumb .back { color: var(--accent); font-weight: 600; }
.shell-topbar .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shell-topbar .search-slot { flex: 0 1 340px; min-width: 220px; }

.shell-body {
    padding: 14px 28px 56px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* =========================================================================
   Cards & overview widgets
   ========================================================================= */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    min-width: 0;
}
.card.list-card, .list-card { padding: 0; overflow: hidden; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--divider);
}
.card-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-strong); }
.card-header .hint { color: var(--text-muted); font-size: 12.5px; }
.card-header .card-link { font-size: 13px; font-weight: 600; }
.card-body { padding: 18px; }
.card-body.compact { padding: 14px; }

.row-kpi {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.kpi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 16px 18px;
    color: inherit;
    min-width: 0;
}
a.kpi { transition: border-color .12s, background-color .12s; }
a.kpi:hover { border-color: var(--border-strong); background: var(--surface-2); text-decoration: none; }
.kpi .head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}
.kpi .head .icon {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--accent-softer);
    color: var(--accent);
    display: grid; place-items: center;
    flex: none;
}
.kpi .head .icon svg { width: 17px; height: 17px; }
.kpi .value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.kpi .meta {
    font-size: 12.5px;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}

.delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.delta.up { color: var(--success); background: var(--success-soft); }
.delta.down { color: var(--danger); background: var(--danger-soft); }
.delta.flat { color: var(--text-muted); background: var(--neutral-soft); }
.delta svg { width: 11px; height: 11px; }

.chart-card { padding: 0; overflow: hidden; }
.chart-svg { width: 100%; height: 240px; display: block; padding: 4px 12px 0; }
.chart-svg .grid line { stroke: var(--divider); }
.chart-svg .axis text { fill: var(--text-faint); font-size: 10.5px; font-family: var(--font-sans); }
.chart-svg .line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart-svg .area { fill: var(--accent); fill-opacity: .07; }
.chart-svg .dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
.chart-legend {
    display: flex; align-items: center; gap: 16px;
    padding: 10px 18px 0;
    color: var(--text-muted);
    font-size: 12.5px;
}
.chart-legend .swatch {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 3px; margin-inline-end: 6px;
    vertical-align: middle;
}

.split-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.list-rows { display: flex; flex-direction: column; }
.list-rows .row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 18px;
    border-bottom: 1px solid var(--divider);
}
.list-rows .row:last-child { border-bottom: 0; }
.list-rows .row .ava {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--neutral-soft);
    color: var(--text-muted);
    display: grid; place-items: center;
    font-weight: 700; font-size: 12px;
    flex-shrink: 0;
}
.list-rows .row .main { flex: 1; min-width: 0; }
.list-rows .row .name { font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.list-rows .row .sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.list-rows .row .num { font-size: 13.5px; color: var(--text-strong); font-weight: 600; white-space: nowrap; }

.status-breakdown { display: flex; flex-direction: column; gap: 11px; padding: 16px 18px 18px; }
.status-breakdown .row { display: flex; align-items: center; gap: 12px; color: inherit; }
a.status-breakdown-row:hover { text-decoration: none; }
a.status-breakdown-row:hover .label { color: var(--accent); }
/* عرضٌ أدنى لا ثابت: «بانتظار التأكيد» أطول من 104px فكان يُقصّ — الآن يتّسع العمود له. */
.status-breakdown .row .label { min-width: 104px; font-size: 12.5px; color: var(--text-muted); flex: 0 0 auto; white-space: nowrap; }
.status-breakdown .row .bar { flex: 1; height: 8px; border-radius: 4px; background: var(--neutral-soft); overflow: hidden; }
.status-breakdown .row .bar > span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .3s ease; }
.status-breakdown .row .count { font-weight: 600; font-size: 13px; min-width: 40px; text-align: end; color: var(--text-strong); font-variant-numeric: tabular-nums; }

.stat-tile { padding: 16px 18px; }
.stat-tile .v {
    font-size: 22px; font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    display: flex; align-items: baseline; gap: 6px;
}
.stat-tile .v .unit { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.stat-tile .sub { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.stat-tile .star { color: var(--brand-champagne); font-size: 16px; }

/* =========================================================================
   Forms — one control style for every page and dialog
   ========================================================================= */
.shell :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) {
    width: 100%;
    min-height: var(--control-h);
    padding: 0 12px;
    background-color: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.shell :where(textarea) { padding: 9px 12px; min-height: 76px; resize: vertical; line-height: 1.7; }
.shell :where(select) {
    appearance: none;
    -webkit-appearance: none;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346586A' stroke-width='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-size: 16px 16px;
    background-position: left 10px center;
    cursor: pointer;
    text-overflow: ellipsis;
}
.shell :where(select[multiple], select[size]) { background-image: none; padding: 4px; min-height: 120px; }
.shell :where(input, select, textarea)::placeholder { color: var(--text-faint); opacity: 1; }
.shell :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--border-hover); }
.shell :where(input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea):focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.shell :where(input, select, textarea):disabled {
    background-color: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}
.shell :where(input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true]) { border-color: var(--danger); }
/* الأرقام والهواتف والبريد تُكتب يساراً ويبقى الحقل محاذياً لبقية النموذج. */
.shell :where(input[type=tel], input[type=email], input[type=url], input[type=number], input[inputmode=tel], input[inputmode=numeric], input[inputmode=decimal], .phone-input) {
    direction: ltr;
    text-align: right;
}
.shell :where(input[type=date], input[type=datetime-local], input[type=time]) { direction: rtl; text-align: right; }
/* كروم يرسم نصّ الحقل الفارغ («يوم/شهر/سنة») بحروفٍ معكوسة في واجهة عربية مهما كان الاتجاه
   («موي/رهش»)، ولا تصل إليه قواعد الصفحة. فالحقل الفارغ يُعرض بأيقونة التقويم وحدها، وعنوانه
   فوقه يصف ما يُدخل؛ ويظهر النصّ حين يُركَّز عليه للكتابة. */
.shell input.is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.shell :where(input[type=checkbox], input[type=radio]) {
    width: 16px; height: 16px;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
    flex: none;
}

.shell .field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.shell .field > span:not(.hint):not(.field-error) { font-size: 13px; color: var(--text-muted); font-weight: 500; line-height: 1.4; }
.shell .field > span em { color: var(--danger); font-style: normal; margin-inline-start: 2px; }
.field-error { margin: 0; font-size: 12.5px; color: var(--danger); }
.hint { font-size: 12px; color: var(--text-faint); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.check-row, .editor-modal .check-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    margin: 0;
}
.check-row input { margin-top: 3px !important; }
.check-row span { display: flex; flex-direction: column; gap: 2px; }
.check-row strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.check-row em { font-style: normal; font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.notice, .editor-modal .notice {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
    color: var(--warning-text-strong);
    font-size: 13px;
    line-height: 1.7;
}
.notice.info { background: var(--info-soft); border-color: var(--info-border); color: var(--info-text-strong); }
.notice.ok { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text-strong); }

.dialog-error, .action-error, .form-error {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    border: 1px solid var(--danger-border);
    color: var(--danger-strong);
    font-size: 13px;
    line-height: 1.6;
}
.form-success {
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: var(--success-soft);
    border: 1px solid var(--success-border);
    color: var(--success-text-strong);
    font-size: 13px;
}

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-h);
    padding: 0 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .12s, border-color .12s, color .12s;
}
.btn:hover:not(:disabled) { background: var(--hover); border-color: var(--border-hover); text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }

.btn-secondary-sm { background: var(--surface); border-color: var(--border-strong); color: var(--text); }

.btn-ghost, .btn.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled), .btn.ghost:hover:not(:disabled) { background: var(--hover); border-color: transparent; color: var(--text); }

.btn-danger-sm { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }
.btn-danger-sm:hover:not(:disabled) { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--on-accent); }

.btn-danger-outline { background: var(--surface); border-color: var(--danger-border); color: var(--danger); }
.btn-danger-outline:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-strong); }

.btn.sm, .btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: 13px; }
.btn.close, .modal-header .close { width: 34px; height: 34px; padding: 0; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
    vertical-align: middle;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--border); color: var(--text-strong); }
.icon-btn.danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
/* زرّ دور البائع في دليل المستخدمين: مطفأً يبدو كبقية الأزرار، ومضاءً يعلن أن الحساب
   بائعٌ في السوق — فالحالة تُقرأ من الزرّ نفسه بلا فتح الحساب. */
.icon-btn.seller-role-btn.on { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }
.icon-btn.seller-role-btn.on:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-strong); color: var(--accent-strong); }

/* =========================================================================
   Toolbars, filters, chips
   ========================================================================= */
.page-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px 12px;
    flex-wrap: wrap;
    margin: 0;
}
.page-toolbar .field, .filter-bar .field { flex: 0 1 210px; min-width: 170px; }
.filter-bar .filter-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

.result-summary { font-size: 13px; color: var(--text-muted); }
.result-summary strong { color: var(--text-strong); font-variant-numeric: tabular-nums; }

/* =========================================================================
   Data tables
   ========================================================================= */
/* الغلاف هو ما يمرّر: كان `overflow:auto` بلا سقف ارتفاع، فلا يمرّر رأسياً أبداً
   ولا يشتغل `position:sticky` على رؤوس الأعمدة. السقف يُعيدها إلى العمل.
   وscrollbar-gutter يحجز مكان الشريط الأفقي فلا يقفز الجدول حين يظهر. */
.table-wrap {
    max-height: calc(100dvh - 240px);
    overflow: auto;
    scrollbar-gutter: stable;
}
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: right;
    padding: 6px 14px;
    height: 42px;
    /* الرأس لاصقٌ فوق الصفوف: خلفيةٌ صلبة تمنع ظهور الصفّ من تحته، وبدرجة
       ‎--surface-2‎ لا الأبيض كي يبقى للرأس تمييزُه عن صفوف الجدول. */
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    /* العناوين العربية تلتفّ بدل أن تمطّ عرض الجدول. */
    white-space: normal;
    line-height: 1.35;
}
.data-table tbody td {
    padding: 10px 14px;
    height: 54px;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
    color: var(--text);
    background: var(--surface);
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--hover); }
.data-table tbody tr.clickable { cursor: pointer; }
.data-table tbody tr.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.data-table tbody tr.row-selected td, .row-selected td { background: var(--accent-softer); }
.data-table .strong { font-weight: 600; color: var(--text-strong); }
.data-table .muted { color: var(--text-muted); font-size: 12.5px; }
.data-table td > .muted, .data-table td > div + .muted { margin-top: 1px; }
.data-table .num { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .mono { font-variant-numeric: tabular-nums; }
.data-table .when { white-space: nowrap; }
.data-table .when div { font-size: 13px; }
.data-table .when .muted { font-size: 12px; }
/* ‏text-align:end لا left: يرسم نفسه في RTL ولا ينقلب لو عُرضت اللوحة بـdir=ltr. */
.data-table th.actions, .data-table td.actions { width: 1%; white-space: nowrap; text-align: end; }
.data-table td.actions { padding-block: 6px; }
/* أزرار الصفّ تتباعد 6px صراحةً بدل مسافة النصّ (~4px) التي كانت تُلصق الحذف بالتعديل.
   ‏font-size:0 على الخلية يُلغي تلك المسافة فيحكم الهامشُ وحده المسافة. */
.data-table td.actions { font-size: 0; }
.data-table td.actions > * + * { margin-inline-start: 6px; }
.data-table th.check, .data-table td.check { width: 44px; }
/* عمود الاسم يحتاج عرضاً أدنى: منذ أن صار رأس الجدول يلتفّ، لم يعد الرأسُ هو ما
   يفرض عرض العمود، فخليةٌ بلا حدٍّ أدنى تنكمش إلى أضيق كلمة وينزل الاسم كلمةً في
   كل سطر. الحدّ هنا في القاعدة لا في ملفّ كل جدول، فيسري على الجداول السبعة. */
.data-table td.name, .data-table th.name { min-width: 190px; }
.data-table td.name .strong, .data-table td.name > div:first-child { unicode-bidi: plaintext; text-align: right; }
.data-table .empty {
    text-align: center;
    height: auto;
    padding: 56px 20px;
    color: var(--text-muted);
    font-size: 14px;
}
.data-table tbody tr:hover td.empty { background: var(--surface); }
.data-table .empty-first { display: flex; flex-direction: column; align-items: center; gap: 8px; white-space: normal; }
.data-table .empty-first strong { color: var(--text-strong); font-size: 15px; }
.data-table .empty-first p { margin: 0 0 6px; max-width: 52ch; line-height: 1.7; }
.data-table .avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12.5px;
}
.data-table .thumb { width: 64px; }

/* Compact table used inside cards on the overview */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* لا `nowrap` شاملة: اسم الزبون الطويل كان يمطّ البطاقة أو يُقصّ. الأرقام والتواريخ
   والمبالغ وحدها تبقى على سطر. */
.tbl th, .tbl td { text-align: right; padding: 10px 16px; height: 46px; border-bottom: 1px solid var(--divider); white-space: normal; }
.tbl .num, .tbl .when, .tbl .money, .tbl .mono { white-space: nowrap; }
.tbl .bidi { overflow-wrap: anywhere; }
.tbl th { color: var(--text-muted); font-weight: 600; background: var(--surface-2); font-size: 12.5px; height: 40px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--hover); }
.tbl .mono { font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--text-muted); }

/* =========================================================================
   Pills, tags, badges
   ========================================================================= */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--text-muted);
    border: 1px solid transparent;
}
.pill .dot, .pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill.ok { background: var(--success-soft); color: var(--success); }
.pill.warn { background: var(--warning-soft); color: var(--warning); }
.pill.off { background: var(--neutral-soft); color: var(--text-muted); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.s-pending    { background: var(--warning-soft); color: var(--warning); }
.pill.s-confirmed  { background: var(--info-soft); color: var(--info); }
.pill.s-processing { background: var(--purple-soft); color: var(--purple); }
.pill.s-ready      { background: var(--ready-soft); color: var(--ready); }
.pill.s-delivered  { background: var(--success-soft); color: var(--success); }
.pill.s-cancelled  { background: var(--danger-soft); color: var(--danger); }
.pill.s-rejected   { background: var(--neutral-soft); color: var(--text-muted); }

.tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: var(--r-xs);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--text-muted);
    border: 1px solid transparent;
    vertical-align: middle;
}
.tag + .tag { margin-inline-start: 4px; }
.tag.alofoq { background: var(--info-soft); color: var(--info); }
.tag.maadaty, .tag.main { background: var(--accent-soft); color: var(--accent-strong); }
.tag.hidden { background: var(--neutral-soft); color: var(--text-muted); }
.tag.warn, .tag.divergence { background: var(--warning-soft); color: var(--warning); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }

.badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   States: empty, loading, error
   ========================================================================= */
.empty {
    padding: 36px 22px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 44px 22px;
    text-align: center;
    color: var(--text-muted);
}
.state-card svg { width: 28px; height: 28px; color: var(--text-faint); }
.state-card.error svg { color: var(--danger); }
.state-card strong { color: var(--text-strong); font-size: 15px; }
.state-card p { margin: 0; font-size: 13.5px; max-width: 56ch; line-height: 1.7; }

.skeleton-list { padding: 6px 0; }
.skeleton-row { display: flex; align-items: center; gap: 16px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--divider); }
.skeleton-row:last-child { border-bottom: 0; }
.skeleton {
    display: block;
    height: 10px;
    border-radius: 5px;
    background: var(--neutral-soft);
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* =========================================================================
   Modal, confirm, toast
   ========================================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--scrim);
}
.modal {
    width: 100%;
    max-width: 480px;
    max-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    outline: none;
    animation: modal-in .14s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.modal-header {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 8px 14px 8px 20px;
    border-bottom: 1px solid var(--divider);
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-strong); }
.modal-body {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: auto;
}
/* الجسم هو الذي يمرّر، لا أبناؤه: غلافٌ بـoverflow (جدول بنود الطلبية) عنصرٌ مرن حدّه الأدنى صفر،
   فكان ينكمش إلى خطٍّ واحد حين يضيق ارتفاع الشاشة وتختفي البنود. */
.modal-body > * { flex-shrink: 0; }
.modal-footer {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px;
    border-top: 1px solid var(--divider);
    background: var(--surface-2);
}
.modal-footer .spacer { flex: 1; }

.editor-modal { max-width: 580px; }
.editor-modal .lead { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.editor-modal .lead strong { color: var(--text-strong); font-weight: 600; }
.editor-modal .hint { margin: 0; font-size: 12px; color: var(--text-faint); line-height: 1.6; }

/* شريط التحديد الجماعي (.bulk-bar) حُذف: لا مكوّن ولا صفحة تستعمله. */

.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    max-width: min(92vw, 480px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--text);
    color: var(--on-accent);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    font-size: 14px;
    font-weight: 500;
    animation: toast-in .16s ease-out;
}
.toast svg { width: 17px; height: 17px; flex: none; color: var(--accent-border); }
.toast a { color: var(--accent-border); font-weight: 600; margin-inline-start: 4px; }
.toast.error { background: var(--danger-strong); }
.toast.error svg { color: var(--danger-border); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.check input { accent-color: var(--accent); }

/* =========================================================================
   Account page
   ========================================================================= */
.account-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.account-grid .card-body { display: flex; flex-direction: column; gap: 14px; }
.account-identity { display: flex; align-items: center; gap: 14px; }
.account-identity .avatar-circle { width: 52px; height: 52px; font-size: 18px; }
.account-identity strong { display: block; font-size: 16px; color: var(--text-strong); }
.account-identity span { font-size: 13px; color: var(--text-muted); }
.account-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.account-facts div { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.account-facts dt { font-size: 12px; color: var(--text-muted); margin: 0 0 2px; }
.account-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.form-actions { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
.password-field { position: relative; }
.password-field input { padding-inline-end: 42px !important; }
.password-field .reveal {
    position: absolute;
    inset-inline-end: 3px;
    top: 50%;
    transform: translateY(-50%);
}
.stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.session-row + .session-row { padding-top: 14px; border-top: 1px solid var(--divider); }
.session-row p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1200px) {
    .row-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split-2, .split-3 { grid-template-columns: minmax(0, 1fr); }
    .account-grid { grid-template-columns: minmax(0, 1fr); }
}

/* تحت 1024px يصير الشريط الجانبي درجاً يُفتح من زرّ القائمة، بدل أن يتكدّس فوق كل صفحة. */
@media (max-width: 1024px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    /* الدرج مُثبَّت بـinset-inline-start، فجهة انزلاقه تتبع الاتجاه: يميناً في RTL
       ويساراً في LTR. كانت `translateX(105%)` واحدةً للاتجاهين فتُخرج الدرج من
       الجهة الخطأ لو عُرضت اللوحة بـdir=ltr. */
    .shell-sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(86vw, 300px);
        /* الأصل عربيٌّ فالافتراض RTL؛ والسطر التالي يصحّحه لو عُرضت بـdir=ltr. */
        transform: translateX(105%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
        z-index: 150;
        visibility: hidden;
    }
    [dir="rtl"] .shell-sidebar { transform: translateX(105%); }
    [dir="ltr"] .shell-sidebar { transform: translateX(-105%); }
    .shell.nav-open .shell-sidebar { transform: translateX(0); visibility: visible; }
    .shell.nav-open .shell-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 140;
        background: var(--scrim);
    }
    .shell-brand .sidebar-close { display: inline-grid; }
    .shell-appbar { padding: 0 16px; }
    .shell-appbar .nav-toggle { display: inline-grid; }
    .shell-appbar .appbar-brand { display: block; }
    .shell-appbar .appbar-context { display: none; }
    .shell-topbar { padding: 18px 16px 4px; }
    .shell-body { padding: 12px 16px 40px; }
}

@media (max-width: 720px) {
    .row-kpi { grid-template-columns: minmax(0, 1fr); }
    .grid-2, .grid-3, .editor-modal .grid-2 { grid-template-columns: minmax(0, 1fr); }
    .account-facts { grid-template-columns: minmax(0, 1fr); }
    .shell-topbar .search-slot { min-width: 0; flex: 1 1 100%; }
    .shell-topbar .actions { width: 100%; flex-wrap: wrap; }
    .page-toolbar .field, .filter-bar .field { flex: 1 1 150px; min-width: 0; }
    .filter-bar .filter-actions { margin-inline-start: 0; }
    .account-trigger .who, .account-trigger .caret { display: none; }
    .appbar-link .label { display: none; }
    .modal-backdrop { padding: 10px; place-items: end center; }
    .modal { max-height: 90vh; border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg); }
    .toast { bottom: 14px; }
    .login-card { padding: 26px 20px 20px; }

    /* الجداول تصير بطاقات: تسعة أعمدة على شاشة هاتف تعني تمريراً أفقياً لا ينتهي،
       فكل صفٍّ يصير بطاقةً وكل خليةٍ سطرَ «عنوان العمود ← قيمته». العنوان يأتي من
       data-label على الخلية نفسها كي يبقى مع القيمة في ملف واحد. */
    .table-wrap { max-height: none; }
    .data-table thead { display: none; }
    .data-table tr {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: 10px 0;
    }
    .data-table tbody tr:last-child { border-bottom: 0; }
    .data-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        height: auto;
        min-height: 0;
        padding: 6px 14px;
    }
    .data-table td.name, .data-table th.name { min-width: 0; }
    .data-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--text-muted);
        font-weight: 600;
    }
    /* خلية بلا عنوان (الصورة، الأيقونة، الإجراءات) لا تترك فراغاً في الجهة الأخرى. */
    .data-table td:not([data-label])::before { content: none; }
    /* خليةٌ بأكثر من عنصر (الاسم فوق الباركود، السعر فوق سعره السابق) لا تصلح
       صفّاً واحداً: عناصرها تتفرّق جنباً إلى جنب. فتُكدَّس القيمة تحت عنوانها.
       الإجراءات مستثناة — أزرارها تبقى في صفّ.
       ‏:has غير مدعومة؟ تسقط القاعدة ويبقى الصفّ الأفقي، وهو مقروء أيضاً. */
    .data-table td:not(.actions):has(> * + *) {
        display: block;
        text-align: start;
    }
    .data-table td:not(.actions):has(> * + *)::before {
        display: block;
        margin-bottom: 2px;
        font-size: 12px;
    }
    .data-table td.actions {
        justify-content: flex-end;
        font-size: 0;
    }
    /* خلية الصورة الرمزية بلا عنوان، فتلتصق بأوّل السطر بدل أن تتوسّط فراغاً. */
    .data-table td.ava { justify-content: flex-start; }
    .data-table td.empty { display: block; text-align: center; padding: 40px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   Print — only the open order leaves the printer
   ========================================================================= */
.print-only { display: none; }
@media print {
    html, body, .shell, .shell-main { background: var(--surface) !important; display: block !important; min-height: 0 !important; }
    .shell-sidebar, .shell-appbar, .shell-topbar, .shell-body, .shell-scrim, .toast { display: none !important; }
    body * { visibility: hidden; }
    .print-area, .print-area * { visibility: visible; }
    .modal-backdrop { position: static !important; display: block !important; background: none !important; padding: 0 !important; }
    .print-area {
        max-width: none !important;
        max-height: none !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
        animation: none !important;
    }
    .print-area .modal-body { overflow: visible !important; padding: 0 !important; }
    .print-area .modal-header { padding: 0 0 10px !important; }
    .print-area .modal-footer, .print-area .close, .print-area .no-print { display: none !important; }
    .print-only { display: flex !important; }
    .print-head { justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--text-strong); font-size: 13px; }
}

/* =========================================================================
   Public pages — privacy, terms, delete account
   ========================================================================= */
.public-shell {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
}
.public-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.public-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.public-brand:hover { text-decoration: none; }
.public-brand .logo {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: var(--accent);
    display: grid; place-items: center;
    color: var(--on-accent);
    font-weight: 700;
    font-size: 15px;
    box-shadow: none;
}
.public-brand .text { display: flex; flex-direction: column; }
.public-brand .text .name { font-size: 14.5px; font-weight: 700; color: var(--text-strong); line-height: 1.25; }
.public-brand .text .sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.25; }
.public-topbar nav { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.public-topbar nav a { font-size: 13.5px; color: var(--text-muted); padding: 7px 12px; border-radius: 999px; font-weight: 500; }
.public-topbar nav a:hover { background: var(--hover); color: var(--text-strong); text-decoration: none; }
.public-topbar nav a.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.public-main {
    flex: 1;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 24px 64px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.public-hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; }
.public-hero .eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}
.public-hero h1 { font-size: 28px; font-weight: 700; color: var(--text-strong); margin: 0 0 10px; line-height: 1.3; }
.public-hero p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.75; }
.public-hero .meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--text-muted); font-size: 12.5px; }
.public-hero .meta strong { color: var(--text); font-weight: 600; }
.public-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 24px; }
.public-section h2 { margin: 0 0 10px; font-size: 17px; font-weight: 700; color: var(--text-strong); }
.public-section p { margin: 0 0 10px; color: var(--text); font-size: 15px; line-height: 1.85; }
.public-section p:last-child { margin-bottom: 0; }
.public-section ul { margin: 8px 0 0; padding-inline-start: 22px; color: var(--text); font-size: 15px; line-height: 1.85; display: flex; flex-direction: column; gap: 4px; }
.public-footer {
    border-top: 1px solid var(--border);
    padding: 22px 24px 34px;
    color: var(--text-muted);
    font-size: 13px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    background: var(--surface);
}
.public-footer a { color: var(--text-muted); }
.public-footer .links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }

.public-loading, .public-error {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 30px 24px;
    text-align: center;
    color: var(--text-muted);
}
.public-error { color: var(--danger-strong); background: var(--danger-soft); border-color: var(--danger-border); }
.public-loading .spinner { margin: 0 auto 12px auto; }

.public-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.public-form .field { display: flex; flex-direction: column; gap: 6px; }
.public-form .field label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.public-form .field input,
.public-form .field textarea {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    outline: none;
    direction: ltr;
    text-align: right;
    width: 100%;
    transition: border-color .12s, box-shadow .12s;
}
.public-form .field input[dir="rtl"], .public-form .field textarea[dir="rtl"] { direction: rtl; }
.public-form .field input::placeholder, .public-form .field textarea::placeholder { color: var(--text-faint); }
.public-form .field input:focus, .public-form .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.public-form .field .hint { font-size: 12.5px; color: var(--text-muted); }
.public-form .danger-callout {
    border: 1px solid var(--danger-border);
    background: var(--danger-soft);
    border-radius: var(--r-md);
    padding: 14px 16px;
    color: var(--danger-strong);
    font-size: 14px;
    line-height: 1.7;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.public-form .danger-callout svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; }
.public-form .danger-callout ul { margin: 8px 0 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }

.btn-danger {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--on-accent);
    cursor: pointer;
    background: var(--danger);
    transition: background-color .12s;
}
.btn-danger:hover:not(:disabled) { background: var(--danger-strong); }
.btn-danger:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary {
    width: 100%;
    height: 46px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    background: var(--surface);
    transition: background-color .12s, border-color .12s;
}
.btn-secondary:hover:not(:disabled) { background: var(--hover); }
.btn-secondary:disabled { opacity: .55; cursor: not-allowed; }
.public-form .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.public-success {
    border: 1px solid var(--success-border);
    background: var(--success-soft);
    border-radius: var(--r-lg);
    padding: 22px;
    color: var(--success-text-strong);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}
.public-success svg { width: 34px; height: 34px; color: var(--success); margin: 0 auto 10px auto; display: block; }
.public-success strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--success-text-strong); }

.steps { display: flex; gap: 8px; align-items: center; color: var(--text-muted); font-size: 13px; margin: -4px 0 8px; }
.steps .dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    display: grid; place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.steps .dot.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.steps .dot.done { background: var(--success); color: var(--on-accent); border-color: var(--success); }
.steps .line { flex: 1; height: 1px; background: var(--border-strong); }
.steps .line.active { background: var(--accent); }

@media (max-width: 720px) {
    .public-topbar { padding: 10px 16px; }
    .public-topbar nav a { padding: 6px 10px; font-size: 13px; }
    .public-main { padding: 18px 16px 40px; gap: 14px; }
    .public-hero { padding: 22px 20px; }
    .public-hero h1 { font-size: 23px; }
    .public-section { padding: 18px; }
    .public-form { padding: 20px 18px; }
    .public-form .actions { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .public-brand .text .sub { display: none; }
}

/* =========================================================================
   Touch — أرضية 44px لكل ما يُنقر بالإصبع
   ‏(pointer: coarse) لا (max-width): الحكم على أداة التأشير لا على عرض الشاشة،
   فاللوحيّ العريض يأخذها والحاسوب الضيّق لا يأخذها.
   ========================================================================= */
@media (pointer: coarse) {
    .icon-btn,
    .btn.close,
    .modal-header .close,
    .pager .buttons button { min-width: 44px; min-height: 44px; }
    .btn { min-height: 44px; }
    .shell-appbar .nav-toggle,
    .shell-brand .sidebar-close { width: 44px; height: 44px; }
    /* هذان داخل بلاطةٍ صغيرة أو حقل بحث: 44 تُخرجهما من صندوقهما. */
    .tile-btn, .searchbox .clear { width: 32px; height: 32px; }
}