* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    min-height: 100vh;
    direction: rtl;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: -1;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h2, h3 {
    background: linear-gradient(90deg, rgb(100, 70, 140), #667eea);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

th {
    color:#667eea;
}

/* --- container --- */
.container-inside {
    max-width: 100%;
    margin: 30px auto;
    padding: 20px;
    padding-top:20px;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #ddd;
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
    margin-bottom: 25px;
} 

.card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    padding: 30px;
    margin-bottom: 20px;
}

.header {
    text-align: center;
    color: white;
    margin-bottom: 30px;
}

.header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.auth-container {
    max-width: 400px;
    margin: 0 auto;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-control {
    width: 100%;
    background-color: #f8f9ff;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    font-family: 'Vazirmatn', sans-serif;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* استایل برای قابلیت نمایش/عدم نمایش رمز عبور */
.password-wrapper {
    position: relative;
}

.password-wrapper .form-control {
    padding-left: 40px; /* ایجاد فضا برای آیکون */
}

.password-toggle-icon {
    position: absolute;
    top: 50%;
    left: 15px; /* در RTL آیکون در سمت چپ قرار می‌گیرد */
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}

.btn {
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;    
    font-family: 'Vazirmatn', sans-serif;
    
    /* Add position relative for pseudo-elements */
    position: relative;
    overflow: hidden; /* Hide overflow for shine effect */
}

/* Shine effect that moves from left to right */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%; /* Move shine across button on hover */
}

.btn-primary {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    
    /* Add subtle pulse animation */
    animation: pulse 2s infinite;
}

/* Pulse animation - subtle breathing effect */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
    
    /* Stop pulse on hover and add glow */
    animation: none;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6),
                0 0 20px rgba(102, 126, 234, 0.4);
}

/* Active state - press down effect */
.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.btn-secondary {
    background: linear-gradient(45deg, #488aa4, #48929b);
    color: white;
    
    /* Add gradient animation */
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

/* Gradient shift animation - moving gradient background */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.btn-secondary:hover {
    transform: translateY(-2px) scale(1.05); /* Add scale for extra pop */
    box-shadow: 0 5px 15px rgba(102, 179, 234, 0.4);
    animation: none; /* Stop gradient animation on hover */
}

.btn-success {
    background: linear-gradient(45deg, #26a043, #489b7e);
    color: white;
}

.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 234, 166, 0.4);
    
    /* Rotate slightly for playful effect */
    transform: translateY(-2px) rotate(1deg);
}

/* Add ripple effect on click using pseudo-element */
.btn-success:active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    animation: ripple 0.6s ease-out;
}

/* Ripple animation - expanding circle */
@keyframes ripple {
    to {
        width: 300px;
        height: 300px;
        opacity: 0;
    }
}

.btn-danger {
    background: #dc3545;
    color: white;
    
    /* Add subtle shake on hover */
}

.btn-danger:hover {
    animation: shake 0.5s;
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
}

/* Shake animation - attention grabbing wobble */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.btn-warning {
    background: #ffc107;
    color: #212529;
    
    /* Add bounce effect */
}

.btn-warning:hover {
    animation: bounce 0.6s;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
}

/* Bounce animation - playful jump */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(-5px); }
    75% { transform: translateY(-7px); }
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    margin: 0 5px;
    color: #667eea;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    color: #764ba2;
    
    /* Rotate icon on hover */
    transform: rotate(15deg) scale(1.2);
}

/* Optional: Add focus states for accessibility */
.btn:focus {
    outline: 2px solid rgba(102, 126, 234, 0.5);
    outline-offset: 2px;
}

.alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
    overflow-x: auto; /* فعال کردن اسکرول افقی برای تب‌ها */
}

.tab {
    flex-shrink: 0; /* جلوگیری از کوچک شدن تب‌ها */
    padding: 12px 10px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 16px;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    font-family: 'Vazirmatn', sans-serif;
}

.tab:hover {
    color: #667eea;
    border-bottom-color: #848484;
    background-color: rgb(249, 249, 249);
} 

.tab.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background-color: rgb(241, 243, 246);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.user-card {
    background: #f8f9ff;
    border-radius: 10px;
    padding: 20px;
    border-right: 4px solid #667eea;
    position: relative; /* برای موقعیت دکمه‌های عملیات */
}

.user-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.user-card .actions {
    position: absolute;
    top: 10px;
    left: 10px; /* تراز به چپ در RTL */
    display: flex;
    gap: 5px;
}

.user-card .actions .btn-icon {
    font-size: 1rem;
    color: #555;
}

.user-card .actions .btn-icon:hover {
    color: #000;
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px;
}

.status-paid {
    background: #28a745;
}

.status-unpaid {
    background: #dc3545;
}

.attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.attendance-item {
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-size: 12px;
}

.attendance-present {
    background: #d4edda;
    color: #155724;
}

.attendance-absent {
    background: #f8d7da;
    color: #721c24;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: linear-gradient(45deg, #667eea, #764ba2);
    color: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    
    /* Added: Position relative for the shine effect */
    position: relative;
    overflow: hidden;
    
    /* Changed: animation-fill-mode: forwards keeps the final state */
    animation: cardPulse 5s ease-in-out 2;
    animation-fill-mode: forwards;
}

/* Added: Pseudo-element for the shine effect */
.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    /* Changed: animation-fill-mode: forwards keeps the final state */
    animation: shine 5s ease-in-out 2;
    animation-fill-mode: forwards;
}

/* Modified: Keyframes for the shine sweep effect - ends hidden */
@keyframes shine {
    0% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }
    100% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
        opacity: 0;
    }
}

/* Modified: Keyframes for subtle card glow - ends with stable shadow */
@keyframes cardPulse {
    0% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    10% {
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    }
    20% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
    100% {
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }
}

.stat-number {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .container-inside {
        padding: 10px;
    }
    
    .card {
        padding: 20px;
    }
    
    .header h1 {
        font-size: 2rem;
    }
    
    .user-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        display: flex;
        justify-content: center;
        margin: 5px;
    }
    
    .stat-card {
        display: none;
    }
    
    .stat-card.credit-card {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 15px;
        text-align: right;
    }
    
    .stat-card.credit-card .stat-number {
        font-size: 1.2rem;
        margin-bottom: 0;
    }
    
    .stat-card.credit-card > div:last-child {
        font-size: 1rem;
    }
}

/* تب‌ها */
.tabs {
    flex-wrap: nowrap; /* اطمینان از عدم شکستن تب‌ها، فعال کردن اسکرول */
    overflow-x: auto; /* اضافه کردن اسکرول افقی برای تب‌ها در صورت نیاز */
}

.tab {
    flex: none; /* لغو flex:1 برای واکنش‌گرایی */
    white-space: nowrap; /* جلوگیری از شکستن متن تب‌ها */
}
/* جداول */
.table-responsive {
    overflow-x: auto; /* فعال کردن اسکرول افقی برای جداول */
    padding-bottom: 10px; /* افزودن فضای برای نوار اسکرول */
    position: relative; /* برای بهتر کار کردن با touch events */
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    min-width: 600px; /* اطمینان از حداقل عرض جدول برای اسکرول در صورت عریض بودن محتوا */
}

/* کلاس‌های کمکی برای اسکرول افقی */
.horizontal-scroll {
    overflow-x: auto;
}

.scrollable-x {
    overflow-x: auto;
}

/* برای بهتر کار کردن touch events روی جداول */
.table-responsive {
    touch-action: pan-x pan-y; /* اجازه دادن به اسکرول افقی و عمودی */
}

.table-responsive * {
    touch-action: pan-x pan-y; /* اجازه دادن به اسکرول افقی و عمودی */
}

/* استایل برای نوار اسکرول */
.table-responsive::-webkit-scrollbar {
    height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.table th,
.table td {
    padding: 12px;
    text-align: right;    
}

.table th {
    background: #f8f9fa;
    font-weight: bold;
}

.table tr {
    border-bottom: 1px solid #e0e0e0;
}
.table tr:hover {
    background: #f8f9fa;
}

.action-buttons {
    display: flex;
    justify-content: flex-start; /* تغییر به flex-start برای عملیات جدول RTL */
    gap: 5px;
}

/* استایل‌های مودال */
.modal {
    display: none; /* به صورت پیش‌فرض پنهان */
    position: fixed; /* ثابت در جای خود */
    z-index: 1050; /* روی همه قرار گیرد */
    left: 0;
    top: 0;
    width: 100%; /* عرض کامل */
    height: 100%; /* ارتفاع کامل */
    overflow: auto; /* فعال کردن اسکرول در صورت نیاز */
    background-color: rgba(0,0,0,0.5); /* سیاه با شفافیت */
    justify-content: center;
    align-items: center;
    padding: 15px; /* فاصله از لبه‌های صفحه در موبایل */
}

.modal-content {
    background-color: #fefefe;
    /*margin: 15% auto; /* تنظیم margin برای تراز عمودی بهتر */
    padding: 20px;
    border: 1px solid #888;
    width: 95%;
    max-width: 600px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    flex-direction: column;            /* چیدمان ستونی برای هدر، محتوا و فوتر */
}

.close-button {
    color: #aaa;
    float: left; /* تغییر به چپ برای RTL */
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}
.filter-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: flex-end;
}

/* START: اصلاحیه فیلترهای تب معلمان */
/*
  این قانون جدید به دو آیتم (div.form-group) داخل فرم فیلتر (form.filter-form)
  اعمال می‌شود و به آن‌ها دستور می‌دهد که فضای افقی موجود را به طور مساوی
  (flex: 1) تقسیم کنند. این کار باعث هم‌اندازه شدن هر دو فیلد در تمام اندازه‌ها،
  از جمله موبایل می‌شود.
*/
.filter-form .form-group {
    flex: 1; /* کلید حل مشکل: توزیع مساوی فضا */
    margin-bottom: 0; /* این خط، استایل inline موجود در HTML را به CSS منتقل می‌کند */
}
/* END: اصلاحیه فیلترهای تب معلمان */

.class-group-header {
    background-color: #f1f1ff;
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-weight: bold;
    color: #3d4495;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;            
}

.class-group-header:hover {
    background-color: #e7e7f1;
    color: #383e87;
}
.class-details {
    background-color: #f0f8ff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid #e0f2ff;
}
.class-details.paid {
    border-left: 5px solid #28a745;
}
.class-details.unpaid {
    border-left: 5px solid #dc3545;
}

.class-details.pending {
    border-left: 5px solid #ffc107;
}

/* New style for class list in student card */
.user-card .class-list {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e0e0e0;
}
.user-card .class-list h5 {
    margin-bottom: 10px;
    color: #555;
    font-size: 0.95rem;
}
.user-card .class-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.85rem;
}
.user-card .class-item .payment-status {
    font-weight: bold;
}
.user-card .class-item .payment-status.paid-text {
    color: #28a745;
}
.user-card .class-item .payment-status.unpaid-text {
    color: #dc3545;
}

/* استایل برای وضعیت در انتظار تایید در کارت هنرجو (پنل ادمین) */
.user-card .class-item .payment-status.pending-text {
    color: #e89500; /* رنگ زرد/نارنجی خوانا */
}



/* New style for class days checkbox */
.days-checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.days-checkbox-container label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.days-checkbox-container input {
    margin-left: 5px;
}
/* New style for class header and show finished classes and count assigned students and teacher name */
.class-title {
    font-weight: bold;
    font-size: 1.1rem;
}
.class-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.teacher-name-badge, .class-status-badge, .student-count-badge {
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: normal;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.teacher-name-badge { background-color: #007bff; }
.student-count-badge { background-color: #6f42c1; }
.class-status-badge.status-active { background-color: #28a745; }
.class-status-badge.status-finished { background-color: #dc3545; }

/* START: استایل اختصاصی برای کانتینر کلاس‌های پایان‌یافته در پنل ادمین */
.container-inside.finished-class-container {
    background-color: #f4f4f4; /* خاکستری روشن */
    border: 1px solid #ccc;     /* حاشیه کمی تیره‌تر */
    opacity: 0.9;               /* کمی شفافیت */
}

/* تغییر رنگ هدر کلاس در حالت پایان‌یافته برای هماهنگی با پس‌زمینه */
.container-inside.finished-class-container .class-group-header {
    background-color: #e0e0e0;
    color: #777;
    border: 1px solid #d0d0d0;
}

/* کمرنگ کردن جدول داخل کانتینر پایان‌یافته */
.container-inside.finished-class-container .table th {
    background-color: #e9e9e9;
    color: #888;
}
/* END: استایل اختصاصی */

/* ** استایل جدید برای لیست حضور و غیاب معلم ** */
#teacher_attendance_form_container .student-attendance-row { display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #eee; }
#teacher_attendance_form_container .student-attendance-row label { flex-grow: 1; margin: 0 10px; }

/* START: کدهای CSS جدید */
/* برای ثابت ماندن تب‌ها هنگام اسکرول */
.tabs {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 37px;
    background-color: white;
    z-index: 99;
    transform: translateZ(0);
    /*box-shadow: 0 2px 5px rgba(0,0,0,0.05);*/
}

/* برای اسکرول شدن لیست کلاس‌ها در مودال‌ها */
.modal-scrollable-list {
    max-height: 250px; /* می‌توانید این ارتفاع را تغییر دهید */
    overflow-y: auto;
    overflow-x: auto; /* <-- این خط جدید مشکل را حل می‌کند */
    border: 1px solid #e0e0e0;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
    background-color: #fdfdfd;
}
/* END: کدهای CSS جدید */

/* START: کد CSS جدید برای کلاس‌های پایان‌یافته */
.class-finished {
    text-decoration: line-through;
    color: #999 !important; /* برای اطمینان از اعمال رنگ */
    font-style: italic;
}
/* END: کد CSS جدید */
/* START: استایل‌های جدید برای ارزیابی و پیام‌ها */

/* فرم ارزیابی */
.evaluation-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 15px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    font-family: 'Vazirmatn', sans-serif;
}
.evaluation-row:last-child {
    border-bottom: none;
}
.evaluation-row .form-control {
    text-align: center;
}

/* فرم ارسال پیام */
.recipient-type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.recipient-type-selector .recipient-btn {
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
}

.recipient-type-selector .recipient-btn.active  {
    background-color: #667eea;
    color: white;
    border-color: #667eea;
}

.recipient-type-selector .recipient-btn-student.active {
    background-color: #667eea;
    color: white;
    border-color: #667eea;
}

.recipient-type-selector .recipient-btn-teacher.active {
    background-color: #667eea;
    color: white;
    border-color: #667eea;
}

/* آیکون زنگوله و بج نوتیفیکیشن */
.notification-bell {
    position: relative;
    margin-left: 10px;
    font-size: 2rem;
}
.notification-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: #dc3545;
    color: white;
    border-radius: 50%;
    padding: 2px 8px;
    font-size: 0.9rem;
    font-weight: bold;
    border: 2px solid white;
    font-family: 'Vazirmatn', sans-serif;
}

.credit-icon {
    position: relative;
    margin-left: 10px;
    font-size: 2rem;
}

/* مودال پیام‌های کاربر */
.messages-list .message-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.messages-list .message-item:hover {
    background-color: #f8f9fa;
}
.messages-list .message-item.unread {
    background-color: #e9f5ff;
    font-weight: bold;
}
.messages-list .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.messages-list .message-subject {
    color: #2e288a;
}
.messages-list .message-date {
    font-size: 0.8rem;
    color: #888;
}
.messages-list .message-body {
    display: none; /* به صورت پیش‌فرض مخفی */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #ddd;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap; /* برای حفظ فاصله‌ها و خطوط جدید */
}
/* END: استایل‌های جدید */
/* نمایش ستونی دکمه‌های ارسال پیام در موبایل */
@media (max-width: 768px) {
    .recipient-type-selector {
        flex-direction: column;
        align-items: stretch; /* دکمه‌ها تمام عرض را بگیرند */
    }
    .recipient-type-selector .recipient-btn {
        width: 100%;
        margin-bottom: 5px;
    }
}

/* استایل برای مودال ویرایش پیام */
.message-edit-modal-content {
    max-width: 600px;
}

/* حل مشکل شماره ۱: نمایش مودال پیام‌ها در بالای صفحه */
#userMessagesModal {
    align-items: flex-start; /* تراز عمودی به بالا */
}

#userMessagesModal .modal-content {
    margin-top: 5vh; /* فاصله از بالای صفحه */
    max-height: 85vh; /* حداکثر ارتفاع مودال */
    display: flex;
    flex-direction: column;
}

#userMessagesModal .messages-list {
    overflow-y: auto; /* فعال کردن اسکرول برای لیست پیام‌ها */
    flex-grow: 1; /* اجازه می‌دهد لیست پیام‌ها فضای باقی‌مانده را پر کند */
}

/* START: کد جدید برای تراز بالای مودال */

/* این کلاس اصلاحی را به هر مودالی که می‌خواهید در بالا نمایش داده شود اضافه کنید */
.modal.modal-top {
    align-items: flex-start; /* تراز عمودی آیتم‌ها به بالا */
}

.modal.modal-top .modal-content {
    margin: 5vh auto; /* 5% فاصله از بالا، و به صورت خودکار در مرکز افقی */
}

/* END: کد جدید */

/* استایل برای وضعیت در انتظار تأیید در پنل هنرجو */
.table tr.status-pending {
    background-color: #fffbe6; /* زرد بسیار ملایم */
    color: #8a6d3b;
}
.table tr.status-pending:hover {
    background-color: #fff9d4;
}

/* استایل برای وضعیت تأیید شده در پنل هنرجو */
.table tr.status-paid {
    background-color: #f0fff0; /* سبز بسیار ملایم */
}

/* استایل برای ردیف‌های جدول در پنل ادمین */
.table tr.status-pending-row {
    background-color: #fff3cd; /* زرد */
    border-bottom: 1px dashed #7d7a6f;
}
.table tr.status-pending-row:hover {
    background-color: #ffecb5;
}

.table tr.status-paid-row {
    background-color: #d4edda; /* سبز */
    border-bottom: 1px solid #889b8d;
}
.table tr.status-paid-row:hover {
    background-color: #c3e6cb;
}

.student-finished {
    text-decoration: line-through;
    color: #999;
    cursor: not-allowed;
}

.paid-text { color: #28a745; }
.unpaid-text { color: #dc3545; }
.pending-text { color: #e89500; }

/* --- START: Hamburger Menu & Sidebar Styles --- */

/* هدر پنل */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: white;
    transform: translateZ(0);
}

.panel-title-group {
    display: flex;
    align-items: center;
    gap: 10px; /* فاصله بین عنوان و آیکون همبرگر */
}

.panel-title-group h2 {
    margin: 0;
}

.panel-header-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* آیکون منوی همبرگری */
.hamburger-menu {
    font-size: 1.5rem; /* آیکون بزرگتر */
    color: #667eea;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.hamburger-menu:hover {
    color: #764ba2;
}

/* پوشش (Overlay) سایدبار */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* کانتینر سایدبار */
.sidebar {
    position: fixed;
    top: 0;
    right: -300px; /* شروع از خارج صفحه در سمت راست */
    width: 300px;
    height: 100%;
    background-color: #ffffff;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    transition: right 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    font-family: 'Vazirmatn', sans-serif;
}

.sidebar.open {
    right: 0; /* حرکت به داخل صفحه */
}

/* هدر سایدبار */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.close-sidebar-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

/* لینک‌های سایدبار */
.sidebar-links {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #555;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-right: 4px solid transparent;
}

.sidebar-link:hover {
    background-color: #f5f5f5;
    color: #667eea;
}

.sidebar-link.active {
    background-color: #eef0ff;
    color: #667eea;
    border-right-color: #667eea;
    font-weight: bold;
}

/* فوتر سایدبار (برای دکمه خروج) */
.sidebar-footer {
    padding: 15px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

/* استایل‌های واکنش‌گرا */
@media (max-width: 768px) {
    .sidebar {
        width: 280px;
        right: -280px;
    }
}

/* --- END: Hamburger Menu & Sidebar Styles --- */

/* START: استایل جدید برای کارت کلاس پایان‌یافته در پنل هنرجو */
.class-details.course-finished-card {
    background-color: #f1f1f1; /* خاکستری کمرنگ */
    border-left-color: #888; /* خاکستری ۵۰٪ */
}

.class-details.course-finished-card,
.class-details.course-finished-card h4,
.class-details.course-finished-card p,
.class-details.course-finished-card small,
.class-details.course-finished-card strong {
    color: #888; /* خاکستری ۵۰٪ */
}

.class-details.course-finished-card h4 {
    text-decoration: line-through;
}
/* END: استایل جدید */

@media print {
    .no-print { display: none; }
    @page {
      size: A4 portrait;
      margin: 15mm;
    }
    * {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    } 
    body::before {
        background: rgb(237, 237, 237);
      }
    p {
        color: #000;
    }     
  }
/* نمودار: استایل جدید */
.chart-container {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin: 30px auto;
    max-width: 900px; /* محدود کردن عرض برای نمایش بهتر در صفحات بزرگ */
    width: 100%; /* واکنش‌گرا بودن */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.help-icon {
    cursor: pointer;
    color: #007bff;
    font-size: 1.2rem;
    transition: color 0.3s ease;
}

.help-icon:hover {
    color: #0056b3;
}

/* استایل دکمه راهنمای نصب */
.link-style {
    color: #007bff;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
}
.link-style:hover {
    text-decoration: underline;
}

/* استایل کلی مودال */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    overflow: auto; /* اگر محتوا زیاد بود، اسکرول فعال می‌شود */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.modal-header h4 {
    margin: 0;
    font-size: 1.1em;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}

.close-modal-btn:hover,
.close-modal-btn:focus {
    color: black;
}

.help-section {
    margin-top: 20px;
    overflow-y: auto; /* اگر محتوای بخش راهنما زیاد بود، اسکرول فعال می‌شود */
}
.help-section h5 {
    font-weight: bold;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.help-section ol {
    padding-right: 20px;
    line-height: 1.8;
}
.help-section li i {
    color: #555;
}

/* مربوط به استایل دکمه افزودن هنرجو به کلاس خاص در بخش تب مدیریت کلاس ها */
.class-meta-info .btn-icon {
    background-color: #e9ecef;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #555;
    transition: all 0.2s ease;
}

.class-meta-info .btn-icon:hover {
    background-color: #d1d8e0;
    color: #000;
}

/* --- START: CSS Grid Responsive for Forms (REVISED) --- */

/* * 1. موبایل-اول: به طور پیش‌فرض، همه‌چیز تک ستونه است.
 * این کار باعث می‌شود فیلدهای «مبلغ»، «تاریخ»، «رسید» و «دکمه» 
 * به درستی در موبایل زیر هم قرار بگیرند.
*/
.form-grid-responsive,
.form-grid-responsive-inner {
    display: grid;
    grid-template-columns: 1fr; /* همیشه تک ستونه */
    gap: 15px; /* فاصله کمتر برای موبایل */
}

/* * 2. دسکتاپ: فقط در صورتی که عرض صفحه از 768px بیشتر باشد،
 * گریدها را به حالت چند ستونه تغییر می‌دهیم.
*/
@media (min-width: 768px) {
    .form-grid-responsive {
        grid-template-columns: 1fr; /* دو ستونه صریح برای دسکتاپ */
        gap: 20px;
    }
    
    .form-grid-responsive-inner {
        /* سه ستونه صریح برای بخش درصدی در دسکتاپ */
        grid-template-columns: 1fr; 
    }
}

/* * 3. رفع مشکل شکسته‌شدن کلمات (بازخورد شما)
 * این کد جلوی شکستن برچسب‌های رادیویی و چک‌باکس‌ها را می‌گیرد.
*/
.radio-group label,
.modal-scrollable-list .form-check {
    /* white-space: nowrap;  جلوگیری از شکستن متن */
    display: flex;       /* اطمینان از هم‌ترازی چک‌باکس و متن */
    gap: 5px;
    align-items: center;
}

/* --- END: CSS Grid Responsive for Forms (REVISED) --- */

/* =================================================================== */
/* START: Custom Styles for Radio Buttons and Checkboxes              */
/* توضیحات: این کدها ظاهر پیش‌فرض رادیوباتن‌ها و چک‌باکس‌ها را       */
/* با یک نسخه سفارشی، بزرگتر و لمسی‌تر جایگزین می‌کند.               */
/* =================================================================== */

/* 1. پایه مشترک برای هر دو */
input[type="checkbox"],
input[type="radio"] {
    /* --- بازنشانی ظاهر پیش‌فرض --- */    
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* --- اندازه‌بندی (موبایل-اول) --- */
    /* از 'em' استفاده می‌کنیم تا اندازه با فونت والد هماهنگ باشد */
    width: 1.85em;  /* اندازه بزرگتر و مناسب برای لمس */
    height: 1.85em;

    flex-shrink: 0; /* جلوگیری از کوچک شدن در کانتینرهای flex */
    
    /* --- تراز و موقعیت --- */
    vertical-align: middle; /* تراز عمودی با متن کنارش */
    position: relative;
    top: -0.1em; /* تنظیم دقیق تراز عمودی */
    
    /* --- فاصله‌گذاری --- */
    /* در RTL، این فاصله بین المان و متن سمت چپ آن ایجاد می‌کند */
    margin-left: 8px; 
    margin-right: 8px; 
    
    /* --- ظاهر بصری --- */
    background-color: #fff;
    border: 2px solid #aaa; /* رنگ بوردر پیش‌فرض */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* 2. استایل اختصاصی دکمه‌های رادیویی */
input[type="radio"] {
    border-radius: 50%; /* گرد کردن کامل */
}

/* 3. استایل اختصاصی چک‌باکس‌ها */
input[type="checkbox"] {
    border-radius: 4px; /* کمی گوشه‌های گرد */
}

/* --- 4. حالت Hover (وقتی ماوس روی آن است) --- */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
    border-color: #764ba2; /* استفاده از رنگ تم */
    /* افزودن یک درخشش ظریف */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* --- 5. حالت Focus (برای دسترسی‌پذیری با کیبورد) --- */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    outline: none;
    border-color: #667eea; /* استفاده از رنگ تم */
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* --- 6. حالت تیک‌خورده (Checked) برای دکمه رادیویی --- */
/* ما یک نقطه داخلی با استفاده از شبه-المان ::after اضافه می‌کنیم */
input[type="radio"]::after {
    content: '';
    display: block;
    width: 0.9em;  /* اندازه نقطه داخلی */
    height: 0.9em;
    border-radius: 50%;
    background-color: #667eea; /* رنگ تم */
    
    /* وسط‌چین کردن نقطه */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* در ابتدا مخفی */
    
    transition: transform 0.2s ease-in-out;
}

input[type="radio"]:checked {
    border-color: #667eea; /* رنگ بوردر را با نقطه هماهنگ کن */
}

input[type="radio"]:checked::after {
    transform: translate(-50%, -50%) scale(1); /* نمایش نقطه */
}

/* --- 7. حالت تیک‌خورده (Checked) برای چک‌باکس --- */
/* ما یک تیک با استفاده از شبه-المان ::after اضافه می‌کنیم */
input[type="checkbox"]::after {
    content: '';
    display: block;
    
    /* ابعاد تیک (ساخته شده با بوردر) */
    width: 0.5em;
    height: 0.9em;
    
    /* ساخت تیک با استفاده از بوردر */
    border: solid #fff; /* رنگ تیک (سفید) */
    border-width: 0 3px 3px 0; /* فقط بوردر پایین و راست */
    
    /* موقعیت‌یابی تیک */
    position: absolute;
    top: 0.06em; /* تنظیم دقیق عمودی */
    left: 0.45em; /* تنظیم دقیق افقی */
    
    /* در ابتدا مخفی و چرخانده شده */
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease-in-out;
}

input[type="checkbox"]:checked {
    background-color: #667eea; /* پر کردن پس‌زمینه با رنگ تم */
    border-color: #667eea;
}

input[type="checkbox"]:checked::after {
    transform: rotate(45deg) scale(1); /* نمایش تیک */
}

/* --- 8. حالت غیرفعال (Disabled) --- */
/* (برای مواردی مانند هنرجویانی که جلساتشان تمام شده) */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: #eee;
    border-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
}

/* استایل حالت غیرفعال و تیک‌خورده */
input[type="checkbox"]:disabled:checked::after {
    border-color: #999; /* تیک خاکستری */
}

input[type="radio"]:disabled:checked::after {
    background-color: #999; /* نقطه خاکستری */
}
/* =================================================================== */
/* END: Custom Styles for Radio Buttons and Checkboxes                */
/* =================================================================== */

/* =================================================================== */
/* tooltip شروع استایل تولتیپ */
/* =================================================================== */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-icon {
    cursor: pointer;
    color: #007bff;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    margin-bottom: 5px;
}

/* برای دسکتاپ */
.tooltip-container:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
}

/* برای موبایل */
.tooltip-container.active .tooltip-content {
    opacity: 1;
    visibility: visible;
}

.tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* =================================================================== */
/* End tooltip پایان استایل تولتیپ */
/* =================================================================== */

/* START: استایل جدید برای فرم روز و ساعت کلاس */
.class-time-grid-container {
    display: grid;
    grid-template-columns: 1fr; /* تک ستونه در موبایل */
    gap: 10px;
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 8px;
}

.day-time-row {
    display: grid;
    grid-template-columns: 120px 1fr; /* دو ستونه: روز و ساعت */
    gap: 15px;
    align-items: center;
}

.day-time-row .form-check {
    display: flex;
    align-items: center;
    margin: 0;
}

.day-time-row .form-check label {
    margin: 0;
}

.day-time-row .form-control[type="time"] {
    padding: 8px;
    font-size: 14px;
}

/* در دسکتاپ، چیدمان را به دو ستون اصلی تغییر می‌دهیم */
@media (min-width: 768px) {
    .class-time-grid-container {
        grid-template-columns: 1fr 1fr; /* دو ستونه در دسکتاپ */
    }
}
/* END: استایل جدید */

/* START: استایل‌های جدید برای مودال لیست گیرندگان */
#recipientStatusModalList li {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
    list-style-type: none;
    margin: 0;
}

#recipientStatusModalList li:last-child {
    border-bottom: none;
}

#recipientStatusModalList li i {
    font-size: 1.3em;
    flex-shrink: 0;
}

#recipientStatusModalList li .read-status {
    color: #28a745; /* سبز */
}

#recipientStatusModalList li .unread-status {
    color: #ffc107; /* نارنجی/زرد */
}

#recipientStatusModalList li .recipient-name {
    flex-grow: 1;
    font-weight: 500;
}

#recipientStatusModalList li .read-time {
    font-size: 0.85rem;
    color: #888;
    flex-shrink: 0;
    direction: ltr; /* برای نمایش صحیح تاریخ و ساعت */
    text-align: left;
}
/* END: استایل‌های جدید */

/* * START: استایل‌های جدید برای ردیف‌های فرم حضور و غیاب 
 * (این استایل‌ها اکنون هم در تب اصلی و هم در مودال اعمال می‌شوند)
 */
 .student-attendance-row {
    padding: 12px 5px; /* ایجاد فاصله عمودی */
    border-bottom: 1px solid #eee; /* خط جداکننده نازک و کمرنگ */
}
/* حذف خط از آخرین آیتم */
.modal-scrollable-list .student-attendance-row:last-child {
    border-bottom: none;
}
.student-attendance-row label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0; /* حذف margin اضافی از label */
}
.student-attendance-row label input[type="checkbox"] {
    /* ایجاد فاصله بین چک‌باکس و نام (margin-left در RTL یعنی سمت راست) */
    margin-left: 10px; 
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0; /* جلوگیری از فشرده شدن چک‌باکس */
}
/* END: پایان استایل‌های جدید */

/* START: استایل‌های نوار فیلتر و مودال فیلتر */

/* کانتینر دکمه فیلتر و دکمه ریست */
.filter-bar-container {
    display: flex;
    flex-wrap: wrap; /* در موبایل زیر هم می‌آید */
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
}

/* نمایش فیلترهای فعال */
.active-filters-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 1; /* فضای باقیمانده را پر می‌کند */
}

/* تگ‌های فیلتر فعال */
.filter-tag {
    background-color: #e9ecef;
    color: #495057;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* پوشش مودال فیلتر */
.filter-modal-overlay {
    display: none; /* مخفی به صورت پیش‌فرض */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1050;
    align-items: center; /* مرکز عمودی */
    justify-content: center; /* مرکز افقی */
    overflow-y: auto; /* اسکرول در صورت نیاز */
}

/* محتوای مودال فیلتر */
.filter-modal-content {
    background: #fff;
    width: 90%;
    max-width: 450px;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
}

/* فرم داخل مودال */
.filter-modal-form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* فاصله بین فیلترها */
}

/* اطمینان از اینکه گروه‌های فرم داخل مودال margin اضافی ندارند */
.filter-modal-form .form-group {
    margin-bottom: 0;
}

/* تراز عنوان مودال */
.filter-modal-content h4 {
    text-align: center;
    margin-bottom: 20px;
}
/* END: استایل‌های نوار فیلتر */

/* --- START: استایل جدید برای بج نقطه قرمز تب‌ها --- */
/*
  این استایل یک نقطه قرمز کوچک در گوشه بالا-راست تب ایجاد می‌کند
  (چون در گام ۲ به دکمه تب position: relative دادیم، این کار به درستی انجام می‌شود)
*/
.tab-badge-dot {
    position: absolute;
    top: 8px;       /* فاصله از بالا */
    right: 10px;     /* فاصله از راست */
    width: 10px;
    height: 10px;
    background-color: #dc3545; /* همان رنگ قرمز اعلان‌ها */
    border-radius: 50%;
    border: 2px solid white; /* حاشیه سفید برای جدا شدن از پس‌زمینه تب */
    
    /* انیمیشن چشمک‌زن ملایم برای جلب توجه */
    animation: pulse-red 2s infinite;
}

/* انیمیشن چشمک‌زن (همان که برای زنگوله استفاده می‌شود) */
@keyframes pulse-red {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(220, 53, 69, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}

/* در حالت موبایل، نقطه را کمی جابجا می‌کنیم تا بهتر دیده شود */
@media (max-width: 768px) {
    .tab-badge-dot {
        top: 6px;
        right: 8px;
    }
}
/* --- END: استایل جدید --- */
/* --- START: استایل جدید برای امکان سرچ داخل فیلدهای انتخاب هنرجو --- */
/* --- شروع: استایل اختصاصی Select2 (نسخه اصلاح شده برای متون طولانی و موبایل) --- */

/* کانتینر اصلی: تنظیم ارتفاع داینامیک */
.select2-container .select2-selection--single {
    height: auto !important; /* ارتفاع خودکار برای جا دادن متن‌های طولانی */
    min-height: 55px !important; /* حداقل ارتفاع برای زیبایی */
    background-color: #f8f9ff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 8px !important;
    direction: rtl;
    display: flex !important;
    align-items: center !important;
    transition: all 0.3s ease;
    padding-top: 5px !important; /* فاصله داخلی بالا */
    padding-bottom: 5px !important; /* فاصله داخلی پایین */
}

/* حالت فوکوس */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* متن داخل فیلد (مهم‌ترین بخش برای شکستن متن) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #333 !important;
    line-height: 1.6 !important; /* فاصله خطوط برای خوانایی */
    padding-right: 15px !important;
    padding-left: 30px !important;
    font-size: 16px !important;
    font-family: 'Vazirmatn', sans-serif !important;
    width: 100%;
    white-space: normal !important; /* اجازه شکستن متن به خط بعد */
    word-wrap: break-word !important; /* شکستن کلمات خیلی طولانی */
    overflow: visible !important; /* نمایش کامل متن */
}

/* فلش (Arrow) سمت چپ */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 10px !important;
    right: auto !important;
    width: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* باکس جستجوی باز شده (Dropdown) */
.select2-dropdown {
    border: 2px solid #667eea !important;
    border-radius: 8px !important;
    overflow: hidden;
    z-index: 9999;
}

/* فیلد تایپ جستجو در داخل دراپ‌داون */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-family: 'Vazirmatn', sans-serif !important;
    margin: 10px !important;
    width: calc(100% - 20px) !important;
}

/* گزینه‌های لیست (Dropdown items) */
.select2-results__option {
    font-family: 'Vazirmatn', sans-serif !important;
    padding: 10px 15px !important;
    text-align: right;
    border-bottom: 1px solid #f0f0f0; /* خط جداکننده کمرنگ بین گزینه‌ها */
    white-space: normal !important; /* شکستن متن در لیست باز شده هم فعال باشد */
    line-height: 1.6 !important;
}

/* گزینه انتخاب شده */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #667eea !important;
    color: white !important;
}
/* --- پایان: استایل اختصاصی Select2 --- */

/* استایل برای ردیف‌های پرداخت چندگانه */
.multi-payment-row {
    display: grid;
    grid-template-columns: 40px 2fr 1fr 1.5fr; /* چک‌باکس، نام کلاس، جلسات، مبلغ */
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    background: #fff;
    transition: background 0.3s;
}

.multi-payment-row:hover {
    background: #f9f9f9;
}

.multi-payment-row.selected {
    background: #e8f0fe;
    border-left: 4px solid #667eea;
}

/* در موبایل ستون‌ها زیر هم قرار بگیرند */
@media (max-width: 768px) {
    .multi-payment-row {
        grid-template-columns: 40px 1fr; /* چک‌باکس و بقیه */
        grid-template-areas: 
            "check name"
            "check sessions"
            "check amount";
        gap: 5px;
    }
    .multi-payment-row > div:nth-child(2) { grid-area: name; font-weight: bold; }
    .multi-payment-row > div:nth-child(3) { grid-area: sessions; }
    .multi-payment-row > div:nth-child(4) { grid-area: amount; }
}

.total-amount-display {
    background: #333;
    color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
    font-size: 1.1em;
}

/* START: استایل‌های بخش گروه‌بندی (Segmentation) */
/* -----------/////////////////////--------------------- */

/* استایل لیست درختی */
.group-tree-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.group-tree-li {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

/* آیتم اصلی (نام گروه و دکمه‌ها) */
.group-tree-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px 10px 5px;
    transition: background 0.2s;
}

.group-tree-item-content:hover {
    background-color: #f8f9ff;
}

/* برای زیرمجموعه‌ها: فاصله از راست و خط راهنما */
.group-tree-children {
    list-style: none;
    padding-right: 25px; /* تو رفتگی برای زیرمجموعه */
    border-right: 2px solid #e0e0e0; /* خط راهنمای عمودی */
    margin-right: 15px;
}

/* دکمه‌های عملیات داخل درخت */
.group-actions {
    display: flex;
    gap: 5px;
}

/* دراپ‌داون سراسری در هدر */
.global-group-filter {
    padding: 6px 10px;
    font-size: 0.9rem;
    border-radius: 20px;
    border: 1px solid #667eea;
    background-color: #f0f2ff;
    color: #333;
    outline: none;
    cursor: pointer;
    font-family: 'Vazirmatn', sans-serif;
    max-width: 200px;
}

/* ریسپانسیو: در موبایل فیلتر سراسری تمام عرض نشود اما مرتب باشد */
@media (max-width: 768px) {
    .panel-title-group {
        flex-wrap: wrap;
    }
    .global-group-filter {
        margin-top: 5px;
        width: 100%;
        max-width: none;
    }
}

/* ======================================= */
/* استایل برای فیلتر سراسری گروه‌بندی (Global Segmentation Filter) */
/* ======================================= */

.global-segmentation-filter-area {
    width: 100%;
    max-width: 1200px; /* مطابق با container اصلی */
    margin: 15px auto; /* فاصله بالا و پایین و وسط چین شدن */
    padding: 15px 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex; /* برای تنظیم المان‌های داخلی */
    justify-content: center; /* وسط چین کردن فیلتر در دسکتاپ */
    align-items: center;
}

.global-segmentation-filter-area form {
    display: flex;
    align-items: center;
    gap: 10px; /* فاصله بین لیبل و select */
    width: 100%; /* برای اینکه در موبایل تمام عرض را بگیرد */
    max-width: 450px; /* محدودیت عرض برای زیبایی بیشتر */
}

.global-segmentation-filter-area .filter-label {
    font-weight: bold;
    color: #444;
    white-space: nowrap; /* جلوگیری از شکستن لیبل */
}

.global-segmentation-filter-area .group-filter-select {
    flex-grow: 1; /* اجازه می‌دهیم Selectbox تمام فضای باقیمانده را بگیرد */
    padding: 8px 12px;
    border: 1px solid #667eea;
    background-color: #f0f2ff;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
}

/* بهینه‌سازی برای موبایل */
@media (max-width: 768px) {
    .global-segmentation-filter-area {
        padding: 10px 10px;
        margin: 10px auto;
        border-radius: 8px;
    }

    .global-segmentation-filter-area form {
        flex-direction: column; /* لیبل و select زیر هم قرار می‌گیرند */
        align-items: flex-start; /* لیبل در بالا قرار می‌گیرد */
        gap: 5px;
    }

    .global-segmentation-filter-area .group-filter-select {
        width: 100%; /* Selectbox تمام عرض را می‌گیرد */
    }
}

/* ======================================= */
/* استایل مودال مدیریت گروه‌بندی */
/* ======================================= */

.group-form-container {
    display: flex;
    flex-wrap: wrap; /* اجازه شکستن به خط بعد */
    gap: 15px; /* فاصله بین آیتم‌ها */
    align-items: flex-end; /* تراز کردن در انتهای فرم */
}

.group-form-container .form-group-flex {
    /* در دسکتاپ، آیتم‌ها حدود 30% فضا بگیرند (بیشتر از 3 ستون در صورت امکان) */
    flex: 1 1 50%; 
    min-width: 100%; /* حداقل عرض برای جلوگیری از ریز شدن */
}

.group-form-container .form-group-flex label {
    display: block; /* لیبل تمام عرض را بگیرد */
    margin-bottom: 5px;
    font-weight: bold;
}

.group-form-container .form-group-flex .btn {
    width: 100%; /* دکمه‌ها تمام عرض آیتم خود را بگیرند */
}

/* حالت موبایل: هر آیتم تمام عرض را بگیرد و زیر هم قرار گیرند (Mobile First) */
@media (max-width: 600px) {
    .group-form-container {
        flex-direction: column; /* زیر هم قرار گرفتن تمام المان‌ها */
        gap: 10px;
    }
    .group-form-container .form-group-flex {
        flex: 1 1 100%; /* تمام عرض را بگیرد */
        min-width: 100%;
        margin-top: 0; /* فاصله اضافی در موبایل نباشد */
    }
    .group-form-container .form-group-flex .btn {
        margin-top: 0; /* دکمه نیز نیاز به margin-top اضافی ندارد */
    }
}

/* اصلاح فیلتر سراسری در دسکتاپ */
.global-segmentation-filter-area form {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    /* تغییر: افزایش عرض ماکزیمم برای جلوگیری از شکستن متن */
    max-width: 700px; 
}

/* استایل کانتینر درختی در صفحه اصلی (که در موبایل مخفی نشود) */
.group-tree-container-main {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
    /* تضمین نمایش در همه سایزها */
    display: block !important; 
}

/* در موبایل پدینگ کمتر باشد */
@media (max-width: 768px) {
    .group-tree-container-main {
        padding: 10px;
    }
    
    /* اطمینان از اینکه دکمه‌ها در موبایل درست نمایش داده شوند */
    .group-actions .btn-icon {
        font-size: 1.1rem;
        padding: 5px;
    }
}

/* END: استایل‌های گروه‌بندی */

/* دکمه سه‌نقطه */
.kebab-menu-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 10px;
    color: #888;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kebab-menu-btn:hover {
    color: #333;
    background-color: #f0f0f0;
    border-radius: 50%;
}

/* پنل مخفی عملیات که زیر آیتم باز می‌شود */
.group-actions-panel {
    display: none; /* پیش‌فرض مخفی */
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    /* نمایش دکمه‌ها کنار هم */
    flex-wrap: wrap; 
    gap: 15px;
    justify-content: flex-end; /* در RTL دکمه‌ها سمت چپ قرار می‌گیرند */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.03);
    animation: fadeIn 0.2s ease-in-out;
}

/* کلاس کمکی برای نمایش پنل */
.group-actions-panel.show {
    display: flex;
}

/* انیمیشن باز شدن نرم */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* END: استایل‌های جدید */

/* استایل لیست هنرجویان در مودال */
.checkbox-list-scroll {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 5px;
    background: #fafafa;
}
.checkbox-item {
    padding: 8px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}
.checkbox-item:hover {
    background-color: #f0f0f0;
}
.checkbox-item.is-assigned {
    background-color: #e8f5e9; /* سبز کمرنگ برای کسانی که عضو هستند */
}