/* ============================================================
   CMS Design System — Tables et barres de filtres (DS.6, design v2 p.06–07)
   Surcharges MudTable / MudDataGrid : carte arrondie, en-tête discret,
   lignes de 52 px séparées par un filet, survol. Uniquement des tokens
   du thème (var(--…, repli v2)).
   ============================================================ */
@import url('status.css');
@import url('workflow.css');

/* ─── Carte de liste (CMSGenericServerDataTable) ─────────────────── */
.cms-data-card {
    background-color: var(--color-surface-card, #F3F3F3);
    border-radius: var(--radius-card, 24px);
    box-shadow: var(--shadow-card, 0 4px 4px 0 rgba(0, 0, 0, .25));
    overflow: hidden;
    margin-bottom: 16px;
}

.cms-data-card__title {
    padding: 16px 20px 0;
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif);
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-text-nav, var(--color-primary-700, #721313));
}

.cms-data-card .cms-sub-tabs {
    padding: 16px 20px 0;
    margin-bottom: 0;
}

.cms-data-card .mud-table,
.cms-data-card .mud-table-container {
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* ─── Container générique ─────────────────────────────────────────── */
.mud-table-container,
.mud-data-grid {
    background-color: var(--color-surface-card, #F3F3F3);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    border: none !important;
}

/* Tables MudBlazor hors carte de liste : carte v2 (socle V1-DS) */
.mud-table.mud-paper,
.mud-data-grid.mud-paper {
    background-color: var(--color-surface-card, #F3F3F3);
    border-radius: var(--radius-card, 24px) !important;
    box-shadow: var(--shadow-card, 0 4px 4px 0 rgba(0, 0, 0, .25)) !important;
    overflow: hidden;
}

.cms-data-card .mud-table.mud-paper {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mud-table .mud-toolbar {
    background-color: transparent;
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif);
}

/* ─── En-tête : sans fond, centré, Poppins semi-gras (v2) ─────────── */
.mud-table-head .mud-table-row,
.mud-data-grid .mud-data-grid-header-row {
    background-color: transparent !important;
    height: var(--table-header-height, 48px) !important;
}

.mud-table-head .mud-table-cell,
.mud-data-grid .mud-data-grid-header-cell {
    color: var(--color-text-primary, #000000) !important;
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid var(--color-divider, #797979) !important;
    padding: 0 12px !important;
    white-space: nowrap;
}

/* ─── Lignes ──────────────────────────────────────────────────────── */
.mud-table-body .mud-table-row,
.mud-data-grid .mud-data-grid-row {
    height: var(--table-row-height, 52px) !important;
    transition: background-color var(--duration-fast, 100ms) ease !important;
}

.mud-table-body .mud-table-row:hover,
.mud-data-grid .mud-data-grid-row:hover {
    background-color: var(--color-surface-row-hover, #E4E4E4) !important;
}

.mud-table-body .mud-table-row.cms-row--clickable {
    cursor: pointer;
}

/* ─── Cellules : Inter, texte courant, filet entre lignes ─────────── */
.mud-table-body .mud-table-cell,
.mud-data-grid .mud-data-grid-cell {
    padding: 0 12px !important;
    color: var(--color-text-body, #303030) !important;
    font-family: var(--font-family-data, 'Inter', sans-serif) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    border-bottom: 1px solid var(--color-divider, #797979) !important;
}

.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.cms-align-left   { text-align: left !important; }
.cms-align-center { text-align: center !important; }
.cms-align-right  { text-align: right !important; }

.mud-table-head .cms-align-center .mud-table-sort-label,
.mud-table-head .cms-align-right .mud-table-sort-label {
    justify-content: inherit;
}

.cms-row-actions { white-space: nowrap; width: 1%; }
.cms-row-actions__inner { display: inline-flex; gap: 2px; }

.cms-row-actions .mud-icon-button {
    color: var(--color-icon, #8B1A10);
}

/* ─── Pagination ──────────────────────────────────────────────────── */
.mud-table-pagination,
.mud-data-grid-pagination {
    background-color: transparent !important;
    border-top: 1px solid var(--color-divider, #797979) !important;
    color: var(--color-text-secondary, #525252) !important;
    font-size: var(--text-sm, 0.875rem) !important;
    min-height: 48px;
}

.mud-table-pagination .mud-select-input,
.mud-data-grid-pagination .mud-select-input {
    color: var(--color-text-body, #303030) !important;
}

.mud-table-head .mud-checkbox,
.mud-table-body .mud-checkbox {
    color: var(--color-primary, #721313) !important;
}

/* ─── Outils de la carte : recherche, export ──────────────────────── */
.cms-table-search {
    min-width: 240px;
    max-width: 320px;
    margin: 0 !important;
}

.cms-table-search .mud-input-outlined-border {
    border-radius: var(--radius-filter, 9999px) !important;
    border: 2px solid var(--color-border-input, #898989) !important;
}

.cms-table-search .mud-input {
    background-color: var(--color-surface-input, #FFFFFF);
    border-radius: var(--radius-filter, 9999px);
}

.cms-export-btn.mud-button-root {
    height: 40px;
    border-radius: var(--radius-button, 8px);
    border-width: 2px;
    text-transform: none;
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif);
}

.cms-export-menu .cms-export-menu__item {
    display: block;
    padding: 10px 16px;
    color: var(--color-text-body, #303030);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
}

.cms-export-menu .cms-export-menu__item:hover {
    background-color: var(--color-surface-row-hover, #E4E4E4);
}

/* ─── Barre de filtres v2 : pills « Libellé │ valeur » (p.06) ─────── */
.cms-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-bottom: 16px;
}

.cms-filter-bar__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    flex: 1 1 auto;
}

.cms-filter-bar__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cms-filter-bar__apply.mud-button-root {
    height: 44px;
    border-radius: var(--radius-filter, 9999px);
    text-transform: none;
    padding: 0 20px;
}

.cms-pill-filter {
    display: flex;
    align-items: stretch;
    width: 360px;
    max-width: 100%;
    height: var(--control-height, 44px);
    border: 2px solid var(--color-border-input, #898989);
    border-radius: var(--radius-filter, 9999px);
    overflow: hidden;
    background-color: var(--color-surface-input, #FFFFFF);
}

.cms-pill-filter__label {
    flex: 0 0 46%;
    display: flex;
    align-items: center;
    padding: 0 16px 0 20px;
    background-color: var(--color-surface-filter-label, #D2D2D2);
    border-right: 2px solid var(--color-border-input, #898989);
    color: var(--color-text-primary, #000000);
    font-family: var(--font-family-sans, 'Poppins', 'Inter', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-pill-filter__value {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 12px;
}

.cms-pill-filter__value .cms-field,
.cms-pill-filter__value .mud-input-control {
    width: 100%;
    margin: 0 !important;
}

/* Le libellé est porté par le segment gauche : libellés et contours MudBlazor masqués */
.cms-pill-filter__value .mud-input-label,
.cms-pill-filter__value .mud-input-helper-text,
.cms-pill-filter__value legend {
    display: none !important;
}

.cms-pill-filter__value .mud-input-outlined-border {
    border: none !important;
}

.cms-pill-filter__value .mud-input.mud-input-outlined {
    background: transparent;
}

.cms-pill-filter__value .mud-input-slot {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* ─── États vides / chargement ────────────────────────────────────── */
.cms-table-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 4px;
}

.cms-table-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    color: var(--color-text-secondary, #525252);
    gap: 8px;
}

.cms-table-empty-state .mud-icon-root {
    font-size: 40px !important;
    width: 40px !important;
    height: 40px !important;
}

.cms-table-empty-state p {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
}

.mud-table-body .mud-table-row.mud-table-row-selected,
.mud-data-grid .mud-data-grid-row.mud-selected {
    background-color: var(--color-surface-row-hover, #E4E4E4) !important;
}

@media (max-width: 768px) {
    .cms-pill-filter { width: 100%; }
    .cms-status-pill { min-width: 0; }
    .cms-table-search { min-width: 0; max-width: none; width: 100%; }
}