/* ============================================
   اللون الأزرق الموحد - مثل الصفحة الرئيسية
   ============================================ */

:root {
    --primary-blue: #1a5f7a;
    --secondary-blue: #2d8fbb;
    --accent-green: #57cc99;
    --light-bg: #f8f9fa;
    --dark-text: #2c3e50;
    --card-white: #ffffff;
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.08);
    --radius-card: 20px;
}

/* تلوين الناف بار باللون الأزرق */
.nav.active, .navbar {
    background-color: var(--primary-blue) !important;
    transition: 0.3s ease;
underline : none;
}

.navbar-brand, .nav-link {
    color: white !important;
}

.nav-link:hover {
    color: var(--accent-green) !important;
}

/* تلوين بطاقات القراء باللون الأزرق الفاتح */
.reader-card {
    background: var(--card-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.reader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-color: var(--secondary-blue);
}

.reader-card.active {
    border-color: var(--accent-green);
}

.reader-avatar {
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
    color: white;
}

.reader-name {
    color: var(--primary-blue);
    font-weight: 700;
}

/* تلوين أزرار التشغيل والمواضيع */
.play-btn-large, .theme-toggle {
    background: var(--accent-green);
    color: white;
}

.play-btn-large:hover, .theme-toggle:hover {
    background: #45b887;
}

/* تلوين شريط المشغل السفلي */
.player-container {
    background: var(--card-white);
    border-top: 1px solid rgba(0,0,0,0.1);
}

.playing-title {
    color: var(--primary-blue);
}

/* تلوين خلفية مربع المكتبة */
.main-box {
    background: var(--card-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.box-title {
    color: var(--primary-blue);
}

.box-title i {
    color: var(--accent-green);
}

.readers-count {
    background: linear-gradient(135deg, var(--accent-green) 0%, var(--secondary-blue) 100%);
    color: white;
}

/* تنسيق البحث */
.search-box {
    border: 2px solid rgba(26,95,122,0.3);
}

.search-box:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 20px rgba(26,95,122,0.2);
}

.search-icon {
    color: var(--primary-blue);
}

/* وضع الليل - تعديل الألوان تلقائياً */
body.dark-mode {
    --primary-blue: #2d8fbb;
    --secondary-blue: #57cc99;
    --accent-green: #57cc99;
    --light-bg: #1e2a3a;
    --dark-text: #e0e0e0;
    --card-white: #25313f;
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.dark-mode .reader-name {
    color: var(--accent-green);
}

body.dark-mode .playing-title {
    color: var(--accent-green);
}

body.dark-mode .nav.active, 
body.dark-mode .navbar {
    background-color: #0a3a4a !important;
}