/* ==========================================================================
   ANALYTICS RH — section du sous-onglet « Rapport contribution »
   Charge en dernier (base.html) : peut donc affiner components.css/metrics.css.

   Prefixe `.hra-` pour tout ce qui est propre a la section. Tout ce qui existe
   deja au catalogue est reutilise tel quel et n'apparait pas ici :
   .stats-grid/.stat-card (KPI), .tab-row/.tab-btn (onglets internes),
   .filters-bar (filtres), .table-card/.table-header (tableaux),
   .badge (pastilles), .empty-state, .skeleton*.

   Contraintes tenues : aucune nouvelle taille de police (echelle
   10/11/11.5/12/13/14/15/16/18/22/28 px), pas de `rem`, aucun token mort,
   palette SOMA uniquement, controles interactifs >= 44 px en mobile.
   ========================================================================== */

/* --- Enveloppe de section ------------------------------------------------ */

.hra-section {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.hra-section-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}

.hra-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary);
}

/* Barre de filtres : la classe .filters-bar fournit deja la mise en page et le
   repli mobile (initMobileFilterBars). On n'ajoute que l'espacement. */
.hra-filters {
    margin-bottom: var(--space-5);
}

/* --- Segmented control (periode analysee, filtre mois precedent) -------- */

.hra-seg {
    display: inline-flex;
    gap: 3px;
    padding: 3px;
    background: #f4f4f8;
    border-radius: 20px;
}

.hra-seg-btn {
    border: none;
    background: transparent;
    color: var(--text-light);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--transition-base);
}

.hra-seg-btn:hover {
    color: var(--primary);
}

.hra-seg-btn.active {
    background: var(--card);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.hra-seg-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --- Panneaux d'onglets internes ----------------------------------------- */

.hra-panel {
    margin-top: var(--space-5);
}

.hra-block {
    margin-bottom: var(--space-6);
}

.hra-block-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--deep-koamaru);
    margin-bottom: var(--space-3);
}

.hra-note {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: var(--space-3);
}

/* --- Cartes de graphique -------------------------------------------------- */

.hra-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.hra-charts--full {
    grid-template-columns: 1fr;
}

.hra-chart-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5) var(--space-5) var(--space-4);
    min-width: 0; /* sans quoi une grille CSS refuse de retrecir le canvas */
}

.hra-chart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.hra-chart-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--deep-koamaru);
}

/* Unite de lecture — l'audience est RH, chaque graphe doit dire ce qu'il compte. */
.hra-chart-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ECharts exige un conteneur de hauteur explicite : il mesure son parent au
   moment de l'init et ne redessine qu'a l'appel de resize(). */
.hra-echart {
    width: 100%;
    height: 300px;
}

.hra-echart--tall {
    height: 380px;
}

/* --- Origine des candidats : sunburst + legende chiffree ------------------ */

.hra-echart--xl {
    height: 480px;
}

.hra-src {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-5);
    align-items: center;
}

.hra-src-legend,
.hra-src-platforms {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hra-src-canal + .hra-src-canal {
    margin-top: var(--space-3);
}

.hra-src-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 1.5;
}

.hra-src-canal > .hra-src-row {
    font-weight: 700;
    color: var(--deep-koamaru);
}

.hra-src-platforms .hra-src-row {
    padding-left: calc(12px + var(--space-2));
    font-size: 12px;
    color: var(--text-light);
}

.hra-src-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hra-src-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.hra-src-pct {
    width: 52px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-light);
    font-weight: 400;
}

.hra-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Meme ordre que HR_CANAL_COLORS (render.js). */
.hra-swatch--0 { background: var(--primary); }
.hra-swatch--1 { background: var(--accent); }
.hra-swatch--2 { background: var(--deep-koamaru); }
.hra-swatch--3 { background: var(--accent-light); }
.hra-swatch--4 { background: var(--accent-soft); }
.hra-swatch--5 { background: #d0d0e8; }

/* --- Tuiles de taux et de delais ----------------------------------------- */

.hra-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-3);
}

.hra-tile {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4);
    border-left: 3px solid var(--primary);
}

.hra-tile--accent {
    border-left-color: var(--accent);
}

.hra-tile-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}

.hra-tile-value {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.hra-tile--accent .hra-tile-value {
    color: var(--accent);
}

/* Seconde valeur d'une tuile (mediane a cote de la moyenne) */
.hra-tile-second {
    font-size: 12px;
    color: var(--text-light);
    margin-top: var(--space-1);
    font-variant-numeric: tabular-nums;
}

/* --- Tableau triable ------------------------------------------------------ */

.hra-th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.hra-th-sort:hover {
    color: var(--accent);
}

.hra-th-sort:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

/* Indicateur de tri : neutre au repos, oriente une fois la colonne active.
   L'etat accessible est porte par aria-sort, ceci n'en est que le reflet visuel. */
.hra-th-sort::after {
    content: '↕';
    margin-left: var(--space-1);
    opacity: 0.35;
    font-size: 11px;
}

.hra-th-sort[aria-sort="ascending"]::after {
    content: '↑';
    opacity: 1;
}

.hra-th-sort[aria-sort="descending"]::after {
    content: '↓';
    opacity: 1;
}

.hra-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Placeholder d'indicateur non calculable ------------------------------ */

/* Affiche a la place d'un chiffre quand la donnee ne permet pas de le calculer.
   Ne jamais y mettre une valeur de substitution : le placeholder doit se voir. */
.hra-na {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    background: #f4f4f8;
    color: var(--text-light);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .hra-charts {
        grid-template-columns: 1fr;
    }

    .hra-echart,
    .hra-echart--tall {
        height: 280px;
    }

    .hra-echart--xl {
        height: 360px;
    }

    .hra-src {
        grid-template-columns: 1fr;
    }

    /* Cible tactile : la regle globale ne couvre que .btn, .tab-btn et .ms-item. */
    .hra-seg-btn {
        min-height: 44px;
    }

    .hra-th-sort {
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    .hra-section {
        margin-top: var(--space-6);
    }

    .hra-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- Conteneur scrollable pour les tableaux larges ------------------------ */

/* Le corps de page ne doit jamais defiler horizontalement : c'est le tableau
   qui defile dans sa propre boite. */
.hra-scroll {
    overflow-x: auto;
}

/* Variante verticale : plafonne la hauteur d'une table qui peut compter
   beaucoup de lignes (ex. un cooptant par ligne), pour ne pas laisser la
   section pousser indefiniment la page en longueur. L'entete reste visible
   au defilement. */
.hra-scroll--v {
    max-height: 360px;
    overflow-y: auto;
}

.hra-scroll--v thead th {
    position: sticky;
    top: 0;
    background: var(--card);
    z-index: 1;
}

/* --- Bandeau d'avertissement --------------------------------------------- */

/* Sert a signaler une lecture trompeuse — typiquement une fenetre de reference
   pas encore ecoulee. Sans lui, la RH lirait un chiffre alarmant et faux. */
.hra-warning {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--surface-accent);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text);
}