/**
 * Issue #10663 § M11 — Shared per-row state CSS module.
 *
 * Single source of truth for the 5-state row visuals used by:
 *   • Admin Diagnostic Modal (#10477 / #10480 / PR #10482)
 *   • Bulk N-row right-panel (#10663 OP.B)
 *
 * Lifted from admin-diagnostic-modal.css (cwDiagPulse + cw-diag-badge-{blue,green,red}
 * + cw-diag-row-error) and generalized so both surfaces consume the same classes.
 *
 * Row states (data-row-status on <tr>):
 *   pending  — blank cells, no animation (queued, not yet picked by the fetch pool)
 *   loading  — shimmer skeleton, pulsing badge (Promise pool dispatched, awaiting response)
 *   done     — full data, green badge
 *   partial  — one source OK + one source ERR (per-source badge color decides)
 *   error    — both sources ERR (red row tint + retry icon in checkbox col)
 *
 * @author Olivier RAVEAU - Oliv.Ai
 * @date 2026-05-28
 */

/* ── Badge palette (kept identical to admin-diagnostic-modal for visual parity) ── */
.cw-row-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    line-height: 1.3;
}
.cw-row-badge--blue {
    background: #cce5ff;
    color: #004085;
    animation: cwRowPulse 1.2s ease-in-out infinite;
}
.cw-row-badge--green { background: #d4edda; color: #155724; }
.cw-row-badge--red   { background: #f8d7da; color: #721c24; }
.cw-row-badge--amber { background: #fff3cd; color: #856404; }

@keyframes cwRowPulse {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}

/* ── Status-dot pills (●green / ●red / ●amber) per IFS mockup ── */
.cw-row-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}
.cw-row-dot--ok    { background: #28a745; }
.cw-row-dot--bad   { background: #dc3545; }
.cw-row-dot--warn  { background: #ffc107; }
.cw-row-dot--off   { background: #ced4da; }

/* ── Per-row state styling ── */
tr[data-row-status="pending"] td:not(.cw-row-cell--keep) {
    color: #adb5bd;
}

tr[data-row-status="loading"] .cw-row-shimmer {
    display: inline-block;
    height: 12px;
    width: 100%;
    max-width: 120px;
    border-radius: 3px;
    background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
    background-size: 200% 100%;
    animation: cwRowShimmer 1.5s linear infinite;
}
@keyframes cwRowShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

tr[data-row-status="error"] {
    background: #fff5f5;
}
tr[data-row-status="error"]:hover {
    background: #ffe5e5;
}
tr[data-row-status="error"] td {
    color: #721c24;
}
tr[data-row-status="partial"] {
    background: #fffbf2;
}
tr[data-row-status="partial"]:hover {
    background: #fff5e0;
}
tr[data-row-status="done"]:hover {
    background: #e7f1ff;
}

/* ── Retry icon in checkbox column (error/partial rows only) ── */
.cw-row-retry-btn {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    transition: all .15s ease;
}
.cw-row-retry-btn:hover {
    background: #dc3545;
    color: #fff;
    transform: rotate(180deg);
}

/* ── Truncated cell with title tooltip ── */
.cw-row-cell--ellipsis {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
 * 🆕 #15239 M1 · M21 — le tiret qui explique, et le statut « pas encore »
 * ═══════════════════════════════════════════════════════════════════════════════════════
 *
 * ⛔ M21 — une infobulle `title=` n'est atteignable ni au clavier ni au doigt. Les commis
 *    de Termont travaillent sur tablette a la guerite. Trois porteurs, donc :
 *      (1) le soulignement pointille ci-dessous, pour qu'on VOIE qu'il y a quelque chose
 *          a lire — un tiret nu n'invite a rien ;
 *      (2) `title=` + `aria-label=` sur un <button>, donc focusable au clavier ;
 *      (3) le detail depliable `tr.cw-tp-raisons`, tapotable au doigt.
 */
.cw-tp-vide {
    background: none;
    border: 0;
    padding: 0 2px;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: help;
    line-height: 1;
}
.cw-tp-vide-tiret {
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
    opacity: .8;
}
.cw-tp-vide:hover .cw-tp-vide-tiret { opacity: 1; border-bottom-style: solid; }
.cw-tp-vide:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 2px; }

/* Le 3e porteur : la meme raison, en clair, sous la ligne. */
tr.cw-tp-raisons > td {
    background: #f8fafc;
    border-top: 0;
    padding: 8px 14px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #334155;
}
.cw-tp-raisons-liste { margin: 0; padding-left: 18px; }
.cw-tp-raisons-liste li { margin: 2px 0; }

/* 🕓 « Pas encore » — ni vert (ce n'est pas un succes) ni ambre (ce n'est pas une panne).
 * Le choix de la couleur EST le message : les deux seules teintes disponibles jusqu'ici
 * forcaient a mentir dans un sens ou dans l'autre. */
.cw-row-badge--slate { background: #e2e8f0; color: #334155; }
.cw-row-dot--wait    { background: #64748b; }
tr[data-row-status="notyet"]:hover { background: #f8fafc; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
 * 🆕 #15239 M14 · M15 · M16 — la carte de repartition
 * ═══════════════════════════════════════════════════════════════════════════════════════
 *
 * ⛔ Camembert en `conic-gradient` PUR — aucune bibliotheque. Chart.js existe dans ce depot
 *    mais il est reserve aux comptes de diagnostic interne et charge depuis un CDN externe
 *    (index.php) : l'etendre a une page cliente ajouterait une dependance tierce, un point
 *    de panne reseau et un tiers qui voit passer les clients, pour dessiner six couleurs.
 *
 * ⛔ La couleur n'est JAMAIS le seul porteur : chaque part a sa pastille, son emoji, son
 *    nombre en toutes lettres et sa consequence redigee. Le disque porte un `role="img"`
 *    et un `aria-label` qui resume la repartition entiere.
 */
.cw-tp-repartition {
    margin: 10px 14px 4px;
    padding: 12px 14px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.cw-tp-repartition[hidden] { display: none; }

.cw-tp-repartition__titre {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: .01em;
}

.cw-tp-repartition__corps {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

/* Le disque. Le trou est un pseudo-element : pas de masque SVG, pas de dependance. */
.cw-tp-repartition__donut {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #e2e8f0;   /* repli visible si le JS n'a pas encore ecrit le degrade */
}
.cw-tp-repartition__donut[hidden] { display: none; }
.cw-tp-repartition__donut::after {
    content: '';
    position: absolute;
    inset: 26%;
    border-radius: 50%;
    background: #f8fafc;
}

.cw-tp-repartition__droite { flex: 1 1 260px; min-width: 240px; }

/* M15 — la phrase qui REMPLACE le dessin quand une seule categorie pese. La carte, elle,
 * reste : c'est ici que la reponse s'ecrit quand le graphique n'a rien a montrer. */
.cw-tp-repartition__phrase {
    margin: 0 0 8px;
    font-size: 12.5px;
    line-height: 1.55;
    color: #334155;
}

.cw-tp-repartition__legende {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cw-tp-rep-item { margin: 0; }

/* Chaque ligne de legende EST son bouton de filtre — pas de doublon entre « ce qu'on lit »
 * et « ce sur quoi on clique ». */
.cw-tp-rep-btn {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 3px 6px;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    color: #334155;
    cursor: pointer;
}
.cw-tp-rep-btn:hover { background: #eef2f7; border-color: #dbe3ec; }
.cw-tp-rep-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
/* L'etat actif se VOIT : fond, bordure, gras — et `aria-pressed` le dit aux lecteurs
 * d'ecran. Un filtre actif qu'on ne voit pas se lit comme un tableau vide. */
.cw-tp-rep-btn.is-actif,
.cw-tp-rep-btn[aria-pressed="true"] {
    background: #e0edff;
    border-color: #2563eb;
    color: #0f172a;
    font-weight: 600;
}

.cw-tp-rep-puce {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 2px;
    align-self: center;
}
.cw-tp-rep-emoji { flex: 0 0 auto; }
.cw-tp-rep-nb    { flex: 0 0 auto; min-width: 2.2em; text-align: right; font-weight: 700; color: #0f172a; }
.cw-tp-rep-lib   { flex: 0 0 auto; }
.cw-tp-rep-cons  { color: #64748b; font-weight: 400; }

/* L'alerte transversale — elle n'est pas une part, elle recoupe les six. */
.cw-tp-repartition__alerte {
    margin: 8px 0 0;
    padding: 6px 9px;
    border-radius: 5px;
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
    font-size: 12.5px;
    font-weight: 600;
}
.cw-tp-repartition__alerte[hidden] { display: none; }

.cw-tp-repartition__boutons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}
.cw-tp-repartition__boutons .cw-tp-rep-btn {
    width: auto;
    border-color: #cbd5e1;
    background: #fff;
    padding: 4px 10px;
}
.cw-tp-repartition__boutons .cw-tp-rep-btn.is-actif { background: #e0edff; border-color: #2563eb; }

/* 🆕 #15239 M25 — l'etiquette courte, quand la colonne est assez large.
 * Elle ne remplace pas l'infobulle : elle la rend VISIBLE sans geste. Le client de
 * Simard n'a ni survole ni tapote — il a vu dix tirets et a conclu que le site etait
 * casse. Discrete (italique, gris, 11 px) pour ne pas se lire comme une donnee. */
.cw-tp-vide-slug {
    font-size: 11px;
    font-style: italic;
    color: #64748b;
    border-bottom: 1px dotted currentColor;
    padding-bottom: 1px;
    opacity: .85;
    white-space: nowrap;
}
.cw-tp-vide:hover .cw-tp-vide-slug { opacity: 1; border-bottom-style: solid; }