/* ═══════════════════════════════════════════════════════════════════
   coaching.css — نظام تصميم اعتدال (Figma → etidal-flutter/lib/helpers/styles.dart
   + eatdal-association-frontend-main) مطبَّقاً على لوحة الإرشاد المالي.
   ──────────────────────────────────────────────────────────────────
   نفس العائلة البصرية للوحة اعتدال (شريط جانبي داكن + رأس أبيض + بطاقات)،
   مع هوية خاصة بالكوتشينج كي لا تلتبس اللوحتان:
     - الشريط الجانبي كحلي اعتدال (--et-brand-navy) لا رمادي Metronic.
     - CTA النعناعي (--et-primary) مشترك، وهو لون العنصر النشط والتقدّم؛ البيج
       (--et-secondary) باعتدال: شارة «الإرشاد المالي» فقط (دليل الهوية p48-49).
     - خط Ping AR + LT كتطبيق/موقع المستفيد (لوحة اعتدال على SEGOEUI).
   الأسماء (.card .btn .badge .kpi …) هي مفردات الواجهات القائمة — لا تُغيَّر.
   ═══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "PingAR-LT"; src: url("../fonts/PingAR-LT-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PingAR-LT"; src: url("../fonts/PingAR-LT-Medium.otf") format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PingAR-LT"; src: url("../fonts/PingAR-LT-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }

:root {
    color-scheme: light;
    /* ════════════════════════════════════════════════════════════════════
       Brand tokens — من دليل الهوية المؤسسية p48-49 (Figma + web _journey-vars)
       نَفَس القاعدة: navy للهيكل، green للمعنى، beige بحذر، هدوء لوني.
       ════════════════════════════════════════════════════════════════════ */
    /* — Primary: Green (CTA، active state، progress، success) — */
    --et-primary: #6CB499;
    --et-primary-dark: #2F7F63;       /* نص فوق الأبيض 4.84:1 — QA F-321 */
    --et-primary-soft: #E4F2EC;
    /* — النص فوق النعناعي: نَفَس كحلي (#09305B) — الأبيض 2.44:1 يخسر WCAG (F-305).
       اللونان كلاهما علامة اعتدال فالهوية لا تتغير; النقاوة تتقدم. — */
    --et-on-primary: #09305B;
    /* — Navy: brand primary (هيكل وعناوين) — */
    --et-brand-navy: #003866;          /* brandNavy — sidebar / login art / overlay */
    --et-navy-deep: #003866;           /* alias — يقرأ أوضح في selectors الهيكلي */
    --et-navy: #002F51;                /* Figma titleNavy — h1-h4 */
    --et-navy-ink: #09305B;            /* primaryFont */
    --et-navy-deeper: #0B4A7A;         /* stop إضافي في تدرج الـ.art */
    /* — الأبيض/الفاتح على الخلفيات الداكنة (sidebar art, login) — */
    --et-on-dark: #ffffff;             /* نص وأيقونة على خلفيات كحلي/زجاجي */
    --et-on-light: #ffffff;            /* خلفية البطاقات والـinputs */
    --et-danger-soft-ink: #fca5a5;     /* logout hover على الـsidebar الداكن */
    /* — Beige: secondary (شَرَف، لهجة الكوتشينج). استخدام مُقتَصَر. — */
    --et-secondary: #BBA88E;           /* Secondary */
    --et-secondary-soft: #F6F0E9;      /* beige soft */
    --et-beige-soft: #F6F0E9;          /* alias صريح */
    --et-beige-border: #D5B896;        /* حدود البيج النادر (شارة «opportunity») */
    /* — Surfaces / borders / texts — */
    --et-text: #0F172A;
    --et-text-2: #475159;              /* bodyGrey */
    --et-text-3: #5B6670;              /* mutedGrey */
    --et-text-4: #5B6670;              /* كان #80919B ثم خسر AA (F-304) — تم إبطاله هنا */
    --et-icon: #80919B;                /* للأيقونات الزخرفية فقط */
    --et-border: #E9ECEF;
    --et-border-2: #E5E7EB;
    --et-border-soft: #F3F3F3;
    --et-track: #F3F3F3;               /* شريط progress فارغ */
    --et-surface: #F9F9F9;
    --et-highlight: #F5FAFA;
    --et-card: #FFFFFF;
    /* — دلالية (الجدول أعلاه) — */
    /* info / scheduled / in progress */
    --et-info: #326891;
    --et-info-solid: #5589AF;          /* لصلب الزر/الشارة */
    --et-info-bg: #EAF1F9;
    --et-info-border: #C9DBF0;
    --et-info-soft: #EDF5FA;           /* متاح للاستخدام القديم؛ غطى به قِدَم التصميم */
    /* success / done / approved */
    --et-success: #16A34A;
    --et-success-text: #2F7F63;       /* نص على فاتح */
    --et-success-solid: #16A34A;
    --et-success-bg: #F0FDF4;
    --et-success-border: #C9E2D6;
    /* warning / pending / awaiting */
    --et-warning: #D09D18;
    --et-warning-text: #B45309;
    --et-warning-solid: #D09D18;
    --et-warning-bg: #FFFBEB;
    --et-warning-border: #FDE68A;
    /* danger / cancelled / rejected / overdue */
    --et-danger: #DC2626;
    --et-danger-text: #B91C1C;
    --et-danger-solid: #DC2626;
    --et-danger-bg: #FEE2E2;
    --et-danger-border: #F0C3C5;
    /* neutral / expired / archived */
    --et-neutral: #5B6670;
    --et-neutral-bg: #F3F3F3;
    --et-neutral-border: #E6E6E6;
    /* ── مقاييس (الجزء الثابت) ── */
    --et-radius-sm: 8px; --et-radius: 12px; --et-radius-lg: 16px;
    --et-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --et-shadow-md: 0 4px 16px rgba(0, 0, 0, .08);
    --et-font: "PingAR-LT", "Cairo", "Segoe UI", Tahoma, sans-serif;
    --et-sidebar-w: 260px;
    --et-header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { min-height: 100vh; background: var(--et-surface); color: var(--et-text); font-family: var(--et-font); font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--et-navy-deep); }
h1, h2, h3, h4 { margin: 0; color: var(--et-navy); font-weight: 700; line-height: 1.4; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.0625rem; }
h3 { font-size: .9375rem; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
img { max-width: 100%; }

/* ═══ الهيكل: شريط جانبي + رأس + محتوى ═══ */
.et-shell { display: flex; min-height: 100vh; }

.et-sidebar { position: fixed; top: 0; inset-inline-start: 0; width: var(--et-sidebar-w); height: 100vh; background: var(--et-brand-navy); color: var(--et-on-dark); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; transition: transform .25s ease; }
.et-sidebar::-webkit-scrollbar { width: 5px; }
.et-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 10px; }
.et-brand { display: flex; flex-direction: column; align-items: center; gap: .625rem; padding: 1.25rem 1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.et-brand img { height: 40px; }
.et-brand .module { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 999px; background: var(--et-secondary); color: var(--et-navy); font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
.et-nav { list-style: none; padding: .75rem 0 1rem; flex: 1; }
.et-nav .group { padding: .875rem 1.25rem .375rem; font-size: .6875rem; color: rgba(255, 255, 255, .45); font-weight: 700; letter-spacing: .04em; }
.et-nav a { display: flex; align-items: center; gap: .75rem; padding: .625rem 1.25rem; color: rgba(255, 255, 255, .78); text-decoration: none; font-size: .875rem; border-inline-start: 3px solid transparent; transition: background .15s, color .15s; }
.et-nav a i { width: 18px; text-align: center; font-size: .9375rem; color: rgba(255, 255, 255, .55); }
.et-nav a:hover { background: rgba(255, 255, 255, .06); color: var(--et-on-dark); }
.et-nav a.active { background: rgba(108, 180, 153, .16); color: var(--et-on-dark); font-weight: 700; border-inline-start-color: var(--et-primary); }
.et-nav a.active i { color: var(--et-primary); }
.et-nav .count { margin-inline-start: auto; background: var(--et-danger); color: var(--et-on-dark); font-size: .6875rem; font-weight: 700; padding: 0 .5rem; border-radius: 999px; line-height: 1.5; }
.et-user { padding: 1rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; gap: .75rem; }
.et-user .avatar { width: 38px; height: 38px; border-radius: 10px; background: var(--et-primary); color: var(--et-on-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.et-user .name { font-size: .875rem; font-weight: 700; color: var(--et-on-dark); }
.et-user .role { font-size: .75rem; color: rgba(255, 255, 255, .55); }
.et-user form { margin-inline-start: auto; }
.et-user .logout { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); width: 34px; height: 34px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.et-user .logout:hover { background: rgba(220, 38, 38, .18); color: var(--et-danger-soft-ink); }

.et-main { flex: 1; min-width: 0; margin-inline-start: var(--et-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.et-header { position: sticky; top: 0; z-index: 30; height: var(--et-header-h); background: var(--et-card); border-bottom: 1px solid var(--et-border); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; box-shadow: 0 1px 6px rgba(0, 0, 0, .04); }
.et-header .title { font-size: 1.125rem; font-weight: 700; color: var(--et-navy); display: flex; align-items: center; gap: .625rem; }
.et-header .title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--et-primary); }
.et-header .tools { margin-inline-start: auto; display: flex; align-items: center; gap: .625rem; }
.et-header .bell { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--et-border); background: var(--et-card); color: var(--et-text-3); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.et-header .bell:hover { border-color: var(--et-primary); color: var(--et-primary-dark); }
.et-header .bell .count { position: absolute; top: -6px; inset-inline-end: -6px; background: var(--et-danger); color: var(--et-on-dark); font-size: .6875rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.et-burger { display: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--et-border); background: var(--et-card); color: var(--et-navy); cursor: pointer; }
.et-content { padding: 1.5rem; flex: 1; }
.et-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 56, 102, .45); z-index: 35; }

@media (max-width: 1024px) {
    .et-sidebar { transform: translateX(100%); }
    [dir="ltr"] .et-sidebar { transform: translateX(-100%); }
    body.nav-open .et-sidebar { transform: none; }
    body.nav-open .et-overlay { display: block; }
    .et-main { margin-inline-start: 0; }
    .et-burger { display: inline-flex; align-items: center; justify-content: center; }
    .et-content { padding: 1rem; }
}

/* ═══ الرسائل (A3: كل لون قادم من جدول الدلالي) ═══ */
.flash { background: var(--et-success-bg); border: 1px solid var(--et-success-border); color: var(--et-success-text); border-radius: var(--et-radius-sm); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .875rem; }
.errors { background: var(--et-danger-bg); border: 1px solid var(--et-danger-border); color: var(--et-danger-text); border-radius: var(--et-radius-sm); padding: .75rem 1rem 0.75rem 1.5rem; margin-bottom: 1rem; font-size: .875rem; list-style: none; }
.errors li + li { margin-top: .25rem; }
/* CR §3.3.3: الحقل الإلزامي الفارغ ← Border أحمر ورسالة «هذا الحقل إلزامي» تحته. */
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--et-danger-solid); box-shadow: 0 0 0 1px var(--et-danger-solid); }
.field-error { color: var(--et-danger-text); font-size: .8125rem; margin-top: .25rem; }
.errors a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--et-danger-solid) !important; box-shadow: 0 0 0 2px rgba(220, 38, 38, .12); }
.notice { background: var(--et-warning-bg); border: 1px solid var(--et-warning-border); color: var(--et-warning-text); border-radius: var(--et-radius-sm); padding: .75rem 1rem; font-size: .875rem; margin-top: 1rem; }

/* ═══ البطاقات والعناوين ═══ */
.card { background: var(--et-card); border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--et-shadow); margin-bottom: 1.25rem; }
.card.narrow { max-width: 520px; margin-inline: auto; }
.card > .page-head:first-child h1, .card > .page-head:first-child h2 { display: flex; align-items: center; gap: .625rem; }
.card > .page-head:first-child h1::before, .card > .page-head:first-child h2::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--et-primary); }
.et-card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.et-card-title { font-size: 1.0625rem; }
.bp-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.bp-field { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; background: var(--et-border-soft); border-radius: var(--et-radius); border-inline-start: 3px solid var(--et-border); }
.bp-field-label { color: var(--et-text-3); font-size: .75rem; font-weight: 700; }
.bp-field-value { color: var(--et-text); font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.muted { color: var(--et-text-4); font-size: .875rem; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══ الأزرار ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem 1.125rem; background: var(--et-primary); color: var(--et-on-primary); border: 1px solid var(--et-primary); border-radius: 10px; font-family: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.5; transition: filter .15s, background .15s; white-space: nowrap; }
.btn:hover { filter: brightness(.95); }
.btn.secondary { background: var(--et-card); color: var(--et-navy); border-color: var(--et-border-2); font-weight: 600; }
.btn.secondary:hover { background: var(--et-highlight); border-color: var(--et-primary); }
.btn.danger { background: var(--et-danger); border-color: var(--et-danger); color: var(--et-on-dark); }
.btn.sm, .btn.small { padding: .3rem .75rem; font-size: .8125rem; }
.btn[disabled], .btn.disabled { opacity: .5; cursor: not-allowed; }

/* ═══ الشارات (A3: حذف البـنفسجي/Badge.security → beige) ═══ */
.badge { display: inline-block; padding: .2rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--et-secondary-soft); color: var(--et-text-3); line-height: 1.5; white-space: nowrap; }
.badge.alert, .badge.warning, .badge.pending, .badge.awaiting { background: var(--et-warning-bg); color: var(--et-warning-text); }
.badge.status, .badge.info, .badge.scheduled, .badge.in_progress { background: var(--et-info-bg); color: var(--et-info); }
.badge.done, .badge.success, .badge.completed, .badge.approved, .badge.active { background: var(--et-success-bg); color: var(--et-success-text); }
.badge.cancelled, .badge.danger, .badge.rejected, .badge.failed, .badge.inactive { background: var(--et-danger-bg); color: var(--et-danger-text); }
.badge.security, .badge.purple { background: var(--et-secondary-soft); color: var(--et-text-2); }   /* البنفسجي → بيج فاخر (نادر؛ يستعمل على العناصر الأمنية) */
.badge.count { background: var(--et-danger); color: var(--et-on-dark); }

/* ═══ الجداول ═══ */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th { text-align: start; padding: .75rem .875rem; font-size: .8125rem; font-weight: 700; color: var(--et-text-3); background: var(--et-highlight); border-bottom: 1px solid var(--et-border); white-space: nowrap; }
thead th:first-child { border-start-start-radius: var(--et-radius-sm); }
thead th:last-child { border-start-end-radius: var(--et-radius-sm); }
tbody td { padding: .75rem .875rem; border-bottom: 1px solid var(--et-border-soft); color: var(--et-text-2); vertical-align: middle; }
tbody tr:hover td { background: var(--et-highlight); }
tbody tr:last-child td { border-bottom: 0; }
.row-actions { white-space: nowrap; }
.row-actions form { display: flex; gap: .5rem; align-items: center; }
.row-actions select { min-width: 190px; }
.pager { margin-top: 1rem; }
.et-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .875rem; }
.et-pager ul { list-style: none; display: flex; gap: .25rem; flex-wrap: wrap; }
.et-pager a, .et-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 .625rem; border-radius: 8px; border: 1px solid var(--et-border-2); background: var(--et-card); color: var(--et-text-2); text-decoration: none; font-variant-numeric: tabular-nums; }
.et-pager a:hover { background: var(--et-highlight); border-color: var(--et-primary); color: var(--et-navy); }
.et-pager .current { background: var(--et-primary); border-color: var(--et-primary); color: var(--et-on-primary); font-weight: 700; }
.et-pager .disabled { color: var(--et-icon); background: var(--et-border-soft); }
.et-pager .dots { border: 0; background: transparent; }
/* F-300: الجداول العريضة تتمرّر داخل حاويتها لا الصفحة كلها */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: -.25rem; padding-inline: .25rem; }
/* F-312: القيم اللاتينية (هاتف/بريد/هوية) كتلة LTR واحدة داخل النص العربي */
.ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ═══ النماذج ═══ */
.field { margin-bottom: 1rem; }
.field label, label { display: block; font-size: .8125rem; font-weight: 600; color: var(--et-text-2); margin-bottom: .375rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { width: 100%; padding: .55rem .75rem; border: 1px solid var(--et-border-2); border-radius: var(--et-radius-sm); font-family: inherit; font-size: .875rem; color: var(--et-text); background: var(--et-card); transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--et-primary); box-shadow: 0 0 0 3px rgba(108, 180, 153, .2); }
textarea { min-height: 84px; resize: vertical; }
input[type="file"] { font-family: inherit; font-size: .875rem; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--et-primary); width: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: 1rem; margin: 0 0 1rem; }
legend { font-size: .875rem; color: var(--et-navy); font-weight: 700; padding: 0 .375rem; }
.radio-list label { display: flex; gap: .5rem; align-items: center; margin-bottom: .375rem; font-weight: 500; }
.radio-list input { width: auto; }
dialog { border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 1.5rem; max-width: 560px; width: 92vw; box-shadow: var(--et-shadow-md); font-family: inherit; }
dialog::backdrop { background: rgba(0, 56, 102, .45); }

/* ═══ التبويبات ═══ */
.tabs { display: flex; gap: .375rem; border-bottom: 1px solid var(--et-border); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: .5rem .9rem; border-radius: 10px 10px 0 0; color: var(--et-text-3); text-decoration: none; font-size: .875rem; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--et-navy); background: var(--et-highlight); }
.tabs a.active { color: var(--et-primary-dark); border-bottom-color: var(--et-primary); background: transparent; font-weight: 700; }

/* ═══ الداشبورد (M6) ═══ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.kpi { background: var(--et-card); border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 1rem 1.25rem; box-shadow: var(--et-shadow); position: relative; overflow: hidden; }
.kpi::after { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--et-primary); }
.kpi .label { font-size: .8125rem; color: var(--et-text-4); }
.kpi .value { font-size: 1.625rem; font-weight: 700; color: var(--et-navy); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.kpi .value.na { color: var(--et-text-4); cursor: help; }
.kpi .target { font-size: .75rem; color: var(--et-text-4); margin-top: .25rem; }
.kpi .badge { margin-inline-start: .5rem; vertical-align: middle; }
.kpi .label a { color: inherit; text-decoration: none; border-bottom: 1px dashed currentColor; }
.kpi .label a:hover { color: var(--et-primary-dark); }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.quick { display: block; background: var(--et-card); border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 1rem 1.25rem; box-shadow: var(--et-shadow); text-decoration: none; color: var(--et-navy); transition: box-shadow .15s, transform .15s; border-inline-start: 4px solid var(--et-primary); }
.quick:hover { box-shadow: var(--et-shadow-md); transform: translateY(-1px); }
@media (max-width: 640px) { .kpi-grid, .quick-grid { grid-template-columns: 1fr 1fr; gap: .75rem; } .kpi, .quick { padding: .875rem 1rem; } .kpi .value { font-size: 1.375rem; } }
.quick .label { font-weight: 700; }
.quick .desc { font-size: .8125rem; color: var(--et-text-4); margin-top: .25rem; }
.stage-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--et-border-2); margin: .75rem 0; }
.stage-bar span { display: block; height: 100%; }
.stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.stage { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: .75rem; text-align: center; background: var(--et-highlight); }
.stage .name { font-size: .8125rem; color: var(--et-text-3); }
.stage .count { font-size: 1.25rem; font-weight: 700; margin-top: .25rem; color: var(--et-navy); }
.stage .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-inline-end: .375rem; }
.s1 { background: var(--et-info-solid); } .s2 { background: var(--et-primary); } .s3 { background: var(--et-warning); } .s4 { background: var(--et-neutral); }
.widget-list { list-style: none; }
.widget-list li { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--et-border); border-radius: var(--et-radius-sm); margin-bottom: .5rem; background: var(--et-card); cursor: grab; }
.widget-list li .handle { color: var(--et-icon); }
.widget-list input[type="checkbox"] { width: auto; }

/* ═══ الحالة (cases/show) ═══ */
.status-strip { display: flex; gap: .375rem; flex-wrap: wrap; margin: .75rem 0 0; }
.status-strip .step { padding: .25rem .75rem; border-radius: 999px; background: var(--et-border-soft); color: var(--et-text-3); font-size: .75rem; }
.status-strip .step.active { background: var(--et-primary); color: var(--et-on-primary); font-weight: 700; }
.head-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem 1rem; margin-top: 1rem; }
.head-grid .item { background: var(--et-highlight); border-radius: var(--et-radius-sm); padding: .5rem .75rem; }
.head-grid .item .k { font-size: .75rem; color: var(--et-text-4); }
.head-grid .item .v { font-size: .9375rem; color: var(--et-navy); font-weight: 600; overflow-wrap: anywhere; }
.head-grid .item .v .ltr { white-space: normal; }
.session-card { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: .875rem 1rem; margin-bottom: .75rem; display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; background: var(--et-card); }
.session-card .meta { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: .25rem; }
.plan-details dl { display: grid; grid-template-columns: 160px 1fr; gap: .375rem 1rem; margin: 0 0 1.25rem; }
.plan-details dt { color: var(--et-text-4); font-size: .8125rem; }
.plan-details dd { margin: 0; color: var(--et-text); font-size: .9375rem; }

/* ═══ الإحصائيات (M9) ═══ */
.an-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.an-toolbar > * { min-width: 0; max-width: 100%; }
.an-filters { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; min-width: 0; } /* F-320 */
.an-filters select { width: auto; }
.an-tabs { display: flex; gap: .25rem; flex-wrap: wrap; background: var(--et-card); padding: .375rem; border-radius: var(--et-radius); margin-bottom: 1rem; border: 1px solid var(--et-border); }
.an-tabs a { padding: .5rem .875rem; border-radius: var(--et-radius-sm); color: var(--et-text-3); text-decoration: none; font-size: .875rem; font-weight: 600; }
.an-tabs a:hover { background: var(--et-highlight); color: var(--et-navy); }
.an-tabs a.active { background: var(--et-primary); color: var(--et-on-primary); }
.an-section { margin-bottom: 1.25rem; }
.an-section h2 { font-size: 1.0625rem; margin-bottom: .75rem; }
.an-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.an-bar { display: block; height: 10px; border-radius: 999px; background: var(--et-border-2); min-width: 120px; overflow: hidden; }
.an-bar span { display: block; height: 100%; background: var(--et-navy-deep); }
.an-bar.green span { background: var(--et-primary); }
.an-bar.amber span { background: var(--et-warning); }
.an-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.an-cmp { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: .75rem 1rem; background: var(--et-highlight); }
.an-cmp .label { font-size: .8125rem; color: var(--et-text-4); }
.an-cmp .value { font-size: 1.5rem; font-weight: 700; color: var(--et-navy); margin-top: .25rem; }
.an-cmp .target { font-size: .75rem; color: var(--et-text-4); margin-top: .25rem; }
.an-delta { font-size: .8125rem; font-weight: 700; margin-inline-start: .5rem; }
.an-delta.up { color: var(--et-success-text); } .an-delta.down { color: var(--et-danger-text); } .an-delta.na { color: var(--et-text-4); }
.an-spark { display: block; max-width: 100%; height: 60px; margin: .5rem 0 .75rem; }
.an-placeholder { text-align: center; padding: 2.5rem 1rem; }
.an-placeholder h2 { font-size: 1.125rem; margin-bottom: .75rem; }
.an-placeholder p { max-width: 560px; margin: .75rem auto 0; }
.an-top { list-style: none; counter-reset: top; }
.an-top li { display: flex; justify-content: space-between; padding: .5rem .25rem; border-bottom: 1px solid var(--et-border-soft); }
.an-top li::before { counter-increment: top; content: counter(top) '.'; color: var(--et-text-4); margin-inline-end: .5rem; }
.an-survey { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: 1rem; margin-bottom: 1rem; }
.an-survey h3 { font-size: 1rem; }
.an-survey .q { padding: .5rem 0; border-top: 1px solid var(--et-border-soft); }
.an-choices { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.an-choices span { background: var(--et-secondary-soft); border-radius: 999px; padding: .125rem .625rem; font-size: .8125rem; }

/* ═══ الدخول ═══ */
.et-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.et-login .art { background: linear-gradient(160deg, var(--et-brand-navy) 0%, var(--et-navy-deep) 60%, var(--et-navy-deeper) 100%); color: var(--et-on-dark); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1.25rem; padding: 3rem; position: relative; overflow: hidden; }
.et-login .art::before { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(108, 180, 153, .18); top: -140px; inset-inline-start: -120px; }
.et-login .art::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(187, 168, 142, .16); bottom: -120px; inset-inline-end: -80px; }
.et-login .art img { height: 64px; position: relative; }
.et-login .art .module { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .375rem 1rem; border-radius: 999px; background: var(--et-secondary); color: var(--et-navy); font-weight: 700; }
.et-login .art p { position: relative; max-width: 380px; text-align: center; color: rgba(255, 255, 255, .75); line-height: 1.8; }
.et-login .pane { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--et-surface); }
.et-login .box { width: 100%; max-width: 400px; background: var(--et-card); border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 2rem; box-shadow: var(--et-shadow); }
.et-login .box h1 { font-size: 1.375rem; text-align: center; margin-bottom: .25rem; }
.et-login .box .sub { text-align: center; color: var(--et-text-4); font-size: .875rem; margin-bottom: 1.5rem; }
.et-login .box .btn { width: 100%; padding: .7rem; font-size: 1rem; margin-top: .5rem; }
.et-login .foot { text-align: center; font-size: .75rem; color: var(--et-text-4); margin-top: 1.25rem; }
@media (max-width: 860px) {
    .et-login { grid-template-columns: 1fr; }
    .et-login .art { padding: 2rem 1.5rem; }
    .et-login .art p { display: none; }
}

/* M12: finance cards use the case-file palette and remain scrollable on mobile. */
.family-finance .finance-table-scroll { overflow-x: auto; }
.family-finance progress { display: block; width: 100%; height: 12px; accent-color: var(--et-primary); margin-bottom: 1rem; }
.family-finance details { margin-block: .75rem; }
.family-finance summary { cursor: pointer; font-weight: 600; margin-bottom: .5rem; }
.family-finance .head-grid form { margin-block: .5rem; }

/* M13: الصحة والمخاطر والرؤى — الألوان من scoreBar/riskBadge في v1. (A3) */
.case-health { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
.health-score { display: flex; align-items: center; gap: .5rem; }
.health-good { color: var(--et-success-text); }
.health-moderate { color: var(--et-warning-text); }
.health-poor { color: var(--et-danger-text); }
.health-unknown { color: var(--et-text-3); }
.health-score progress { width: 10rem; height: .5rem; border: 0; border-radius: 4px; overflow: hidden; background: var(--et-track); accent-color: currentColor; }
.health-score progress::-webkit-progress-bar { background: var(--et-track); }
.health-score progress::-webkit-progress-value { background: currentColor; }
.health-score progress::-moz-progress-bar { background: currentColor; }
.risk-badge { display: inline-block; padding: 4px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; border: 1px solid; }
.risk-critical { color: var(--et-danger-text); background: var(--et-danger-bg); border-color: var(--et-danger-border); }
.risk-high { color: var(--et-warning-text); background: var(--et-warning-bg); border-color: var(--et-warning-border); }
.risk-medium { color: var(--et-info); background: var(--et-info-bg); border-color: var(--et-info-border); }
.risk-low { color: var(--et-success-text); background: var(--et-success-bg); border-color: var(--et-success-border); }
.insights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem; margin-block: 1rem; }
.insight-card { background: var(--et-card); border: 1px solid var(--et-border); border-inline-start-width: 4px; border-radius: 8px; padding: 1rem; }
.insight-card h3 { margin-block: .5rem; }
.insight-critical { border-inline-start-color: var(--et-danger); }
.insight-warning { border-inline-start-color: var(--et-warning); }
.insight-opportunity { border-inline-start-color: var(--et-secondary); }   /* البنفسجي → بيج */
.insight-success { border-inline-start-color: var(--et-success); }
.insight-info { border-inline-start-color: var(--et-info); }

/* M15: عمليات المرشد والأتمتة. */
.filters { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; }
.filters .field { margin: 0; min-width: 170px; }
.filters > input, .filters > select { width: auto; min-width: 170px; } /* F-313 */
.filters .check { display: flex; align-items: center; gap: .4rem; padding-bottom: .6rem; }
.inline-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.inline-actions form { display: inline-flex; gap: .35rem; }
.resolved-row { opacity: .65; }
.focus-row { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; padding: .65rem 0; border-bottom: 1px solid var(--et-border-soft); }
.focus-card, .report-card, .note-card { border: 1px solid var(--et-border); border-radius: var(--et-radius); padding: 1rem; margin-bottom: .75rem; }
.reason-list { display: flex; gap: .5rem; flex-wrap: wrap; }
.reason { border-radius: 999px; padding: .25rem .65rem; font-size: .8125rem; }
.reason-danger { color: var(--et-danger-text); background: var(--et-danger-bg); }
.reason-warn { color: var(--et-warning-text); background: var(--et-warning-bg); }
.reason-info { color: var(--et-info); background: var(--et-info-bg); }
.note-card.pinned { border-inline-start: 4px solid var(--et-warning); background: var(--et-warning-bg); }
.graduation-card progress, .graduation-inline progress { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border: 0; border-radius: 6px; overflow: hidden; background: var(--et-track); accent-color: var(--et-primary); }
.graduation-card progress::-webkit-progress-bar, .graduation-inline progress::-webkit-progress-bar { background: var(--et-track); }
.graduation-card progress::-webkit-progress-value, .graduation-inline progress::-webkit-progress-value { background: var(--et-primary); border-radius: 6px; }
.graduation-card progress::-moz-progress-bar, .graduation-inline progress::-moz-progress-bar { background: var(--et-primary); border-radius: 6px; }
.criteria-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; margin-top: 1rem; }
.criterion { display: grid; gap: .25rem; padding: .75rem; background: var(--et-highlight); border-radius: var(--et-radius-sm); }
.criterion span, .criterion small { color: var(--et-text-4); }
.graduation-inline { display: grid; gap: .4rem; margin-top: .75rem; padding: .75rem; background: var(--et-highlight); border-radius: var(--et-radius-sm); }

/* F-310: حالة فارغة موحّدة — أيقونة + عنوان + شرح + إجراء (partials/empty-state). */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--et-text-3); }
.empty-state .icon { width: 56px; height: 56px; border-radius: 50%; background: var(--et-primary-soft); color: var(--et-primary-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; margin-bottom: .75rem; }
.empty-state h2 { font-size: 1.0625rem; color: var(--et-navy); margin-bottom: .25rem; }
.empty-state p { font-size: .875rem; max-width: 420px; margin: 0 auto; }
.empty-state .actions { margin-top: 1rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* F-311/F-113: صفحات الأخطاء (errors/layout). */
.et-error-body { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.et-error { text-align: center; max-width: 480px; background: var(--et-card); border: 1px solid var(--et-border); border-radius: var(--et-radius-lg); padding: 2.5rem 2rem; box-shadow: var(--et-shadow); }
.et-error img { height: 48px; margin-bottom: 1rem; }
.et-error .code { font-size: 3rem; font-weight: 700; color: var(--et-navy); line-height: 1; margin-bottom: .5rem; font-variant-numeric: tabular-nums; }
.et-error h1 { font-size: 1.375rem; margin-bottom: .5rem; }
.et-error .actions { margin-top: 1.5rem; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════════════════════
   أنماط خاصة بـviews — تم نقلها من <style> blocks للحفاظ على مصدر واحد.
   ════════════════════════════════════════════════════════════════════ */

/* — عناصر حالة فارغة موحّدة (تنطبق على كل view يستخدم class="empty") — */
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--et-text-4); }
.empty h2 { font-size: 1.125rem; color: var(--et-text-2); margin-bottom: .25rem; }
.empty .icon { font-size: 2.5rem; margin-bottom: .5rem; }

/* — activity-log/index — */
.al-tabs { display: flex; gap: .25rem; background: var(--et-card); padding: .375rem; border-radius: var(--et-radius-sm); margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); width: fit-content; }
.al-tabs a { padding: .5rem .875rem; border-radius: var(--et-radius-sm); color: var(--et-text-4); text-decoration: none; font-size: .875rem; font-weight: 600; }
.al-tabs a:hover { background: var(--et-border-soft); color: var(--et-navy); }
.al-tabs a.active { background: var(--et-primary); color: var(--et-on-primary); }
.filters .field:has(#q) { min-width: 248px; }
.al-details { max-width: 420px; word-break: break-word; }
.al-ip { font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
.badge.cat-auth { background: var(--et-info-bg); color: var(--et-info); }
.badge.cat-create { background: var(--et-success-bg); color: var(--et-success-text); }
.badge.cat-update { background: var(--et-warning-bg); color: var(--et-warning-text); }
.badge.cat-delete { background: var(--et-danger-bg); color: var(--et-danger-text); }
.badge.cat-finance { background: var(--et-info-bg); color: var(--et-info); }   /* البنفسجي القديم → info (مال) */
.badge.cat-security { background: var(--et-secondary-soft); color: var(--et-text-3); }   /* البنفسجي القديم → بيج (أمن) */

/* — closure-requests/index — */
.req-card { border: 1px solid var(--et-border); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; }
.req-card .meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .375rem 1rem; margin: .5rem 0; }
.req-card .meta .k { font-size: .75rem; color: var(--et-text-4); }
.req-card .report { background: var(--et-highlight); border-radius: 8px; padding: .75rem; margin: .5rem 0; white-space: pre-wrap; font-size: .875rem; }
.decide { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: .75rem; }
.decide .full { grid-column: 1 / -1; }

/* — finance/_header (M12) — */
.fin-tabs { display: flex; gap: .375rem; flex-wrap: wrap; background: var(--et-card); padding: .375rem; border-radius: var(--et-radius-sm); margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }
.fin-tabs a { padding: .5rem 1rem; border-radius: 8px; color: var(--et-text-4); text-decoration: none; font-size: .875rem; font-weight: 600; }
.fin-tabs a:hover { background: var(--et-border-soft); color: var(--et-navy); }
.fin-tabs a.active { background: var(--et-primary); color: var(--et-on-primary); }
.kpi .value.alert { color: var(--et-warning-text); }
.kpi.alert { background: var(--et-warning-bg); }
.money.neg { color: var(--et-danger-text); }
.money.pos { color: var(--et-success-text); }
.info-banner { display: flex; gap: .625rem; align-items: flex-start; background: var(--et-info-bg); border: 1px solid var(--et-info-border); color: var(--et-info); border-radius: 8px; padding: .75rem 1rem; font-size: .875rem; margin-bottom: 1rem; }
.inline-form { display: inline-flex; gap: .375rem; align-items: center; }
.inline-form input { width: 110px; padding: .375rem .5rem; }
.filter-links { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: 1rem; }
.filter-links a { padding: .375rem .875rem; border-radius: 999px; border: 1px solid var(--et-border-2); color: var(--et-text-2); text-decoration: none; font-size: .8125rem; }
.filter-links a.active { background: var(--et-navy); color: var(--et-on-dark); border-color: var(--et-navy); }
.filter-links a.warn { background: var(--et-warning-bg); color: var(--et-warning-text); border-color: var(--et-warning-border); }

/* — content/tasks/index —
     المُتسلسل: `.kpis .kpi` لكيلا يَطغى على الـ.kpi الشامل (بطاقات الـdashboard). */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.kpis .kpi { background: var(--et-highlight); border: 1px solid var(--et-border); border-radius: 10px; padding: .75rem 1rem; }
.kpis .kpi .n { font-size: 1.5rem; font-weight: 700; color: var(--et-navy); }
.kpis .kpi .l { font-size: .8125rem; color: var(--et-text-4); }
.tasks-filters { margin-bottom: 1rem; }
.tasks-filters .field { min-width: 180px; }

/* — content/surveys/index: يستخدم .kpis .kpi أعلاه — */

/* — content/surveys/edit — */
.two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1rem; align-items: start; }
.q-row { display: flex; gap: .75rem; align-items: flex-start; border: 1px solid var(--et-border); border-radius: 10px; padding: .75rem; margin-bottom: .5rem; }
.q-row .order { font-weight: 700; color: var(--et-text-4); min-width: 1.5rem; }
.q-row .actions { display: flex; gap: .25rem; margin-inline-start: auto; }
.q-row .actions form { display: inline; }
.q-row .actions button { padding: .25rem .5rem; }
@media (max-width: 800px) { .two-col { grid-template-columns: 1fr; } }

/* — cases/financials/missing — */
.rows-table td, .rows-table th { padding: .375rem .25rem; border-bottom: 0; }
.rows-table input, .rows-table select { width: 100%; }
.compare { background: var(--et-highlight); border-radius: 8px; padding: .625rem .875rem; margin-bottom: .75rem; font-size: .875rem; }
.compare ul { margin: .25rem 1.25rem 0 0; }
.current-value { font-size: .75rem; color: var(--et-text-4); }

/* — sessions/_form — */
.session-form input[type="file"] { padding: .375rem 0; border: 0; }