/* ========================================
   CALENDRIER DES EVENEMENTS (signalement 432)
   Bandeau de densite par mois, vue Annee en heatmap, vue Chronologie par piste.
   Trois lectures de la meme fenetre temporelle : ou sont les pics, ou sont les creux.
   ======================================== */

/* ── Bandeau de densite ───────────────────────────────────────────────────── */

.densite-bandeau {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
    padding: 6px 0 4px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
    margin-bottom: 4px;
}

.densite-colonnes {
    display: flex;
    flex: 1;
    gap: 3px;
    min-width: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.densite-mois {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    flex: 1 0 44px;
    min-width: 44px;
    padding: 2px 0 3px;
    border: none;
    border-radius: 4px;
    background: none;
    cursor: pointer;
    scroll-snap-align: start;
}

.densite-mois:hover {
    background: var(--neutral-fill-stealth-hover);
}

.densite-mois-actif {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: -2px;
}

.densite-total {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--neutral-foreground-rest);
}

.densite-mois-vide .densite-total {
    color: var(--neutral-foreground-hint);
}

/* Hauteur fixe : les barres se comparent entre elles, pas au contenu de la colonne. */
.densite-barres {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 28px;
}

.densite-barre-reunions {
    background: #0d9488;
}

.densite-barre-evenements {
    background: #6366f1;
}

/* Un mois vide se dessine : c'est le creux qu'on est venu chercher, pas une absence.
   Le trait doit rester visible dans les deux thèmes, d'où le stroke fort. */
.densite-barre-zero {
    height: 3px;
    background: var(--neutral-stroke-strong-rest);
}

.densite-libelle {
    font-size: 0.7rem;
    line-height: 1;
    white-space: nowrap;
    color: var(--neutral-foreground-hint);
}

.densite-nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
}

@media (min-width: 1600px) {
    .densite-barres {
        height: 48px;
    }

    .densite-total,
    .densite-libelle {
        font-size: 0.75rem;
    }
}

/* ── Vue Annee : heatmap 12 mois x 31 jours ───────────────────────────────── */

.heatmap-annee {
    display: flex;
    flex-direction: column;
    gap: 3px;
    height: 100%;
    overflow: auto;
    padding: 4px 2px;
}

.heatmap-barre-annee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.heatmap-annee-libelle {
    font-size: 0.95rem;
    font-weight: 600;
    min-width: 54px;
    text-align: center;
}

/* Colonnes de largeur fixe : en 1fr, une case de jour atteindrait 50 px sur un grand écran,
   ce qui transforme la grille en damier illisible. */
.heatmap-ligne {
    display: grid;
    grid-template-columns: 56px repeat(31, 24px) 34px;
    gap: 2px;
    align-items: center;
    justify-content: center;
}

.heatmap-entete {
    color: var(--neutral-foreground-hint);
    font-size: 0.7rem;
}

.heatmap-jour-entete {
    text-align: center;
}

.heatmap-mois {
    font-size: 0.75rem;
    color: var(--neutral-foreground-rest);
}

.heatmap-cellule {
    aspect-ratio: 1;
    min-height: 14px;
    border: none;
    border-radius: 2px;
    padding: 0;
    cursor: pointer;
}

.heatmap-cellule:hover {
    outline: 1px solid var(--accent-fill-rest);
}

.heatmap-cellule:focus-visible {
    outline: 2px solid var(--accent-fill-rest);
}

/* Paliers construits par color-mix : une opacite sur blanc disparaitrait en theme sombre. */
.heatmap-niveau-0 {
    background: var(--neutral-layer-3);
    cursor: default;
}

.heatmap-niveau-1 {
    background: color-mix(in srgb, #0d9488 30%, transparent);
}

.heatmap-niveau-2 {
    background: color-mix(in srgb, #0d9488 60%, transparent);
}

.heatmap-niveau-3 {
    background: #0d9488;
}

.heatmap-hors-mois {
    background: none;
    cursor: default;
}

.heatmap-cellule:disabled {
    cursor: default;
}

.heatmap-cellule:disabled:hover {
    outline: none;
}

.heatmap-total {
    font-size: 0.7rem;
    text-align: right;
    color: var(--neutral-foreground-rest);
}

.heatmap-legende {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}

.heatmap-legende .heatmap-cellule {
    width: 14px;
    min-height: 14px;
    cursor: default;
}

.heatmap-total-zero {
    color: var(--neutral-foreground-hint);
}

/* Sous 768 px, les deux grilles défilent horizontalement : la colonne de gauche reste visible,
   sinon on ne sait plus de quel mois ou de quelle piste on lit la ligne. */
@media (max-width: 767.98px) {
    .heatmap-annee {
        overflow-x: auto;
    }

    .heatmap-ligne {
        grid-template-columns: 48px repeat(31, 14px) 30px;
        justify-content: start;
    }

    .heatmap-mois,
    .chronologie-piste {
        position: sticky;
        left: 0;
        background: var(--neutral-layer-1);
        z-index: 1;
    }
}

@media (min-width: 1600px) {
    .heatmap-ligne {
        grid-template-columns: 64px repeat(31, 32px) 40px;
    }
}

/* ── Vue Chronologie : une piste par valeur de l'axe ──────────────────────── */

.chronologie {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    overflow: auto;
    padding: 4px 2px;
}

.chronologie-axes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.chronologie-axes-libelle {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.chronologie-vide {
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
    padding: 12px 2px;
}

.chronologie-ligne {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}

.chronologie-compte {
    margin-left: auto;
    padding-left: 6px;
    color: var(--neutral-foreground-hint);
}

.chronologie-reste {
    font-size: 0.65rem;
    color: var(--neutral-foreground-hint);
}

.chronologie-piste {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chronologie-pastille-piste {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.chronologie-semaines {
    display: grid;
    gap: 0;
}

.chronologie-semaine {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 20px;
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding: 2px 0;
    flex-wrap: wrap;
}

.chronologie-point {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    padding: 0;
    cursor: pointer;
}

.chronologie-point:hover {
    outline: 1px solid var(--accent-fill-rest);
}

.chronologie-axe {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 10px;
    padding-top: 2px;
    border-top: 1px solid var(--neutral-stroke-divider-rest);
}

.chronologie-axe-mois {
    display: grid;
    font-size: 0.7rem;
    color: var(--neutral-foreground-hint);
}

.chronologie-axe-mois span {
    border-left: 1px solid var(--neutral-stroke-divider-rest);
    padding-left: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

@media (max-width: 767.98px) {
    .chronologie-ligne,
    .chronologie-axe {
        grid-template-columns: 120px minmax(0, 1fr);
    }
}