/* ============================================================
   school_schedule_widget.css
   أنماط ودجت التوقيت المدرسي في الصفحة الرئيسية
   v1.0
   ============================================================ */

/* ============================================================
   الحاوية الرئيسية للويدجت
   ============================================================ */
.school-schedule-widget {
    margin-top: auto;
    padding: 0;
}

/* ============================================================
   حالة التحميل
   ============================================================ */
.schw-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 16px;
    color: #94a3b8;
    font-size: 0.85rem;
}
.schw-loading i {
    font-size: 1.6rem;
    color: var(--theme-primary, #0a2558);
    opacity: 0.6;
}

/* ============================================================
   حالة "غير مرئي" (خارج النافذة الزمنية / يوم عطلة)
   ============================================================ */
.schw-hidden {
    text-align: center;
    padding: 20px 14px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}
.schw-hidden-icon {
    font-size: 2rem;
    color: #94a3b8;
    opacity: 0.5;
    margin-bottom: 8px;
    display: block;
}
.schw-hidden-text {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 600;
    margin: 0;
}

/* ============================================================
   حالة الإجازة
   ============================================================ */
.schw-holiday {
    text-align: center;
    padding: 22px 14px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 14px;
    border: 2px dashed #f59e0b;
    position: relative;
    overflow: hidden;
}
.schw-holiday::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.schw-holiday-icon {
    font-size: 2.4rem;
    color: #d97706;
    display: block;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.schw-holiday-name {
    font-weight: 900;
    font-size: 1rem;
    color: #92400e;
    margin: 0 0 6px;
    position: relative;
    z-index: 1;
    line-height: 1.4;
}
.schw-holiday-dates {
    font-size: 0.78rem;
    color: #a16207;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    direction: rtl;
}
.schw-holiday-notes {
    font-size: 0.74rem;
    color: #92400e;
    opacity: 0.8;
    margin: 8px 0 0;
    font-style: italic;
    position: relative;
    z-index: 1;
}

/* ============================================================
   حالة التعطيل المؤقت
   ============================================================ */
.schw-temp-disabled {
    text-align: center;
    padding: 22px 14px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 14px;
    border: 2px dashed #dc2626;
}
.schw-temp-disabled-icon {
    font-size: 2.4rem;
    color: #dc2626;
    display: block;
    margin-bottom: 10px;
    animation: schw-warn-pulse 2s infinite;
}
@keyframes schw-warn-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.85; }
}
.schw-temp-disabled-title {
    font-weight: 900;
    font-size: 1rem;
    color: #991b1b;
    margin: 0 0 6px;
}
.schw-temp-disabled-reason {
    font-size: 0.82rem;
    color: #b91c1c;
    margin: 0;
    line-height: 1.5;
}
.schw-temp-disabled-until {
    font-size: 0.72rem;
    color: #991b1b;
    opacity: 0.75;
    margin: 6px 0 0;
}

/* ============================================================
   الترويسة (النظام + التاريخ)
   ============================================================ */
.schw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1.5px solid #f1f5f9;
}
.schw-header-title {
    font-weight: 800;
    font-size: 0.82rem;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.schw-header-title i {
    color: var(--theme-primary, #0a2558);
    font-size: 0.85rem;
}
.schw-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 50px;
    font-size: 0.68rem;
    font-weight: 700;
    background: #eff6ff;
    color: #1e40af;
    white-space: nowrap;
}
.schw-header-badge.summer {
    background: #fef3c7;
    color: #92400e;
}
.schw-header-badge.winter {
    background: #e0e7ff;
    color: #3730a3;
}

/* ============================================================
   قائمة المراحل (كل مرحلة سطر)
   ============================================================ */
.schw-stages-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.schw-stage-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    background: #f8fafc;
    border-radius: 10px;
    border-right: 4px solid var(--stage-color, #3b82f6);
    transition: all 0.25s ease;
    position: relative;
}
.schw-stage-row:hover {
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(-1px);
}

/* حالة "بعد اليوم" - باهتة */
.schw-stage-row.state-after,
.schw-stage-row.state-no_schedule {
    opacity: 0.55;
}
.schw-stage-row.state-after {
    background: #f1f5f9;
}
.schw-stage-row.state-after .schw-stage-status-type,
.schw-stage-row.state-after .schw-stage-status-label {
    color: #94a3b8 !important;
}

/* حالة "قبل اليوم" - أزرق خفيف */
.schw-stage-row.state-before {
    background: #eff6ff;
}

/* حالة الفسحة */
.schw-stage-row.state-break {
    border-right-color: #f59e0b !important;
}
.schw-stage-row.state-break .schw-stage-icon {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

/* حالة الصلاة */
.schw-stage-row.state-prayer {
    border-right-color: #8b5cf6 !important;
}
.schw-stage-row.state-prayer .schw-stage-icon {
    background: #ede9fe !important;
    color: #7c3aed !important;
}

/* ============================================================
   أيقونة المرحلة
   ============================================================ */
.schw-stage-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--stage-color, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
    flex-shrink: 0;
    transition: all 0.25s;
}
.schw-stage-row:hover .schw-stage-icon {
    transform: scale(1.05);
}

/* ============================================================
   محتوى المرحلة (اسم + الحالة)
   ============================================================ */
.schw-stage-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.schw-stage-name {
    font-weight: 800;
    font-size: 0.82rem;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schw-stage-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    line-height: 1.3;
    min-width: 0;
}
.schw-stage-status-icon {
    font-size: 0.72rem;
    flex-shrink: 0;
}
.schw-stage-status-type {
    font-weight: 700;
    color: var(--stage-color, #3b82f6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schw-stage-status-label {
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.schw-stage-status-next {
    font-size: 0.68rem;
    color: #94a3b8;
    font-weight: 600;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   العدّاد التنازلي
   ============================================================ */
.schw-stage-timer {
    font-size: 0.92rem;
    font-weight: 900;
    color: var(--stage-color, #3b82f6);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    padding: 3px 6px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.03);
    min-width: 52px;
    text-align: center;
    transition: all 0.2s;
}
.schw-stage-timer.warning {
    color: #dc2626;
    background: #fee2e2;
    animation: schw-timer-pulse 1.5s infinite;
}
.schw-stage-timer.after {
    color: #94a3b8;
    background: #f1f5f9;
    font-size: 0.78rem;
}
.schw-stage-timer.before {
    color: #1e40af;
    background: #dbeafe;
}
@keyframes schw-timer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ============================================================
   شريط سفلي
   ============================================================ */
.schw-footer {
    padding-top: 10px;
    border-top: 1.5px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.72rem;
    color: #64748b;
    flex-wrap: wrap;
}
.schw-footer-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}
.schw-footer-info i {
    color: var(--theme-primary, #0a2558);
    font-size: 0.72rem;
}
.schw-footer-system {
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
   التجاوب — الجوال
   ============================================================ */
@media (max-width: 576px) {
    .schw-stage-row {
        padding: 8px 10px;
        gap: 8px;
    }
    .schw-stage-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 0.9rem;
    }
    .schw-stage-name {
        font-size: 0.78rem;
    }
    .schw-stage-timer {
        font-size: 0.82rem;
        min-width: 46px;
        padding: 2px 5px;
    }
    .schw-header-title {
        font-size: 0.78rem;
    }
    .schw-header-badge {
        font-size: 0.64rem;
        padding: 2px 8px;
    }
    .schw-footer {
        font-size: 0.68rem;
    }
}

/* ============================================================
   التوافق مع الوضع الليلي (لو أُضيف لاحقاً)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* لا نغيّر شيئاً الآن — الوضع الليلي غير مفعّل */
}

/* ============================================================
   حركات دخول ناعمة
   ============================================================ */
.schw-stage-row {
    animation: schw-fade-in 0.35s ease both;
}
.schw-stage-row:nth-child(1) { animation-delay: 0.03s; }
.schw-stage-row:nth-child(2) { animation-delay: 0.06s; }
.schw-stage-row:nth-child(3) { animation-delay: 0.09s; }
.schw-stage-row:nth-child(4) { animation-delay: 0.12s; }
.schw-stage-row:nth-child(5) { animation-delay: 0.15s; }
.schw-stage-row:nth-child(6) { animation-delay: 0.18s; }
@keyframes schw-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   التوافق مع Safari القديم + Firefox
   ============================================================ */
.schw-stage-row {
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
}
.schw-stage-timer {
    -webkit-font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
}