/* Wazo Insight : chargée sur toutes les pages (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle) ; le mode sombre
   vient seul. Couleurs : rouge = manqué, vert = décroché, orange = occupé, bleu = à rappeler, gris = indisponible.
   L'écran des appels : la barre de filtres en haut, le schéma des appels dessous ; chaque tableau de bord : la même barre, ses cartes. */
@layer components {

    /* L'en-tête d'une page du module (les sites) : un surtitre, le titre, une phrase. */
    .wazo-insight-summary { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; padding: .25rem .25rem 0; }
    .wazo-insight-summary__eyebrow { margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); }
    .wazo-insight-summary__period { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--color-ink); }

    .wazo-insight-loading { display: grid; place-content: center; justify-items: center; gap: .75rem; min-height: 9rem; color: var(--color-muted); }
    .wazo-insight-loading.is-tall { min-height: 26rem; }
    .wazo-insight-empty { display: grid; justify-items: center; gap: .375rem; padding: 3.5rem 1rem; text-align: center; }
    .wazo-insight-empty > strong { font-size: 1rem; color: var(--color-ink); }

    /* Les appels un par un : des colonnes à largeur fixe, les mêmes formats de date et de numéro partout. */
    .wazo-insight-legend { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; }
    .wazo-insight-calls { table-layout: fixed; min-width: 76rem; }
    .wazo-insight-calls td { vertical-align: middle; }
    .wazo-insight-calls__caller { width: 13rem; }
    .wazo-insight-calls__when { width: 7.5rem; }
    .wazo-insight-calls__figure { width: 8.5rem; }
    .wazo-insight-calls__attempts { width: 12rem; }
    .wazo-insight-calls__since { width: 12rem; }
    /* Sans frise, la table tient sur moins de largeur. */
    .wazo-insight-calls:is(.is-answered, .is-callers, .is-days) { min-width: 56rem; }
    /* Une attente au-delà de 20 s en orange, au-delà d'une minute en rouge. */
    .wazo-insight-num.is-slow { color: var(--color-warning); }
    .wazo-insight-num.is-late { color: var(--color-danger); }
    .wazo-insight-caller { display: flex; align-items: center; gap: .75rem; min-width: 0; }
    .wazo-insight-caller > span:last-child { display: grid; min-width: 0; }
    .wazo-insight-caller strong { font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .wazo-insight-caller small { overflow: hidden; font-size: .75rem; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; }
    .wazo-insight-caller__icon { display: grid; flex: none; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: .8125rem; }
    .wazo-insight-stack > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wazo-insight-stack strong { font-weight: 600; color: var(--color-ink); }
    .wazo-insight-stack small { font-size: .75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
    /* Le déroulé d'un appel : une étape par point, reliées par un trait ; la suite calée à droite, d'une ligne à l'autre, et le trait qui
       y mène en pointillés : le temps passe. */
    .wazo-insight-timeline { display: flex; margin: 0; padding: 0; list-style: none; }
    .wazo-insight-timeline > li { position: relative; display: grid; flex: 0 1 12.5rem; align-content: start; min-width: 0; padding: 1.75rem .75rem 0 0; }
    .wazo-insight-timeline > li::before { content: ""; position: absolute; top: .6875rem; right: 0; left: 1.375rem; border-top: 2px solid var(--color-line); }
    .wazo-insight-timeline > li:nth-last-child(2) { flex-grow: 1; }
    .wazo-insight-timeline > li:nth-last-child(2)::before { border-top-style: dashed; }
    .wazo-insight-timeline > li.is-last { flex: 0 0 15rem; padding-inline-end: 0; }
    .wazo-insight-timeline > li.is-last::before { display: none; }
    .wazo-insight-timeline__dot { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--tone-soft); color: var(--tone); font-size: .625rem; }
    .wazo-insight-timeline strong, .wazo-insight-timeline small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wazo-insight-timeline strong { font-size: .8125rem; font-weight: 600; color: var(--color-ink); }
    .wazo-insight-timeline small { font-size: .75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
    .wazo-insight-timeline > li.is-last strong { font-weight: 700; color: var(--tone); }
    .wazo-insight-timeline > li.wazo-insight-tone-neutral.is-last strong { color: var(--color-ink-2); }
    .wazo-insight-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem 1.5rem 0; }
    .wazo-insight-pager__count { font-size: .8125rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
    .wazo-insight-signal { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; padding: .375rem .875rem; border-radius: 999px; background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface)); font-size: .8125rem; font-weight: 600; color: var(--color-danger); }
    .wazo-insight-signal__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 .1875rem color-mix(in srgb, var(--color-danger) 25%, transparent); }

    /* La configuration : le formulaire à gauche (cartes empilées par le socle), la procédure Wazo à droite, chaque commande numérotée
       sur fond nuit. */
    .wazo-insight-config { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-bottom: 3rem; }
    @media (min-width: 1200px) { .wazo-insight-config { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
    .wazo-insight-steps { display: grid; gap: 1.25rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
    .wazo-insight-steps > li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; }
    .wazo-insight-steps h3 { margin: .25rem 0 .5rem; font-size: .875rem; font-weight: 700; color: var(--color-ink); }
    .wazo-insight-steps pre { margin: 0; padding: .75rem .875rem; border-radius: .625rem; background: var(--color-night); color: var(--color-on-night); font-family: var(--font-mono, monospace); font-size: .75rem; line-height: 1.6; white-space: pre-wrap; word-break: break-all; }
    .wazo-insight-steps .hint { margin-top: .375rem; }
    .wazo-insight-steps__number { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent); font-size: .8125rem; font-weight: 800; }


    /* Une page du module sans filtres (les sites, l'accueil) : l'en-tête, puis ses cartes. */
    .wazo-insight-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding-bottom: 3rem; }
    .wazo-insight-page > turbo-frame { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .wazo-insight-page .card { margin: 0; }

    /* Où ils se perdent (Dashboard/line.html.twig) : une ligne par groupe ou poste, ce qui y mène, sa barre (décrochés, manqués, à
       l'échelle de la ligne qui reçoit le plus), ses manqués ; toute la ligne est un lien. Sur téléphone, la barre passe dessous. */
    .wazo-insight-lines { display: grid; margin: 0; padding: 0; list-style: none; }
    .wazo-insight-lines > li + li { border-top: 1px solid var(--color-line); }
    .wazo-insight-line {
        display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(8rem, 1fr) 8.5rem .75rem; align-items: center; gap: .5rem 1.5rem;
        margin: 0 -.75rem; padding: .75rem; border-radius: .75rem; color: var(--color-ink); text-decoration: none; transition: background .15s;
    }
    a.wazo-insight-line:is(:hover, :focus-visible) { background: var(--color-tile); }
    .wazo-insight-line__who { display: grid; min-width: 0; }
    .wazo-insight-line__who > *, .wazo-insight-line__who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wazo-insight-line__who strong { font-size: .875rem; font-weight: 700; }
    /* Le nom, puis son genre (groupe, poste, renvoi) et ce que dit le journal d'une ligne à vérifier. */
    .wazo-insight-line__who > .wazo-insight-line__name { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; overflow: visible; white-space: normal; }
    .wazo-insight-line__name > strong { max-width: 100%; }
    .wazo-insight-line__name > .badge { flex: none; }
    .wazo-insight-line.is-menu .wazo-insight-line__who strong { font-weight: 600; color: var(--color-ink-2); }
    .wazo-insight-line__who small { font-size: .75rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
    .wazo-insight-line__bar { display: flex; justify-content: flex-end; height: .625rem; overflow: hidden; border-radius: 99px; background: var(--color-success); }
    .wazo-insight-line__bar > i { width: calc(var(--share) * 1%); background: var(--color-danger); }
    .wazo-insight-line__figures { display: grid; text-align: right; font-variant-numeric: tabular-nums; }
    .wazo-insight-line__figures b { font-size: .875rem; font-weight: 700; color: var(--tone, var(--color-danger)); }
    .wazo-insight-line__figures small { font-size: .75rem; color: var(--color-muted); }
    /* Le menu vocal : aucun poste n'y a sonné, ses manqués passent au gris. */
    .wazo-insight-line.is-menu .wazo-insight-line__bar > i { background: var(--color-muted); }
    .wazo-insight-line.is-menu .wazo-insight-line__figures b { color: var(--color-ink-2); }
    .wazo-insight-line__go { font-size: .6875rem; color: var(--color-muted); transition: translate .15s; }
    /* Une jauge (bar.html.twig) : sa part sur fond gris, à sa couleur. */
    .wazo-insight-line__bar.is-gauge { justify-content: flex-start; background: var(--color-tile); }
    .wazo-insight-line__bar.is-gauge > i { border-radius: 99px; background: var(--tone); }
    .wazo-insight-line.is-menu .wazo-insight-line__bar.is-gauge > i { background: var(--color-muted); }
    /* Une jauge en décrochés et manqués : la tranche à l'échelle de la plus chargée, ses manqués en rouge au bout. */
    .wazo-insight-line__bar.is-stack > i { display: flex; justify-content: flex-end; overflow: hidden; background: var(--color-success); }
    .wazo-insight-line__bar.is-stack > i > s { background: var(--color-danger); }
    a.wazo-insight-line:hover .wazo-insight-line__go { translate: 2px 0; color: var(--color-accent); }
    @media (max-width: 767px) {
        .wazo-insight-line { grid-template-columns: minmax(0, 1fr) auto; }
        .wazo-insight-line__bar { grid-column: 1 / -1; grid-row: 2; }
        .wazo-insight-line__go { display: none; }
    }

    /* Les filtres des manqués, au-dessus de leur table : la ligne choisie (à retirer), puis une pastille par suite avec son nombre. */
    .wazo-insight-tabs { display: flex; flex-wrap: wrap; gap: .375rem; padding-bottom: 1rem; }
    .wazo-insight-tabs > a {
        display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem; border: 1px solid var(--color-line); border-radius: 99px;
        background: var(--color-surface); font-size: .8125rem; font-weight: 600; color: var(--color-ink-2); text-decoration: none; transition: border-color .15s, color .15s;
    }
    .wazo-insight-tabs > a:hover { border-color: var(--color-accent); color: var(--color-ink); }
    .wazo-insight-tabs__dot { width: .5rem; height: .5rem; border-radius: 99px; background: var(--tone); }
    .wazo-insight-tabs__tab b { font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
    .wazo-insight-tabs__tab[aria-current] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
    .wazo-insight-tabs__tab[aria-current] b { color: inherit; opacity: .8; }
    .wazo-insight-tabs__line { border-color: var(--color-accent-soft); background: var(--color-accent-soft); color: var(--color-accent); }
    .wazo-insight-tabs__line > i:last-child { font-size: .75rem; }
    .wazo-insight-summary__lead { max-width: 52rem; margin: .5rem 0 0; font-size: .875rem; color: var(--color-muted); }
    .wazo-insight-muted { color: var(--color-muted); }
    .wazo-insight-num { font-weight: 600; font-variant-numeric: tabular-nums; }

    /* Les sites : la liste, les propositions tirées des noms de Wazo, puis numéros et postes côte à côte, ceux à rattacher en orange. */
    .wazo-insight-sites { display: grid; gap: 1.25rem; }
    .wazo-insight-sites .card { margin: 0; }
    .wazo-insight-sitelist { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
    .wazo-insight-sitelist > li {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem .875rem;
        border: 1px solid var(--color-line); border-radius: .875rem;
    }
    .wazo-insight-sitelist__pin { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: .75rem; background: var(--color-accent-soft); color: var(--color-accent); }
    .wazo-insight-sitelist__name { display: grid; min-width: 0; }
    .wazo-insight-sitelist__name strong { overflow: hidden; font-size: .9375rem; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }
    .wazo-insight-sitelist__name small { font-size: .75rem; color: var(--color-muted); }
    .wazo-insight-sitelist__actions { display: flex; gap: .125rem; }
    .wazo-insight-sitelist__actions .is-danger:hover { color: var(--color-danger); }

    .wazo-insight-proposals__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: .75rem; }
    .wazo-insight-proposal {
        display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: .875rem 1rem; cursor: pointer;
        border: 1px solid var(--color-line); border-radius: .875rem; transition: border-color .15s, background-color .15s;
        &:has(input:checked) { border-color: var(--color-info); background: var(--color-info-soft); }
        input { margin-top: .1875rem; }
    }
    .wazo-insight-proposal__body { display: grid; gap: .25rem; min-width: 0; }
    .wazo-insight-proposal__body strong { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--color-ink); }
    .wazo-insight-proposal__body small { display: flex; gap: .5rem; font-size: .75rem; line-height: 1.45; color: var(--color-ink-2); }
    .wazo-insight-proposal__body small > i { flex: none; margin-top: .1875rem; color: var(--color-muted); }
    .wazo-insight-proposals__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin-top: 1rem; }
    .wazo-insight-proposals__foot p { max-width: 48rem; margin: 0; font-size: .8125rem; color: var(--color-muted); }

    .wazo-insight-assign { display: grid; gap: 1.25rem; }
    .wazo-insight-assign__bar {
        position: sticky; top: .75rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
        padding: .75rem .75rem .75rem 1.25rem; border-radius: var(--radius-card); background: var(--color-surface); box-shadow: var(--shadow-card);
        p { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .875rem; font-weight: 600; }
    }
    .wazo-insight-assign__todo { color: var(--color-warning-ink, var(--color-ink)); }
    .wazo-insight-assign__todo > i { color: var(--color-warning); }
    .wazo-insight-assign__done { color: var(--color-ink-2); }
    .wazo-insight-assign__done > i { color: var(--color-success); }
    .wazo-insight-assign__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
    @media (min-width: 1400px) { .wazo-insight-assign__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
    .wazo-insight-assign__table { min-width: 34rem; }
    .wazo-insight-assign__table td { vertical-align: middle; }
    .wazo-insight-assign__table .badge > i { margin-inline-end: .25rem; }
    .wazo-insight-assign__table .wazo-insight-stack > .badge { justify-self: start; width: max-content; }
    .wazo-insight-assign__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
    .wazo-insight-assign__actions > [hidden] { display: none; }
    /* Le site proposé d'une ligne à rattacher, et « Choisir » qui le pose dans la liste (rien n'est enregistré). */
    .wazo-insight-assign__site { width: 15rem; }
    .wazo-insight-assign__hint { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .375rem; font-size: .75rem; line-height: 1.35; color: var(--color-ink-2); }
    .wazo-insight-assign__hint[hidden] { display: none; }
    .wazo-insight-assign__hint b { font-weight: 700; color: var(--color-ink); }
    .wazo-insight-assign__choose {
        padding: .125rem .5rem; border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent); border-radius: 999px;
        background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); font-size: .6875rem; font-weight: 700; color: var(--color-accent); cursor: pointer;
    }
    .wazo-insight-assign__choose:hover { background: var(--color-accent); color: var(--color-on-accent); }
    .wazo-insight-assign__table tr.is-unassigned > td { background: color-mix(in srgb, var(--color-warning) 7%, transparent); }
    .wazo-insight-assign__table tr.is-unassigned > td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
    .wazo-insight-answered b { font-weight: 700; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

    /* La note de bas de page du tableau de bord des manqués. */
    .wazo-insight-footnote { display: flex; align-items: baseline; gap: .5rem; margin: 0; padding: 0 .25rem; font-size: .78125rem; color: var(--color-muted); }

    /* La barre de filtres (search-bundle) posée en tête de l'écran des appels, dans une carte. */
    .wazo-insight-filterbar { margin: 0; }
    .wazo-insight-filterbar .filter-bar { border: 0; }

    /* Les teintes des blocs du schéma, de leurs liens et de leurs segments : rien que des jetons, le mode sombre suit. */
    .wazo-insight-tone-primary { --tone: var(--color-accent); --tone-soft: var(--color-accent-soft); }
    .wazo-insight-tone-success { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
    .wazo-insight-tone-warning { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
    .wazo-insight-tone-danger { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }
    .wazo-insight-tone-info { --tone: var(--color-info); --tone-soft: var(--color-info-soft); }
    .wazo-insight-tone-neutral { --tone: var(--color-muted); --tone-soft: var(--color-tile); }
    .wazo-insight-tone-received { --tone: var(--color-primary-200); }

    .wazo-insight-flow__viewport { position: relative; }
    /* Le schéma à taille fixe, mis à l'échelle de la largeur disponible par le contrôleur (stamina-wazo-insight-flow) : une colonne par
       étage, de gauche à droite. */
    .wazo-insight-flow__board {
        position: absolute; top: 0; left: 0; display: grid; grid-template-columns: 21rem 20rem 17rem 20rem; gap: 1.25rem 4.5rem;
        width: max-content; padding: 0 .5rem .5rem; transform-origin: 0 0;
    }
    /* La place de chaque bloc, sur deux rangées (trois avec les lignes à vérifier) : les appels reçus entre décrochés et manqués, les
       appelants à hauteur des manqués, et ce qu'ils sont devenus de part et d'autre ; sous les manqués, les lignes à vérifier. */
    .wazo-insight-flow__board > .wazo-insight-node { align-self: center; }
    .wazo-insight-node--received { grid-area: 1 / 1 / span 2; }
    .wazo-insight-node--answered { grid-area: 1 / 2; }
    .wazo-insight-node--missed { grid-area: 2 / 2; }
    .wazo-insight-node--callers { grid-area: 2 / 3; }
    .wazo-insight-node--checks { grid-area: 3 / 2; }
    .wazo-insight-node--reached { grid-area: 1 / 4; }
    .wazo-insight-node--open { grid-area: 2 / 4; }
    .wazo-insight-flow__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
    /* Un lien : un trait plein à l'épaisseur des appels qui passent, et par-dessus un pointillé qui avance dans leur sens. */
    .wazo-insight-flow__wire { fill: none; stroke: var(--tone); stroke-opacity: .3; stroke-linecap: round; transition: stroke-opacity .2s; }
    .wazo-insight-flow__stream { fill: none; stroke: var(--tone); stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; stroke-opacity: .9; animation: wazo-insight-stream 1.2s linear infinite; transition: stroke-opacity .2s; }
    @keyframes wazo-insight-stream { to { stroke-dashoffset: -11; } }
    @media (prefers-reduced-motion: reduce) { .wazo-insight-flow__stream { animation: none; } }
    /* Un repère (les lignes à vérifier) : un trait en pointillés, sans flux. */
    .wazo-insight-flow__links g.is-aside .wazo-insight-flow__wire { stroke-dasharray: 3 7; stroke-linecap: butt; stroke-opacity: .4; }
    .wazo-insight-flow__links g.is-aside .wazo-insight-flow__stream { display: none; }
    .wazo-insight-flow__pct {
        position: absolute; z-index: 1; translate: -50% -50%; padding: .125rem .4375rem; border: 1px solid var(--color-line); border-radius: 999px;
        background: var(--color-surface); font-size: .6875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-ink-2); white-space: nowrap; transition: opacity .2s;
    }

    /* Un bloc : une carte à hauteur minimale commune, le chiffre en grand, sa répartition dessous. */
    .wazo-insight-node {
        position: relative; z-index: 2; box-sizing: border-box; display: grid; align-content: start; gap: .375rem; min-height: 8rem;
        padding: .875rem 1rem 1rem; border: 0; border-radius: 1rem; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-line), var(--shadow-card);
        font: inherit; text-align: left; color: var(--color-ink); transition: box-shadow .15s, opacity .2s, transform .15s;
    }
    /* Un bloc qui ouvre son tableau de bord : un lien, la flèche dans son coin. */
    a.wazo-insight-node { text-decoration: none; }
    a.wazo-insight-node:hover { box-shadow: 0 0 0 1.5px var(--tone), var(--shadow-card); transform: translateY(-1px); }
    .wazo-insight-node__go { position: absolute; top: .875rem; right: 1rem; font-size: .75rem; color: var(--color-muted); transition: color .15s, translate .15s; }
    .wazo-insight-node:hover .wazo-insight-node__go { color: var(--tone); translate: 2px 0; }
    .wazo-insight-node:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
    .wazo-insight-node__head { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; color: var(--color-ink-2); }
    .wazo-insight-node__icon { display: grid; flex: none; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: .5rem; background: var(--tone-soft); color: var(--tone); font-size: .8125rem; }
    .wazo-insight-node__value { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-ink); }
    .wazo-insight-node__value small { margin-inline-start: .25rem; font-size: .6875rem; font-weight: 700; letter-spacing: 0; color: var(--color-muted); }
    .wazo-insight-node__note { font-size: .75rem; color: var(--color-muted); }
    .wazo-insight-node .badge { justify-self: start; }
    /* Les repères de charge : petits, une ligne de note. */
    .wazo-insight-node--small { min-height: 0; gap: .25rem; padding: .625rem .875rem .75rem; }
    .wazo-insight-node--small :is(.wazo-insight-node__value, .wazo-insight-node__note) { padding-inline-start: 2.25rem; }
    .wazo-insight-node--small .wazo-insight-node__value { font-size: 1.0625rem; }
    /* Les appelants sans suite doivent sauter aux yeux : le bloc entier passe au rouge. */
    .wazo-insight-node.is-alert { background: color-mix(in srgb, var(--color-danger) 9%, var(--color-surface)); box-shadow: 0 0 0 1.5px var(--color-danger), var(--shadow-card); }
    .wazo-insight-node.is-alert :is(.wazo-insight-node__head, .wazo-insight-node__value, .wazo-insight-node__note) { color: var(--color-danger); }
    .wazo-insight-node.is-alert .wazo-insight-node__icon { background: var(--color-danger); color: var(--color-on-accent); }

    /* Une répartition : une barre en segments séparés d'un filet, et sa légende. */
    .wazo-insight-share { display: flex; gap: 2px; height: .5rem; margin-top: .375rem; }
    .wazo-insight-share > i { min-width: 3px; border-radius: 2px; background: var(--tone); }
    .wazo-insight-key { display: flex; flex-wrap: wrap; gap: .125rem .75rem; margin: 0; padding: 0; list-style: none; font-size: .6875rem; font-weight: 600; color: var(--color-muted); }
    .wazo-insight-key > li::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .3125rem; border-radius: 2px; background: var(--tone); vertical-align: .0625rem; }
    .wazo-insight-key b { color: var(--color-ink-2); }
    /* Les jours de la période dans le bloc des appels reçus : la colonne pâle, les reçus ; sa partie pleine, les manqués. */
    .wazo-insight-days { display: flex; align-items: flex-end; gap: 3px; height: 2.75rem; margin-top: .25rem; }
    .wazo-insight-days > span { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; overflow: hidden; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--tone) 22%, transparent); }
    .wazo-insight-days > span > i { background: var(--color-danger); }

    /* Téléphone : les blocs les uns sous les autres, dans l'ordre de la lecture, sans les liens. */
    @media (max-width: 767px) {
        .wazo-insight-flow__board { position: static; grid-template-columns: minmax(0, 1fr); gap: .75rem; width: auto; padding: 0; }
        .wazo-insight-flow__board > .wazo-insight-node { grid-area: auto; min-height: 0; }
        .wazo-insight-flow__links, .wazo-insight-flow__pct { display: none; }
    }
}

/* Le tableau de bord d'un bloc (Dashboard/missed.html.twig), comme une page du Pilotage : la carte de tête (dashboard-bundle) sur
   toute la largeur, son texte à gauche et sa carte de chaleur à droite dès qu'il y a la place ; dessous, les lignes, puis la table.
   Hors de la couche components : la feuille des cartes (dashboard.css) n'est dans aucune couche, ces règles doivent passer après elle. */
.wazo-insight-board { container: wazo-insight-board / inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.wazo-insight-board > .dc.dc-hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-column: auto; grid-row: auto; }
.wazo-insight-board > .dc-hero > .dc-top { grid-column: 1 / -1; }
.wazo-insight-board > .dc-hero > .wazo-insight-heat { padding: 1rem 1.375rem 1.375rem; }
/* Le chiffre du constat en grand, sur sa ligne, comme sur une carte à graphique (dashboard.css ne le fait que pour .dc-chart). */
.wazo-insight-board > .dc-hero .dc-num.is-lead { display: block; margin-bottom: .375rem; font-size: min(3.5rem, 12cqi); font-weight: 600; letter-spacing: -.05em; line-height: .95; }
/* Deux cartes côte à côte (la répartition à gauche, sa mesure à droite) dès qu'il y a la place. */
.wazo-insight-board__pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.wazo-insight-board__pair > .card { margin: 0; }
/* Deux colonnes de cartes empilées (la charge à gauche, la répartition à droite) dès qu'il y a la place. */
.wazo-insight-board__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.wazo-insight-board__column { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.wazo-insight-board__column > .card { margin: 0; }
/* Trois cartes côte à côte (où, pourquoi, rappelle-t-on vite), de même hauteur. */
.wazo-insight-board__trio { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.wazo-insight-board__trio > .card { margin: 0; }
/* Dans une carte d'un tiers de largeur, la barre passe sous le nom : le nom et sa phrase gardent toute la largeur. */
.wazo-insight-board__trio .wazo-insight-line { grid-template-columns: minmax(0, 1fr) auto .75rem; grid-template-areas: "who fig go" "bar bar bar"; gap: .375rem 1rem; padding-block: .625rem; }
.wazo-insight-board__trio .wazo-insight-line__who { grid-area: who; }
.wazo-insight-board__trio .wazo-insight-line__bar { grid-area: bar; height: .5rem; }
.wazo-insight-board__trio .wazo-insight-line__figures { grid-area: fig; }
.wazo-insight-board__trio .wazo-insight-line__go { grid-area: go; }
.wazo-insight-line__name > strong { min-width: 0; }
.wazo-insight-more { margin: .5rem 0 0; font-size: .75rem; color: var(--color-muted); }
/* Pourquoi : la part de chaque cause en grand à gauche, sa phrase, ses manqués et l'attente à droite. */
.wazo-insight-causes { display: grid; margin: 0; padding: 0; list-style: none; }
.wazo-insight-causes__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .875rem; margin: 0 -.5rem; padding: .75rem .5rem; border-radius: .625rem; color: inherit; text-decoration: none; }
a.wazo-insight-causes__row:is(:hover, :focus-visible) { background: var(--color-tile); }
.wazo-insight-causes__row > span { display: grid; min-width: 0; }
.wazo-insight-causes > li + li { border-top: 1px solid var(--color-line); }
.wazo-insight-causes strong { font-size: .875rem; color: var(--color-ink); }
.wazo-insight-causes small { font-size: .75rem; color: var(--color-muted); }
.wazo-insight-causes__part { font-size: 1.375rem; font-weight: 700; letter-spacing: -.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.wazo-insight-causes__figures { text-align: right; font-variant-numeric: tabular-nums; }
.wazo-insight-causes__figures b { font-size: .9375rem; color: var(--color-ink); }
/* Rappelle-t-on vite : une barre partagée, puis sa légende chiffrée. */
.wazo-insight-split { display: flex; gap: 3px; height: .875rem; margin: .25rem 0 1rem; border-radius: 999px; overflow: hidden; }
.wazo-insight-split > i { min-width: 4px; background: var(--tone); }
.wazo-insight-split__lead { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: .75rem; }
.wazo-insight-split__lead p { display: grid; margin: 0; }
.wazo-insight-split__lead b { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.wazo-insight-split__lead small { font-size: .75rem; color: var(--color-muted); }
.wazo-insight-split__legend { display: grid; margin: 0; padding: 0; list-style: none; }
.wazo-insight-split__legend > li + li { border-top: 1px solid var(--color-line); }
.wazo-insight-split__row { display: grid; grid-template-columns: .75rem minmax(0, 1fr) auto 2.75rem; align-items: center; gap: .625rem; padding: .5rem 0; font-size: .84375rem; color: var(--color-ink); text-decoration: none; }
.wazo-insight-split__row > i { width: .75rem; height: .75rem; border-radius: .25rem; background: var(--tone); }
.wazo-insight-split__row > b { font-variant-numeric: tabular-nums; }
.wazo-insight-split__row > small { text-align: right; color: var(--color-muted); }
a.wazo-insight-split__row > span { text-decoration: underline; text-underline-offset: 2px; }
a.wazo-insight-split__row:is(:hover, :focus-visible) { background: var(--color-tile); }
.wazo-insight-split__row { margin: 0 -.5rem; padding-inline: .5rem; border-radius: .5rem; }
@container wazo-insight-board (min-width: 62rem) {
    .wazo-insight-board__trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wazo-insight-board__pair { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .wazo-insight-board__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wazo-insight-board > .dc.dc-hero { grid-template-columns: clamp(17rem, 28%, 24rem) minmax(0, 1fr); }
    .wazo-insight-board > .dc-hero > .dc-copy { padding-bottom: 1.5rem; }
    .wazo-insight-board > .dc-hero > .wazo-insight-heat { align-self: center; padding: 0 1.75rem 1.5rem .5rem; }
}

/* La carte de chaleur, sur la nuit de la carte de tête : une case par heure, rouge à proportion des manqués (--p, de 0 à 100), comme
   les graphiques sur la nuit (dashboard.css) ; le total du jour au bout. Trop étroite, elle défile de côté. */
.wazo-insight-heat {
    --heat-ink: var(--color-primary-50); --heat-muted: color-mix(in srgb, var(--color-primary-50) 60%, transparent);
    --heat-empty: color-mix(in srgb, var(--color-primary-50) 7%, transparent); --heat-tone: var(--color-danger);
    display: grid; gap: .75rem; min-width: 0; overflow-x: auto; color: var(--heat-ink); scrollbar-width: thin;
}
.wazo-insight-heat__grid { display: grid; grid-template-columns: 5.5rem repeat(var(--hours), minmax(1.75rem, 1fr)) 3rem; gap: .25rem; min-width: 34rem; }
.wazo-insight-heat__row { display: contents; }
.wazo-insight-heat__hour { font-size: .6875rem; font-weight: 600; text-align: center; color: var(--heat-muted); white-space: nowrap; }
.wazo-insight-heat__day { align-self: center; font-size: .78125rem; font-weight: 600; color: var(--heat-ink); }
.wazo-insight-heat__cell, .wazo-insight-heat__legend > i {
    display: grid; place-items: center; height: 1.875rem; border-radius: .375rem; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--heat-tone) calc(18% + var(--p, 0) * .82%), var(--heat-empty)); color: #fff;
}
:is(.wazo-insight-heat__cell, .wazo-insight-heat__legend > i).is-empty { background: var(--heat-empty); }
.wazo-insight-heat__total { align-self: center; font-size: .8125rem; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.wazo-insight-heat__legend { display: flex; align-items: center; gap: .25rem; margin: 0; font-size: .6875rem; color: var(--heat-muted); }
.wazo-insight-heat__legend > i { width: 1.25rem; height: .75rem; border-radius: .1875rem; }
.wazo-insight-heat.is-success { --heat-tone: var(--color-success); }
.wazo-insight-heat.is-info { --heat-tone: var(--color-info); }
.wazo-insight-heat__legend > span:first-child { margin-right: .25rem; } .wazo-insight-heat__legend > span:last-child { margin-left: .25rem; }

/* L'écran des sites : un tableau à colonnes (« À ranger », puis un site par colonne) où l'on glisse les numéros et les postes. */
.wazo-insight-board-sites { display: grid; gap: .875rem; }
.wazo-insight-board-sites__help { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .8125rem; color: var(--color-ink-2); }
/* « À ranger » à gauche, sur toute la hauteur ; les sites à droite, autant par rangée que la largeur en tient. */
.wazo-insight-board-sites__columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.wazo-insight-board-sites__sites { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1rem; align-items: start; }
@media (min-width: 1100px) {
    .wazo-insight-board-sites__columns { grid-template-columns: 20rem minmax(0, 1fr); }
    .wazo-insight-column.is-loose { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; scrollbar-width: thin; }
}
.wazo-insight-column { display: grid; align-content: start; gap: .625rem; min-height: 10rem; padding: .875rem; border: 1px solid var(--color-line); border-radius: 1rem; background: var(--color-surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.wazo-insight-column.is-loose { background: color-mix(in srgb, var(--color-warning) 6%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-line)); }
.wazo-insight-board-sites.is-dragging .wazo-insight-column { border-style: dashed; }
.wazo-insight-column.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.wazo-insight-column.is-ghost { place-items: center; border-style: dashed; color: var(--color-muted); font-size: .8125rem; text-align: center; }
.wazo-insight-column__head { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 2rem; }
.wazo-insight-column__head > strong { min-width: 0; overflow: hidden; font-size: .9375rem; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }
.wazo-insight-column__pin { display: grid; flex: none; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: .625rem; background: var(--color-accent-soft); color: var(--color-accent); font-size: .8125rem; }
.wazo-insight-column.is-loose .wazo-insight-column__pin { background: var(--color-warning-soft); color: var(--color-warning); }
.wazo-insight-column__count { padding: .0625rem .5rem; border-radius: 99px; background: var(--color-tile); font-size: .75rem; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
.wazo-insight-column__tools { display: flex; margin-left: auto; opacity: .55; transition: opacity .15s; }
.wazo-insight-column:hover .wazo-insight-column__tools { opacity: 1; }
.wazo-insight-column__cards { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.wazo-insight-column__empty { display: none; margin: 0; padding: 1.25rem .5rem; border: 1px dashed var(--color-line); border-radius: .75rem; font-size: .75rem; color: var(--color-muted); text-align: center; }
.wazo-insight-column.is-empty .wazo-insight-column__empty { display: block; }
.wazo-insight-chip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .625rem; padding: .625rem .75rem; border: 1px solid var(--color-line); border-radius: .75rem; background: var(--color-surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04); cursor: grab; transition: box-shadow .15s, transform .15s, opacity .15s; }
.wazo-insight-chip:hover { box-shadow: 0 4px 12px rgb(0 0 0 / .08); transform: translateY(-1px); }
.wazo-insight-chip.is-dragging { opacity: .35; }
.wazo-insight-chip.is-placed { animation: wazo-insight-placed .6s ease; }
@keyframes wazo-insight-placed { from { box-shadow: 0 0 0 3px var(--color-accent); } to { box-shadow: 0 1px 2px rgb(0 0 0 / .04); } }
.wazo-insight-chip__icon { margin-top: .125rem; color: var(--color-accent); }
.wazo-insight-chip.is-extensions .wazo-insight-chip__icon { color: var(--color-success); }
.wazo-insight-chip__body { display: grid; gap: .125rem; min-width: 0; }
.wazo-insight-chip__body strong { overflow: hidden; font-size: .84375rem; color: var(--color-ink); text-overflow: ellipsis; white-space: nowrap; }
.wazo-insight-chip__body small { font-size: .71875rem; line-height: 1.35; color: var(--color-ink-2); overflow-wrap: anywhere; }
.wazo-insight-chip__grip { margin-top: .125rem; font-size: .75rem; color: var(--color-line-strong, var(--color-muted)); }
.wazo-insight-chip__proposed { justify-self: start; display: inline-flex; align-items: center; gap: .375rem; margin-top: .25rem; padding: .1875rem .5rem; border: 0; border-radius: 99px; background: var(--color-accent-soft); color: var(--color-accent); font-size: .71875rem; font-weight: 600; cursor: pointer; }
.wazo-insight-chip__proposed:hover { background: var(--color-accent); color: var(--color-on-accent); }