/* ============================================================
   colors.css — مصدر الألوان والمقاييس الموحّد الوحيد للتطبيق بالكامل
   ============================================================
   هوية بصرية حكومية رسمية جديدة: أساس "ورقي" دافئ (Cream) بدل
   الرمادي البارد، تدرّج أخضر رسمي كهوية أساسية، ولمسة ذهبية أصيلة
   للتمييز. هذا الملف يُحمَّل أولاً في كل التخطيطات ويحدد كل متغيرات
   الألوان/المقاييس المستخدمة في باقي ملفات الأنماط. عدّل القيم هنا
   فقط؛ لا تُضِف ألوانًا ثابتة (Hardcoded) جديدة في ملفات أخرى.
   ============================================================ */

:root {
    /* ── حياد "ورقي" دافئ — الأساس الجديد لكل خلفيات التطبيق ────
       بدل الرمادي البارد التقليدي (#F9FAFB)، تعتمد كل الواجهة على
       أساس كريمي دافئ (#FBF9F4) يمنحها طابع "الوثيقة الرسمية". ── */
    --c-white: #FFFFFF;
    --c-bg-1: #FBF9F4;      /* خلفية الصفحة — كريمية دافئة */
    --c-bg-2: #F3EEE1;      /* خلفية أقسام/بطاقات ثانوية — أعمق قليلاً */
    --c-cream: var(--c-bg-1);
    /* سطح البطاقات/اللوحات المرتفعة — أبيض نقي يتباين بوضوح فوق
       الأساس الكريمي. أي خلفية "بطاقة" يجب أن تستخدم هذا الرمز. */
    --c-surface: var(--c-white);
    --c-surface-2: var(--c-bg-2);
    --c-border-1: #EAE4D5; /* حدود دافئة فاتحة */
    --c-border-2: #DCD2B8; /* حدود دافئة أوضح */
    --c-text-muted-light: #948B76; /* نص/أيقونات خافتة جدًا (دافئة الطابع) */
    --c-text-muted: #6B6354;       /* نص ثانوي */
    --c-text-body: #453F33;        /* نص أساسي */
    --c-text-heading: #211E17;     /* عناوين ونص داكن */

    /* ── الأخضر (الهوية الأساسية) — من لوحة الألوان الرسمية ──── */
    --c-green-50: #EAF8F1;
    --c-green-100: #D3F1E1;
    --c-green-200: #A8E4C5;
    --c-green-300: #79D6A5;
    --c-green-400: #54C08A;
    --c-green-500: #1B8354; /* اللون الأساسي (Primary) */
    --c-green-600: #106440;
    --c-green-700: #074D31;

    /* ── سطوح "الهوية" الثابتة — لا تتغيّر مع تبديل السمة الفاتحة/
       الداكنة (الشريط الجانبي، لوحة الدخول، الترويسة): عنصر علامة
       تجارية دائم وليس محتوى يتكيّف مع القراءة. ──────────────── */
    --c-brand-900: #063825;
    --c-brand-800: #074D31;
    --c-brand-700: #106440;
    --c-brand-600: #1B8354;
    --c-brand-glow: #54C08A;

    /* ── الذهبي — لمسة تمييز رسمية أصيلة، أساس الهوية إلى جانب
       الأخضر والكريمي (وليست إضافة عرضية) ─────────────────────── */
    --c-gold: #DCC488;          /* ذهبي ناعم — خلفيات/حدود/زخرفة */
    --c-gold-deep: #B08D46;     /* ذهبي مصمت — أزرار/شارات بتباين كافٍ */
    --c-gold-ink: #7A6224;      /* نص/أيقونة ذهبية مقروءة فوق خلفية فاتحة */
    --c-gold-soft-bg: #F7EFDC;
    --c-gold-soft-border: #EDDCB0;

    /* ── ألوان دلالية (لا تدخل ضمن لوحة الأخضر/الذهبي/الحياد) ──
       الأحمر مطلوب وظيفيًا لحالات الخطأ/الحذف؛ اللوحة المرسلة
       لا تحتوي على لون تحذيري، لذا أضيف حد أدنى ضروري فقط. */
    --c-danger: #B3261E;
    --c-danger-bg: #FCEEEC;
    --c-danger-border: #EFC1BC;
    --c-warning: #8A5A0A;
    --c-warning-bg: #FBF2DE;
    --c-warning-border: #E9CE93;

    /* ── أسماء دلالية عامة تُستخدم عبر التطبيق ─────────────── */
    --c-primary: var(--c-green-500);
    --c-primary-hover: var(--c-green-600);
    --c-primary-active: var(--c-green-700);
    --c-primary-soft-bg: var(--c-green-50);
    --c-primary-soft-border: var(--c-green-100);

    --c-success: var(--c-green-500);
    --c-success-bg: var(--c-green-50);
    --c-success-border: var(--c-green-100);

    /* ── مقاييس هندسية — لغة تصميم "رسمية" مستطيلة الطابع، ليست
       كبسولية بالكامل كسابق التصميم (الكبسولات الكاملة توحي بطابع
       استهلاكي/اجتماعي أكثر منه حكوميًا رسميًا) ─────────────── */
    --c-radius-xs: 6px;
    --c-radius-sm: 8px;
    --c-radius-md: 10px;
    --c-radius-field: 10px;   /* حقول/أزرار — مستطيلة الطابع */
    --c-radius-lg: 18px;      /* بطاقات/لوحات */
    --c-radius-xl: 22px;
    --c-radius-pill: 999px;   /* شارات/رقائق صغيرة فقط */

    --c-shadow-sm: 0 1px 2px rgba(43, 34, 15, .05), 0 1px 1px rgba(43, 34, 15, .04);
    --c-shadow-md: 0 8px 22px rgba(43, 34, 15, .08);
    --c-shadow-lg: 0 18px 40px rgba(43, 34, 15, .12);
    --c-shadow-gold: 0 10px 24px rgba(176, 141, 70, .22);
    --c-shadow-green: 0 10px 24px rgba(16, 100, 64, .22);

    /* ── سلّم طباعي — حدّ أدنى واضح، لا نص أصغر من التسمية التوضيحية ── */
    --fs-display: 2.25rem;
    --fs-h1: 1.75rem;
    --fs-h2: 1.375rem;
    --fs-h3: 1.125rem;
    --fs-body: 1rem;
    --fs-label: .95rem;
    --fs-small: .875rem;
    --fs-caption: .8125rem; /* الحد الأدنى المطلق لأي نص في التطبيق */

    /* ── إعادة تعريف متغيرات Bootstrap الافتراضية (الأزرق) لتطابق
       الهوية الخضراء — يضمن أن أي صفحة تستخدم كلاسات Bootstrap
       القياسية (btn-primary, badge bg-primary...) بدون كلاسات
       .gov-* المخصصة تظهر بنفس الهوية اللونية الموحّدة. هذا الملف
       يُحمَّل بعد Bootstrap في كل التخطيطات، لذا هذه القيم تَغلب. ── */
    --bs-body-bg: var(--c-bg-1);
    --bs-body-color: var(--c-text-body);
    --bs-border-color: var(--c-border-1);
    --bs-primary: var(--c-primary);
    --bs-primary-rgb: 27, 131, 84;
    --bs-primary-text-emphasis: var(--c-primary-active);
    --bs-primary-bg-subtle: var(--c-green-50);
    --bs-primary-border-subtle: var(--c-green-100);
    --bs-link-color: var(--c-primary);
    --bs-link-color-rgb: 27, 131, 84;
    --bs-link-hover-color: var(--c-primary-active);
    --bs-link-hover-color-rgb: 7, 77, 49;
    --bs-info: var(--c-primary);
    --bs-info-rgb: 27, 131, 84;
    --bs-info-bg-subtle: var(--c-green-50);
    --bs-info-border-subtle: var(--c-green-100);
    --bs-info-text-emphasis: var(--c-primary-active);
    --bs-focus-ring-color: rgba(27, 131, 84, .25);

    /* الأحمر/الكهرماني — بدون هذا التعريف تظهر ألوان Bootstrap الافتراضية
       الصارخة (أحمر/أصفر زاهيين) أينما استُخدمت كلاسات .btn-danger/
       .text-warning مباشرة، بما يكسر الهوية اللونية الموحّدة الرسمية ── */
    --bs-danger: var(--c-danger);
    --bs-danger-rgb: 179, 38, 30;
    --bs-danger-bg-subtle: var(--c-danger-bg);
    --bs-danger-border-subtle: var(--c-danger-border);
    --bs-danger-text-emphasis: var(--c-danger);
    --bs-warning: var(--c-warning);
    --bs-warning-rgb: 138, 90, 10;
    --bs-warning-bg-subtle: var(--c-warning-bg);
    --bs-warning-border-subtle: var(--c-warning-border);
    --bs-warning-text-emphasis: var(--c-warning);
}

/* ============================================================
   الوضع الداكن — لوحة مصمَّمة خصيصًا وليست انعكاسًا/تعتيمًا للوحة
   الفاتحة. القيم أدناه أُعيد ضبط تدرّجها (السطوع/التشبّع) بحيث تبقى
   مقروءة ومريحة فوق خلفيات داكنة فعليًا، وليست مجرد "نفس الألوان
   لكن أغمق". يُفعَّل هذا النطاق عبر السمة data-theme="dark" على
   عنصر <html> (انظر theme-switcher.js)، وبالتوازي معه تُفعَّل
   data-bs-theme="dark" لتفعيل نمط Bootstrap الداكن الأصلي لأي
   عنصر Bootstrap قياسي (نوافذ منبثقة، قوائم منسدلة...) دون الحاجة
   لإعادة كتابته يدويًا.
   ============================================================ */
:root[data-theme="dark"] {
    /* ── الحياد ───────────────────────────────────────────── */
    --c-white: #FFFFFF;
    --c-bg-1: #15181C;      /* خلفية الصفحة */
    --c-bg-2: #1D2126;      /* أقسام ثانوية */
    --c-cream: var(--c-bg-1);
    --c-surface: #1F2329;   /* سطح البطاقات/اللوحات */
    --c-surface-2: #262B32; /* سطح متداخل (صفوف متبادلة، حالات hover) */
    --c-border-1: #2E333B;
    --c-border-2: #3D434D;
    --c-text-muted-light: #6B7280;
    --c-text-muted: #9CA3AF;
    --c-text-body: #D1D5DB;
    --c-text-heading: #F3F4F6;

    /* ── الأخضر — أُعيد تصميم التدرّج بالكامل لا تعتيمه فقط:
       50–200 أصبحت أسطحًا داكنة ذات صبغة خضراء (بدل تلوينات فاتحة
       جدًا لا تظهر على خلفية داكنة)، و400–700 هي تدرّج تفاعلي أكثر
       حيوية وتشبّعًا كي يبقى واضحًا وسط الرمادي الداكن المحيط. ── */
    --c-green-50: #0F2A1C;
    --c-green-100: #163C27;
    --c-green-200: #1F5233;
    --c-green-300: #2F7A4C;
    --c-green-400: #4ADE80;
    --c-green-500: #22C55E; /* اللون الأساسي (Primary) */
    --c-green-600: #16A34A;
    --c-green-700: #15803D;

    /* ── الذهبي يبقى غنيًا وواضحًا فوق خلفية داكنة ──────────── */
    --c-gold: #E4C87F;
    --c-gold-deep: #D8B563;
    --c-gold-ink: #E9D9AE;
    --c-gold-soft-bg: #332B18;
    --c-gold-soft-border: #4F4126;

    /* ── ألوان دلالية — أُعيد ضبطها للتباين على خلفية داكنة ── */
    --c-danger: #F0847C;
    --c-danger-bg: #3A2119;
    --c-danger-border: #6B352C;
    --c-warning: #E4B85C;
    --c-warning-bg: #362A12;
    --c-warning-border: #614A1F;

    --c-primary: var(--c-green-500);
    --c-primary-hover: var(--c-green-600);
    --c-primary-active: var(--c-green-700);
    --c-primary-soft-bg: var(--c-green-50);
    --c-primary-soft-border: var(--c-green-100);

    --c-success: var(--c-green-500);
    --c-success-bg: var(--c-green-50);
    --c-success-border: var(--c-green-100);

    /* ظلال أعمق — الظل الفاتح الخفيف يختفي فوق خلفية داكنة، لذا
       يُعتمد على شفافية أعلى + حدود --c-border-1 لإبراز الارتفاع */
    --c-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
    --c-shadow-md: 0 8px 22px rgba(0, 0, 0, .5);
    --c-shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
    --c-shadow-gold: 0 10px 24px rgba(216, 181, 99, .18);
    --c-shadow-green: 0 10px 24px rgba(34, 197, 94, .22);

    /* ── Bootstrap — تُعاد هذه المتغيرات هنا فقط (وليس في :root
       الفاتح) كي تطابق مكوّنات Bootstrap القياسية (النوافذ المنبثقة،
       القوائم المنسدلة، الجداول، حقول الإدخال) نفس لوحة التطبيق
       الداكنة المخصّصة تمامًا بدل رمادي Bootstrap الافتراضي ── */
    --bs-primary: var(--c-primary);
    --bs-primary-rgb: 34, 197, 94;
    --bs-primary-text-emphasis: var(--c-green-400);
    --bs-primary-bg-subtle: var(--c-green-50);
    --bs-primary-border-subtle: var(--c-green-100);
    --bs-link-color: var(--c-green-400);
    --bs-link-color-rgb: 74, 222, 128;
    --bs-link-hover-color: var(--c-green-300);
    --bs-link-hover-color-rgb: 47, 122, 76;
    --bs-info: var(--c-primary);
    --bs-info-rgb: 34, 197, 94;
    --bs-info-bg-subtle: var(--c-green-50);
    --bs-info-border-subtle: var(--c-green-100);
    --bs-info-text-emphasis: var(--c-green-400);
    --bs-focus-ring-color: rgba(34, 197, 94, .3);

    --bs-danger: var(--c-danger);
    --bs-danger-rgb: 240, 132, 124;
    --bs-danger-bg-subtle: var(--c-danger-bg);
    --bs-danger-border-subtle: var(--c-danger-border);
    --bs-danger-text-emphasis: var(--c-danger);
    --bs-warning: var(--c-warning);
    --bs-warning-rgb: 228, 184, 92;
    --bs-warning-bg-subtle: var(--c-warning-bg);
    --bs-warning-border-subtle: var(--c-warning-border);
    --bs-warning-text-emphasis: var(--c-warning);

    --bs-body-bg: var(--c-bg-1);
    --bs-body-color: var(--c-text-body);
    --bs-border-color: var(--c-border-1);
    --bs-border-color-translucent: var(--c-border-1);
    --bs-secondary-bg: var(--c-surface-2);
    --bs-tertiary-bg: var(--c-surface);
    --bs-emphasis-color: var(--c-text-heading);
    --bs-heading-color: var(--c-text-heading);
}

.btn-primary {
    --bs-btn-bg: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary-active);
    --bs-btn-hover-border-color: var(--c-primary-active);
    --bs-btn-active-bg: var(--c-primary-active);
    --bs-btn-active-border-color: var(--c-primary-active);
    --bs-btn-disabled-bg: var(--c-primary);
    --bs-btn-disabled-border-color: var(--c-primary);
    --bs-btn-focus-shadow-rgb: 27, 131, 84;
}

.btn-outline-primary {
    --bs-btn-color: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary);
    --bs-btn-hover-border-color: var(--c-primary);
    --bs-btn-active-bg: var(--c-primary);
    --bs-btn-active-border-color: var(--c-primary);
    --bs-btn-focus-shadow-rgb: 27, 131, 84;
}

.btn-info {
    --bs-btn-bg: var(--c-primary);
    --bs-btn-border-color: var(--c-primary);
    --bs-btn-hover-bg: var(--c-primary-active);
    --bs-btn-hover-border-color: var(--c-primary-active);
    --bs-btn-active-bg: var(--c-primary-active);
    --bs-btn-active-border-color: var(--c-primary-active);
    --bs-btn-color: var(--c-white);
    --bs-btn-hover-color: var(--c-white);
    --bs-btn-active-color: var(--c-white);
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--c-primary) !important;
    color: var(--c-white) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 .2rem rgba(27, 131, 84, .15);
}

.btn-danger {
    --bs-btn-bg: var(--c-danger);
    --bs-btn-border-color: var(--c-danger);
    --bs-btn-hover-bg: #922019;
    --bs-btn-hover-border-color: #922019;
    --bs-btn-active-bg: #922019;
    --bs-btn-active-border-color: #922019;
    --bs-btn-focus-shadow-rgb: 179, 38, 30;
}

.btn-outline-danger {
    --bs-btn-color: var(--c-danger);
    --bs-btn-border-color: var(--c-danger);
    --bs-btn-hover-bg: var(--c-danger);
    --bs-btn-hover-border-color: var(--c-danger);
    --bs-btn-active-bg: var(--c-danger);
    --bs-btn-active-border-color: var(--c-danger);
}

.btn-warning {
    --bs-btn-bg: var(--c-warning);
    --bs-btn-border-color: var(--c-warning);
    --bs-btn-color: var(--c-white);
    --bs-btn-hover-color: var(--c-white);
    --bs-btn-active-color: var(--c-white);
    --bs-btn-hover-bg: #6E4708;
    --bs-btn-hover-border-color: #6E4708;
    --bs-btn-active-bg: #6E4708;
    --bs-btn-active-border-color: #6E4708;
}