/* ============================================================
   CMS Design System — Onglets (DS.8)
   Défaut : MudTabs discret ; .cms-tabs-v2 (pages détail, CMSTabs) :
   onglets « bouton » v2 (actif plein accent, inactif clair, ombre),
   contenu dans une carte. Uniquement des tokens du thème.
   ============================================================ */

/* ─── MudTabs par défaut ──────────────────────────────────────────── */
.mud-tabs-header {
    box-shadow: none !important;
}

.mud-tab {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: var(--text-sm, 0.875rem) !important;
    font-weight: var(--font-weight-medium, 500) !important;
}

.mud-tab {
    color: var(--color-text-secondary, #525252) !important;
}

.mud-tab:hover {
    color: var(--color-text-primary, #000000) !important;
    background-color: var(--color-surface-row-hover, #E4E4E4) !important;
}

.mud-tab.mud-tab-active {
    color: var(--color-primary, #721313) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
}

.mud-tab-slider {
    background-color: var(--color-primary, #721313) !important;
    height: 2px !important;
}

/* ─── Onglets v2 (CMSTabs) ────────────────────────────────────────── */
.cms-tabs-v2.mud-tabs {
    background: transparent;
}

.cms-tabs-v2 .mud-tabs-tabbar,
.cms-tabs-v2 .mud-tabs-header {
    background-color: transparent !important;
    border-bottom: none !important;
}

.cms-tabs-v2 .mud-tabs-tabbar-inner {
    gap: 16px;
    padding: 4px 4px 12px;
    min-height: auto;
}

.cms-tabs-v2 .mud-tab {
    min-height: 44px;
    min-width: 160px !important;
    padding: 8px 24px !important;
    border-radius: var(--radius-tab, 8px) !important;
    background-color: var(--color-surface-tab-inactive, #F5F5F5) !important;
    color: var(--color-text-primary, #000000) !important;
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif) !important;
    font-size: var(--text-base, 1rem) !important;
    font-weight: var(--font-weight-regular, 400) !important;
    box-shadow: var(--shadow-button, 4px 4px 4px 0 rgba(0, 0, 0, .25));
    transition: background-color var(--duration-fast, 100ms) ease, color var(--duration-fast, 100ms) ease !important;
}

.cms-tabs-v2 .mud-tab:hover {
    background-color: var(--color-surface-row-hover, #E4E4E4) !important;
}

.cms-tabs-v2 .mud-tab.mud-tab-active,
.cms-tabs-v2 .mud-tab.mud-tab-active:hover {
    background-color: var(--color-primary-700, #721313) !important;
    color: var(--color-primary-contrast-soft, #F5F5F5) !important;
}

.cms-tabs-v2 .mud-tab:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus, 0 0 0 3px rgba(203, 36, 36, .35));
}

/* Le soulignement MudBlazor est remplacé par le remplissage de l'onglet actif */
.cms-tabs-v2 .mud-tab-slider {
    display: none !important;
}

.cms-tabs-v2__panel {
    padding: 24px !important;
    background-color: var(--color-surface-card, #F3F3F3) !important;
    border-radius: var(--radius-card, 24px);
    box-shadow: var(--shadow-card, 0 4px 4px 0 rgba(0, 0, 0, .25));
}

.cms-tab-empty {
    color: var(--color-text-secondary, #525252);
    font-size: var(--text-sm, 0.875rem);
}

/* ─── Sous-onglets compacts (CMSSubTabs : Pending / History) ──────── */
.cms-sub-tabs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.cms-sub-tab-pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: var(--radius-tab, 8px);
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    border: 2px solid var(--color-primary-700, #721313);
    background-color: transparent;
    color: var(--color-primary-700, #721313);
    transition: all var(--duration-fast, 100ms) ease;
    gap: 6px;
}

.cms-sub-tab-pill:hover {
    background-color: var(--color-primary-50, #FBF0F0);
}

.cms-sub-tab-pill--active,
.cms-sub-tab-pill--active:hover {
    background-color: var(--color-primary-700, #721313);
    color: var(--color-primary-contrast-soft, #F5F5F5);
}