/* ============================================================
   التقويم الدراسي 1447 – 1448 هـ
   ملف التنسيقات الرئيسي – الإصدار V2.0.4
   (تحسين الشكل البصري + أنيميشن الفواصل)
   ============================================================ */

/* ------------------------------------------------------------
   0) إعادة ضبط عامة + الخط
   ------------------------------------------------------------ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Tajawal', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: #f0f2f5;
    color: #212121;
    direction: rtl;
}

/* ------------------------------------------------------------
   1) متغيرات الألوان (الوضع الفاتح)
   ------------------------------------------------------------ */

:root {
    /* ألوان عامة */
    --body-bg: #f0f2f5;
    --card-bg: #ffffff;
    --text-main: #212121;
    --text-muted: #666666;
    --text-soft: #9e9e9e;

    /* ألوان الهوية */
    --primary-main: #0d47a1;
    --primary-accent: #1565c0;
    --primary-accent-dark: #1e88e5;

    /* الهيدر */
    --header-bg: #ffffff;
    --header-border-top-light: #1565c0;
    --header-border-top-dark: #1e88e5;

    /* كارت الأسبوع */
    --week-card-bg: #fffde7;
    --week-card-title: #f57f17;

    /* كارت الراتب */
    --salary-card-bg: #e3f2fd;
    --salary-border: #1b5e20;
    --salary-text-main: #263238;
    --salary-accent: #2e7d32;

    /* مناسبتك الخاصة */
    --custom-bg: #fff8e1;
    --custom-border: #f9a825;
    --custom-title: #f57f17;

    /* الأرشيف */
    --archive-divider-bg: #f0f2f5;
    --archive-divider-line: #757575;

    /* واتساب */
    --whatsapp-color: #25d366;

    /* نصوص الحالة */
    --status-current: #1565c0;
    --status-upcoming: #455a64;
    --status-ended: #5c6b73;

    /* فئات الكروت */
    /* إداري admin */
    --cat-admin-bg: #f3e5f5;
    --cat-admin-border: #8e24aa;
    --cat-admin-title: #4a148c;
    --cat-admin-bg-ended: #faf2fb;
    --cat-admin-text-ended: #6a5f7d;

    /* اختبارات exam */
    --cat-exam-bg: #e3f2fd;
    --cat-exam-border: #1976d2;
    --cat-exam-title: #0d47a1;
    --cat-exam-bg-ended: #f1f7fe;
    --cat-exam-text-ended: #546e7a;

    /* إجازة الخريف autumn_break */
    --cat-autumn-bg: #fbe4d5;
    --cat-autumn-border: #c55a11;
    --cat-autumn-title: #a8430d;
    --cat-autumn-bg-ended: #fdf0e8;
    --cat-autumn-text-ended: #795548;

    /* يوم التأسيس founding_day */
    --founding-bg-main: #c79a5a;
    --founding-bg-light: #f2e3c6;
    --founding-border: #8b5a2b;
    --founding-text: #4e342e;
    --founding-badge-bg: #efe0c2;
    --founding-bg-ended-light: #f8efe0;
    --founding-bg-ended-main: #d4b27a;
    --founding-border-ended: #a67c52;
    --founding-text-ended: #6d4c41;

    /* اليوم الوطني national_day */
    --cat-national-bg: #0b7a43;
    --cat-national-border: #064024;
    --cat-national-title: #ffffff;
    --cat-national-bg-ended: #b7d7c5;
    --cat-national-text-ended: #20452e;

    /* يوم العلم flag_day */
    --cat-flag-bg: #e0f7fa;
    --cat-flag-border: #00838f;
    --cat-flag-title: #006064;
    --cat-flag-bg-ended: #f2fbfc;
    --cat-flag-text-ended: #4f6f73;

    /* إجازة نهاية فصل term_end_break */
    --cat-termend-bg: #fff3cd;
    --cat-termend-border: #ffb300;
    --cat-termend-title: #8a6d3b;
    --cat-termend-bg-ended: #fff8e1;
    --cat-termend-text-ended: #6d4c41;

    /* إجازة العيدين eid_break */
    --cat-eid-bg: #e0f2f1;
    --cat-eid-border: #00796b;
    --cat-eid-title: #004d40;
    --cat-eid-bg-ended: #f1f9f8;
    --cat-eid-text-ended: #607d8b;

    /* إجازات إضافية extra_break */
    --cat-extra-bg: #edf3f8;
    --cat-extra-border: #607d8b;
    --cat-extra-title: #455a64;
    --cat-extra-bg-ended: #f5f8fb;
    --cat-extra-text-ended: #78909c;

    /* أزرار عامة */
    --button-bg-dark: #37474f;
    --button-bg-dark-hover: #263238;
    --button-text-light: #ffffff;
}

/* ------------------------------------------------------------
   2) الوضع الداكن
   ------------------------------------------------------------ */

html.theme-dark {
    --body-bg: #121212;
    --card-bg: #1f2933;
    --text-main: #e0e0e0;
    --text-muted: #b0bec5;
    --text-soft: #90a4ae;

    --header-bg: #1e1e1e;
    --header-border-top-light: #1565c0;
    --header-border-top-dark: #1e88e5;

    --week-card-bg: #262626;
    --week-card-title: #ffb74d;

    --salary-card-bg: #263238;
    --salary-border: #2e7d32;
    --salary-text-main: #eceff1;
    --salary-accent: #66bb6a;

    --custom-bg: #332f20;
    --custom-border: #f9a825;
    --custom-title: #ffca28;

    --archive-divider-bg: #121212;
    --archive-divider-line: #616161;

    /* تعديلات بسيطة للفئات في الوضع الداكن */
    --cat-admin-bg: #352643;
    --cat-admin-bg-ended: #2b2136;
    --cat-exam-bg: #102a43;
    --cat-exam-bg-ended: #182b3a;
    --cat-autumn-bg: #3b2417;
    --cat-autumn-bg-ended: #2e1c12;
    --cat-termend-bg: #3c2f17;
    --cat-termend-bg-ended: #2d2313;
    --cat-eid-bg: #1c3531;
    --cat-eid-bg-ended: #162825;
    --cat-extra-bg: #243340;
    --cat-extra-bg-ended: #1a2630;
}

/* ------------------------------------------------------------
   3) الحاوية العامة
   ------------------------------------------------------------ */

body {
    background-color: var(--body-bg);
    color: var(--text-main);
}

.container {
    max-width: 900px;
    margin: 1.5rem auto 2.5rem auto;
    padding: 0 1rem;
}

/* ------------------------------------------------------------
   4) الهيدر
   ------------------------------------------------------------ */

.main-header {
    background-color: var(--header-bg);
    padding: 1.5rem 1.25rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
    border-top: 4px solid var(--header-border-top-light);
    border-bottom: 2px solid rgba(15, 23, 42, 0.06);
    margin-bottom: 1.75rem;
    position: relative;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-title-block {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 20%, #fff8e1, #ffecb3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 6px 15px rgba(251, 192, 45, 0.5);
}

.header-texts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-main);
}

.header-title-sub {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-main);
    text-align: center;
    line-height: 1.4;
    margin-top: 0.1rem;
}


.header-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.header-toggle-block {
    display: flex;
    align-items: center;
}

.theme-toggle-btn {
    border: none;
    outline: none;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0d47a1, #1565c0);
    color: #ffffff;
    font-size: 1.2rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(13, 71, 161, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.theme-toggle-btn:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 10px 20px rgba(13, 71, 161, 0.55);
}

.header-date-line {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-soft);
}

.header-date-line span {
    margin: 0 0.25rem;
}

.separator {
    color: #b0bec5;
}

/* ------------------------------------------------------------
   5) كروت لوحة المعلومات (الأسبوع + الراتب)
   ------------------------------------------------------------ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-card {
    background-color: var(--card-bg);
    border-radius: 1.5rem;
    padding: 1.25rem 1.4rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    border-bottom: 3px solid rgba(15, 23, 42, 0.06);
    position: relative;
    overflow: hidden;
}

/* كارت الأسبوع */
.week-card {
    background-color: var(--week-card-bg);
    border-right: 6px solid var(--week-card-title);
}

/* كارت الراتب */
.salary-card {
    background-color: var(--salary-card-bg);
    border-right: 6px solid var(--salary-border);
    color: var(--salary-text-main);
}

.dash-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.75rem;
}

.dash-value {
    font-size: 2.4rem;
    font-weight: 800;
    text-align: center;
    color: var(--primary-main);
    margin-bottom: 0.25rem;
}

.week-status-note {
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* عدّاد الراتب – باستخدام نفس ستايل العدّادات العام ولكن باتجاه عكسي */
.salary-timer {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem 0;
    flex-direction: row-reverse; /* عكس الاتجاه */
}

.salary-time-unit {
    /* ستتم وراثة شكل الوحدة من .timer-unit */
}

.salary-note {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-soft);
}

/* ------------------------------------------------------------
   6) الفواصل بين الأقسام
   ------------------------------------------------------------ */

.section-divider {
    height: 1px;
    margin: 1.5rem 0;
    background: linear-gradient(to left, transparent, rgba(0,0,0,0.12), transparent);
}

.section-divider-custom-top {
    margin-top: 1.75rem;
}

.section-divider-custom-bottom {
    margin-bottom: 1.5rem;
}

/* أنيميشن الطيف للفواصل (الفصلين + الأرشيف) */

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

.term-divider,
.ended-divider {
    margin: 2rem 0 1rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.95rem;
}

/* النص داخل الفواصل يأخذ نفس أنيميشن الطيف */
.term-divider span,
.ended-divider span {
    background: linear-gradient(90deg,#1565c0,#8e24aa,#f9a825,#2e7d32,#1565c0);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: dividerRainbow 8s linear infinite;
}

/* الخطوط يمين ويسار مع نفس الأنيميشن */

.term-divider::before,
.term-divider::after,
.ended-divider::before,
.ended-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,#1565c0,#8e24aa,#f9a825,#2e7d32,#1565c0);
    background-size: 300% 100%;
    animation: dividerRainbow 8s linear infinite;
}

/* ------------------------------------------------------------
   7) قسم مناسباتك الخاصة
   ------------------------------------------------------------ */

#custom-section {
    background-color: var(--custom-bg);
    border-radius: 1.5rem;
    padding: 1.25rem 1.4rem 1.5rem 1.4rem;
    border-right: 6px solid var(--custom-border);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
    margin-bottom: 1.75rem;
}

.custom-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--custom-title);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.add-custom-btn {
    display: block;
    margin: 0 auto 1rem auto;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(21, 101, 192, 0.45);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.add-custom-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(21, 101, 192, 0.55);
}

#custom-events-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* كرت المناسبة الخاصة */

.custom-card {
    background-color: #ffffff;
    border-radius: 1.25rem;
    padding: 1rem 1.1rem 1.1rem 1.1rem;
    position: relative;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(0,0,0,0.03);
}

.custom-delete-x {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    border: none;
    background: rgba(244, 67, 54, 0.12);
    color: #d32f2f;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.9rem;
}

.custom-main {
    margin-bottom: 0.75rem;
}

.custom-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-align: center;
    color: var(--custom-title);
}

.custom-helper {
    font-size: 0.8rem;
    color: var(--text-soft);
    text-align: center;
    margin-bottom: 0.7rem;
}

.custom-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.custom-input {
    width: 100%;
    padding: 0.55rem 0.9rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(0,0,0,0.08);
    font-size: 0.9rem;
    outline: none;
}

.custom-input:focus {
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.16);
}

.custom-date-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.custom-date-wrapper {
    padding: 0.35rem 0.75rem;
    border-radius: 0.9rem;
    border: 1px dashed rgba(0,0,0,0.12);
    display: inline-flex;
    justify-content: center;
}

.custom-date-wrapper input[type="date"] {
    border: none;
    outline: none;
    font-size: 0.9rem;
    padding: 0.25rem 0.3rem;
    min-width: 160px;
    min-height: 2.2rem;
}

/* تكبير بسيط في الجوال */
@media (max-width: 480px) {
    .custom-date-wrapper input[type="date"] {
        min-width: 190px;
        min-height: 2.5rem;
        font-size: 0.95rem;
    }
}

.custom-date-wrapper.has-value {
    border-style: solid;
    border-color: var(--primary-accent);
}

.custom-actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.btn-small {
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    border: none;
    cursor: pointer;
}

.btn-reset {
    background-color: #eeeeee;
    color: #424242;
}

.btn-delete {
    background-color: #ffebee;
    color: #c62828;
}

/* قسم العداد الخاص بالمناسبة */

.custom-timer-wrapper {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.custom-timer-box {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.2rem 0;
}

.custom-status {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* ------------------------------------------------------------
   8) العدّادات – تصميم موحّد
   ------------------------------------------------------------ */

.timer-box,
.custom-timer-box,
.salary-timer {
    /* الأساس هنا، لكن كل واحد له flex خاص أعلاه إن لزم */
}

.timer-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0.5rem 0.65rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10);
}

.timer-num {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary-main);
    line-height: 1.2;
}

.timer-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* عدّادات الأحداث الرسمية */
.event-timer-wrapper {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.timer-box {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

/* ------------------------------------------------------------
   9) تبويبات الفصول
   ------------------------------------------------------------ */

.term-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.term-tab {
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    padding: 0.4rem 0.9rem;
    background-color: #ffffff;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--text-main);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.term-tab.active {
    background: linear-gradient(135deg, #1565c0, #1e88e5);
    color: #ffffff;
    border-color: transparent;
}

/* ------------------------------------------------------------
   10) كروت الأحداث الرسمية
   ------------------------------------------------------------ */

.event-card {
    background-color: var(--card-bg);
    border-radius: 1.5rem;
    padding: 1.25rem 1.3rem 1.35rem 1.3rem;
    margin-bottom: 1rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    border-right: 7px solid #90a4ae;
    position: relative;
}

/* عنوان الحدث */
.event-main {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.event-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-main);
    text-align: center;
}

.event-meta {
    margin-top: 0.35rem;
}

.event-date-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.date-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* بادج الهجري */
.date-badge-hijri {
    background-color: rgba(13, 71, 161, 0.06);
    color: var(--primary-main);
    font-weight: 600;
}

/* نص الحالة تحت العداد */
.status-text {
    font-size: 0.9rem;
    text-align: center;
    color: var(--status-upcoming);
}

.status-note {
    font-size: 0.8rem;
    text-align: center;
    color: var(--text-soft);
}

/* حالة منتهية */
.event-card.ended {
    opacity: 0.85;
    background-color: rgba(255,255,255,0.7);
}

.ended-tags {
    display: inline-flex;
    gap: 0.25rem;
}

.ended-badge,
.ended-finished-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.ended-badge {
    background-color: #e0f2f1;
    color: #00796b;
}

.ended-finished-badge {
    background-color: #ffebee;
    color: #c62828;
}

/* ------------------------------------------------------------
   11) ألوان حسب نوع الحدث (border-right + خلفية)
   ------------------------------------------------------------ */

/* إداري */
.category-admin {
    background-color: var(--cat-admin-bg);
    border-right-color: var(--cat-admin-border);
}
.category-admin.ended {
    background-color: var(--cat-admin-bg-ended);
    color: var(--cat-admin-text-ended);
}

/* اختبارات */
.category-exam {
    background-color: var(--cat-exam-bg);
    border-right-color: var(--cat-exam-border);
}
.category-exam.ended {
    background-color: var(--cat-exam-bg-ended);
    color: var(--cat-exam-text-ended);
}

/* إجازة الخريف */
.category-autumn_break {
    background-color: var(--cat-autumn-bg);
    border-right-color: var(--cat-autumn-border);
}
.category-autumn_break.ended {
    background-color: var(--cat-autumn-bg-ended);
    color: var(--cat-autumn-text-ended);
}

/* يوم التأسيس */
.category-founding_day {
    background: linear-gradient(135deg, var(--founding-bg-light), var(--founding-bg-main));
    border-right-color: var(--founding-border);
}
.category-founding_day .event-title {
    color: var(--founding-text);
}
.category-founding_day.ended {
    background: linear-gradient(135deg, var(--founding-bg-ended-light), var(--founding-bg-ended-main));
    border-right-color: var(--founding-border-ended);
    color: var(--founding-text-ended);
}

/* اليوم الوطني */
.category-national_day {
    background-color: var(--cat-national-bg);
    border-right-color: var(--cat-national-border);
}
.category-national_day .event-title {
    color: var(--cat-national-title);
}
.category-national_day.ended {
    background-color: var(--cat-national-bg-ended);
    color: var(--cat-national-text-ended);
}

/* يوم العلم */
.category-flag_day {
    background-color: var(--cat-flag-bg);
    border-right-color: var(--cat-flag-border);
}
.category-flag_day.ended {
    background-color: var(--cat-flag-bg-ended);
    color: var(--cat-flag-text-ended);
}

/* إجازة نهاية فصل */
.category-term_end_break {
    background-color: var(--cat-termend-bg);
    border-right-color: var(--cat-termend-border);
}
.category-term_end_break.ended {
    background-color: var(--cat-termend-bg-ended);
    color: var(--cat-termend-text-ended);
}

/* إجازة العيدين */
.category-eid_break {
    background-color: var(--cat-eid-bg);
    border-right-color: var(--cat-eid-border);
}
.category-eid_break.ended {
    background-color: var(--cat-eid-bg-ended);
    color: var(--cat-eid-text-ended);
}

/* إجازات إضافية */
.category-extra_break {
    background-color: var(--cat-extra-bg);
    border-right-color: var(--cat-extra-border);
}
.category-extra_break.ended {
    background-color: var(--cat-extra-bg-ended);
    color: var(--cat-extra-text-ended);
}

/* ------------------------------------------------------------
   12) أزرار أسفل الصفحة (الطباعة + المشاركة)
   ------------------------------------------------------------ */

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.btn-action {
    border-radius: 999px;
    border: none;
    padding: 0.6rem 1.4rem;
    font-size: 0.9rem;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.btn-print {
    background-color: var(--button-bg-dark);
    color: var(--button-text-light);
}

.btn-share {
    background-color: var(--whatsapp-color);
    color: #ffffff;
}

/* ------------------------------------------------------------
   13) زر واتساب العائم
   ------------------------------------------------------------ */

.floating-whatsapp {
    position: fixed;
    bottom: 1.4rem;
    right: 1.1rem; /* يمين الشاشة */
    width: 58px;
    height: 58px;
    border-radius: 999px;
    border: none;
    background-color: var(--whatsapp-color);
    box-shadow: 0 10px 22px rgba(37, 211, 102, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    padding: 0;
}

.floating-whatsapp svg {
    width: 28px;
    height: 28px;
    display: block;
}

.floating-whatsapp svg path {
    fill: #ffffff !important;
}

/* ------------------------------------------------------------
   14) الطباعة
   ------------------------------------------------------------ */

@media print {
    body {
        background-color: #ffffff !important;
    }

    .main-header,
    .action-buttons,
    .floating-whatsapp {
        display: none !important;
    }

    .container {
        box-shadow: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
    }

    .event-card,
    #custom-section,
    .dash-card {
        box-shadow: none !important;
        border-radius: 0.5rem !important;
    }
}

/* ------------------------------------------------------------
   15) استجابات للشاشات الصغيرة
   ------------------------------------------------------------ */

@media (max-width: 600px) {
    .main-header {
        padding: 1.1rem 1rem;
    }

    /* جعل الهيدر في عمود والزر أعلى العنوان بمسافة بسيطة */
    .header-row {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .header-toggle-block {
        order: -1;
        margin-bottom: 0.4rem;
    }

    .dash-card {
        padding: 1rem 1.1rem;
    }

    .event-card {
        padding: 1.1rem 1rem 1.2rem 1rem;
    }

    .timer-unit {
        min-width: 64px;
        padding: 0.45rem 0.5rem;
    }

    .timer-num {
        font-size: 1.15rem;
    }

    .dashboard-grid {
        gap: 0.9rem;
    }
    
        .header-title {
        font-size: 1rem;
    }

    .header-title-sub {
        font-size: 0.85rem;
    }

    
}

/* عكس اتجاه العدادات في الأحداث الرسمية */
.event-card .timer-box {
    flex-direction: row-reverse !important;
}

/* عكس اتجاه العدادات في مناسباتك الخاصة */
.custom-card .custom-timer-box {
    flex-direction: row-reverse !important;
}

/* ----------------------------------------------
   مؤثر ظل ناعم للكروت (Hover Shadow Smooth)
   ---------------------------------------------- */

.dash-card,
.event-card,
#custom-section {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-card:hover,
.event-card:hover,
#custom-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

/* ----------------------------------------------
   Pulse خفيف للأحداث الجارية (LIVE)
   ---------------------------------------------- */

@keyframes livePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.35);
    }
    70% {
        transform: scale(1.01);
        box-shadow: 0 0 0 10px rgba(33, 150, 243, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(33, 150, 243, 0);
    }
}

.event-card.live {
    animation: livePulse 2.2s infinite;
}

/* وهج بسيط لعنوان الحدث داخل الحدث الجاري */
.event-card.live .event-title span:last-child {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

/* ----------------------------------------------
   مؤثر لطيف لكارت الأسبوع
   ---------------------------------------------- */

.week-card {
    position: relative;
    overflow: hidden;
}

.week-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.55), transparent 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.week-card:hover::before {
    opacity: 1;
}

/* ----------------------------------------------
   مؤثر لطيف لكارت الراتب
   ---------------------------------------------- */

.salary-card {
    position: relative;
    overflow: hidden;
}

.salary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.4), transparent 55%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.salary-card:hover::before {
    opacity: 1;
}

/* ضمان أن المحتوى فوق طبقة اللمعة */
.week-card > *,
.salary-card > * {
    position: relative;
    z-index: 1;
}