/* ============================================================
   pio-schedules.css — كل شي خاص بشاشة المواعيد V2
   بينضاف بعد pio-course-card.css و pio-offers.css بالـ bundle.

   ⚠️ الأسامي كلها بادئة pio-sched-*: الاسم pio-schedule-card
   محجوز أصلاً بـ style.css لكارد تاني عريض (عرضو 43.44vw وحشوتو
   74px أفقي)، فكاردنا كان يرث حشوتو ويطلع محتواه بنص العرض.
   قبل ما تضيف أي كلاس جديد هون، تأكد إنو مش مستعمل بملفات
   الـ bundle المشتركة.
   ============================================================ */


/* ---------- 1) الكارد ---------- */

/* الكارد المشترك محجوز إلو 428px بشاشة العروض. الموعد محتواه أقل
   (لا سعر ولا مدة)، فبنخلي الارتفاع يجي من المحتوى و h-100
   بالماركب بتوحّد كروت الصف. */
.pio-sched-card {
    min-height: 0;
}

    /* حشوة أضيق من كارد العروض — التيم ليد بدّو الكارد أصغر */
    .pio-sched-card .card-body {
        padding: .875rem 1rem 1rem;
    }

    /* ارتفاع ثابت للصورة: صور الدورات بنسب مختلفة، وبدونو كل كارد
       بياخد ارتفاع صورتو والصف بيطلع متعرّج. */
    .pio-sched-card .card-img-top {
        height: 140px;
        object-fit: cover;
    }

/* العنوان (الاسم ‑ المستوى) سطرين محجوزين.
   line-height صريحة مهمة: بدونها السطر العربي أطول من اللاتيني
   بهاد الخط، فكارد عنوانو عربي بسطرين بينزل 8px عن كارد عنوانو
   لاتيني وكل الي تحتو بينزاح. 2.9rem = سطرين × (16px × 1.45). */
.pio-schedules-grid .card-title.two-lines {
    line-height: 1.45;
    min-height: 2.9rem;
    margin-bottom: .625rem;
}

/* العنوان الي سطر واحد يبلش من فوق بدل ما يتوسّط بالمساحة المحجوزة */
.pio-schedules-grid .card-body > a {
    align-items: flex-start;
}


/* ---------- 2) صندوقا التاريخ والوقت ---------- */

.pio-sched-facts {
    display: flex;
    gap: .5rem;
    margin-bottom: .625rem;
}

/* min-width:0 ضروري: بدونو عنصر الـ flex ما بينكمش تحت عرض محتواه
   فالتاريخ بيمدّ الصندوق ويكسر الصف. */
.pio-sched-fact {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(0, 0, 0, .035);
    border-radius: 8px;
    padding: .5rem .625rem;
}

body[data-bs-theme="dark"] .pio-sched-fact {
    background: rgba(255, 255, 255, .05);
}

/* التاريخ بيحمل تاريخين وشحطة، فبياخد حصة أكبر من الوقت */
.pio-sched-fact--date {
    flex: 1.6 1 0;
}

.pio-sched-fact-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .6875rem;
    line-height: 1.4;
    opacity: .6;
}

    .pio-sched-fact-label i {
        opacity: .8;
    }

.pio-sched-fact-value {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pio-sched-days {
    margin-bottom: .625rem;
}

.pio-sched-day {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.5;
    background: var(--pio-primary-color, #F5821F);
    color: #fff;
    user-select: none;
}

body[data-bs-theme="dark"] .pio-sched-day {
    background: rgba(255, 255, 255, .07);
}

.pio-sched-day.on {
    background: var(--pio-primary-color, #F5821F);
    color: #fff;
    opacity: 1;
}


/* ---------- 4) شارات اللغة والدولة ---------- */

.pio-sched-tags {
    margin-bottom: .25rem;
}

.pio-sched-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .04);
    font-size: .6875rem;
    line-height: 1.5;
    opacity: .85;
}

body[data-bs-theme="dark"] .pio-sched-tag {
    background: rgba(255, 255, 255, .06);
}

.pio-sched-tag > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pio-sched-tag i {
    flex: 0 0 auto;
    opacity: .7;
}


/* ---------- 5) المدرّب ---------- */

/* min-width:0 مشان الاسم الطويل ينقص بدل ما يمدّ الكارد */
.pio-sched-instructor {
    min-width: 0;
}

/* دائرة بأيقونة بدل صورة المدرّب: الـ API بترجّع صورة افتراضية على
   مسار مش موجود على الـ DMS (نفس المسار المستعمل بشاشة تفاصيل
   الدورة)، فكانت تطلع صورة مكسورة. */
.pio-sched-instructor-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: rgba(0, 0, 0, .06);
    color: inherit;
    opacity: .75;
}

body[data-bs-theme="dark"] .pio-sched-instructor-icon {
    background: rgba(255, 255, 255, .08);
}

/* flex:1 مشان الاسم ما ينكمش لصفر ويختفي خالص */
.pio-sched-instructor .one-line {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ---------- 6) الشبكة ---------- */

.pio-schedules-grid {
    margin-inline: 0;
}

    /* display:flex على الـ col مشان h-100 على الكارد تشتغل، فتطلع
       كروت الصف الواحد بنفس الارتفاع. */
    .pio-schedules-grid > [class*="col-"] {
        display: flex;
        justify-content: center;
    }

    .pio-schedules-grid .pio-course-card {
        max-width: 300px;
    }


/* ---------- 7) شريط الفلاتر ---------- */

/* حقل البحث لابس كلاسات زر الفلتر، فبناخد منو الشكل وبنلغي سلوك
   الزر بس: الزر بيوسّط نصو وبيمنع التحديد ومؤشرو يد. */
.pio-sched-search input.pio-btn-filter {
    text-align: start;
    cursor: text;
    user-select: text;
    padding-inline-end: 34px; /* مكان لأيقونة البحث */
}

    .pio-sched-search input.pio-btn-filter::placeholder {
        opacity: .55;
    }

.pio-sched-search {
    min-width: 200px;
}

.pio-sched-search-icon {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    opacity: .5;
    pointer-events: none;
}

/* قائمة التاريخ: أعرض من قوائم الاختيار لأنو جواها حقول كاملة */
.pio-sched-date-menu {
    min-width: 240px;
}

    /* عناصر القائمة هون مش خيارات تنكبس، فبنلغي تأثير المرور والمؤشر */
    .pio-sched-date-menu > li.dropdown-item {
        cursor: default;
        background: transparent;
    }

    /* أيقونة التقويم الجاهزة من المتصفح — بتضل سودا بالوضع الغامق */
    .pio-sched-date-menu input[type="date"]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: .6;
    }

body[data-bs-theme="dark"] .pio-sched-date-menu input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.pio-sched-clear {
    cursor: pointer;
}


/* ---------- 8) حالة التحميل بين الفلاتر ---------- */

/* التعتيم على النتايج والترقيم بس — شريط الفلاتر بيضل واضح وقابل
   للاستعمال، فما يحس المستخدم إنو انتقل لصفحة تانية. */
.pio-schedules-busy .pio-hero-heading,
.pio-schedules-busy .pio-schedules-grid,
.pio-schedules-busy .pio-offers-pager {
    opacity: .45;
    transition: opacity .15s ease;
}