@font-face {
    font-family: Vazirmatn;
    src: url('fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
/* ========================================= */
/* START: Dark Mode Variables & Settings     */
/* ========================================= */
:root {
    /* --- تم روشن (پیش‌فرض) --- */
    --bg-body: #ffffff;
    --bg-card: #f8f9fa;
    --bg-secondary: #f1f3f6; /* رنگ پس‌زمینه اینپوت‌ها و بخش‌های فرعی */
    --bg-header: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666;
    --text-secondary2: #bababa;
    --message-unread: #e9f5ff;
    --text-muted: #888888;
    --border-color: #e0e0e0;
    --input-bg: #f8f9ff;
    --input-border: #e0e0e0;
    --table-stripe: #f8f9fa;
    --modal-bg: #fefefe;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --sidebar-bg: #ffffff;
    --sidebar-link-hover: #f5f5f5;
    
    /* رنگ‌های برند (ثابت در هر دو حالت یا با تغییر جزئی) */
    --brand-primary: #667eea;
    --brand-secondary: #764ba2;
    --brand-gradient-start: #667eea;
    --brand-gradient-end: #764ba2;
}

/* تعریف تم تاریک */
[data-theme="dark"] .dashboard-page {
    /* --- تم تاریک --- */
    --bg-body: #0b0822; /* استاندارد Material Design Dark */
    --bg-card: #19142a; /* کمی روشن‌تر از پس‌زمینه اصلی */
    --bg-secondary: #2d2d2d;
    --bg-header: #1e1e1e;
    --text-primary: #e0e0e0; /* سفید خالص نیست تا چشم را نزند (Contrast Ratio امن) */
    --text-secondary: #a0a0a0;
    --text-secondary2: #5c5c5c;
    --message-unread: #3b444b;
    --text-muted: #777777;
    --border-color: #333333;
    --input-bg: #2d2d2d;
    --input-border: #444444;
    --table-stripe: #252525;
    --modal-bg: #1e1e1e;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --sidebar-bg: #1e1e1e;
    --sidebar-link-hover: #2d2d2d;
    
    /* در حالت دارک، گرادینت بنفش کمی تیره‌تر می‌شود تا نئونی نشود */
    --brand-primary: #7f9cf5; 
    --brand-secondary: #b77df1;
}

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

/* Alpine.js از این attribute برای مخفی‌کردن عنصر تا لحظه‌ی init شدن استفاده می‌کند؛
   خودِ Alpine این CSS را اضافه نمی‌کند، باید دستی تعریف شود، وگرنه یک لحظه‌ی کوتاه
   (FOUC) محتوای «باید مخفی باشد» قبل از اجرای Alpine دیده می‌شود. */
[x-cloak] {
    display: none !important;
}

body {
    font-family: 'Vazirmatn', sans-serif;
    font-feature-settings: "lnum", "pnum";
    min-height: 100vh;
    direction: rtl;
    position: relative;
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* اعمال رنگ بادی با اولویت بالا در داشبورد */
.dashboard-page {
    background-color: var(--bg-body) !important;
    color: var(--text-primary);
}

/* اصلاح رنگ پس‌زمینه گرادینت ثابت بادی (body::before) در حالت دارک */
[data-theme="dark"] .dashboard-page body::before {
    opacity: 0.1; /* گرادینت بنفش را در حالت شب خیلی محو می‌کنیم */
}
/* ========================================= */
/* END: Dark Mode Variables                  */
/* ========================================= */

/* وارث‌بری فونت برای تمام المان‌های فرم */
button, input, select, textarea, label {
    font-family: inherit;
}

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;
}

h3 {
    margin-top: 30px;
    margin-bottom: 20px;
}

th {
    color:#667eea;
}

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

.card {
    background: var(--bg-card); /* تغییر از 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: var(--text-primary);
}

.form-control {
    width: 100%;
    background-color: var(--input-bg); /* تغییر از #f8f9ff */
    border: 2px solid var(--input-border); /* تغییر از #e0e0e0 */
    color: var(--text-primary); /* اضافه شده */
    padding: 12px 15px;
    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);
}

.bulk-assign-tools {
    background: var(--input-bg);
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* استایل برای قابلیت نمایش/عدم نمایش رمز عبور */
.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;
}

/* این قانون، فونت سیستم را فقط برای فیلدهای پسورد اعمال می‌کند */
input[type="password"],
input.password-type, .password-wrapper {
    font-family: Tahoma, sans-serif !important;
    /* یا از فونت‌های امن سیستم‌عامل استفاده کنید: */
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; */
}

.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 */
}

/* Start: secondary 2 */
.btn-secondary2 {
    background: lightgray;
    color: white;
    
    /* Add gradient animation */
    background-size: 150% 150%;
}

.btn-secondary2:hover {
    background: gray;
    transform: translateY(-2px) scale(1.02); /* Add scale for extra pop */
    box-shadow: 0 5px 15px rgba(75, 75, 75, 0.4);
}
/*End: secondary 2 */

.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: var(--brand-primary);
    transition: all 0.3s ease;
}

.btn-icon:hover {
    color: var(--brand-secondary);
    
    /* 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;
}

.alert-warning {
    background: #f8d7da;
    color: #cd5d0d;
    border: 1px solid #e5dec1;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    font-size:0.9em;
}

/* START: بنر اطلاع‌رسانی خنثی (مثل سقف تعداد نقش/عضو تیم بر اساس پلن) */
.alert-info {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 12px 15px;
}
[data-theme="dark"] .alert-info {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}
/* .plan-limit-notice: عمداً کلاس .alert نمی‌گیرد. اسکریپت js/main.js همه‌ی عناصر
   .alert را ۵ ثانیه بعد از لود صفحه خودکار محو/حذف می‌کند (برای پیام‌های موقتیِ
   فرم مثل موفقیت/خطا) — ولی این بنر یک اطلاعیه‌ی دائمی (سقف نقش/عضو تیم) است که
   داخل یک مودالِ در ابتدا مخفی قرار دارد؛ اگر کلاس .alert می‌گرفت، تایمر همان لحظه‌ی
   لود صفحه شروع می‌شد و تا وقتی کاربر مودال را باز کند، پیام از قبل ناپدید شده بود
   (دقیقاً همان باگ گزارش‌شده: «پیام آبی خیلی سریع می‌رود»). */
.plan-limit-notice {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 8px;
    padding: 12px 15px;
}
[data-theme="dark"] .plan-limit-notice {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}
/* END: بنر اطلاع‌رسانی خنثی */

/* استایل راهنمای استفاده از آیکون‌ها */
.icon-guide {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* موبایل: 6 ستون */
    gap: 12px;
    text-align: center;
  }
  
  .icon-item {
    font-size: 12px;
  }
  
  .icon-item i {
    /*font-size: 22px; */
    display: block;
    margin-bottom: 6px;
    width: auto;
  }
  
  .icon-item span {
    display: block;
    line-height: 1.4;
  }
  
  /* دسکتاپ */
  @media (min-width: 992px) {
    .icon-guide {
      grid-template-columns: repeat(12, 1fr); /* دسکتاپ: 12 آیکون در یک ردیف */
    }
  }

/* تب‌ها استایل جدید*/
.tabs {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start; 
    gap: 8px; 
    padding: 15px 5px; 
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    
    /* --- اصلاحات برای حالت چسبان (Sticky) --- */
    position: -webkit-sticky;
    position: sticky !important;
    /* فاصله از بالا باید به اندازه ارتفاع هدر اصلی (panel-header) باشد تا زیر آن گیر کند */
    top: 42px !important; 
    z-index: 98 !important; /* کمتر از هدر اصلی (101) ولی بیشتر از محتوا */
    /* اضافه کردن پس‌زمینه برای اینکه محتوا هنگام اسکرول از زیر تب دیده نشود */
    background-color: var(--bg-card); 
    /* یک سایه ملایم پایین تب‌ها وقتی اسکرول می‌شود */
    box-shadow: 0 4px 20px -10px rgba(0,0,0,0.1);
    /* گوشه‌های پایین را کمی گرد می‌کنیم تا زیباتر شود */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    /* برای جلوگیری از پرش در برخی مرورگرها */
    transform: translateZ(0); 
}

.tab {
    flex-shrink: 0;
    padding: 10px 18px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Vazirmatn', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap; /* جلوگیری از شکستن متن تب */
    position: relative; /* برای بج */
}

/* هاور روی تب غیرفعال */
.tab:not(.active):hover {
    background-color: rgba(102, 126, 234, 0.08); /* رنگ برند با شفافیت کم */
    color: var(--brand-primary);
    border-bottom-color: transparent; /* حذف استایل قبلی */
    transform: translateY(-1px);
}

/* جایگزین شود */
.tab.active {
    /* گرادینت برند شما برای حالت فعال */
    background: linear-gradient(135deg, var(--brand-gradient-start), var(--brand-gradient-end)); 
    color: #ffffff; /* متن سفید */
    border-color: transparent;
    
    /* سایه رنگی ملایم (Glow effect) */
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
    
    transform: translateY(-1px); /* کمی بالا آمدن */
}

.tab i {
    transition: transform 0.2s ease, font-weight 0.2s ease;
}

/* تغییر رنگ آیکون‌ها داخل تب فعال به سفید */
.tab.active i {
    color: #ffffff !important;
    transform: scale(1.1); /* آیکون فعال کمی بزرگتر شود */
}

.tab-content {
    display: none;
}

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

/* --- START: استایل جدید برای بج نقطه قرمز تب‌ها --- */
/*
  این استایل یک نقطه قرمز کوچک در گوشه بالا-راست تب ایجاد می‌کند
  (چون در گام ۲ به دکمه تب position: relative دادیم، این کار به درستی انجام می‌شود)
*/
.tab-badge-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px; /* جلوگیری از تغییر شکل در اثر فشردگی تب */
    min-height: 10px;
    background-color: #ff4d4d;
    border-radius: 50% !important;
    border: 2px solid var(--bg-card);
    z-index: 2;
    display: block;
    
    /* انیمیشن چشمک‌زن ملایم برای جلب توجه */
    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;
    }
}

/* وقتی تب فعال است، رنگ دور نقطه باید با رنگ تب یکی شود */
.tab.active .tab-badge-dot {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px var(--brand-primary); 
    background-color: #ffcccb; /* صورتی خیلی روشن بجای قرمز جیغ روی بنفش */
}

/* استایل فلش‌های راهنمای اسکرول در موبایل */
.tabs-container-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

.scroll-arrow {
    /* تغییر کلیدی: استفاده از استیکی به جای فیکس */
    position: -webkit-sticky;
    position: sticky;
    /* در موبایل، تاپ باید دقیقاً وسط ارتفاعِ تبِ چسبیده باشد */
    top: 50px; 
    z-index: 100; /* بالاتر از تب‌ها */
    
    width: 30px;
    height: 30px;
    background: var(--bg-card); /* همرنگ زمینه تب */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0; /* پیش‌فرض مخفی */
    transition: opacity 0.3s, transform 0.2s;
    pointer-events: none; /* وقتی مخفی است کلیک نشود */
    /* جلوگیری از جابجایی تب‌ها: دکمه‌ها را از جریان اصلی خارج می‌کنیم اما در والد نگه می‌داریم */
    margin-top: 8px; /* تنظیم ارتفاع بصری وسط تب */
    margin-bottom: -40px;
}

.scroll-arrow.visible {
    opacity: 0.9;
    pointer-events: auto;
}

.scroll-arrow.left { float: left; left: 5px; transform: translateX(5px); }
.scroll-arrow.right { float: right; right: 5px; transform: translateX(-5px); }

[data-theme="dark"] .scroll-arrow {
    background: rgba(45, 45, 60, 0.9);
    color: #fff;
}

/* تنظیمات ویژه برای مانیتورهای کوچک و لپ‌تاپ‌ها */
@media (min-width: 992px) {
    .tabs {
        justify-content: center; /* در دسکتاپ که اسکرول ندارد، وسط‌چین شود */
        overflow: hidden; /* در دسکتاپ اسکرول را کاملاً غیرفعال کن */        
        top: 39px !important; /* در دسکتاپ هم باید چسبان باشد */
    }

    .tab {
        /* اجازه بده تب‌ها منقبض شوند تا در یک خط جا بگیرند */
        flex: 0 1 auto; 
        min-width: 0; /* اجازه انقباض محتوا */
        padding: 8px 12px; /* پدینگ فشرده‌تر */
        font-size: 0.82rem; /* فونت کمی کوچکتر برای اطمینان از جا شدن ۸ تب */
        gap: 5px;
    }
    
    /* اگر متن تب طولانی بود، آن را نشکن و اجازه بده کمی فشرده شود */
    .tab span, .tab {
        white-space: nowrap;
    }

    .scroll-arrow {
        display: none; /* معمولاً در دسکتاپ فلش نیاز نیست چون اسکرول مخفی نیست، ولی اگر نیاز بود خط display را پاک کنید */
    }
}
/* --- END: استایل جدید --- */

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

.user-card {
    background: var(--bg-secondary); /* تغییر از white */
    border-radius: 10px;
    padding: 20px;
    border-right: 4px solid var(--brand-primary);
    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;
    align-items: center; /* تراز عمودی از وسط */
    gap: 5px;
}

.user-card .actions .btn-icon {
    font-size: 1rem;
    color: var(--brand-primary);
}

.user-card .actions .btn-icon:hover {
    color: var(--brand-secondary);
}

/* استایل برای کارت هنرجوی غیرفعال */
.user-card.deactive {
    background-color: #ddd !important; /* خاکستری روشن */
    border-right-color: #888 !important; /* نوار کناری خاکستری */
    opacity: 0.8;
}

.user-card.deactive h3, 
.user-card.deactive p, 
.user-card.deactive .class-list {
    color: #777 !important; /* متن‌ها خاکستری شوند */
}

/* بج وضعیت غیرفعال */
.status-badge-deactive {
    background-color: #6c757d;
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin-right: 5px;
    vertical-align: middle;
}


.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: 5px;
    }

    .container-inside {
        padding: 10px;
    }
    
    .card {
        padding: 20px;
    }
    
    .header h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 16px;
    }

    button.tab {
        font-size: 14px;
    }
    
    .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;
    }
}

/* جداول */
.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: var(--bg-secondary);
    font-weight: bold;
}

.table tr {
    border-bottom: 1px solid var(--border-color);
}
.table tr:hover {
    background: var(--bg-secondary);
}

.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: var(--modal-bg); /* تغییر از #fefefe */
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 20px;
    max-width: 600px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    flex-direction: column;            /* چیدمان ستونی برای هدر، محتوا و فوتر */
    /* رفع باگ مهم: چون .modal خودش display:flex است، .modal-content یک flex-item محسوب
       می‌شود و پیش‌فرض مرورگر برای flex-item ها min-width:auto است (نه 0)؛ یعنی اگر هر
       فرزندی داخلش (مثلاً جدول اقساط با min-width ثابت) از عرض موبایل بزرگ‌تر باشد،
       کل مودال بزرگ‌تر از عرض صفحه رندر می‌شود و از کادر بیرون می‌زند، چون مرورگر اجازه‌ی
       کوچک‌تر شدن مودال از عرض محتوای داخلی‌اش را نمی‌دهد. min-width:0 این محدودیت را
       برمی‌دارد تا اسکرول افقی داخلیِ فرزندان (مثل .installment-schedule-scroll) واقعاً
       کار کند، به‌جای این‌که کل مودال را بیرون بزند. */
    min-width: 0;
    max-width: min(600px, calc(100vw - 30px)); /* هرگز از عرض قابل‌مشاهده‌ی موبایل بیرون نزند */
    box-sizing: border-box;
}
/* همان دلیل بالا، برای فرم‌هایی که مستقیم فرزند modal-content هستند نیز باید min-width صفر شود */
.modal-content > form {
    min-width: 0;
}

.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;
}

/* START: مودال نمایش رسید — نگاه کنید به READMES/README_security_hardening.md
   و پنل‌های payment_row.php/salary_row.php/student_payments_tab.php. */
.receipt-viewer-content {
    max-width: min(700px, calc(100vw - 30px));
    width: 100%;
    text-align: center;
}
.receipt-viewer-body {
    max-height: min(75vh, 700px);
    overflow: auto; /* وقتی زوم فعال است، اسکرول برای دیدن گوشه‌های تصویر */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: var(--input-bg);
    border-radius: 10px;
    padding: 10px;
    min-height: 120px;
}
.receipt-viewer-loading {
    color: var(--text-secondary);
    padding: 40px 10px;
    font-size: 0.95rem;
}
.receipt-viewer-img {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.2s ease;
    transform-origin: center top;
}
.receipt-viewer-img.zoomed {
    max-width: none;
    max-height: none;
    width: auto;
    transform: scale(2);
    cursor: zoom-out;
}
/* END: مودال نمایش رسید */

.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;
    border-radius: 8px;
    font-weight: bold;
    color: #3d4495;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;      
    margin-bottom: 0; /* تغییر از 10px به 0 برای چسبیدن به داشبورد هوشمند */
    border-bottom-left-radius: 0; /* اگر داشبورد هست، گوشه پایین تیز شود */
    border-bottom-right-radius: 0;      
}

/* استایل داشبورد هوشمند */
.class-smart-dashboard {
    /* سایه ملایم داخلی */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}

.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-right: 7px solid #28a745;
}
.class-details.unpaid {
    border-right: 7px solid #dc3545;
}

.class-details.pending {
    border-right: 7px 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;
    padding-right: 8px;
}
.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.65;               /* کمی شفافیت */
}

/* تغییر رنگ هدر کلاس در حالت پایان‌یافته برای هماهنگی با پس‌زمینه */
.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; }

/* برای اسکرول شدن لیست کلاس‌ها در مودال‌ها */
.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: var(--input-bg);
}
/* 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;
    font-size: 2rem;
}

/* مودال پیام‌های کاربر */
.messages-list .message-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}
.messages-list .message-item:hover {
    background-color: var(--bg-secondary);
}
.messages-list .message-item.unread {
    background-color: var(--message-unread);
    font-weight: bold;
}
.messages-list .message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.messages-list .message-subject {
    color: var(--brand-primary);
}
.messages-list .message-date {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.messages-list .message-body {
    display: none; /* به صورت پیش‌فرض مخفی */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-color);
    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: 101;
    background-color: var(--bg-card); /* تغییر از white */
    transform: translateZ(0);
}

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

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

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

/* آیکون منوی همبرگری */
.hamburger-menu {
    font-size: 1.5rem; /* آیکون بزرگتر */
    color: var(--brand-primary);
    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: var(--brand-secondary);
}

/* پوشش (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: var(--sidebar-bg); /* تغییر از #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 var(--border-color); /* تغییر از #e0e0e0 */
}

.sidebar-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-primary); /* تغییر از #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: 12px;
    padding: 9px 20px;
    color: var(--text-secondary); /* تغییر از #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: var(--sidebar-link-hover); /* تغییر از #f5f5f5 */
    color: var(--brand-primary);
}

.sidebar-link.active {
    background-color: var(--bg-secondary);
    color: var(--brand-primary);
    border-right-color: var(--brand-primary);
    font-weight: bold;
}

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

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

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

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

.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 !important; }

    [data-theme="dark"] {
        /* ریست کردن تمام رنگ‌های دارک مود */
        --text-secondary: #000000 !important;
        --text-primary: #000000 !important;
        --bg-body: #ffffff !important;
        --bg-card: #ffffff !important;
        --bg-secondary: #fff !important; /* رنگ پس‌زمینه اینپوت‌ها و بخش‌های فرعی */
        --bg-header: #ffffff !important;
    }

    [data-theme="dark"] .dashboard-page h2, 
    [data-theme="dark"] .dashboard-page h3,
    [data-theme="dark"] .dashboard-page h4,
    [data-theme="dark"] .dashboard-page label {
        color: #000 !important;
        background: none; /* حذف گرادینت برای خوانایی بهتر در دارک مود */
    }
    
    [data-theme="dark"] .dashboard-page .table-responsive #payment-table table tr td {
        color: #000000 !important;
        background-color: #ffffff !important;
    }

    [data-theme="dark"] .dashboard-page .card, .dashboard-page .container-inside h2 h3 h4 {
        background-color: #fff !important;
        border-color: #000 !important;
        color: #000 !important;
        background: #fff !important;
    }
    
    /* اطمینان از پس‌زمینه سفید برای پرینت */
    body, .dashboard-page, .table-responsive, table, tr, td, th {
        background-color: #ffffff !important;
        color: #000000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    @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;
    }
    .xmb-nav {
        display: none !important;
    }     
  }
/* نمودار: استایل جدید */
.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);
    box-sizing: border-box;
}
/* رفع باگ مهم: خودِ canvas باید داخل یک والدِ اختصاصی با ارتفاع ثابت و
   position:relative قرار بگیرد (نه مستقیم داخل .chart-container که تیتر h3 هم
   دارد)، وگرنه Chart.js (با responsive:true) هر بار که این تب دوباره از سرور لود
   شود (مثلاً بعد از ثبت یک پرداخت/قسط جدید و dirty-tab reload با HTMX)، ارتفاع
   canvas را بر اساس اندازه‌ی لحظه‌ای و ناپایدار DOM محاسبه می‌کند و می‌تواند هر بار
   بلندتر و بلندتر شود. با این والدِ اختصاصیِ با ارتفاع ثابت، Chart.js همیشه یک
   مبنای قابل اتکا برای اندازه‌گیری دارد و رشد افسارگسیخته دیگر رخ نمی‌دهد. */
.chart-canvas-wrapper {
    position: relative;
    height: 320px;
    width: 100%;
}

.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: var(--brand-primary); /* استفاده از رنگ تم */
    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: var(--brand-primary); /* رنگ تم */
    
    /* وسط‌چین کردن نقطه */
    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: var(--brand-primary); /* رنگ بوردر را با نقطه هماهنگ کن */
}

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 var(--border-color); /* رنگ تیک (سفید) */
    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: var(--brand-primary); /* پر کردن پس‌زمینه با رنگ تم */
    border-color: var(--brand-primary);
}

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: 100px 1fr; /* دو ستونه: روز و ساعت */
    gap: 12px;
    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-top: 15px;
    margin-bottom: 15px;
    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-color: var(--modal-bg); /* تغییر از #fefefe */
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    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: استایل جدید برای امکان سرچ داخل فیلدهای انتخاب هنرجو --- */
/* --- شروع: استایل اختصاصی 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: var(--input-bg);
    transition: background 0.3s;
}

.multi-payment-row:hover {
    background: var(--bg-card);
}

/* START: استایل ردیف اضافات/کسورات/مبلغ نهایی هر کلاس در پرداخت شهریه چندکلاسه (فیچر جدید)
   این بلوک همیشه در یک ردیف جدید (زیر ۴ ستون اصلی) و به عرض کامل نمایش داده می‌شود */
.multi-payment-row-adjustments {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 5px;
    border-top: 1px dashed #ddd;
}
.multi-payment-row-adjustments input {
    max-width: 140px;
}
.multi-payment-row-adjustments .row-final-amount {
    font-weight: bold;
    color: #178230;
    margin-inline-start: auto;
}
/* END: استایل ردیف اضافات/کسورات */

.multi-payment-row.selected {
    background: var(--bg-card);
    border-left: 4px solid var(--brand-primary);
}

/* در موبایل ستون‌ها زیر هم قرار بگیرند */
@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; }
    /* ردیف اضافات/کسورات (فیچر جدید) همیشه به عرض کامل و زیر بقیه فیلدها نمایش داده شود */
    .multi-payment-row-adjustments { grid-column: 1 / -1; }
}

.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-color: var(--bg-card); /* تغییر از #fff */
    /*border: 1px solid var(--border-color); /* تغییر از #ddd */
    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: var(--bg-body);
}

/* برای زیرمجموعه‌ها: فاصله از راست و خط راهنما */
.group-tree-children {
    list-style: none;
    padding-right: 25px; /* تو رفتگی برای زیرمجموعه */
    border-right: 2px solid var(--border-color); /* خط راهنمای عمودی */
    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 .panel-header-icons {
        gap: 5px;
    }
    .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: var(--bg-card); /* تغییر از white */
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    display: flex; /* برای تنظیم المان‌های داخلی */
    justify-content: center; /* وسط چین کردن فیلتر در دسکتاپ */
    align-items: center;
    position: sticky;
    top: 100px;
    z-index: 97;
}

.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: var(--text-primary);
    /*white-space: nowrap; /* جلوگیری از شکستن لیبل */
    word-break: keep-all; /* جلوگیری از شکستن کلمات فارسی */
    overflow-wrap: anywhere; /* شکستن در صورت نیاز */
}

.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;
        top: 50px !important;
    }

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

    .global-segmentation-filter-area .group-filter-select {
        width: 100%; /* Selectbox تمام عرض را می‌گیرد */
    }
    
    /* استایل جدید برای لیبل در موبایل */
    .global-segmentation-filter-area .filter-label {
        width: 100%; /* لیبل تمام عرض را بگیرد */
        text-align: right; /* تراز به راست */
        margin-bottom: 8px;
        line-height: 1.4; /* فاصله خطوط بیشتر برای خوانایی */
        word-break: keep-all; /* جلوگیری از شکستن کلمات فارسی */
        overflow-wrap: break-word; /* شکستن کلمات طولانی */
        white-space: normal !important; /* اجباری برای شکستن خط */
    }
    
    /* استایل برای تگ فیلتر فعال در موبایل */
    .global-segmentation-filter-area .active-filters-display {
        width: 100%;
        margin-top: 10px;
    }
    
    .global-segmentation-filter-area .filter-tag {
        width: 100%;
        text-align: center;
        padding: 8px 12px;
        word-break: keep-all;
        overflow-wrap: break-word;
        white-space: normal;
        line-height: 1.4;
        display: block; /* نمایش بلاکی برای شکستن خط */
    }
}

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

.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-color: var(--modal-bg); /* تغییر از #fff */
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    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: 15px 7px;
    color: var(--text-primary);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kebab-menu-btn:hover {
    color: var(--text-secondary);
    background-color: var(--bg-card);
    border-radius: 50%;
}

/* پنل مخفی عملیات که زیر آیتم باز می‌شود */
.group-actions-panel {
    display: none; /* پیش‌فرض مخفی */
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    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 var(--border-color);
    padding: 10px;
    border-radius: 5px;
    background: var(--input-bg);
}
.checkbox-item {
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
    background: var(--bg-secondary);
    color: var(--text-primary);
}
.checkbox-item:hover {
    background-color: var(--bg-secondary2);
}
.checkbox-item.is-assigned {
    background-color: #e8f5e9; /* سبز کمرنگ برای کسانی که عضو هستند */
}

/* --- استایل‌های منوی کبابی داخل کارت‌های هنرجو و معلم --- */

/* کانتینر نگهدارنده دکمه کبابی برای پوزیشن‌دهی نسبی */
.kebab-container {
    position: relative;
    display: inline-block;
}

/* اصلاح پنل عملیات برای حالت کارت (شناور و لیست عمودی) */
.group-actions-panel.card-dropdown-menu {
    position: absolute;
    top: 100%; /* نمایش دقیقاً زیر دکمه */
    left: 0;   /* تراز با سمت چپ دکمه (چون دکمه‌های اکشن سمت چپ کارت هستند) */
    z-index: 100; /* اولویت نمایش بالا */
    width: 180px; /* عرض مناسب منو */
    background-color: #fff;
    flex-direction: column; /* چیدمان عمودی آیتم‌ها */
    align-items: stretch;
    padding: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* سایه بیشتر برای حالت شناور */
    border-color: #ddd;
}

/* استایل دکمه‌های داخل منوی شناور */
.group-actions-panel.card-dropdown-menu .btn-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* متن و آیکون راست‌چین (RTL) */
    gap: 10px;
    width: 100%;
    padding: 8px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.9rem;
    color: #555;
    border-radius: 5px;
    transition: background 0.2s;
}

.group-actions-panel.card-dropdown-menu .btn-icon:hover {
    background-color: #f0f2f5;
    color: #333;
    transform: none; /* حذف چرخش آیکون در این منو */
}

/* اصلاح فرم‌های داخل منو که دکمه را خراب نکنند */
.group-actions-panel.card-dropdown-menu form {
    width: 100%;
    margin: 0;
}

/* START: استایل‌های دکمه نصب PWA */
.btn-pwa-install {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%); /* گرادینت سبز */
    color: white;
    border: none;
    border-radius: 50px; /* دکمه کپسولی */
    padding: 10px 25px;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
    animation: pwaPulse 2s infinite; /* انیمیشن جلب توجه */
}

.btn-pwa-install:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
}

.btn-pwa-install:active {
    transform: translateY(-1px);
}

.btn-pwa-install svg {
    width: 28px;   
    height: 28px; 
    fill: currentColor; /* این خط مهم است تا رنگ آیکون سفید شود */
}

/* انیمیشن تپش ملایم برای دکمه نصب */
@keyframes pwaPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}
/* END: استایل‌های دکمه نصب PWA */

/* ===== X Mobile Bottom Navigation ===== */
.xmb-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background: var(--bg-body);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 999;
    transition: transform 0.3s ease-in-out;
}

.xmb-nav i {
    width: auto;
}

/* hidden state */
.xmb-nav.xmb-hidden {
    transform: translateY(100%);
}

.xmb-item {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: var(--brand-primary);
    text-decoration: none;
}

.xmb-item i {
    font-size: 20px;
    display: block;
    margin-bottom: 4px;
}

/* فقط موبایل و تبلت عمودی */
@media (min-width: 1025px) {
    .xmb-nav {
        display: none;
    }
}

/* مخفی در حالت افقی */
@media (orientation: landscape) {
    .xmb-nav {
        display: none;
    }
}

/* --- START: استایل نقطه هشدار روی زنگوله (اضافه شده) --- */
.notification-warning-dot {
    position: absolute;
    top: 5px;
    left: 2px; /* در سمت چپ قرار می‌دهیم تا با بج شمارنده (سمت راست) تداخل نکند */
    width: 10px;
    height: 10px;
    background-color: #ffc107; /* رنگ زرد/نارنجی برای هشدار (متمایز از قرمز پیام) */
    border-radius: 50%;
    border: 2px solid white;
    display: none; /* پیش‌فرض مخفی */
    animation: pulse-red 2s infinite; /* استفاده از انیمیشن موجود */
    z-index: 5;
}

/* استایل متن هشدار در مودال */
#notification-warning-text {
    font-size: 0.85rem;
    margin-top: 8px;
    line-height: 1.5;
    display: none; /* پیش‌فرض مخفی */
}
/* --- END: استایل نقطه هشدار --- */

/* ========================================= */
/* START: Theme Toggle Switch Styles         */
/* ========================================= */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    direction: ltr; /* جهت چپ به راست برای اسلایدر */
}

.theme-switch {
    display: inline-block;
    height: 26px;
    position: relative;
    width: 50px;
    margin-bottom: 0; /* جلوگیری از مارجین اضافی لیبل */
}

.theme-switch input {
    display: none;
}

.slider {
    background-color: #ccc;
    bottom: 0;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: .4s;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.slider:before {
    background-color: #fff;
    bottom: 3px;
    content: "";
    height: 20px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 20px;
    border-radius: 50%;
    z-index: 2; /* روی آیکون‌ها قرار بگیرد */
}

/* وقتی چک شد (حالت دارک) */
input:checked + .slider {
    background-color: #667eea;
}

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

/* آیکون‌ها */
.sun-icon {
    color: #f39c12;
    font-size: 14px;
    margin-right: 2px; /* تنظیم موقعیت */
}

.moon-icon {
    color: #f1c40f;
    font-size: 12px;
    margin-left: 2px; /* تنظیم موقعیت */
}
/* ========================================= */
/* END: Theme Toggle Switch Styles           */
/* ========================================= */
/* --- استایل‌های صفحه خانه (داشبورد دسترسی سریع) --- */

.home-section-title {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 25px 0 15px 0;
    padding-right: 5px;
    border-right: 3px solid var(--brand-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-grid {
    display: grid;
    /* در موبایل ۲ ستون، در تبلت ۳ و دسکتاپ ۴ یا ۵ ستون */
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding-bottom: 30px;
}

@media (min-width: 576px) {
    .home-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 992px) {
    .home-grid { grid-template-columns: repeat(4, 1fr); }
}

/* کارت‌های دسترسی */
.access-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px; /* گردتر طبق MD3 */
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.access-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    background-color: var(--bg-body);
}

.access-card:active {
    transform: scale(0.96);
}

/* آیکون‌ها */
.access-icon-wrapper {
    width: 55px;
    height: 55px;
    border-radius: 16px; /* شکل نزدیک به کپسول/مربع گرد */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.access-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.access-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: -8px;
}

/* پالت رنگی آیکون‌ها (گرادینت مدرن) */
.grad-blue   { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.grad-purple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.grad-orange { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%); background: linear-gradient(135deg, #ffbc85, #ff6b6b); }
.grad-green  { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.grad-red    { background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%); }
.grad-teal   { background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.grad-dark   { background: linear-gradient(135deg, #434343 0%, #000000 100%); }

/* حالت دارک مود */
[data-theme="dark"] .dashboard-page .access-card {
    background-color: #252525;
    border-color: #333;
}
[data-theme="dark"] .dashboard-page .access-card:hover {
    background-color: #303030;
}

/* ========================================= */
/*  step Container */
.steps-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    font-family: "Vazirmatn", sans-serif;
    direction: rtl;
    text-align: center;
    background: var(--bg-body);
    color: var(--text-primary);
    border-radius: 8px;
}

/* Section Title */
.section-title {
    font-size: 22px;
    margin: 30px 0 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Main Steps */
.main-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.step-item {
    background: var(--bg-card);
    padding: 20px;
    width: 250px;
    border-radius: 14px;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: 0.3s;
    cursor: pointer;
}

.step-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.step-item p {
	text-align: center;
}
.step-item i {
    font-size: 40px;
    background: linear-gradient(to right, var(--brand-gradient-start), var(--brand-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.step-item h3 {
    margin: 10px 0 5px;
    font-size: 18px;
    color: var(--text-primary);
    display: block;
}

.step-item p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0px 0px 2rem;
}

.step-line {
    flex-grow: 1;
    height: 3px;
    background: linear-gradient(to left, var(--brand-gradient-start), var(--brand-gradient-end));
    border-radius: 3px;
    min-width: 40px;
}

/* Features Grid */
.step-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 15px;
}

.step-card {
    background: var(--bg-card);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
    transition: 0.25s;
    cursor: pointer;
}

.step-card:hover {
    background: linear-gradient(to right, var(--brand-gradient-start), var(--brand-gradient-end));
    color: #fff;
    transform: translateY(-4px);
}

.step-card:hover span {
    color: #fff;
}

.step-card:hover i {
    background: #fff;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.step-card i {
    font-size: 28px;
    background: linear-gradient(to right, var(--brand-gradient-start), var(--brand-gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
}

.step-card span {
    display: block;
    font-size: 15px;
    margin-top: 5px;
    color: var(--text-primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .main-steps {
        flex-direction: column;
    }
	.step-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
    .step-line {
        display: none;
    }
}
/* ========================================= */

/* ========================================= */
/* START: Dark Mode Specific Overrides       */
/* ========================================= */
.dashboard-page .card, 
.dashboard-page .container-inside {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dashboard-page .sidebar {
    background-color: var(--sidebar-bg) !important;
}

/* اصلاح رنگ متن هدرها در حالت دارک */
[data-theme="dark"] .dashboard-page h2, 
[data-theme="dark"] .dashboard-page h3,
[data-theme="dark"] .dashboard-page h4,
[data-theme="dark"] .dashboard-page label {
    color: var(--text-primary) !important;
    background: none; /* حذف گرادینت برای خوانایی بهتر در دارک مود */
}

[data-theme="dark"] .dashboard-page h5,
[data-theme="dark"] .dashboard-page .chart-container h3 {
    color: var(--text-secondary) !important;
    background: none; /* حذف گرادینت برای خوانایی بهتر در دارک مود */
}

/* تب‌ها */
[data-theme="dark"] .tab {
    color: var(--text-secondary); /* رنگ متن در حالت عادی */
    background-color: rgba(255, 255, 255, 0.03); /* یک پس‌زمینه خیلی محو برای دکمه‌های غیرفعال */
}

[data-theme="dark"] .tab:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

[data-theme="dark"] .tab.active {
    /* در دارک مود، گرادینت کمی روشن‌تر یا فلت‌تر می‌شود تا کنتراست حفظ شود */
    background: linear-gradient(135deg, #7f9cf5, #b77df1);
    color: #fff;
    box-shadow: 0 4px 20px rgba(127, 156, 245, 0.4); /* سایه درخشان‌تر در شب */
}

/* جداول */
[data-theme="dark"] .dashboard-page .table th {
    background-color: #2d2d2d;
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .dashboard-page .table h5 tr td {
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .dashboard-page .table tr:hover {
    background-color: var(--table-stripe);
}

[data-theme="dark"] .dashboard-page .table-responsive th {
    
    border-bottom: 1px solid var(--border-color);
}
[data-theme="dark"] .dashboard-page .table-responsive tr td {
    color: var(--text-primary);
}
[data-theme="dark"] .dashboard-page .table-responsive tr:hover {
    background-color: var(--table-stripe);
}
/* ویژه جدول شهریه*/
/* FIX: قبلاً اینجا اشتباهاً از var(--table-stripe) (که در حالت تیره یک خاکستری
   خیلی تیره/تقریباً سیاه است، #252525) به‌عنوان رنگ *متن* استفاده شده بود — یعنی
   متن با پس‌زمینه‌ی خودِ ردیف تقریباً هم‌رنگ و ناخوانا می‌شد؛ این مشکل روی ردیف‌های
   عادی هم بود ولی چون پس‌زمینه‌شان شفاف/تیره‌ی معمولی صفحه بود کمتر به چشم می‌آمد،
   و روی ردیف‌های پرداخت اقساطی (که پس‌زمینه‌ی رنگی مخصوص به خود دارند — نگاه کنید
   به .installment-row-approved/.installment-row-enrollment-zero پایین‌تر) کاملاً
   غیرقابل‌خواندن می‌شد. رنگ درست همان متغیر متن حالت تیره (var(--text-primary)) است. */
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr td {
    color: var(--text-primary);
}
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr:hover {
    background-color: var(--text-secondary);
}

/* START: ردیف‌های وضعیت شهریه («تأییدشده» سبز / «در انتظار تأیید» زرد) در حالت
   تیره — این دو رنگ‌بندی (status-paid-row/status-pending-row) با یک پس‌زمینه‌ی
   ثابتِ روشن (سبز/زرد ملایم) طراحی شده بودند که در حالت تیره خوانا نبود.

   وضعیت فعلی (بعد از بازنگری):
   - «تأییدشده» (status-paid-row): در حالت تیره کاملاً ساده/بدون رنگ‌بندی خاص است
     (دقیقاً مثل جدول حقوق) — فقط پس‌زمینه‌ی معمولی + متن روشن + همان خط جداکننده‌ی
     معمولی ردیف‌ها (که حالا از var(--border-color) استفاده می‌کند، نه رنگ خام
     روشن #e0e0e0 که باعث آن خط عجیب/پررنگ زیر ستون عملیات در حالت تیره می‌شد).
   - «در انتظار تأیید» (status-pending-row): عمداً یک پس‌زمینه‌ی نیمه‌شفاف کهربایی
     بسیار کم‌رنگ + خط جداکننده‌ی خط‌چین (dashed) دارد — دقیقاً مثل حالت روشن —
     تا با ردیف‌های «تأییدشده» (ساده) و ردیف‌های اقساطی (بنفش/صورتی، تعریف‌شده در
     .installment-row-approved/.installment-row-enrollment-zero) قاطی نشود و
     مستقل/قابل‌تشخیص بماند. */
[data-theme="dark"] .table tr.status-paid-row,
[data-theme="dark"] .table tr.status-paid-row td,
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr.status-paid-row td {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .table tr.status-paid-row:hover,
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr.status-paid-row:hover {
    background-color: var(--table-stripe) !important;
}

[data-theme="dark"] .table tr.status-pending-row,
[data-theme="dark"] .table tr.status-pending-row td,
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr.status-pending-row td {
    background-color: rgba(255, 193, 7, 0.09) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px dashed var(--border-color) !important;
}
[data-theme="dark"] .table tr.status-pending-row:hover,
[data-theme="dark"] .dashboard-page .table-responsive .payment-table tr.status-pending-row:hover {
    background-color: rgba(255, 193, 7, 0.16) !important;
}
/* END: ردیف‌های وضعیت شهریه در حالت تیره */

/* اصلاح Select2 در حالت تاریک */
[data-theme="dark"] .dashboard-page .select2-container .select2-selection--single {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}
[data-theme="dark"] .dashboard-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dashboard-page .select2-dropdown {
    background-color: var(--bg-card);
    border-color: var(--border-color);
}
[data-theme="dark"] .dashboard-page .select2-search__field {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] .dashboard-page .select2-results__option {
    color: var(--text-primary);
    background-color: var(--bg-card);
}
[data-theme="dark"] .dashboard-page .select2-results__option--highlighted {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* اصلاح هدر کلاس‌ها */
[data-theme="dark"] .dashboard-page .class-group-header {
    background-color: #2a2a35; /* تیره‌تر از کارت */
    color: #aeb5ff;
}
[data-theme="dark"] .dashboard-page .class-details {
    background-color: #252525;
}

/* اصلاح دکمه‌های ثانویه */
[data-theme="dark"] .dashboard-page .btn-secondary2 {
    background: #444;
    color: #ddd;
}

/* اصلاح دکمه بستن مودال */
[data-theme="dark"] .dashboard-page .close-button, 
[data-theme="dark"] .dashboard-page .close-modal-btn {
    color: #aaa;
}
[data-theme="dark"] .dashboard-page .close-button:hover {
    color: #fff;
}

/* در حالت دارک مود برای هنرجویان غیرفعال شده */
[data-theme="dark"] .dashboard-page .user-card.deactive {
    background-color: #1a1a1a !important;
    border-right-color: #555 !important;
    opacity: 0.6;
}

/* START: استایل اختصاصی برای کانتینر کلاس‌های پایان‌یافته در پنل ادمین */
[data-theme="dark"] .container-inside.finished-class-container {
    background-color: #1a1a1a; /* خاکستری روشن */
    border: 1px solid #555;     /* حاشیه کمی تیره‌تر */
    opacity: 0.45 !important;               /* کمی شفافیت */
}
/* ========================================= */
/* END: Dark Mode Specific Overrides         */
/* ========================================= */
/* دسکتاپ */
@media (min-width: 1024px) {
    .container {
        padding: 40px;
        max-width: 1280px;
        min-width: 1024px;
        margin: 0 auto;
    }
}

/* ========================================= */
/* Start: HTMX and SPA-like                  */
/* ========================================= */

/* تضمین نمایش صحیح Select2 در مودال‌ها */
.modal-content {
    overflow: visible !important;
}
.select2-container {
    width: 100% !important;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 90%;
    max-width: 400px;
}

.toast-item {
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    border-right: 4px solid #28a745;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
}

.toast-item.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-item.toast-error { border-right-color: #dc3545; }
.toast-item.toast-error .toast-icon { color: #dc3545; }
.toast-item.toast-success .toast-icon { color: #28a745; }

.toast-icon { font-size: 1.5rem; flex-shrink: 0; }
.toast-message { flex-grow: 1; font-size: 0.95rem; color: #333; }
.toast-close { background: none; border: none; color: #999; cursor: pointer; font-size: 1.2rem; }

[data-theme="dark"] .toast-item { background: #2d2d2d; }
[data-theme="dark"] .toast-message { color: #e0e0e0; }
/* === START: چک‌لیست ماژول‌ها/پنل‌ها (مودال تنظیمات سوپرادمین + مودال نمایشی قابلیت‌های اپ) === */
.checklist-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.checklist-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-size: 0.92rem; }
.checklist-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.checklist-icon { font-size: 0.9rem; }
.checklist-item.readonly { cursor: default; opacity: 0.95; }
.checklist-activation-note { font-size: 0.85rem; color: #888; margin-top: 8px; }
[data-theme="dark"] .checklist-item { border-color: #444; }
/* === END: چک‌لیست ماژول‌ها/پنل‌ها === */

/* === START: ویجت طرح پرداخت اقساطی (نوار پیشرفت + چیپ اقساط) === */
.payment-plan-widget { display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.payment-plan-progress-row { display: flex; flex-direction: column; gap: 3px; }
.payment-plan-progress-bar { width: 100%; height: 8px; background: #e9ecef; border-radius: 6px; overflow: hidden; }
.payment-plan-progress-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.payment-plan-progress-label { font-size: 0.75rem; color: #666; }
.installment-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* START: کارت هر قسط — جایگزین چیپ‌های ریز قبلی. همه‌ی اطلاعات مهم (شماره، وضعیت،
   مبلغ، سررسید) همیشه و بدون نیاز به هاور روی صفحه دیده می‌شود؛ چون این اطلاعات هم
   برای مدیر هم برای هنرجو حیاتی است و در موبایل هاور اصلاً معنا ندارد. */
.installment-card {
    position: relative;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
    min-width: 92px; padding: 8px 10px 10px;
    border-radius: 12px; background: #f4f4f4; border: 1px solid #ddd;
}
.installment-card-icon { font-size: 1.1rem; line-height: 1; }
.installment-card-number { font-size: 0.9rem; font-weight: bold; }
.installment-card-status { font-size: 0.72rem; font-weight: 600; }
.installment-card-amount { font-size: 0.72rem; opacity: 0.85; }
.installment-card-due { font-size: 0.68rem; opacity: 0.75; }
.installment-card-action-btn {
    margin-top: 4px; padding: 5px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: bold;
    background: #007bff; color: #fff; white-space: nowrap;
}
.installment-card-clickable { cursor: pointer; transition: transform .12s; }
.installment-card-clickable:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.installment-card.installment-paid { background: #eafaf0; border-color: #28a745; color: #178230; }
.installment-card.installment-paid .installment-card-action-btn { display: none; }
.installment-card.installment-partial { background: #fff8e1; border-color: #e6b800; color: #8a6d00; }
.installment-card.installment-partial .installment-card-action-btn { background: #e6b800; }
.installment-card.installment-overdue { background: #fdecea; border-color: #dc3545; color: #a71d2a; }
.installment-card.installment-overdue .installment-card-action-btn { background: #dc3545; }
.installment-card.installment-pending { background: #f4f4f4; border-color: #ccc; color: #555; }
.payment-plan-widget.compact .installment-chip-row { display: none; }
/* موبایل: کارت‌ها کمی جمع‌وجورتر می‌شوند اما همچنان همه‌ی اطلاعات دیده می‌شود، نه هاور */
@media (max-width: 480px) {
    .installment-card { min-width: 82px; padding: 6px 6px 8px; }
    .installment-card-number { font-size: 0.82rem; }
    .installment-card-status, .installment-card-amount { font-size: 0.66rem; }
    .installment-card-due { font-size: 0.62rem; }
    .installment-card-action-btn { font-size: 0.72rem; padding: 4px 8px; }
}
/* دکمه‌ی حذف قسط پرداخت‌نشده (فقط مدیر/منشی) — گوشه‌ی بالای کارت، بزرگ‌تر از قبل برای لمس راحت‌تر در موبایل */
.installment-delete-btn {
    position: absolute; top: -6px; left: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; line-height: 1;
    border-radius: 50%; background: #dc3545; color: #fff;
    font-size: 0.95rem; font-weight: bold; text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.installment-delete-btn:hover { background: #a71d2a; }
/* لینک «لغو طرح پرداخت اقساطی» — فقط پنل مدیر، زیر ردیف کارت‌های اقساط */
.installment-cancel-plan-link {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
    font-size: 0.75rem; color: #dc3545; text-decoration: none;
}
.installment-cancel-plan-link:hover { text-decoration: underline; }
/* لینک دورِ ویجت فشرده‌ی طرح اقساطی در کارت هنرجو (تب هنرجویان/کلاس‌ها) — کل ویجت
   کلیک‌پذیر می‌شود و به تب شهریه (فیلترشده روی همین هنرجو) می‌رود */
.installment-widget-jump-link { display: inline-block; text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px; transition: background .15s; }
.installment-widget-jump-link:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .installment-widget-jump-link:hover { background: rgba(255,255,255,0.08); }
/* END: کارت هر قسط */

.installment-badge-tag { display: inline-block; font-size: 0.7rem; padding: 1px 6px; border-radius: 8px; background: #eef2ff; color: #3949ab; margin-right: 4px; }
/* جدول اقساط قابل‌ویرایش داخل مودال «شروع طرح پرداخت» — همیشه داخل مودال بماند،
   در موبایل با اسکرول افقی (دقیقاً مثل بقیه‌ی جداول داخل مودال‌های این پروژه) */
.installment-schedule-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.installment-schedule-scroll table input.form-control { width: 110px !important; }
@media (max-width: 480px) {
    .installment-schedule-scroll table input.form-control { width: 90px !important; font-size: 0.8rem; }
}
/* ردیف‌های شهریه‌ی قسطی در جدول تاریخچه‌ی پرداخت‌ها (پنل مدیر و پنل هنرجو): بنفش، متمایز از سبزِ نقدی
   - installment-row-approved: هر واریز قسط تأیید‌شده، یا ثبت‌نامی با پیش‌پرداخت واقعی > صفر (بنفش‌آبی)
   - installment-row-enrollment-zero: ثبت‌نام اولیه‌ی طرح با پیش‌پرداخت صفر تومان (بنفش‌قرمز، برای جلب توجه) */
.table tr.installment-row-approved { background-color: #ece4fb; }
.table tr.installment-row-approved:hover { background-color: #ded1f7; }
[data-theme="dark"] .table tr.installment-row-approved { background-color: #2c2140; }
[data-theme="dark"] .table tr.installment-row-approved:hover { background-color: #3a2c54; }

.table tr.installment-row-enrollment-zero { background-color: #f6e3ee; }
.table tr.installment-row-enrollment-zero:hover { background-color: #f0d1e2; }
[data-theme="dark"] .table tr.installment-row-enrollment-zero { background-color: #3a1f2e; }
[data-theme="dark"] .table tr.installment-row-enrollment-zero:hover { background-color: #4a2a3a; }
[data-theme="dark"] .payment-plan-progress-bar { background: #3a3a3a; }
[data-theme="dark"] .installment-card { background: #333; border-color: #555; color: #ddd; }
/* === END: ویجت طرح پرداخت اقساطی === */

/* === START: خلاصه‌ی قیمت‌گذاری سه‌سطحی داخل مودال «وضعیت و تمدید اعتبار پنل» ===
   طراحی عمداً بسیار خلاصه (بدون فهرست امکانات هر پلن) نگه داشته شده چون این
   المان داخل یک مودال است، نه یک صفحه‌ی فروش مستقل — هدف فقط نمایش سریع نرخ هر
   پلن برای این‌که مدیر بداند چه مبلغی باید واریز کند. کاملاً موبایل‌فرست: سه
   ستون تنگ اما خوانا، بدون نیاز به اسکرول افقی حتی در گوشی‌های کوچک. */
.credit-pricing-toggle {
    display: inline-flex;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px;
    gap: 3px;
    margin: 0 auto 14px;
    justify-content: center;
    width: 100%;
    max-width: 280px;
}
.credit-pricing-toggle-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 7px 10px;
    border-radius: 999px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.credit-pricing-toggle-btn.is-active {
    background: var(--brand-primary);
    color: #fff;
}
.credit-pricing-save-badge {
    font-size: 0.68rem;
    background: rgba(255,255,255,0.25);
    padding: 1px 6px;
    border-radius: 999px;
}
.credit-pricing-toggle-btn:not(.is-active) .credit-pricing-save-badge {
    background: #28a745;
    color: #fff;
}

.credit-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.credit-pricing-plan {
    position: relative;
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 14px 6px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.credit-pricing-plan.is-featured {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 10px rgba(102,126,234,0.18);
}
.credit-pricing-plan-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}
.credit-pricing-plan-name {
    font-weight: bold;
    font-size: 0.85rem;
    color: var(--text-primary);
}
.credit-pricing-plan-price {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--brand-primary);
    line-height: 1.3;
}
.credit-pricing-plan--ent .credit-pricing-plan-price {
    font-size: 0.78rem;
}
.credit-pricing-plan-unit {
    font-size: 0.68rem;
    color: #888;
}

/* موبایل خیلی کوچک: فونت و پدینگ کمی جمع‌وجورتر می‌شود، اما همچنان ۳ ستون کنار هم می‌ماند */
@media (max-width: 380px) {
    .credit-pricing-plan { padding: 12px 4px 8px; }
    .credit-pricing-plan-name { font-size: 0.75rem; }
    .credit-pricing-plan-price { font-size: 0.8rem; }
    .credit-pricing-plan-unit { font-size: 0.6rem; }
    .credit-pricing-plan-badge { font-size: 0.56rem; padding: 2px 6px; }
}

[data-theme="dark"] .credit-pricing-toggle,
[data-theme="dark"] .credit-pricing-plan { background: #2d2d2d; }
/* === END: خلاصه‌ی قیمت‌گذاری سه‌سطحی === */

/* === START: مودال وضعیت/تمدید اعتبار — بخش «ارتقای سیستم» و برچسب‌های نوع درخواست === */
.credit-upgrade-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
}
.credit-upgrade-option:hover {
    background: rgba(0, 0, 0, 0.04);
}
.credit-upgrade-option input {
    flex-shrink: 0;
}

.credit-kind-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
}
.credit-kind-badge.credit-kind-renewal { background: rgba(59, 130, 246, 0.12); color: #3b82f6; }
.credit-kind-badge.credit-kind-upgrade { background: rgba(168, 85, 247, 0.12); color: #a855f7; }
.credit-kind-badge.credit-kind-module { background: rgba(16, 185, 129, 0.12); color: #10b981; }

/* === START: انتخاب‌گر پلن مقصد (Plan Capability Management) در #creditStatusModal === */
.plan-select-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.plan-select-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.plan-select-option:hover {
    background: rgba(0, 0, 0, 0.04);
}
.plan-select-option input {
    flex-shrink: 0;
}
.plan-capability-item {
    margin: 4px 0;
    font-size: 0.85rem;
    padding: 4px 8px;
    border-radius: 6px;
}
.plan-capability-item.plan-capability-gained {
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}
.plan-capability-item.plan-capability-lost {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
}
[data-theme="dark"] .plan-select-option { border-color: rgba(255, 255, 255, 0.1); }
/* === END: انتخاب‌گر پلن مقصد === */
/* === END: مودال وضعیت/تمدید اعتبار === */

/* === START: دراپ‌داون «پلن» در تب آموزشگاه‌های سوپرادمین === */
/* عمداً از .form-control استفاده نمی‌کند (آن کلاس width:100% دارد که داخل جدول با
   table-layout:auto در موبایل باعث فشرده‌شدن شدید select می‌شد تا جایی که نه متن
   پلن معلوم بود نه فلش کشویی). این‌جا یک عرض حداقلی مشخص و ثابت می‌دهیم. */
.plan-select {
    min-width: 110px;
    width: auto;
    max-width: 100%;
    padding: 6px 8px;
    font-size: 0.8rem;
    border-radius: 8px;
    border: 2px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--text-primary);
    font-family: 'Vazirmatn', sans-serif;
}
@media (max-width: 600px) {
    .plan-select {
        min-width: 100px;
        font-size: 0.78rem;
    }
}
/* === END: دراپ‌داون پلن === */

/* === START: نوار شناور «فیلتر سراسری فعال است» ===
   نگاه کنید به core/htmx_helpers.php::render_global_filter_bar() و
   READMES/README_panels.md. عمداً «پایین-وسط» انتخاب شده: نه سایدبار/هدر بالا
   را می‌پوشاند (که دکمه‌ی باز/بسته‌کردن منو آن‌جاست)، نه ردیف تب‌ها را (که همیشه
   بالای صفحه است). z-index کمی کمتر از مودال‌ها (1050) تا اگر مودالی باز شد،
   همیشه روی این نوار بنشیند، نه برعکس. */
#global-filter-floating-bar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    max-width: min(92vw, 480px);
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-primary, #667eea);
    color: #fff;
    padding: 8px 10px 8px 16px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    line-height: 1.4;
}
#global-filter-floating-bar .global-filter-bar-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#global-filter-floating-bar .global-filter-bar-close {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#global-filter-floating-bar .global-filter-bar-close:hover {
    background: rgba(255, 255, 255, 0.35);
}
@media (max-width: 576px) {
    /* در موبایل کمی بالاتر از لبه‌ی پایین صفحه تا با نوار مرورگر/دکمه‌های سیستمی
       قاطی نشود، و متن کمی کوچک‌تر تا در عرض کم هم جا شود. */
    #global-filter-floating-bar {
        bottom: 12px;
        max-width: 94vw;
        font-size: 0.78rem;
        padding: 7px 8px 7px 14px;
    }
}
/* START: بالا کشیدن نوار شناور فیلتر روی منوی پایین موبایل (xmb-nav) — قبلاً این
   نوار همیشه bottom:12/18px بود که دقیقاً زیر/روی منوی ۶۴px ایِ پایین موبایل
   (.xmb-nav) می‌افتاد و رویش سوار می‌شد. .xmb-nav فقط در max-width:1024px و
   orientation:portrait نمایش داده می‌شود (نگاه کنید به قوانین خودش بالاتر در
   همین فایل) — پس دقیقاً همان شرط اینجا هم تکرار شده تا فقط وقتی آن منو واقعاً
   روی صفحه است، نوار فیلتر بالاتر برود؛ در غیر این صورت (دسکتاپ/لندسکیپ) رفتار
   قبلی (bottom:18px) دست‌نخورده می‌ماند. عمداً بعد از هر دو بلوک بالا آمده تا در
   عرض‌های هم‌پوشان (مثلاً ۴۰۰px که هم <=576 و هم <=1024 صدق می‌کند) با ترتیب
   طبیعی cascade همین قانون برنده شود، بدون نیاز به !important. ۶۴px ارتفاع
   .xmb-nav + کمی فاصله‌ی امن. */
@media (max-width: 1024px) and (orientation: portrait) {
    #global-filter-floating-bar {
        bottom: calc(64px + 14px);
    }
}
/* END: بالا کشیدن نوار شناور فیلتر روی منوی پایین موبایل */
/* === END: نوار شناور فیلتر سراسری === */