/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════
   LISTE D'APPELS DU MOIS (portefeuille du cabinet, 2026-10-14) : Shared/ListeAppelsMois.razor. Préfixe pfa-.
   Posée dans .pf-root : elle lit les jetons du portefeuille (--pf-card, --pf-bd, --pf-mut, --pf-down, --pf-warn),
   donc suit le thème clair et sombre comme la grille. Calcul : Services/ListeAppels.cs.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════ */
.pfa {
    background: var(--pf-card, rgba(255,255,255,.035));
    border: 1px solid var(--pf-bd, rgba(255,255,255,.09));
    border-radius: var(--pf-radius, 14px);
    box-shadow: var(--pf-shadow, none);
    padding: 12px 16px 10px;
    min-width: 0;
}
.pfa-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.pfa-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 8px;
    color: var(--brand-strong, #7fb0ff);
    background: color-mix(in srgb, var(--brand, #3b82f6) 14%, transparent);
}
.pfa-ico .iku-ico { width: 14px; height: 14px; }
.pfa-titre { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--color-text-primary, #fff); }
.pfa-mois { font-size: 12px; font-weight: 600; color: var(--color-text-secondary, #b7c2cf); }
.pfa-compte { font-size: 11.5px; color: var(--pf-mut, #8a97a6); }
.pfa-espace { flex: 1 1 auto; }
.pfa-lien {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 3px 5px; border-radius: 6px;
    font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-strong, #7fb0ff); cursor: pointer;
}
.pfa-lien:hover { text-decoration: underline; }
.pfa-lien .iku-ico { width: 13px; height: 13px; }
.pfa-plier {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--pf-mut, #8a97a6);
    border: 1px solid var(--pf-bd, rgba(255,255,255,.09));
}
.pfa-plier:hover { color: var(--color-text-primary, #fff); border-color: var(--pf-bd2, rgba(255,255,255,.16)); }
.pfa-plier .iku-ico { width: 14px; height: 14px; }
.pfa.replie { padding-bottom: 12px; }

/* ── Le barème, dit à l'écran ── */
.pfa-aide {
    margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--o4, rgba(255,255,255,.04));
    font-size: 12px; line-height: 1.5; color: var(--color-text-secondary, #b7c2cf);
}
.pfa-aide p { margin: 0; }
.pfa-bareme { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.pfa-bareme li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.pfa-bareme b { font-weight: 700; color: var(--color-text-primary, #fff); }
.pfa-manque { color: var(--pf-mut, #8a97a6); }

/* ── Les lignes ── */
.pfa-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.pfa-l {
    display: grid;
    grid-template-columns: 18px 28px minmax(0, 1fr) auto auto auto;
    align-items: center; gap: 10px;
    padding: 8px 4px;
    border-top: 1px solid var(--pf-bd, rgba(255,255,255,.09));
}
.pfa-l:first-child { border-top: 0; }
.pfa-rang { font-size: 12px; font-weight: 700; text-align: center; color: var(--pf-mut, #8a97a6); font-variant-numeric: tabular-nums; }
.pfa-sig {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px;
    color: var(--brand-strong, #7fb0ff);
    background: color-mix(in srgb, var(--brand, #3b82f6) 13%, transparent);
}
.pfa-sig .iku-ico { width: 14px; height: 14px; }
.pfa-s-treso .pfa-sig { color: var(--pf-down, #F09595); background: color-mix(in srgb, var(--pf-down, #F09595) 15%, transparent); }
.pfa-s-ca .pfa-sig, .pfa-s-marge .pfa-sig, .pfa-s-encours .pfa-sig { color: var(--pf-warn, #E9B872); background: color-mix(in srgb, var(--pf-warn, #E9B872) 15%, transparent); }
.pfa-corps { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.pfa-nom {
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; font-weight: 700; color: var(--color-text-primary, #fff);
}
.pfa-phrase { min-width: 0; font-size: 12.5px; line-height: 1.4; color: var(--color-text-secondary, #b7c2cf); text-wrap: pretty; }
.pfa-autres { font-size: 11px; color: var(--pf-mut, #8a97a6); white-space: nowrap; }
.pfa-pts {
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #b7c2cf);
    background: var(--o6, rgba(255,255,255,.06));
}
.pfa-gestes { display: flex; gap: 6px; }
.pfa-g {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: 12px; font-weight: 600;
    background: transparent; color: var(--color-text-secondary, #b7c2cf);
    border: 1px solid var(--pf-bd2, rgba(255,255,255,.16));
    transition: color .12s, border-color .12s, background-color .12s;
}
.pfa-g .iku-ico { width: 14px; height: 14px; }
.pfa-g:hover { color: var(--color-text-primary, #fff); border-color: color-mix(in srgb, var(--brand, #3b82f6) 45%, var(--pf-bd2, rgba(255,255,255,.16))); }
.pfa-g.prim { color: var(--brand-strong, #7fb0ff); border-color: color-mix(in srgb, var(--brand, #3b82f6) 45%, var(--pf-bd2, rgba(255,255,255,.16))); }
.pfa-g.prim:hover { background: color-mix(in srgb, var(--brand, #3b82f6) 10%, transparent); }
.pfa-traite { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font-size: 12px; color: var(--pf-mut, #8a97a6); }
.pfa-traite input { width: 15px; height: 15px; margin: 0; accent-color: var(--brand, #3b82f6); cursor: pointer; }
.pfa-lien:focus-visible, .pfa-plier:focus-visible, .pfa-g:focus-visible, .pfa-traite input:focus-visible {
    outline: 2px solid var(--brand-strong, #7fb0ff); outline-offset: 2px;
}
.pfa-vide { margin: 10px 0 2px; font-size: 12.5px; color: var(--pf-mut, #8a97a6); }
.pfa-pied {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
    margin-top: 6px; padding-top: 8px;
    border-top: 1px dashed var(--pf-bd, rgba(255,255,255,.09));
    font-size: 11.5px; color: var(--pf-mut, #8a97a6);
}

/* ── Écran moyen : les gestes passent sous la raison ── */
@media (max-width: 1200px) {
    .pfa-l { grid-template-columns: 18px 28px minmax(0, 1fr) auto; row-gap: 6px; }
    .pfa-gestes { grid-column: 3 / 4; flex-wrap: wrap; }
    .pfa-traite { grid-column: 4 / 5; justify-self: end; }
}

/* ── Téléphone : une colonne ── */
@media (max-width: 640px) {
    .pfa { padding: 12px; }
    .pfa-compte { width: 100%; order: 5; }
    .pfa-l { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 8px; padding: 10px 0; align-items: start; }
    .pfa-rang, .pfa-pts { margin-top: 1px; }
    .pfa-sig { display: none; }
    .pfa-corps { flex-direction: column; align-items: flex-start; }
    .pfa-nom { max-width: 100%; }
    .pfa-gestes { grid-column: 2 / -1; }
    .pfa-traite { grid-column: 2 / -1; justify-self: start; }
    .pfa-bareme li { grid-template-columns: 1fr; gap: 0; }
}