/* ===== CUSTOM COLORS ===== */
:root {
    --primary-color: #036280;
    --secondary-color: #16c8dd;
    --primary-dark: #024a60;
    --primary-light: #0484a8;
    --secondary-light: #4dd9ea;
    --secondary-dark: #11a8ba;
    --bg-light: #f0f4f8;
    --text-dark: #1a2a3a;
    --text-muted: #7a8a9a;
    --white-glass: rgba(255, 255, 255, 0.85);
    --shadow-color: rgba(3, 98, 128, 0.15);
    --header-height: 70px;
    --bottom-nav-height: 60px;
    --page-header-height: 72px;
    --max-width: 420px;
    /* Detail Colors */
    --oral-color: #42A5F5;
    --attendance-color: #4CAF50;
    --homework-color: #FF9800;
    --written-color: #9C27B0;
    /* ألوان الحالات */
    --pending-color: #f39c12;
    --pending-bg: #fef9e7;
    --in-progress-color: #2980b9;
    --in-progress-bg: #eaf2f8;
    --resolved-color: #27ae60;
    --resolved-bg: #eafaf1;
    --rejected-color: #e74c3c;
    --rejected-bg: #fdedec;
    /* ألوان الأنواع */
    --complaint-color: #e74c3c;
    --complaint-bg: #fdedec;
    --suggestion-color: #2980b9;
    --suggestion-bg: #eaf2f8;
    /* ألوان الحضور */
    --present-color: #27ae60;
    --absent-color: #e74c3c;
    --late-color: #f39c12;
    /**/
    --danger-color: #e74c3c;
    --danger-bg: #fdedec;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --info-color: #2980b9;
    --pending-color: #f59e0b;
    --approved-color: #27ae60;
    --rejected-color: #e74c3c;
    --inprogress-color: #06b6d4;
    --onhold-color: #8b5cf6;
    /* ألوان شريط التقدم الجديدة */
    --progress-start: #16c8dd;
    --progress-end: #036280;
    /**/
    --danger-dark: #c0392b;
    --shadow-color: rgba(0, 0, 0, 0.2);
    /* ألوان مساعدة */
    --bg-body: #f0f6f9;
    --card-bg: #ffffff;
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-card: 0 20px 60px -16px rgba(3, 98, 128, 0.15);
    /* ألوان الحالات */
    --warning: #d97706;
    --warning-light: #fef3c7;
    --warning-dark: #b45309;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --danger-dark: #b91c1c;
    --success: #059669;
    --success-light: #d1fae5;
    --success-dark: #047857;
    /* لون أخضر فاتح للقسط الأول */
    --green-light: #10b981;
    --green-light-bg: #ecfdf5;
    --green-light-border: #a7f3d0;
    --green-dark: #047857;
    --text-main: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-light: #e2eef3;
    --font-ar: 'Cairo', system-ui, sans-serif;
    --font-en: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ===== RESET & GLOBAL ===== */
* {
    font-family: 'Cairo','Tajawal', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
     width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}


/* ===== الهيدر ===== */
.ag-header-main {
    background: linear-gradient(135deg, #0b4f6c 0%, #1a7a9e 100%);
    padding: 16px;
    border-radius: 20px 20px 0 0;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(11, 79, 108, 0.25);
    position: relative;
    overflow: hidden;
}

    .ag-header-main::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 80%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .ag-header-main .ag-icon-large {
        font-size: 2.6rem;
        color: #ffd700;
        margin-bottom: 0.3rem;
        display: block;
        text-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

.ag-step-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
    letter-spacing: -0.3px;
}

    .ag-step-title i {
        color: #ffd700;
        font-size: 1.5rem;
    }

.ag-step-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    margin-top: 0.4rem;
    padding-right: 2px;
    font-weight: 400;
    opacity: 0.95;
    line-height: 1.6;
}

    .ag-step-subtitle i {
        margin-left: 4px;
    }

/* ===== الأقسام ===== */
.ag-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* بطاقة القسم – تصميم جديد */
.ag-section {
    background: white;
    border-radius: 18px;
    padding: 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(11, 79, 108, 0.04);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .ag-section:active {
        transform: scale(0.99);
    }

/* رأس القسم – بلون مميز */
.ag-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 5px 16px;
    background: linear-gradient(135deg, rgba(11, 79, 108, 0.04) 0%, rgba(26, 122, 158, 0.02) 100%);
    border-bottom: 1px solid rgba(11, 79, 108, 0.04);
}

/* أيقونة القسم بدلاً من البادج الرقمي */
.ag-icon-badge {
    flex: 0 0 40px;
    height: 40px;
    background: linear-gradient(135deg, #0b4f6c, #1f7a9c);
    color: white;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(11, 79, 108, 0.15);
}

.ag-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0b4f6c;
    flex: 1;
    letter-spacing: -0.2px;
}

    .ag-title i {
        color: #d4a13e;
        margin-left: 6px;
        font-size: 0.9rem;
    }

/* محتوى القسم */
.ag-content {
    padding: 16px;
}

/* ===== قائمة الأحكام ===== */
.ag-list-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    counter-reset: item;
}

.ag-list-item {
    border-bottom: 1px solid rgba(11, 79, 108, 0.04);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.7;
    text-align: justify;
    margin-bottom: 10px;
    /**/
    counter-increment: item;
    position: relative;
    padding-right: 35px; /* لأن النص عربي */
}

    .ag-list-item::before {
        color: #d4a13e;
        font-size: 1.2rem;
        line-height: 1.8;
        flex-shrink: 0;
        /**/
        content: counter(item) ".";
        position: absolute;
        right: 14PX;
        top: -5px;
        font-weight: 600;
    }

    .ag-list-item:last-child {
        border-bottom: none;
    }

/* ===== الأقساط – تنسيق جديد ===== */
.ag-installment-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
}

.ag-installment-box {
    background: rgba(11, 79, 108, 0.02);
    border: 1px solid rgba(11, 79, 108, 0.06);
    border-radius: 14px;
    padding: 0.9rem 1rem;
    transition: background 0.2s;
}

    .ag-installment-box:active {
        background: rgba(11, 79, 108, 0.04);
    }

    .ag-installment-box .ag-installment-title {
        font-weight: 700;
        color: #0b4f6c;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 0.2rem;
    }

        .ag-installment-box .ag-installment-title i {
            color: #d4a13e;
            font-size: 0.9rem;
        }

    .ag-installment-box .ag-installment-sub {
        font-size: 0.75rem;
        color: #2c4d63;
        display: inline-block;
        margin: 0.2rem 0 0.3rem;
        background: rgba(212, 161, 62, 0.08);
        padding: 0.1rem 0.7rem;
        border-radius: 14px;
        font-weight: 500;
    }

    .ag-installment-box .ag-installment-item {
        font-size: 0.75rem;
        font-weight: 700;
        color: #1d3647;
        padding: 0.15rem 0;
        display: flex;
        align-items: center;
        gap: 8px;
        line-height: 1.7;
    }

        .ag-installment-box .ag-installment-item i {
            color: #d4a13e;
            font-size: 0.6rem;
            width: 14px;
        }

/* ===== الجدول ===== */
.ag-table {
    font-size: 0.85rem;
    border-color: #e5edf3;
    margin-top: 0.3rem;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    table-layout: fixed;
}

    .ag-table thead th {
        background: linear-gradient(135deg, #0b4f6c, #1a7a9e);
        color: white;
        font-weight: 600;
        font-size: 0.7rem;
        align-content: center;
    }

    .ag-table tbody td {
        padding: 0.6rem 0.3rem;
        vertical-align: middle;
        border-color: #e5edf3;
        background: white;
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .ag-table tbody tr:nth-child(even) td {
        background: #f8fafc;
    }

    .ag-table tbody tr:last-child td:first-child {
        border-radius: 0 0 0 8px;
    }

    .ag-table tbody tr:last-child td:last-child {
        border-radius: 0 0 8px 0;
    }

.table-responsive {
    margin: 0 -0.2rem;
}

th:nth-child(1) {
    width: 30px;
}

th:nth-child(2) {
    width: 60% !important;
}

th:nth-child(3) {
    width: 40% !important;
}

/* ===== إقرار وتعهد ===== */
.ag-agreement-box .ag-alert {
    background: linear-gradient(135deg, rgba(212, 161, 62, 0.04), rgba(11, 79, 108, 0.02)) !important;
    border: 1px solid rgba(212, 161, 62, 0.12) !important;
    border-radius: 16px;
    padding: 0.9rem 1rem;
}

.ag-form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-right: 0;
}

.ag-form-check-input {
    width: 1.4rem;
    height: 1.4rem;
    margin-top: 0.2rem;
    border: 2.5px solid #1f7a9c;
    border-radius: 8px;
    flex-shrink: 0;
    background-color: white;
    transition: all 0.2s;
    cursor: pointer;
    min-width: 1.4rem;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
}

    .ag-form-check-input:checked {
        background-color: #0b4f6c;
        border-color: #0b4f6c;
    }

        .ag-form-check-input:checked::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1rem;
            font-weight: 700;
        }

.ag-form-check-label {
    font-size: 0.9rem;
    color: var(--text-dark);
    line-height: 1.8;
}

    .ag-form-check-label strong {
        color: #0b4f6c;
        font-weight: 800;
        font-size: 1rem;
    }

    .ag-form-check-label p {
        margin-top: 6px;
        margin-bottom: 0;
        font-size: 0.9rem;
        text-align: justify;
    }


/* ============================================================
                   ملاحظة الدفع – معلومات الحساب البنكي
                   ============================================================ */
.payment-note {
    background: linear-gradient(135deg, #fff8e8, #fffcf4);
    border: 1.5px solid #f3d27a;
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

    .payment-note::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        background: #f59e0b;
        border-radius: 0 4px 4px 0;
    }

    .payment-note .note-header {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 0.5rem;
    }

        .payment-note .note-header i {
            color: #f59e0b;
            font-size: 1rem;
        }

        .payment-note .note-header h6 {
            font-size: 1rem;
            font-weight: 800;
            color: #92400e;
            margin: 0;
        }

    .payment-note .note-body {
        font-size: 0.85rem;
        color: var(--text-dark);
        line-height: 1.8;
        padding-right: 0.3rem;
        position: relative;
    }

        .payment-note .note-body .highlight-amount {
            color: var(--green-light);
            font-weight: 800;
            font-size: 0.85rem;
        }

        .payment-note .note-body .highlight-bank {
            color: var(--primary-color);
            font-weight: 700;
        }

        .payment-note .note-body .account-number {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1rem;
            direction: ltr;
        }

            .payment-note .note-body .account-number i {
                color: rgba(255, 255, 255, 0.6);
                font-size: 0.65rem;
                margin-left: 0.3rem;
            }

.note-item {
    position: relative;
    padding-right: 15px; /* مساحة للشرطة */
    margin-bottom: 5px;
}

    .note-item::before {
        color: #f59e0b;
        font-size: 1.2rem;
        line-height: 1.8;
        flex-shrink: 0;
        /**/
        content: "•";
        position: absolute;
        right: 5px;
        top: -5px;
        font-weight: 600;
    }



/* ===== للشاشات الصغيرة جداً ===== */
/*@media (max-width: 380px) {
    .ag-header-main {
        padding: 1.2rem 0.8rem 1rem;
        border-radius: 16px 16px 0 0;
    }

    .ag-step-title {
        font-size: 1.3rem;
    }

    .ag-step-subtitle {
        font-size: 0.9rem;
    }

    .ag-section {
        border-radius: 14px;
    }

    .ag-header {
        padding: 0.7rem 0.8rem;
    }

    .ag-content {
        padding: 0.7rem 0.8rem 0.8rem;
    }

    .ag-list-item {
        font-size: 0.9rem;
        padding: 0.6rem 0.1rem 0.6rem 0.3rem;
    }

    .ag-table {
        font-size: 0.72rem;
    }

        .ag-table thead th,
        .ag-table tbody td {
            font-size: 0.7rem;
            padding: 0.4rem 0.15rem;
        }

    .ag-form-check-label {
        font-size: 0.9rem;
    }

        .ag-form-check-label p {
            font-size: 0.85rem;
        }

    .ag-icon-badge {
        flex: 0 0 36px;
        height: 36px;
        font-size: 1rem;
        border-radius: 12px;
    }

    .ag-title {
        font-size: 1rem;
    }

    .ag-installment-box .ag-installment-title {
        font-size: 0.95rem;
    }

    .ag-installment-box .ag-installment-item {
        font-size: 0.85rem;
    }

    .ag-installment-box .ag-installment-sub {
        font-size: 0.8rem;
    }

    .ag-validation-message {
        font-size: 0.85rem;
        padding: 0.3rem 0.7rem;
    }

    .ag-text-muted {
        font-size: 0.85rem;
    }
}*/

/* تحسين للشاشات المتوسطة */
/*@media (min-width: 401px) and (max-width: 600px) {
    .ag-step-title {
        font-size: 1.5rem;
    }

    .ag-installment-grid {
        grid-template-columns: 1fr 1fr;
    }
}*/

body {
    background: #dce4ec;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}



/* ===== MAIN CONTAINER ===== */
.app-container {
    width: 100%;
    max-width: var(--max-width);
    height: 100vh;
    /*  width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;*/
}

/* ============================================================ */
/* ===== PHONE FRAME ===== */
/* ============================================================ */
.phone-frame {
    height: 100vh;
    background: rgba(240,244,248,.85);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 60px rgba(3,98,128,.08);
    padding-top: var(--header-height);
    padding-bottom: var(--bottom-nav-height);
    box-sizing: border-box;
}

.phone-frame.none {
    padding-top: 0;
    padding-bottom: 0;
}

/* ============================================================ */
/* ===== SCROLLABLE CONTENT ===== */
/* ============================================================ */
.scroll-content {
    height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px 12px;
    box-sizing: border-box;
}
    .scroll-content.none {
        height: 100vh;
    }

    /* ===== Custom Scrollbar ===== */
    .scroll-content::-webkit-scrollbar {
        width: 4px;
    }

    .scroll-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .scroll-content::-webkit-scrollbar-thumb {
        background: var(--secondary-color);
        border-radius: 10px;
    }

.dark-mode .scroll-content::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
}



/* ============================================================ */
/* ===== FIXED HEADER ===== */
/* ============================================================ */
.app-header-container {
    width: 100%;
    /*  background: rgba(240, 244, 248, 0.85);*/
}

.app-header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-width);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 0 16px;
    z-index: 1000;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(3, 98, 128, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    min-height: var(--header-height);
    max-height: var(--header-height);
    transition: all 0.3s ease;
    border-radius: 0 0 32px 32px;
    overflow: hidden;
}

    .app-header .greeting {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }
/* ===== LEFT SECTION ===== */
.greeting .school-logo {
    width: 44px;
    height:44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    padding: 7px;
    flex-shrink: 0;
}

.greeting .info-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.info-wrapper .school-name {
    font-size: 0.85rem;
    font-weight:600;
    color: #fff;
    opacity: 0.85;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.info-wrapper .user-info {
    display: flex;
     flex-direction: row;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.user-info .parent-info {
    display: flex;
    align-items: center;
    gap: 5px;
}

.parent-info .greeting-title {
    color: #fff;
    margin: 0;
    opacity: 0.85;
    font-size: 0.85rem;
    font-weight: 600;
}

.greeting-title .wave {
    display: inline-block;
    animation: wave 2s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(20deg);
    }

    75% {
        transform: rotate(-10deg);
    }
}

.parent-info .role-badge {
    font-size: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.15);
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: 500;
}

.student-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
}

    .student-info i {
        font-size: 0.5rem;
        opacity: 0.7;
    }

    .student-info .student-name {
        font-weight: 600;
        color: #fff;
    }

    .student-info .student-class {
        opacity: 0.8;
    }

/* ===== RIGHT SECTION ===== */
.header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.icon-btn {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #fff;
}

    .icon-btn:hover {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    .icon-btn:active {
        transform: scale(0.92);
    }

.badge-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    background: #F44336;
    color: #fff;
    font-size: 0.45rem;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border: 2px solid var(--primary-color);
    animation: badgePulse 2s ease-in-out infinite;
    box-shadow: 0 2px 10px rgba(244, 67, 54, 0.4);
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.switch-user-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

    .switch-user-icon .sub-icon {
        position: absolute;
        bottom: -3px;
        right: -4px;
        font-size: 0.7rem;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        padding: 2px;
        color: #fff;
        opacity: 1;
        animation: rotateIcon 4s linear infinite;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

@keyframes rotateIcon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ============================================================ */
/* ===== FIXED BOTTOM NAV ===== */
/* ============================================================ */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-width);
    background: rgba(240, 244, 248, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px 0 10px;
    z-index: 1000;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -2px 20px rgba(3, 98, 128, 0.08);
    display: flex;
    justify-content: space-around;
    height: var(--bottom-nav-height);
}

    .bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.55rem;
        color: var(--text-muted);
        cursor: pointer;
        padding: 2px 12px;
        border: none;
        background: transparent;
        position: relative;
        transition: 0.2s;
        text-decoration: none;
    }

        .bottom-nav .nav-item i {
            font-size: 1.2rem;
            margin-bottom: 1px;
            color: var(--text-muted);
            transition: 0.3s;
        }

        .bottom-nav .nav-item.active {
            color: var(--primary-color);
            font-weight: 700;
        }

            .bottom-nav .nav-item.active i {
                color: var(--primary-color);
            }

        .bottom-nav .nav-item:hover i {
            color: var(--secondary-color);
        }

        .bottom-nav .nav-item .badge-nav {
            position: absolute;
            top: -2px;
            right: 4px;
            background: #F44336;
            color: #fff;
            font-size: 0.5rem;
            padding: 1px 6px;
            border-radius: 50%;
            font-weight: 700;
        }


/* ============================================================ */
/* ===== SECTION HEADER ===== */
/* ============================================================ */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0 10px;
}

    .section-header .title {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .section-header .title i {
            color: var(--secondary-color);
            font-size: 1rem;
            animation: iconSpin 4s linear infinite;
        }

@keyframes iconSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.section-header .see-all {
    font-size: 0.6rem;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 3px 14px;
    border-radius: 20px;
    transition: 0.3s;
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.25);
    position: relative;
    overflow: hidden;
}

    .section-header .see-all::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent, rgba(255,255,255,0.15), transparent);
        transform: rotate(45deg);
        transition: 0.6s;
    }

    .section-header .see-all:hover::after {
        left: 100%;
    }

    .section-header .see-all:hover {
        transform: translateX(-2px);
        box-shadow: 0 4px 20px rgba(3, 98, 128, 0.4);
    }

/* ============================================================ */
/* ===== QUICK STATS ===== */
/* ============================================================ */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 8px 0 12px;
}

.quick-stat {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 4px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(3, 98, 128, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: 0.3s;
}

    .quick-stat:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(3, 98, 128, 0.1);
        border-color: var(--secondary-color);
    }

    .quick-stat .number {
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1.2;
    }

        .quick-stat .number.text-primary {
            color: var(--primary-color);
        }

        .quick-stat .number.text-success {
            color: #4CAF50;
        }

        .quick-stat .number.text-warning {
            color: #FF9800;
        }

        .quick-stat .number.text-danger {
            color: #F44336;
        }

        .quick-stat .number.text-info {
            color: var(--secondary-color);
        }

    .quick-stat .label {
        font-size: 0.55rem;
        color: var(--text-muted);
        margin-top: 2px;
    }

    .quick-stat .icon-small {
        font-size: 0.8rem;
        display: block;
        margin-bottom: 2px;
    }

/* ============================================================ */
/* ===== TODAY'S LESSON ===== */
/* ============================================================ */
.today-lesson {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 16px;
    padding: 14px 18px;
    color: #fff;
    margin: 8px 0 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
}

    .today-lesson:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(3, 98, 128, 0.35);
    }

    .today-lesson::after {
        content: '📚';
        position: absolute;
        left: -5px;
        bottom: -15px;
        font-size: 5rem;
        opacity: 0.08;
    }

    .today-lesson .label {
        font-size: 0.6rem;
        text-transform: uppercase;
        opacity: 0.7;
        letter-spacing: 1px;
    }

    .today-lesson .subject {
        font-size: 1.1rem;
        font-weight: 700;
        margin: 2px 0;
    }

    .today-lesson .details {
        font-size: 0.75rem;
        opacity: 0.85;
    }

    .today-lesson .time {
        background: rgba(255, 255, 255, 0.15);
        padding: 2px 14px;
        border-radius: 20px;
        font-size: 0.7rem;
        display: inline-block;
        margin-top: 6px;
    }

/* ============================================================ */
/* ===== SERVICES CARD GRID - 3 COLUMNS ===== */
/* ============================================================ */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}

.service-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 14px 8px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 12px rgba(3, 98, 128, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    animation: cardAppear 0.6s ease forwards;
}

    .service-card:nth-child(1) {
        animation-delay: 0.05s;
    }

    .service-card:nth-child(2) {
        animation-delay: 0.10s;
    }

    .service-card:nth-child(3) {
        animation-delay: 0.15s;
    }

    .service-card:nth-child(4) {
        animation-delay: 0.20s;
    }

    .service-card:nth-child(5) {
        animation-delay: 0.25s;
    }

    .service-card:nth-child(6) {
        animation-delay: 0.30s;
    }

    .service-card:nth-child(7) {
        animation-delay: 0.35s;
    }

    .service-card:nth-child(8) {
        animation-delay: 0.40s;
    }
    .service-card:nth-child(9) {
        animation-delay: 0.45s;
    }
    .service-card:nth-child(10) {
        animation-delay: 0.50s;
    }
    .service-card:nth-child(11) {
        animation-delay: 0.55s;
    }
    .service-card:nth-child(12) {
        animation-delay: 0.60s;
    }
    .service-card:nth-child(13){
        animation-delay: 0.65s;
    }
    .service-card:nth-child(14) {
        animation-delay: 0.70s;
    }
    .service-card:nth-child(15) {
        animation-delay: 0.75s;
    }
    .service-card:nth-child(16) {
        animation-delay: 0.80s;
    }
    .service-card:nth-child(17) {
        animation-delay: 0.85s;
    }
    .service-card:nth-child(18) {
        animation-delay: 0.90s;
    }

@keyframes cardAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-card::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.06;
    transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}

.service-card:hover::after {
    transform: scale(2) translate(-10px, -10px);
    opacity: 0.15;
}

.service-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 40px rgba(3, 98, 128, 0.12);
    border-color: var(--secondary-color);
}

.service-card:active {
    transform: scale(0.94) rotate(2deg);
}

/* ===== Card Background Colors ===== */
.service-card:nth-child(1)::after {
    background: var(--primary-color);
}

.service-card:nth-child(2)::after {
    background: var(--secondary-color);
}

.service-card:nth-child(3)::after {
    background: #4CAF50;
}

.service-card:nth-child(4)::after {
    background: #FF9800;
}

.service-card:nth-child(5)::after {
    background: #9C27B0;
}

.service-card:nth-child(6)::after {
    background: #F44336;
}

.service-card:nth-child(7)::after {
    background: #009688;
}

.service-card:nth-child(8)::after {
    background: #E91E63;
}
.service-card:nth-child(9)::after {
    background: #3F51B5; /* Indigo */
}

.service-card:nth-child(10)::after {
    background: #00BCD4; /* Cyan */
}

.service-card:nth-child(11)::after {
    background: #8BC34A; /* Light Green */
}

.service-card:nth-child(12)::after {
    background: #FFC107; /* Amber */
}

.service-card:nth-child(13)::after {
    background: #795548; /* Brown */
}

.service-card:nth-child(14)::after {
    background: #607D8B; /* Blue Grey */
}

.service-card:nth-child(15)::after {
    background: #673AB7; /* Deep Purple */
}

.service-card:nth-child(16)::after {
    background: #2196F3; /* Blue */
}

.service-card:nth-child(17)::after {
    background: #CDDC39; /* Lime */
}

.service-card:nth-child(18)::after {
    background: #FF5722; /* Deep Orange */
}
/* ===== Shimmer Border ===== */
.service-card .shimmer-border {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, transparent, #fff, transparent);
    background-size: 200% 100%;
    opacity: 0;
    transition: 0.4s;
}

.service-card:hover .shimmer-border {
    opacity: 1;
    animation: shimmerMove 1.5s ease-in-out infinite;
}

@keyframes shimmerMove {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.service-card:nth-child(1) .shimmer-border {
    background: linear-gradient(90deg, transparent, var(--primary-color), var(--secondary-color), transparent);
}

.service-card:nth-child(2) .shimmer-border {
    background: linear-gradient(90deg, transparent, var(--secondary-color), var(--primary-color), transparent);
}

.service-card:nth-child(3) .shimmer-border {
    background: linear-gradient(90deg, transparent, #4CAF50, #81C784, transparent);
}

.service-card:nth-child(4) .shimmer-border {
    background: linear-gradient(90deg, transparent, #FF9800, #FFB74D, transparent);
}

.service-card:nth-child(5) .shimmer-border {
    background: linear-gradient(90deg, transparent, #9C27B0, #CE93D8, transparent);
}

.service-card:nth-child(6) .shimmer-border {
    background: linear-gradient(90deg, transparent, #F44336, #EF9A9A, transparent);
}

.service-card:nth-child(7) .shimmer-border {
    background: linear-gradient(90deg, transparent, #009688, #80CBC4, transparent);
}

.service-card:nth-child(8) .shimmer-border {
    background: linear-gradient(90deg, transparent, #E91E63, #F48FB1, transparent);
}
.service-card:nth-child(9) .shimmer-border {
    background: linear-gradient(90deg, transparent, #3F51B5, #9FA8DA, transparent);
}

.service-card:nth-child(10) .shimmer-border {
    background: linear-gradient(90deg, transparent, #00BCD4, #80DEEA, transparent);
}

.service-card:nth-child(11) .shimmer-border {
    background: linear-gradient(90deg, transparent, #8BC34A, #C5E1A5, transparent);
}

.service-card:nth-child(12) .shimmer-border {
    background: linear-gradient(90deg, transparent, #FFC107, #FFE082, transparent);
}

.service-card:nth-child(13) .shimmer-border {
    background: linear-gradient(90deg, transparent, #795548, #BCAAA4, transparent);
}

.service-card:nth-child(14) .shimmer-border {
    background: linear-gradient(90deg, transparent, #607D8B, #B0BEC5, transparent);
}

.service-card:nth-child(15) .shimmer-border {
    background: linear-gradient(90deg, transparent, #673AB7, #B39DDB, transparent);
}

.service-card:nth-child(16) .shimmer-border {
    background: linear-gradient(90deg, transparent, #2196F3, #90CAF9, transparent);
}

.service-card:nth-child(17) .shimmer-border {
    background: linear-gradient(90deg, transparent, #CDDC39, #E6EE9C, transparent);
}

.service-card:nth-child(18) .shimmer-border {
    background: linear-gradient(90deg, transparent, #FF5722, #FFAB91, transparent);
}

/* ===== Circle Icon ===== */
.circle-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0 auto 4px;
}
    /* ===== Progress Ring SVG ===== */
    .circle-wrapper .progress-ring {
        position: absolute;
        top: -4px;
        left: -4px;
        width: 60px;
        height: 60px;
        transform: rotate(-90deg);
        z-index: 0;
        opacity: 0;
        transition: 0.6s;
    }

.service-card:hover .progress-ring {
    opacity: 1;
}

.circle-wrapper .progress-ring .ring-bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.06);
    stroke-width: 3;
}

.circle-wrapper .progress-ring .ring-fg {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 170;
    stroke-dashoffset: 170;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .progress-ring .ring-fg {
    stroke-dashoffset: 30;
}

.service-card:nth-child(1) .progress-ring .ring-fg {
    stroke: #1A237E;
}

.service-card:nth-child(2) .progress-ring .ring-fg {
    stroke: #00BCD4;
}

.service-card:nth-child(3) .progress-ring .ring-fg {
    stroke: #4CAF50;
}

.service-card:nth-child(4) .progress-ring .ring-fg {
    stroke: #FF9800;
}

.service-card:nth-child(5) .progress-ring .ring-fg {
    stroke: #9C27B0;
}

.service-card:nth-child(6) .progress-ring .ring-fg {
    stroke: #F44336;
}

.service-card:nth-child(7) .progress-ring .ring-fg {
    stroke: #009688;
}

.service-card:nth-child(8) .progress-ring .ring-fg {
    stroke: #E91E63;
}
.service-card:nth-child(9) .progress-ring .ring-fg {
    stroke: #3F51B5;
}

.service-card:nth-child(10) .progress-ring .ring-fg {
    stroke: #00ACC1;
}

.service-card:nth-child(11) .progress-ring .ring-fg {
    stroke: #7CB342;
}

.service-card:nth-child(12) .progress-ring .ring-fg {
    stroke: #FFC107;
}

.service-card:nth-child(13) .progress-ring .ring-fg {
    stroke: #6D4C41;
}

.service-card:nth-child(14) .progress-ring .ring-fg {
    stroke: #546E7A;
}

.service-card:nth-child(15) .progress-ring .ring-fg {
    stroke: #5E35B1;
}

.service-card:nth-child(16) .progress-ring .ring-fg {
    stroke: #1E88E5;
}

.service-card:nth-child(17) .progress-ring .ring-fg {
    stroke: #C0CA33;
}

.service-card:nth-child(18) .progress-ring .ring-fg {
    stroke: #FF7043;
}

.circle-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(3, 98, 128, 0.08);
}

.service-card:hover .circle-icon {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 25px rgba(3, 98, 128, 0.15);
}

/* ===== Circle Colors ===== */
.service-card:nth-child(1) .circle-icon {
    background: linear-gradient(135deg, rgba(3, 98, 128, 0.15), rgba(22, 200, 221, 0.08));
    color: var(--primary-color);
    border-color: rgba(3, 98, 128, 0.15);
}

.service-card:nth-child(2) .circle-icon {
    background: linear-gradient(135deg, rgba(22, 200, 221, 0.15), rgba(3, 98, 128, 0.08));
    color: var(--secondary-color);
    border-color: rgba(22, 200, 221, 0.15);
}

.service-card:nth-child(3) .circle-icon {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(129, 199, 132, 0.08));
    color: #1B5E20;
    border-color: rgba(76, 175, 80, 0.15);
}

.service-card:nth-child(4) .circle-icon {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 183, 77, 0.08));
    color: #E65100;
    border-color: rgba(255, 152, 0, 0.15);
}

.service-card:nth-child(5) .circle-icon {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15), rgba(206, 147, 216, 0.08));
    color: #4A148C;
    border-color: rgba(156, 39, 176, 0.15);
}

.service-card:nth-child(6) .circle-icon {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.15), rgba(239, 154, 154, 0.08));
    color: #880E4F;
    border-color: rgba(244, 67, 54, 0.15);
}

.service-card:nth-child(7) .circle-icon {
    background: linear-gradient(135deg, rgba(0, 150, 136, 0.15), rgba(128, 203, 196, 0.08));
    color: #004D40;
    border-color: rgba(0, 150, 136, 0.15);
}

.service-card:nth-child(8) .circle-icon {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.15), rgba(244, 143, 177, 0.08));
    color: #BF360C;
    border-color: rgba(233, 30, 99, 0.15);
}
.service-card:nth-child(9) .circle-icon {
    background: linear-gradient(135deg, rgba(63, 81, 181, 0.15), rgba(159, 168, 218, 0.08));
    color: #1A237E;
    border-color: rgba(63, 81, 181, 0.15);
}

.service-card:nth-child(10) .circle-icon {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.15), rgba(128, 222, 234, 0.08));
    color: #006064;
    border-color: rgba(0, 188, 212, 0.15);
}

.service-card:nth-child(11) .circle-icon {
    background: linear-gradient(135deg, rgba(139, 195, 74, 0.15), rgba(197, 225, 165, 0.08));
    color: #33691E;
    border-color: rgba(139, 195, 74, 0.15);
}

.service-card:nth-child(12) .circle-icon {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 224, 130, 0.08));
    color: #FF6F00;
    border-color: rgba(255, 193, 7, 0.15);
}

.service-card:nth-child(13) .circle-icon {
    background: linear-gradient(135deg, rgba(121, 85, 72, 0.15), rgba(188, 170, 164, 0.08));
    color: #3E2723;
    border-color: rgba(121, 85, 72, 0.15);
}

.service-card:nth-child(14) .circle-icon {
    background: linear-gradient(135deg, rgba(96, 125, 139, 0.15), rgba(176, 190, 197, 0.08));
    color: #263238;
    border-color: rgba(96, 125, 139, 0.15);
}

.service-card:nth-child(15) .circle-icon {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.15), rgba(179, 157, 219, 0.08));
    color: #311B92;
    border-color: rgba(103, 58, 183, 0.15);
}

.service-card:nth-child(16) .circle-icon {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(144, 202, 249, 0.08));
    color: #0D47A1;
    border-color: rgba(33, 150, 243, 0.15);
}

.service-card:nth-child(17) .circle-icon {
    background: linear-gradient(135deg, rgba(205, 220, 57, 0.15), rgba(230, 238, 156, 0.08));
    color: #827717;
    border-color: rgba(205, 220, 57, 0.15);
}

.service-card:nth-child(18) .circle-icon {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.15), rgba(255, 171, 145, 0.08));
    color: #BF360C;
    border-color: rgba(255, 87, 34, 0.15);
}

/* ===== Pulse Ring ===== */
.circle-wrapper::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 0;
}

.service-card:hover .circle-wrapper::before {
    opacity: 1;
    animation: pulseRing 1.8s ease-in-out infinite;
}

@keyframes pulseRing {
    0% {
        transform: scale(1);
        opacity: 0.4;
    }

    50% {
        transform: scale(1.2);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.service-card:nth-child(1) .circle-wrapper::before {
    border-color: rgba(3, 98, 128, 0.3);
}

.service-card:nth-child(2) .circle-wrapper::before {
    border-color: rgba(22, 200, 221, 0.3);
}

.service-card:nth-child(3) .circle-wrapper::before {
    border-color: rgba(76, 175, 80, 0.3);
}

.service-card:nth-child(4) .circle-wrapper::before {
    border-color: rgba(255, 152, 0, 0.3);
}

.service-card:nth-child(5) .circle-wrapper::before {
    border-color: rgba(156, 39, 176, 0.3);
}

.service-card:nth-child(6) .circle-wrapper::before {
    border-color: rgba(244, 67, 54, 0.3);
}

.service-card:nth-child(7) .circle-wrapper::before {
    border-color: rgba(0, 150, 136, 0.3);
}

.service-card:nth-child(8) .circle-wrapper::before {
    border-color: rgba(233, 30, 99, 0.3);
}
.service-card:nth-child(9) .circle-wrapper::before {
    border-color: rgba(63, 81, 181, 0.3);
}

.service-card:nth-child(10) .circle-wrapper::before {
    border-color: rgba(0, 188, 212, 0.3);
}

.service-card:nth-child(11) .circle-wrapper::before {
    border-color: rgba(139, 195, 74, 0.3);
}

.service-card:nth-child(12) .circle-wrapper::before {
    border-color: rgba(255, 193, 7, 0.3);
}

.service-card:nth-child(13) .circle-wrapper::before {
    border-color: rgba(121, 85, 72, 0.3);
}

.service-card:nth-child(14) .circle-wrapper::before {
    border-color: rgba(96, 125, 139, 0.3);
}

.service-card:nth-child(15) .circle-wrapper::before {
    border-color: rgba(103, 58, 183, 0.3);
}

.service-card:nth-child(16) .circle-wrapper::before {
    border-color: rgba(33, 150, 243, 0.3);
}

.service-card:nth-child(17) .circle-wrapper::before {
    border-color: rgba(205, 220, 57, 0.3);
}

.service-card:nth-child(18) .circle-wrapper::before {
    border-color: rgba(255, 87, 34, 0.3);
}

/* ===== Badge Count ===== */
.badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: linear-gradient(135deg, #F44336, #E53935);
    color: #fff;
    font-size: 0.45rem;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    z-index: 5;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 12px rgba(244, 67, 54, 0.4);
    animation: badgePop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}

@keyframes badgePop {
    0% {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.badge-count.bounce {
    animation: badgeBounce 0.6s ease;
}

@keyframes badgeBounce {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }

    30% {
        transform: scale(1.5) rotate(-10deg);
    }

    60% {
        transform: scale(0.85) rotate(5deg);
    }

    80% {
        transform: scale(1.15) rotate(-3deg);
    }
}

/* ===== Card Text ===== */
.service-card .service-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
    margin-top: 4px;
    transition: color 0.3s ease;
    position: relative;
    z-index: 1;
}

.service-card:hover .service-name {
    color: var(--primary-color);
}

.service-card .service-desc {
    font-size: 0.48rem;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    position: relative;
    z-index: 1;
}

    .service-card .service-desc .dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        animation: dotPulse 2s ease-in-out infinite;
    }

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.5);
    }
}

/* ===== Summary Stats ===== */
.service-card .summary-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 6px;
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 0 2px;
}

    .service-card .summary-stats .stat-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        font-size: 0.75rem;
        color: var(--text-dark);
        background: rgba(3, 98, 128, 0.06);
        padding: 4px 8px;
        border-radius: 8px;
        transition: 0.3s;
        width: 100%;
        border: 1px solid transparent;
    }

.service-card:hover .summary-stats .stat-item {
    background: rgba(3, 98, 128, 0.1);
    border-color: rgba(3, 98, 128, 0.08);
}

.service-card .summary-stats .stat-item i {
    font-size: 0.7rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.service-card .summary-stats .stat-item .num {
    font-weight: 800;
    font-size: 0.8rem;
    margin: 0 1px;
    letter-spacing: 0.5px;
}

.service-card .summary-stats .stat-item .unit {
    font-size: 0.5rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ===== Stat Item Colors ===== */
.service-card .summary-stats .stat-item.good .num {
    color: #2E7D32;
}

.service-card .summary-stats .stat-item.good i {
    color: #4CAF50;
}

.service-card .summary-stats .stat-item.bad .num {
    color: #C62828;
}

.service-card .summary-stats .stat-item.bad i {
    color: #F44336;
}

.service-card .summary-stats .stat-item.info .num {
    color: var(--primary-color);
}

.service-card .summary-stats .stat-item.info i {
    color: var(--secondary-color);
}

.service-card .summary-stats .stat-item.warning .num {
    color: #E65100;
}

.service-card .summary-stats .stat-item.warning i {
    color: #FF9800;
}

.service-card .summary-stats .stat-item.purple .num {
    color: #4A148C;
}

.service-card .summary-stats .stat-item.purple i {
    color: #9C27B0;
}

.service-card .summary-stats .stat-item.success .num {
    color: #1B5E20;
}

.service-card .summary-stats .stat-item.success i {
    color: #4CAF50;
}

.service-card .summary-stats .stat-item.primary .num {
    color: var(--primary-color);
}

.service-card .summary-stats .stat-item.primary i {
    color: var(--secondary-color);
}

/* ===== Dot Colors ===== */
.service-card:nth-child(1) .service-desc .dot {
    background: var(--primary-color);
}

.service-card:nth-child(2) .service-desc .dot {
    background: var(--secondary-color);
}

.service-card:nth-child(3) .service-desc .dot {
    background: #4CAF50;
}

.service-card:nth-child(4) .service-desc .dot {
    background: #FF9800;
}

.service-card:nth-child(5) .service-desc .dot {
    background: #9C27B0;
}

.service-card:nth-child(6) .service-desc .dot {
    background: #F44336;
}

.service-card:nth-child(7) .service-desc .dot {
    background: #009688;
}

.service-card:nth-child(8) .service-desc .dot {
    background: #E91E63;
}
.service-card:nth-child(9) .service-desc .dot {
    background: #3F51B5;
}

.service-card:nth-child(10) .service-desc .dot {
    background: #00BCD4;
}

.service-card:nth-child(11) .service-desc .dot {
    background: #8BC34A;
}

.service-card:nth-child(12) .service-desc .dot {
    background: #FFC107;
}

.service-card:nth-child(13) .service-desc .dot {
    background: #795548;
}

.service-card:nth-child(14) .service-desc .dot {
    background: #607D8B;
}

.service-card:nth-child(15) .service-desc .dot {
    background: #673AB7;
}

.service-card:nth-child(16) .service-desc .dot {
    background: #2196F3;
}

.service-card:nth-child(17) .service-desc .dot {
    background: #CDDC39;
}

.service-card:nth-child(18) .service-desc .dot {
    background: #FF5722;
}


/* ============================================================ */
/* ===== INFO CARDS ===== */
/* ============================================================ */
.info-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.06);
    transition: 0.3s;
}

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.1);
    }

    .info-card .card-title {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-dark);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .info-card .card-title .badge-status {
            font-size: 0.55rem;
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: 500;
        }

/* ===== Level Display ===== */
.level-display {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .level-display .level-icon {
        font-size: 2.2rem;
    }

    .level-display .level-info .level-name {
        font-weight: 700;
        font-size: 1rem;
    }

    .level-display .level-info .level-desc {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

.level-badge {
    padding: 2px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    display: inline-block;
}

.level-excellent {
    background: linear-gradient(135deg, #4CAF50, #66BB6A);
    color: #fff;
}

.level-good {
    background: linear-gradient(135deg, #8BC34A, #9CCC65);
    color: #fff;
}

.level-average {
    background: linear-gradient(135deg, #FF9800, #FFA726);
    color: #fff;
}

/* ===== Progress Bar ===== */
.progress-custom {
    height: 6px;
    background: rgba(3, 98, 128, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 4px;
}

    .progress-custom .progress-fill {
        height: 100%;
        border-radius: 10px;
        transition: width 0.8s ease;
    }

/* ===== Behavior Items ===== */
.behavior-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(3, 98, 128, 0.06);
}

    .behavior-item:last-child {
        border-bottom: none;
    }

    .behavior-item .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

        .behavior-item .dot.green {
            background: #4CAF50;
        }

        .behavior-item .dot.yellow {
            background: #FFC107;
        }

        .behavior-item .dot.red {
            background: #F44336;
        }

    .behavior-item .b-text {
        flex: 1;
        font-size: 0.8rem;
    }

    .behavior-item .b-badge {
        font-size: 0.6rem;
    }

/* ===== Payment Row ===== */
.payment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(3, 98, 128, 0.06);
}

    .payment-row:last-child {
        border-bottom: none;
    }

    .payment-row .p-info .p-name {
        font-weight: 600;
        font-size: 0.85rem;
    }

    .payment-row .p-info .p-date {
        font-size: 0.65rem;
        color: var(--text-muted);
    }

    .payment-row .p-amount {
        font-weight: 700;
        font-size: 0.9rem;
    }

/* ===== Complaint Buttons ===== */
.complaint-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.complaint-btn {
    padding: 12px;
    border-radius: 12px;
    border: 2px dashed rgba(3, 98, 128, 0.15);
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.5);
}

    .complaint-btn:hover {
        border-color: var(--secondary-color);
        background: rgba(22, 200, 221, 0.08);
    }

    .complaint-btn:active {
        transform: scale(0.95);
    }

    .complaint-btn .icon {
        font-size: 1.6rem;
        display: block;
    }

    .complaint-btn .text {
        font-size: 0.7rem;
        font-weight: 600;
        margin-top: 2px;
        color: var(--text-dark);
    }

/* ============================================================ */
/* ===== TOAST ===== */
/* ============================================================ */
.toast-container-custom {
    position: fixed;
    top: calc(var(--header-height) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: calc(var(--max-width) - 20px);
}

    .toast-container-custom .toast-custom {
        background: var(--primary-color);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        color: #fff;
        padding: 10px 18px;
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(3, 98, 128, 0.25);
        animation: toastIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.8rem;
        border-right: 4px solid var(--secondary-color);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .toast-container-custom .toast-custom .close-toast {
            margin-right: auto;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 0.7rem;
            transition: 0.3s;
        }

            .toast-container-custom .toast-custom .close-toast:hover {
                color: #fff;
                transform: rotate(90deg);
            }

        .toast-container-custom .toast-custom i {
            color: var(--secondary-color);
        }

@keyframes toastIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================ */
/* ===== BUTTON OVERRIDES ===== */
/* ============================================================ */
.btn-primary-custom {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    color: #fff;
    border-radius: 25px;
    font-size: 0.8rem;
    padding: 6px;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(3, 98, 128, 0.25);
    width: 100%;
}

    .btn-primary-custom:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 25px rgba(3, 98, 128, 0.35);
        color: #fff;
    }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
.dark-mode {
    background: #0d1a26;
}

    .dark-mode .app-header {
        background: rgba(13, 26, 38, 0.92);
        border-color: rgba(255, 255, 255, 0.05);
    }

    .dark-mode .bottom-nav {
        background: rgba(13, 26, 38, 0.92);
        border-color: rgba(255, 255, 255, 0.05);
    }

    .dark-mode .phone-frame {
        background: rgba(13, 26, 38, 0.9);
        border-color: rgba(255, 255, 255, 0.05);
    }

    .dark-mode .app-header .greeting h5 {
        color: #e0e8f0;
    }

    .dark-mode .app-header .greeting small {
        color: #8a9aaa;
    }

    .dark-mode .app-header .header-actions .icon-btn {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        color: #e0e8f0;
    }

    .dark-mode .quick-stat {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        color: #e0e8f0;
    }

        .dark-mode .quick-stat .label {
            color: #8a9aaa;
        }

    .dark-mode .section-header .title {
        color: #e0e8f0;
    }

    .dark-mode .service-card {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
    }

        .dark-mode .service-card .service-name {
            color: #e0e8f0;
        }

        .dark-mode .service-card:hover .service-name {
            color: var(--secondary-color);
        }

        .dark-mode .service-card .service-desc {
            color: #8a9aaa;
        }

        .dark-mode .service-card .summary-stats .stat-item {
            color: #e0e8f0;
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.05);
        }

            .dark-mode .service-card .summary-stats .stat-item .unit {
                color: #8a9aaa;
            }

            .dark-mode .service-card .summary-stats .stat-item .num {
                color: #e0e8f0;
            }

            .dark-mode .service-card .summary-stats .stat-item.good .num {
                color: #66BB6A;
            }

            .dark-mode .service-card .summary-stats .stat-item.bad .num {
                color: #EF5350;
            }

            .dark-mode .service-card .summary-stats .stat-item.info .num {
                color: var(--secondary-color);
            }

            .dark-mode .service-card .summary-stats .stat-item.warning .num {
                color: #FFA726;
            }

            .dark-mode .service-card .summary-stats .stat-item.purple .num {
                color: #AB47BC;
            }

            .dark-mode .service-card .summary-stats .stat-item.success .num {
                color: #66BB6A;
            }

            .dark-mode .service-card .summary-stats .stat-item.primary .num {
                color: var(--secondary-color);
            }

    .dark-mode .badge-count {
        border-color: #0d1a26;
    }

    .dark-mode .info-card {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        color: #e0e8f0;
    }

        .dark-mode .info-card .card-title {
            color: #e0e8f0;
        }

    .dark-mode .payment-row {
        border-color: rgba(255, 255, 255, 0.05);
    }

        .dark-mode .payment-row .p-info .p-date {
            color: #8a9aaa;
        }

    .dark-mode .complaint-btn {
        border-color: rgba(255, 255, 255, 0.1);
        background: rgba(20, 40, 55, 0.3);
    }

        .dark-mode .complaint-btn .text {
            color: #e0e8f0;
        }

        .dark-mode .complaint-btn:hover {
            border-color: var(--secondary-color);
            background: rgba(22, 200, 221, 0.15);
        }

    .dark-mode .behavior-item {
        border-color: rgba(255, 255, 255, 0.05);
    }

    .dark-mode .bottom-nav .nav-item {
        color: #8a9aaa;
    }

        .dark-mode .bottom-nav .nav-item i {
            color: #8a9aaa;
        }

        .dark-mode .bottom-nav .nav-item.active {
            color: var(--secondary-color);
        }

            .dark-mode .bottom-nav .nav-item.active i {
                color: var(--secondary-color);
            }

    .dark-mode .level-display .level-info .level-desc {
        color: #8a9aaa;
    }

    .dark-mode .today-lesson {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
    }

    .dark-mode .section-header .see-all {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

    .dark-mode .btn-primary-custom {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

    /* Dark mode circle colors */
    .dark-mode .service-card:nth-child(1) .circle-icon {
        background: linear-gradient(135deg, rgba(3, 98, 128, 0.3), rgba(22, 200, 221, 0.15));
        color: var(--secondary-color);
        border-color: rgba(22, 200, 221, 0.2);
    }

    .dark-mode .service-card:nth-child(2) .circle-icon {
        background: linear-gradient(135deg, rgba(22, 200, 221, 0.3), rgba(3, 98, 128, 0.15));
        color: var(--secondary-color);
        border-color: rgba(22, 200, 221, 0.2);
    }

    .dark-mode .service-card:nth-child(3) .circle-icon {
        background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(129, 199, 132, 0.15));
        color: #a5d6a7;
        border-color: rgba(129, 199, 132, 0.2);
    }

    .dark-mode .service-card:nth-child(4) .circle-icon {
        background: linear-gradient(135deg, rgba(255, 152, 0, 0.3), rgba(255, 183, 77, 0.15));
        color: #ffcc80;
        border-color: rgba(255, 183, 77, 0.2);
    }

    .dark-mode .service-card:nth-child(5) .circle-icon {
        background: linear-gradient(135deg, rgba(156, 39, 176, 0.3), rgba(206, 147, 216, 0.15));
        color: #ce93d8;
        border-color: rgba(206, 147, 216, 0.2);
    }

    .dark-mode .service-card:nth-child(6) .circle-icon {
        background: linear-gradient(135deg, rgba(244, 67, 54, 0.3), rgba(239, 154, 154, 0.15));
        color: #f48fb1;
        border-color: rgba(239, 154, 154, 0.2);
    }

    .dark-mode .service-card:nth-child(7) .circle-icon {
        background: linear-gradient(135deg, rgba(0, 150, 136, 0.3), rgba(128, 203, 196, 0.15));
        color: #80cbc4;
        border-color: rgba(128, 203, 196, 0.2);
    }

    .dark-mode .service-card:nth-child(8) .circle-icon {
        background: linear-gradient(135deg, rgba(233, 30, 99, 0.3), rgba(244, 143, 177, 0.15));
        color: #ffab91;
        border-color: rgba(244, 143, 177, 0.2);
    }
    .dark-mode .service-card:nth-child(9) .circle-icon {
        background: linear-gradient(135deg, rgba(63, 81, 181, 0.3), rgba(159, 168, 218, 0.15));
        color: #c5cae9;
        border-color: rgba(159, 168, 218, 0.2);
    }

    .dark-mode .service-card:nth-child(10) .circle-icon {
        background: linear-gradient(135deg, rgba(0, 188, 212, 0.3), rgba(128, 222, 234, 0.15));
        color: #b2ebf2;
        border-color: rgba(128, 222, 234, 0.2);
    }

    .dark-mode .service-card:nth-child(11) .circle-icon {
        background: linear-gradient(135deg, rgba(139, 195, 74, 0.3), rgba(197, 225, 165, 0.15));
        color: #dcedc8;
        border-color: rgba(197, 225, 165, 0.2);
    }

    .dark-mode .service-card:nth-child(12) .circle-icon {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 224, 130, 0.15));
        color: #ffe082;
        border-color: rgba(255, 224, 130, 0.2);
    }

    .dark-mode .service-card:nth-child(13) .circle-icon {
        background: linear-gradient(135deg, rgba(121, 85, 72, 0.3), rgba(188, 170, 164, 0.15));
        color: #d7ccc8;
        border-color: rgba(188, 170, 164, 0.2);
    }

    .dark-mode .service-card:nth-child(14) .circle-icon {
        background: linear-gradient(135deg, rgba(96, 125, 139, 0.3), rgba(176, 190, 197, 0.15));
        color: #cfd8dc;
        border-color: rgba(176, 190, 197, 0.2);
    }

    .dark-mode .service-card:nth-child(15) .circle-icon {
        background: linear-gradient(135deg, rgba(103, 58, 183, 0.3), rgba(179, 157, 219, 0.15));
        color: #d1c4e9;
        border-color: rgba(179, 157, 219, 0.2);
    }

    .dark-mode .service-card:nth-child(16) .circle-icon {
        background: linear-gradient(135deg, rgba(33, 150, 243, 0.3), rgba(144, 202, 249, 0.15));
        color: #bbdefb;
        border-color: rgba(144, 202, 249, 0.2);
    }

    .dark-mode .service-card:nth-child(17) .circle-icon {
        background: linear-gradient(135deg, rgba(205, 220, 57, 0.3), rgba(230, 238, 156, 0.15));
        color: #e6ee9c;
        border-color: rgba(230, 238, 156, 0.2);
    }

    .dark-mode .service-card:nth-child(18) .circle-icon {
        background: linear-gradient(135deg, rgba(255, 87, 34, 0.3), rgba(255, 171, 145, 0.15));
        color: #ffccbc;
        border-color: rgba(255, 171, 145, 0.2);
    }

    .dark-mode .service-card::after {
        opacity: 0.04;
    }

    .dark-mode .service-card .shimmer-border {
        opacity: 0.2;
    }

    .dark-mode .service-card:hover .shimmer-border {
        opacity: 0.6;
    }

/* ============================================================ */
/* ===== RESPONSIVE ===== */
/* ============================================================ */
@media (max-width: 360px) {
    : root {
        --header-height: 58px;
        --bottom-nav-height: 54px;
    }

    .quick-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .quick-stat .number {
        font-size: 0.9rem;
    }

    .quick-stat .label {
        font-size: 0.45rem;
    }

    .services-grid {
        gap: 6px;
    }

    .service-card {
        padding: 10px 4px 8px;
        border-radius: 12px;
    }

    .circle-wrapper {
        width: 40px;
        height: 40px;
    }

    .circle-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .service-card .service-name {
        font-size: 0.55rem;
    }

    .service-card .service-desc {
        font-size: 0.4rem;
    }

    .service-card .summary-stats .stat-item {
        font-size: 0.6rem;
        padding: 2px 4px;
    }

        .service-card .summary-stats .stat-item .num {
            font-size: 0.65rem;
        }

        .service-card .summary-stats .stat-item .unit {
            font-size: 0.4rem;
        }

    .badge-count {
        width: 15px;
        height: 15px;
        font-size: 0.35rem;
        top: -3px;
        right: -3px;
    }

    .section-header .title {
        font-size: 0.75rem;
    }

    .section-header .see-all {
        font-size: 0.45rem;
        padding: 2px 8px;
    }

    .today-lesson .subject {
        font-size: 0.9rem;
    }

    .level-display .level-icon {
        font-size: 1.8rem;
    }

    .level-display .level-info .level-name {
        font-size: 0.85rem;
    }

    .complaint-grid {
        grid-template-columns: 1fr;
    }

    .app-header .greeting h5 {
        font-size: 0.85rem;
    }

    .app-header .greeting small {
        font-size: 0.55rem;
    }
}

@media (min-width: 361px) and (max-width: 420px) {
    .circle-wrapper {
        width: 46px;
        height: 46px;
    }

    .circle-icon {
        width: 46px;
        height: 46px;
        font-size: 1.2rem;
    }

    .service-card .service-name {
        font-size: 0.6rem;
    }

    .service-card .service-desc {
        font-size: 0.44rem;
    }

    .service-card .summary-stats .stat-item {
        font-size: 0.65rem;
        padding: 3px 6px;
    }

        .service-card .summary-stats .stat-item .num {
            font-size: 0.7rem;
        }

    .badge-count {
        width: 17px;
        height: 17px;
        font-size: 0.4rem;
    }
}

/*@media (min-width: 421px) {
    body {*/
      /*  background: #dce4ec;*/
      /*background:orange;
        padding-top: var(--header-height);
        padding-bottom: var(--bottom-nav-height);
    }

    .phone-frame {
        border-radius: 0;
        min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height));
        max-height: calc(100vh - var(--header-height) - var(--bottom-nav-height));*/
       /* box-shadow: 0 0 60px rgba(3, 98, 128, 0.12);*/
        /*overflow-y: auto;
    }

    .dark-mode body {
        background: #0a151f;
    }
}*/

@media (max-width: 768px) {
}



/* ============================================================ */
/* ===== LOGIN OVERLAY ===== */
/* ============================================================ */

body.login-page {
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
}

    body.login-page .phone-frame {
        min-height: 100vh;
    }

/* ===== LOGIN CONTAINER ===== */
.login-container {
    max-width: var(--max-width);
}
/* ===== LOGIN CARD ===== */
.login-card {
    background: rgba(240, 244, 248, 0.85);
    padding: 15px;
    position: relative;
    max-width: var(--max-width);
    margin: auto;
}

/* ===== LOGO ===== */
.logo-section {
    text-align: center;
    margin-bottom: 28px;
}

    .logo-section .logo-icon {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 12px;
        font-size: 2.2rem;
        color: #fff;
        box-shadow: 0 8px 30px rgba(3, 98, 128, 0.3);
        cursor: pointer;
        transition: 0.3s;
        animation: logoPulse 3s ease-in-out infinite;
    }

        .logo-section .logo-icon:hover {
            transform: scale(1.05);
        }

@keyframes logoPulse {
    0%, 100% {
        box-shadow: 0 8px 30px rgba(3, 98, 128, 0.3);
    }

    50% {
        box-shadow: 0 8px 50px rgba(3, 98, 128, 0.5);
    }
}

.logo-section .logo-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: -0.5px;
}

.logo-section .logo-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ===== TABS ===== */
.login-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    background: rgba(3, 98, 128, 0.06);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 24px;
}

    .login-tabs .tab-btn {
        padding: 10px 6px;
        border: none;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: transparent;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .login-tabs .tab-btn i {
            font-size: 0.8rem;
        }

        .login-tabs .tab-btn:hover {
            color: var(--primary-color);
            background: rgba(3, 98, 128, 0.04);
        }

        .login-tabs .tab-btn.active {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            box-shadow: 0 4px 20px rgba(3, 98, 128, 0.3);
        }

            .login-tabs .tab-btn.active i {
                color: #fff;
            }

/* ===== FORM ===== */
.login-form {
    position: relative;
}


/* ============================================================ */
/* ===== FORM SECTION ===== */
/* ============================================================ */
.form-section {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    margin-bottom: 14px;
}

    .form-section .section-title {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--text-dark);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .form-section .section-title i {
            color: var(--primary-color);
            font-size: 0.7rem;
        }



     .form-group {
        margin-bottom: 16px;
    }

        .form-group label {
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

            .form-group label i {
                color: var(--secondary-color);
                font-size: 0.8rem;
            }

     .form-control {
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 0.85rem;
        border: 2px solid rgba(3, 98, 128, 0.08);
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        color: var(--text-dark);
        width: 100%;
    }

         .form-control:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 4px rgba(22, 200, 221, 0.15);
            background: rgba(255, 255, 255, 0.7);
            outline: none;
        }

        .form-control::placeholder {
            color: #b0b8c8;
            font-size: 0.8rem;
        }

         .form-control.icon-input {
            padding-right: 40px;
        }

    .input-icon-wrapper {
        position: relative;
    }

        .input-icon-wrapper .input-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 0.85rem;
            pointer-events: none;
        }

     .btn-toggle-password {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        border: none;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.8rem;
        cursor: pointer;
        transition: 0.3s;
    }

        .btn-toggle-password:hover {
            color: var(--primary-color);
        }

    /* ===== VALIDATION ===== */
   .validation-message {
        color: #F44336;
        font-size: 0.75rem;
        margin-top: 4px;
        display: block;
    }
.required {
    color: #F44336;
    font-size: 0.85rem;
}


/* ===== SWITCH ===== */
.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0 24px;
}

.switch-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ccc;
        transition: 0.4s;
        border-radius: 34px;
    }

        .switch .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background: white;
            transition: 0.4s;
            border-radius: 50%;
        }

    .switch input:checked + .slider {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    }

        .switch input:checked + .slider:before {
            transform: translateX(20px);
        }

    .switch .slider.round {
        border-radius: 34px;
    }

        .switch .slider.round:before {
            border-radius: 50%;
        }

.switch-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    cursor: pointer;

}

.forgot-link {
    font-size: 0.7rem;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .forgot-link:hover {
        color: var(--primary-color);
        text-decoration: underline;
    }

/* ===== SUBMIT BUTTON ===== */
.btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

    .btn:hover {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 35px rgba(3, 98, 128, 0.4);
    }

    .btn:active {
        color: #fff;
        transform: scale(0.96);
    }

    .btn i {
        font-size: 1rem;
        transition: 0.3s;
    }

    .btn:hover i {
        transform: translateX(-4px);
    }

/* ===== FOOTER ===== */
.login-footer {
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(3, 98, 128, 0.06);
}

    .login-footer .copyright {
        font-size: 0.6rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .login-footer .copyright .brand {
            color: var(--primary-color);
            font-weight: 700;
        }

            .login-footer .copyright .brand i {
                color: var(--secondary-color);
            }

    .login-footer .version {
        font-size: 0.5rem;
        color: #b0b8c8;
        margin-top: 4px;
    }

/* ===== DARK MODE ===== */
body.dark-mode .login-overlay {
    background: rgba(0, 0, 0, 0.7);
}

body.dark-mode .login-card {
    background: rgba(20, 40, 55, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .logo-section .logo-title {
    color: #e0e8f0;
}

body.dark-mode .logo-section .logo-subtitle {
    color: #8a9aaa;
}

body.dark-mode .login-tabs {
    background: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .login-tabs .tab-btn {
        color: #8a9aaa;
    }

        body.dark-mode .login-tabs .tab-btn:hover {
            color: var(--secondary-color);
            background: rgba(255, 255, 255, 0.05);
        }

body.dark-mode  .form-group label {
    color: #e0e8f0;
}

body.dark-mode  .form-control {
    background: rgba(20, 40, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
    color: #e0e8f0;
}

    body.dark-mode  .form-control:focus {
        border-color: var(--secondary-color);
        background: rgba(20, 40, 55, 0.7);
    }

    body.dark-mode  .form-control::placeholder {
        color: #6a7a8a;
    }

body.dark-mode .switch-label {
    color: #8a9aaa;
}

body.dark-mode .login-footer .copyright {
    color: #6a7a8a;
}

    body.dark-mode .login-footer .copyright .brand {
        color: var(--secondary-color);
    }

body.dark-mode .login-footer .version {
    color: #4a5a6a;
}

body.dark-mode .loading-overlay {
    background: rgba(0, 0, 0, 0.6);
}

    body.dark-mode .loading-overlay .loading-text {
        color: var(--secondary-color);
    }

body.dark-mode .login-close-btn {
    color: #8a9aaa;
}

    body.dark-mode .login-close-btn:hover {
        background: rgba(255, 255, 255, 0.05);
    }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {

    .login-card {
        border-radius: 0px;
        box-shadow: none;
        border: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 380px) {
    .login-card {
        padding: 24px 16px 20px;
    }

    .logo-section .logo-icon {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }

    .logo-section .logo-title {
        font-size: 1.3rem;
    }

    .login-tabs .tab-btn {
        font-size: 0.65rem;
        padding: 8px 4px;
    }

        .login-tabs .tab-btn i {
            font-size: 0.65rem;
        }

    .btn {
        font-size: 0.85rem;
        padding: 10px;
    }

    .switch-wrapper .switch-label {
        font-size: 0.65rem;
    }

    .forgot-link {
        font-size: 0.6rem;
    }
}

@media (max-height: 700px) {
    .login-card {
        padding: 20px 16px 16px;
    }

    .logo-section {
        margin-bottom: 16px;
    }

        .logo-section .logo-icon {
            width: 56px;
            height: 56px;
            font-size: 1.6rem;
            margin-bottom: 8px;
        }

        .logo-section .logo-title {
            font-size: 1.2rem;
        }

     .form-group {
        margin-bottom: 10px;
    }

    .form-options {
        margin: 12px 0 16px;
    }

    .login-footer {
        margin-top: 16px;
        padding-top: 12px;
    }

    .login-tabs {
        margin-bottom: 16px;
    }

        .login-tabs .tab-btn {
            padding: 6px 4px;
            font-size: 0.65rem;
        }
}

/* ===== SCROLLBAR ===== */
.login-container::-webkit-scrollbar {
    width: 3px;
}

.login-container::-webkit-scrollbar-track {
    background: transparent;
}

.login-container::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}


/* ============================================================ */
/* ===== VIEW TABS ===== */
/* ============================================================ */
.view-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: rgba(3, 98, 128, 0.06);
    border-radius: 14px;
    padding: 4px;
    margin: 12px 0 10px;
}

    .view-tabs .tab-btn {
        padding: 8px 6px;
        border: none;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: transparent;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

        .view-tabs .tab-btn i {
            font-size: 0.7rem;
        }

        .view-tabs .tab-btn:hover {
            color: var(--primary-color);
            background: rgba(3, 98, 128, 0.04);
        }

        .view-tabs .tab-btn.active {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            box-shadow: 0 4px 20px rgba(3, 98, 128, 0.3);
        }

            .view-tabs .tab-btn.active i {
                color: #fff;
            }

/* ============================================================ */
/* ===== FILTERS SECTION ===== */
/* ============================================================ */
.filters-section {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 100px;
    position: relative;
}

    .filter-group label {
        font-size: 0.55rem;
        font-weight: 600;
        color: var(--text-muted);
        display: block;
        margin-bottom: 2px;
    }

    .filter-group select {
        width: 100%;
        padding: 6px 10px;
        border-radius: 10px;
        border: 2px solid rgba(3, 98, 128, 0.08);
        background: var(--white-glass);
        backdrop-filter: blur(10px);
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--text-dark);
        cursor: pointer;
        transition: 0.3s;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237a8a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: left 10px center;
        padding-left: 30px;
    }

        .filter-group select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(22, 200, 221, 0.15);
            outline: none;
        }

        .filter-group select option {
            font-family: 'Tajawal', sans-serif;
        }
/* ============================================================ */
/* ===== SUMMARY CARD ===== */
/* ============================================================ */
.summary-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.25);
}

    .summary-card::after {
        content: '📊';
        position: absolute;
        left: -10px;
        bottom: -20px;
        font-size: 5rem;
        opacity: 0.08;
    }

    .summary-card .label {
        font-size: 0.65rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .summary-card .value {
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.1;
    }

    .summary-card .details {
        display: flex;
        gap: 14px;
        margin-top: 6px;
        flex-wrap: wrap;
    }

        .summary-card .details .item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.65rem;
            opacity: 0.85;
        }

            .summary-card .details .item i {
                font-size: 0.55rem;
            }

    .summary-card .badge {
        background: rgba(255, 255, 255, 0.15);
        padding: 2px 14px;
        border-radius: 20px;
        font-size: 0.6rem;
        font-weight: 600;
        display: inline-block;
        margin-top: 4px;
    }
        .summary-card .badge.excellent {
            background: rgba(34, 197, 94, 0.5);
        }
        .summary-card .badge.good {
            background: rgba(59, 130, 246, 0.5);
        }
        .summary-card .badge.average {
            background: rgba(245, 158, 11, 0.5);
        }
        .summary-card .badge.weak {
            background: rgba(239, 68, 68, 0.5);
        }

/* ============================================================ */
/* ===== SUBJECT CARDS ===== */
/* ============================================================ */
.subject-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
}

    .subject-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

/* ===== SUBJECT HEADER ===== */
.subject-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.subject-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    position: relative;
}

    .subject-icon.default {
        background: #e9ecef !important;
        color: #6c757d !important;
    }
    .subject-icon.blue {
        background: #e3f2fd;
        color: #0d47a1;
    }

    .subject-icon.green {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .subject-icon.orange {
        background: #fff3e0;
        color: #e65100;
    }

    .subject-icon.purple {
        background: #f3e5f5;
        color: #4a148c;
    }

    .subject-icon.red {
        background: #fce4ec;
        color: #b71c1c;
    }

    .subject-icon.teal {
        background: #e0f2f1;
        color: #004d40;
    }

    .subject-icon.pink {
        background: #fce4ec;
        color: #880e4f;
    }

    .subject-icon.amber {
        background: #fff8e1;
        color: #bf360c;
    }

    .subject-icon.pink {
        background: #fce4ec;
        color: #880e4f;
    }

    .subject-icon.cyan {
        background: #e0f7fa;
        color: #006064;
    }

    .subject-icon.brown {
        background: #efebe9;
        color: #4e342e;
    }

    .subject-icon.indigo {
        background: #e8eaf6;
        color: #1a237e;
    }

    .subject-icon.gold {
        background: #fff8e1;
        color: #bf360c;
    }

    .subject-icon.islamic {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .subject-icon.lime {
        background: #f1f8e9;
        color: #33691e;
    }

    .subject-icon.health {
        background: #fce4ec;
        color: #b71c1c;
    }

    .subject-icon.quran {
        background: #f3e5f5;
        color: #4a148c;
    }

    .subject-icon.bio {
        background: #e0f2f1;
        color: #004d40;
    }

    .subject-icon.economy {
        background: #e3f2fd;
        color: #0d47a1;
    }

    .subject-icon.physics {
        background: #f3e5f5;
        color: #6a1b9a;
    }

    .subject-icon.chemistry {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .subject-icon.philosophy {
        background: #fce4ec;
        color: #880e4f;
    }

body.dark-mode .subject-icon.default {
    background: rgba(108, 117, 125, 0.15) !important;
    color: #8a9aaa !important;
}
body.dark-mode .subject-icon.blue {
    background: rgba(26, 35, 126, 0.3);
    color: #90caf9;
}

body.dark-mode .subject-icon.green {
    background: rgba(27, 94, 32, 0.3);
    color: #a5d6a7;
}

body.dark-mode .subject-icon.orange {
    background: rgba(230, 81, 0, 0.3);
    color: #ffcc80;
}

body.dark-mode .subject-icon.purple {
    background: rgba(74, 20, 140, 0.3);
    color: #ce93d8;
}

body.dark-mode .subject-icon.red {
    background: rgba(183, 28, 28, 0.3);
    color: #ef9a9a;
}

body.dark-mode .subject-icon.teal {
    background: rgba(0, 77, 64, 0.3);
    color: #80cbc4;
}

body.dark-mode .subject-icon.pink {
    background: rgba(136, 14, 79, 0.3);
    color: #f48fb1;
}

body.dark-mode .subject-icon.amber {
    background: rgba(191, 54, 12, 0.3);
    color: #ffab91;
}

body.dark-mode .subject-icon.pink {
    background: rgba(136, 14, 79, 0.3);
    color: #f48fb1;
}

body.dark-mode .subject-icon.cyan {
    background: rgba(0, 96, 100, 0.3);
    color: #80cbc4;
}

body.dark-mode .subject-icon.brown {
    background: rgba(78, 52, 46, 0.3);
    color: #a1887f;
}

body.dark-mode .subject-icon.indigo {
    background: rgba(26, 35, 126, 0.3);
    color: #9fa8da;
}

body.dark-mode .subject-icon.gold {
    background: rgba(191, 54, 12, 0.3);
    color: #ffab91;
}

body.dark-mode .subject-icon.islamic {
    background: rgba(27, 94, 32, 0.3);
    color: #a5d6a7;
}

body.dark-mode .subject-icon.lime {
    background: rgba(51, 105, 30, 0.3);
    color: #c5e1a5;
}

body.dark-mode .subject-icon.health {
    background: rgba(183, 28, 28, 0.3);
    color: #ef9a9a;
}

body.dark-mode .subject-icon.quran {
    background: rgba(74, 20, 140, 0.3);
    color: #ce93d8;
}

body.dark-mode .subject-icon.bio {
    background: rgba(0, 77, 64, 0.3);
    color: #80cbc4;
}

body.dark-mode .subject-icon.economy {
    background: rgba(13, 71, 161, 0.3);
    color: #90caf9;
}

body.dark-mode .subject-icon.physics {
    background: rgba(106, 27, 154, 0.3);
    color: #ce93d8;
}

body.dark-mode .subject-icon.chemistry {
    background: rgba(27, 94, 32, 0.3);
    color: #a5d6a7;
}

body.dark-mode .subject-icon.philosophy {
    background: rgba(136, 14, 79, 0.3);
    color: #f48fb1;
}

/* ===== Expand Icon ===== */
.expand-icon {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 0.5rem;
    background: var(--white-glass);
    border-radius: 50%;
    padding: 2px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

    .expand-icon.open {
        transform: rotate(180deg);
    }

body.dark-mode .expand-icon {
    background: rgba(20, 40, 55, 0.8);
}

.subject-info {
    flex: 1;
    min-width: 0;
}

    .subject-info .subject-name {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-dark);
    }

    .subject-info .subject-teacher {
        font-size: 0.55rem;
        color: var(--text-muted);
    }


.subject-total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.total-score {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.total-value {
    font-weight: 800;
    font-size: 1.05rem;
}

.total-grade {
    font-weight: 700;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.04);
    padding: 0px 6px;
    border-radius: 4px;
    font-family: monospace;
}

/* ===== Grade Colors ===== */
.total-value.excellent {
    color: #4CAF50;
}

.total-value.good {
    color: #8BC34A;
}

.total-value.average {
    color: #FF9800;
}

.total-value.weak {
    color: #F44336;
}

/* ===== Badge ===== */
.total-badge {
    font-size: 0.45rem;
    padding: 1px 8px;
    border-radius: 10px;
    font-weight: 600;
    display: inline-block;
}

    .total-badge.excellent {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .total-badge.good {
        background: #f1f8e9;
        color: #33691e;
    }

    .total-badge.average {
        background: #fff3e0;
        color: #e65100;
    }

    .total-badge.weak {
        background: #fce4ec;
        color: #b71c1c;
    }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .total-grade {
    background: rgba(255, 255, 255, 0.05);
    color: #8a9aaa;
}

body.dark-mode .total-value.excellent {
    color: #81c784;
}

body.dark-mode .total-value.good {
    color: #aed581;
}

body.dark-mode .total-value.average {
    color: #ffb74d;
}

body.dark-mode .total-value.weak {
    color: #ef9a9a;
}

body.dark-mode .total-badge.excellent {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

body.dark-mode .total-badge.good {
    background: rgba(139, 195, 74, 0.2);
    color: #aed581;
}

body.dark-mode .total-badge.average {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

body.dark-mode .total-badge.weak {
    background: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
}



/* ===== Progress Bar ===== */
.progress-container {
    margin-top: 2px;
    width: 100%;
}

.progress-bar-custom {
    height: 3px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    overflow: hidden;
}

    .progress-bar-custom .progress-fill {
        height: 100%;
        border-radius: 10px;
        transition: width 0.8s ease;
    }

        .progress-bar-custom .progress-fill.excellent {
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
        }

        .progress-bar-custom .progress-fill.good {
            background: linear-gradient(90deg, #8BC34A, #CDDC39);
        }

        .progress-bar-custom .progress-fill.average {
            background: linear-gradient(90deg, #FF9800, #FFC107);
        }

        .progress-bar-custom .progress-fill.weak {
            background: linear-gradient(90deg, #F44336, #EF5350);
        }

body.dark-mode .progress-bar-custom {
    background: rgba(255, 255, 255, 0.05);
}

/* ============================================================ */
/* ===== COLLAPSIBLE DETAILS ===== */
/* ============================================================ */
.subject-details-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .subject-details-wrapper.open {
        max-height: 300px;
    }

.subject-details {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
}

body.dark-mode .subject-details {
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================ */
/* ===== DETAIL ITEM BOXES - VERY LIGHT COLORS ===== */
/* ============================================================ */
.detail-item-box {
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    width: 100%;
}

    .detail-item-box:hover {
        transform: scale(1.02);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    /* ===== Monthly Details (4 items) ===== */
    /* --- الشفوي (Oral) --- */
    .detail-item-box.oral {
        background: rgba(66, 165, 245, 0.06);
        border-right: 3px solid var(--oral-color);
    }

        .detail-item-box.oral .detail-label i {
            color: var(--oral-color);
            font-size: 0.9rem;
        }

        .detail-item-box.oral .detail-value {
            color: #0D47A1;
        }

body.dark-mode .detail-item-box.oral {
    background: rgba(66, 165, 245, 0.08);
}

    body.dark-mode .detail-item-box.oral .detail-value {
        color: #64B5F6;
    }

/* --- المواظبة (Attendance) --- */
.detail-item-box.attendance {
    background: rgba(76, 175, 80, 0.06);
    border-right: 3px solid var(--attendance-color);
}

    .detail-item-box.attendance .detail-label i {
        color: var(--attendance-color);
        font-size: 0.9rem;
    }

    .detail-item-box.attendance .detail-value {
        color: #1B5E20;
    }

body.dark-mode .detail-item-box.attendance {
    background: rgba(76, 175, 80, 0.08);
}

    body.dark-mode .detail-item-box.attendance .detail-value {
        color: #81C784;
    }

/* --- الواجبات (Homework) --- */
.detail-item-box.homework {
    background: rgba(255, 152, 0, 0.06);
    border-right: 3px solid var(--homework-color);
}

    .detail-item-box.homework .detail-label i {
        color: var(--homework-color);
        font-size: 0.9rem;
    }

    .detail-item-box.homework .detail-value {
        color: #E65100;
    }

body.dark-mode .detail-item-box.homework {
    background: rgba(255, 152, 0, 0.08);
}

    body.dark-mode .detail-item-box.homework .detail-value {
        color: #FFB74D;
    }

/* --- التحريري (Written) --- */
.detail-item-box.written {
    background: rgba(156, 39, 176, 0.06);
    border-right: 3px solid var(--written-color);
}

    .detail-item-box.written .detail-label i {
        color: var(--written-color);
        font-size: 0.9rem;
    }

    .detail-item-box.written .detail-value {
        color: #4A148C;
    }

body.dark-mode .detail-item-box.written {
    background: rgba(156, 39, 176, 0.08);
}

    body.dark-mode .detail-item-box.written .detail-value {
        color: #CE93D8;
    }

/* ============================================================ */
/* ===== SEMESTER DETAILS (2 items: المحصلة + الامتحان) ===== */
/* ============================================================ */
/* --- المحصلة (Total) --- */
.detail-item-box.total {
    background: rgba(3, 98, 128, 0.05);
    border-right: 3px solid var(--primary-color);
}

    .detail-item-box.total .detail-label i {
        color: var(--primary-color);
        font-size: 0.9rem;
    }

    .detail-item-box.total .detail-value {
        color: var(--primary-color);
        font-weight: 800;
    }

body.dark-mode .detail-item-box.total {
    background: rgba(22, 200, 221, 0.08);
}

    body.dark-mode .detail-item-box.total .detail-value {
        color: var(--secondary-color);
    }

    body.dark-mode .detail-item-box.total .detail-label i {
        color: var(--secondary-color);
    }

/* --- الامتحان (Exam) --- */
.detail-item-box.exam {
    background: rgba(22, 200, 221, 0.05);
    border-right: 3px solid var(--secondary-color);
}

    .detail-item-box.exam .detail-label i {
        color: var(--secondary-color);
        font-size: 0.9rem;
    }

    .detail-item-box.exam .detail-value {
        color: #00695C;
    }

body.dark-mode .detail-item-box.exam {
    background: rgba(3, 98, 128, 0.08);
}

    body.dark-mode .detail-item-box.exam .detail-value {
        color: #4DD0E1;
    }

    body.dark-mode .detail-item-box.exam .detail-label i {
        color: #4DD0E1;
    }

/* ===== Detail Label ===== */
.detail-item-box .detail-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .detail-item-box .detail-label i {
        font-size: 0.9rem;
        width: 20px;
        text-align: center;
    }

/* ===== Detail Value ===== */
.detail-item-box .detail-value {
    font-weight: 700;
    font-size: 0.9rem;
}


/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode {
    background: #0d1a26;
}

    body.dark-mode .phone-frame {
        background: rgba(13, 26, 38, 0.9);
        border-color: rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .view-tabs {
        background: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .view-tabs .tab-btn {
            color: #8a9aaa;
        }

            body.dark-mode .view-tabs .tab-btn:hover {
                color: var(--secondary-color);
                background: rgba(255, 255, 255, 0.05);
            }

    body.dark-mode .filter-group select {
        background: rgba(20, 40, 55, 0.5);
        border-color: rgba(255, 255, 255, 0.05);
        color: #e0e8f0;
    }

        body.dark-mode .filter-group select option {
            background: #1a2a3a;
        }

    body.dark-mode .filter-group label {
        color: #8a9aaa;
    }

    body.dark-mode .section-header .title {
        color: #e0e8f0;
    }

    body.dark-mode .subject-card {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .subject-card:hover {
            border-color: var(--secondary-color);
        }

    body.dark-mode .subject-info .subject-name {
        color: #e0e8f0;
    }

    body.dark-mode .subject-info .subject-teacher {
        color: #8a9aaa;
    }

    body.dark-mode .subject-total .total-value {
        color: #e0e8f0;
    }

        body.dark-mode .subject-total .total-value.excellent {
            color: #81c784;
        }

        body.dark-mode .subject-total .total-value.good {
            color: #aed581;
        }

        body.dark-mode .subject-total .total-value.average {
            color: #ffb74d;
        }

        body.dark-mode .subject-total .total-value.weak {
            color: #ef9a9a;
        }

    body.dark-mode .summary-card {
        background: linear-gradient(135deg, #0d1a26, #1a2a3a);
    }

    body.dark-mode .expand-icon {
        background: rgba(20, 40, 55, 0.8);
    }

/* ============================================================ */
/* ===== RESPONSIVE ===== */
/* ============================================================ */
@media (max-width: 420px) {
    .summary-card .value {
        font-size: 1.6rem;
    }

    .subject-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .subject-info .subject-name {
        font-size: 0.75rem;
    }

    .subject-total .total-value {
        font-size: 0.9rem;
    }

    .subject-details {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }


    .detail-item-box {
        padding: 6px 10px;
    }

        .detail-item-box .detail-label {
            font-size: 0.6rem;
        }

            .detail-item-box .detail-label i {
                font-size: 0.75rem;
                width: 16px;
            }

        .detail-item-box .detail-value {
            font-size: 0.75rem;
        }

    .filter-group {
        min-width: 80px;
    }

    .expand-icon {
        font-size: 0.45rem;
    }
}

@media (max-width: 360px) {
    .summary-card .value {
        font-size: 1.3rem;
    }

    .subject-card {
        padding: 10px 10px;
    }

    .subject-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .subject-info .subject-name {
        font-size: 0.65rem;
    }

    .subject-total .total-value {
        font-size: 0.8rem;
    }

    .subject-details {
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }

    .detail-item-box {
        padding: 4px 8px;
    }

        .detail-item-box .detail-label {
            font-size: 0.5rem;
        }

            .detail-item-box .detail-label i {
                font-size: 0.65rem;
                width: 14px;
            }

        .detail-item-box .detail-value {
            font-size: 0.65rem;
        }

    .filter-group {
        min-width: 60px;
    }

        .filter-group select {
            font-size: 0.6rem;
            padding: 4px 8px;
        }

    .view-tabs .tab-btn {
        font-size: 0.65rem;
        padding: 6px 4px;
    }

    .expand-icon {
        font-size: 0.4rem;
        bottom: -3px;
        right: -3px;
    }
}

/*@media (min-width: 421px) {
    body {
        background: #dce4ec;
    }

        body.dark-mode {
            background: #0a151f;
        }
}*/

/* ============================================================ */
/* ===== MINIMAL LOADING ===== */
/* ============================================================ */
.loading-minimal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    gap: 20px;
    padding: 20px;
}

.minimal-spinner {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .minimal-spinner .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-color, #036280);
        animation: dotWave 1.2s ease-in-out infinite;
    }

        .minimal-spinner .dot:nth-child(1) {
            animation-delay: 0s;
        }

        .minimal-spinner .dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .minimal-spinner .dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        .minimal-spinner .dot:nth-child(4) {
            animation-delay: 0.6s;
        }

@keyframes dotWave {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.3;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.minimal-text {
    font-size: 0.95rem;
    color: var(--text-muted, #7a8a9a);
    display: flex;
    align-items: center;
    gap: 2px;
}

    .minimal-text .dots {
        display: inline-block;
    }

        .minimal-text .dots span {
            display: inline-block;
            animation: dotBounceMinimal 1.4s ease-in-out infinite;
            font-size: 1.2rem;
        }

            .minimal-text .dots span:nth-child(1) {
                animation-delay: 0s;
            }

            .minimal-text .dots span:nth-child(2) {
                animation-delay: 0.2s;
            }

            .minimal-text .dots span:nth-child(3) {
                animation-delay: 0.4s;
            }

@keyframes dotBounceMinimal {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.2;
    }

    40% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .minimal-spinner .dot {
    background: var(--secondary-color, #16c8dd);
}

body.dark-mode .minimal-text {
    color: #8a9aaa;
}


/* ============================================================ */
/* ============================================================ */
/* ===== PAGE HEADER - NO CURVE, FULL WIDTH ===== */
/* ============================================================ */
/* ============================================================ */
.page-header-container {
    position: sticky;
    top:0;
    left: 0;
    width: 100%;
    max-width: var(--max-width);
    margin-bottom: 4px;
    z-index: 999;
}

.page-header-content {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 12px rgba(3, 98, 128, 0.06);
    transition: 0.3s;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 48px;
}

    /* ===== Shimmer/Glow Effect ===== */
    .page-header-content::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, rgba(22, 200, 221, 0.04), transparent 60%);
        pointer-events: none;
    }

    .page-header-content:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(3, 98, 128, 0.1);
        border-color: rgba(22, 200, 221, 0.15);
    }

/* ============================================================ */
/* ===== ICON ===== */
/* ============================================================ */
.page-header-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(3, 98, 128, 0.08), rgba(22, 200, 221, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .page-header-icon i {
        font-size: 1.2rem;
        color: var(--primary-color, #036280);
        opacity: 0.85;
    }

/* ============================================================ */
/* ===== TEXT ===== */
/* ============================================================ */
.page-header-text {
    flex: 1;
    min-width: 0;
}

.page-header-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-dark, #1a2a3a);
    margin: 0;
    line-height: 1.3;
}

    .page-header-title i {
        color: var(--secondary-color, #16c8dd);
        font-size: 0.9rem;
        margin-left: 6px;
    }

.page-header-subtitle {
    font-size: 0.65rem;
    color: var(--text-muted, #7a8a9a);
    margin: 0;
    margin-top: 1px;
    font-weight: 500;
}

    .page-header-subtitle i {
        font-size: 0.5rem;
        margin-left: 4px;
        opacity: 0.7;
    }


    body.dark-mode .page-header-content {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .page-header-title {
        color: #e0e8f0;
    }

    body.dark-mode .page-header-subtitle {
        color: #8a9aaa;
    }

    body.dark-mode .page-header-icon {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .page-header-icon i {
            color: var(--secondary-color, #16c8dd);
        }

    body.dark-mode .page-header-content::before {
        background: radial-gradient(circle at 70% 30%, rgba(22, 200, 221, 0.06), transparent 60%);
    }

/* ============================================================ */
/* ============================================================ */
/* ===== RESPONSIVE ===== */
/* ============================================================ */
/* ============================================================ */
@media (max-width: 420px) {
    .page-header-content {
        padding: 10px 14px;
        gap: 10px;
    }

    .page-header-icon {
        width: 36px;
        height: 36px;
    }

        .page-header-icon i {
            font-size: 1rem;
        }

    .page-header-title {
        font-size: 0.9rem;
    }

    .page-header-subtitle {
        font-size: 0.55rem;
    }
}

@media (max-width: 360px) {
    .page-header-content {
        padding: 8px 10px;
        gap: 8px;
        flex-wrap: wrap;
    }

    .page-header-icon {
        width: 30px;
        height: 30px;
    }

        .page-header-icon i {
            font-size: 0.85rem;
        }

    .page-header-title {
        font-size: 0.8rem;
    }

    .page-header-subtitle {
        font-size: 0.5rem;
    }
}




/* ============================================================ */
/* ===== DATE RANGE ===== */
/* ============================================================ */
.date-range {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}

    .date-range .date-box {
        flex: 1;
        background: var(--white-glass);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        padding: 6px 10px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

        .date-range .date-box label {
            font-size: 0.5rem;
            color: var(--text-muted);
            display: block;
            font-weight: 500;
        }

        .date-range .date-box input {
            border: none;
            background: transparent;
            font-size: 0.7rem;
            color: var(--text-dark);
            width: 100%;
            font-family: 'Tajawal', sans-serif;
            padding: 2px 0;
            outline: none;
        }

            .date-range .date-box input::-webkit-calendar-picker-indicator {
                filter: invert(0.4);
                cursor: pointer;
            }

/* ============================================================ */
/* ===== REQUEST ABSENCE BUTTON ===== */
/* ============================================================ */
.request-absence-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border: 2px dashed var(--secondary-color);
    border-radius: 12px;
    background: rgba(22, 200, 221, 0.04);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Tajawal', sans-serif;
    margin-bottom: 12px;
}

    .request-absence-top:hover {
        background: rgba(22, 200, 221, 0.1);
        border-color: var(--primary-color);
        transform: translateY(-2px);
    }

    .request-absence-top i {
        font-size: 1rem;
        color: var(--secondary-color);
    }

    .request-absence-top:hover i {
        color: var(--primary-color);
    }

/* ============================================================ */
/* ===== ATTENDANCE LIST - DAY LEVEL ===== */
/* ============================================================ */
.attendance-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ===== Day Card ===== */
.day-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
}

    .day-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    .day-card .day-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

        .day-card .day-header .day-name {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-dark);
        }

        .day-card .day-header .day-date {
            font-size: 0.65rem;
            color: var(--text-muted);
        }

        .day-card .day-header .day-status {
            font-size: 0.6rem;
            font-weight: 600;
            padding: 2px 12px;
            border-radius: 12px;
        }

            .day-card .day-header .day-status.present {
                background: #e8f5e9;
                color: #1b5e20;
            }

            .day-card .day-header .day-status.absent {
                background: #fce4ec;
                color: #b71c1c;
            }

            .day-card .day-header .day-status.late {
                background: #fff3e0;
                color: #e65100;
            }

            .day-card .day-header .day-status.excused {
                background: #e8f5e9;
                color: #1b5e20;
            }

    /* ===== Day Note ===== */
    .day-card .day-note {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        font-size: 0.65rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .day-card .day-note i {
            font-size: 0.5rem;
            opacity: 0.6;
        }

        .day-card .day-note .note-text {
            color: var(--text-dark);
        }

/* ============================================================ */
/* ===== MODAL ===== */
/* ============================================================ */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .modal-overlay.active {
        display: flex;
    }

.modal-card {
    background: var(--bg-light);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding:10px 24px;
    max-width: 380px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-card .modal-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: 7px;
}

    .modal-card .modal-title i {
        color: var(--secondary-color);
    }

.modal-card .form-group {
    margin-bottom: 5px;
}

    .modal-card .form-group label {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-dark);
        display: block;
        margin-bottom: 4px;
    }

        .modal-card .form-group label i {
            color: var(--secondary-color);
            margin-left: 4px;
        }

    .modal-card .form-group select,
    .modal-card .form-group input,
    .modal-card .form-group textarea {
        width: 100%;
        padding: 8px 12px;
        border-radius: 10px;
        border: 2px solid rgba(3, 98, 128, 0.08);
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(10px);
        font-size: 0.8rem;
        color: var(--text-dark);
        font-family: 'Tajawal', sans-serif;
        transition: 0.3s;
    }

        .modal-card .form-group select:focus,
        .modal-card .form-group input:focus,
        .modal-card .form-group textarea:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(22, 200, 221, 0.15);
            outline: none;
        }

    .modal-card .form-group textarea {
        resize: vertical;
        min-height: 60px;
    }

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

    .modal-actions .btn {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: 12px;
        font-size: 0.8rem;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
        font-family: 'Tajawal', sans-serif;
    }

    .modal-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: #fff;
        box-shadow: 0 4px 15px rgba(3, 98, 128, 0.25);
    }

        .modal-actions .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(3, 98, 128, 0.35);
        }

    .modal-actions .btn-secondary {
        background: rgba(0, 0, 0, 0.05);
        color: var(--text-muted);
    }

        .modal-actions .btn-secondary:hover {
            background: rgba(0, 0, 0, 0.08);
        }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .date-range .date-box {
    background: rgba(20, 40, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .date-range .date-box label {
        color: #8a9aaa;
    }

    body.dark-mode .date-range .date-box input {
        color: #e0e8f0;
    }

        body.dark-mode .date-range .date-box input::-webkit-calendar-picker-indicator {
            filter: invert(0.8);
        }

body.dark-mode .day-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .day-card .day-header .day-name {
        color: #e0e8f0;
    }

    body.dark-mode .day-card .day-header .day-date {
        color: #8a9aaa;
    }

    body.dark-mode .day-card .day-header .day-status.present {
        background: rgba(76, 175, 80, 0.2);
        color: #81c784;
    }

    body.dark-mode .day-card .day-header .day-status.absent {
        background: rgba(244, 67, 54, 0.2);
        color: #ef9a9a;
    }

    body.dark-mode .day-card .day-header .day-status.late {
        background: rgba(255, 152, 0, 0.2);
        color: #ffb74d;
    }

    body.dark-mode .day-card .day-header .day-status.excused {
        background: rgba(139, 195, 74, 0.2);
        color: #aed581;
    }

    body.dark-mode .day-card .day-note {
        border-top-color: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .day-card .day-note .note-text {
            color: #e0e8f0;
        }


body.dark-mode .legend .legend-item {
    color: #8a9aaa;
}

body.dark-mode .request-absence-top {
    border-color: rgba(22, 200, 221, 0.3);
    color: var(--secondary-color);
}

    body.dark-mode .request-absence-top:hover {
        background: rgba(22, 200, 221, 0.1);
        border-color: var(--secondary-color);
    }

body.dark-mode .modal-card {
    background: rgba(20, 40, 55, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .modal-card .modal-title {
        color: #e0e8f0;
    }

    body.dark-mode .modal-card .form-group label {
        color: #e0e8f0;
    }

    body.dark-mode .modal-card .form-group select,
    body.dark-mode .modal-card .form-group input,
    body.dark-mode .modal-card .form-group textarea {
        background: rgba(20, 40, 55, 0.5);
        border-color: rgba(255, 255, 255, 0.05);
        color: #e0e8f0;
    }

        body.dark-mode .modal-card .form-group select:focus,
        body.dark-mode .modal-card .form-group input:focus,
        body.dark-mode .modal-card .form-group textarea:focus {
            border-color: var(--secondary-color);
        }

body.dark-mode .modal-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: #8a9aaa;
}

    body.dark-mode .modal-actions .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
    }

/* ============================================================ */
/* ===== HOLIDAY CARD ===== */
/* ============================================================ */
.day-name-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.day-card.holiday-card {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.06), rgba(74, 20, 140, 0.04));
    border: 2px solid rgba(156, 39, 176, 0.2);
    position: relative;
    overflow: hidden;
}

    .day-card.holiday-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, rgba(156, 39, 176, 0.04), transparent 60%);
        pointer-events: none;
    }

    .day-card.holiday-card:hover {
        border-color: rgba(156, 39, 176, 0.4);
        box-shadow: 0 6px 24px rgba(156, 39, 176, 0.15);
        transform: translateY(-2px);
    }

/* ===== Holiday Badge ===== */
.holiday-badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #9C27B0, #6A1B9A);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .holiday-badge i {
        font-size: 0.5rem;
    }

/* ===== Day Status Holiday ===== */
.day-status.holiday {
    background: #f3e5f5;
    color: #4a148c;
}

/* ===== Holiday Message ===== */
.holiday-message {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(156, 39, 176, 0.06);
    border-radius: 8px;
    font-size: 0.6rem;
    color: #4a148c;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed rgba(156, 39, 176, 0.2);
}

    .holiday-message i {
        font-size: 0.65rem;
        color: #9C27B0;
    }

/* ============================================================ */
/* ===== WEEKEND CARD  ===== */
/* ============================================================ */
.day-card.weekend-card {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.06), rgba(3, 98, 128, 0.04));
    border: 2px solid rgba(66, 165, 245, 0.2);
    position: relative;
    overflow: hidden;
}

    .day-card.weekend-card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, rgba(66, 165, 245, 0.04), transparent 60%);
        pointer-events: none;
    }

    .day-card.weekend-card:hover {
        border-color: rgba(66, 165, 245, 0.4);
        box-shadow: 0 6px 24px rgba(66, 165, 245, 0.15);
        transform: translateY(-2px);
    }

/* ===== Weekend Badge ===== */
.weekend-badge {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #42A5F5, #1A237E);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .weekend-badge i {
        font-size: 0.5rem;
    }

/* ===== Day Status Weekend ===== */
.day-status.weekend {
    background: #e3f2fd;
    color: #0d47a1;
}

/* ===== Weekend Message ===== */
.weekend-message {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(66, 165, 245, 0.06);
    border-radius: 8px;
    font-size: 0.6rem;
    color: #0d47a1;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed rgba(66, 165, 245, 0.2);
}

    .weekend-message i {
        font-size: 0.65rem;
        color: #42A5F5;
    }

/* ============================================================ */
/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
/* ============================================================ */

/* ===== Holiday Card Dark Mode (الآن بنفسجي غامق) ===== */
body.dark-mode .day-card.holiday-card {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.06), rgba(74, 20, 140, 0.04));
    border-color: rgba(156, 39, 176, 0.15);
}

    body.dark-mode .day-card.holiday-card:hover {
        border-color: rgba(156, 39, 176, 0.3);
    }

body.dark-mode .holiday-badge {
    background: linear-gradient(135deg, #4a148c, #6a1b9a);
}

body.dark-mode .day-status.holiday {
    background: rgba(156, 39, 176, 0.15);
    color: #ce93d8;
}

body.dark-mode .holiday-message {
    background: rgba(156, 39, 176, 0.06);
    border-color: rgba(156, 39, 176, 0.1);
    color: #ce93d8;
}

    body.dark-mode .holiday-message i {
        color: #ce93d8;
    }

/* ===== Weekend Card Dark Mode (الآن أزرق غامق) ===== */
body.dark-mode .day-card.weekend-card {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.06), rgba(3, 98, 128, 0.04));
    border-color: rgba(66, 165, 245, 0.15);
}

    body.dark-mode .day-card.weekend-card:hover {
        border-color: rgba(66, 165, 245, 0.3);
    }

body.dark-mode .weekend-badge {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
}

body.dark-mode .day-status.weekend {
    background: rgba(66, 165, 245, 0.15);
    color: #64b5f6;
}

body.dark-mode .weekend-message {
    background: rgba(66, 165, 245, 0.06);
    border-color: rgba(66, 165, 245, 0.1);
    color: #64b5f6;
}

    body.dark-mode .weekend-message i {
        color: #64b5f6;
    }




/* ============================================================ */
/* ===== BEHAVIOR LIST ===== */
/* ============================================================ */
.behavior-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Behavior Card ===== */
.behavior-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .behavior-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    /* ===== Behavior Card Colors ===== */
    .behavior-card.positive {
        border-right: 4px solid #4CAF50;
    }

    .behavior-card.negative {
        border-right: 4px solid #F44336;
    }

    .behavior-card.neutral {
        border-right: 4px solid #FF9800;
    }

/* ===== Behavior Header ===== */
.behavior-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .behavior-header .behavior-info {
        flex: 1;
    }

        .behavior-header .behavior-info .behavior-title {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-dark);
        }

        .behavior-header .behavior-info .behavior-date {
            font-size: 0.55rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

            .behavior-header .behavior-info .behavior-date i {
                font-size: 0.45rem;
            }

    .behavior-header .behavior-badge {
        font-size: 0.55rem;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        white-space: nowrap;
    }

        .behavior-header .behavior-badge.positive {
            background: #e8f5e9;
            color: #1b5e20;
        }

        .behavior-header .behavior-badge.negative {
            background: #fce4ec;
            color: #b71c1c;
        }

        .behavior-header .behavior-badge.neutral {
            background: #fff3e0;
            color: #e65100;
        }

/* ===== Behavior Details ===== */
.behavior-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

    .behavior-details .detail-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4px 6px;
        background: rgba(3, 98, 128, 0.03);
        border-radius: 8px;
    }

        .behavior-details .detail-item .detail-label {
            font-size: 0.5rem;
            color: var(--text-muted);
        }

        .behavior-details .detail-item .detail-value {
            font-weight: 700;
            font-size: 0.75rem;
            color: var(--text-dark);
        }

            .behavior-details .detail-item .detail-value.positive {
                color: #4CAF50;
            }

            .behavior-details .detail-item .detail-value.negative {
                color: #F44336;
            }

/* ===== Behavior Note ===== */
.behavior-note {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .behavior-note i {
        font-size: 0.5rem;
        opacity: 0.6;
    }

    .behavior-note .note-text {
        color: var(--text-dark);
    }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */

body.dark-mode .behavior-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .behavior-card:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .behavior-card .behavior-title {
        color: #e0e8f0;
    }

    body.dark-mode .behavior-card .behavior-date {
        color: #8a9aaa;
    }

    body.dark-mode .behavior-card .behavior-badge.positive {
        background: rgba(76, 175, 80, 0.2);
        color: #81c784;
    }

    body.dark-mode .behavior-card .behavior-badge.negative {
        background: rgba(244, 67, 54, 0.2);
        color: #ef9a9a;
    }

    body.dark-mode .behavior-card .behavior-badge.neutral {
        background: rgba(255, 152, 0, 0.2);
        color: #ffb74d;
    }

body.dark-mode .behavior-details {
    border-top-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .behavior-details .detail-item {
        background: rgba(255, 255, 255, 0.03);
    }

        body.dark-mode .behavior-details .detail-item .detail-value {
            color: #e0e8f0;
        }

            body.dark-mode .behavior-details .detail-item .detail-value.positive {
                color: #81c784;
            }

            body.dark-mode .behavior-details .detail-item .detail-value.negative {
                color: #ef9a9a;
            }

body.dark-mode .behavior-note {
    background: rgba(255, 255, 255, 0.02);
}

    body.dark-mode .behavior-note .note-text {
        color: #e0e8f0;
    }


body.dark-mode .summary-card {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .legend .legend-item {
    color: #8a9aaa;
}


/* ============================================================ */
/* ===== ASSIGNMENT LIST ===== */
/* ============================================================ */
.assignment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Assignment Card ===== */
.assignment-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .assignment-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    /* ===== Assignment Status Colors ===== */
    .assignment-card.pending {
        border-right: 4px solid #FF9800;
    }

    .assignment-card.submitted {
        border-right: 4px solid #4CAF50;
    }

    .assignment-card.overdue {
        border-right: 4px solid #F44336;
    }

/* ============================================================ */
/* ===== ASSIGNMENT HEADER ===== */
/* ============================================================ */
.assignment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .assignment-header .assignment-info {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        /* ===== Subject Icon ===== */
        .assignment-header .assignment-info .assignment-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            flex-shrink: 0;
        }


        /* ===== Assignment Text ===== */
        .assignment-header .assignment-info .assignment-text {
            flex: 1;
            min-width: 0;
        }

        .assignment-header .assignment-info .assignment-title {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-dark);
        }

        .assignment-header .assignment-info .assignment-subject {
            font-size: 0.55rem;
            color: var(--text-muted);
            display: flex;
            align-items: center;
            gap: 4px;
        }

            .assignment-header .assignment-info .assignment-subject i {
                font-size: 0.45rem;
            }

    .assignment-header .assignment-badge {
        font-size: 0.55rem;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 12px;
        white-space: nowrap;
    }

        .assignment-header .assignment-badge.pending {
            background: #fff3e0;
            color: #e65100;
        }

        .assignment-header .assignment-badge.submitted {
            background: #e8f5e9;
            color: #1b5e20;
        }

        .assignment-header .assignment-badge.overdue {
            background: #fce4ec;
            color: #b71c1c;
        }

/* ============================================================ */
/* ===== ASSIGNMENT DETAILS ===== */
/* ============================================================ */
.assignment-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

    .assignment-details .detail-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.6rem;
        color: var(--text-muted);
    }

        .assignment-details .detail-item i {
            font-size: 0.5rem;
            width: 16px;
            text-align: center;
        }

        .assignment-details .detail-item .detail-value {
            font-weight: 600;
            color: var(--text-dark);
        }

            .assignment-details .detail-item .detail-value.overdue {
                color: #F44336;
            }

            .assignment-details .detail-item .detail-value.submitted {
                color: #4CAF50;
            }

/* ============================================================ */
/* ===== ASSIGNMENT NOTE ===== */
/* ============================================================ */
.assignment-note {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .assignment-note i {
        font-size: 0.5rem;
        opacity: 0.6;
    }

    .assignment-note .note-text {
        color: var(--text-dark);
    }

/* ============================================================ */
/* ===== ATTACHMENTS ===== */
/* ============================================================ */
.assignment-attachments {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

    .assignment-attachments .attachment {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.5rem;
        color: var(--text-muted);
        background: rgba(3, 98, 128, 0.04);
        padding: 2px 8px;
        border-radius: 8px;
        border: 1px solid rgba(3, 98, 128, 0.04);
        transition: 0.3s;
    }

        .assignment-attachments .attachment:hover {
            background: rgba(3, 98, 128, 0.08);
            color: var(--primary-color);
        }

        .assignment-attachments .attachment i {
            font-size: 0.5rem;
        }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */


body.dark-mode .assignment-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .assignment-card:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .assignment-card .assignment-title {
        color: #e0e8f0;
    }

    body.dark-mode .assignment-card .assignment-subject {
        color: #8a9aaa;
    }

    body.dark-mode .assignment-card .assignment-badge.pending {
        background: rgba(255, 152, 0, 0.2);
        color: #ffb74d;
    }

    body.dark-mode .assignment-card .assignment-badge.submitted {
        background: rgba(76, 175, 80, 0.2);
        color: #81c784;
    }

    body.dark-mode .assignment-card .assignment-badge.overdue {
        background: rgba(244, 67, 54, 0.2);
        color: #ef9a9a;
    }

body.dark-mode .assignment-details {
    border-top-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .assignment-details .detail-item {
        color: #8a9aaa;
    }

        body.dark-mode .assignment-details .detail-item .detail-value {
            color: #e0e8f0;
        }

            body.dark-mode .assignment-details .detail-item .detail-value.overdue {
                color: #ef9a9a;
            }

            body.dark-mode .assignment-details .detail-item .detail-value.submitted {
                color: #81c784;
            }

body.dark-mode .assignment-note {
    background: rgba(255, 255, 255, 0.02);
}

    body.dark-mode .assignment-note .note-text {
        color: #e0e8f0;
    }

body.dark-mode .assignment-attachments .attachment {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
    color: #8a9aaa;
}

    body.dark-mode .assignment-attachments .attachment:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--secondary-color);
    }




/* ============================================================ */
/* ===== NOTIFICATION CARD ===== */
/* ============================================================ */
.notification-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .notification-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    /* ===== Unread - border + status ===== */
    .notification-card.unread {
        border-right: 4px solid var(--secondary-color);
    }

    .notification-card.read {
        opacity: 0.85;
    }

        .notification-card.read .notification-title {
            font-weight: 500;
        }

    /* ===== Shimmer/Glow Effect ===== */
    .notification-card::after {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 150%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, rgba(22, 200, 221, 0.02), transparent 60%);
        pointer-events: none;
    }

/* ============================================================ */
/* ===== NOTIFICATION HEADER ===== */
/* ============================================================ */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .notification-header .notification-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

/* ===== Icon Colors by Type ===== */
.notification-icon.general {
    background: #e3f2fd;
    color: #0d47a1;
}

.notification-icon.grade {
    background: #e8f5e9;
    color: #1b5e20;
}

.notification-icon.fee {
    background: #fff3e0;
    color: #e65100;
}

.notification-icon.absence {
    background: #fce4ec;
    color: #b71c1c;
}

.notification-icon.late {
    background: #fff3e0;
    color: #e65100;
}

.notification-icon.homework {
    background: #f3e5f5;
    color: #4a148c;
}

.notification-icon.exam {
    background: #e0f7fa;
    color: #006064;
}

.notification-icon.behavior {
    background: #e8f5e9;
    color: #1b5e20;
}

.notification-icon.behavior-negative {
    background: #fce4ec;
    color: #b71c1c;
}

.notification-icon.admin {
    background: #e8eaf6;
    color: #1a237e;
}

.notification-icon.transport {
    background: #fff8e1;
    color: #bf360c;
}

.notification-icon.enrollment {
    background: #e0f2f1;
    color: #004d40;
}

.notification-icon.schedule {
    background: #f3e5f5;
    color: #4a148c;
}

.notification-icon.discount {
    background: #e8f5e9;
    color: #1b5e20;
}

body.dark-mode .notification-icon.general {
    background: rgba(13, 71, 161, 0.25);
    color: #90caf9;
}

body.dark-mode .notification-icon.grade {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

body.dark-mode .notification-icon.fee {
    background: rgba(230, 81, 0, 0.25);
    color: #ffcc80;
}

body.dark-mode .notification-icon.absence {
    background: rgba(183, 28, 28, 0.25);
    color: #ef9a9a;
}

body.dark-mode .notification-icon.late {
    background: rgba(230, 81, 0, 0.25);
    color: #ffcc80;
}

body.dark-mode .notification-icon.homework {
    background: rgba(74, 20, 140, 0.25);
    color: #ce93d8;
}

body.dark-mode .notification-icon.exam {
    background: rgba(0, 96, 100, 0.25);
    color: #80cbc4;
}

body.dark-mode .notification-icon.behavior {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

body.dark-mode .notification-icon.behavior-negative {
    background: rgba(183, 28, 28, 0.25);
    color: #ef9a9a;
}

body.dark-mode .notification-icon.admin {
    background: rgba(26, 35, 126, 0.25);
    color: #9fa8da;
}

body.dark-mode .notification-icon.transport {
    background: rgba(191, 54, 12, 0.25);
    color: #ffab91;
}

body.dark-mode .notification-icon.enrollment {
    background: rgba(0, 77, 64, 0.25);
    color: #80cbc4;
}

body.dark-mode .notification-icon.schedule {
    background: rgba(74, 20, 140, 0.25);
    color: #ce93d8;
}

body.dark-mode .notification-icon.discount {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

.notification-info {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.notification-subtitle {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 1px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .notification-subtitle i {
        font-size: 0.45rem;
    }

/* ============================================================ */
/* ===== STATUS BADGE (مقروء / غير مقروء) ===== */
/* ============================================================ */
.status-badge {
    font-size: 0.5rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

    .status-badge.unread {
        background: rgba(22, 200, 221, 0.12);
        color: var(--secondary-color);
    }

    .status-badge.read {
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-muted);
    }

body.dark-mode .status-badge.read {
    background: rgba(255, 255, 255, 0.05);
    color: #8a9aaa;
}

body.dark-mode .status-badge.unread {
    background: rgba(22, 200, 221, 0.15);
    color: #4dd9ea;
}

/* ===== Unread Dot (for header) ===== */
.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary-color);
    flex-shrink: 0;
    margin-top: 4px;
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.8);
    }
}

.notification-card.read .unread-dot {
    display: none;
}

/* ===== Notification Time ===== */
.notification-time {
    font-size: 0.5rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .notification-time i {
        font-size: 0.45rem;
    }


/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */


body.dark-mode .notification-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .notification-card:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .notification-card.unread {
        border-right-color: var(--secondary-color);
    }

body.dark-mode .notification-title {
    color: #e0e8f0;
}

body.dark-mode .notification-subtitle {
    color: #8a9aaa;
}

body.dark-mode .notification-time {
    color: #8a9aaa;
}

body.dark-mode .summary-card {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .legend .legend-item {
    color: #8a9aaa;
}

    body.dark-mode .legend .legend-item .dot.read {
        background: #444466;
    }


/* ============================================================ */
/* ===== EXAM LIST ===== */
/* ============================================================ */
.exam-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ============================================================ */
/* ===== EXAM CARD ===== */
/* ============================================================ */
.exam-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .exam-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    /* ===== Subject Colors ===== */
    .exam-card.math {
        border-right: 4px solid #1A237E;
    }

    .exam-card.science {
        border-right: 4px solid #1B5E20;
    }

    .exam-card.arabic {
        border-right: 4px solid #E65100;
    }

    .exam-card.english {
        border-right: 4px solid #4A148C;
    }

    .exam-card.history {
        border-right: 4px solid #B71C1C;
    }

    .exam-card.geography {
        border-right: 4px solid #004D40;
    }

    .exam-card.islamic {
        border-right: 4px solid #BF360C;
    }

    .exam-card.physics {
        border-right: 4px solid #6A1B9A;
    }

    .exam-card.chemistry {
        border-right: 4px solid #1B5E20;
    }

    .exam-card.biology {
        border-right: 4px solid #004D40;
    }

/* ===== Exam Header ===== */
.exam-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

    .exam-header .exam-info {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .exam-header .exam-info .exam-icon {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

            .exam-header .exam-info .exam-icon.math {
                background: #e3f2fd;
                color: #0d47a1;
            }

            .exam-header .exam-info .exam-icon.science {
                background: #e8f5e9;
                color: #1b5e20;
            }

            .exam-header .exam-info .exam-icon.arabic {
                background: #fff3e0;
                color: #e65100;
            }

            .exam-header .exam-info .exam-icon.english {
                background: #f3e5f5;
                color: #4a148c;
            }

            .exam-header .exam-info .exam-icon.history {
                background: #fce4ec;
                color: #b71c1c;
            }

            .exam-header .exam-info .exam-icon.geography {
                background: #e0f2f1;
                color: #004d40;
            }

            .exam-header .exam-info .exam-icon.islamic {
                background: #e8f5e9;
                color: #1b5e20;
            }

            .exam-header .exam-info .exam-icon.physics {
                background: #f3e5f5;
                color: #6a1b9a;
            }

            .exam-header .exam-info .exam-icon.chemistry {
                background: #e8f5e9;
                color: #1b5e20;
            }

            .exam-header .exam-info .exam-icon.biology {
                background: #e0f2f1;
                color: #004d40;
            }

body.dark-mode .exam-header .exam-info .exam-icon.math {
    background: rgba(26, 35, 126, 0.25);
    color: #90caf9;
}

body.dark-mode .exam-header .exam-info .exam-icon.science {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

body.dark-mode .exam-header .exam-info .exam-icon.arabic {
    background: rgba(230, 81, 0, 0.25);
    color: #ffcc80;
}

body.dark-mode .exam-header .exam-info .exam-icon.english {
    background: rgba(74, 20, 140, 0.25);
    color: #ce93d8;
}

body.dark-mode .exam-header .exam-info .exam-icon.history {
    background: rgba(183, 28, 28, 0.25);
    color: #ef9a9a;
}

body.dark-mode .exam-header .exam-info .exam-icon.geography {
    background: rgba(0, 77, 64, 0.25);
    color: #80cbc4;
}

body.dark-mode .exam-header .exam-info .exam-icon.islamic {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

body.dark-mode .exam-header .exam-info .exam-icon.physics {
    background: rgba(106, 27, 154, 0.25);
    color: #ce93d8;
}

body.dark-mode .exam-header .exam-info .exam-icon.chemistry {
    background: rgba(27, 94, 32, 0.25);
    color: #a5d6a7;
}

body.dark-mode .exam-header .exam-info .exam-icon.biology {
    background: rgba(0, 77, 64, 0.25);
    color: #80cbc4;
}

.exam-header .exam-info .exam-text {
    flex: 1;
    min-width: 0;
}

.exam-header .exam-info .exam-title {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-dark);
}

.exam-header .exam-info .exam-subject {
    font-size: 0.55rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

    .exam-header .exam-info .exam-subject i {
        font-size: 0.45rem;
    }

/* ===== Exam Status Badge ===== */
.exam-status {
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

    .exam-status.upcoming {
        background: #e3f2fd;
        color: #0d47a1;
    }

    .exam-status.today {
        background: #fff3e0;
        color: #e65100;
    }

    .exam-status.completed {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .exam-status.cancelled {
        background: #fce4ec;
        color: #b71c1c;
    }

body.dark-mode .exam-status.upcoming {
    background: rgba(13, 71, 161, 0.2);
    color: #90caf9;
}

body.dark-mode .exam-status.today {
    background: rgba(230, 81, 0, 0.2);
    color: #ffcc80;
}

body.dark-mode .exam-status.completed {
    background: rgba(27, 94, 32, 0.2);
    color: #a5d6a7;
}

body.dark-mode .exam-status.cancelled {
    background: rgba(183, 28, 28, 0.2);
    color: #ef9a9a;
}

/* ============================================================ */
/* ===== EXAM DETAILS ===== */
/* ============================================================ */
.exam-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

    .exam-details .detail-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.6rem;
        color: var(--text-muted);
    }

        .exam-details .detail-item i {
            font-size: 0.5rem;
            width: 16px;
            text-align: center;
        }

        .exam-details .detail-item .detail-value {
            font-weight: 600;
            color: var(--text-dark);
        }

            .exam-details .detail-item .detail-value.today {
                color: #e65100;
            }

/* ============================================================ */
/* ===== EXAM NOTE ===== */
/* ============================================================ */
.exam-note {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

    .exam-note i {
        font-size: 0.5rem;
        opacity: 0.6;
    }

    .exam-note .note-text {
        color: var(--text-dark);
    }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .exam-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .exam-card:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .exam-card .exam-title {
        color: #e0e8f0;
    }

    body.dark-mode .exam-card .exam-subject {
        color: #8a9aaa;
    }

body.dark-mode .exam-details {
    border-top-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .exam-details .detail-item {
        color: #8a9aaa;
    }

        body.dark-mode .exam-details .detail-item .detail-value {
            color: #e0e8f0;
        }

body.dark-mode .exam-note {
    background: rgba(255, 255, 255, 0.02);
}

    body.dark-mode .exam-note .note-text {
        color: #e0e8f0;
    }

body.dark-mode .summary-card {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .legend .legend-item {
    color: #8a9aaa;
}

body.dark-mode .exam-card.math {
    border-right-color: #3f51b5;
}

body.dark-mode .exam-card.science {
    border-right-color: #4caf50;
}

body.dark-mode .exam-card.arabic {
    border-right-color: #ff9800;
}

body.dark-mode .exam-card.english {
    border-right-color: #9c27b0;
}

body.dark-mode .exam-card.history {
    border-right-color: #f44336;
}

body.dark-mode .exam-card.geography {
    border-right-color: #009688;
}

body.dark-mode .exam-card.islamic {
    border-right-color: #ff5722;
}

body.dark-mode .exam-card.physics {
    border-right-color: #ab47bc;
}

body.dark-mode .exam-card.chemistry {
    border-right-color: #4caf50;
}

body.dark-mode .exam-card.biology {
    border-right-color: #009688;
}


/* ============================================================ */
/* ===== TODAY CARD ===== */
/* ============================================================ */
.today-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.25);
}

    .today-card::after {
        content: '📅';
        position: absolute;
        left: -10px;
        bottom: -20px;
        font-size: 5rem;
        opacity: 0.08;
    }

    .today-card .today-label {
        font-size: 0.65rem;
        opacity: 0.8;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .today-card .today-date {
        font-size: 1.3rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .today-card .today-details {
        display: flex;
        gap: 14px;
        margin-top: 4px;
        flex-wrap: wrap;
    }

        .today-card .today-details .item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.65rem;
            opacity: 0.85;
        }

            .today-card .today-details .item i {
                font-size: 0.55rem;
            }

/* ============================================================ */
/* ===== DAY TABS ===== */
/* ============================================================ */
.day-tabs {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(3, 98, 128, 0.04);
    border-radius: 14px;
    padding: 4px;
}

    .day-tabs .day-tab {
        padding: 8px 4px;
        border: none;
        border-radius: 10px;
        font-size: 0.65rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: transparent;
        color: var(--text-muted);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1px;
        font-family: 'Tajawal', sans-serif;
    }

        .day-tabs .day-tab .day-name {
            font-size: 0.5rem;
            opacity: 0.7;
        }

        .day-tabs .day-tab .day-number {
            font-size: 0.8rem;
            font-weight: 700;
        }

        .day-tabs .day-tab:hover {
            color: var(--primary-color);
            background: rgba(3, 98, 128, 0.04);
        }

        .day-tabs .day-tab.active {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            box-shadow: 0 4px 20px rgba(3, 98, 128, 0.25);
        }

            .day-tabs .day-tab.active .day-name {
                color: rgba(255, 255, 255, 0.8);
            }

        .day-tabs .day-tab.weekend {
            opacity: 0.5;
        }

            .day-tabs .day-tab.weekend.active {
                opacity: 1;
            }

body.dark-mode .day-tabs .day-tab.weekend {
    opacity: 0.4;
}

    body.dark-mode .day-tabs .day-tab.weekend.active {
        opacity: 1;
    }

/* ============================================================ */
/* ===== SCHEDULE LIST ===== */
/* ============================================================ */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================ */
/* ===== SCHEDULE CARD ===== */
/* ============================================================ */
.schedule-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .schedule-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-color);
    }

    /* ===== Time ===== */
    .schedule-card .schedule-time {
        min-width: 60px;
        text-align: center;
    }

        .schedule-card .schedule-time .time-icon {
            font-size: 14px;
            color: var(--text-muted);
        }

        .schedule-card .schedule-time .time-start {
            font-weight: 800;
            font-size: 0.8rem;
            color: var(--text-dark);
        }

        .schedule-card .schedule-time .time-end {
            font-size: 0.55rem;
            color: var(--text-muted);
        }

    .schedule-card .schedule-icon.break {
        background: #f5f5f5;
        color: #888;
    }

    .schedule-card .schedule-icon.activity {
        background: #fff8e1;
        color: #bf360c;
    }


body.dark-mode .schedule-card .schedule-icon.break {
    background: rgba(255, 255, 255, 0.05);
    color: #8888aa;
}

body.dark-mode .schedule-card .schedule-icon.activity {
    background: rgba(191, 54, 12, 0.25);
    color: #ffab91;
}

/* ===== Subject Info ===== */
.schedule-card .schedule-info {
    flex: 1;
    min-width: 0;
}

    .schedule-card .schedule-info .subject-name {
        font-weight: 700;
        font-size: 0.8rem;
        color: var(--text-dark);
    }

    .schedule-card .schedule-info .subject-teacher {
        font-size: 0.55rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .schedule-card .schedule-info .subject-teacher i {
            font-size: 0.45rem;
        }

/* ===== Room ===== */
.schedule-card .schedule-room {
    text-align: left;
    font-size: 0.55rem;
    color: var(--text-muted);
    min-width: 45px;
}

    .schedule-card .schedule-room .room-number {
        font-weight: 700;
        font-size: 0.7rem;
        color: var(--text-dark);
        display: block;
    }

body.dark-mode .schedule-card .schedule-room .room-number {
    color: #e0e8f0;
}

/* ============================================================ */
/* ===== BREAK CARD ===== */
/* ============================================================ */
.schedule-card.break {
    background: rgba(245, 245, 245, 0.6);
    border-color: rgba(200, 200, 200, 0.3);
    cursor: default;
}

    .schedule-card.break:hover {
        transform: none;
        box-shadow: none;
    }

body.dark-mode .schedule-card.break {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */

body.dark-mode .today-card {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .day-tabs {
    background: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .day-tabs .day-tab {
        color: #8a9aaa;
    }

        body.dark-mode .day-tabs .day-tab:hover {
            color: var(--secondary-color);
            background: rgba(255, 255, 255, 0.05);
        }

body.dark-mode .schedule-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .schedule-card:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .schedule-card .schedule-info .subject-name {
        color: #e0e8f0;
    }

    body.dark-mode .schedule-card .schedule-info .subject-teacher {
        color: #8a9aaa;
    }

    body.dark-mode .schedule-card .schedule-time .time-start {
        color: #e0e8f0;
    }

    body.dark-mode .schedule-card .schedule-time .time-end {
        color: #8a9aaa;
    }

    body.dark-mode .schedule-card .schedule-room {
        color: #8a9aaa;
    }


/* ============================================================ */
/* ===== SUMMARY & STATS CARD ===== */
/* ============================================================ */
.summary-stats-card {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 16px;
    padding: 16px 18px;
    color: #fff;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.25);
}

    .summary-stats-card::after {
        content: '💰';
        position: absolute;
        left: -10px;
        bottom: -20px;
        font-size: 5rem;
        opacity: 0.08;
    }

    .summary-stats-card .summary-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

        .summary-stats-card .summary-top .label {
            font-size: 0.65rem;
            opacity: 0.8;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .summary-stats-card .summary-top .value {
            font-size: 1.8rem;
            font-weight: 800;
            line-height: 1.1;
        }

        .summary-stats-card .summary-top .badge-status {
            background: rgba(255, 255, 255, 0.15);
            padding: 2px 14px;
            border-radius: 20px;
            font-size: 0.6rem;
            font-weight: 600;
            display: inline-block;
            margin-top: 4px;
        }

/* ===== Stats Grid inside Summary ===== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

    .stats-grid .stat-item {
        text-align: center;
        padding: 6px 4px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 10px;
        transition: 0.3s;
        cursor: pointer;
    }

        .stats-grid .stat-item:hover {
            background: rgba(255, 255, 255, 0.12);
            transform: translateY(-2px);
        }

        .stats-grid .stat-item .stat-icon {
            font-size: 1rem;
            display: block;
            margin-bottom: 2px;
            opacity: 0.8;
        }

        .stats-grid .stat-item .stat-value {
            font-weight: 700;
            font-size: 0.85rem;
        }

        .stats-grid .stat-item .stat-label {
            font-size: 0.75rem;
            opacity: 0.7;
        }

/* ============================================================ */
/* ===== QUICK ACTION ===== */
/* ============================================================ */
.quick-action {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

    .quick-action .action-btn {
        background: var(--white-glass);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 10px 6px;
        text-align: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
        cursor: pointer;
        transition: 0.3s;
    }

        .quick-action .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(3, 98, 128, 0.08);
            border-color: var(--secondary-color);
        }

        .quick-action .action-btn .action-icon {
            font-size: 1.2rem;
            display: block;
            margin-bottom: 2px;
        }

        .quick-action .action-btn .action-label {
            font-size: 0.55rem;
            color: var(--text-muted);
            font-weight: 500;
        }


/* ============================================================ */
/* ===== ACCORDION STYLES ===== */
/* ============================================================ */
.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-item {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    overflow: hidden;
    transition: 0.3s;
}

    .accordion-item:hover {
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
    }

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
}

    .accordion-header:hover {
        background: rgba(3, 98, 128, 0.02);
    }

    .accordion-header .header-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .accordion-header .header-left .icon-list {
            color: #FF9800;
            font-size: 1.1rem;
        }

        .accordion-header .header-left .title {
            font-weight: 700;
            font-size: 0.85rem;
            color: var(--text-dark);
        }

    .accordion-header .header-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .accordion-header .header-right .amount {
            font-weight: 800;
            font-size: 1rem;
            color: var(--primary-color);
        }

        .accordion-header .header-right .arrow {
            color: var(--text-muted);
            font-size: 0.8rem;
            transition: transform 0.3s ease;
        }

            .accordion-header .header-right .arrow.open {
                transform: rotate(180deg);
            }

.status-badge {
    font-size: 0.5rem;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}

    .status-badge.paid {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .status-badge.pending {
        background: #fff3e0;
        color: #e65100;
    }

    .status-badge.overdue {
        background: #fce4ec;
        color: #b71c1c;
    }

    .status-badge.partial {
        background: #e3f2fd;
        color: #0d47a1;
    }

body.dark-mode .status-badge.paid {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

body.dark-mode .status-badge.pending {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

body.dark-mode .status-badge.overdue {
    background: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
}

body.dark-mode .status-badge.partial {
    background: rgba(66, 165, 245, 0.2);
    color: #64b5f6;
}

/* ============================================================ */
/* ===== ACCORDION BODY ===== */
/* ============================================================ */
.accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .accordion-body.open {
        max-height: 800px;
    }

    .accordion-body .body-content {
        border-top: 1px solid rgba(0, 0, 0, 0.04);
        padding: 0;
    }

body.dark-mode .accordion-body .body-content {
    border-top-color: rgba(255, 255, 255, 0.05);
}

/* ============================================================ */
/* ===== DETAIL ROW ===== */
/* ============================================================ */
.detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    transition: 0.2s;
}

    .detail-row:hover {
        background: rgba(3, 98, 128, 0.02);
    }

    .detail-row:first-child {
        border-top: none;
    }

body.dark-mode .detail-row {
    border-top-color: rgba(255, 255, 255, 0.03);
}

    body.dark-mode .detail-row:hover {
        background: rgba(255, 255, 255, 0.02);
    }

.detail-row .detail-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .detail-row .detail-left .icon-circle {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

        .detail-row .detail-left .icon-circle.paid {
            background: rgba(76, 175, 80, 0.1);
            color: #4CAF50;
        }

        .detail-row .detail-left .icon-circle.pending {
            background: rgba(255, 152, 0, 0.1);
            color: #FF9800;
        }

        .detail-row .detail-left .icon-circle.overdue {
            background: rgba(244, 67, 54, 0.1);
            color: #F44336;
        }

        .detail-row .detail-left .icon-circle.partial {
            background: rgba(66, 165, 245, 0.1);
            color: #42A5F5;
        }

body.dark-mode .detail-row .detail-left .icon-circle.paid {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

body.dark-mode .detail-row .detail-left .icon-circle.pending {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
}

body.dark-mode .detail-row .detail-left .icon-circle.overdue {
    background: rgba(244, 67, 54, 0.15);
    color: #ef9a9a;
}

body.dark-mode .detail-row .detail-left .icon-circle.partial {
    background: rgba(66, 165, 245, 0.15);
    color: #64b5f6;
}

.detail-row .detail-left .detail-text .main-text {
    font-size: 0.75rem;
    color: var(--text-dark);
    font-weight: 500;
}

.detail-row .detail-left .detail-text .sub-text {
    padding-top: 5px;
    font-size: 0.70rem;
    color: var(--text-muted);
}

    .detail-row .detail-left .detail-text .sub-text i {
        font-size: 0.55rem;
    }

.detail-row .detail-right {
    text-align: left;
}

    .detail-row .detail-right .amount-text {
        font-weight: 700;
        font-size: 0.85rem;
        margin-bottom: 2px;
    }

        .detail-row .detail-right .amount-text.paid {
            color: #4CAF50;
        }

        .detail-row .detail-right .amount-text.pending {
            color: #FF9800;
        }

        .detail-row .detail-right .amount-text.overdue {
            color: #F44336;
        }

        .detail-row .detail-right .amount-text.partial {
            color: #42A5F5;
        }

body.dark-mode .detail-row .detail-right .amount-text.paid {
    color: #81c784;
}

body.dark-mode .detail-row .detail-right .amount-text.pending {
    color: #ffb74d;
}

body.dark-mode .detail-row .detail-right .amount-text.overdue {
    color: #ef9a9a;
}

body.dark-mode .detail-row .detail-right .amount-text.partial {
    color: #64b5f6;
}

.detail-row .detail-right .status-tag {
    font-size: 0.5rem;
    font-weight: 600;
    padding: 1px 10px;
    border-radius: 12px;
    display: inline-block;
}

    .detail-row .detail-right .status-tag.paid {
        background: #e8f5e9;
        color: #1b5e20;
    }

    .detail-row .detail-right .status-tag.pending {
        background: #fff3e0;
        color: #e65100;
    }

    .detail-row .detail-right .status-tag.overdue {
        background: #fce4ec;
        color: #b71c1c;
    }

    .detail-row .detail-right .status-tag.partial {
        background: #e3f2fd;
        color: #0d47a1;
    }

body.dark-mode .detail-row .detail-right .status-tag.paid {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

body.dark-mode .detail-row .detail-right .status-tag.pending {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

body.dark-mode .detail-row .detail-right .status-tag.overdue {
    background: rgba(244, 67, 54, 0.2);
    color: #ef9a9a;
}

body.dark-mode .detail-row .detail-right .status-tag.partial {
    background: rgba(66, 165, 245, 0.2);
    color: #64b5f6;
}

/* ============================================================ */
/* ===== PAYMENT BUTTON ===== */
/* ============================================================ */
.payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Tajawal', sans-serif;
    margin-top: 8px;
}

    .payment-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(3, 98, 128, 0.25);
    }

    .payment-btn i {
        font-size: 0.7rem;
    }


/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */


body.dark-mode .summary-stats-card {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .filter-group select {
    background: rgba(20, 40, 55, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
    color: #e0e8f0;
}

    body.dark-mode .filter-group select option {
        background: #1a2a3a;
    }

body.dark-mode .filter-group label {
    color: #8a9aaa;
}

body.dark-mode .quick-action .action-btn {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .quick-action .action-btn:hover {
        border-color: var(--secondary-color);
    }

    body.dark-mode .quick-action .action-btn .action-label {
        color: #8a9aaa;
    }

body.dark-mode .accordion-item {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .accordion-header .header-left .title {
    color: #e0e8f0;
}

body.dark-mode .accordion-header .header-right .amount {
    color: var(--secondary-color);
}

body.dark-mode .detail-row .detail-left .detail-text .main-text {
    color: #e0e8f0;
}

body.dark-mode .detail-row .detail-left .detail-text .sub-text {
    color: #8a9aaa;
}

body.dark-mode .legend .legend-item {
    color: #8a9aaa;
}

body.dark-mode .stats-grid .stat-item .stat-value {
    color: #fff;
}



/* ============================================================ */
/* ===== SUMMARY CARD ===== */
/* ============================================================ */
.enrollment-summary-card {
    background: linear-gradient(145deg, #1a5276, #154360);
    color: #ffffff;
    padding: 0;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(26, 82, 118, 0.25);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    min-height: 180px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
}

    .enrollment-summary-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(26, 82, 118, 0.35);
    }

    /* ===== الخلفية المتحركة ===== */
    .enrollment-summary-card::before {
        content: '';
        position: absolute;
        top: -40%;
        right: -20%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 70% 30%, rgba(41, 128, 185, 0.08), transparent 60%);
        pointer-events: none;
        animation: cardGlow 8s ease-in-out infinite alternate;
    }

@keyframes cardGlow {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.4;
    }

    100% {
        transform: translate(-15px, 15px) scale(1.1);
        opacity: 0.8;
    }
}

/* ===== العناصر الزخرفية ===== */
.enrollment-summary-card .enrollment-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
    z-index: 0;
}

    .enrollment-summary-card .enrollment-decoration:nth-child(1) {
        width: 160px;
        height: 160px;
        top: -60px;
        left: -50px;
        background: rgba(41, 128, 185, 0.05);
    }

    .enrollment-summary-card .enrollment-decoration:nth-child(2) {
        width: 100px;
        height: 100px;
        bottom: -40px;
        right: -20px;
        background: rgba(255, 255, 255, 0.02);
    }

    .enrollment-summary-card .enrollment-decoration:nth-child(3) {
        width: 40px;
        height: 40px;
        top: 16px;
        right: 16px;
        background: rgba(41, 128, 185, 0.06);
        animation: floatDot 4s ease-in-out infinite alternate;
    }

@keyframes floatDot {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-8px, 8px) scale(1.15);
    }
}

/* ============================================================ */
/* ===== المحتوى الداخلي - تصغير المسافات ===== */
/* ============================================================ */
.enrollment-card-content {
    position: relative;
    z-index: 1;
    padding: 16px 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

/* ===== الأيقونة - تصغير الحجم ===== */
.enrollment-icon-wrapper {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 8px;
    transition: all 0.4s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.enrollment-summary-card:hover .enrollment-icon-wrapper {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(1.04) rotate(-3deg);
    border-color: rgba(255, 255, 255, 0.12);
}

.enrollment-icon-wrapper i {
    font-size: 1.6rem;
    color: #ffffff;
    display: inline-block;
}

/* ===== دوران الأيقونة ===== */
.enrollment-icon-spin {
    animation: iconSpin 5s linear infinite;
}

@keyframes iconSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ===== العنوان - تصغير الحجم ===== */
.enrollment-title {
    font-weight: 800;
    font-size: 1.0rem;
    margin-bottom: 1px;
    color: #ffffff;
    position: relative;
    z-index: 1;
    letter-spacing: 0.2px;
}

/* ===== العنوان الفرعي - تصغير الحجم ===== */
.enrollment-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    color: #ffffff;
    position: relative;
    z-index: 1;
    margin-bottom: 4px;
}

.enrollment-notes {
    font-size: 0.75rem;
    opacity: 0.9;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
    margin:10px 0;
}


/* ===== الفاصل - تصغير ===== */
.enrollment-divider {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(41, 128, 185, 0.5), rgba(255, 255, 255, 0.2));
    margin: 4px auto 8px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

/* ===== الشارة / الزر - تصغير ===== */
.enrollment-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    color: #ffffff;
    padding: 5px 16px 5px 14px;
    border-radius: 60px;
    font-size: 0.65rem;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

    .enrollment-badge-pill i {
        font-size: 0.6rem;
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: rgba(255, 255, 255, 0.1);
        padding: 3px;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.enrollment-summary-card:hover .enrollment-badge-pill i {
    transform: translateX(-5px) scale(1.08);
    background: rgba(255, 255, 255, 0.2);
}

.enrollment-badge-pill:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.12);
    transform: scale(1.02);
}



/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .enrollment-summary-card {
    background: linear-gradient(145deg, #0d2b3f, #092030);
    border-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

    body.dark-mode .enrollment-summary-card:hover {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    }

body.dark-mode .enrollment-icon-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.03);
}

    body.dark-mode .enrollment-icon-wrapper i {
        color: #82b1d4;
    }

body.dark-mode .enrollment-badge-pill {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.03);
    color: #82b1d4;
}

    body.dark-mode .enrollment-badge-pill:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #a8c8e8;
    }

    body.dark-mode .enrollment-badge-pill i {
        background: rgba(255, 255, 255, 0.04);
    }

body.dark-mode .enrollment-card-footer {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.02);
}

    body.dark-mode .enrollment-card-footer .footer-item {
        color: rgba(255, 255, 255, 0.25);
    }

        body.dark-mode .enrollment-card-footer .footer-item.expiry {
            background: rgba(255, 213, 79, 0.06);
            border-color: rgba(255, 213, 79, 0.08);
            color: #ffd54f;
        }

            body.dark-mode .enrollment-card-footer .footer-item.expiry .expiry-date {
                color: #e0e8f0;
                background: rgba(255, 213, 79, 0.03);
            }

body.dark-mode .enrollment-summary-card .enrollment-decoration:nth-child(1) {
    background: rgba(41, 128, 185, 0.02);
}



/* ============================================================ */
/* ===== COMPLAINT CARD ===== */
/* ============================================================ */
.complaint-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom:50px; /* Btn Add Hight */
}

.complaint-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(3, 98, 128, 0.06);
    transition: 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    /* ===== الشريط الجانبي حسب النوع ===== */
    .complaint-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        border-radius: 0 4px 4px 0;
        transition: 0.3s;
    }

    .complaint-card.complaint::before {
        background: var(--complaint-color);
    }

    .complaint-card.suggestion::before {
        background: var(--suggestion-color);
    }

    /* ===== تأثير التمرير حسب النوع ===== */
    .complaint-card.complaint:hover {
        border-color: var(--complaint-color);
        box-shadow: 0 8px 28px rgba(231, 76, 60, 0.1);
        transform: translateY(-2px);
    }

    .complaint-card.suggestion:hover {
        border-color: var(--suggestion-color);
        box-shadow: 0 8px 28px rgba(41, 128, 185, 0.1);
        transform: translateY(-2px);
    }

    .complaint-card .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        padding-right: 6px;
    }

    .complaint-card .card-title {
        font-weight: 700;
        font-size: 0.8rem;
        color: var(--text-dark);
        flex: 1;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* ===== شارة النوع ===== */
    .complaint-card .type-badge {
        font-size: 0.5rem;
        padding: 2px 10px;
        border-radius: 30px;
        font-weight: 600;
        white-space: nowrap;
        flex-shrink: 0;
    }

        .complaint-card .type-badge.complaint {
            background: var(--complaint-bg);
            color: var(--complaint-color);
            border: 1px solid rgba(231, 76, 60, 0.15);
        }

        .complaint-card .type-badge.suggestion {
            background: var(--suggestion-bg);
            color: var(--suggestion-color);
            border: 1px solid rgba(41, 128, 185, 0.15);
        }

    /* ===== شارة الحالة (صغيرة) ===== */
    .complaint-card .status-badge {
        font-size: 0.45rem;
        padding: 1px 8px;
        border-radius: 20px;
        font-weight: 500;
        white-space: nowrap;
        flex-shrink: 0;
        background: rgba(0, 0, 0, 0.04);
        color: var(--text-muted);
    }

        .complaint-card .status-badge.pending {
            color: var(--pending-color);
            background: var(--pending-bg);
        }

        .complaint-card .status-badge.in-progress {
            color: var(--in-progress-color);
            background: var(--in-progress-bg);
        }

        .complaint-card .status-badge.resolved {
            color: var(--resolved-color);
            background: var(--resolved-bg);
        }

        .complaint-card .status-badge.rejected {
            color: var(--rejected-color);
            background: var(--rejected-bg);
        }

    .complaint-card .card-desc {
        font-size: 0.7rem;
        color: var(--text-muted);
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding-right: 6px;
    }

    .complaint-card .card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 2px;
        padding-right: 6px;
    }

        .complaint-card .card-footer .card-meta {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.5rem;
            color: var(--text-muted);
        }

            .complaint-card .card-footer .card-meta i {
                font-size: 0.45rem;
                margin-left: 2px;
            }

            .complaint-card .card-footer .card-meta .meta-item {
                display: flex;
                align-items: center;
                gap: 3px;
            }

        .card-actions {
            display: flex;
            gap: 4px;
        }

            .card-actions button {
                width: 28px;
                height: 28px;
                border: none;
                border-radius: 50%;
                background: rgba(3, 98, 128, 0.04);
                color: var(--primary-color);
                font-size: 0.6rem;
                cursor: pointer;
                transition: 0.3s;
                display: flex;
                align-items: center;
                justify-content: center;
            }

               .card-actions button:hover {
                    background: rgba(3, 98, 128, 0.1);
                    transform: scale(1.08);
                }

                .card-actions button.danger:hover {
                    background: rgba(231, 76, 60, 0.1);
                    color: #e74c3c;
                }

/* ============================================================ */
/* ===== FAB BUTTON - ثابت ===== */
/* ============================================================ */
.fab-fixed {
    position: fixed;
    bottom: 100px;
    left: 30px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

    .fab-fixed .fab-btn {
        pointer-events: auto;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: #fff;
        font-size: 1.2rem;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 8px 32px rgba(3, 98, 128, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

        .fab-fixed .fab-btn:hover {
            transform: scale(1.08) rotate(90deg);
            box-shadow: 0 12px 44px rgba(3, 98, 128, 0.5);
        }

        .fab-fixed .fab-btn:active {
            transform: scale(0.95);
        }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .complaint-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

    body.dark-mode .complaint-card .card-title {
        color: #e0e8f0;
    }

    body.dark-mode .complaint-card .card-desc {
        color: #8a9aaa;
    }

    body.dark-mode .complaint-card .card-footer .card-meta {
        color: #8a9aaa;
    }

    body.dark-mode  .card-actions button {
        background: rgba(255, 255, 255, 0.04);
        color: #8a9aaa;
    }

        body.dark-mode .card-actions button:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        body.dark-mode  .card-actions button.danger:hover {
            background: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
        }

    body.dark-mode .complaint-card.complaint:hover {
        border-color: var(--complaint-color);
        box-shadow: 0 8px 28px rgba(231, 76, 60, 0.06);
    }

    body.dark-mode .complaint-card.suggestion:hover {
        border-color: var(--suggestion-color);
        box-shadow: 0 8px 28px rgba(41, 128, 185, 0.06);
    }

body.dark-mode .stat-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.04);
}

    body.dark-mode .stat-card .stat-number {
        color: #e0e8f0;
    }

    body.dark-mode .stat-card .stat-label {
        color: #8a9aaa;
    }

body.dark-mode .legend {
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .legend .legend-item {
        color: #8a9aaa;
    }

body.dark-mode .fab-fixed .fab-btn {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

    body.dark-mode .fab-fixed .fab-btn:hover {
        box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .fab-fixed .fab-btn .fab-tooltip {
        background: rgba(0, 0, 0, 0.9);
    }


/* ============================================================ */
/* ===== LESSON CARD ===== */
/* ============================================================ */
.lesson-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(3, 98, 128, 0.06);
    margin-bottom: 14px;
    transition: 0.3s;
    position: relative;
    overflow: hidden;
}

    .lesson-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 5px;
        height: 100%;
        border-radius: 0 4px 4px 0;
        background: var(--math-color);
    }

    .lesson-card.science::before {
        background: var(--science-color);
    }

    .lesson-card.arabic::before {
        background: var(--arabic-color);
    }

    .lesson-card.english::before {
        background: var(--english-color);
    }

    .lesson-card.history::before {
        background: var(--history-color);
    }

    .lesson-card .lesson-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 6px;
    }

    .lesson-card .lesson-subject {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lesson-card .lesson-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
    }

        .lesson-card .lesson-icon.math {
            background: var(--math-bg);
            color: var(--math-color);
        }

        .lesson-card .lesson-icon.science {
            background: var(--science-bg);
            color: var(--science-color);
        }

        .lesson-card .lesson-icon.arabic {
            background: var(--arabic-bg);
            color: var(--arabic-color);
        }

        .lesson-card .lesson-icon.english {
            background: var(--english-bg);
            color: var(--english-color);
        }

        .lesson-card .lesson-icon.history {
            background: var(--history-bg);
            color: var(--history-color);
        }

    .lesson-card .lesson-name {
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--text-dark);
    }

    /* ===== عنوان الدرس (حقل جديد) ===== */
    .lesson-card .lesson-title {
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 2px;
        font-weight: 500;
    }

        .lesson-card .lesson-title i {
            font-size: 0.5rem;
            margin-left: 3px;
            color: var(--primary-color);
        }

    .lesson-card .lesson-badge {
        font-size: 0.5rem;
        padding: 2px 10px;
        border-radius: 30px;
        font-weight: 600;
        background: rgba(3, 98, 128, 0.06);
        color: var(--text-muted);
        white-space: nowrap;
    }

        .lesson-card .lesson-badge.active {
            background: #eafaf1;
            color: var(--present-color);
            border: 1px solid rgba(39, 174, 96, 0.1);
        }

        .lesson-card .lesson-badge.upcoming {
            background: #eaf2f8;
            color: var(--in-progress-color);
            border: 1px solid rgba(41, 128, 185, 0.1);
        }

        .lesson-card .lesson-badge.completed {
            background: #f5f5f5;
            color: #888;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .lesson-card .lesson-badge.absent-badge {
            background: #fdedec;
            color: var(--absent-color);
            border: 1px solid rgba(231, 76, 60, 0.1);
        }

    .lesson-card .lesson-details {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 4px 0 6px;
        padding-right: 44px;
    }

        .lesson-card .lesson-details .detail-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.5rem;
            color: var(--text-muted);
        }

            .lesson-card .lesson-details .detail-item i {
                font-size: 0.45rem;
            }

    /* ===== حضور الطالب ===== */
    .lesson-card .student-attendance {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-right: 44px;
        margin: 2px 0 6px;
    }

        .lesson-card .student-attendance .attendance-status {
            font-size: 0.55rem;
            font-weight: 600;
            padding: 2px 10px;
            border-radius: 30px;
        }

            .lesson-card .student-attendance .attendance-status.present {
                background: #eafaf1;
                color: var(--present-color);
            }

            .lesson-card .student-attendance .attendance-status.absent {
                background: #fdedec;
                color: var(--absent-color);
            }

            .lesson-card .student-attendance .attendance-status.late {
                background: #fef9e7;
                color: var(--late-color);
            }

        .lesson-card .student-attendance .attendance-label {
            font-size: 0.5rem;
            color: var(--text-muted);
        }

    .lesson-card .lesson-desc {
        font-size: 0.65rem;
        color: var(--text-muted);
        line-height: 1.5;
        padding-right: 44px;
    }

    .lesson-card .lesson-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        padding-right: 44px;
        flex-wrap: wrap;
    }

        .lesson-card .lesson-actions .action-btn {
            padding: 4px 14px;
            border: none;
            border-radius: 30px;
            font-size: 0.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            font-family: 'Tajawal', sans-serif;
            display: flex;
            align-items: center;
            gap: 4px;
        }

            .lesson-card .lesson-actions .action-btn.primary {
                background: var(--primary-color);
                color: #fff;
            }

                .lesson-card .lesson-actions .action-btn.primary:hover {
                    background: var(--primary-dark);
                    transform: scale(1.02);
                }

            .lesson-card .lesson-actions .action-btn.secondary {
                background: rgba(3, 98, 128, 0.06);
                color: var(--text-muted);
            }

                .lesson-card .lesson-actions .action-btn.secondary:hover {
                    background: rgba(3, 98, 128, 0.12);
                }

            .lesson-card .lesson-actions .action-btn.success {
                background: var(--present-color);
                color: #fff;
            }

                .lesson-card .lesson-actions .action-btn.success:hover {
                    background: #1e8449;
                    transform: scale(1.02);
                }

/* ============================================================ */
/* ===== MATERIALS SECTION ===== */
/* ============================================================ */
.section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .section-title i {
        color: var(--primary-color);
        font-size: 0.7rem;
    }

.materials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.material-item {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-align: center;
    transition: 0.3s;
    cursor: pointer;
}

    .material-item:hover {
        transform: translateY(-2px);
        border-color: var(--secondary-color);
        box-shadow: 0 4px 16px rgba(3, 98, 128, 0.06);
    }

    .material-item .material-icon {
        font-size: 1.2rem;
        color: var(--primary-color);
        margin-bottom: 4px;
        display: block;
    }

    .material-item .material-name {
        font-size: 0.6rem;
        font-weight: 600;
        color: var(--text-dark);
    }

    .material-item .material-size {
        font-size: 0.45rem;
        color: var(--text-muted);
    }


/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */

    body.dark-mode .lesson-card {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .lesson-card .lesson-name {
            color: #e0e8f0;
        }

        body.dark-mode .lesson-card .lesson-title {
            color: #8a9aaa;
        }

        body.dark-mode .lesson-card .lesson-desc {
            color: #8a9aaa;
        }

        body.dark-mode .lesson-card .lesson-details .detail-item {
            color: #8a9aaa;
        }

        body.dark-mode .lesson-card .student-attendance .attendance-label {
            color: #8a9aaa;
        }

        body.dark-mode .lesson-card .lesson-actions .action-btn.secondary {
            background: rgba(255, 255, 255, 0.04);
            color: #8a9aaa;
        }

            body.dark-mode .lesson-card .lesson-actions .action-btn.secondary:hover {
                background: rgba(255, 255, 255, 0.08);
            }

    body.dark-mode .material-item {
        background: rgba(20, 40, 55, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
    }

        body.dark-mode .material-item .material-name {
            color: #e0e8f0;
        }

        body.dark-mode .material-item .material-size {
            color: #8a9aaa;
        }

    body.dark-mode .section-title {
        color: #e0e8f0;
    }


.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(3, 98, 128, 0.2);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(3, 98, 128, 0.3);
    }

.btn-danger {
    background: linear-gradient(135deg, var(--danger-color), #c0392b);
    color: #fff;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
}

    .btn-danger:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(231, 76, 60, 0.3);
    }

.btn-outline-danger {
    background: transparent;
    color: var(--danger-color);
    border: 2px solid var(--danger-color);
}

    .btn-outline-danger:hover {
        background: var(--danger-color);
        color: #fff;
        transform: translateY(-2px);
    }

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #1e8449);
    color: #fff;
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.2);
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(39, 174, 96, 0.3);
    }

/* ============================================================ */
/* ===== LOGOUT SECTION ===== */
/* ============================================================ */
.logout-section {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    margin-top: 4px;
}

    .logout-section .logout-warning {
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--danger-bg);
        padding: 10px 14px;
        border-radius: 12px;
        margin-bottom: 12px;
        border-right: 3px solid var(--danger-color);
    }

        .logout-section .logout-warning i {
            color: var(--danger-color);
            font-size: 1rem;
        }

        .logout-section .logout-warning .warning-text {
            font-size: 0.6rem;
            color: var(--danger-color);
            font-weight: 500;
        }

/* ============================================================ */
/* ===== RE-CARD (Progress Card) ===== */
/* ============================================================ */
.re-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    overflow: hidden;
    margin-bottom: 16px;
}

.re-card-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 14px 18px;
    color: #fff;
}

.re-flex {
    display: flex;
}

.re-justify-between {
    justify-content: space-between;
}

.re-align-center {
    align-items: center;
}

.re-card-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
}

.re-badge {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 14px;
    border-radius: 60px;
    font-size: 0.6rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

.re-card-body {
    padding: 14px 18px;
}

/* ===== PROGRESS BAR ===== */
.re-progress {
    display: flex;
    height: 8px;
    overflow: hidden;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.re-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #0d6efd;
    transition: width 0.6s ease;
}

.re-progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.re-progress-bar-animated {
    animation: re-progress-bar-stripes 1s linear infinite;
}

@keyframes re-progress-bar-stripes {
    0% {
        background-position-x: 1rem;
    }
}
/* ============================================================ */
/* ===== STEP INDICATORS ===== */
/* ============================================================ */
.step-indicators {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 0 4px;
    position: relative;
    gap: 4px;
}

    .step-indicators::before {
        content: '';
        position: absolute;
        top: 16px;
        left: 20px;
        right: 20px;
        height: 3px;
        background: rgba(3, 98, 128, 0.06);
        z-index: 0;
        border-radius: 10px;
    }

    .step-indicators::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 20px;
        height: 3px;
        background: linear-gradient(90deg, var(--progress-end), var(--progress-start));
        z-index: 0;
        border-radius: 10px;
        transition: width 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        width: 0%;
    }

.step-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 1;
    flex: 1;
    min-width: 32px;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
}

    .step-dot .dot-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        /*        border: 3px solid rgba(3, 98, 128, 0.08);
*/ display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.6rem;
        font-weight: 700;
        color: var(--text-muted);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        flex-shrink: 0;
        position: relative;
    }

        .step-dot .dot-circle::after {
            content: '';
            position: absolute;
            inset: -4px;
            border-radius: 50%;
            border: 2px solid transparent;
            transition: 0.4s;
        }

    .step-dot.active .dot-circle {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
        box-shadow: 0 4px 20px rgba(3, 98, 128, 0.3);
        transform: scale(1.08);
        animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

        .step-dot.active .dot-circle::after {
            border-color: rgba(3, 98, 128, 0.15);
            animation: ripple 1.5s ease-out infinite;
        }

@keyframes ripple {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.step-dot.completed .dot-circle {
    background: var(--success-color);
    border-color: var(--success-color);
    color: #fff;
    transform: scale(1);
}

    .step-dot.completed .dot-circle::after {
        border-color: rgba(39, 174, 96, 0.15);
        animation: ripple 1.5s ease-out infinite;
    }

.step-dot .dot-check {
    display: none;
    font-size: 0.6rem;
}

.step-dot.completed .dot-number {
    display: none;
}

.step-dot.completed .dot-check {
    display: inline;
}

.step-dot .step-label {
    font-size: 0.4rem;
    color: var(--text-muted);
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    max-width: 42px;
    word-break: break-word;
    transition: 0.3s;
}

.step-dot.active .step-label {
    color: var(--primary-color);
    font-weight: 700;
    transform: scale(1.05);
}

.step-dot.completed .step-label {
    color: var(--success-color);
}

.step-dot:hover .step-label {
    color: var(--primary-color);
}

.step-dot:hover .dot-circle {
    transform: scale(1.05);
    border-color: var(--primary-color);
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1.08);
        opacity: 1;
    }
}

/* ============================================================ */
/* ===== STEP CONTENT ===== */
/* ============================================================ */
.step-content {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    margin-bottom: 14px;
    animation: fadeSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.step-content .step-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .step-content .step-title i {
        color: var(--primary-color);
        font-size: 0.8rem;
    }

.step-content .step-subtitle {
    font-size: 0.8rem;
    color: var(--text-dark);
    margin-bottom: 14px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ============================================================ */
/* ===== SWITCH (TOGGLE) ===== */
/* ============================================================ */
.form-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

    .form-switch input[type="checkbox"] {
        width: 44px;
        height: 24px;
        appearance: none;
        -webkit-appearance: none;
        background: #ccc;
        border-radius: 30px;
        position: relative;
        cursor: pointer;
        transition: 0.3s;
        flex-shrink: 0;
    }

        .form-switch input[type="checkbox"]:checked {
            background: var(--primary-color);
        }

        .form-switch input[type="checkbox"]::before {
            content: '';
            position: absolute;
            top: 2px;
            right: 2px;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            transition: 0.3s;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .form-switch input[type="checkbox"]:checked::before {
            right: 22px;
        }

    .form-switch .switch-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--text-dark);
    }


/* ============================================================ */
/* ===== PAYMENT (محسّن) ===== */
/* ============================================================ */
.re-payment-summary .re-payment-box {
    border-radius: 14px;
    padding: 14px 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

    .re-payment-summary .re-payment-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 24px rgba(3, 98, 128, 0.08);
        border-color: rgba(3, 98, 128, 0.06);
    }

    .re-payment-summary .re-payment-box small {
        font-size: 0.55rem;
        font-weight: 500;
    }

    .re-payment-summary .re-payment-box h4 {
        font-size: 1rem;
        font-weight: 800;
    }

    .re-payment-summary .re-payment-box h3 {
        font-size: 1.15rem;
        font-weight: 800;
    }

    .re-payment-summary .re-payment-box.bg-primary {
        background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    }

.re-payment-form h6 {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.re-payment-form .re-form-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-dark);
    display: block;
    margin-bottom: 4px;
}

    .re-payment-form .re-form-label i {
        color: var(--primary-color);
        margin-left: 4px;
    }

.re-payment-form .re-form-control {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid rgba(3, 98, 128, 0.08);
    border-radius: 12px;
    font-size: 0.75rem;
    font-family: 'Tajawal', sans-serif;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-dark);
}

    .re-payment-form .re-form-control:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 4px rgba(3, 98, 128, 0.06);
    }

    .re-payment-form .re-form-control::placeholder {
        color: var(--text-muted);
        opacity: 0.6;
    }

.re-payment-form .alert {
    font-size: 0.6rem;
    padding: 10px 14px;
    border-radius: 12px;
}

.re-payment-form .alert-danger {
    background: rgba(231, 76, 60, 0.06);
    border-color: rgba(231, 76, 60, 0.12);
    color: var(--danger-color);
}

.re-payment-form .alert-warning {
    background: rgba(243, 156, 18, 0.06);
    border-color: rgba(243, 156, 18, 0.12);
    color: var(--warning-color);
}

.re-payment-form .alert-success {
    background: rgba(39, 174, 96, 0.06);
    border-color: rgba(39, 174, 96, 0.12);
    color: var(--success-color);
}

.re-payment-instructions .alert {
    background: rgba(41, 128, 185, 0.04);
    border-color: rgba(41, 128, 185, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
}

    .re-payment-instructions .alert h6 {
        font-size: 0.7rem;
        color: var(--text-dark);
        font-weight: 700;
    }

    .re-payment-instructions .alert ul {
        font-size: 0.55rem;
        color: var(--text-muted);
        padding-right: 18px;
        margin: 4px 0 0;
    }

        .re-payment-instructions .alert ul li {
            margin-bottom: 3px;
            list-style-type: disc;
        }

/* ============================================================ */
/* ===== CONFIRM CARD ===== */
/* ============================================================ */
.confirm-card-modern {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    overflow: hidden;
}

.card-header-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
}

    .card-header-mini .header-icon {
        font-size: 1.2rem;
    }

    .card-header-mini .header-title {
        font-size: 0.85rem;
        font-weight: 700;
        margin: 0;
        flex: 1;
    }

    .card-header-mini .header-step {
        font-size: 0.55rem;
        background: rgba(255, 255, 255, 0.15);
        padding: 2px 12px;
        border-radius: 30px;
    }

.card-content {
    padding: 16px 18px;
}

.info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.info-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(3, 98, 128, 0.04);
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 0.6rem;
    color: var(--text-muted);
    border: 1px solid rgba(3, 98, 128, 0.04);
}

    .info-chip i {
        font-size: 0.55rem;
        color: var(--primary-color);
    }

    .info-chip strong {
        color: var(--text-dark);
        font-weight: 600;
    }

.status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(3, 98, 128, 0.06);
    transition: 0.3s;
}

    .status-item.active {
        border-color: var(--success-color);
        background: rgba(39, 174, 96, 0.04);
    }

    .status-item.inactive {
        border-color: rgba(231, 76, 60, 0.1);
        background: rgba(231, 76, 60, 0.02);
    }

    .status-item .status-icon {
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .status-item .status-text {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

        .status-item .status-text span {
            font-size: 0.55rem;
            color: var(--text-muted);
        }

        .status-item .status-text strong {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-dark);
        }

    .status-item.active .status-text strong {
        color: var(--success-color);
    }

    .status-item.inactive .status-text strong {
        color: var(--danger-color);
    }

.amount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: 12px 16px;
    border-radius: 12px;
    color: #fff;
}

    .amount-box .amount-info {
        display: flex;
        flex-direction: column;
    }

    .amount-box .amount-label {
        font-size: 0.55rem;
        opacity: 0.8;
    }

    .amount-box .amount-value {
        font-size: 1.1rem;
        font-weight: 800;
    }

    .amount-box .amount-status {
        font-size: 0.6rem;
        background: rgba(255, 255, 255, 0.15);
        padding: 4px 14px;
        border-radius: 30px;
    }

/* ============================================================ */
/* ===== STATUS CARD ===== */
/* ============================================================ */
.status-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    overflow: hidden;
    transition: 0.3s;
}

    .status-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 32px rgba(3, 98, 128, 0.1);
    }

.status-card-header {
    padding: 12px 16px;
    background: rgba(3, 98, 128, 0.03);
    border-bottom: 1px solid rgba(3, 98, 128, 0.04);
}

.status-progress-bar {
    height: 4px;
    background: rgba(3, 98, 128, 0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 8px;
}

    .status-progress-bar .progress-fill {
        height: 100%;
        border-radius: 10px;
        background: linear-gradient(90deg, var(--success-color), #2ecc71);
        transition: width 1s ease;
        width: 100%;
    }

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 30px;
}

    .status-badge.success {
        background: rgba(39, 174, 96, 0.08);
        color: var(--success-color);
    }

    .status-badge .badge-icon {
        font-size: 0.7rem;
    }

.status-card-body {
    padding: 18px 16px;
    text-align: center;
}

.status-icon-wrapper {
    margin-bottom: 12px;
}

.status-icon-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 2rem;
    animation: pulseRing 2s ease-in-out infinite;
}

    .status-icon-ring.success {
        background: rgba(39, 174, 96, 0.06);
        border: 2px solid rgba(39, 174, 96, 0.1);
    }

@keyframes pulseRing {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.status-main-icon {
    display: block;
}

.status-order-number {
    margin-bottom: 8px;
}

    .status-order-number .order-label {
        font-size: 0.55rem;
        color: var(--text-muted);
        display: block;
    }

    .status-order-number .order-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--primary-color);
        margin: 0;
    }

.status-details {
    margin-bottom: 8px;
}

    .status-details .status-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: var(--text-dark);
        margin: 0;
    }

        .status-details .status-title.success {
            color: var(--success-color);
        }

    .status-details .status-description {
        font-size: 0.65rem;
        color: var(--text-muted);
        margin: 2px 0 0;
    }

.status-notes {
    background: rgba(41, 128, 185, 0.04);
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.6rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 12px;
    border-right: 3px solid var(--info-color);
    text-align: right;
}

    .status-notes i {
        color: var(--info-color);
        font-size: 0.7rem;
    }

.status-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

    .status-meta .meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 0.55rem;
        color: var(--text-muted);
    }

        .status-meta .meta-item i {
            font-size: 0.5rem;
        }

.status-card-footer {
    padding: 10px 16px;
    border-top: 1px solid rgba(3, 98, 128, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    color: var(--text-muted);
}

    .status-card-footer .footer-status {
        display: flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
    }

        .status-card-footer .footer-status.success {
            color: var(--success-color);
        }

/* ============================================================ */
/* ===== BUTTONS ===== */
/* ============================================================ */
.step-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Tajawal', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    box-shadow: 0 4px 16px rgba(3, 98, 128, 0.15);
}

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(3, 98, 128, 0.25);
    }

.btn-secondary {
    background: rgba(3, 98, 128, 0.06);
    color: var(--text-muted);
}

    .btn-secondary:hover {
        background: rgba(3, 98, 128, 0.1);
        color: var(--text-dark);
    }

.btn-success {
    background: linear-gradient(135deg, var(--success-color), #1e8449);
    color: #fff;
    box-shadow: 0 4px 16px rgba(39, 174, 96, 0.15);
}

    .btn-success:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(39, 174, 96, 0.25);
    }

    .btn-success:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
    }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .re-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .re-card-header {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .re-badge {
    background: rgba(255, 255, 255, 0.06);
    color: #e0e8f0;
}

body.dark-mode .re-step-label {
    color: #8a9aaa;
}

body.dark-mode .step-content {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .step-content .step-title {
        color: #e0e8f0;
    }

    body.dark-mode .step-content .step-subtitle {
        color: #8a9aaa;
    }

body.dark-mode .section-title {
    color: #e0e8f0;
}

body.dark-mode .form-group label {
    color: #e0e8f0;
}

body.dark-mode .form-control {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.05);
    color: #e0e8f0;
}

    body.dark-mode .form-control:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 4px rgba(22, 200, 221, 0.06);
        background: rgba(255, 255, 255, 0.06);
    }

    body.dark-mode .form-control::placeholder {
        color: #6a7a8a;
    }

body.dark-mode .form-switch .switch-label {
    color: #e0e8f0;
}

body.dark-mode .step-dot .dot-circle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.05);
    color: #8a9aaa;
}

body.dark-mode .step-dot.active .dot-circle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

body.dark-mode .step-dot .step-label {
    color: #8a9aaa;
}

body.dark-mode .step-dot.active .step-label {
    color: var(--secondary-color);
}

body.dark-mode .btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: #8a9aaa;
}

    body.dark-mode .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #e0e8f0;
    }

/* Agreement Dark Mode */
body.dark-mode .agreement-section {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .agreement-section:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark-mode .agreement-section .section-content h5 {
        color: #e0e8f0;
    }

    body.dark-mode .agreement-section .section-content p {
        color: #8a9aaa;
    }

    body.dark-mode .agreement-section .section-content .table thead th {
        background: rgba(255, 255, 255, 0.04);
        color: #e0e8f0;
    }

    body.dark-mode .agreement-section .section-content .table td {
        color: #8a9aaa;
    }

body.dark-mode .list-group-item {
    color: #8a9aaa;
    border-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .agreement-box .form-check .form-check-label {
    color: #8a9aaa;
}

    body.dark-mode .agreement-box .form-check .form-check-label strong {
        color: #e0e8f0;
    }

/* Payment Dark Mode */
body.dark-mode .re-payment-form .re-form-label {
    color: #e0e8f0;
}

body.dark-mode .re-payment-form .re-form-control {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.05);
    color: #e0e8f0;
}

    body.dark-mode .re-payment-form .re-form-control:focus {
        border-color: var(--secondary-color);
        box-shadow: 0 0 0 4px rgba(22, 200, 221, 0.06);
        background: rgba(255, 255, 255, 0.06);
    }

body.dark-mode .re-payment-instructions .alert {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.03);
}

    body.dark-mode .re-payment-instructions .alert h6 {
        color: #e0e8f0;
    }

    body.dark-mode .re-payment-instructions .alert ul {
        color: #8a9aaa;
    }

/* Confirm Card Dark Mode */
body.dark-mode .confirm-card-modern {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .card-header-mini {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

body.dark-mode .info-chip {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.03);
    color: #8a9aaa;
}

    body.dark-mode .info-chip strong {
        color: #e0e8f0;
    }

body.dark-mode .status-item {
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .status-item .status-text strong {
        color: #e0e8f0;
    }

    body.dark-mode .status-item.active {
        border-color: var(--success-color);
        background: rgba(39, 174, 96, 0.04);
    }

        body.dark-mode .status-item.active .status-text strong {
            color: var(--success-color);
        }

    body.dark-mode .status-item.inactive {
        border-color: rgba(231, 76, 60, 0.08);
        background: rgba(231, 76, 60, 0.02);
    }

        body.dark-mode .status-item.inactive .status-text strong {
            color: var(--danger-color);
        }

body.dark-mode .amount-box {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
}

/* Status Card Dark Mode */
body.dark-mode .status-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .status-card-header {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.03);
}

body.dark-mode .status-details .status-title {
    color: #e0e8f0;
}

body.dark-mode .status-details .status-description {
    color: #8a9aaa;
}

body.dark-mode .status-notes {
    background: rgba(41, 128, 185, 0.04);
    color: #8a9aaa;
}

body.dark-mode .status-meta .meta-item {
    color: #8a9aaa;
}

body.dark-mode .status-card-footer {
    border-color: rgba(255, 255, 255, 0.03);
    color: #8a9aaa;
}

body.dark-mode .status-order-number .order-value {
    color: var(--secondary-color);
}

/* ============================================================ */
/* ===== TOAST ===== */
/* ============================================================ */
.toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: var(--max-width);
    width: 90%;
    pointer-events: none;
}

.toast-custom {
    background: rgba(20, 40, 55, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    padding: 10px 16px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    width: 100%;
    justify-content: center;
}

    .toast-custom i {
        font-size: 0.9rem;
        color: var(--secondary-color);
    }

    .toast-custom .close-toast {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 4px;
        transition: 0.3s;
    }

        .toast-custom .close-toast:hover {
            color: #fff;
            transform: scale(1.1);
        }

    .toast-custom.success i {
        color: var(--success-color);
    }

    .toast-custom.danger i {
        color: var(--danger-color);
    }

    .toast-custom.warning i {
        color: var(--warning-color);
    }

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.dark-mode .toast-custom {
    background: rgba(0, 0, 0, 0.92);
}



/* ===== البطاقة الرئيسية ===== */
.status-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

    .status-card:hover {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    }

/* ===== الهيدر ===== */
.status-card-header {
    padding: 16px 24px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header-draft {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.header-pending {
    background: linear-gradient(135deg, #fef9e7, #fdebd0);
}

.header-approved {
    background: linear-gradient(135deg, #eafaf1, #d5f5e3);
}

.header-rejected {
    background: linear-gradient(135deg, #fdedec, #fadbd8);
}

/* ===== شريط التقدم ===== */
.status-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transition: width 1s ease-in-out;
}

.card-approved .progress-fill {
    background: linear-gradient(90deg, #27ae60, #2ecc71);
}

.card-rejected .progress-fill {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.card-pending .progress-fill {
    background: linear-gradient(90deg, #f39c12, #e67e22);
}

.card-draft .progress-fill {
    background: linear-gradient(90deg, #95a5a6, #7f8c8d);
}

/* ===== الشارة ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.badge-draft {
    color: #6c757d;
    border: 1px solid #dee2e6;
}

.badge-pending {
    color: #e67e22;
    border: 1px solid #f39c12;
}

.badge-approved {
    color: #27ae60;
    border: 1px solid #2ecc71;
}

.badge-rejected {
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.badge-icon {
    font-size: 1.1rem;
}

/* ===== الجسم ===== */
.status-card-body {
    padding: 32px 24px 24px;
    text-align: center;
}

/* ===== الأيقونة الرئيسية ===== */
.status-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.status-icon-ring {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.status-card:hover .status-icon-ring {
    transform: scale(1.08) rotate(4deg);
}

.ring-draft {
    border: 3px solid #dee2e6;
}

.ring-pending {
    border: 3px solid #f39c12;
    animation: pulse-ring 1.5s infinite;
}

.ring-approved {
    border: 3px solid #2ecc71;
}

.ring-rejected {
    border: 3px solid #e74c3c;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(243, 156, 18, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0);
    }
}

.status-main-icon {
    font-size: 3.5rem;
    line-height: 1;
}

.icon-draft {
    opacity: 0.6;
}

.icon-pending {
    animation: spin-icon 3s linear infinite;
}

.icon-approved {
    animation: bounce-icon 2s ease-in-out infinite;
}

.icon-rejected {
    animation: shake-icon 2s ease-in-out infinite;
}

@keyframes spin-icon {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce-icon {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

@keyframes shake-icon {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-8deg);
    }

    75% {
        transform: rotate(8deg);
    }
}

/* ===== رقم الطلب ===== */
.status-order-number {
    background: rgba(0, 0, 0, 0.02);
    padding: 8px 16px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 16px;
}

.order-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6c757d;
    display: block;
    letter-spacing: 1px;
}

.order-value {
    font-weight: 700;
    color: #2d3436;
    margin: 0;
    font-family: 'Courier New', monospace;
}

/* ===== العنوان والوصف ===== */
.status-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.text-draft {
    color: #6c757d;
}

.text-pending {
    color: #e67e22;
}

.text-approved {
    color: #27ae60;
}

.text-rejected {
    color: #e74c3c;
}

.status-description {
    color: #636e72;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

/* ===== الملاحظات ===== */
.status-notes {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    margin: 16px 0;
    text-align: right;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.notes-draft {
    background: #f8f9fa;
    border-right: 4px solid #6c757d;
}

.notes-pending {
    background: #fef9e7;
    border-right: 4px solid #f39c12;
}

.notes-approved {
    background: #eafaf1;
    border-right: 4px solid #27ae60;
}

.notes-rejected {
    background: #fdedec;
    border-right: 4px solid #e74c3c;
}

.status-notes i {
    font-size: 1.2rem;
    opacity: 0.6;
    margin-top: 2px;
}

/* ===== معلومات إضافية ===== */
.status-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin: 16px 0;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6c757d;
}

    .meta-item i {
        font-size: 1rem;
    }

/* ===== أزرار الإجراءات ===== */
.status-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.btn-action {
    padding: 8px 20px;
    border-radius: 50px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

    .btn-action:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

.btn-approve {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
}

    .btn-approve:hover {
        background: linear-gradient(135deg, #229954, #27ae60);
    }

.btn-reject {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
}

    .btn-reject:hover {
        background: linear-gradient(135deg, #c0392b, #e74c3c);
    }

.btn-submit {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
}

    .btn-submit:hover {
        background: linear-gradient(135deg, #2980b9, #3498db);
    }

.btn-print {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
    color: white;
}

    .btn-print:hover {
        background: linear-gradient(135deg, #7f8c8d, #95a5a6);
    }

/* ===== الفوتر ===== */
.status-card-footer {
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.footer-draft {
    background: #f8f9fa;
}

.footer-pending {
    background: #fef9e7;
}

.footer-approved {
    background: #eafaf1;
}

.footer-rejected {
    background: #fdedec;
}

.footer-text {
    color: #6c757d;
}

.footer-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.dot-draft {
    color: #6c757d;
}

.dot-pending {
    color: #f39c12;
}

.dot-approved {
    color: #27ae60;
}

.dot-rejected {
    color: #e74c3c;
}

/* ===== حالة خاصة للـ Draft ===== */
.card-draft {
    border: 1px dashed #dee2e6;
    background: #fafbfc;
}

    .card-draft .status-badge {
        background: rgba(108, 117, 125, 0.1);
    }

/* ===== تأثيرات التحميل ===== */
.status-card.loading .status-main-icon {
    animation: loading-pulse 1s ease-in-out infinite;
}

@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}


/* ============================================================ */
/* ===== TEACHER CARD ===== */
/* ============================================================ */
.teacher-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 20px rgba(3, 98, 128, 0.06);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 14px;
}

    .teacher-card .teacher-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #fff;
        flex-shrink: 0;
        box-shadow: 0 4px 16px rgba(3, 98, 128, 0.15);
    }

    .teacher-card .teacher-info {
        flex: 1;
    }

    .teacher-card .teacher-name {
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--text-dark);
    }

    .teacher-card .teacher-details {
        display: flex;
        gap: 12px;
        font-size: 0.6rem;
        color: var(--text-muted);
        flex-wrap: wrap;
    }

        .teacher-card .teacher-details i {
            font-size: 0.5rem;
            color: var(--primary-color);
        }

    .teacher-card .teacher-badge {
        font-size: 0.55rem;
        background: rgba(3, 98, 128, 0.06);
        padding: 2px 12px;
        border-radius: 30px;
        color: var(--text-muted);
        font-weight: 600;
        white-space: nowrap;
    }

/* ============================================================ */
/* ===== STATS ROW ===== */
/* ============================================================ */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.stat-box {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 6px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: 0.3s;
}

    .stat-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(3, 98, 128, 0.06);
    }

    .stat-box .stat-number {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--text-dark);
        line-height: 1.2;
    }

    .stat-box .stat-label {
        font-size: 0.5rem;
        color: var(--text-muted);
        margin-top: 1px;
    }

    .stat-box .stat-icon {
        font-size: 0.65rem;
        display: block;
        margin-bottom: 2px;
    }

    .stat-box.total .stat-icon {
        color: var(--primary-color);
    }

    .stat-box.present .stat-icon {
        color: var(--present-color);
    }

    .stat-box.absent .stat-icon {
        color: var(--absent-color);
    }

    .stat-box.late .stat-icon {
        color: var(--late-color);
    }

/* ============================================================ */
/* ===== FILTER TABS ===== */
/* ============================================================ */
.filter-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    background: rgba(3, 98, 128, 0.04);
    border-radius: 14px;
    padding: 4px;
    overflow-x: auto;
}

    .filter-tabs .tab-btn {
        padding: 6px 12px;
        border: none;
        border-radius: 10px;
        font-size: 0.6rem;
        font-weight: 600;
        cursor: pointer;
        transition: 0.3s;
        background: transparent;
        color: var(--text-muted);
        font-family: 'Tajawal', sans-serif;
        white-space: nowrap;
        flex: 1;
    }

        .filter-tabs .tab-btn:hover {
            color: var(--primary-color);
            background: rgba(3, 98, 128, 0.04);
        }

        .filter-tabs .tab-btn.active {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: #fff;
            box-shadow: 0 4px 16px rgba(3, 98, 128, 0.15);
        }

        .filter-tabs .tab-btn i {
            margin-left: 4px;
            font-size: 0.55rem;
        }

/* ============================================================ */
/* ===== SEARCH BAR ===== */
/* ============================================================ */
.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 4px 4px 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
}

    .search-bar input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 8px 4px;
        font-size: 0.7rem;
        font-family: 'Tajawal', sans-serif;
        color: var(--text-dark);
        outline: none;
    }

        .search-bar input::placeholder {
            color: var(--text-muted);
            opacity: 0.6;
        }

    .search-bar .search-btn {
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border: none;
        border-radius: 10px;
        color: #fff;
        padding: 6px 14px;
        font-size: 0.7rem;
        cursor: pointer;
        transition: 0.3s;
        display: flex;
        align-items: center;
        gap: 4px;
        font-family: 'Tajawal', sans-serif;
        font-weight: 600;
    }

        .search-bar .search-btn:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 16px rgba(3, 98, 128, 0.15);
        }

/* ============================================================ */
/* ===== STUDENT LIST ===== */
/* ============================================================ */
.student-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ============================================================ */
/* ===== STUDENT CARD ===== */
/* ============================================================ */
.student-card {
    background: var(--white-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(3, 98, 128, 0.04);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

    .student-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        border-radius: 0 4px 4px 0;
        transition: 0.3s;
    }

    .student-card.status-present::before {
        background: var(--present-color);
    }

    .student-card.status-absent::before {
        background: var(--absent-color);
    }

    .student-card.status-late::before {
        background: var(--late-color);
    }

    .student-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(3, 98, 128, 0.08);
    }

    .student-card .student-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(3, 98, 128, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        color: var(--primary-color);
        flex-shrink: 0;
        font-weight: 700;
    }

    .student-card .student-info {
        display: block;
        flex: 1;
        min-width: 0;
    }

    .student-card .student-name {
        font-weight: 700;
        font-size: 0.70rem;
        color: var(--text-dark);
    }

    .student-card .student-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        color: var(--text-muted);
        flex-wrap: wrap;
        padding-top: 2px;
    }

        .student-card .student-meta i {
            font-size: 0.65rem;
            margin-left: 2px;
        }

    .student-card .student-status {
        font-size: 0.5rem;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 30px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .student-card .student-status.present {
            background: rgba(39, 174, 96, 0.08);
            color: var(--present-color);
        }

        .student-card .student-status.absent {
            background: rgba(231, 76, 60, 0.08);
            color: var(--absent-color);
        }

        .student-card .student-status.late {
            background: rgba(243, 156, 18, 0.08);
            color: var(--late-color);
        }

    /* ===== أزرار التعديل والحذف ===== */
    .student-card .student-actions {
        display: flex;
        gap: 6px;
    }

        .student-card .student-actions .action-btn {
            width: 32px;
            height: 32px;
            border: none;
            border-radius: 50%;
            font-size: 0.7rem;
            cursor: pointer;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Tajawal', sans-serif;
        }

            .student-card .student-actions .action-btn.edit {
                background: rgba(3, 98, 128, 0.06);
                color: var(--primary-color);
            }

                .student-card .student-actions .action-btn.edit:hover {
                    background: rgba(3, 98, 128, 0.12);
                    transform: scale(1.08);
                    box-shadow: 0 2px 12px rgba(3, 98, 128, 0.1);
                }

            .student-card .student-actions .action-btn.delete {
                background: rgba(231, 76, 60, 0.06);
                color: var(--danger-color);
            }

                .student-card .student-actions .action-btn.delete:hover {
                    background: rgba(231, 76, 60, 0.12);
                    transform: scale(1.08);
                    box-shadow: 0 2px 12px rgba(231, 76, 60, 0.1);
                }

/* ============================================================ */
/* ===== FAB BUTTON ===== */
/* ============================================================ */
.fab-fixed {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

    .fab-fixed .fab-btn {
        pointer-events: auto;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: #fff;
        font-size: 1.4rem;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 8px 32px rgba(3, 98, 128, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border: 2px solid rgba(255, 255, 255, 0.15);
    }

        .fab-fixed .fab-btn:hover {
            transform: scale(1.08) rotate(90deg);
            box-shadow: 0 12px 44px rgba(3, 98, 128, 0.45);
        }

        .fab-fixed .fab-btn .fab-tooltip {
            position: absolute;
            bottom: calc(100% + 14px);
            background: rgba(26, 42, 58, 0.92);
            backdrop-filter: blur(8px);
            color: #fff;
            padding: 6px 16px;
            border-radius: 30px;
            font-size: 0.6rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(8px) scale(0.9);
            transition: 0.3s;
            pointer-events: none;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .fab-fixed .fab-btn:hover .fab-tooltip {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */

body.dark-mode .teacher-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .teacher-card .teacher-name {
        color: #e0e8f0;
    }

    body.dark-mode .teacher-card .teacher-details {
        color: #8a9aaa;
    }

body.dark-mode .stat-box {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .stat-box .stat-number {
        color: #e0e8f0;
    }

    body.dark-mode .stat-box .stat-label {
        color: #8a9aaa;
    }

body.dark-mode .filter-tabs {
    background: rgba(255, 255, 255, 0.04);
}

    body.dark-mode .filter-tabs .tab-btn {
        color: #8a9aaa;
    }

        body.dark-mode .filter-tabs .tab-btn:hover {
            color: var(--secondary-color);
            background: rgba(255, 255, 255, 0.04);
        }

body.dark-mode .search-bar {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .search-bar input {
        color: #e0e8f0;
    }

        body.dark-mode .search-bar input::placeholder {
            color: #6a7a8a;
        }

body.dark-mode .student-card {
    background: rgba(20, 40, 55, 0.6);
    border-color: rgba(255, 255, 255, 0.05);
}

    body.dark-mode .student-card .student-name {
        color: #e0e8f0;
    }

    body.dark-mode .student-card .student-meta {
        color: #8a9aaa;
    }

    body.dark-mode .student-card .student-actions .action-btn.edit {
        background: rgba(255, 255, 255, 0.04);
        color: #8a9aaa;
    }

        body.dark-mode .student-card .student-actions .action-btn.edit:hover {
            background: rgba(255, 255, 255, 0.08);
            color: var(--secondary-color);
        }

    body.dark-mode .student-card .student-actions .action-btn.delete {
        background: rgba(231, 76, 60, 0.04);
        color: #e74c3c;
    }

        body.dark-mode .student-card .student-actions .action-btn.delete:hover {
            background: rgba(231, 76, 60, 0.08);
        }

body.dark-mode .fab-fixed .fab-btn {
    background: linear-gradient(135deg, #0d1a26, #1a2a3a);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

    body.dark-mode .fab-fixed .fab-btn:hover {
        box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
    }

    body.dark-mode .fab-fixed .fab-btn .fab-tooltip {
        background: rgba(0, 0, 0, 0.9);
    }

/* ============================================================ */
/* ===== TOAST ===== */
/* ============================================================ */
.toast-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: var(--max-width);
    width: 90%;
    pointer-events: none;
}

.toast-custom {
    background: rgba(20, 40, 55, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    padding: 10px 16px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    width: 100%;
    justify-content: center;
}

    .toast-custom i {
        font-size: 0.9rem;
        color: var(--secondary-color);
    }

    .toast-custom .close-toast {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 4px;
        transition: 0.3s;
    }

        .toast-custom .close-toast:hover {
            color: #fff;
            transform: scale(1.1);
        }

    .toast-custom.success i {
        color: var(--success-color);
    }

    .toast-custom.danger i {
        color: var(--danger-color);
    }

    .toast-custom.warning i {
        color: var(--warning-color);
    }

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

body.dark-mode .toast-custom {
    background: rgba(0, 0, 0, 0.92);
}




/* ============================================================ */
/* ===== MODAL DIALOG ===== */
/* ============================================================ */
.modal-dialog {
    width: 100%;
    max-width: var(--max-width);
    animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-content {
    background: var(--bg-light);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

/* ===== رأس المودال ===== */
.modal-header {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(3, 98, 128, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .modal-header .header-icon {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(231, 76, 60, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        color: var(--danger-color);
        flex-shrink: 0;
        animation: pulseIcon 2s ease-in-out infinite;
    }

@keyframes pulseIcon {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.modal-header .header-title {
    flex: 1;
}

.modal-header .header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    padding: 0;
}

    .modal-header .header-title p {
        font-size: 0.6rem;
        color: var(--text-muted);
        margin: 0;
        /*  margin-top: 2px;*/
    }

.modal-header .close-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(3, 98, 128, 0.04);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .modal-header .close-btn:hover {
        background: rgba(231, 76, 60, 0.06);
        color: var(--danger-color);
        transform: scale(1.05);
    }

/* ===== جسم المودال - رسالة الحذف فقط ===== */
.modal-body {
    padding: 0;
    padding-top: 15px;
    /*  text-align: center;*/
}

    .modal-body .delete-message {
        font-size: 0.75rem;
        color: var(--text-muted);
        line-height: 1.8;
    }

        .modal-body .delete-message .highlight {
            color: var(--text-dark);
            font-weight: 700;
        }

        .modal-body .delete-message .danger-text {
            color: var(--danger-color);
            font-weight: 600;
        }

        .modal-body .delete-message .warning-icon {
            display: block;
            font-size: 2.5rem;
            color: var(--danger-color);
            margin-bottom: 8px;
        }

/* ===== أزرار المودال ===== */
.modal-footer {
    padding: 12px 24px 20px;
    display: flex;
    gap: 10px;
}

    .modal-footer .btn {
        flex: 1;
        padding: 10px 16px;
        border: none;
        border-radius: 12px;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: 0.3s;
        font-family: 'Tajawal', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .modal-footer .btn-secondary {
        background: rgba(3, 98, 128, 0.06);
        color: var(--text-muted);
    }

        .modal-footer .btn-secondary:hover {
            background: rgba(3, 98, 128, 0.1);
            color: var(--text-dark);
            transform: translateY(-1px);
        }

    .modal-footer .btn-danger {
        background: linear-gradient(135deg, var(--danger-color), var(--danger-dark));
        color: #fff;
        box-shadow: 0 4px 16px rgba(231, 76, 60, 0.2);
    }

        .modal-footer .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(231, 76, 60, 0.3);
        }

        .modal-footer .btn-danger:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .modal-footer .btn-danger .spinner {
            animation: spin 1s linear infinite;
        }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================ */
/* ===== TOAST ===== */
/* ============================================================ */
.toast-container {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: var(--max-width);
    width: 90%;
    pointer-events: none;
}

.toast-custom {
    background: rgba(20, 40, 55, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #fff;
    padding: 10px 16px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.08);
    animation: slideUpToast 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    width: 100%;
    justify-content: center;
}

    .toast-custom i {
        font-size: 0.9rem;
        color: var(--secondary-color);
    }

    .toast-custom .close-toast {
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.3);
        cursor: pointer;
        font-size: 0.7rem;
        padding: 4px;
        transition: 0.3s;
    }

        .toast-custom .close-toast:hover {
            color: #fff;
            transform: scale(1.1);
        }

    .toast-custom.success i {
        color: #27ae60;
    }

    .toast-custom.danger i {
        color: #e74c3c;
    }

@keyframes slideUpToast {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================ */
/* ===== DARK MODE ===== */
/* ============================================================ */
body.dark-mode .modal-content {
    background: rgba(20, 40, 55, 0.9);
    border-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .modal-header {
    border-color: rgba(255, 255, 255, 0.04);
}

    body.dark-mode .modal-header .header-title h3 {
        color: #e0e8f0;
    }

    body.dark-mode .modal-header .header-title p {
        color: #8a9aaa;
    }

    body.dark-mode .modal-header .close-btn {
        background: rgba(255, 255, 255, 0.04);
        color: #8a9aaa;
    }

        body.dark-mode .modal-header .close-btn:hover {
            background: rgba(231, 76, 60, 0.06);
            color: #e74c3c;
        }

body.dark-mode .modal-body .delete-message {
    color: #8a9aaa;
}

    body.dark-mode .modal-body .delete-message .highlight {
        color: #e0e8f0;
    }

body.dark-mode .modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    color: #8a9aaa;
}

    body.dark-mode .modal-footer .btn-secondary:hover {
        background: rgba(255, 255, 255, 0.08);
        color: #e0e8f0;
    }

body.dark-mode .modal-footer .btn-danger {
    background: linear-gradient(135deg, #c0392b, #a93226);
}


/* ============================================================
                   SUMMARY GRID – تصميم عمودي (كل بطاقة سطر)
                   ============================================================ */
.summary-grid {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 14px;
}

/* بطاقة واحدة – تأخذ العرض الكامل */
.summary-item {
    background: #fafcff;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

    .summary-item::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        opacity: 0;
        transition: opacity 0.3s;
        border-radius: 0 4px 4px 0;
    }

    .summary-item:hover {
        transform: translateX(-4px);
        box-shadow: 0 8px 24px -8px rgba(3, 98, 128, 0.08);
        border-color: var(--secondary-light);
    }

        .summary-item:hover::before {
            opacity: 1;
        }

    /* ===== الجانب الأيمن (أيقونة + التسمية + القيمة) ===== */
    .summary-item .info-group {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex: 1;
    }

    /* ===== أيقونة المبلغ ===== */
    .summary-item .icon-circle {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .summary-item:hover .icon-circle {
        transform: scale(1.05) rotate(-2deg);
    }

    /* ===== النصوص (التسمية + القيمة) ===== */
    .summary-item .text-group {
        display: flex;
        flex-direction: column;
        gap: 0.05rem;
    }

    .summary-item .label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

        .summary-item .label i {
            font-size: 0.55rem;
        }

    .summary-item .value {
        font-size: 1.35rem;
        font-weight: 800;
        font-family: var(--font-en);
        letter-spacing: -0.3px;
        line-height: 1.2;
        direction: ltr;
        text-align: left;
    }

        .summary-item .value .currency {
            font-size: 0.75rem;
            font-weight: 600;
            font-family: var(--font-ar);
            margin-right: 0.2rem;
            opacity: 0.7;
            direction: rtl;
        }

    /* ===== الجانب الأيسر (الـ Badge) ===== */
    .summary-item .badge-tag {
        font-size: 0.55rem;
        font-weight: 700;
        padding: 0.25rem 1rem;
        border-radius: 30px;
        letter-spacing: 0.3px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        flex-shrink: 0;
    }

        .summary-item .badge-tag i {
            font-size: 0.55rem;
        }

    /* ============================================================
                   أنماط البطاقات حسب النوع – بألوان التطبيق
                   ============================================================ */

    /* --- الرصيد السابق (تحذير – يبقى برتقالي للتمييز) --- */
    .summary-item.type-balance {
        background: linear-gradient(135deg, #fef9f0, #fffbf5);
        border-color: #fde8d0;
    }

        .summary-item.type-balance::before {
            background: var(--warning);
        }

        .summary-item.type-balance .icon-circle {
            background: var(--warning-light);
            color: var(--warning-dark);
        }

        .summary-item.type-balance .value {
            color: var(--warning-dark);
        }

        .summary-item.type-balance .badge-tag {
            background: var(--warning-light);
            color: var(--warning-dark);
        }

    /* --- الرسوم الدراسية (primary) --- */
    .summary-item.type-tuition {
        background: linear-gradient(135deg, #f0f8fa, #f6fbfc);
        border-color: #b8dce6;
    }

        .summary-item.type-tuition::before {
            background: var(--primary-color);
        }

        .summary-item.type-tuition .icon-circle {
            background: rgba(3, 98, 128, 0.10);
            color: var(--primary-color);
        }

        .summary-item.type-tuition .value {
            color: var(--primary-color);
        }

        .summary-item.type-tuition .badge-tag {
            background: rgba(3, 98, 128, 0.10);
            color: var(--primary-color);
        }

    /* --- المواصلات (secondary) --- */
    .summary-item.type-bus {
        background: linear-gradient(135deg, #f0fbfd, #f6fdfe);
        border-color: #a8e6ee;
    }

        .summary-item.type-bus::before {
            background: var(--secondary-color);
        }

        .summary-item.type-bus .icon-circle {
            background: rgba(22, 200, 221, 0.12);
            color: var(--secondary-dark);
        }

        .summary-item.type-bus .value {
            color: var(--secondary-dark);
        }

        .summary-item.type-bus .badge-tag {
            background: rgba(22, 200, 221, 0.12);
            color: var(--secondary-dark);
        }

    /* --- القسط الأول (أخضر فاتح) --- */
    .summary-item.type-installment {
        background: linear-gradient(135deg, var(--green-light-bg), #f5fef9);
        border-color: var(--green-light-border);
    }

        .summary-item.type-installment::before {
            background: var(--green-light);
        }

        .summary-item.type-installment .icon-circle {
            background: var(--green-light-bg);
            color: var(--green-light);
        }

        .summary-item.type-installment .value {
            color: var(--green-light);
        }

        .summary-item.type-installment .badge-tag {
            background: var(--green-light-bg);
            color: var(--green-dark);
        }

    /* --- الإجمالي (تدرج من primary-dark إلى primary-color) --- */
    .summary-item.type-total {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-color), var(--primary-light));
        border: none;
        padding: 1.2rem 1.6rem;
        box-shadow: 0 8px 28px -6px rgba(3, 98, 128, 0.35);
        margin-top: 0.3rem;
    }

        .summary-item.type-total::before {
            display: none;
        }

        .summary-item.type-total:hover {
            transform: translateX(-4px) scale(1.005);
            box-shadow: 0 12px 36px -8px rgba(3, 98, 128, 0.45);
        }

        .summary-item.type-total .icon-circle {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .summary-item.type-total .label {
            color: rgba(255, 255, 255, 0.80);
        }

            .summary-item.type-total .label i {
                color: rgba(255, 255, 255, 0.6);
            }

        .summary-item.type-total .value {
            color: #ffffff;
            font-size: 1.6rem;
            font-weight: 900;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
        }

            .summary-item.type-total .value .currency {
                color: rgba(255, 255, 255, 0.80);
            }

        .summary-item.type-total .badge-tag {
            background: rgba(255, 255, 255, 0.18);
            color: #fff;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }


/* ===== ANIMATED BACKGROUND ===== */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

    .animated-bg .orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.12;
        animation: orbFloat 8s ease-in-out infinite alternate;
    }

        .animated-bg .orb:nth-child(1) {
            width: 300px;
            height: 300px;
            background: var(--primary-color);
            top: -50px;
            right: -50px;
            animation-delay: 0s;
        }

        .animated-bg .orb:nth-child(2) {
            width: 250px;
            height: 250px;
            background: var(--secondary-color);
            bottom: -30px;
            left: -30px;
            animation-delay: 2s;
        }

        .animated-bg .orb:nth-child(3) {
            width: 200px;
            height: 200px;
            background: var(--primary-light);
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
            animation-delay: 4s;
        }

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -30px) scale(1.2);
    }
}

.children-name .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 8px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

    .children-name .status-badge.active {
        background: #e8f8ef;
        color: #198754;
    }

    .children-name .status-badge.inactive {
        background: #fdeaea;
        color: #dc3545;
    }