/*
 * ═══════════════════════════════════════════════════════
 * Novava - UI Components
 * فایل کامپوننت‌های رابط کاربری نُواوا
 * شامل: دکمه، کارت، فرم، مودال، toast، navbar و ...
 * وابستگی: variables.css و main.css باید قبل از این لود بشن
 * ═══════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱ — دکمه‌ها (Buttons)       ═══ */
/* ═══════════════════════════════════════ */

/* --- دکمه پایه — استایل مشترک تمام دکمه‌ها --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);                          /* فاصله بین آیکون و متن: 0.5rem */
    padding: var(--btn-padding-y) var(--btn-padding-x);  /* 0.625rem 1.25rem */
    font-family: var(--font-fa);                    /* فونت فارسی */
    font-size: var(--font-size-base);               /* 1rem (16px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);                /* 8px */
    transition: all var(--transition-fast);          /* 150ms ease */
    position: relative;
    overflow: hidden;
}

/* فوکوس قابل مشاهده دکمه */
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);                /* حلقه آبی فوکوس */
}

/* حالت غیرفعال دکمه */
.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* حالت فشردن دکمه */
.btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* --- دکمه اصلی (Primary) — آبی برند --- */
.btn-primary {
    background-color: var(--color-primary);         /* #3b98e3 */
    color: #FFFFFF;
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);    /* #1763a1 */
    border-color: var(--color-primary-dark);
}

.btn-primary:active:not(:disabled) {
    background-color: var(--color-primary-dark);
}

/* --- دکمه ثانویه (Secondary) — خاکستری --- */
.btn-secondary {
    background-color: var(--color-bg-tertiary);     /* #E9ECEF */
    color: var(--color-text);                       /* #1a1a2e */
    border-color: var(--color-bg-tertiary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-border);          /* #dee2e6 */
    border-color: var(--color-border);
}

.btn-secondary:active:not(:disabled) {
    background-color: var(--color-border-dark);     /* #adb5bd */
}

/* --- دکمه تأکیدی / CTA (Accent) — خردلی --- */
.btn-accent {
    background-color: var(--color-accent);          /* #d2b32d */
    color: #FFFFFF;
    border-color: var(--color-accent);
}

.btn-accent:hover:not(:disabled) {
    background-color: var(--color-accent-dark);     /* #b8991f */
    border-color: var(--color-accent-dark);
}

.btn-accent:active:not(:disabled) {
    background-color: var(--color-accent-dark);
}

/* --- دکمه خطر (Danger) — قرمز --- */
.btn-danger {
    background-color: var(--color-danger);          /* #dc3545 */
    color: #FFFFFF;
    border-color: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;                      /* تیره‌تر از danger */
    border-color: #c82333;
}

.btn-danger:active:not(:disabled) {
    background-color: #bd2130;
}

/* --- دکمه موفقیت (Success) — سبز --- */
.btn-success {
    background-color: var(--color-success);         /* #28a745 */
    color: #FFFFFF;
    border-color: var(--color-success);
}

.btn-success:hover:not(:disabled) {
    background-color: #218838;
    border-color: #218838;
}

.btn-success:active:not(:disabled) {
    background-color: #1e7e34;
}

/* --- دکمه فقط حاشیه (Outline) — آبی --- */
.btn-outline {
    background-color: transparent;
    color: var(--color-primary);                    /* #3b98e3 */
    border-color: var(--color-primary);
}

.btn-outline:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: #FFFFFF;
}

.btn-outline:active:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFFFFF;
}

/* --- دکمه Outline Danger — قرمز حاشیه‌ای --- */
.btn-outline-danger {
    background-color: transparent;
    color: var(--color-danger);                     /* #dc3545 */
    border-color: var(--color-danger);
}

.btn-outline-danger:hover:not(:disabled) {
    background-color: var(--color-danger);
    color: #FFFFFF;
}

.btn-outline-danger:active:not(:disabled) {
    background-color: #c82333;
    border-color: #c82333;
    color: #FFFFFF;
}

/* --- دکمه شبح (Ghost) — بدون حاشیه و پس‌زمینه --- */
.btn-ghost {
    background-color: transparent;
    color: var(--color-text-light);                 /* #6c757d */
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    color: var(--color-text);                       /* #1a1a2e */
}

.btn-ghost:active:not(:disabled) {
    background-color: var(--color-bg-tertiary);     /* #E9ECEF */
}

/* --- دکمه لینکی (Link) — شبیه لینک متنی --- */
.btn-link {
    background-color: transparent;
    color: var(--color-primary);                    /* #3b98e3 */
    border-color: transparent;
    padding: 0;
    font-weight: var(--font-weight-regular);        /* 400 */
    text-decoration: none;
}

.btn-link:hover:not(:disabled) {
    color: var(--color-primary-dark);               /* #1763a1 */
    text-decoration: underline;
}

/* --- سایزهای دکمه --- */

/* دکمه کوچک */
.btn-sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);  /* 0.375rem 0.75rem */
    font-size: var(--font-size-sm);                 /* 0.875rem (14px) */
    border-radius: var(--radius-sm);                /* 4px */
}

/* دکمه بزرگ */
.btn-lg {
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);  /* 0.875rem 1.75rem */
    font-size: var(--font-size-lg);                 /* 1.25rem (20px) */
    border-radius: var(--radius-lg);                /* 12px */
}

/* دکمه تمام‌عرض */
.btn-block {
    display: flex;
    width: 100%;
}

/* --- گروه دکمه --- */
.btn-group {
    display: inline-flex;
    gap: 0;
}

/* حذف گردی دکمه‌های وسطی */
.btn-group .btn {
    border-radius: 0;
}

/* گردی سمت راست برای اولین دکمه (RTL) */
.btn-group .btn:first-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* گردی سمت چپ برای آخرین دکمه (RTL) */
.btn-group .btn:last-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* خط جداکننده بین دکمه‌ها */
.btn-group .btn + .btn {
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- دکمه آیکونی (مربعی) --- */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--input-height);                     /* 44px */
    height: var(--input-height);                    /* 44px */
    padding: 0;
    border-radius: var(--radius-md);                /* 8px */
}

/* دکمه آیکونی کوچک */
.btn-icon.btn-sm {
    width: var(--input-height-sm);                  /* 36px */
    height: var(--input-height-sm);
}

/* دکمه آیکونی بزرگ */
.btn-icon.btn-lg {
    width: var(--input-height-lg);                  /* 52px */
    height: var(--input-height-lg);
}

/* اندازه آیکون داخل دکمه آیکونی */
.btn-icon img,
.btn-icon svg {
    width: var(--icon-md);                          /* 20px */
    height: var(--icon-md);
}

/* --- لودینگ روی دکمه --- */

/* حالت بارگذاری — متن مخفی و اسپینر نمایش */
.btn.is-loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

/* اسپینر دکمه لودینگ */
.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid currentColor;
    border-radius: var(--radius-full);              /* دایره کامل */
    border-top-color: transparent;
    animation: spin 0.6s linear infinite;
}

/* رنگ اسپینر برای دکمه‌های تیره */
.btn-primary.is-loading::after,
.btn-accent.is-loading::after,
.btn-danger.is-loading::after,
.btn-success.is-loading::after {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #FFFFFF;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۲ — کارت‌ها (Cards)         ═══ */
/* ═══════════════════════════════════════ */

/* --- کارت پایه --- */
.card {
    background-color: var(--color-bg);              /* #FFFFFF */
    border: 1px solid var(--color-border);          /* #dee2e6 */
    border-radius: var(--radius-lg);                /* 12px */
    box-shadow: var(--shadow-sm);                   /* سایه کم */
    overflow: hidden;
    transition: box-shadow var(--transition-fast);   /* 150ms ease */
}

/* سایه بزرگ‌تر در هاور */
.card:hover {
    box-shadow: var(--shadow-md);
}

/* تصویر کارت */
.card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

/* هدر کارت */
.card-header {
    padding: var(--spacing-4) var(--spacing-5);     /* 1rem 1.25rem */
    border-bottom: 1px solid var(--color-border-light);  /* #e9ecef */
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* عنوان هدر کارت */
.card-header-title {
    font-size: var(--font-size-lg);                 /* 1.25rem (20px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    margin: 0;
}

/* بدنه کارت */
.card-body {
    padding: var(--spacing-5);                      /* 1.25rem (20px) */
}

/* فوتر کارت */
.card-footer {
    padding: var(--spacing-4) var(--spacing-5);     /* 1rem 1.25rem */
    border-top: 1px solid var(--color-border-light);  /* #e9ecef */
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);                          /* 0.75rem (12px) */
}

/* عنوان داخل بدنه کارت */
.card-title {
    font-size: var(--font-size-lg);                 /* 1.25rem (20px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    margin-bottom: var(--spacing-2);                /* 0.5rem (8px) */
}

/* متن کارت */
.card-text {
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text-light);                 /* #6c757d */
    line-height: var(--line-height-normal);         /* 1.5 */
    margin-bottom: var(--spacing-4);                /* 1rem */
}

/* اطلاعات متا کارت (تاریخ، مدت، سطح) */
.card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);                          /* 1rem */
    font-size: var(--font-size-sm);                 /* 0.875rem (14px) */
    color: var(--color-text-muted);                 /* #adb5bd */
}

/* آیتم تکی متا */
.card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);                          /* 0.25rem (4px) */
}

/* آیکون متا */
.card-meta-item img,
.card-meta-item svg {
    width: var(--icon-sm);                          /* 16px */
    height: var(--icon-sm);
    opacity: 0.6;
}

/* --- کارت قابل کلیک --- */
.card-clickable {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

/* هاور کارت قابل کلیک — بالا رفتن */
.card-clickable:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

/* فشردن کارت قابل کلیک */
.card-clickable:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* --- کارت افقی (تصویر کنار متن) --- */
.card-horizontal {
    display: flex;
    flex-direction: row;
}

/* تصویر کارت افقی */
.card-horizontal .card-image {
    width: 200px;
    min-width: 200px;
    height: auto;
    min-height: 150px;
}

/* بدنه کارت افقی */
.card-horizontal .card-body {
    flex: 1;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۳ — فرم‌ها (Forms)          ═══ */
/* ═══════════════════════════════════════ */

/* --- گروه فرم --- */
.form-group {
    margin-bottom: var(--spacing-5);                /* 1.25rem (20px) */
}

/* --- لیبل فرم --- */
.form-label {
    display: block;
    font-size: var(--font-size-sm);                 /* 0.875rem (14px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    margin-bottom: var(--spacing-2);                /* 0.5rem (8px) */
}

/* ستاره اجباری */
.form-label .required {
    color: var(--color-danger);                     /* #dc3545 */
    margin-right: var(--spacing-1);                 /* 0.25rem — RTL: ستاره قبل از متن */
}

/* --- استایل مشترک input, select, textarea --- */
.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    height: var(--input-height);                    /* 44px */
    padding: var(--input-padding-y) var(--input-padding-x);  /* 0.5rem 0.75rem */
    font-family: var(--font-fa);                    /* فونت فارسی */
    font-size: var(--font-size-base);               /* 1rem (16px) */
    font-weight: var(--font-weight-regular);        /* 400 */
    line-height: var(--line-height-normal);         /* 1.5 */
    color: var(--color-text);                       /* #1a1a2e */
    background-color: var(--color-bg);              /* #FFFFFF */
    border: var(--input-border-width) solid var(--color-border);  /* 1px solid #dee2e6 */
    border-radius: var(--radius-md);                /* 8px */
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);  /* 150ms */
    appearance: none;
    -webkit-appearance: none;
}

/* حالت فوکوس — حاشیه و سایه آبی */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-border-focus);        /* #3b98e3 */
    box-shadow: var(--shadow-focus);                /* حلقه آبی */
    outline: none;
}

/* رنگ placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-text-muted);                 /* #adb5bd */
}

/* حالت غیرفعال */
.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    color: var(--color-text-muted);                 /* #adb5bd */
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- input سایز کوچک --- */
.form-input-sm {
    height: var(--input-height-sm);                 /* 36px */
    font-size: var(--font-size-sm);                 /* 0.875rem */
    padding: 0.25rem 0.5rem;
}

/* --- input سایز بزرگ --- */
.form-input-lg {
    height: var(--input-height-lg);                 /* 52px */
    font-size: var(--font-size-md);                 /* 1.125rem */
    padding: 0.75rem 1rem;
}

/* --- textarea --- */
.form-textarea {
    height: auto;
    min-height: 120px;
    resize: vertical;                               /* فقط تغییر ارتفاع */
    line-height: var(--line-height-relaxed);        /* 1.75 */
}

/* --- select — با آیکون فلش --- */
.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c757d' d='M6 8.825L0.375 3.2l0.85-0.85L6 7.125l4.775-4.775 0.85 0.85z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;       /* RTL: آیکون فلش سمت چپ */
    background-size: 12px;
    padding-left: 2.5rem;                           /* RTL: فضا برای آیکون سمت چپ */
    cursor: pointer;
}

/* --- حالت خطا --- */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: var(--color-danger);              /* #dc3545 */
}

/* فوکوس در حالت خطا */
.form-input.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
}

/* --- حالت موفقیت --- */
.form-input.is-success,
.form-select.is-success,
.form-textarea.is-success {
    border-color: var(--color-success);             /* #28a745 */
}

/* فوکوس در حالت موفقیت */
.form-input.is-success:focus,
.form-select.is-success:focus,
.form-textarea.is-success:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

/* --- پیام خطا زیر input --- */
.form-error {
    display: block;
    font-size: var(--font-size-sm);                 /* 0.875rem (14px) */
    color: var(--color-danger);                     /* #dc3545 */
    margin-top: var(--spacing-1);                   /* 0.25rem (4px) */
}

/* --- راهنما زیر input --- */
.form-hint {
    display: block;
    font-size: var(--font-size-sm);                 /* 0.875rem */
    color: var(--color-text-muted);                 /* #adb5bd */
    margin-top: var(--spacing-1);                   /* 0.25rem */
}

/* --- دو input کنار هم --- */
.form-row {
    display: flex;
    gap: var(--spacing-4);                          /* 1rem */
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

/* --- checkbox و radio سفارشی --- */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    margin-bottom: var(--spacing-3);                /* 0.75rem */
    cursor: pointer;
}

/* input چک‌باکس و رادیو */
.form-check-input {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--color-border);          /* #dee2e6 */
    background-color: var(--color-bg);              /* #FFFFFF */
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all var(--transition-fast);          /* 150ms */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* گردی چک‌باکس */
.form-check-input[type="checkbox"] {
    border-radius: var(--radius-sm);                /* 4px */
}

/* گردی رادیو — دایره کامل */
.form-check-input[type="radio"] {
    border-radius: var(--radius-full);              /* 9999px */
}

/* حالت انتخاب‌شده — پس‌زمینه آبی */
.form-check-input:checked {
    background-color: var(--color-primary);         /* #3b98e3 */
    border-color: var(--color-primary);
}

/* تیک چک‌باکس — از border-bottom و border-left */
.form-check-input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    transform: rotate(-45deg) translate(0, -1px);
}

/* نقطه رادیو — دایره سفید */
.form-check-input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);              /* 9999px */
    background-color: #FFFFFF;
}

/* فوکوس چک‌باکس و رادیو */
.form-check-input:focus-visible {
    box-shadow: var(--shadow-focus);                /* حلقه آبی فوکوس */
}

/* لیبل چک‌باکس و رادیو */
.form-check-label {
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text);                       /* #1a1a2e */
    cursor: pointer;
    user-select: none;
}

/* --- سوئیچ (Toggle) --- */
.form-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    cursor: pointer;
}

/* ریل سوئیچ */
.form-switch-input {
    width: 44px;
    height: 24px;
    background-color: var(--color-border);          /* #dee2e6 */
    border-radius: var(--radius-full);              /* 9999px */
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color var(--transition-fast);  /* 150ms */
    flex-shrink: 0;
}

/* دایره سوئیچ */
.form-switch-input::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: #FFFFFF;
    border-radius: var(--radius-full);              /* 9999px */
    top: 3px;
    right: 3px;                                     /* RTL: شروع از سمت راست */
    transition: transform var(--transition-fast);    /* 150ms */
    box-shadow: var(--shadow-sm);
}

/* سوئیچ فعال — پس‌زمینه آبی */
.form-switch-input:checked {
    background-color: var(--color-primary);         /* #3b98e3 */
}

/* دایره سوئیچ فعال — حرکت به سمت چپ (RTL) */
.form-switch-input:checked::after {
    transform: translateX(-20px);
}

/* فوکوس سوئیچ */
.form-switch-input:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* لیبل سوئیچ */
.form-switch-label {
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text);                       /* #1a1a2e */
    cursor: pointer;
    user-select: none;
}

/* --- Input با آیکون (سمت راست — RTL) --- */
.input-with-icon {
    position: relative;
}

/* فاصله برای آیکون سمت راست */
.input-with-icon .form-input {
    padding-right: 2.75rem;                         /* RTL: فضا برای آیکون سمت راست */
}

/* آیکون سمت راست */
.input-with-icon .input-icon {
    position: absolute;
    top: 50%;
    right: 0.75rem;                                 /* RTL: آیکون سمت راست */
    transform: translateY(-50%);
    width: var(--icon-md);                          /* 20px */
    height: var(--icon-md);
    color: var(--color-text-muted);                 /* #adb5bd */
    pointer-events: none;
}

/* --- Input با آیکون سمت چپ (مثل جستجو) --- */

/* فاصله عادی سمت راست و فاصله بیشتر سمت چپ */
.input-with-icon-left .form-input {
    padding-right: var(--input-padding-x);          /* حالت عادی */
    padding-left: 2.75rem;                          /* RTL: فضا برای آیکون سمت چپ */
}

/* آیکون سمت چپ */
.input-with-icon-left .input-icon {
    right: auto;
    left: 0.75rem;                                  /* RTL: آیکون سمت چپ */
}

/* --- نوار جستجو --- */
.search-box {
    position: relative;
}

/* input جستجو — گرد */
.search-box .form-input {
    padding-right: 2.75rem;                         /* RTL: فضا برای آیکون سمت راست */
    border-radius: var(--radius-full);              /* 9999px — کاملاً گرد */
}

/* آیکون جستجو */
.search-box .search-icon {
    position: absolute;
    top: 50%;
    right: 1rem;                                    /* RTL */
    transform: translateY(-50%);
    width: var(--icon-md);                          /* 20px */
    height: var(--icon-md);
    color: var(--color-text-muted);                 /* #adb5bd */
    pointer-events: none;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۴ — نوار بالا (Navbar)      ═══ */
/* ═══════════════════════════════════════ */

/* --- نوار بالا — ثابت در بالای صفحه --- */
.navbar {
    position: fixed;
    top: 0;
    right: 0;                                       /* RTL */
    left: 0;
    height: var(--navbar-height);                   /* 64px */
    background-color: var(--color-bg);              /* #FFFFFF */
    border-bottom: 1px solid var(--color-border);   /* #dee2e6 */
    z-index: var(--z-sticky);                       /* 200 */
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-xs);                   /* سایه خیلی کم */
}

/* محدودکننده عرض navbar */
.navbar-container {
    width: 100%;
    max-width: var(--container-xl);                 /* 1200px */
    margin: 0 auto;
    padding: 0 var(--container-padding);            /* 0 1rem */
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* لوگو */
.navbar-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

/* تصویر لوگو */
.navbar-brand img {
    height: 36px;
    width: auto;
}

/* لیست لینک‌های ناوبری */
.navbar-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);                          /* 0.25rem */
    list-style: none;
}

/* لینک ناوبری */
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    padding: var(--spacing-2) var(--spacing-3);     /* 0.5rem 0.75rem */
    font-size: var(--font-size-base);               /* 1rem */
    font-weight: var(--font-weight-regular);        /* 400 */
    color: var(--color-text-light);                 /* #6c757d */
    text-decoration: none;
    border-radius: var(--radius-md);                /* 8px */
    transition: all var(--transition-fast);          /* 150ms */
    white-space: nowrap;
}

/* هاور لینک ناوبری */
.nav-link:hover {
    color: var(--color-primary);                    /* #3b98e3 */
    background-color: var(--color-primary-light);   /* #e8f4fd */
}

/* لینک ناوبری فعال */
.nav-link.active {
    color: var(--color-primary);                    /* #3b98e3 */
    font-weight: var(--font-weight-bold);           /* 700 */
    background-color: var(--color-primary-light);   /* #e8f4fd */
}

/* آیکون لینک ناوبری */
.nav-link img,
.nav-link svg {
    width: var(--icon-md);                          /* 20px */
    height: var(--icon-md);
}

/* بخش اکشن‌ها (دکمه‌ها و پروفایل سمت چپ) */
.navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);                          /* 0.75rem */
}

/* --- دکمه همبرگری (فقط موبایل) --- */
.navbar-toggle {
    display: none;                                  /* مخفی در دسکتاپ */
    width: var(--input-height);                     /* 44px */
    height: var(--input-height);                    /* 44px */
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-2);                      /* 0.5rem */
    border-radius: var(--radius-md);                /* 8px */
    transition: background-color var(--transition-fast);
}

/* هاور دکمه همبرگری */
.navbar-toggle:hover {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
}

/* خط وسطی آیکون همبرگری */
.navbar-toggle-icon {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text);            /* #1a1a2e */
    position: relative;
    transition: background-color var(--transition-fast);
}

/* خطوط بالا و پایین آیکون همبرگری */
.navbar-toggle-icon::before,
.navbar-toggle-icon::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 2px;
    background-color: var(--color-text);            /* #1a1a2e */
    right: 0;
    transition: all var(--transition-normal);        /* 250ms */
}

/* خط بالایی */
.navbar-toggle-icon::before {
    top: -7px;
}

/* خط پایینی */
.navbar-toggle-icon::after {
    top: 7px;
}

/* حالت باز — خط وسطی محو میشه */
.navbar-toggle.is-active .navbar-toggle-icon {
    background-color: transparent;
}

/* حالت باز — خط بالایی ضربدر ۴۵ درجه */
.navbar-toggle.is-active .navbar-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

/* حالت باز — خط پایینی ضربدر -۴۵ درجه */
.navbar-toggle.is-active .navbar-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* --- منوی کاربر (پروفایل/خروج) --- */
.navbar-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    cursor: pointer;
    padding: var(--spacing-1) var(--spacing-2);     /* 0.25rem 0.5rem */
    border-radius: var(--radius-md);                /* 8px */
    transition: background-color var(--transition-fast);
}

/* هاور منوی کاربر */
.navbar-user:hover {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
}

/* نام کاربر */
.navbar-user-name {
    font-size: var(--font-size-sm);                 /* 0.875rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
}

/* فلش منوی کاربر */
.navbar-user-arrow {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-fast);
}

/* چرخش فلش وقتی منو بازه */
.navbar-user.is-open .navbar-user-arrow {
    transform: rotate(180deg);
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۵ — منوی کشویی (Dropdown)  ═══ */
/* ═══════════════════════════════════════ */

/* پوشش اصلی dropdown */
.dropdown {
    position: relative;
}

/* منوی کشویی — مخفی به‌صورت پیش‌فرض */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;                                        /* RTL: باز شدن از سمت چپ */
    min-width: 200px;
    background-color: var(--color-bg);              /* #FFFFFF */
    border: 1px solid var(--color-border-light);    /* #e9ecef */
    border-radius: var(--radius-lg);                /* 12px */
    box-shadow: var(--shadow-lg);                   /* سایه بزرگ */
    z-index: var(--z-dropdown);                     /* 100 */
    padding: var(--spacing-2) 0;                    /* 0.5rem 0 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition-fast);          /* 150ms */
    list-style: none;
}

/* منوی کشویی باز */
.dropdown-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* منوی کشویی از سمت راست */
.dropdown-menu-right {
    left: auto;
    right: 0;                                       /* RTL: باز شدن از سمت راست */
}

/* آیتم منوی کشویی */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);                          /* 0.75rem */
    padding: var(--spacing-2) var(--spacing-4);     /* 0.5rem 1rem */
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text);                       /* #1a1a2e */
    text-decoration: none;
    transition: background-color var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
}

/* هاور آیتم */
.dropdown-item:hover {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
}

/* آیتم فعال */
.dropdown-item.active {
    color: var(--color-primary);                    /* #3b98e3 */
    background-color: var(--color-primary-light);   /* #e8f4fd */
}

/* آیکون آیتم */
.dropdown-item img,
.dropdown-item svg {
    width: var(--icon-md);                          /* 20px */
    height: var(--icon-md);
    opacity: 0.6;
}

/* آیتم خطرناک (مثل حذف) */
.dropdown-item.danger {
    color: var(--color-danger);                     /* #dc3545 */
}

/* هاور آیتم خطرناک */
.dropdown-item.danger:hover {
    background-color: var(--color-danger-light);    /* #f8d7da */
}

/* خط جداکننده در منو */
.dropdown-divider {
    height: 1px;
    background-color: var(--color-border-light);    /* #e9ecef */
    margin: var(--spacing-2) 0;                     /* 0.5rem 0 */
}

/* سرتیتر بخش در منو */
.dropdown-header {
    padding: var(--spacing-2) var(--spacing-4);     /* 0.5rem 1rem */
    font-size: var(--font-size-xs);                 /* 0.75rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text-muted);                 /* #adb5bd */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۶ — مودال (Modal)           ═══ */
/* ═══════════════════════════════════════ */

/* --- پوشش تیره پشت مودال --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-overlay);                      /* 400 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);                      /* 1rem */
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);        /* 250ms */
}

/* پوشش باز */
.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* --- مودال اصلی --- */
.modal {
    background-color: var(--color-bg);              /* #FFFFFF */
    border-radius: var(--radius-xl);                /* 16px */
    box-shadow: var(--shadow-2xl);                  /* سایه حداکثر */
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--transition-normal); /* 250ms */
    z-index: var(--z-modal);                        /* 500 */
}

/* مودال باز — اندازه نرمال */
.modal-overlay.is-open .modal {
    transform: scale(1) translateY(0);
}

/* مودال کوچک */
.modal-sm {
    max-width: 400px;
}

/* مودال بزرگ */
.modal-lg {
    max-width: 720px;
}

/* هدر مودال */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5) var(--spacing-6);     /* 1.25rem 1.5rem */
    border-bottom: 1px solid var(--color-border-light);  /* #e9ecef */
}

/* عنوان مودال */
.modal-header-title {
    font-size: var(--font-size-lg);                 /* 1.25rem (20px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    margin: 0;
}

/* دکمه بستن مودال */
.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);                /* 8px */
    color: var(--color-text-muted);                 /* #adb5bd */
    font-size: var(--font-size-xl);                 /* 1.5rem */
    transition: all var(--transition-fast);          /* 150ms */
    line-height: 1;
}

/* هاور دکمه بستن */
.modal-close:hover {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    color: var(--color-text);                       /* #1a1a2e */
}

/* بدنه مودال */
.modal-body {
    padding: var(--spacing-6);                      /* 1.5rem */
    overflow-y: auto;
    flex: 1;
}

/* فوتر مودال */
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);                          /* 0.75rem */
    padding: var(--spacing-4) var(--spacing-6);     /* 1rem 1.5rem */
    border-top: 1px solid var(--color-border-light);  /* #e9ecef */
}

/* غیرفعال کردن اسکرول body وقتی مودال بازه */
body.modal-open {
    overflow: hidden;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۷ — پیام‌های اعلان (Toast)  ═══ */
/* ═══════════════════════════════════════ */

/* --- محل نمایش toast ها --- */
.toast-container {
    position: fixed;
    top: calc(var(--navbar-height) + var(--spacing-4));  /* 64px + 1rem */
    left: var(--spacing-4);                         /* 1rem — RTL: سمت چپ بالا */
    z-index: var(--z-toast);                        /* 800 */
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);                          /* 0.75rem */
    max-width: 420px;
    width: calc(100% - 2rem);
    pointer-events: none;
}

/* --- toast تکی --- */
.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);                          /* 0.75rem */
    padding: var(--spacing-4) var(--spacing-5);     /* 1rem 1.25rem */
    background-color: var(--color-bg);              /* #FFFFFF */
    border-radius: var(--radius-lg);                /* 12px */
    box-shadow: var(--shadow-lg);                   /* سایه بزرگ */
    border-right: 4px solid transparent;            /* RTL: خط رنگی سمت راست */
    animation: slideInLeft var(--animation-duration-normal) ease forwards;  /* 300ms */
    pointer-events: auto;
    position: relative;
}

/* حالت مخفی شدن toast */
.toast.is-hiding {
    animation: fadeOut var(--animation-duration-fast) ease forwards;  /* 200ms */
}

/* آیکون toast */
.toast-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 2px;
}

/* محتوای toast */
.toast-content {
    flex: 1;
}

/* عنوان toast */
.toast-title {
    font-size: var(--font-size-base);               /* 1rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    margin-bottom: var(--spacing-1);                /* 0.25rem */
}

/* پیام toast */
.toast-message {
    font-size: var(--font-size-sm);                 /* 0.875rem */
    color: var(--color-text-light);                 /* #6c757d */
    line-height: var(--line-height-normal);         /* 1.5 */
}

/* دکمه بستن toast */
.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);                /* 4px */
    color: var(--color-text-muted);                 /* #adb5bd */
    font-size: var(--font-size-lg);                 /* 1.25rem */
    transition: all var(--transition-fast);
    line-height: 1;
}

/* هاور دکمه بستن toast */
.toast-close:hover {
    background-color: var(--color-bg-tertiary);     /* #E9ECEF */
    color: var(--color-text);
}

/* --- رنگ‌بندی toast — موفقیت --- */
.toast-success {
    border-right-color: var(--color-success);       /* #28a745 */
    background-color: var(--color-success-light);   /* #d4edda */
}

.toast-success .toast-icon {
    color: var(--color-success);                    /* #28a745 */
}

/* --- رنگ‌بندی toast — خطا --- */
.toast-error {
    border-right-color: var(--color-danger);        /* #dc3545 */
    background-color: var(--color-danger-light);    /* #f8d7da */
}

.toast-error .toast-icon {
    color: var(--color-danger);                     /* #dc3545 */
}

/* --- رنگ‌بندی toast — هشدار --- */
.toast-warning {
    border-right-color: var(--color-warning);       /* #ffc107 */
    background-color: var(--color-warning-light);   /* #fff3cd */
}

.toast-warning .toast-icon {
    color: var(--color-warning);                    /* #ffc107 */
}

/* --- رنگ‌بندی toast — اطلاعات --- */
.toast-info {
    border-right-color: var(--color-info);          /* #17a2b8 */
    background-color: var(--color-info-light);      /* #d1ecf1 */
}

.toast-info .toast-icon {
    color: var(--color-info);                       /* #17a2b8 */
}

/* --- نوار پیشرفت خودکار بسته شدن --- */
.toast-progress {
    position: absolute;
    bottom: 0;
    right: 0;                                       /* RTL */
    height: 3px;
    background-color: currentColor;
    opacity: 0.3;
    border-radius: 0 0 var(--radius-lg) 0;
    animation: toastProgress 3s linear forwards;
}

/* انیمیشن کاهش عرض نوار پیشرفت toast */
@keyframes toastProgress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۸ — نشان و برچسب (Badge)   ═══ */
/* ═══════════════════════════════════════ */

/* --- Badge پایه --- */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2em 0.6em;
    font-size: var(--font-size-xs);                 /* 0.75rem (12px) */
    font-weight: var(--font-weight-bold);           /* 700 */
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius-full);              /* 9999px — pill shape */
    vertical-align: middle;
}

/* Badge اصلی — آبی روشن */
.badge-primary {
    background-color: var(--color-primary-light);   /* #e8f4fd */
    color: var(--color-primary-dark);               /* #1763a1 */
}

/* Badge موفقیت — سبز روشن */
.badge-success {
    background-color: var(--color-success-light);   /* #d4edda */
    color: #155724;
}

/* Badge هشدار — زرد روشن */
.badge-warning {
    background-color: var(--color-warning-light);   /* #fff3cd */
    color: #856404;
}

/* Badge خطر — قرمز روشن */
.badge-danger {
    background-color: var(--color-danger-light);    /* #f8d7da */
    color: #721c24;
}

/* Badge اطلاعات — آبی روشن */
.badge-info {
    background-color: var(--color-info-light);      /* #d1ecf1 */
    color: #0c5460;
}

/* Badge ثانویه — خاکستری */
.badge-secondary {
    background-color: var(--color-bg-tertiary);     /* #E9ECEF */
    color: var(--color-text-light);                 /* #6c757d */
}

/* --- Badge پر (solid) --- */

/* Badge پر اصلی — آبی کامل */
.badge-solid-primary {
    background-color: var(--color-primary);         /* #3b98e3 */
    color: #FFFFFF;
}

/* Badge پر موفقیت — سبز کامل */
.badge-solid-success {
    background-color: var(--color-success);         /* #28a745 */
    color: #FFFFFF;
}

/* Badge پر خطر — قرمز کامل */
.badge-solid-danger {
    background-color: var(--color-danger);          /* #dc3545 */
    color: #FFFFFF;
}

/* --- Badge نقطه‌ای (dot) — اعلان --- */
.badge-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);              /* 9999px */
    background-color: var(--color-danger);          /* #dc3545 */
    padding: 0;
}

/* --- Tag (برچسب کلمات) --- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);                          /* 0.25rem */
    padding: var(--spacing-1) var(--spacing-3);     /* 0.25rem 0.75rem */
    font-size: var(--font-size-sm);                 /* 0.875rem */
    color: var(--color-text-light);                 /* #6c757d */
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    border: 1px solid var(--color-border);          /* #dee2e6 */
    border-radius: var(--radius-full);              /* 9999px */
    cursor: default;
    transition: all var(--transition-fast);
}

/* تگ قابل حذف */
.tag-removable {
    cursor: pointer;
}

/* هاور تگ قابل حذف */
.tag-removable:hover {
    background-color: var(--color-danger-light);    /* #f8d7da */
    border-color: var(--color-danger);              /* #dc3545 */
    color: var(--color-danger);
}

/* دکمه حذف تگ */
.tag-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs);                 /* 0.75rem */
    cursor: pointer;
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

/* هاور دکمه حذف تگ */
.tag-close:hover {
    background-color: rgba(220, 53, 69, 0.2);
}

/* --- سطح زبان --- */
.level-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);     /* 0.25rem 0.75rem */
    font-size: var(--font-size-xs);                 /* 0.75rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    border-radius: var(--radius-sm);                /* 4px */
    text-transform: uppercase;
}

/* سطح مبتدی — سبز */
.level-beginner {
    background-color: #e8f5e9;
    color: #2e7d32;
}

/* سطح متوسط — نارنجی */
.level-intermediate {
    background-color: #fff3e0;
    color: #e65100;
}

/* سطح پیشرفته — قرمز */
.level-advanced {
    background-color: #fce4ec;
    color: #c62828;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۹ — نوار پیشرفت (Progress)  ═══ */
/* ═══════════════════════════════════════ */

/* --- نوار پیشرفت پایه --- */
.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--color-bg-tertiary);     /* #E9ECEF */
    border-radius: var(--radius-full);              /* 9999px */
    overflow: hidden;
}

/* بخش پر شده نوار پیشرفت */
.progress-fill {
    height: 100%;
    background-color: var(--color-primary);         /* #3b98e3 */
    border-radius: var(--radius-full);              /* 9999px */
    transition: width var(--transition-slow);        /* 350ms */
    min-width: 0;
}

/* رنگ موفقیت نوار پیشرفت */
.progress-fill-success {
    background-color: var(--color-success);         /* #28a745 */
}

/* رنگ هشدار نوار پیشرفت */
.progress-fill-warning {
    background-color: var(--color-warning);         /* #ffc107 */
}

/* رنگ خطر نوار پیشرفت */
.progress-fill-danger {
    background-color: var(--color-danger);          /* #dc3545 */
}

/* رنگ تأکیدی نوار پیشرفت */
.progress-fill-accent {
    background-color: var(--color-accent);          /* #d2b32d */
}

/* نوار پیشرفت بزرگ — برای داشبورد */
.progress-bar-lg {
    height: 12px;
}

/* نوار پیشرفت کوچک */
.progress-bar-sm {
    height: 4px;
}

/* --- نوار پیشرفت با لیبل --- */
.progress-with-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);                          /* 0.75rem */
}

/* نوار داخل wrapper لیبل‌دار */
.progress-with-label .progress-bar {
    flex: 1;
}

/* متن درصد پیشرفت */
.progress-label {
    font-size: var(--font-size-sm);                 /* 0.875rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
    min-width: 40px;
    text-align: center;
}

/* --- نوار پیشرفت دایره‌ای (برای آمار) --- */
.progress-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* چرخش SVG دایره‌ای — شروع از بالا */
.progress-circle svg {
    transform: rotate(-90deg);
}

/* مقدار عددی وسط دایره */
.progress-circle-value {
    position: absolute;
    font-size: var(--font-size-lg);                 /* 1.25rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text);                       /* #1a1a2e */
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱۰ — لودینگ (Spinner)       ═══ */
/* ═══════════════════════════════════════ */

/* --- اسپینر چرخشی --- */
.spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);          /* #dee2e6 */
    border-top-color: var(--color-primary);         /* #3b98e3 */
    border-radius: var(--radius-full);              /* 9999px */
    animation: spin 0.7s linear infinite;
}

/* اسپینر کوچک */
.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

/* اسپینر بزرگ */
.spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* --- پوشش لودینگ (روی محتوا) --- */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;                         /* ارث‌بری گردی از والد */
}

/* --- صفحه لودینگ (تمام صفحه) --- */
.page-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-bg);              /* #FFFFFF */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);                          /* 1rem */
    z-index: 9999;
}

/* متن صفحه لودینگ */
.page-loading-text {
    font-size: var(--font-size-base);               /* 1rem */
    color: var(--color-text-light);                 /* #6c757d */
}

/* --- Skeleton (placeholder محتوا) --- */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary) 25%,
        var(--color-bg-tertiary) 50%,
        var(--color-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: var(--radius-md);                /* 8px */
}

/* انیمیشن درخشش skeleton */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* skeleton متن */
.skeleton-text {
    height: 14px;
    margin-bottom: var(--spacing-2);                /* 0.5rem */
    border-radius: var(--radius-sm);                /* 4px */
}

/* آخرین خط متن — کوتاه‌تر */
.skeleton-text:last-child {
    width: 60%;
}

/* skeleton عنوان */
.skeleton-title {
    height: 24px;
    width: 50%;
    margin-bottom: var(--spacing-4);                /* 1rem */
}

/* skeleton آواتار */
.skeleton-avatar {
    width: var(--avatar-md);                        /* 40px */
    height: var(--avatar-md);
    border-radius: var(--radius-full);              /* 9999px */
}

/* skeleton تصویر */
.skeleton-image {
    width: 100%;
    height: 200px;
}

/* skeleton کارت */
.skeleton-card {
    border-radius: var(--radius-lg);                /* 12px */
    overflow: hidden;
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱۱ — تب‌ها (Tabs)           ═══ */
/* ═══════════════════════════════════════ */

/* --- نوار تب‌ها --- */
.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);   /* #dee2e6 */
    gap: 0;
    overflow-x: auto;                               /* اسکرول افقی در موبایل */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;                          /* مخفی کردن اسکرولبار فایرفاکس */
}

/* مخفی کردن اسکرولبار وبکیت */
.tabs::-webkit-scrollbar {
    display: none;
}

/* --- آیتم تب --- */
.tab-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    padding: var(--spacing-3) var(--spacing-5);     /* 0.75rem 1.25rem */
    font-size: var(--font-size-base);               /* 1rem */
    font-weight: var(--font-weight-regular);        /* 400 */
    color: var(--color-text-light);                 /* #6c757d */
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;                            /* همپوشانی با خط نوار */
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);          /* 150ms */
    background: none;
    border-top: none;
    border-right: none;
    border-left: none;
}

/* هاور تب */
.tab-item:hover {
    color: var(--color-primary);                    /* #3b98e3 */
    border-bottom-color: var(--color-border-dark);  /* #adb5bd */
}

/* تب فعال — خط آبی زیرش */
.tab-item.active {
    color: var(--color-primary);                    /* #3b98e3 */
    font-weight: var(--font-weight-bold);           /* 700 */
    border-bottom-color: var(--color-primary);      /* #3b98e3 */
}

/* آیکون تب */
.tab-item img,
.tab-item svg {
    width: var(--icon-sm);                          /* 16px */
    height: var(--icon-sm);
}

/* badge داخل تب */
.tab-item .badge {
    margin-right: var(--spacing-1);                 /* 0.25rem — RTL */
}

/* --- محتوای تب‌ها --- */
.tab-content {
    padding-top: var(--spacing-6);                  /* 1.5rem */
}

/* پنل تب — مخفی به‌صورت پیش‌فرض */
.tab-pane {
    display: none;
}

/* پنل تب فعال — با انیمیشن محو شدن */
.tab-pane.active {
    display: block;
    animation: fadeIn var(--animation-duration-fast) ease;  /* 200ms */
}

/* --- تب‌های pill (گرد) --- */
.tabs-pill {
    border-bottom: none;
    gap: var(--spacing-2);                          /* 0.5rem */
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    padding: var(--spacing-1);                      /* 0.25rem */
    border-radius: var(--radius-lg);                /* 12px */
}

/* آیتم تب pill */
.tabs-pill .tab-item {
    border-bottom: none;
    margin-bottom: 0;
    border-radius: var(--radius-md);                /* 8px */
    padding: var(--spacing-2) var(--spacing-4);     /* 0.5rem 1rem */
}

/* تب pill فعال — پس‌زمینه سفید و سایه */
.tabs-pill .tab-item.active {
    background-color: var(--color-bg);              /* #FFFFFF */
    box-shadow: var(--shadow-sm);
    color: var(--color-primary);                    /* #3b98e3 */
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱۲ — صفحه‌بندی (Pagination) ═══ */
/* ═══════════════════════════════════════ */

/* --- نوار صفحه‌بندی --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);                          /* 0.25rem */
    padding: var(--spacing-6) 0;                    /* 1.5rem 0 */
    list-style: none;
    flex-wrap: wrap;
}

/* --- لینک صفحه --- */
.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: var(--spacing-1) var(--spacing-3);     /* 0.25rem 0.75rem */
    font-size: var(--font-size-base);               /* 1rem */
    font-weight: var(--font-weight-regular);        /* 400 */
    color: var(--color-text);                       /* #1a1a2e */
    background-color: var(--color-bg);              /* #FFFFFF */
    border: 1px solid var(--color-border);          /* #dee2e6 */
    border-radius: var(--radius-md);                /* 8px */
    text-decoration: none;
    transition: all var(--transition-fast);          /* 150ms */
    cursor: pointer;
}

/* هاور لینک صفحه (نه فعال و نه غیرفعال) */
.page-link:hover:not(.page-active):not(.page-disabled) {
    background-color: var(--color-primary-light);   /* #e8f4fd */
    border-color: var(--color-primary);             /* #3b98e3 */
    color: var(--color-primary);                    /* #3b98e3 */
}

/* صفحه فعال — آبی */
.page-active {
    background-color: var(--color-primary);         /* #3b98e3 */
    border-color: var(--color-primary);
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);           /* 700 */
    cursor: default;
    pointer-events: none;
}

/* صفحه غیرفعال */
.page-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* آیکون لینک صفحه (قبلی/بعدی) */
.page-link img,
.page-link svg {
    width: var(--icon-sm);                          /* 16px */
    height: var(--icon-sm);
}

/* --- اطلاعات صفحه‌بندی --- */
.pagination-info {
    font-size: var(--font-size-sm);                 /* 0.875rem */
    color: var(--color-text-light);                 /* #6c757d */
    text-align: center;
    margin-bottom: var(--spacing-3);                /* 0.75rem */
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱۳ — جدول (Table)           ═══ */
/* ═══════════════════════════════════════ */

/* --- پوشش ریسپانسیو جدول --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);          /* #dee2e6 */
    border-radius: var(--radius-lg);                /* 12px */
}

/* --- جدول پایه --- */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-base);               /* 1rem */
}

/* سرستون جدول */
.table th {
    padding: var(--spacing-3) var(--spacing-4);     /* 0.75rem 1rem */
    font-size: var(--font-size-sm);                 /* 0.875rem */
    font-weight: var(--font-weight-bold);           /* 700 */
    color: var(--color-text-light);                 /* #6c757d */
    text-align: right;                              /* RTL */
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
    border-bottom: 2px solid var(--color-border);   /* #dee2e6 */
    white-space: nowrap;
}

/* سلول جدول */
.table td {
    padding: var(--spacing-3) var(--spacing-4);     /* 0.75rem 1rem */
    color: var(--color-text);                       /* #1a1a2e */
    border-bottom: 1px solid var(--color-border-light);  /* #e9ecef */
    vertical-align: middle;
}

/* حذف خط پایین آخرین سطر */
.table tr:last-child td {
    border-bottom: none;
}

/* جدول راه‌راه — سطرهای زوج رنگ متفاوت */
.table-striped tbody tr:nth-child(even) {
    background-color: var(--color-bg-secondary);    /* #F8F9FA */
}

/* جدول با هاور */
.table-hover tbody tr {
    transition: background-color var(--transition-fast);  /* 150ms */
}

/* هاور سطر جدول */
.table-hover tbody tr:hover {
    background-color: var(--color-primary-light);   /* #e8f4fd */
}

/* سلول اکشن (دکمه‌های عملیات) */
.table-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);                          /* 0.5rem */
    justify-content: flex-start;
}

/* وضعیت (تیک/ایکس) */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);                          /* 0.25rem */
}

/* جدول خالی */
.table-empty {
    text-align: center;
    padding: var(--spacing-10);                     /* 4rem */
    color: var(--color-text-muted);                 /* #adb5bd */
}


/* ═══════════════════════════════════════ */
/* ═══ بخش ۱۴ — پیام‌های هشدار (Alert) ═══ */
/* ═══════════════════════════════════════ */

/* --- Alert پایه --- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);                          /* 0.75rem */
    padding: var(--spacing-4) var(--spacing-5);     /* 1rem 1.25rem */
    border-radius: var(--radius-lg);                /* 12px */
    border: 1px solid transparent;
    margin-bottom: var(--spacing-4);                /* 1rem */
    font-size: var(--font-size-base);               /* 1rem */
    line-height: var(--line-height-normal);         /* 1.5 */
}

/* آیکون alert */
.alert-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin-top: 2px;
}

/* محتوای alert */
.alert-content {
    flex: 1;
}

/* عنوان alert */
.alert-title {
    font-weight: var(--font-weight-bold);           /* 700 */
    margin-bottom: var(--spacing-1);                /* 0.25rem */
}

/* دکمه بستن alert */
.alert-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);                /* 4px */
    font-size: var(--font-size-lg);
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    line-height: 1;
}

/* هاور دکمه بستن */
.alert-close:hover {
    opacity: 1;
}

/* --- Alert موفقیت — سبز --- */
.alert-success {
    background-color: var(--color-success-light);   /* #d4edda */
    border-color: #c3e6cb;
    color: #155724;
}

.alert-success .alert-icon {
    color: var(--color-success);                    /* #28a745 */
}

/* --- Alert خطر — قرمز --- */
.alert-danger {
    background-color: var(--color-danger-light);    /* #f8d7da */
    border-color: #f5c6cb;
    color: #721c24;
}

.alert-danger .alert-icon {
    color: var(--color-danger);                     /* #dc3545 */
}

/* --- Alert هشدار — زرد --- */
.alert-warning {
    background-color: var(--color-warning-light);   /* #fff3cd */
    border-color: #ffeeba;
    color: #856404;
}

.alert-warning .alert-icon {
    color: var(--color-warning);                    /* #ffc107 */
}

/* --- Alert اطلاعات — آبی --- */
.alert-info {
    background-color: var(--color-info-light);      /* #d1ecf1 */
    border-color: #bee5eb;
    color: #0c5460;
}

.alert-info .alert-icon {
    color: var(--color-info);                       /* #17a2b8 */
}


/* ═══ پایان فایل components.css ═══ */