/* ===========================================================================
   PONT — l'ancien vocabulaire rendu avec le nouveau
   ---------------------------------------------------------------------------
   Quatre-vingts gabarits utilisent encore .action-link, .form-card,
   .filtre-etat, .badge, .table-integree. Les reecrire un par un prendrait des
   jours pendant lesquels l'administration aurait deux aspects.

   Ce fichier fait pointer chaque ancien nom vers son equivalent du systeme.
   Il est charge APRES app.css, donc il gagne. Un ecran repris au nouveau
   vocabulaire cesse d'en dependre, et ce fichier maigrit jusqu'a disparaitre.

   C'est une dette assumee, pas une couche de plus : rien ici n'invente un
   style, tout renvoie a un composant existant.
   ponytail: pont temporaire, a supprimer quand plus aucun gabarit n'utilise
   ces classes (verifier avec un grep sur .action-link et .form-card).
   =========================================================================== */

/* --- Boutons ------------------------------------------------------------ */

.action-link,
.btn-discret,
.btn-avancer,
.btn-contrat,
.bouton-verif,
.btn-ajout-ligne,
.button button,
.button input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    font-size: var(--font-size-label);
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.action-link:hover,
.btn-discret:hover,
.btn-avancer:hover,
.btn-contrat:hover,
.bouton-verif:hover,
.button button:hover {
    background: var(--color-surface-2);
    color: var(--color-ink);
    text-decoration: none;
}

.action-link--danger,
.btn-retirer-ligne {
    border-color: transparent;
    background: transparent;
    color: var(--color-danger);
}

.action-link--danger:hover {
    background: var(--color-danger-tint);
    color: var(--color-danger-d);
}

/* Le bouton d'ajout etait orange : l'accent chaud signale, il n'agit pas.
   L'action primaire est verte partout ailleurs. */
.ajoute,
.creer-liste,
.button > button[type='submit'],
.button > input[type='submit'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: var(--color-brand);
    color: var(--color-brand-contraste);
    font-size: var(--font-size-body);
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
}

.ajoute:hover,
.creer-liste:hover,
.button > button[type='submit']:hover {
    background: var(--color-brand-d);
    color: var(--color-brand-contraste);
}

/* --- Panneaux ----------------------------------------------------------- */

.form-card,
.card-simple,
.carte,
.carte-paiement,
.carte-info,
.structure-card,
.form-section,
.livraison-section {
    padding: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: none;
}

.form-card + .form-card,
.card-simple + .card-simple,
.carte-paiement + .carte-paiement { margin-top: var(--space-3); }

.cartes,
.stats-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-3);
    align-items: start;
}

.list { margin-bottom: var(--space-4); }

/* --- Chiffres ----------------------------------------------------------- */

.stat-carte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.stat-valeur {
    font-size: 1.625rem;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
}

.stat-libelle {
    font-size: var(--font-size-label);
    font-weight: 550;
    color: var(--color-ink-3);
}

.chiffre:not(a):not(.chiffre-valeur) { font-variant-numeric: tabular-nums; }

/* --- Filtres d'etat ----------------------------------------------------- */

.filtres-etats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding: 0;
    border: 0;
    background: none;
}

.filtre-etat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 12px;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-rond);
    background: var(--color-surface);
    color: var(--color-ink-2);
    font-size: var(--font-size-label);
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.filtre-etat:hover {
    border-color: var(--color-line-2);
    background: var(--color-surface-2);
    color: var(--color-ink);
    text-decoration: none;
}

.filtre-etat--actif {
    border-color: transparent;
    background: var(--color-brand);
    color: var(--color-brand-contraste);
}

.filtre-etat--actif:hover { background: var(--color-brand-d); color: var(--color-brand-contraste); }

.filtre-compte {
    padding: 0 6px;
    border-radius: var(--radius-rond);
    background: var(--color-surface-2);
    color: var(--color-ink-2);
    font-size: var(--font-size-small);
    font-variant-numeric: tabular-nums;
}

/* Fond OPAQUE : un fond semi-transparent sur le vert de marque donnait, en
   theme sombre, un compteur de la couleur exacte de ce qu'il y a derriere. */
.filtre-etat--actif .filtre-compte {
    background: var(--color-brand-d);
    color: var(--color-brand-contraste);
}

/* --- Tableaux ----------------------------------------------------------- */

.table,
.table-integree,
.table-suivi,
.horaires-table,
.table-colis,
.table-finitions,
.table-imprimantes {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body);
}

.table thead th,
.table-integree thead th,
.table-suivi thead th {
    padding: 10px var(--space-3);
    border-bottom: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.table td,
.table-integree td,
.table-suivi td {
    padding: 11px var(--space-3);
    border-bottom: 1px solid var(--color-line);
    vertical-align: middle;
}

.table tbody tr:hover,
.table-integree tbody tr:hover,
.table-suivi tbody tr:hover { background: var(--color-surface-2); }

.table tbody tr:last-child td,
.table-integree tbody tr:last-child td { border-bottom: 0; }

.table td.empty,
.table-integree td.empty,
.empty,
.vide,
.colonne-vide,
.panneau-vide {
    color: var(--color-ink-3);
    font-style: normal;
}

.table td.empty,
.table-integree td.empty { padding: var(--space-5) var(--space-3); text-align: center; }

.ligne-annulee td { opacity: 0.55; text-decoration: line-through; }

.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* La cellule d'actions garde ses boutons alignes a droite et sur une ligne. */
td.actions,
.cellule-action,
.cellule-actions-doubles {
    white-space: nowrap;
    text-align: right;
}

td.actions form,
.cellule-action form { display: inline-block; }

/* --- Etats ------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-rond);
    background: var(--color-surface-2);
    color: var(--color-ink-2);
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
}

.badge--ok,
.badge--enligne { background: var(--color-ok-tint); color: var(--color-ok); }
.badge--ferme { background: var(--color-danger-tint); color: var(--color-danger); }
.badge--admin,
.badge--vendeur { background: var(--color-brand-tint); color: var(--color-brand); }
.badge--type,
.badge--client,
.badge--facture { background: var(--color-info-tint); color: var(--color-info); }
.badge-moi { background: var(--color-warn-tint); color: var(--color-warn); }

/* --- Messages ----------------------------------------------------------- */

.alert {
    display: block;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-ink);
}

.alert-success { border-color: color-mix(in oklab, var(--color-ok) 35%, var(--color-line)); background: var(--color-ok-tint); }
.alert-danger { border-color: color-mix(in oklab, var(--color-danger) 35%, var(--color-line)); background: var(--color-danger-tint); }
.alert-warn { border-color: color-mix(in oklab, var(--color-warn) 40%, var(--color-line)); background: var(--color-warn-tint); }

/* --- Textes ------------------------------------------------------------- */

.sous-titre,
.aide,
.aide-horaires,
.aide-lignes-libres,
.champ-ligne .aide {
    margin: 0 0 var(--space-3);
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
    max-width: 72ch;
}

.retour,
.lien-liste,
.lien-boutique {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
    text-decoration: none;
}

.retour:hover { color: var(--color-brand); }

/* --- Grilles de formulaire ---------------------------------------------- */

.form-grid,
.filtres-grid,
.carte-champs,
.perso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 var(--space-3);
}

.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.filtres input[type='search'] { width: auto; min-width: 240px; flex: 1 1 240px; }
.filtres select { width: auto; }

/* --- Onglets ------------------------------------------------------------ */

.container-onglets,
.onglets-carte {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-line);
    overflow-x: auto;
    scrollbar-width: none;
}

.onglet {
    position: relative;
    min-height: 40px;
    padding: 9px 14px;
    border: 0;
    background: none;
    color: var(--color-ink-3);
    font-size: var(--font-size-body);
    font-weight: 550;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.onglet:hover { color: var(--color-ink); text-decoration: none; }
.onglet.active { color: var(--color-ink); }

.onglet.active::after {
    content: '';
    position: absolute;
    inset: auto 8px -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--color-brand);
}

/* --- Interrupteur ------------------------------------------------------- */

.switch { display: inline-flex; align-items: center; cursor: pointer; }

.switch input[type='checkbox'] {
    appearance: none;
    position: relative;
    width: 42px;
    height: 24px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-rond);
    background: var(--color-line-2);
    cursor: pointer;
    transition: background-color var(--duree-2) var(--sortie);
}

.switch input[type='checkbox']::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-1);
    transition: transform var(--duree-2) var(--sortie);
}

.switch input[type='checkbox']:checked { background: var(--color-brand); }
.switch input[type='checkbox']:checked::after { transform: translateX(18px); }

/* La glissiere dessinee a la main devient inutile : l'interrupteur EST la
   case. La garder afficherait deux pastilles cote a cote. */
.switch .glissiere { display: none; }

/* --- Pagination --------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) 0 0;
    color: var(--color-ink-3);
    font-size: var(--font-size-label);
}

.pagination a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--color-line-2);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    text-decoration: none;
}

.pagination a:hover { background: var(--color-surface-2); }

/* .form-card est plafonnee a 720 px, ce qui est juste pour un formulaire et
   faux pour un tableau : les listes des commandes, factures et devis se
   tassaient dans la moitie de l'ecran, avec des colonnes sur cinq lignes.
   Une carte qui contient un tableau prend la largeur disponible. */
.form-card:has(table) {
    max-width: none;
    padding: var(--space-3) 0;
}

.form-card:has(table) > .table-scroll { padding: 0; }

/* Un montant ne se coupe pas en deux lignes : « -1 089,00 » d'un cote et « € »
   de l'autre se lit mal et fausse la comparaison entre lignes. */
.table td.num,
.table-integree td.num,
.table-suivi td.num { white-space: nowrap; }

/* Une carte qui contient un tableau perd ses marges laterales (le tableau
   touche les bords) : ses titres et ses textes les gardent, sinon ils
   collaient au trait de la carte, ce qui se voyait sur le tableau de bord. */
.form-card:has(table) > :is(h2, h3, p, .sous-titre, strong) {
    padding-inline: var(--space-4);
}

.form-card:has(table) td:first-child,
.form-card:has(table) th:first-child { padding-left: var(--space-4); }

.form-card:has(table) td:last-child,
.form-card:has(table) th:last-child { padding-right: var(--space-4); }