/* =====================================================================
   CELLULES DE TABLEAU — inc/Cellule.php
   ---------------------------------------------------------------------
   Le type d'opération, la marque, le n° de série, le matériel et le
   client s'affichent de la même façon dans toutes les grilles.
   Jetons --t3-* du thème (clair, sombre, Azur, España, Menthe), avec
   valeurs de secours quand la couche V3 est coupée.
   ===================================================================== */
.cx-vide { color: var(--t3-text-3, #9aa3b5); opacity: .6; }

/* Sous-ligne commune (personne sous la société, marque sous le matériel) */
.cx-sous {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 1px;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--t3-text-3, #5f6883);
}
.cx-sous > .ti { font-size: 12px; opacity: .75; }

/* ── Type d'opération : pastille à point coloré (comme le sélecteur) ── */
.cx-type {
    --cx: var(--t3-accent, #2563eb);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 3px 11px 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--t3-text-2, #4c5670);
    background: color-mix(in srgb, var(--cx) 9%, var(--t3-glass-hi, rgba(255, 255, 255, 0.78)));
    /* Mélangé à un gris de base : une couleur très pâle (statut « Nouveau
       prospect ») garde quand même un contour et un point visibles. */
    border: 1px solid color-mix(in srgb, var(--cx) 30%, rgba(19, 26, 46, 0.14));
}
.cx-type::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cx);
    outline: 1px solid rgba(19, 26, 46, 0.16);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx) 20%, transparent);
}
body.v2-dark .cx-type { border-color: color-mix(in srgb, var(--cx) 35%, rgba(255, 255, 255, 0.16)); }
body.v2-dark .cx-type::before { outline-color: rgba(255, 255, 255, 0.28); }

/* ── Marque ── */
.cx-marque {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--t3-text-2, #4c5670);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}

/* ── N° de série ── */
.cx-serie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    max-width: 100%;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.35;
    text-align: left;
    /* Colonne étroite : le numéro passe à la ligne plutôt que d'être coupé */
    white-space: normal;
    word-break: break-all;
    color: var(--t3-text, #131a2e);
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 7%, transparent);
    border: 1px dashed color-mix(in srgb, var(--t3-accent, #2563eb) 35%, transparent);
    cursor: copy;
    transition: background .2s, border-color .2s;
}
.cx-serie > .ti { flex: 0 0 auto; font-size: 14px; color: var(--t3-accent, #2563eb); }
.cx-serie:hover { background: color-mix(in srgb, var(--t3-accent, #2563eb) 14%, transparent); }
.cx-serie.is-copie { border-style: solid; border-color: #059669; }
.cx-serie.is-copie > .ti { color: #059669; }

/* ── Index compteur (Cellule::index) : une ligne noir et blanc, une ligne
      couleur. Les deux pastilles sont celles de la modale machine
      (.mm-pastille-bw / .mm-pastille-color de modal-machine.css). ── */
.cx-index { display: inline-flex; flex-direction: column; gap: 4px; vertical-align: middle; }
.cx-index-l {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 3px 10px 3px 7px;
    border-radius: 9px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--t3-text-2, #4c5670);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.04));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.08));
}
.cx-index-l > .ti { font-size: 14px; opacity: .45; }
.cx-index-v { text-align: right; }
.cx-index-v.is-apres { font-weight: 700; color: var(--t3-text, #131a2e); }
.cx-pastille-bw,
.cx-pastille-color { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; }
.cx-pastille-bw {
    background: linear-gradient(135deg, #111827 50%, #f3f4f6 50%);
    box-shadow: 0 0 0 1px var(--t3-border-sub, rgba(19, 26, 46, 0.14));
}
.cx-pastille-color { background: conic-gradient(#06b6d4, #ec4899, #facc15, #06b6d4); }
body.v2-dark .cx-pastille-bw { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28); }

/* ── Matériel ── */
.cx-materiel { display: inline-block; min-width: 0; max-width: 320px; vertical-align: middle; text-align: left; }
.cx-materiel-nom {
    display: block;
    font-weight: 600;
    line-height: 1.3;
    color: var(--t3-text, #131a2e);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Client ──
   Un sigle aux initiales (carré arrondi : société ; rond : particulier), à une
   teinte tirée du nom, puis le nom et le contact en dessous. Toujours calé à
   gauche : l'œil descend la colonne sans zigzaguer. */
.cx-client {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    max-width: 320px;
    padding: 3px 8px 3px 3px;
    border-radius: 12px;
    text-align: left;
    text-decoration: none !important;
    color: inherit;
    transition: background .2s;
}
.cx-client-sigle {
    --cx-t: 220;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: hsl(var(--cx-t) 55% 34%);
    background: hsl(var(--cx-t) 70% 92%);
    box-shadow: inset 0 0 0 1px hsl(var(--cx-t) 55% 80%);
}
.cx-client-sigle.is-personne { border-radius: 50%; }
body.v2-dark .cx-client-sigle {
    color: hsl(var(--cx-t) 75% 80%);
    background: hsl(var(--cx-t) 40% 22%);
    box-shadow: inset 0 0 0 1px hsl(var(--cx-t) 40% 34%);
}
.cx-client-txt { display: flex; flex-direction: column; min-width: 0; }
.cx-client-nom {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--t3-text, #131a2e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-client-contact {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--t3-text-3, #5f6883);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
a.cx-client:hover,
a.cx-client:focus-visible { outline: none; background: color-mix(in srgb, var(--t3-accent, #2563eb) 7%, transparent); }
a.cx-client:hover .cx-client-nom { color: var(--t3-accent, #2563eb); }

/* ── Alignement : ce qui se lit comme du texte est calé à gauche ──
   Les grilles centrent leurs cellules ; un nom de client ou de matériel centré
   oblige à chercher le début de chaque ligne. */
.jdgridtb td:has(> .cx-client),
.jdgridtb td:has(> .cx-materiel),
.jdgridtb td:has(> .cx-titre),
.jdgridtb td:has(.cx-machine),
.jdgridtb td:has(> .jdgliveinp > .cx-client) { text-align: left !important; }
.jdgridtb td > .cx-materiel,
.jdgridtb td > .cx-titre { display: block; max-width: none; }

/* ── Étiquette neutre (fournisseur, technicien…) ── */
.cx-etiquette {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
    color: var(--t3-text-2, #4c5670);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}
.cx-etiquette > .ti { font-size: 13px; opacity: .7; }

/* ── Prix ── */
.cx-prix {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--t3-text, #131a2e);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}
.cx-prix small { font-size: 10.5px; font-weight: 600; opacity: .6; }
.cx-prix.is-accent {
    color: #047857;
    background: color-mix(in srgb, #059669 10%, transparent);
    border-color: color-mix(in srgb, #059669 30%, transparent);
}
body.v2-dark .cx-prix.is-accent { color: #34d399; }
.cx-prix.is-nul { font-weight: 500; opacity: .45; }

.cx-taux { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t3-text-2, #4c5670); }

/* ── Référence, code-barres ── */
.cx-ref {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
    letter-spacing: .01em;
    word-break: break-all;
    color: var(--t3-text-2, #4c5670);
}

/* ── Titre + texte coupé ── */
.cx-titre { display: block; min-width: 0; text-align: left; }
.cx-titre-nom { display: block; font-weight: 600; line-height: 1.3; color: var(--t3-text, #131a2e); }
.cx-coupe { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Options actives ── */
.cx-options { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
.cx-option {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--t3-accent-lo, #1d4ed8);
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--t3-accent, #2563eb) 24%, transparent);
}
body.v2-dark .cx-option { color: var(--t3-accent-hi, #93c5fd); }
.cx-option > .ti { font-size: 12px; }
.cx-option.is-alerte { color: #b45309; background: color-mix(in srgb, #f59e0b 12%, transparent); border-color: color-mix(in srgb, #f59e0b 35%, transparent); }

/* ── Vignette ── */
.cx-vignette {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    overflow: hidden;
    font-size: 17px;
    color: var(--t3-text-3, #9aa3b5);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}
.cx-vignette img { width: 100%; height: 100%; object-fit: contain; }
span.cx-vignette { opacity: .5; }

/* ── État (instance de machine) ── */
.cx-etat {
    --cx: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--cx);
    background: color-mix(in srgb, var(--cx) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--cx) 28%, transparent);
}
.cx-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cx); }
.cx-etat.is-ok { --cx: #059669; }
.cx-etat.is-accent { --cx: var(--t3-accent, #2563eb); }
.cx-etat.is-alerte { --cx: #d97706; }

/* ── Bouton-compteur d'une ligne (« 12 instances », « 3 matériels ») ── */
.cx-bouton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--t3-text-2, #4c5670);
    background: var(--t3-glass-hi, rgba(255, 255, 255, 0.78));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.14));
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.cx-bouton:hover { transform: translateY(-1px); color: var(--t3-accent, #2563eb); border-color: color-mix(in srgb, var(--t3-accent, #2563eb) 45%, transparent); }
.cx-bouton.is-plein {
    color: var(--t3-accent-lo, #1d4ed8);
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 10%, transparent);
    border-color: color-mix(in srgb, var(--t3-accent, #2563eb) 30%, transparent);
}
body.v2-dark .cx-bouton.is-plein { color: var(--t3-accent-hi, #93c5fd); }
.cx-bouton > .ti { font-size: 14px; }

/* ── Statut : pastille pleine à la couleur du statut (posée en ligne) ── */
.cx-statut {
    display: inline-block;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: var(--t3-text-2, #4c5670);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}
/* Liseré léger : une couleur très pâle se détache quand même du fond de la ligne */
.cx-statut.is-plein { border-color: rgba(19, 26, 46, 0.10); box-shadow: 0 1px 2px rgba(19, 26, 46, 0.06); }
body.v2-dark .cx-statut.is-plein { border-color: rgba(255, 255, 255, 0.14); }
td.cx-etroit .cx-statut { padding: 2px 6px; border-radius: 9px; font-size: 11.5px; white-space: normal; overflow-wrap: break-word; text-align: left; }

/* ── Numéro de pièce ── */
.cx-numero {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    white-space: nowrap;
    color: var(--t3-text, #131a2e);
    background: var(--t3-glass-hi, rgba(19, 26, 46, 0.05));
    border: 1px solid var(--t3-border-sub, rgba(19, 26, 46, 0.10));
}

/* ── Téléphone ──
   Les couleurs sont celles de .btn-info (thème) : cette feuille ne pose que la
   forme, pour que la pastille suive le thème clair/sombre comme sur le SAV. */
.cx-tel {
    display: block;
    width: 100%;
    /* Même hauteur que les autres étiquettes de la ligne (statut, type…) */
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    text-decoration: none !important;
    transition: filter .2s, transform .2s;
}
.cx-tel > .ti { margin-left: 5px; font-size: 12px; }
.cx-tel:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ── Date ── */
.cx-date { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--t3-text, #131a2e); }
.cx-date small { font-size: 11px; color: var(--t3-text-3, #5f6883); }
.cx-date > .ti { align-self: center; font-size: 13px; color: var(--t3-accent, #2563eb); }

/* ── Plusieurs pastilles dans une cellule (types de dossier) ── */
.cx-pile { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: center; }

/* ── Montant cliquable ou coloré (grille des factures) ──
   S'ajoute à .cx-prix : le lien garde son rôle (ouvrir les lignes). */
.jdgridtb a.cx-prix { color: var(--t3-text, #131a2e); }
.jdgridtb a.cx-prix.is-accent { color: #047857; }
body.v2-dark .jdgridtb a.cx-prix.is-accent { color: #34d399; }
a.cx-prix { text-decoration: none !important; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
a.cx-prix:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--t3-accent, #2563eb) 45%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--t3-accent, #2563eb) 14%, transparent); }
.cx-prix.is-leger { font-weight: 500; background: transparent; border-color: transparent; color: var(--t3-text-2, #4c5670); }
.cx-prix.is-du {
    color: #b45309;
    background: color-mix(in srgb, #f59e0b 12%, transparent);
    border-color: color-mix(in srgb, #f59e0b 35%, transparent);
}
body.v2-dark .cx-prix.is-du { color: #fbbf24; }

/* ── Liste déroulante en forme de pastille (statut modifiable dans le tableau) ── */
/* !important et sélecteur renforcé : theme-v3.css habille déjà tous les
   select.form-control des grilles (fond blanc, chevron). */
.jdgridtb select.form-control.cx-select,
select.form-control.cx-select {
    --cx: #64748b;
    width: 100%;
    min-width: 0;
    height: 28px !important;
    min-height: 28px !important;
    padding: 2px 24px 2px 11px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    color: var(--cx) !important;
    background-color: color-mix(in srgb, var(--cx) 11%, var(--t3-solid, #fff)) !important;
    border: 1px solid color-mix(in srgb, var(--cx) 38%, transparent) !important;
    box-shadow: none !important;
}
select.form-control.cx-select:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx) 20%, transparent) !important; }
select.cx-select option { color: var(--t3-text, #131a2e); background: var(--t3-solid, #fff); font-weight: 400; }

/* ── Machine d'un contrat : nom + n° de série, cadenas si clôturée ── */
.cx-machine {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 2px 7px;
    margin: 2px 0;
    padding: 3px 9px;
    border-radius: 9px;
    text-align: left;
    font-size: 12px;
    line-height: 1.3;
    color: var(--t3-text, #131a2e);
    background: color-mix(in srgb, var(--t3-accent, #2563eb) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--t3-accent, #2563eb) 20%, transparent);
}
.cx-machine strong { font-weight: 600; }
.cx-machine small {
    font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--t3-text-3, #5f6883);
    word-break: break-all;
}
.cx-machine.is-close { background: transparent; border-style: dashed; border-color: var(--t3-border-sub, rgba(19, 26, 46, 0.18)); color: var(--t3-text-3, #5f6883); }
.cx-machine.is-close strong { font-weight: 500; text-decoration: line-through; }
.cx-machine > .ti { align-self: center; font-size: 12px; }

/* ── Colonne trop étroite pour une pastille (moins de 110 px) ──
   Cas typique : la liste des contrats en mode « condensé », où une vingtaine
   de colonnes se partagent l'écran. js/cellules.js pose alors .cx-etroit sur
   la cellule : on garde le point de couleur et le texte, sans cadre, et le
   texte passe à la ligne par mots. Dès que la colonne est assez large, la
   pastille pleine revient. */
td.cx-etroit .cx-type,
td.cx-etroit .cx-etiquette,
td.cx-etroit .cx-marque,
td.cx-etroit .cx-numero {
    display: block;
    max-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    white-space: normal;
    text-align: left;
    font-size: 11.5px;
    line-height: 1.3;
}
td.cx-etroit .cx-type { font-weight: 600; color: var(--t3-text, #131a2e); }
td.cx-etroit .cx-type::before { display: inline-block; margin-right: 4px; width: 7px; height: 7px; box-shadow: none; }
td.cx-etroit .cx-etiquette > .ti { margin-right: 3px; font-size: 11px; }
td.cx-etroit .cx-tel { padding: 3px 5px; font-size: 11.5px; white-space: normal; border-radius: 12px; }
td.cx-etroit .cx-tel > .ti { display: none; }
td.cx-etroit .cx-pile { display: flex; flex-direction: column; gap: 3px; }
td.cx-etroit .cx-date { flex-wrap: wrap; white-space: normal; font-size: 11.5px; }
td.cx-etroit .cx-client { padding: 0; max-width: 100%; }
td.cx-etroit .cx-client-sigle { display: none; }
td.cx-etroit .cx-client-nom,
td.cx-etroit .cx-client-contact { font-size: 11.5px; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: break-word; }
td.cx-etroit .cx-sous { display: block; font-size: 11px; }
td.cx-etroit .cx-sous > .ti { margin-right: 3px; }
td.cx-etroit .cx-machine { padding: 2px 5px; font-size: 11px; }