/*
  Pont entre le thème Radzen et nos jetons de conception.

  Radzen est chargé avec son thème « standard » complet, puis ses variables visibles
  sont réalignées ici sur nos jetons. On ne redéfinit QUE ce qui se voit : couleur de
  marque, surfaces, texte, rayons, typographie. Le reste du thème continue de fournir
  les centaines de variables de structure, qu'il serait déraisonnable de recopier.

  Conséquence : changer la marque dans tokens.css change aussi la grille.
*/

:root {
    /* Marque */
    --rz-primary: var(--color-primary);
    --rz-primary-dark: var(--color-primary-hover);
    --rz-primary-light: var(--color-accent);
    --rz-primary-darker: var(--color-primary-hover);
    --rz-primary-lighter: var(--color-primary-soft);

    /* Surfaces et texte */
    --rz-base-background-color: var(--color-surface);
    --rz-base-100: var(--color-surface-sunken);
    --rz-text-color: var(--color-text);
    --rz-text-secondary-color: var(--color-text-secondary);
    --rz-text-tertiary-color: var(--color-muted);

    /* Typographie et forme */
    --rz-body-font-family: var(--font-family-base);
    --rz-text-font-family: var(--font-family-base);
    --rz-border-radius: var(--radius-sm);

    /* Grille */
    --rz-grid-background-color: var(--color-surface);
    --rz-grid-header-background-color: var(--color-surface);
    --rz-grid-cell-color: var(--color-text);
    --rz-grid-stripe-background-color: var(--color-surface-muted);
    --rz-grid-cell-padding: var(--spacing-md);
    --rz-grid-header-cell-padding: var(--spacing-sm) var(--spacing-md);
}

/* --- Conteneur ----------------------------------------------------------- */

.app-datagrid .rz-data-grid {
    border: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
}

/* Les en-têtes suivent la même règle typographique que nos tableaux simples :
   petites majuscules espacées, pour que les deux cohabitent sans dissonance. */
.app-datagrid .rz-column-title-content {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.app-datagrid .rz-grid-table thead th {
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface);
}

.app-datagrid .rz-grid-table tbody td {
    border-bottom: 1px solid var(--color-border-subtle);
}

.app-datagrid .rz-grid-table tbody tr:hover td {
    background-color: var(--color-surface-muted);
}

/* --- Pagination ----------------------------------------------------------
   Radzen 11 nomme ces éléments « rz-pager », pas « rz-paginator ». Les classes
   ci-dessous ont été relevées sur le rendu réel, pas supposées. */

.app-datagrid .rz-pager {
    border: 0;
    padding: var(--spacing-md) 0 0;
    background-color: transparent;
    font-size: var(--font-size-sm);
}

.app-datagrid .rz-pager-element {
    border-radius: var(--radius-sm);
}

.app-datagrid .rz-pager-page.rz-state-active {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
}

.app-datagrid .rz-pager-summary,
.app-datagrid .rz-pagesize-text {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
}

/* --- Champs de filtre ----------------------------------------------------- */

.app-datagrid .rz-cell-filter input,
.app-datagrid .rz-textbox {
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}