/**
 * نظام الألوان الموحد - حلقات التقوى
 * يمكن تغيير جميع ألوان النظام من هنا
 */

:root {
    /* ========== الألوان الأساسية ========== */
    --primary-color: #250909;           /* اللون الأساسي */
    --primary-light: #3d0f0f;           /* اللون الأساسي الفاتح */
    --primary-dark: #1a0606;            /* اللون الأساسي الداكن */
    --primary-opacity-10: rgba(37, 9, 9, 0.1);
    --primary-opacity-20: rgba(37, 9, 9, 0.2);
    
    /* ========== الألوان الثانوية ========== */
    --secondary-color: #cec8bc;         /* اللون الثانوي */
    --secondary-light: #e0dbd1;         /* اللون الثانوي الفاتح */
    --secondary-dark: #b8b3a7;          /* اللون الثانوي الداكن */
    --secondary-opacity-10: rgba(206, 200, 188, 0.1);
    --secondary-opacity-20: rgba(206, 200, 188, 0.2);
    
    /* ========== ألوان الخلفية ========== */
    --color-background: #FFFFFF;
    --color-background-gray: #f9fafb;
    --color-background-dark: #f3f4f6;
    
    /* ========== ألوان النصوص ========== */
    --color-text-primary: #000000;
    --color-text-secondary: #FFFFFF;
    --color-text-muted: #6b7280;
    --color-text-gray: #4b5563;
    
    /* ========== ألوان الأيقونات ========== */
    --color-icon-primary: #250909;
    --color-icon-secondary: #cec8bc;
    
    /* ========== ألوان الحدود ========== */
    --color-border: #e5e7eb;
    --color-border-light: #f3f4f6;
    --color-border-dark: #d1d5db;
    
    /* ========== ألوان التفاعل ========== */
    --color-hover: #f3f4f6;
    --color-focus: #250909;
    --color-active: #1a0606;
    
    /* ========== ألوان الحالات ========== */
    --color-success: #22c55e;
    --color-success-light: #86efac;
    --color-success-dark: #16a34a;
    --color-success-bg: #f0fdf4;
    
    --color-warning: #fbbf24;
    --color-warning-light: #fde047;
    --color-warning-dark: #d97706;
    --color-warning-bg: #fffbeb;
    
    --color-error: #ef4444;
    --color-error-light: #fca5a5;
    --color-error-dark: #dc2626;
    --color-error-bg: #fef2f2;
    
    --color-info: #3b82f6;
    --color-info-light: #93c5fd;
    --color-info-dark: #2563eb;
    --color-info-bg: #eff6ff;
    
    /* ========== ألوان الظلال ========== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    
    /* ========== متغيرات قديمة للتوافق ========== */
    --icon-primary: var(--primary-color);
    --icon-secondary: var(--secondary-color);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
}

/* Base styles */
body {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

/* Text colors */
.text-primary {
    color: var(--color-text-primary) !important;
}

.text-secondary {
    color: var(--color-text-secondary) !important;
}

/* Icon colors */
.icon-primary {
    color: var(--color-icon-primary) !important;
}

.icon-secondary {
    color: var(--color-icon-secondary) !important;
}

/* Background colors */
.bg-icon-primary {
    background-color: var(--color-icon-primary) !important;
}

.bg-icon-secondary {
    background-color: var(--color-icon-secondary) !important;
}

/* Button styles */
.btn-primary {
    background-color: var(--color-icon-primary);
    color: var(--color-text-secondary);
}

.btn-primary:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--color-icon-secondary);
    color: var(--color-text-secondary);
}

.btn-secondary:hover {
    opacity: 0.9;
}

/* Table styles */
.table-header {
    background-color: var(--color-icon-primary);
    color: var(--color-text-secondary);
}

.table-row:hover {
    background-color: var(--color-hover);
}

/* Card styles */
.card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
}

.card-header {
    border-bottom: 1px solid var(--color-border);
}

/* Form styles */
.form-control:focus {
    border-color: var(--color-icon-primary);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .table-responsive {
        overflow-x: auto;
    }
    
    .btn-mobile {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .statistics-grid {
        grid-template-columns: 1fr;
    }
}

/* Utility classes */
.border-primary {
    border-color: var(--color-icon-primary) !important;
}

.border-secondary {
    border-color: var(--color-icon-secondary) !important;
}

/* Statistics card styles */
.stat-card {
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.stat-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.stat-icon {
    color: var(--color-icon-primary);
    font-size: 2rem;
}

/* Navigation styles */
.nav-link {
    color: var(--color-text-primary);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-icon-primary);
}

/* Alert styles */
.alert {
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: rgba(37, 9, 9, 0.1);
    border: 1px solid var(--color-icon-primary);
    color: var(--color-icon-primary);
}

.alert-warning {
    background-color: rgba(206, 200, 188, 0.1);
    border: 1px solid var(--color-icon-secondary);
    color: var(--color-icon-secondary);
}