/* ===== CLASSIFICATION DES TICKETS & PAGE « RÉPARTITION DES CONTRIBUTIONS » =====
   js/modules/classification.js (pastilles, bouton « Classer », modale) et
   js/modules/repartition.js (page data-page="repartition").
   Réutilise : .stat-card / .stats-grid (KPI), .metrics-chart-card /
   .metrics-mode-btn (cartes de graphique, bascule d'unité), .table-card,
   .detail-overlay / .detail-panel (modale), .toggle-switch, .coop-btn--secondary
   (bouton compact de ligne). Couleurs : charte SOMA uniquement. */

/* ── Pastilles de classification ── */
.classif-cell {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.classif-pills {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.classif-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}
.classif-pill--offer {
    background: rgba(0, 0, 153, 0.07);
    color: var(--primary);
    border-color: rgba(0, 0, 153, 0.18);
}
.classif-pill--none {
    background: rgba(45, 46, 96, 0.08);
    color: var(--deep-koamaru);
    border-color: rgba(45, 46, 96, 0.20);
    font-weight: 600;
}
.classif-pill--asset {
    background: rgba(245, 10, 99, 0.10);
    color: #9c0038;
    border-color: rgba(245, 10, 99, 0.28);
}
.classif-pill--practice {
    background: rgba(84, 110, 127, 0.07);
    color: #546e7f;
    border-color: rgba(84, 110, 127, 0.15);
    font-weight: 600;
}
.classif-unset {
    font-size: 12px;
    font-style: italic;
    color: var(--text-light);
    white-space: nowrap;
}
.classif-meta {
    margin-top: var(--space-1);
    font-size: 11px;
    color: var(--text-light);
}
.wp-detail-classif { margin-top: var(--space-5); }

/* ── Modale « Classer » (par-dessus le détail d'un ticket) ── */
.detail-overlay.classif-overlay { z-index: 1150; }
.classif-overlay .detail-panel { width: 520px; }
.classif-subject {
    margin-bottom: var(--space-4);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.classif-subject span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-light);
}
.classif-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin-bottom: var(--space-4);
}
.classif-fieldset legend {
    padding: 0 var(--space-1);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-light);
}
.classif-fieldset .form-hint { margin-top: var(--space-2); }
.classif-check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 0;
    font-size: 13px;
    cursor: pointer;
}
.classif-check input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.classif-check-code {
    min-width: 72px;
    font-weight: 700;
    color: var(--primary);
}
.classif-check-label { color: var(--text); }
.classif-asset {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 13px;
    cursor: pointer;
}
.classif-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.classif-actions .classif-clear { margin-right: auto; }

/* ── Page Répartition ── */
.rep-filters { align-items: center; }
.rep-export-btn { margin-left: auto; }
.rep-kpi--link { cursor: pointer; }
.rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.rep-card { margin-bottom: var(--space-5); min-width: 0; }
.rep-grid .rep-card { margin-bottom: 0; }
.rep-chart-box {
    position: relative;
    height: 280px;
}
.rep-note {
    margin-top: var(--space-3);
    font-size: 12px;
    color: var(--text-light);
    line-height: 1.5;
}
.rep-table-wrap { overflow-x: auto; }
.rep-row { cursor: pointer; }
.rep-group-title {
    margin: var(--space-5) 0 var(--space-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.rep-group-count {
    display: inline-flex;
    margin-left: var(--space-1);
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.rep-drill { margin-bottom: var(--space-5); }
.rep-drill .table-header { gap: var(--space-3); flex-wrap: wrap; }

/* Matrice offre × practice — heatmap par paliers d'opacité du bleu SOMA
   (fond porté par le bouton : le survol de ligne global est en !important). */
.rep-matrix th, .rep-matrix td { text-align: center; }
.rep-matrix th.rep-matrix-offer {
    text-align: left;
    white-space: nowrap;
    text-transform: none;
    font-size: 13px;
    color: var(--text);
}
.rep-heat-cell { padding: 4px; }
.rep-heat-0 { color: #b8bcc8; }
.rep-heat-btn {
    width: 100%;
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    color: var(--deep-koamaru);
}
.rep-heat-1 .rep-heat-btn { background: rgba(0, 0, 153, 0.10); }
.rep-heat-2 .rep-heat-btn { background: rgba(0, 0, 153, 0.24); }
.rep-heat-3 .rep-heat-btn { background: rgba(0, 0, 153, 0.40); }
.rep-heat-4 .rep-heat-btn { background: rgba(0, 0, 153, 0.62); color: #fff; }
.rep-heat-5 .rep-heat-btn { background: rgba(0, 0, 153, 0.85); color: #fff; }
.rep-heat-btn:hover { box-shadow: inset 0 0 0 2px var(--accent); }

@media (max-width: 900px) {
    .rep-grid { grid-template-columns: 1fr; }
    .classif-btn, .rep-heat-btn, .classif-check { min-height: 44px; }
}
@media (max-width: 640px) {
    .classif-overlay .detail-panel { width: 100vw; }
    .rep-export-btn { margin-left: 0; }
    .rep-chart-box { height: 240px; }
    .classif-actions .classif-clear { margin-right: 0; }
}