/* ===========================================================================
   tracking/assets/css/style.css - DARK THEME (GRID ONLY - NO FIXED)
   =========================================================================== */
/* 
   هذا الملف يحتوي على جميع أنماط المشروع
   تاريخ آخر تحديث: 2026-02-20
   النسخة: 4.3.0
   
   تنبيه: هذا الملف مقسم إلى أقسام حسب مكان الاستخدام في الصفحات
   يرجى الحفاظ على هذا الترتيب عند التعديل
   
   الأقسام الرئيسية:
   1. الإعدادات الأساسية والمتغيرات
   2. صفحة تسجيل الدخول
   3. الهيكل الرئيسي (Grid Layout)
   4. الهيدر (رأس الصفحة)
   5. السايدبار (القائمة الجانبية)
   6. المحتوى الرئيسي والعناوين
   7. بطاقات الإحصائيات (Stats Cards)
   8. البطاقات العامة (Cards)
   9. قسم API Keys
   10. الإجراءات السريعة (Quick Actions)
   11. الشجرة الهرمية (Hierarchy Tree)
   12. الجداول
   13. النماذج
   14. الأزرار
   15. الشارات (Badges)
   16. حالات المستخدمين (Status)
   17. التنبيهات (Alerts)
   18. منتقي النطاق (Domain Selector)
   19. الترقيم (Pagination)
   20. الحالات الفارغة (Empty State)
   21. الفوتر (Footer)
   22. عناصر متفرقة
   23. شريط التمرير (Scrollbar)
   24. التجاوب مع الشاشات (Responsive)
   =========================================================================== */

/* ============================================================================
   1. الإعدادات الأساسية والمتغيرات
   =========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* الألوان الرئيسية - تستخدم في جميع أنحاء الموقع */
    --primary-color:   #17947f;      /* اللون الأساسي - أزرق مخضر */
    --primary-dark:    #038effc7;    /* درجة أغمق للتحويم */
    --secondary-color: #6c757d;      /* لون ثانوي - رمادي */
    --success-color: #28a745;        /* لون النجاح - أخضر */
    --danger-color: #dc3545;          /* لون الخطر - أحمر */
    --warning-color: #ffc107;         /* لون التحذير - أصفر */
    --info-color: #17a2b8;            /* لون معلومات - أزرق فاتح */
    
    /* ألوان الخلفية - المستخدمة في جميع الصفحات */
    --bg-primary: #0f172a;            /* الخلفية الرئيسية - أزرق داكن */
    --bg-secondary: #1e293b;           /* خلفية ثانوية - أزرق أفتح قليلاً */
    --bg-tertiary: #98c7ee7e;          /* خلفية ثالثة - شفافة */
    
    /* ألوان النصوص */
    --text-primary: #f1f5f9;           /* النص الرئيسي - أبيض مائل للرمادي */
    --text-secondary: #8db6f0;          /* النص الثانوي - أزرق فاتح */
    
    /* ألوان الحدود والعناصر الأخرى */
    --border-color: #475569;            /* لون الحدود */
    --sidebar-bg: #1e293b;               /* خلفية السايدبار */
    --card-bg: #1e293b;                   /* خلفية البطاقات */
    --hover-bg: #334155;                   /* خلفية عند التحويم */
    --shadow-color: rgba(0, 0, 0, 0.3);    /* لون الظل */
    
    /* ألوان خاصة بلوحة تحكم النطاق (Domain Dashboard) */
    --general-manager-color: #f1c40f;      /* لون المدير العام - أصفر */
    --executive-color: #8e44ad;             /* لون التنفيذي - بنفسجي */
    --depthead-color: #2980b9;              /* لون رئيس القسم - أزرق */
    --regular-color: #27ae60;                /* لون المستخدم العادي - أخضر */
    --api-section-start: #032858;            /* بداية تدرج قسم API - أزرق داكن */
    --api-section-end: #025085;               /* نهاية تدرج قسم API - أزرق أفتح */
    --warning-orange: #f39c12;                 /* لون تحذير برتقالي */
    --danger-red: #e74c3c;                      /* لون خطر أحمر فاتح */
}

/* تنسيق الجسم الرئيسي - يطبق على جميع الصفحات */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
}

/* ============================================================================
   2. صفحة تسجيل الدخول - login.php
   =========================================================================== */
/* الحاوية الرئيسية لصفحة تسجيل الدخول */
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #05235a 0%, #338cf1 100%);
}

/* الحاوية الداخلية لصندوق تسجيل الدخول */
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

/* صندوق تسجيل الدخول نفسه */
.login-box {
    background: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 10px 40px var(--shadow-color);
    padding: 40px;
    border: 1px solid var(--border-color);
}

/* رأس صندوق تسجيل الدخول */
.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    color: var(--text-primary);
    margin-bottom: 10px;
}

.login-header p {
    color: var(--text-secondary);
}

/* ============================================================================
   3. الهيكل الرئيسي (Grid Layout) - layout.php
   =========================================================================== */
/* 
   هذا التنسيق يطبق على الصفحات التي تحتوي على:
   - header (الهيدر)
   - sidebar (القائمة الجانبية)
   - main-content (المحتوى الرئيسي)
   - footer (الفوتر)
*/
.container {
    display: grid;
    grid-template-columns: 260px 1fr;  /* عرض السايدبار 260px، باقي المساحة للمحتوى */
    grid-template-rows: auto 1fr auto;  /* الهيدر والفوتر بارتفاع تلقائي، المحتوى يأخذ باقي المساحة */
    min-height: 100vh;                   /* ارتفاع كامل الشاشة */
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================================
   4. الهيدر (رأس الصفحة) - يظهر في جميع الصفحات بعد تسجيل الدخول
   =========================================================================== */
.header {
    grid-column: 1 / -1;                 /* يمتد على كل الأعمدة */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 70px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 4px var(--shadow-color);
}

/* شعار الموقع في الهيدر */
.logo h1 {
    font-size: 1.5rem;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo h1 a {
    color: inherit;
    text-decoration: none;
}

/* معلومات المستخدم في الهيدر - username والنطاق */
.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* رسالة الترحيب */
.welcome-message {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.welcome-message strong {
    color: var(--text-primary);
}

/* شارة عرض النطاق الحالي */
.domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(74, 107, 255, 0.15);
    border: 1px solid rgba(74, 107, 255, 0.3);
    border-radius: 30px;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 500;
}

/* أزرار الإجراءات في الهيدر */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-actions .btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    border-radius: 30px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.header-actions .btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-decoration: none;
}

.header-actions .btn-outline:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

/* زر تسجيل الخروج - لون خاص */
.header-actions .logout-btn {
    color: #ff6b6b !important;
    border-color: #ff6b6b !important;
}

.header-actions .logout-btn:hover {
    background: rgba(255, 107, 107, 0.1) !important;
    color: #ff8787 !important;
}

/* ============================================================================
   5. السايدبار (القائمة الجانبية) - يظهر في جميع الصفحات
   =========================================================================== */
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 20px 0;
    overflow-y: auto;
}

/* قائمة الروابط في السايدبار */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    margin: 2px 0;
    padding: 0;
}

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.sidebar-menu li a:hover {
    background: var(--hover-bg);
    color: white !important;
    border-left-color: var(--primary-color);
}

/* الرابط النشط في السايدبار */
.sidebar-menu li.active a {
    background: var(--hover-bg);
    color: white;
    border-left-color: var(--primary-color);
    font-weight: 600;
}

/* أيقونات القائمة */
.sidebar-menu .icon {
    font-size: 1.2em;
    min-width: 24px;
    text-align: center;
}

/* رابط تسجيل الخروج */
.sidebar-menu .logout-link a {
    color: #ff6b6b;
}

.sidebar-menu .logout-link a:hover {
    background: rgba(255, 107, 107, 0.1);
    color: white !important;
    border-left-color: #ff6b6b;
}

/* رابط تسجيل الدخول */
.sidebar-menu .login-link a {
    color: #28a745;
    font-weight: 600;
}

/* تذييل السايدبار - معلومات إضافية */
.sidebar-footer {
    margin-top: 20px;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-secondary);
}

/* ============================================================================
   6. المحتوى الرئيسي والعناوين - main-content في جميع الصفحات
   =========================================================================== */
.main-content {
    padding: 30px;
    background: var(--bg-primary);
    max-width: 1400px;
    width: 100%;
}

/* توسيط المحتوى داخل الـ main-content */
.main-content > * {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

/* رأس الصفحة - عنوان الصفحة الرئيسي */
.page-header {
    margin-bottom: 30px;
}

.page-header h2 {
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 5px;
}

.page-header p {
    color: var(--text-secondary);
    margin: 0;
}

/* ============================================================================
   6.1 حاوية العنوان الخاصة بلوحة تحكم النطاق - domain_dashboard.php
   =========================================================================== */
/* 
   هذا التنسيق خاص بالهيدر الداخلي لصفحة domain_dashboard.php
   يحتوي على اسم النطاق وحالته والأزرار
*/
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 50px;
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    padding: 20px 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* قسم العنوان في الحاوية */
.header-title {
    flex: 1;
}

.header-title h2 {
    margin: 0 0 5px 0;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* أيقونة النطاق (🏢) */
.domain-icon {
    font-size: 2rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* النص الفرعي تحت العنوان */
.subtitle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    padding-left: 52px; /* محاذاة مع النص بعد الأيقونة */
}

/* أزرار الإجراءات في الحاوية */
.header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.header-actions .btn {
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.header-actions .btn-outline {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
}

.header-actions .btn-outline:hover {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* ============================================================================
   7. بطاقات الإحصائيات (Stats Cards) - تستخدم في عدة صفحات
   =========================================================================== */
/* 
   تستخدم في:
   - dashboard.php
   - domain_dashboard.php
   - my_users.php
*/
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* تنسيق خاص للوحة تحكم النطاق - 5 بطاقات */
.stats-grid.domain-dashboard {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

/* على الشاشات الكبيرة جداً، عرض 5 بطاقات */
@media (min-width: 1200px) {
    .stats-grid.domain-dashboard {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* بطاقة الإحصائية الواحدة */
.stat-card {
    background: var(--card-bg);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px var(--shadow-color);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    transition: transform 0.3s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* أيقونة البطاقة */
.stat-icon {
    font-size: 2.5rem;
    margin-right: 20px;
    color: var(--primary-color);
}

/* محتوى البطاقة (الأرقام والنصوص) */
.stat-content h3 {
    font-size: 2rem;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.stat-content p {
    color: var(--text-secondary);
    margin: 0;
}

.stat-content small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

/* ألوان مختلفة للبطاقات حسب نوع الإحصائية */
.stat-card.total-users { border-left: 4px solid var(--primary-color); }
.stat-card.general-managers { border-left: 4px solid var(--general-manager-color); }
.stat-card.executives { border-left: 4px solid var(--executive-color); }
.stat-card.dept-heads { border-left: 4px solid var(--depthead-color); }
.stat-card.regular { border-left: 4px solid var(--regular-color); }

/* ============================================================================
   8. البطاقات العامة (Cards) - تستخدم لعرض المعلومات
   =========================================================================== */
.card {
    background: var(--card-bg);
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px var(--shadow-color);
    border: 1px solid var(--border-color);
}

/* رأس البطاقة */
.card-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* أيقونة في رأس البطاقة */
.header-icon {
    font-size: 1.4rem;
}

/* جسم البطاقة */
.card-body {
    padding: 25px;
}

/* ============================================================================
   8.1 بطاقة معلومات النطاق - domain_dashboard.php
   =========================================================================== */
.domain-info-card {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    border-radius: 12px;
    border: 1px solid var(--border-color);
    margin: 30px 0;
}

/* شبكة المعلومات - تعرض في 3 أعمدة */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

/* عنصر معلومات واحد */
.info-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* عنوان المعلومة (مثلاً: Domain ID:) */
/* بعد — فقط داخل api-info */
.api-info .info-label {
    color: #ffffff;
    font-weight: 600;
    min-width: 100px;
    font-size: 0.9rem;
}

.api-info .info-value {
    color: #ffffff;
    font-size: 0.9rem;
}

.api-info code {
    color: #ffffff;
    background: rgba(255,255,255,0.1);
}

/* شارة الخطة (Small/Medium/Large) */
.plan-badge {
    padding: 4px 10px;
    border-radius: 20px;
    color: white;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
}

/* بادئة مفتاح API */
.api-prefix {
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: monospace;
    color: var(--primary-color);
    font-size: 0.85rem;
}

/* ============================================================================
   9. قسم API Keys - domain_dashboard.php
   =========================================================================== */
/* الحاوية الرئيسية لقسم API */
.api-section {
    background: linear-gradient(135deg, var(--api-section-start) 0%, var(--api-section-end) 100%);
    border-radius: 12px;
    margin: 30px 0;
    border: 1px solid #2c5282;
}

/* رأس قسم API */
.api-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* عنوان قسم API مع الأيقونة */
.api-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.api-title h3 {
    margin: 0;
    color: white;
    font-size: 1.2rem;
}

/* أيقونة API (🔑) */
.api-icon {
    font-size: 1.8rem;
}

/* الوصف أسفل العنوان */
.api-description {
    margin: 5px 0 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* محتوى قسم API */
.api-content {
    padding: 22px;
    background: rgba(255, 255, 255, 0.05);
}

/* شبكة معلومات API */
.api-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* صف معلومات واحد */
.info-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* شارة الحالة النشط */
.status-active-badge {
    background: rgba(40, 167, 69, 0.3);
    color: #2ecc71;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #2ecc71;
    font-size: 0.85rem;
}

/* أزرار الإجراءات في قسم API */
.api-actions {
    text-align: center;
}

/* زر توليد مفتاح API جديد */
.btn-generate {
    background: linear-gradient(135deg, var(--warning-color), #e67e22);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.btn-generate:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
}

.btn-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #4a5568;
}

/* صندوق التحذير - تنبيهات مهمة */
.warning-box {
    background: rgba(247, 80, 3, 0.15);
    border: 1px solid rgba(247, 80, 3, 0.3);
    border-radius: 8px;
    padding: 15px 20px;
    color: var(--warning-orange);
    text-align: left;
}

.warning-box ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* ============================================================================
   10. الإجراءات السريعة (Quick Actions) - domain_dashboard.php
   =========================================================================== */
/* حاوية الأزرار السريعة */
.quick-actions {
    display: flex;
    gap: 12px;
    margin: 25px 0;
    flex-wrap: wrap;
}

/* أيقونة داخل الزر */
.btn-icon {
    font-size: 1rem;
}

/* ============================================================================
   11. الشجرة الهرمية (Hierarchy Tree) - domain_dashboard.php
   =========================================================================== */
/* قسم الشجرة الهرمية */
.hierarchy-section {
    margin: 40px 0;
}

/* عنوان القسم */
.section-title {
    margin-bottom: 25px;
    font-size: 1.4rem;
}

/* حاوية الشجرة */
.hierarchy-tree-container {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 25px;
    overflow-x: auto;
}

/* عقدة واحدة في الشجرة */
.tree-node {
    margin-bottom: 12px;
}

/* محتوى العقدة */
.tree-node-content {
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--border-color);
}

/* رأس العقدة - يحتوي على اسم المستخدم وأزرار التحكم */
.tree-node-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    cursor: pointer;
}

.tree-node-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* معلومات المستخدم في الشجرة - تم تغيير الاسم من user-info لتجنب التعارض */
.tree-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* زر طي/فتح الشجرة (▼ / ►) */
.tree-toggle {
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    width: 20px;
    text-align: center;
}

.tree-toggle:hover {
    color: var(--primary-color);
}

/* أيقونة الدور (👑, 📊, 👔, 👤) */
.role-icon {
    font-size: 1.2rem;
}

/* شارة الدور (General Manager, Executive, etc) */
.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
}

/* ألوان مختلفة لشارات الأدوار */
.badge-general-manager { background: var(--general-manager-color); color: #212529; }
.badge-executive { background: var(--executive-color); }
.badge-depthead { background: var(--depthead-color); }
.badge-regular { background: var(--regular-color); }

/* العقد الفرعية - تظهر بمسافة بادئة */
.tree-children {
    margin-top: 12px;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 2px dashed var(--border-color);
}

/* حالة عدم وجود هيكل تنظيمي */
.empty-hierarchy {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* ============================================================================
   12. الجداول - تستخدم في my_users.php, logs.php وغيرها
   =========================================================================== */
.table {
    width: 100%;
    border-collapse: collapse;
}

/* رأس الجدول */
.table th {
    background: var(--bg-tertiary);
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

/* خلايا الجدول */
.table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

/* تحويم على صف الجدول */
.table tbody tr:hover {
    background: var(--hover-bg);
}

/* ============================================================================
   13. النماذج - تستخدم في جميع صفحات الإضافة والتعديل
   =========================================================================== */
/* مجموعة الحقل الواحد */
.form-group {
    margin-bottom: 20px;
}

/* تسمية الحقل */
.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: var(--text-primary);
}

/* حقول الإدخال */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 15px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s;
    color: var(--text-primary);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* نص placeholder */
.form-group input::placeholder {
    color: var(--text-secondary);
}

/* صف من الحقول - عدة أعمدة */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* ============================================================================
   14. الأزرار - تستخدم في جميع أنحاء الموقع
   =========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

/* الزر الأساسي - أخضر */
.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* الزر الثانوي - رمادي */
.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

/* زر النجاح - أخضر فاتح */
.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: linear-gradient(135deg, #218838, #1e7e34);
    transform: translateY(-2px);
}

/* زر الخطر - أحمر */
.btn-danger {
    background: var(--danger-color);
    color: white;
}

/* زر المعلومات - أزرق */
.btn-info {
    background: var(--info-color);
    color: white;
}

.btn-info:hover {
    background: linear-gradient(135deg, #138496, #117a8b);
    transform: translateY(-2px);
}

/* زر بحدود فقط - شفاف */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* زر صغير الحجم */
.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* زر بعرض كامل */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* ============================================================================
   15. الشارات (Badges) - تستخدم لعرض الأدوار والصلاحيات
   =========================================================================== */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
}

/* شارة السوبر أدمن */
.badge-super_admin {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

/* شارة أدمن النطاق */
.badge-domain_admin {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
}

/* شارة المستخدم العادي */
.badge-user {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
}

/* ============================================================================
   16. حالات المستخدمين (Status) - نشط/موقوف/غير نشط
   =========================================================================== */
.status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* شارة الحالة العامة */
.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* حالة نشط */
.status-active {
    background: rgba(40, 167, 69, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

/* حالة غير نشط */
.status-inactive {
    background: rgba(220, 53, 69, 0.2);
    color: var(--danger-red);
    border: 1px solid var(--danger-red);
}

/* حالة موقوف */
.status-suspended {
    background: rgba(247, 80, 3, 0.2);
    color: var(--warning-orange);
    border: 1px solid var(--warning-orange);
}

/* ============================================================================
   17. التنبيهات (Alerts) - رسائل النظام
   =========================================================================== */
.alert {
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px solid;
}

/* تنبيه خطر */
.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #f8d7da;
    border-color: #721c24;
}

/* تنبيه نجاح */
.alert-success {
    background: rgba(40, 167, 69, 0.1);
    color: #d4edda;
    border-color: #155724;
}

/* تنبيه تحذير */
.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #fff3cd;
    border-color: #856404;
}

/* ============================================================================
   18. منتقي النطاق (Domain Selector) - للسوبر أدمن فقط
   =========================================================================== */
.domain-selector-super-admin {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 4px 12px var(--shadow-color);
}

/* نص "Select Domain to Monitor" */
.domain-selector-super-admin span:first-child {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(74, 107, 255, 0.1);
    padding: 8px 16px;
    border-radius: 30px;
    border-left: 3px solid var(--primary-color);
}

/* قائمة اختيار النطاق */
.domain-selector-super-admin select {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 8px;
    min-width: 250px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.domain-selector-super-admin select:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.1);
}

.domain-selector-super-admin select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(74, 107, 255, 0.2);
}

/* زر التحديد */
.domain-selector-super-admin .btn {
    background: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(74, 107, 255, 0.3);
}

.domain-selector-super-admin .btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(74, 107, 255, 0.4);
}

/* ============================================================================
   18.1 شارة النطاق الحالي - تظهر في الهيدر
   =========================================================================== */
.current-domain-badge {
    background: rgba(5, 64, 141, 0.5);
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(122, 250, 212, 0.877);
    backdrop-filter: blur(5px);
}

.current-domain-badge span:first-child {
    font-weight: normal;
    color: var(--text-secondary);
    background: transparent;
    padding: 0;
    border-left: none;
}

.current-domain-badge strong {
    color: var(--primary-color);
    font-weight: 700;
    background: rgba(248, 248, 244, 0.842);
    padding: 4px 12px;
    border-radius: 20px;
    margin-left: 5px;
    border: 1px solid rgb(249, 250, 250);
}

/* ============================================================================
   19. الترقيم (Pagination) - يستخدم في الصفحات ذات القوائم الطويلة
   =========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 5px;
}

.page-link {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--primary-color);
    text-decoration: none;
    border-radius: 3px;
}

.page-link:hover,
.page-item.active .page-link {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ============================================================================
   20. الحالات الفارغة (Empty State) - عندما لا يوجد بيانات
   =========================================================================== */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

/* ============================================================================
   21. الفوتر (Footer) - أسفل الصفحة
   =========================================================================== */
.footer {
    grid-column: 1 / -1;
    padding: 20px 30px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-secondary);
}

/* ============================================================================
   22. عناصر متفرقة
   =========================================================================== */
/* تنسيق الكود */
code {
    background: var(--bg-tertiary);
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    color: var(--primary-color);
}

/* الروابط */
a {
    color: var(--primary-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* ============================================================================
   23. شريط التمرير (Scrollbar) - تخصيص مظهر السكرول
   =========================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* ============================================================================
   23.1 تحديد النص (Selection)
   =========================================================================== */
::selection {
    background-color: var(--primary-color);
    color: white;
}

/* ============================================================================
   24. التجاوب مع الشاشات (Responsive) - للشاشات الصغيرة
   =========================================================================== */
@media (max-width: 768px) {
    /* تغيير تخطيط الـ Grid إلى عمود واحد */
    .container {
        grid-template-columns: 1fr;
    }
    
    /* إخفاء السايدبار في الموبايل */
    .sidebar {
        display: none;
    }
    
    /* تقليل padding المحتوى الرئيسي */
    .main-content {
        padding: 20px;
    }
    
    /* جعل شبكة الإحصائيات عمود واحد */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* جعل صفوف النماذج عمود واحد */
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* تعديل الهيدر */
    .header {
        flex-direction: column;
        height: auto;
        padding: 15px;
        gap: 10px;
    }
    
    /* تعديل معلومات المستخدم */
    .user-info {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* تعديل أزرار الهيدر */
    .header-actions {
        width: 100%;
        justify-content: center;
    }
    
    /* تعديل حاوية العنوان */
    .header-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    /* تعديل عنوان الصفحة */
    .header-title h2 {
        justify-content: center;
    }
    
    /* إزالة المسافة البادئة للنص الفرعي */
    .subtitle {
        padding-left: 0;
    }
    
    /* تعديل عناصر المعلومات */
    .info-item {
        flex-wrap: wrap;
    }
    
    /* تصغير عرض التسمية */
    .info-label {
        min-width: 80px;
    }
    
    /* تعديل منتقي النطاق */
    .domain-selector-super-admin {
        flex-direction: column;
        align-items: stretch;
        padding: 15px;
    }
    
    .domain-selector-super-admin select {
        width: 100%;
    }
    
    .domain-selector-super-admin form {
        flex-direction: column;
    }
    
    /* تعديل شارة النطاق الحالي */
    .current-domain-badge {
        width: 100%;
        justify-content: center;
    }
}