/* ========================================
   Dynamic School Branding Styles
   الألوان الديناميكية لهوية المدرسة
   ======================================== */

:root {
    --school-primary: #8e5252;
    --school-secondary: #972626;
    --school-gradient: linear-gradient(135deg, #8e5252 0%, #972626 100%);
    --school-gradient-reverse: linear-gradient(135deg, #972626 0%, #8e5252 100%);
}

/* ========================================
   Hero Sections - أقسام البطل
   ======================================== */

.modern-hero {
    background: var(--school-gradient) !important;
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

.hero-bg-animated {
    background: var(--school-gradient);
}

.badge-pill {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ========================================
   Backgrounds & Gradients - خلفيات
   ======================================== */

.bg-gradient-primary,
.bg-gradient-primary-reverse {
    background: var(--school-gradient) !important;
}

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

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

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

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

.bg-warning {
    background-color: var(--school-secondary) !important;
    opacity: 0.95;
}

/* Sidebar */
#sidebar,
.sidebar,
nav.bg-gradient-primary,
.offcanvas.bg-gradient-primary {
    background: var(--school-gradient) !important;
}

#sidebar .nav-link,
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

#sidebar .nav-link:hover,
.sidebar .nav-link:hover,
#sidebar .nav-link.active,
.sidebar .nav-link.active {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
}

/* ========================================
   Buttons - الأزرار
   ======================================== */

.btn-primary {
    background-color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--school-secondary) !important;
    border-color: var(--school-secondary) !important;
}

.btn-outline-primary {
    color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
    color: white !important;
}

.btn-success {
    background-color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--school-secondary) !important;
    border-color: var(--school-secondary) !important;
}

.btn-info {
    background-color: var(--school-secondary) !important;
    border-color: var(--school-secondary) !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
}

.btn-danger,
.btn-pink {
    background: linear-gradient(135deg, var(--school-primary) 0%, var(--school-secondary) 100%) !important;
    border: none !important;
}

.btn-danger:hover,
.btn-pink:hover {
    opacity: 0.9;
}

.btn-gradient {
    background: var(--school-gradient) !important;
    border: none !important;
    color: white !important;
}

/* ========================================
   Text Colors - ألوان النصوص
   ======================================== */

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

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

.school-name-gradient {
    background: var(--school-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ========================================
   Badges & Labels - الشارات
   ======================================== */

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

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

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

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

.badge.bg-warning {
    background-color: var(--school-secondary) !important;
    opacity: 0.9;
}

/* ========================================
   Borders - الحدود
   ======================================== */

.border-primary {
    border-color: var(--school-primary) !important;
}

.border-top-primary {
    border-top-color: var(--school-primary) !important;
}

/* ========================================
   Cards - البطاقات
   ======================================== */

.card-header.bg-gradient-primary,
.card-header.bg-primary {
    background: var(--school-gradient) !important;
    color: white !important;
}

.card-header.bg-success {
    background-color: var(--school-primary) !important;
    color: white !important;
}

.card-header.bg-info {
    background-color: var(--school-secondary) !important;
    color: white !important;
}

.card-header.bg-warning {
    background-color: var(--school-secondary) !important;
    color: white !important;
    opacity: 0.95;
}

.card.border-primary {
    border-color: var(--school-primary) !important;
}

.stat-card .icon-box {
    background: var(--school-gradient) !important;
}

.quick-action-card:hover {
    border-color: var(--school-primary) !important;
    box-shadow: 0 0 20px rgba(#8e5252, 0.3) !important;
}

.metric-card {
    background: var(--school-gradient) !important;
}

/* ========================================
   Module Icons - أيقونات الوحدات
   ======================================== */

.module-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--school-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.module-icon-wrapper i {
    color: white !important;
}

/* ========================================
   Library & Books - المكتبة والكتب
   ======================================== */

.modern-hero-books,
.hero-books,
.library-hero {
    background: var(--school-gradient) !important;
}

.btn-modern-primary,
.btn-library-primary {
    background: var(--school-gradient) !important;
    border: none !important;
}

.stat-icon,
.icon-box,
.feature-icon-box {
    background: var(--school-gradient) !important;
}

.badge-status-available,
.badge-status-pending {
    background: var(--school-primary) !important;
}

/* ========================================
   Admin Pages - صفحات الإدارة
   ======================================== */

.admin-hero,
.settings-hero,
.monitor-hero {
    background: var(--school-gradient) !important;
}

.info-card-primary .info-icon {
    color: var(--school-primary) !important;
}

/* ========================================
   Grades & Reports - الدرجات والتقارير
   ======================================== */

.grade-card-header,
.report-header,
.certificate-header {
    background: var(--school-gradient) !important;
}

.progress-bar-custom {
    background: var(--school-primary) !important;
}

/* ========================================
   Timetables & Schedule - الجداول
   ======================================== */

.timetable-header,
.schedule-header {
    background: var(--school-gradient) !important;
}

.time-slot-header {
    background: var(--school-primary) !important;
}

/* ========================================
   Attendance & Monitoring - الحضور والمراقبة
   ======================================== */

.attendance-header,
.monitoring-card-header {
    background: var(--school-gradient) !important;
}

.status-present {
    background-color: var(--school-primary) !important;
}

/* ========================================
   Financial Pages - الصفحات المالية
   ======================================== */

.financial-stat-card .stat-icon,
.payment-card-icon {
    background: var(--school-gradient) !important;
}

.installment-badge-paid {
    background: var(--school-primary) !important;
}

/* ========================================
   Links - الروابط
   ======================================== */

a:not(.btn):not(.nav-link) {
    color: var(--school-primary);
}

a:not(.btn):not(.nav-link):hover {
    color: var(--school-secondary);
}

.nav-link.active {
    color: var(--school-primary) !important;
}

/* ========================================
   Footer - التذييل
   ======================================== */

footer.footer-dynamic {
    background: var(--school-gradient) !important;
}

footer .social-links a:hover {
    color: white !important;
    opacity: 0.8;
}

footer .powered-badge {
    color: rgba(255, 255, 255, 0.9);
}

footer a {
    color: rgba(255, 255, 255, 0.85) !important;
}

footer a:hover {
    color: white !important;
}

/* ========================================
   Forms - النماذج
   ======================================== */

.form-control:focus,
.form-select:focus {
    border-color: var(--school-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(#8e5252, 0.25) !important;
}

.form-check-input:checked {
    background-color: var(--school-primary) !important;
    border-color: var(--school-primary) !important;
}

/* ========================================
   Progress & Loading - التقدم
   ======================================== */

.progress-bar {
    background-color: var(--school-primary) !important;
}

.spinner-border.text-primary {
    color: var(--school-primary) !important;
}

/* ========================================
   Animations - الحركات
   ======================================== */

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}