/**
 * Clients — Styles de la page de gestion des comptes clients
 *
 * Ne porte que ce qui est propre à l'écran : liste (badges d'état, colonnes,
 * entête de fraîcheur, bandeau d'orphelins, détail du modal Journal), fiche et
 * modaux de ses gestes. Barre d'actions, pagination, sélecteur de lignes,
 * boutons-filtres et encart « aucun filtre sélectionné » viennent de
 * cc-produits.css, le cadre du journal (`.cc-journal-*`) de
 * cc-synchro-journal.css, onglets, modaux et messages des composants — feuilles
 * chargées sur les mêmes pages : le balisage de l'écran reprend leurs classes
 * sous ses propres identifiants.
 *
 * @file        cc-clients.css
 * @package     CaisseConnect
 * @subpackage  CSS\Pages
 * @since       1.5.0
 * @version     1.8.2
 * @author      Microlibre <contact@microlibre.net>
 * @copyright   2026 Microlibre
 * @license     GPL-2.0+ https://www.gnu.org/licenses/gpl-2.0.html
 * @link        https://microlibre.net/caisse-connect
 */

/* === LAYOUT PRINCIPAL (miroir de .cc-ui-produits) === */
.cc-ui-clients {
    padding: 10px 20px 20px 20px;
}

/* === ENTÊTE DE FRAÎCHEUR DES DONNÉES CAISSE (widget) ===
   Posé dans la rangée `.cc-nav-tabs` et poussé à droite par `margin-left: auto`.
   Le module y greffe son bouton de rafraîchissement
   (`cc_clients_entete_apres_fraicheur`, clients-administration.md §2). */
.cc-clients-entete-fraicheur {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    color: var(--cc-text-light, #555);
}

/* Le widget porte le `margin-left: auto` du groupe : celui que cc-produits.css
   donne au sélecteur de lignes est retiré quand le sélecteur suit l'entête. */
.cc-clients-entete-fraicheur + .cc-select-nb-lignes {
    margin-left: 0;
}

.cc-clients-rafraichir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Bouton à icône seule : le centrage flex et `line-height: 1` lèvent le décalage
   vertical du dashicon. */
.cc-clients-rafraichir .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
}
.cc-clients-rafraichir .button .dashicons {
    margin: 0;
    line-height: 1;
    vertical-align: middle;
}

/* Icône « synchro en pause » : le détail est au survol. */
.cc-clients-rafraichir-pause {
    color: var(--cc-warning, #d98500);
    cursor: help;
}

/* Message d'erreur du rafraîchissement (le détail complet est en `title`). */
#cc-clients-rafraichir-statut {
    color: var(--cc-error, #dc3545);
}

/* === BANDEAU D'ALERTE DES ORPHELINS ===
   Reprend `.cc-warning` (composant) ; seule la mise en ligne du texte et du
   bouton « Voir » est propre à l'écran. */
.cc-clients-alerte-orphelins {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* === BADGES D'ÉTAT DU LIEN (colonne Statut) ===
   Un badge principal par ligne, puis des badges cumulables. */
.cc-cl-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.7;
    white-space: nowrap;
    color: var(--cc-white, #fff);
    background-color: var(--cc-gray-muted, #adb5bd);
}

.cc-cl-badge--lie {
    background-color: var(--cc-success, #28a745);
}

.cc-cl-badge--reserve {
    background-color: var(--cc-warning, #ffc107);
    color: var(--cc-warning-text, #856404);
}

.cc-cl-badge--sans-code {
    background-color: var(--cc-orange, #fd7e14);
}

.cc-cl-badge--orphelin {
    background-color: var(--cc-error, #dc3545);
}

/* État non reconnu : teinte neutre de la base, le badge reste affiché. */
.cc-cl-badge--inconnu {
    background-color: var(--cc-gray-muted, #adb5bd);
}

/* Badge cumulable : adresse jamais confirmée. */
.cc-cl-badge--non-confirme {
    background-color: var(--cc-warning-bg, #fff3cd);
    color: var(--cc-warning-text, #856404);
    border: 1px solid var(--cc-warning, #ffc107);
}

/* Badge cumulable : code porté par au moins deux comptes. */
.cc-cl-badge--collision {
    background-color: var(--cc-error, #dc3545);
    border: 1px solid var(--cc-error-dark, #c82333);
}

/* === TABLEAU ===
   Largeurs serrées pour que les coordonnées tiennent sans déborder ; le pays
   est un code ISO à deux lettres. */
.cc-tableau-clients td,
.cc-tableau-clients th {
    vertical-align: middle;
}

.cc-tableau-clients .cc-cl-col-statut  { width: 11%; }
.cc-tableau-clients .cc-cl-col-code    { width: 7%; }
.cc-tableau-clients .cc-cl-col-nom     { width: 9%; }
.cc-tableau-clients .cc-cl-col-prenom  { width: 8%; }
.cc-tableau-clients .cc-cl-col-tel     { width: 9%; }
.cc-tableau-clients .cc-cl-col-email   { width: 14%; }
.cc-tableau-clients .cc-cl-col-cp      { width: 5%; }
.cc-tableau-clients .cc-cl-col-ville   { width: 9%; }
.cc-tableau-clients .cc-cl-col-pays    { width: 4%; }
.cc-tableau-clients .cc-cl-col-nb      { width: 5%; text-align: right; }
.cc-tableau-clients .cc-cl-col-ca      { width: 7%; text-align: right; }
.cc-tableau-clients .cc-cl-col-date    { width: 7%; white-space: nowrap; }

/* L'adresse électronique, colonne la plus longue, se coupe plutôt que d'élargir
   le tableau. */
.cc-tableau-clients .cc-cl-col-email {
    word-break: break-all;
}

/* Cellule Code d'un compte sans code : le dashicon y tient lieu de lien vers la
   fiche. */
.cc-tableau-clients .cc-cl-col-code .dashicons {
    color: var(--cc-gray-700, #666);
    text-decoration: none;
}

.cc-tableau-clients .cc-cl-col-code a:hover .dashicons {
    color: var(--cc-primary, #667eea);
}

/* === MODAL JOURNAL — détail des événements ===
   Cadre, filtres et pagination : `.cc-journal-*` (cc-synchro-journal.css). */
.cc-clients-journal-table .cc-cj-col-code    { width: 10%; }
.cc-clients-journal-table .cc-cj-col-compte  { width: 14%; }
.cc-clients-journal-table .cc-cj-col-detail  { width: 38%; }

.cc-cj-detail-pays ul {
    margin: 4px 0 0 0;
    padding-left: 18px;
    list-style: disc;
}

.cc-cj-detail-pays li {
    margin: 0 0 2px 0;
}

.cc-cj-detail-resume {
    font-weight: 600;
}

.cc-cj-exemples {
    color: var(--cc-gray-700, #666);
}

.cc-cj-detail-tronque {
    margin-top: 4px;
    color: var(--cc-gray-700, #666);
}

/* =========================================================================
   FICHE CLIENT (page `cc-clients&client={id}`)
   Onglets : classes de css/components/cc-nav-tabs.css. Une section dont tous
   les champs sont vides n'est pas masquée ici : son balisage n'est pas produit.
   ========================================================================= */

/* --- En-tête -------------------------------------------------------------- */
/* Une ligne flex : titre, indicateurs, gestes, puis le retour à droite. Les
   quatre blocs sont enfants directs (cc-ui-clients-fiche.php) : sous un
   conteneur commun, les deux groupes de boutons formeraient un seul item flex
   et se replieraient d'un bloc sur écran étroit. */
.cc-fiche-entete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cc-fiche-titre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

.cc-fiche-nom {
    font-weight: 600;
}

.cc-fiche-code {
    font-family: monospace;
    font-size: 15px;
    color: var(--cc-gray-700, #666);
}

.cc-fiche-indicateurs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--cc-text-light, #555);
}

.cc-fiche-indicateur {
    white-space: nowrap;
}

/* `.cc-fiche-indicateurs` sert aussi le modal « Effacer »
   (cc-ui-clients-gestes.php), qui a besoin de sa marge basse : elle n'est
   annulée que dans l'en-tête, où l'espacement vient du `gap`. */
.cc-fiche-entete .cc-fiche-indicateurs {
    margin-bottom: 0;
}

/* --- Les deux groupes de boutons ------------------------------------------ */
.cc-fiche-boutons-gauche,
.cc-fiche-boutons-droite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Le retour est poussé à droite ici, et non par un `justify-content` sur
   l'en-tête, qui écarterait aussi le titre des indicateurs. */
.cc-fiche-boutons-droite {
    margin-left: auto;
}

/* « Exporter données » est un `<form method="post">` : sa mise en page de
   formulaire est neutralisée. */
.cc-fiche-form-export {
    display: inline;
    margin: 0;
}

.cc-fiche-form-export .dashicons {
    vertical-align: middle;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* --- Encart de refus d'audience ------------------------------------------- */
.cc-fiche-refus {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* --- Les deux colonnes ---------------------------------------------------- */
.cc-fiche-colonnes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 600px));
    gap: 20px;
    align-items: start;
    /* Détache les cadres de la bande d'onglets et des bords du contenu ; le bas
       est servi par le `padding-bottom` de `.cc-ui-clients`. */
    margin: var(--cc-spacing-md, 15px) var(--cc-spacing-md, 15px) 0;
    /* Le plafond de largeur est porté par les pistes : posé sur le seul
       `.cc-fiche-colonne`, il laisserait les pistes en `1fr` s'étaler et
       ouvrirait, sur grand écran, un vide entre les deux cadres.
       `justify-content: start` ramène la grille à gauche au lieu de l'étirer. */
    justify-content: start;
}

@media screen and (max-width: 960px) {
    .cc-fiche-colonnes {
        grid-template-columns: 1fr;
    }
}

.cc-fiche-colonne {
    /* Fond de `.cc-carte` (css/components/cc-cartes.css). */
    background-color: var(--cc-menu-bg, #f9fafb);
    /* Double le plafond des pistes en deux colonnes ; seul à agir sous 960 px,
       où la grille repasse à `1fr`. */
    max-width: 600px;
    border: 1px solid var(--cc-gray-400, #ddd);
    border-radius: 4px;
    padding: 12px 16px;
}

.cc-fiche-colonne-titre {
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--cc-gray-400, #ddd);
    font-size: 14px;
}

/* --- Sections et lignes --------------------------------------------------- */
.cc-fiche-section,
.cc-fiche-situation {
    margin-bottom: 14px;
}

.cc-fiche-situation {
    padding: 10px 12px;
    background-color: var(--cc-gray-100, #f9f9f9);
    border: 1px solid var(--cc-gray-400, #ddd);
    border-radius: 4px;
}

.cc-fiche-section-titre {
    margin: 0 0 6px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cc-gray-700, #666);
}

.cc-fiche-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid var(--cc-gray-200, #f5f5f5);
    font-size: 13px;
}

.cc-fiche-ligne:last-child {
    border-bottom: none;
}

.cc-fiche-libelle {
    flex: 0 0 45%;
    color: var(--cc-text-light, #555);
}

.cc-fiche-valeur {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.cc-fiche-vide {
    color: var(--cc-gray-muted, #adb5bd);
}

.cc-fiche-adresse {
    display: inline-block;
    line-height: 1.5;
}

/* --- Messages de la colonne caisse ---------------------------------------- */
.cc-fiche-message {
    margin: 6px 0;
    font-size: 13px;
}

.cc-fiche-message--alerte {
    color: var(--cc-error, #dc3545);
    font-weight: 600;
}

/* Bandeau des deux issues de repli de la colonne caisse. */
.cc-fiche-bandeau-repli {
    margin-bottom: 10px;
    font-size: 13px;
}

.cc-fiche-note {
    margin: 6px 0 0 0;
    font-size: 12px;
    font-style: italic;
    color: var(--cc-gray-700, #666);
}

/* --- Onglet Commandes ----------------------------------------------------- */
.cc-fiche-commandes {
    margin-top: 6px;
}

.cc-fiche-commandes .cc-fc-col-numero  { width: 12%; }
.cc-fiche-commandes .cc-fc-col-date    { width: 20%; white-space: nowrap; }
.cc-fiche-commandes .cc-fc-col-statut  { width: 20%; }
.cc-fiche-commandes .cc-fc-col-total   { width: 15%; text-align: right; }
.cc-fiche-commandes .cc-fc-col-facture { width: 10%; text-align: center; }

.cc-fiche-lien-toutes {
    margin-top: 10px;
}

/* =========================================================================
   GESTES D'ÉCRITURE DE LA FICHE
   Modaux de recherche de fiche caisse, de confirmation, d'effacement et de
   changement d'e-mail de connexion. Classes de modal (`.cc-modal-info*`) et de
   bouton : composants partagés.
   ========================================================================= */

/* Geste destructeur : rouge, sans être le bouton primaire de la barre. */
.cc-bouton-danger {
    color: var(--cc-error, #dc3545) !important;
    border-color: var(--cc-error, #dc3545) !important;
}

.cc-bouton-danger:hover {
    color: var(--cc-white, #fff) !important;
    background-color: var(--cc-error, #dc3545) !important;
}

/* Ciblé sur les deux groupes de boutons et non sur `.cc-fiche-entete` : le
   titre voisin et ses badges restent hors de ce calibrage. */
.cc-fiche-boutons-gauche .dashicons,
.cc-fiche-boutons-droite .dashicons {
    vertical-align: middle;
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* « Effacer » est réduit à sa corbeille (nom accessible en `aria-label` et
   `title`, cc-ui-clients-gestes.php) : le padding horizontal du `.button` de
   WordPress, calibré pour du texte, décentrerait le glyphe. */
#cc-clients-geste-effacer {
    padding-left: 8px;
    padding-right: 8px;
}

/* --- Modal de recherche --------------------------------------------------- */
/* Plus large que le modal d'information : le tableau de résultats porte neuf
   colonnes. */
.cc-modal-clients-recherche-content {
    max-width: 1100px;
}

.cc-clients-recherche-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.cc-clients-recherche-champ {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 120px;
    flex: 1 1 120px;
}

.cc-clients-recherche-champ label {
    font-size: 12px;
    color: var(--cc-text-light, #555);
}

.cc-clients-recherche-input {
    width: 100%;
}

.cc-clients-recherche-action {
    flex: 0 0 auto;
    min-width: 0;
}

.cc-clients-recherche-message {
    margin: 10px 0;
    font-size: 13px;
}

/* Encart d'explication des résultats : rattachement désactivé, ou droit de
   liaison absent. */
.cc-clients-recherche-encart {
    margin: 10px 0;
    padding: 8px 12px;
    border-left: 4px solid var(--cc-warning, #ffc107);
    background: var(--cc-warning-bg, #fff3cd);
    color: var(--cc-warning-text, #856404);
    font-size: 13px;
}

/* --- Tableau de résultats ------------------------------------------------- */
.cc-tableau-recherche-clients td,
.cc-tableau-recherche-clients th {
    vertical-align: middle;
}

/* Neuf colonnes, total 100 %. Le tableau est en `table-layout: fixed` (classe
   `fixed` de `wp-list-table`) : ces largeurs s'imposent au contenu. */
.cc-tableau-recherche-clients .cc-rc-col-action { width: 13%; }
.cc-tableau-recherche-clients .cc-rc-col-code   { width: 12%; }
.cc-tableau-recherche-clients .cc-rc-col-nom    { width: 13%; }
.cc-tableau-recherche-clients .cc-rc-col-prenom { width: 10%; }
.cc-tableau-recherche-clients .cc-rc-col-tel    { width: 11%; }
.cc-tableau-recherche-clients .cc-rc-col-email  { width: 17%; }
.cc-tableau-recherche-clients .cc-rc-col-cp     { width: 6%; }
.cc-tableau-recherche-clients .cc-rc-col-ville  { width: 11%; }
.cc-tableau-recherche-clients .cc-rc-col-pays   { width: 7%; }

/* La colonne Code ne se coupe pas, et il y faut deux règles : `nowrap` ici et
   la largeur de 12 % ci-dessus — sous `table-layout: fixed`, `nowrap` seul
   ferait déborder la cellule sur sa voisine. Pas de `word-break` sur cette
   colonne : il couperait le code, souvent seule valeur à distinguer deux fiches
   quasi identiques. */
.cc-tableau-recherche-clients .cc-rc-col-code {
    white-space: nowrap;
}

.cc-tableau-recherche-clients .cc-rc-col-email,
.cc-tableau-recherche-clients .cc-rc-col-nom,
.cc-tableau-recherche-clients .cc-rc-col-ville {
    word-break: break-word;
}

/* --- Modal « Effacer » ---------------------------------------------------- */
.cc-modal-clients-effacer-content {
    max-width: 900px;
}

.cc-clients-effacer-gestes {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

.cc-clients-effacer-geste {
    flex: 1 1 320px;
    padding: 12px;
    border: 1px solid var(--cc-border-color, #ddd);
    border-radius: var(--cc-border-radius, 4px);
    font-size: 13px;
}

.cc-clients-effacer-geste h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.cc-clients-effacer-messages {
    margin: 10px 0 0 18px;
    font-size: 12px;
    list-style: disc;
}

/* Phrase d'avertissement d'un geste ; porte aussi les refus qu'affiche
   cc-clients-gestes.js. */
.cc-geste-avertissement {
    padding: 6px 10px;
    border-left: 3px solid var(--cc-warning, #ffc107);
    background: var(--cc-warning-bg, #fff3cd);
    color: var(--cc-warning-text, #856404);
}

/* Mention posée à côté d'un bouton de geste, dans la ligne flex de l'en-tête
   (« adresse jamais confirmée ») : elle qualifie le compte sans avertir, d'où
   l'absence du cadre de `.cc-geste-avertissement`. */
.cc-geste-mention {
    font-size: 12px;
    font-style: italic;
    white-space: nowrap;
    color: var(--cc-text-light, #555);
}