/* =========================================
 *
 * ملف التنسيق الرئيسي (app.css)
 *
 * ========================================= */

/* 1. تعريف الألوان والمتغيرات العامة */
:root {
    --color-primary: #2563eb;       /* أزرق أساسي */
    --color-primary-dark: #1d4ed8;  /* أزرق غامق */
    --color-secondary: #059669;     /* أخضر */
    --color-danger: #dc2626;        /* أحمر */
    --color-background: #f9fafb;    /* خلفية عامة */
    --sidebar-width: 16rem;         /* عرض القائمة الجانبية */
}

/* 2. إعدادات الخط والجسم */
body {
    font-family: 'Tajawal', sans-serif;
    background-color: var(--color-background);
    color: #1f2937;
}

/* 3. تحسين شريط التمرير (Scrollbar) للقائمة الجانبية */
.sidebar::-webkit-scrollbar {
    display: none;
}
.sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* 4. تمييز العنصر النشط في القائمة الجانبية */
/* يضيف خطًا أزرق على يمين العنصر النشط */
.sidebar nav a.bg-blue-50 {
    border-right: 4px solid var(--color-primary);
}
/* تحسين مظهر روابط القائمة */
.sidebar nav a {
    transition: all 0.2s ease-in-out;
}

/* 5. أنماط المحادثة (لصفحات الدعم والتذاكر) */
.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    position: relative;
}

/* رسائل الأدمن/المستخدم (على اليمين) */
.chat-bubble-admin, .chat-bubble-client {
    background-color: #dbeafe; /* أزرق فاتح */
    color: #1e3a8a;
    border-bottom-right-radius: 0.25rem;
    margin-right: auto; /* لغة عربية: هذا يجعله يمين */
    margin-left: 0;
}

/* رسائل الدعم الفني (على اليسار) */
.chat-bubble-support {
    background-color: #f3f4f6; /* رمادي فاتح */
    color: #1f2937;
    border-bottom-left-radius: 0.25rem;
    margin-left: auto; /* لغة عربية: هذا يجعله يسار */
    margin-right: 0;
}

/* 6. أنماط محرر الأكواد (CodeMirror) */
.CodeMirror { 
    border: 1px solid #d1d5db; 
    border-radius: 0.5rem; 
    font-family: monospace;
    direction: ltr; /* الأكواد دائمًا من اليسار لليمين */
}

/* 7. تحسينات عامة للنماذج */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* 8. أنماط الطباعة (للبطاقات والفواتير) */
@media print {
    .no-print { display: none !important; }
    .print-only { display: block !important; }
    body { background-color: white; }
}