/**
 * ═══════════════════════════════════════════════════════════════
 *  لوحة الألوان — هادية ومريحة للعين (موقع + لوحة تحكم)
 * ═══════════════════════════════════════════════════════════════
 *
 *  ① أساسي (Primary)     #5a9b88  — أخضر سجادي هادئ للأزرار والروابط
 *  ② أساسي فاتح          #7ab5a4  — حالات hover / الوضع الداكن
 *  ③ أساسي غامق          #466f62  — عناوين ونصوص مميزة
 *
 *  ④ ثانوي (Secondary)   #3d534c  — شريط جانبي لوحة التحكم
 *  ⑤ ثانوي فاتح          #5c726a  — نص ثانوي على خلفية داكنة
 *
 *  ⑥ خلفية الصفحة        #f0f4f2  — رمادي-أخضر فاتح جداً
 *  ⑦ سطح البطاقات        #fafcfb  — أبيض دافئ
 *  ⑧ حدود                #dde6e2  — رمادي-أخضر خفيف
 *
 *  ⑨ نص رئيسي            #3d4a46  — رمادي-أخضر (ليس أسود)
 *  ⑩ نص ثانوي            #6d7f79  — للوصف والتلميحات
 *  ⑪ نص خفيف             #95a8a1  — placeholders
 *
 *  ⑫ نجاح / ⑬ تحذير / ⑭ خطأ — بدرجات مخفّفة
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    /* ── الأساسي ── */
    --palette-primary: #5a9b88;
    --palette-primary-hover: #4d8a78;
    --palette-primary-light: #7ab5a4;
    --palette-primary-dark: #466f62;
    --palette-primary-soft: #e8f2ef;
    --palette-primary-muted: #c5dbd3;
    --color-primary-rgb: 90, 155, 136;

    /* ── الثانوي ── */
    --palette-secondary: #3d534c;
    --palette-secondary-hover: #4a635b;
    --palette-secondary-soft: #5c726a;
    --color-secondary-rgb: 61, 83, 76;

    /* ── المحايد ── */
    --palette-bg: #f0f4f2;
    --palette-surface: #fafcfb;
    --palette-surface-elevated: #ffffff;
    --palette-border: #dde6e2;
    --palette-border-subtle: #e8eeeb;

    /* ── النص ── */
    --palette-text: #3d4a46;
    --palette-text-muted: #6d7f79;
    --palette-text-subtle: #95a8a1;

    /*
     * Container — مضبوط لماك بوك إير (~1280–1440px) وشاشات أكبر
     * 80rem ≈ 1280px | 85rem ≈ 1360px
     */
    --site-container-max: 80rem;
    --site-container-padding: 1rem;
    --site-aside-width: 15rem;
    --site-aside-right-width: 17rem;
    --site-feed-max: 100%;

    /* ── الشريط الجانبي (لوحة التحكم) ── */
    --palette-sidebar: #3a4f48;
    --palette-sidebar-hover: #455c54;
    --palette-sidebar-text: rgba(255, 255, 255, 0.82);
    --palette-sidebar-text-muted: rgba(255, 255, 255, 0.55);

    /* ── الحالات ── */
    --palette-success: #5a9b88;
    --palette-success-soft: #e8f2ef;
    --palette-warning: #b8956a;
    --palette-warning-soft: #f5f0e8;
    --palette-danger: #c07070;
    --palette-danger-soft: #f8ecec;
    --palette-info: #6a94b8;
    --palette-info-soft: #ecf2f7;

    /* ── ظلال هادئة ── */
    --shadow-sm: 0 1px 2px rgba(61, 74, 70, 0.04);
    --shadow-md: 0 4px 16px -2px rgba(61, 74, 70, 0.07);
    --shadow-lg: 0 12px 28px -6px rgba(61, 74, 70, 0.1);

    /* ── ربط المتغيرات القديمة (توافق) ── */
    --color-primary: var(--palette-primary);
    --color-primary-light: var(--palette-primary-light);
    --color-primary-dark: var(--palette-primary-dark);
    --color-secondary: var(--palette-secondary);
    --color-brand: var(--palette-primary);

    --site-bg: var(--palette-bg);
    --site-surface: var(--palette-surface-elevated);
    --site-border: var(--palette-border);
    --site-text: var(--palette-text);
    --site-text-muted: var(--palette-text-muted);
    --site-radius: 0.875rem;
    --site-radius-lg: 1.125rem;
    --site-shadow: var(--shadow-md);
    --site-shadow-hover: var(--shadow-lg);
}

.dark {
    /* طبقات متناسقة — نفس العائلة اللونية (أخضر-رمادي) */
    --palette-bg: #141a18;
    --palette-surface: #1c2421;
    --palette-surface-elevated: #232d29;
    --palette-border: #2e3a36;
    --palette-border-subtle: #283330;

    --palette-text: #e4ece9;
    --palette-text-muted: #9eb0a8;
    --palette-text-subtle: #7a8f87;

    --palette-primary: #7ab5a4;
    --palette-primary-hover: #8ec4b4;
    --palette-primary-light: #9dcec0;
    --palette-primary-dark: #9dcec0;
    --palette-primary-soft: rgba(122, 181, 164, 0.14);
    --palette-primary-muted: rgba(122, 181, 164, 0.22);
    --color-primary-rgb: 122, 181, 164;

    --palette-secondary: #2a3834;
    --palette-sidebar: #222b28;
    --palette-sidebar-hover: #2d3834;
    --palette-sidebar-text: rgba(228, 236, 233, 0.9);
    --palette-sidebar-text-muted: rgba(228, 236, 233, 0.5);

    --palette-success-soft: rgba(122, 181, 164, 0.12);
    --palette-warning-soft: rgba(184, 149, 106, 0.12);
    --palette-danger-soft: rgba(192, 112, 112, 0.12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35);

    --site-bg: var(--palette-bg);
    --site-surface: var(--palette-surface-elevated);
    --site-border: var(--palette-border);
    --site-text: var(--palette-text);
    --site-text-muted: var(--palette-text-muted);
}

/* ── Tailwind CDN → لوحة هادئة ── */
.text-emerald-600,
.hover\:text-emerald-600:hover,
.text-emerald-700 {
    color: var(--palette-primary) !important;
}

.bg-emerald-600,
.hover\:bg-emerald-600:hover {
    background-color: var(--palette-primary) !important;
}

.bg-emerald-50,
.hover\:bg-emerald-50:hover {
    background-color: var(--palette-primary-soft) !important;
}

.border-emerald-500,
.focus\:border-emerald-500:focus {
    border-color: var(--palette-primary) !important;
}

.focus\:ring-emerald-500:focus {
    --tw-ring-color: var(--palette-primary-muted) !important;
}

.dark .dark\:bg-emerald-900\/20 {
    background-color: var(--palette-primary-soft) !important;
}

.dark .dark\:text-emerald-400 {
    color: var(--palette-primary-light) !important;
}

.ring-emerald-500 {
    --tw-ring-color: var(--palette-primary-muted);
}

.text-gray-900 {
    color: var(--palette-text);
}

.text-gray-600,
.text-gray-500 {
    color: var(--palette-text-muted);
}

.bg-white {
    background-color: var(--palette-surface-elevated);
}

.bg-gray-50,
.bg-gray-100 {
    background-color: var(--palette-primary-soft);
}

.dark .dark\:bg-gray-800 {
    background-color: var(--palette-surface-elevated) !important;
}

.dark .dark\:bg-gray-900 {
    background-color: var(--palette-bg) !important;
}

.dark .dark\:text-gray-100,
.dark .dark\:text-white {
    color: var(--palette-text) !important;
}

.dark .dark\:text-gray-300,
.dark .dark\:text-gray-400 {
    color: var(--palette-text-muted) !important;
}

.dark .dark\:border-gray-700 {
    border-color: var(--palette-border) !important;
}

/* ═══════════════════════════════════════════════════════════════
   الوضع الداكن — توحيد Tailwind مع اللوحة (الواجهة العامة)
   ═══════════════════════════════════════════════════════════════ */

html.dark {
    color-scheme: dark;
    background-color: var(--palette-bg);
}

html.dark body,
.dark body,
body.site-shell {
    background-color: var(--palette-bg) !important;
    color: var(--palette-text);
}

.dark main,
.dark .site-main,
.dark .container {
    background-color: transparent;
}

/* خلفيات رمادية → طبقات اللوحة */
.dark .bg-gray-900,
.dark .dark\:bg-gray-900,
.dark #preloader {
    background-color: var(--palette-bg) !important;
}

.dark .bg-gray-800,
.dark .dark\:bg-gray-800 {
    background-color: var(--palette-surface-elevated) !important;
}

.dark .bg-gray-700,
.dark .dark\:bg-gray-700 {
    background-color: var(--palette-surface) !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .dark\:bg-gray-50,
.dark .dark\:bg-gray-100 {
    background-color: var(--palette-primary-soft) !important;
}

.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover,
.dark .dark\:hover\:bg-gray-50:hover,
.dark .dark\:hover\:bg-gray-700:hover,
.dark .dark\:hover\:bg-gray-600:hover {
    background-color: var(--palette-primary-soft) !important;
}

/* بطاقات الموقع — تجاهل gray-800 في Blade */
.dark .site-card,
.dark .site-card.dark\:bg-gray-800,
.dark .site-sidebar-panel,
.dark .site-sidebar-panel.dark\:bg-gray-800,
.dark .site-card-flat,
.dark .site-footer {
    background-color: var(--palette-surface-elevated) !important;
    border-color: var(--palette-border-subtle) !important;
    color: var(--palette-text);
}

.dark .site-shell {
    background-color: var(--palette-bg);
    background-image: radial-gradient(ellipse 100% 70% at 50% -25%, rgba(var(--color-primary-rgb), 0.05), transparent 60%);
}

.dark .site-nav {
    background: rgba(35, 45, 41, 0.94);
    border-bottom-color: var(--palette-border-subtle);
}

.dark .site-composer-trigger {
    background-color: var(--palette-surface) !important;
    border-color: var(--palette-border);
    color: var(--palette-text-subtle);
}

.dark .site-footer {
    background-color: var(--palette-surface) !important;
}

/* حدود */
.dark .border-gray-100,
.dark .border-gray-200,
.dark .dark\:border-gray-100,
.dark .dark\:border-gray-200 {
    border-color: var(--palette-border-subtle) !important;
}

.dark .border-gray-300,
.dark .border-gray-600,
.dark .dark\:border-gray-300,
.dark .dark\:border-gray-600 {
    border-color: var(--palette-border) !important;
}

/* نصوص */
.dark .text-gray-800,
.dark .text-gray-700,
.dark .dark\:text-gray-200 {
    color: var(--palette-text) !important;
}

.dark .text-gray-900,
.dark .dark\:text-white {
    color: var(--palette-text) !important;
}

/* تنبيهات وmodals */
.dark .bg-red-100,
.dark .bg-green-100,
.dark .bg-amber-100 {
    filter: brightness(0.85);
}

.dark .bg-black.bg-opacity-50,
.dark .bg-black\/50 {
    background-color: rgba(20, 26, 24, 0.75) !important;
}

/* ترقيم */
.dark .pagination-item-inactive,
.dark .pagination-nav-active,
.dark .pagination-nav-disabled {
    background-color: var(--palette-surface-elevated) !important;
    color: var(--palette-text-muted) !important;
}

.dark .pagination-item-inactive:hover,
.dark .pagination-nav-active:hover {
    background-color: var(--palette-primary-soft) !important;
}

/* حقول إدخال ومنبثقات */
.dark .bg-gray-100,
.dark .dark\:bg-gray-100 {
    background-color: var(--palette-surface) !important;
    color: var(--palette-text) !important;
}

.dark .dark\:bg-gray-700\/50,
.dark .bg-gray-700\/50 {
    background-color: var(--palette-surface) !important;
}

.dark .bg-emerald-200,
.dark .dark\:bg-emerald-200 {
    background-color: var(--palette-primary-muted) !important;
}

.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-lg.shadow-lg,
.dark .bg-white.dark\:bg-gray-800 {
    background-color: var(--palette-surface-elevated) !important;
    border: 1px solid var(--palette-border-subtle);
    color: var(--palette-text);
}

.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: var(--shadow-lg) !important;
}

/* قوائم منسدلة */
.dark .ring-black\/5 {
    --tw-ring-color: var(--palette-border) !important;
}