:root{
    --brand-dark:#111827;
    --brand-dark-2:#1f2937;
    --brand-accent:#1e90ff; /* accent for highlights */
}

.navbar{box-shadow:0 2px 8px rgba(0,0,0,.08)}
.navbar .nav-link{transition:opacity .2s ease}
.navbar .nav-link:hover{opacity:.85}
/* active link underline */
.navbar .nav-link.active, .navbar .dropdown-toggle.show { position: relative; }
.navbar .nav-link.active::after, .navbar .dropdown-toggle.show::after { content:''; position:absolute; bottom:-6px; right:0; left:0; height:2px; background: rgba(255,255,255,0.7); border-radius:2px; }

/* تصميم البطاقات */
.card {
    border: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-sm);
    height: 100%;
    position: relative;
    z-index: 1;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px; /* حجم الإطار */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-2));
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card:hover::before {
    opacity: 1;
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 1.25rem 1.5rem;
}

.card-header h5 {
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--heading-color);
}

/* تحسين تصميم البطاقات بتأثير الزجاج */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.stat-card {
    text-align: center;
    padding: 1.5rem;
}

.stat-card .stat-value {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0.5rem 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.stat-card.success .stat-value {
    background: linear-gradient(135deg, var(--success-color), #34d399);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card.warning .stat-value {
    background: linear-gradient(135deg, var(--warning-color), #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card.info .stat-value {
    background: linear-gradient(135deg, var(--info-color), #38bdf8);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 0;
}

.badge.bg-warning{background-color:#f59e0b!important;color:#111827!important}
.badge.bg-info{background-color:#38bdf8!important;color:#111827!important}
/* badge subtle */
.badge.bg-light{ background-color: rgba(0,0,0,.06)!important; color: #1f2937!important; }

.list-group-item-action{transition:background-color .15s ease}
.list-group-item-action:hover{background-color:#f8fafc}

/* gallery cards */
.card img{border-bottom:1px solid rgba(0,0,0,.05)}
/* المتغيرات والألوان الرئيسية - تصميم 2025 */
:root {
    /* Updated color palette - modern and professional */
    --primary-color: #3b82f6; /* modern blue */
    --primary-color-2: #2563eb; /* rich blue */
    --primary-hover: #1d4ed8; /* darker blue for hover */
    --primary-light: #dbeafe; /* very light blue for highlights */
    
    /* Secondary color with great contrast */
    --accent-color: #10b981; /* emerald green */
    --accent-color-2: #059669; /* richer emerald */
    
    /* UI system colors */
    --success-color: #10b981; /* emerald */
    --danger-color: #ef4444; /* red */
    --warning-color: #f59e0b; /* amber */
    --info-color: #0ea5e9; /* sky blue */
    
    /* Neutral colors */
    --light-bg: #f8fafc; /* slight blue tint for light mode bg */
    --light-bg-2: #f1f5f9; /* slightly darker bg for cards */
    --dark-text: #0f172a; /* slate-900 */
    --card-bg: #ffffff;
    --muted-text: #64748b; /* slate-500 */
    --border-color: rgba(0,0,0,0.08);
    
    /* Glassmorphism effect */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-dark: rgba(15, 23, 42, 0.7);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-border-dark: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-hover: 0 14px 24px -4px rgba(0,0,0,0.12), 0 6px 10px -5px rgba(0,0,0,0.08);
    
    /* Rounded corners */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Animation speeds */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    
    /* Text colors and heading */
    --heading-color: #0f172a; /* dark text for headings */
    --text-muted: #64748b; /* slate-500 for muted text */
}

/* التنسيق العام */
body {
    font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background-color: var(--light-bg);
    color: var(--dark-text);
    line-height: 1.6;
    font-size: 16px;
}

/* القائمة العلوية - تصميم حديث */
.navbar {
    background: var(--primary-color);
    box-shadow: var(--shadow-md);
    padding: 0.75rem 0;
    position: sticky;
    top: 0;
    z-index: 1020;
    /* تطبيق تأثير الزجاج الضبابي (Glassmorphism) */
    background: rgba(59, 130, 246, 0.85);
    backdrop-filter: blur(10px) saturate(180%);
}

/* حاويات ثابتة لكل الأحجام */
.container { 
    max-width: 1240px;
    padding: 0 1.25rem;
}

/* شعار التطبيق وعناصر التنقل */
.navbar-brand {
    color: white !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-brand i {
    font-size: 1.5rem;
    /* تأثير توهج خفيف للأيقونة */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    transition: transform var(--transition-normal), filter var(--transition-normal);
}

.navbar-brand:hover i {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.7));
}

.navbar .nav-link, .navbar .btn {
    color: rgba(255,255,255,0.95) !important;
    transition: all var(--transition-normal);
    position: relative;
    font-weight: 500;
}

.navbar .btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: rgba(255,255,255,0.15);
    transition: all var(--transition-normal);
    /* تأثير توهج عند التحويم */
    overflow: hidden;
}

.navbar .btn-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.6), transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.navbar .btn-icon:hover::after {
    opacity: 0.6;
}

.navbar .btn-icon:hover, .navbar .btn-icon:focus {
    background-color: rgba(255,255,255,0.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px -3px rgba(0,0,0,0.2);
}

/* Desktop navigation */
.navbar .desktop-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.navbar .desktop-nav .nav-link {
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.navbar .desktop-nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgba(255,255,255,0.8);
    transform: translateY(8px);
    opacity: 0;
    transition: all var(--transition-normal);
    z-index: -1;
}

.navbar .desktop-nav .nav-link:hover::before, 
.navbar .desktop-nav .nav-link.active::before {
    transform: translateY(0);
    opacity: 1;
}

.navbar .desktop-nav .nav-link:hover, 
.navbar .desktop-nav .nav-link:focus {
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.navbar .desktop-nav .nav-link.active {
    background-color: rgba(255,255,255,0.15);
    font-weight: 600;
}

.navbar .desktop-nav .nav-link i {
    transition: transform var(--transition-normal);
}

.navbar .desktop-nav .nav-link:hover i {
    transform: translateY(-2px);
}

.navbar .desktop-nav .btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    background-color: rgba(255,255,255,0.15);
    border: none;
}

.navbar .desktop-nav .btn:hover {
    background-color: rgba(255,255,255,0.25);
}

/* Mobile navigation icons */
.navbar .mobile-nav .btn-icon {
    margin: 0 0.25rem;
}

/* زر قائمة المحتوى بأنيميشن احترافي */
.menu-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transition: all 0.25s ease-in-out;
}

.menu-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: white;
    border-radius: 2px;
    opacity: 1;
    right: 0;
    transform: rotate(0deg);
    transition: all 0.25s ease-in-out;
}

.menu-icon span:nth-child(1) { top: 6px; }
.menu-icon span:nth-child(2) { top: 12px; width: 80%; }
.menu-icon span:nth-child(3) { top: 18px; }

.menu-open .menu-icon span:nth-child(1) { 
    top: 12px; 
    transform: rotate(45deg); 
}

.menu-open .menu-icon span:nth-child(2) { 
    opacity: 0; 
    width: 0; 
}

.menu-open .menu-icon span:nth-child(3) { 
    top: 12px; 
    transform: rotate(-45deg); 
}

/* إعدادات القائمة الجانبية - تصميم محسن */
.offcanvas {
    max-width: 320px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border: none;
    box-shadow: var(--shadow-lg);
    /* تأثير الزجاج الضبابي */
    background: var(--glass-bg);
    backdrop-filter: blur(15px) saturate(180%);
    border-left: 1px solid var(--glass-border);
}

.offcanvas-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.offcanvas-title {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.offcanvas-title i {
    font-size: 1.4rem;
    color: var(--primary-color);
    /* تأثير توهج للأيقونة */
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

.offcanvas-body {
    padding: 1.25rem 1.5rem;
}
/* جعل العناصر أكبر وأسهل للنقر في القائمة الجانبية */
#sideMenu .list-group-item {
    padding: 0.85rem 1rem;
    border: none;
    border-radius: var(--radius-md);
    margin-bottom: 0.35rem;
    transition: all var(--transition-normal);
    font-weight: 500;
    color: var(--dark-text);
    position: relative;
    overflow: hidden;
}

#sideMenu .list-group-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-light);
    opacity: 0;
    transition: opacity var(--transition-normal);
    z-index: -1;
}

#sideMenu .list-group-item:hover {
    transform: translateX(-5px);
    color: var(--primary-color);
}

#sideMenu .list-group-item:hover::before {
    opacity: 1;
}

#sideMenu .list-group-item i {
    font-size: 1.15rem;
    width: 28px;
    text-align: center;
    transition: all var(--transition-normal);
    color: var(--primary-color);
}

#sideMenu .list-group-item:hover i {
    transform: scale(1.2) translateX(-2px);
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.4));
}

/* قائمة المستخدم في الجانب - تصميم محسّن */
.user-profile {
    display: flex;
    align-items: center;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--light-bg-2);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    /* تأثير الزجاج الضبابي */
    background: rgba(241, 245, 249, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.user-profile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(59, 130, 246, 0.15), transparent);
    opacity: 0.7;
    z-index: 0;
}

.user-avatar {
    position: relative;
    z-index: 1;
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    box-shadow: var(--shadow-md);
    /* تأثير التوهج حول الأيقونة */
    position: relative;
}

.user-avatar::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    opacity: 0.2;
    z-index: -1;
}

.user-avatar i {
    font-size: 1.75rem;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.user-info {
    position: relative;
    z-index: 1;
}

.user-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
    color: var(--primary-color);
}

.user-username {
    color: var(--muted-text);
    font-size: 0.9rem;
}

/* تصميم الأزرار بشكل جديد ومتناسق */
.btn {
    border-radius: var(--radius-md);
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    transition: all 0.25s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

/* تأثير عند النقر على الزر */
.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn:active::after {
    opacity: 1;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-accent {
    background: var(--accent-color);
    color: white;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.btn-accent:hover, .btn-accent:focus {
    background: var(--accent-color-2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-outline-primary {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.btn-danger {
    background: var(--danger-color);
    color: white;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
}

.btn-danger:hover, .btn-danger:focus {
    background: #dc2626;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--muted-text);
    border: 2px solid var(--border-color);
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: var(--light-bg-2);
    color: var(--dark-text);
    transform: translateY(-2px);
}

/* زر تبديل الوضع بتصميم جديد */
#themeToggle {
    background: var(--primary-light);
    color: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    padding: 0.7rem 1rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

#themeToggle:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

#themeToggle i {
    transition: transform 0.3s ease;
}

#themeToggle:hover i {
    transform: rotate(15deg);
}

/* البطاقات - تصميم احترافي */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    margin-bottom: 1.75rem;
    background: var(--card-bg);
    overflow: hidden;
    /* تأثير الزجاج الضبابي للبطاقات */
    background: var(--glass-bg);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--glass-border);
    position: relative;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-hover);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--primary-color);
}

.card-body {
    padding: 1.5rem;
}

/* زخرفة البطاقات */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to left, var(--primary-color), var(--accent-color));
    z-index: 1;
}

/* تأثير ظل عميق للبطاقات */
.card.shadow-accent {
    box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
}

.card.shadow-accent:hover {
    box-shadow: 0 20px 35px -10px rgba(59, 130, 246, 0.25), 0 10px 15px -5px rgba(59, 130, 246, 0.15);
}

/* بطاقات الإحصائيات - تصميم محسّن */
.stats-card {
    text-align: center;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.stats-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), transparent);
    opacity: 0.7;
    z-index: 0;
}

.stats-card .number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
    /* تأثير توهج النص */
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-card .label {
    color: var(--dark-text);
    margin-top: 0.5rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
    font-size: 1.1rem;
}

/* أيقونات الإحصائيات بتصميم جديد */
.stat-icon {
    width: 64px; 
    height: 64px; 
    border-radius: var(--radius-full);
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    background: var(--primary-color);
    color: white;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    box-shadow: var(--shadow-md);
    /* تحسين تأثير الأيقونة */
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-2));
    transition: all var(--transition-normal);
}

.stat-icon::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    background: inherit;
    opacity: 0.15;
    transform: scale(1.1);
    z-index: -1;
    filter: blur(10px);
    transition: all var(--transition-normal);
}

.card:hover .stat-icon {
    transform: translateY(-5px) scale(1.05);
}

.card:hover .stat-icon::after {
    transform: scale(1.15);
    opacity: 0.2;
}

.stat-icon.success { 
    background: linear-gradient(135deg, var(--success-color), #34d399); 
}
.stat-icon.warning { 
    background: linear-gradient(135deg, var(--warning-color), #fbbf24); 
}
.stat-icon.info { 
    background: linear-gradient(135deg, var(--info-color), #38bdf8); 
}

/* إضافة مؤشرات تقدم دائرية للإحصائيات */
.circle-progress {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
}

.circle-progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-progress circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke: var(--primary-light);
}

.circle-progress circle.progress {
    stroke: var(--primary-color);
    stroke-dasharray: 283;
    stroke-dashoffset: calc(283 - (283 * var(--percent)) / 100);
    transition: stroke-dashoffset 1s ease;
}

.circle-progress.success circle {
    stroke: rgba(16, 185, 129, 0.2);
}

.circle-progress.success circle.progress {
    stroke: var(--success-color);
}

.circle-progress.warning circle {
    stroke: rgba(245, 158, 11, 0.2);
}

.circle-progress.warning circle.progress {
    stroke: var(--warning-color);
}

.circle-progress.info circle {
    stroke: rgba(14, 165, 233, 0.2);
}

.circle-progress.info circle.progress {
    stroke: var(--info-color);
}

.circle-progress .percent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

/* الجداول بتصميم جديد */
.table {
    background-color: var(--card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--light-bg-2);
    border-bottom: none;
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.table tbody td {
    padding: 1.1rem 1.25rem;
    vertical-align: middle;
    font-size: 0.95rem;
}

.table tr + tr td { 
    border-top: 1px solid var(--border-color); 
}

.table tr:last-child td:first-child {
    border-bottom-right-radius: var(--radius-lg);
}

.table tr:last-child td:last-child {
    border-bottom-left-radius: var(--radius-lg);
}

/* حقول النماذج بتصميم جديد */
.form-control, .form-select {
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    background-color: var(--card-bg);
    transition: all 0.25s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
    color: var(--muted-text);
    opacity: 0.7;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--dark-text);
}

/* عنوان النموذج */
.form-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

/* تصميم التنبيهات */
.alert {
    border: none;
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4px;
}

.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.alert-success::before {
    background-color: var(--success-color);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--danger-color);
}

.alert-danger::before {
    background-color: var(--danger-color);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.alert-warning::before {
    background-color: var(--warning-color);
}

.alert-info {
    background-color: rgba(14, 165, 233, 0.1);
    color: var(--info-color);
}

.alert-info::before {
    background-color: var(--info-color);
}

/* شارات المؤشرات بتصميم جديد */
.badge {
    padding: 0.4em 0.8em;
    font-weight: 600;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: #fff !important;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
    color: #fff !important;
}

/* شارات مخففة للمؤشرات */
.badge.bg-primary-light {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: var(--primary-color) !important;
}

.badge.bg-success-light {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: var(--success-color) !important;
}

.badge.bg-danger-light {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: var(--danger-color) !important;
}

.badge.bg-warning-light {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: var(--warning-color) !important;
}

.badge.bg-info-light {
    background-color: rgba(14, 165, 233, 0.15) !important;
    color: var(--info-color) !important;
}

/* صفحة تسجيل الدخول - تصميم جديد */
.login-card {
    max-width: 450px;
    margin: 0 auto;
    padding: 2rem;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--muted-text);
}

/* نموذج رفع الصور بتصميم جديد */
.upload-form {
    max-width: 800px;
    margin: 0 auto;
}

.upload-zone {
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    transition: all 0.25s ease;
    background-color: var(--light-bg-2);
    cursor: pointer;
}

.upload-zone:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
}

.upload-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.upload-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.upload-preview img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
}

.upload-preview img:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* حاويات الرسوم البيانية */
.chart-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-md);
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
}

/* تذييل الموقع */
.site-footer {
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 3rem;
    text-align: center;
    color: var(--muted-text);
    background-color: var(--light-bg-2);
}

/* زخرفة التذييل */
.footer-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264.888-.14 1.041.78 1.87 1.27 2.587 1.38.725.11 1.485.04 2.105-.29.62-.33 1.056-.82 1.19-1.51.134-.69-.04-1.35-.48-1.97-.442-.62-1.04-1.17-1.647-1.62-.61-.45-1.23-.84-1.654-1.31-.425-.47-.724-1.03-.635-1.66.088-.64.454-1.18.993-1.55.54-.38 1.163-.57 1.796-.55.633.03 1.327.29 1.735.88.407.58.478 1.37.233 2.05-.245.68-.722 1.21-1.298 1.55-.575.34-1.17.5-1.736.57-.57.07-1.06.12-1.3.25-.243.13-.448.37-.475.7-.026.33.112.66.367.9.254.24.587.4.923.45.336.05.646.03.935-.15.29-.18.566-.48.834-.98.267-.5.45-1.23.386-2.17-.065-.94-.45-1.82-1.102-2.53-.653-.7-1.486-1.16-2.353-1.35-.867-.2-1.71-.14-2.434.17-.724.3-1.355.82-1.775 1.52-.42.7-.62 1.55-.54 2.37.084.81.394 1.56.842 2.22.448.65.973 1.23 1.567 1.72.594.49 1.24.9 1.77 1.36.532.46.994 1.01 1.186 1.65.19.64.153 1.4-.172 2.05-.326.66-.9 1.19-1.548 1.5-.65.31-1.305.42-1.957.32-.653-.1-1.233-.34-1.685-.73-.452-.39-.782-.9-.94-1.47-.157-.57-.126-1.19.065-1.76.193-.57.525-1.05.93-1.42.404-.37.855-.64 1.323-.82.47-.18.967-.27 1.31-.45.347-.18.618-.47.617-.85 0-.38-.27-.73-.643-.97-.373-.24-.798-.36-1.244-.37-.447-.01-.918.1-1.292.34-.374.25-.663.61-.808 1.07-.146.46-.146.97 0 1.47.145.5.428.94.81 1.26.384.32.838.51 1.304.59.465.08.904.07 1.314-.07.41-.14.75-.36 1.01-.67.262-.31.437-.7.477-1.12.04-.42-.02-.85-.206-1.22-.187-.37-.485-.67-.87-.84-.385-.17-.815-.19-1.256-.09-.442.1-.885.32-1.252.64-.367.32-.64.72-.784 1.17-.144.45-.15.94-.04 1.38.11.44.323.83.635 1.13.312.3.689.49 1.089.58.4.09.797.1 1.184.02.387-.07.735-.24 1.022-.5.287-.26.49-.61.605-1.01.116-.4.14-.85.07-1.29-.07-.44-.235-.85-.503-1.19-.267-.34-.624-.61-1.005-.78-.38-.17-.768-.26-1.167-.25-.399.01-.757.13-1.066.33-.309.2-.532.49-.663.83-.13.34-.155.72-.064 1.09.091.37.298.7.598.93.3.23.655.36 1.024.4.37.04.764 0 1.072-.17.308-.17.542-.43.694-.78.152-.35.21-.75.19-1.14-.022-.39-.132-.75-.318-1.05-.185-.3-.437-.52-.73-.65-.294-.13-.62-.15-.927-.11-.308.04-.595.16-.851.34-.256.18-.477.42-.653.71-.176.29-.3.63-.36.99-.06.36-.05.75.038 1.12.088.37.258.71.516.96.258.25.58.42.932.49.352.07.704.03 1.028-.11.324-.14.607-.38.8-.69.194-.31.307-.67.325-1.04.018-.37-.056-.76-.215-1.09-.16-.33-.4-.61-.685-.81-.285-.2-.606-.3-.945-.31-.339 0-.661.09-.946.27-.284.18-.514.44-.651.74-.138.3-.19.64-.153.98.037.34.176.67.4.92.225.25.519.42.839.49.32.07.654.03.959-.12.304-.15.556-.4.732-.72.175-.32.264-.71.253-1.1-.01-.39-.13-.76-.351-1.06-.22-.3-.525-.52-.894-.58-.37-.06-.773.02-1.096.2-.323.18-.553.46-.676.8-.123.34-.127.73-.01 1.08.117.35.35.65.662.85.313.2.702.27 1.09.21.389-.06.76-.25 1.03-.54.272-.29.437-.67.493-1.07.056-.4.002-.82-.154-1.19-.157-.37-.426-.69-.797-.88-.37-.19-.795-.23-1.218-.13-.424.1-.82.35-1.096.7-.275.35-.43.8-.445 1.26-.016.46.105.92.327 1.3.222.38.534.67.933.82.399.15.822.16 1.222.05.4-.11.765-.35 1.038-.67.272-.32.443-.73.493-1.16.05-.43-.018-.87-.206-1.25-.187-.38-.474-.69-.86-.87-.386-.18-.824-.21-1.244-.11-.421.1-.804.34-1.094.67-.29.33-.486.75-.553 1.18-.067.43-.003.87.184 1.25.187.38.48.69.847.87.366.18.774.23 1.18.14.405-.09.784-.31 1.064-.63.28-.32.456-.73.498-1.17.041-.44-.053-.89-.259-1.27-.205-.38-.512-.68-.905-.84-.392-.15-.826-.17-1.242-.05-.416.12-.798.37-1.077.72-.28.35-.45.79-.478 1.25-.028.46.089.92.314 1.31.225.39.549.68.962.83.414.15.851.15 1.262.02.41-.12.788-.38 1.066-.73.278-.35.446-.8.474-1.27.027-.47-.09-.94-.321-1.33-.231-.4-.562-.69-.986-.84-.424-.15-.881-.14-1.305-.01-.424.13-.804.4-1.077.76-.274.36-.431.82-.439 1.28-.008.46.121.91.358 1.29.236.38.574.67 1.001.8.428.13.888.11 1.308-.05.42-.16.787-.45 1.045-.83.258-.38.397-.85.39-1.32-.007-.48-.15-.94-.407-1.31-.257-.37-.622-.65-1.08-.77-.457-.12-.954-.08-1.395.1-.441.17-.8.49-1.032.9-.233.41-.338.9-.288 1.38.05.48.246.93.56 1.28.314.35.732.59 1.215.66.484.07.987-.02 1.413-.26.425-.24.753-.62.93-1.06.176-.44.198-.94.062-1.39-.136-.46-.427-.85-.83-1.1-.402-.25-.884-.36-1.37-.32-.486.05-.945.24-1.27.58-.326.34-.524.8-.55 1.28-.024.48.121.95.378 1.33.257.39.629.67 1.081.79.452.12.946.08 1.371-.11.425-.18.77-.5.979-.9.208-.41.27-.89.182-1.35-.088-.46-.323-.88-.672-1.19-.35-.31-.799-.51-1.302-.54-.503-.02-1.013.12-1.42.41-.408.28-.697.69-.838 1.15-.14.46-.125.95.044 1.38.169.43.497.8.941 1.02.445.22.977.29 1.465.19.487-.1.894-.36 1.145-.72.251-.37.349-.83.292-1.28-.058-.44-.269-.85-.59-1.15-.322-.3-.745-.49-1.204-.51-.459-.02-.908.12-1.275.36-.366.24-.654.6-.816 1.01-.163.41-.191.87-.082 1.3.11.43.359.81.724 1.07.364.26.815.39 1.274.35.458-.04.896-.24 1.221-.56.326-.33.54-.76.597-1.22.057-.46-.04-.93-.273-1.31-.232-.38-.59-.67-1.035-.82-.445-.14-.956-.13-1.401.06-.445.19-.801.53-.996.95-.195.42-.214.9-.074 1.33.14.43.443.8.878 1.03.435.22.979.29 1.467.19.488-.1.885-.36 1.133-.73.247-.36.336-.82.269-1.28-.068-.46-.301-.88-.648-1.18-.346-.3-.799-.47-1.283-.49-.483-.01-.952.14-1.327.43-.374.28-.638.69-.761 1.15-.123.46-.095.95.09 1.37.184.42.53.77.985.97.456.21 1.02.26 1.532.15.512-.11.93-.39 1.19-.77.26-.38.354-.86.288-1.33-.066-.46-.288-.89-.627-1.19-.339-.3-.78-.48-1.248-.49-.47-.01-.914.14-1.268.43-.353.28-.606.68-.718 1.13-.111.45-.075.93.118 1.34.193.4.551.73 1.026.9.475.17 1.05.18 1.572.02.522-.16.94-.48 1.187-.9.247-.42.319-.94.227-1.44-.092-.49-.35-.94-.727-1.24-.377-.3-.86-.45-1.372-.43-.511.02-.983.2-1.348.52-.366.32-.615.76-.717 1.24-.102.48-.048.99.165 1.42.213.44.607.78 1.107.94.5.16 1.091.14 1.609-.07.518-.21.919-.59 1.129-1.05.21-.46.225-1 .043-1.47-.181-.47-.54-.87-.998-1.11-.457-.24-1.007-.3-1.516-.19-.51.11-.949.39-1.25.78-.3.39-.458.9-.451 1.41.006.51.176 1.01.49 1.4.314.38.753.66 1.26.72.508.06 1.052-.05 1.488-.32.437-.28.756-.7.892-1.19.136-.49.084-1.03-.154-1.47-.237-.45-.636-.8-1.117-.96-.48-.16-1.01-.14-1.483.06-.472.2-.851.55-1.057.99-.206.44-.226.95-.066 1.4.16.45.503.83.964 1.03.46.2 1.01.22 1.496.07.486-.16.879-.48 1.098-.9.219-.42.257-.92.125-1.38-.132-.46-.441-.85-.861-1.1-.42-.25-.923-.36-1.41-.32-.487.05-.94.24-1.27.56-.329.33-.535.77-.575 1.24-.04.47.086.94.338 1.32.252.39.622.67 1.07.77.449.11.934.06 1.355-.13.42-.19.755-.51.95-.91.195-.4.241-.86.135-1.3-.106-.44-.37-.82-.744-1.08-.373-.26-.834-.4-1.308-.39-.473.01-.912.17-1.252.44-.339.27-.574.65-.673 1.07-.099.42-.057.87.129 1.26.186.39.518.71.937.87.419.16.904.16 1.329-.01.424-.17.76-.48.948-.89.188-.4.222-.88.095-1.31-.127-.43-.421-.8-.832-1.03-.41-.23-.914-.32-1.393-.25-.48.06-.918.28-1.236.62-.318.33-.517.78-.557 1.25-.04.47.08.94.324 1.33.245.39.605.68 1.043.79.437.11.909.05 1.317-.15.407-.2.728-.53.907-.93.179-.4.209-.87.084-1.3-.124-.43-.41-.79-.81-1.01-.4-.22-.889-.3-1.35-.22-.463.08-.877.31-1.178.66-.301.35-.47.82-.482 1.29-.012.47.131.94.391 1.31.26.38.639.65 1.087.74.448.09.93.01 1.344-.21.414-.22.735-.57.904-.99.169-.42.183-.9.04-1.33-.142-.43-.45-.79-.868-.99-.418-.2-.912-.25-1.367-.14-.455.11-.851.37-1.121.75-.27.38-.401.85-.369 1.32.032.47.226.91.531 1.25.304.34.709.56 1.166.61.457.04.935-.07 1.328-.33.392-.25.687-.64.826-1.08.139-.44.113-.93-.071-1.34-.184-.41-.525-.73-.957-.88-.432-.15-.937-.13-1.37.06-.432.19-.773.54-.95.97-.175.43-.183.92-.02 1.35.162.43.491.78.927.95.437.17.951.17 1.393.01.441-.16.789-.49.975-.9.186-.41.204-.88.055-1.31-.149-.43-.467-.78-.886-.97-.418-.19-.919-.21-1.36-.08-.44.14-.798.43-.992.82-.194.39-.222.85-.08 1.27.142.41.439.75.843.94.404.18.886.2 1.31.06.424-.15.766-.45.948-.85.182-.4.194-.88.045-1.3-.149-.42-.464-.77-.876-.95-.412-.18-.904-.2-1.336-.07-.432.13-.79.41-.984.79-.195.38-.225.84-.084 1.26.141.41.437.75.837.93.4.18.877.2 1.294.05.417-.14.753-.45.929-.84.175-.39.183-.86.028-1.28-.154-.42-.476-.76-.892-.93-.415-.17-.91-.17-1.34-.04-.43.14-.787.43-.98.81-.191.38-.22.84-.077 1.26.143.41.44.74.844.92.403.17.88.18 1.297.03.417-.15.754-.45.928-.84.174-.39.18-.86.022-1.27-.158-.42-.482-.76-.899-.92-.417-.16-.913-.16-1.342-.02-.429.14-.786.43-.979.81-.193.38-.221.84-.078 1.26.143.42.439.75.844.92.404.17.881.18 1.3.03.418-.15.755-.45.931-.84.175-.39.182-.86.025-1.28-.156-.42-.479-.76-.895-.93-.416-.17-.911-.17-1.34-.03-.428.14-.785.43-.977.81-.192.38-.22.83-.077 1.25.143.42.439.75.842.92.403.18.88.19 1.297.04.417-.15.754-.44.93-.83.175-.39.184-.86.028-1.28-.156-.41-.48-.76-.896-.92-.417-.17-.912-.17-1.342-.03-.429.14-.785.43-.978.81-.193.38-.22.84-.077 1.26.143.42.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.176-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.979.81-.193.38-.221.84-.078 1.26.143.41.44.75.844.92.404.17.881.18 1.3.03.418-.15.755-.45.93-.84.176-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.979.81-.193.38-.22.84-.078 1.26.143.41.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.175-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.98.81-.192.38-.22.84-.077 1.26.143.41.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.175-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.98.81-.192.38-.22.84-.077 1.26.143.41.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.175-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.98.81-.192.38-.22.84-.077 1.26.143.41.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.175-.39.183-.86.026-1.28-.156-.42-.48-.76-.897-.92-.417-.17-.912-.17-1.342-.03-.43.14-.786.43-.98.81-.192.38-.22.84-.077 1.26.143.42.44.75.844.92.404.17.882.18 1.3.03.418-.15.756-.45.932-.84.175-.39.183-.86.026-1.28z' fill='%233b82f6' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Site subtle patterned background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: 
        radial-gradient(ellipse at 20% 10%, rgba(59, 130, 246, 0.07), transparent 40%),
        radial-gradient(ellipse at 80% 30%, rgba(16, 185, 129, 0.07), transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(99, 102, 241, 0.07), transparent 45%);
    z-index: -1;
}

/* تأثيرات تفاعلية للصفحة */
.page-transition {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* تحسينات لتجربة المستخدم */
.user-select-none {
    user-select: none;
}

.cursor-pointer {
    cursor: pointer;
}

/* Smooth theme transitions */
html, body, .navbar, .card, .card-header, .table, .form-control, .form-select, 
.alert, .badge, .btn, .offcanvas, .list-group-item {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}

/* Prevent horizontal overflow and stabilize canvases */
body { overflow-x: hidden; }
canvas { display: block; max-width: 100%; }

/* Dark theme variables */
html[data-theme='dark'] {
    /* Dark mode with comfortable dark gray background and blue/teal accents */
    --light-bg: #0f172a; /* slate-900 */
    --light-bg-2: #1e293b; /* slate-800 */
    --dark-text: #f1f5f9; /* slate-100 */
    --card-bg: #1e293b; /* slate-800 */
    --muted-text: #94a3b8; /* slate-400 */
    --border-color: rgba(255,255,255,0.1);
}

/* Dark theme components */
html[data-theme='dark'] body { 
    background-color: var(--light-bg); 
    color: var(--dark-text); 
}

html[data-theme='dark'] .navbar { 
    background: #1e40af; /* darker blue for navbar */
    box-shadow: 0 6px 16px rgba(0,0,0,0.25); 
}

html[data-theme='dark'] .navbar .nav-link, 
html[data-theme='dark'] .navbar-brand { 
    color: #f9fafb !important; 
}

html[data-theme='dark'] .card { 
    background-color: var(--card-bg);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); 
}

html[data-theme='dark'] .card-header { 
    background-color: var(--card-bg);
    border-bottom-color: var(--border-color); 
}

html[data-theme='dark'] .table { 
    color: var(--dark-text); 
    background-color: var(--card-bg);
}

html[data-theme='dark'] .table thead th { 
    background-color: var(--light-bg); 
    color: var(--primary-color); 
}

html[data-theme='dark'] .table tr + tr td { 
    border-color: var(--border-color); 
}

html[data-theme='dark'] .form-control, 
html[data-theme='dark'] .form-select { 
    background-color: var(--light-bg); 
    color: var(--dark-text); 
    border-color: var(--border-color); 
}

html[data-theme='dark'] .form-control::placeholder { 
    color: var(--muted-text); 
}

html[data-theme='dark'] .offcanvas { 
    background-color: var(--card-bg); 
    color: var(--dark-text); 
    border-color: var(--border-color);
}

html[data-theme='dark'] #sideMenu .list-group-item { 
    color: #e2e8f0; 
}

html[data-theme='dark'] #sideMenu .list-group-item::before { 
    background-color: rgba(59, 130, 246, 0.15); 
}

html[data-theme='dark'] #sideMenu .list-group-item:hover { 
    color: #3b82f6; 
}

html[data-theme='dark'] .user-profile {
    background: var(--light-bg);
}

html[data-theme='dark'] .user-profile::before {
    background: linear-gradient(to left, rgba(59, 130, 246, 0.2), transparent);
}

html[data-theme='dark'] #themeToggle {
    background-color: var(--light-bg);
}

html[data-theme='dark'] .upload-zone {
    background-color: var(--light-bg);
}

html[data-theme='dark'] .site-footer {
    background-color: var(--light-bg);
    border-color: var(--border-color);
}

/* Footer */
.site-footer { 
    border-top: 1px solid var(--border-color); 
    position: relative;
    overflow: hidden;
}

/* التجاوب مع الشاشات */
@media (max-width: 992px) {
    .desktop-nav {
        display: none !important;
    }
}

@media (min-width: 993px) {
    .mobile-nav {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 1.25rem;
    }
    
    .stats-card .number {
        font-size: 2rem;
    }
    
    .upload-preview {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    
    .table-responsive {
        margin: 0 -1rem;
    }
    
    .form-label {
        margin-top: 0.75rem;
    }
    
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.3rem; }
    
    .btn {
        padding: 0.5rem 1rem;
    }
}

/* تحسينات عامة */
.page-header {
    margin-bottom: 2rem;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.page-subtitle {
    color: var(--muted-text);
    font-size: 1.1rem;
}

/* تصميم الصفحات الجديد */
.section {
    margin-bottom: 2.5rem;
}

.section-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
}

.section-title i {
    margin-left: 0.5rem;
    font-size: 1.25rem;
}

/* تأثيرات التحميل وتفاعلات المستخدم */
.loader {
    width: 48px;
    height: 48px;
    border: 3px solid var(--primary-light);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s ease-in-out infinite;
    margin: 2rem auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* تأثيرات متقدمة للواجهة */
.animated-hover-card {
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: all 0.4s ease;
}

.animated-hover-card::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animated-hover-card:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

/* حالات الخلو من البيانات بتصميم جذاب */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.empty-state i {
    font-size: 3rem;
    color: var(--muted-text);
    margin-bottom: 1rem;
    opacity: 0.7;
}

.empty-state .title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.empty-state .description {
    color: var(--muted-text);
    max-width: 300px;
    margin: 0 auto 1.5rem;
}

/* تأثيرات متقدمة للأزرار والعناصر التفاعلية */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    transition: left 0.8s ease;
}

.btn-glow:hover::after {
    left: 100%;
}

/* تأثيرات متحركة للمؤشرات الإحصائية */
@keyframes countUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-count {
    animation: countUp 1s ease forwards;
}

/* تأثير خلفية متحركة للصفحات */
.animated-bg {
    position: relative;
    overflow: hidden;
}

.animated-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 30%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(14, 165, 233, 0.05) 0%, transparent 40%);
    z-index: -1;
    animation: breathe 15s ease infinite alternate;
}

@keyframes breathe {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* تأثيرات للصور والميديا */
.img-hover-zoom {
    overflow: hidden;
    border-radius: var(--radius-md);
}

.img-hover-zoom img {
    transition: transform 0.5s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.1);
}

/* تأثير إضاءة جانبية للبطاقات */
.side-glow {
    position: relative;
    overflow: hidden;
}

.side-glow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.side-glow:hover::after {
    opacity: 1;
}

/* تنسيق حالة التحميل مع متحركات */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid var(--primary-light);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: spin 1s linear infinite;
}

/* تأثيرات الظلال المتقدمة */
.shadow-custom {
    box-shadow: 
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.03);
}

.shadow-hover {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(-5px);
}

/* تأثيرات التمرير */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* تصميم الإشعارات */
.notification-card {
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.notification-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.alert-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
}
.alert-success {
    background-color: #198754;
}
.alert-warning {
    background-color: #ffc107;
}
.alert-danger {
    background-color: #dc3545;
}
.alert-info {
    background-color: #0dcaf0;
}
.notification-meta {
    font-size: 0.85rem;
    margin-top: 10px;
}
.notification-header {
    display: flex;
    align-items: center;
}
.delete-notification {
    opacity: 0.6;
    transition: opacity 0.3s;
}
.delete-notification:hover {
    opacity: 1;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; height: 0; margin: 0; padding: 0; }
}
.fadeOut {
    animation: fadeOut 0.5s forwards;
}

/* تحسينات للوضع المظلم */
html[data-theme='dark'] .animated-hover-card::before {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
}

html[data-theme='dark'] .loading-overlay {
    background: rgba(15, 23, 42, 0.8);
}

html[data-theme='dark'] .empty-state i {
    color: rgba(255, 255, 255, 0.2);
}

/* تأثيرات الخلفية المتموجة */
.wave-bg {
    position: relative;
    overflow: hidden;
}

.wave-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 15px;
    bottom: 0;
    left: 0;
    background: 
        radial-gradient(ellipse at 50% 150%, transparent 40%, var(--primary-light) 40%),
        radial-gradient(ellipse at 50% 150%, transparent 40%, var(--primary-light) 40%);
    background-position: 0 0, 0 0;
    background-size: 30px 30px;
    opacity: 0.5;
}

/* تصميم الشارات المتقدم */
.badge-custom {
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    border-radius: var(--radius-full);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.badge-custom:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* تأثيرات للقوائم والعناصر المتكررة */
.list-item-hover {
    transition: all 0.3s ease;
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.list-item-hover:hover {
    background-color: var(--primary-light);
    transform: translateX(-5px);
}

/* Tooltip advanced styling */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background-color: var(--dark-text);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-10px);
}