/* ===== منتقل‌شده از CSS اسکوپ‌شده‌ی Blazor: TicketCatalogAdmin.razor.css =====
   اکنون سراسری است؛ برای حفظ همان اولویت قبلی (specificity) انتخاب‌گرها ایمن‌سازی شده‌اند. */
/* تب‌های «موضوع‌ها / بخش‌ها»؛ رنگ‌ها از متغیرهای خود .crud-container گرفته می‌شوند تا با بقیه‌ی صفحات مدیریت هماهنگ بماند */
.tc-tabs.tc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1rem;
    padding: .35rem;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.tc-tab.tc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .55rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

    .tc-tab.tc-tab:hover {
        color: var(--primary-dark);
        background: rgba(99, 102, 241, .08);
    }

    .tc-tab.tc-tab:focus-visible {
        outline: 3px solid rgba(99, 102, 241, .35);
        outline-offset: 2px;
    }

    .tc-tab.active.active {
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: #fff;
        box-shadow: var(--shadow-md);
    }

.tc-tab-count.tc-tab-count {
    min-width: 1.6rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, .14);
    color: var(--primary-dark);
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
}

.tc-tab.active .tc-tab-count.tc-tab-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

/* توضیح کوتاهِ زیر تب‌ها: ادمین بداند این فهرست دقیقاً کجا به کاربر نشان داده می‌شود */
.tc-hint.tc-hint {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--primary-light);
    color: var(--text);
    font-size: .9rem;
    line-height: 1.9;
}

@media (max-width: 560px) {
    .tc-tabs.tc-tabs {
        width: 100%;
        border-radius: 16px;
    }

    .tc-tab.tc-tab {
        flex: 1 1 0;
        padding: .55rem .6rem;
    }
}