/* ============================================================
   مشروع «سابقٌ بالخيرات» — نظام الهوية المركزي (Design System)
   المرحلة 1: مصدر واحد للحقيقة لكل ألوان وخطوط ومكوّنات النظام.
   تعديل أي شيء هنا ينعكس تلقائياً على كل صفحات التطبيق.
   ============================================================ */

:root {
    /* ---- ألوان الهوية (من الشعار) ---- */
    --brand-green: #66c038;          /* الأخضر الأساسي */
    --brand-green-hover: #57a82f;    /* أخضر عند المرور */
    --brand-green-dark: #4c9128;     /* أخضر غامق (نص/تأكيد) */
    --brand-green-text: #3f7a23;     /* أخضر للنصوص على خلفية فاتحة (تباين ≥4.5:1) */
    --brand-green-subtle: #eaf6e1;   /* أخضر فاتح جداً (خلفيات خفيفة) */
    --brand-green-border: #c3e6ab;   /* حدود خضراء فاتحة */

    --brand-brown: #5c3106;          /* البني (العناوين) */
    --brand-brown-soft: #7a4a1e;     /* بني أفتح */

    --bg-cream: #FDFCF0;             /* خلفية الصفحة الكريمية */
    --surface-white: #ffffff;       /* أسطح البطاقات */
    --accent-gold: #E9C46A;         /* ذهبي للتمييز */

    --text-main: #2e2a24;           /* نص أساسي */
    --text-muted: #6c757d;          /* نص ثانوي */

    /* ---- سلّم المسافات (8px) ---- */
    --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
    --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;

    /* ---- الحواف ---- */
    --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 50rem;

    /* ---- الظلال (موحّدة) ---- */
    --shadow-sm: 0 2px 6px rgba(92, 49, 6, 0.06);
    --shadow:    0 4px 12px rgba(92, 49, 6, 0.08);
    --shadow-lg: 0 8px 24px rgba(92, 49, 6, 0.15);

    /* ============================================================
       إعادة ربط ألوان Bootstrap مع هوية المشروع.
       هذا يحوّل كل bg-primary / text-primary / btn-primary /
       badges / tabs / links من «الأزرق» إلى «الأخضر» تلقائياً
       في كل الصفحات — بدون تعديل أي صفحة.
       ============================================================ */
    --bs-primary: #66c038;
    --bs-primary-rgb: 102, 192, 56;
    --bs-primary-text-emphasis: #3f7a23;
    --bs-primary-bg-subtle: #eaf6e1;
    --bs-primary-border-subtle: #c3e6ab;

    --bs-link-color: #4c9128;
    --bs-link-color-rgb: 76, 145, 40;
    --bs-link-hover-color: #3f7a23;
    --bs-link-hover-color-rgb: 63, 122, 35;

    /* لون التحديد عند تظليل النص */
    --bs-highlight-bg: var(--brand-green-subtle);
}

/* ---- الأساس + الخطوط ---- */
html {
    /* 16px أساس على كل المقاسات: يمنع التكبير التلقائي المزعج بالـ iPhone عند الإدخال */
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: var(--bg-cream);
    color: var(--text-main);
    /* لون موحّد لعناصر الإدخال (checkbox/radio/range) */
    accent-color: var(--brand-green);
    -webkit-text-size-adjust: 100%;
}

::selection {
    background: var(--brand-green-subtle);
    color: var(--brand-brown);
}

/* ---- العناوين ---- */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    color: var(--brand-brown) !important;
}

/* كلاس موحّد بدل تكرار style="color:..." inline في الصفحات */
.text-brand { color: var(--brand-brown) !important; }
.text-brand-green { color: var(--brand-green-text) !important; }

/* ============================================================
   ضمان التباين: أي عنوان/نص فوق سطح ملوّن داكن (أخضر/رمادي/
   داكن) يصير أبيض لضمان وضوح القراءة. الأسطح الفاتحة
   (bg-warning الأصفر / bg-light) تبقى بنص داكن.
   ============================================================ */
.text-white,
.bg-primary, .bg-success, .bg-danger, .bg-dark, .bg-secondary,
.text-bg-primary, .text-bg-success, .text-bg-danger, .text-bg-dark, .text-bg-secondary {
    color: #fff !important;
}
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5, .text-white h6,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6,
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5, .bg-secondary h6,
.text-bg-primary h1, .text-bg-primary h2, .text-bg-primary h3, .text-bg-primary h4, .text-bg-primary h5, .text-bg-primary h6 {
    color: #fff !important;
}

/* ============================================================
   تقوية التباين مركزياً — النصوص الملوّنة فوق الخلفيات الفاتحة.
   كلاسات Bootstrap الافتراضية بعضها باهت (أصفر/سماوي/أخضر فاتح)
   وغير مقروء على الأبيض. نعيد لونها لنسخة أغمق مقروءة (≥4.5:1)
   مع الحفاظ على نفس المعنى — وينعكس على كل الصفحات تلقائياً.
   ============================================================ */
.text-primary { color: var(--bs-primary-text-emphasis) !important; }  /* أخضر غامق مقروء */
.text-warning { color: #9a6a00 !important; }   /* كهرماني غامق بدل الأصفر الباهت */
.text-info    { color: #0a7385 !important; }   /* سماوي غامق */
.text-muted   { color: #5a6169 !important; }   /* رمادي أغمق قليلاً لوضوح أعلى */

/* استثناء: النصوص الملوّنة داخل الأسطح الداكنة تبقى فاتحة */
.bg-primary .text-muted, .bg-success .text-muted, .bg-dark .text-muted,
.bg-secondary .text-muted, .text-white .text-muted,
.bg-primary .text-warning, .bg-dark .text-warning {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================================
   الأزرار — كلها مدفوعة بمتغيّرات Bootstrap (btn-* variables)
   ============================================================ */
.btn-primary {
    --bs-btn-bg: var(--brand-green);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-green-hover);
    --bs-btn-hover-border-color: var(--brand-green-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-green-dark);
    --bs-btn-active-border-color: var(--brand-green-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
    --bs-btn-disabled-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-green-dark);
    --bs-btn-border-color: var(--brand-green);
    --bs-btn-hover-bg: var(--brand-green);
    --bs-btn-hover-border-color: var(--brand-green);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-green-hover);
    --bs-btn-active-border-color: var(--brand-green-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--brand-green);
    --bs-btn-disabled-border-color: var(--brand-green);
}

.btn-link {
    --bs-btn-color: var(--brand-green-dark);
    --bs-btn-hover-color: var(--brand-brown);
}

/* أزرار بحواف موحّدة وانتقال ناعم */
.btn {
    border-radius: var(--radius-sm);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .05s ease;
}
.btn:active { transform: translateY(1px); }

/* ---- توهّج التركيز (Focus) موحّد وواضح للوصولية ---- */
.btn:focus,
.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(102, 192, 56, 0.40);
    border-color: var(--brand-green);
}

/* ============================================================
   البطاقات
   ============================================================ */
.card {
    background-color: var(--surface-white);
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.card-header {
    border-top-left-radius: var(--radius) !important;
    border-top-right-radius: var(--radius) !important;
}

/* ============================================================
   النماذج (إدخال موحّد)
   ============================================================ */
.form-control,
.form-select {
    border-radius: var(--radius-sm);
}
.form-label {
    font-weight: 600;
    color: var(--brand-brown);
}

/* ============================================================
   الشارات (Badges) — نضمن تباين النص فوق الأخضر
   ============================================================ */
.badge.bg-primary,
.badge.text-bg-primary {
    background-color: var(--brand-green) !important;
    color: #fff !important;
}

/* ============================================================
   التبويبات (Nav Tabs) — حالة فعّالة موحّدة بالهوية
   ============================================================ */
.nav-tabs {
    --bs-nav-tabs-link-active-color: var(--brand-brown);
    --bs-nav-tabs-link-active-border-color: var(--brand-green-border) var(--brand-green-border) var(--surface-white);
    border-bottom-color: var(--brand-green-border);
}
.nav-tabs .nav-link.active {
    border-top: 2px solid var(--brand-green);
    font-weight: 700;
}

/* الروابط النصية بلون الهوية */
a { text-decoration-color: var(--brand-green-border); }

/* ============================================================
   شريط التنقّل العلوي
   ============================================================ */
.navbar {
    background-color: var(--surface-white) !important;
    box-shadow: var(--shadow) !important;
}
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--brand-green-dark) !important;
}

/* ============================================================
   التنبيهات (Alerts) — حواف موحّدة
   ============================================================ */
.alert { border-radius: var(--radius); }

/* ============================================================
   الجداول
   ============================================================ */
.table > :not(caption) > * > * { vertical-align: middle; }
.table-light th {
    color: var(--brand-brown);
    background-color: var(--brand-green-subtle);
}

/* ============================================================
   بطاقات الطلاب
   ============================================================ */
.student-profile-img {
    aspect-ratio: 4/6;
    object-fit: cover;
    object-position: top;
    width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
}
.student-card-hover {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.student-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================================
   الأيقونات — مخفية في كامل التطبيق للحفاظ على التناسق،
   وتظهر فقط في موضعين:
     (1) صفحة «إعدادات النظام»  (#systemSettingsPage)
     (2) شريط التنقّل السفلي للجوال  (.mobile-bottom-nav)
   (الماركب محفوظ — مجرّد إخفاء بالـ CSS، يسهل التراجع لاحقاً)
   ============================================================ */
.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
i[class*="fa-"] {
    display: none !important;
}
#systemSettingsPage .fas,
#systemSettingsPage .far,
#systemSettingsPage .fab,
#systemSettingsPage .fa-solid,
#systemSettingsPage .fa-regular,
#systemSettingsPage .fa-brands,
#systemSettingsPage i[class*="fa-"],
.mobile-bottom-nav .fas,
.mobile-bottom-nav i[class*="fa-"] {
    display: inline-block !important;
    vertical-align: -0.05em;
}

/* ============================================================
   لوحة المعلومات (Dashboard) — مكوّنات قابلة لإعادة الاستخدام
   ============================================================ */
.stat-card {
    background: var(--surface-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
    height: 100%;
    border-inline-start: 4px solid var(--brand-green);
}
.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-brown);
    line-height: 1;
}
.stat-card .stat-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.35rem;
}
.stat-card .stat-sub { font-size: 0.78rem; margin-top: 0.4rem; }
.stat-card.acc-green  { border-inline-start-color: var(--brand-green); }
.stat-card.acc-gold   { border-inline-start-color: var(--accent-gold); }
.stat-card.acc-brown  { border-inline-start-color: var(--brand-brown); }
.stat-card.acc-danger { border-inline-start-color: #dc3545; }

/* عنوان قسم داخل الداشبورد */
.dash-section-title {
    font-weight: 700;
    color: var(--brand-brown);
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
}

/* عنصر في قائمة ترتيب (متصدّرون / قربوا يختموا) */
.rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #f0ece2;
}
.rank-item:last-child { border-bottom: 0; }
.rank-item .rank-no {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand-green-subtle);
    color: var(--brand-green-dark);
    font-weight: 700; font-size: 0.85rem;
}
.rank-item .rank-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; object-position: top;
    border: 2px solid var(--brand-green-border); flex-shrink: 0;
}
.rank-item .rank-name { font-weight: 600; color: var(--text-main); }
.rank-item .rank-group { font-size: 0.78rem; color: var(--text-muted); }
.rank-progress {
    height: 8px; border-radius: 50rem;
    background: #eee; overflow: hidden; margin-top: 4px;
}
.rank-progress > span {
    display: block; height: 100%;
    background: var(--brand-green); border-radius: 50rem;
}

/* بطاقة طالب في لوحة الشرف (صورة أكبر) */
.honor-card {
    text-align: center;
    padding: 1.1rem 0.75rem;
    border-radius: var(--radius);
    background: #fffdf6;
    border: 1px solid #f0e2bd;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.honor-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.honor-card .honor-img {
    width: 120px; height: 120px; border-radius: 50%;
    object-fit: cover; object-position: top;
    border: 3px solid var(--accent-gold);
    margin-bottom: 0.7rem;
}
.honor-card .honor-name { font-weight: 700; color: var(--brand-brown); }
.honor-card .honor-group { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.55rem; }
.honor-card .honor-date {
    font-size: 0.75rem; font-weight: 600;
    background: var(--accent-gold); color: var(--brand-brown);
    border-radius: 50rem; padding: 3px 12px; display: inline-block;
}

/* شريط توزيع الحالات (مقسّم بلون لكل حالة) */
.status-bar {
    display: flex;
    height: 38px;
    border-radius: 50rem;
    overflow: hidden;
    background: #eee;
}
.status-bar > .seg {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.9rem;
    min-width: 0; transition: width 0.3s ease;
}
.status-legend {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    margin-top: 0.9rem;
}
.status-legend .leg-item { display: flex; align-items: center; gap: 7px; font-size: 0.9rem; }
.status-legend .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }

/* بطاقة «يسمّعون الآن» (بثّ حي) */
.live-card {
    background: var(--surface-white);
    border: 1px solid var(--brand-green-border);
    border-inline-start: 4px solid var(--brand-green);
    border-radius: var(--radius);
    padding: 14px 16px;
    height: 100%;
}
.live-card-head { display: flex; align-items: center; gap: 12px; }
.live-avatar {
    width: 60px; height: 60px; border-radius: 50%;
    object-fit: cover; object-position: top;
    border: 2px solid var(--brand-green); flex-shrink: 0;
}
.live-card .live-student { font-weight: 700; color: var(--brand-brown); font-size: 1.15rem; line-height: 1.2; }
.live-card .live-evaluator { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }
.live-part {
    margin-inline-start: auto; text-align: center; flex-shrink: 0;
    background: var(--brand-green); color: #fff;
    border-radius: 10px; padding: 6px 12px; min-width: 56px;
}
.live-part .p-lbl { font-size: 0.7rem; opacity: 0.9; line-height: 1; }
.live-part .p-num { font-size: 1.4rem; font-weight: 800; line-height: 1.15; }
.live-timer-big {
    font-family: monospace; font-weight: 700; letter-spacing: 1px;
    font-size: 1.6rem; color: var(--brand-green-dark);
    text-align: center; margin: 12px 0 10px;
}
.live-timer-big.paused { color: #9a6a00; }
.live-timer-big .live-paused {
    font-family: 'Tajawal', sans-serif; font-size: 0.7rem; font-weight: 700;
    background: #fbeed0; color: #9a6a00; border-radius: 50rem;
    padding: 2px 9px; vertical-align: middle; margin-inline-start: 6px;
}
.live-chips { display: flex; gap: 8px; }
.live-chip {
    flex: 1; text-align: center;
    background: #f6f8f3; border: 1px solid #e6ecdf;
    border-radius: 10px; padding: 7px 4px;
}
.live-chip .num { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.live-chip .lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.live-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; background: #dc3545;
    vertical-align: middle; margin-inline-start: 4px;
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   الفوتر
   ============================================================ */
.footer {
    background-color: var(--surface-white);
}

/* ============================================================
   شريط التنقّل السفلي (للجوال فقط)
   ============================================================ */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    background: var(--surface-white);
    border-top: 1px solid var(--brand-green-border);
    box-shadow: 0 -2px 14px rgba(92, 49, 6, 0.10);
}
.mobile-bottom-nav .nav-item-mobile {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 0.15s ease;
}
.mobile-bottom-nav .nav-item-mobile i {
    font-size: 1.2rem;
    line-height: 1;
}
.mobile-bottom-nav .nav-item-mobile.active {
    color: var(--brand-green-dark);
}
.mobile-bottom-nav .nav-item-mobile.active i {
    transform: translateY(-1px);
}
.mobile-bottom-nav .nav-item-mobile:active {
    background: var(--brand-green-subtle);
}
/* زر الخروج داخل الشريط السفلي يتصرّف كبقية العناصر */
.bottom-nav-logout-form {
    display: contents;
}
.mobile-bottom-nav button.nav-item-mobile {
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

/* مساحة سفلية للمحتوى + إخفاء الفوتر النصّي على الجوال حتى لا يتعارض مع الشريط.
   نقطة التحول 576px لتطابق ظهور الشريط السفلي (d-sm-none). */
@media (max-width: 575.98px) {
    body {
        margin-bottom: 0;
        /* مساحة بقدر ارتفاع الشريط حتى لا يُحجب آخر المحتوى */
        padding-bottom: 66px;
    }
    .footer { display: none; }
}

/* ============================================================
   لمسات للجوال (الأساس — شريط التنقّل السفلي يأتي بالمرحلة 2)
   ============================================================ */
@media (max-width: 575.98px) {
    /* مساحات لمس مريحة: حقول وأزرار بطول كافٍ (≈44px) */
    .form-control,
    .form-select,
    .btn:not(.btn-sm):not(.btn-group .btn) {
        min-height: 44px;
    }
}

/* ============================================================
   مفتاح تبديل طريقة العرض (segmented pill) + جدول الطلاب الأنيق
   ============================================================ */
.view-toggle {
    display: inline-flex;
    background: #eef3ea;
    border-radius: var(--radius-pill);
    padding: 4px;
    gap: 4px;
}
.view-toggle-btn {
    border: none;
    background: transparent;
    color: var(--brand-brown);
    padding: 0.4rem 1.15rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.view-toggle-btn:hover { color: var(--brand-green-text); }
.view-toggle-btn.active {
    background: var(--brand-green);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.view-toggle-btn.active:hover { color: #fff; }

/* جدول الطلاب: خفيف ومرتّب — بلا شبكة ثقيلة، صفوف مفصولة بخطوط رفيعة + hover */
.students-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    margin-bottom: 0;
}
.students-table thead th {
    background: #f6f9f3;
    color: var(--brand-brown);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.85rem 1rem;
    border: none;
    border-bottom: 2px solid #e3ebdb;
    white-space: nowrap;
}
.students-table tbody td {
    padding: 0.7rem 1rem;
    border: none;
    border-bottom: 1px solid #f1f1ec;
    vertical-align: middle;
}
.students-table tbody tr:last-child td { border-bottom: none; }
.students-table tbody tr { transition: background 0.15s; }
.students-table tbody tr[data-href] { cursor: pointer; }
.students-table tbody tr:hover { background: #f9fcf6; }
.students-table th.sortable { cursor: pointer; user-select: none; }
.students-table th.sortable:hover { color: var(--brand-green-text); }
.students-table .sort-ind { font-size: 0.78em; color: var(--brand-green); }
.students-table .st-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    flex-shrink: 0;
}