/*
 * Styles des composants Twig (templates/components/, documentation dans
 * documentation/technique/modules/interface.md). Un bloc par composant.
 */

/* Card : fond blanc, bordure, rayon 16 px, sans ombre. */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.card__title {
    padding: 18px var(--space-5) 0;
    font-size: var(--font-size-card-title);
    font-weight: 700;
}

.card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.card__title + .card__body {
    padding-top: 10px;
}

/* Corps sans marge : pour un tableau ou une liste qui va d'un bord à l'autre. */
.card--flush .card__body {
    padding: 10px 0 0;
}

.card--warning {
    background: var(--color-warning-softer);
    border-color: var(--color-warning-border);
}

.card--warning .card__title {
    color: var(--color-warning-text);
}

/* Button : 44 px de haut, 52 px pour l'action finale sur tablette. */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--target-size);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--color-page);
    color: var(--color-text);
}

.button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-on-primary);
}

.button--primary:hover {
    border-color: var(--color-primary-strong);
    background: var(--color-primary-strong);
    color: var(--color-text-on-primary);
}

.button--large {
    min-height: var(--target-size-large);
    padding: 0 22px;
    border-radius: var(--radius-tile);
    font-size: 1rem;
}

.button[disabled],
.button[aria-disabled='true'] {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

/* Badge : pastille à rayon complet, fond léger de sa couleur. */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-surface-muted);
    color: var(--color-text-menu);
    font-size: var(--font-size-label);
    font-weight: 500;
    white-space: nowrap;
}

.badge--info {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.badge--success {
    background: var(--color-success-soft);
    color: var(--color-success-text);
    font-weight: 600;
}

.badge--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    font-weight: 600;
}

/* PageHeader : titre de page, sous-titre, actions à droite. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
}

.page-header__title {
    font-size: var(--font-size-page-title);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.page-header__subtitle {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
}

.page-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Tabs : liens soulignés de 2 px quand actifs, compteur orange pour ce qui manque. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--target-size);
    padding: 0 14px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.tabs__tab:hover {
    color: var(--color-text);
}

.tabs__tab[aria-current='page'] {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary);
    font-weight: 600;
}

.tabs__count {
    font-size: var(--font-size-counter);
    font-weight: 600;
    color: var(--color-warning);
}

/* DataTable : défilement horizontal dans sa carte sur petit écran. */
.data-table {
    overflow-x: auto;
}

.data-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-table);
    font-variant-numeric: tabular-nums;
}

.data-table caption {
    text-align: left;
}

.data-table th,
.data-table td {
    padding: var(--space-3);
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--color-text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

.data-table tbody tr {
    border-top: 1px solid var(--color-separator);
}

.data-table th:first-child,
.data-table td:first-child {
    padding-left: var(--space-5);
}

.data-table th:last-child,
.data-table td:last-child {
    padding-right: var(--space-5);
}

.data-table .is-numeric {
    text-align: right;
    white-space: nowrap;
}

.data-table .is-secondary {
    color: var(--color-text-secondary);
}

/* EmptyState : ce qu'on voit quand une liste n'a encore rien. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.empty-state__title {
    font-size: var(--font-size-card-title);
    font-weight: 700;
}

.empty-state__text {
    max-width: 46ch;
    color: var(--color-text-secondary);
}

.empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-3);
}

/* KeyValueList : résumé clé et valeur, d'un bord à l'autre de sa carte. */
.key-value-list {
    display: grid;
    grid-template-columns: minmax(96px, 128px) 1fr;
    margin: 0;
    font-size: var(--font-size-table);
}

.key-value-list dt,
.key-value-list dd {
    margin: 0;
    padding: 9px var(--space-5) 9px 0;
    border-top: 1px solid var(--color-separator);
}

.key-value-list dt {
    padding-left: var(--space-5);
    padding-right: var(--space-3);
    color: var(--color-text-secondary);
}

.key-value-list dd {
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* FormRow : libellé, champ, aide, erreur à côté du champ. */
.form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-row__label {
    font-size: var(--font-size-table);
    font-weight: 600;
}

.form-row__required {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.form-row__help {
    font-size: var(--font-size-label);
    color: var(--color-text-secondary);
}

.form-row__error {
    font-size: var(--font-size-label);
    font-weight: 600;
    color: var(--color-warning-text);
}

.form-row input:not([type='checkbox'], [type='radio']),
.form-row select,
.form-row textarea {
    width: 100%;
    min-height: var(--target-size);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.form-row input:focus-visible,
.form-row select:focus-visible,
.form-row textarea:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

.form-row--invalid input:not([type='checkbox'], [type='radio']),
.form-row--invalid select,
.form-row--invalid textarea {
    border-color: var(--color-warning);
}

/* Pile de lignes de formulaire, espacées régulièrement. */
.form-stack {
    display: grid;
    gap: var(--space-4);
}

/* Formulaire d'une seule colonne dans une grande carte : largeur de lecture confortable. */
.form-stack--narrow {
    max-width: 560px;
}

/* Choix à cocher : une ligne par choix, cible tactile entière. */
.choice-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-list legend {
    padding: 0;
    margin-bottom: var(--space-1);
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--target-size);
}

.choice input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

/* Activation de la double authentification : QR code à gauche, explications à droite. */
.totp-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
}

.totp-setup__qr {
    flex: none;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tile);
    background: var(--color-surface);
}

.totp-setup > .form-stack {
    flex: 1 1 260px;
}

.totp-setup__secret {
    font-size: var(--font-size-text);
    font-weight: 600;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

/* Codes de secours : en colonnes, chiffres bien lisibles. */
.code-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.code-list code {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    background: var(--color-page);
    font-size: var(--font-size-text);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
}

/* Carte cliquable d'une rubrique (accueil du paramétrage). */
.link-card {
    display: block;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-text);
    text-decoration: none;
}

.link-card:hover {
    border-color: var(--color-primary);
    color: var(--color-text);
}

.link-card__title {
    font-size: var(--font-size-card-title);
    font-weight: 700;
    color: var(--color-primary);
}

.link-card__text {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
}

/* Geste sur une ligne de tableau : petits formulaires côte à côte. */
.row-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* Geste placé dans la colonne du libellé : aligné à gauche, sans retour à la ligne inutile. */
.row-actions--start {
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.row-actions input[type='text'] {
    min-height: var(--target-size);
    width: min(260px, 100%);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-field-border);
    border-radius: var(--radius-control);
    font: inherit;
}

.row-actions form {
    display: flex;
    gap: var(--space-2);
}

/* Bouton carré d'une flèche (monter, descendre). */
.button--icon {
    width: var(--target-size);
    padding: 0;
}

/* Élément désactivé d'une liste : lisible mais en retrait. */
.is-inactive td {
    color: var(--color-text-secondary);
}

/* Filtres au-dessus d'un tableau : champs côte à côte, bouton aligné en bas. */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: end;
    gap: var(--space-4);
}

/* Pagination : page précédente, position, page suivante. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-separator);
    font-size: var(--font-size-table);
    color: var(--color-text-secondary);
}

/* Logo de la structure dans sa fiche. */
.logo-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.logo-preview img {
    max-width: 160px;
    max-height: 80px;
    object-fit: contain;
}

/* Groupe de champs d'un long formulaire, avec son titre. */
.form-section {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    border: 0;
}

.form-section + .form-section {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-separator);
}

.form-section > legend {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-card-title-small);
    font-weight: 700;
}

/* StatTile : chiffre clé en petite tuile ; TileGrid les range côte à côte. */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.tile {
    padding: 14px var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tile);
}

.tile__label {
    font-size: var(--font-size-label);
    color: var(--color-text-secondary);
}

.tile__value {
    margin-top: 2px;
    font-size: var(--font-size-tile-value);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tile__unit {
    font-size: var(--font-size-table);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.tile--warning .tile__value {
    color: var(--color-warning);
}

.tile--empty .tile__value {
    color: var(--color-text-secondary);
    font-size: var(--font-size-text);
    font-weight: 500;
    line-height: 2.2;
}

/* Alert : message après une action (flash), ou information dans la page. */
.flashes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.alert {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-tile);
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
}

.alert--success {
    border-color: var(--color-success-soft);
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.alert--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-softer);
    color: var(--color-warning-text);
}

/* Rangées de boutons et colonnes de cartes, communes à tous les écrans. */
.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}