/* ========= Barre de contrôles ========= */
.rc-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-bottom: 8px;
}

.label-and-field {
    margin-right: 8px;
    align-self: center;
}

/* ========= Légende détaillée, collée à droite ========= */
.hm-legend-detailed {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    user-select: none;
}

.hm-legend-title {
    font-weight: 600;
    font-size: 12px;
    color: #111827;
}

.hm-legend-scale {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.hm-leg-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.hm-leg-swatch {
    width: 28px;
    height: 12px;
    border-radius: 6px;
    background: hsl(var(--hue,120),55%,78%); /* même palette que la heatmap */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.hm-leg-tick {
    font-size: 11px;
    color: #6b7280;
    line-height: 1;
}

.hm-leg-cell.na .hm-leg-swatch {
    background: repeating-linear-gradient( 45deg, #cfd8e3 0 6px, #e5e7eb 6px 12px );
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.hm-leg-cell.na .hm-leg-tick {
    color: #6b7280;
}

/* ========= Cadre / viewport ========= */
.hm-frame {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden; /* pas de scroll X sur la page */
}

/* Le scroll (X+Y) doit se faire ICI, pas ailleurs */
.hm-viewport {
    /* JS mettra --dayw dynamiquement ; fallback ici */
    --dayw: 8px; /* largeur d’un jour par défaut (sera clampé min 1px) */
    --dayw-max: 6px;
    --hm-gutters-x: 2px;
    max-height: 65dvh;
    overflow: auto;
    position: relative; /* contexte pour sticky */
    color: #1f2937;
    font-size: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
}

/* wrapper qui “prend” la largeur du contenu réel */
.hm-content {
    width: max-content;
    display: inline-block;
}

/* ========= HEADER sticky (top) ========= */
.hm-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 220px max-content; /* angle + bandeau mois */
    align-items: stretch;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

/* Angle sticky (coin gauche) */
.hm-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 12;
    font-weight: 700;
    padding: 8px 10px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
}

/* Bandeau des mois (largeur = jours * var(--dayw)) */
.hm-months-row {
    display: flex;
    width: max-content;
    background: #fff;
}

.hm-month {
    /* --days est injecté inline (Razor) */
    width: calc(var(--dayw) * var(--days));
    flex: 0 0 auto;
    text-transform: capitalize;
    text-align: center;
    font-weight: 700;
    letter-spacing: .3px;
    font-size: 12px;
    padding: 8px 0;
    border-right: 1px solid #f1f5f9;
}

    .hm-month.sep {
        box-shadow: inset 2px 0 0 rgba(0,0,0,.08);
    }

    .hm-month.alt0 {
        background: #f8fafc;
    }

    .hm-month.alt1 {
        background: #eef2ff;
    }

/* ========= BODY ========= */
.hm-body {
    position: relative;
}

/* Ligne res + cellules : libellé (220px) + contenu */
.hm-row {
    display: grid;
    grid-template-columns: 220px max-content;
    min-height: 32px;
}

/* Libellé ressource sticky à gauche */
.hm-res {
    position: sticky;
    left: 0;
    z-index: 8;
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 14px;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #f1f5f9;
}

.hm-row:nth-child(odd) .hm-res {
    background: #fafafa;
}

.hm-row:hover .hm-res {
    background: #eef2ff;
}

/* Conteneur des cellules (mois -> jours) */
.hm-row-cells {
    width: max-content;
    height: 32px;
    display: flex;
    align-items: stretch;
}

/* Bloc d’un mois (séparateur visuel entre mois) */
.hm-month-cells {
    /* --days est injecté inline (Razor) */
    width: calc(var(--dayw) * var(--days));
    flex: 0 0 auto;
    height: 100%;
}

    .hm-month-cells.sep {
        border-left: 2px solid rgba(0,0,0,.45);
    }

/* Grille des jours d’un mois : colonnes réactives = min(1px, var(--dayw)) */
.hm-month-grid {
    display: grid;
    gap: 0;
    height: 100%;
    /* --days injecté inline ; chaque colonne = minmax(1px, var(--dayw))  */
    grid-template-columns: repeat(var(--days), minmax(1px, var(--dayw)));
}

/* Cellule jour */
.hm-cell {
    height: 100%;
    border-radius: 0;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
    transition: box-shadow .06s ease;
    overflow: visible;
}

    .hm-cell:hover {
        box-shadow: inset 0 0 0 2px rgba(0,0,0,.30);
        z-index: 2;
    }
    /* Week-end */
    .hm-cell.wknd {
        background-image: linear-gradient(rgba(0,0,0,0.12), rgba(0,0,0,0.12));
        background-blend-mode: multiply;
    }

/* État vide */
.hm-empty {
    padding: 16px;
    color: #6b7280;
}

/* Tooltips cachées par défaut (affichées via JS en hover) */
.hm-cell .hm-tooltip {
    display: none;
}

/* ========= Correctifs Radzen pour que le viewport puisse rétrécir ========= */
.opened-scenarios-tabs,
.opened-scenarios-tabs .rz-tabview,
.opened-scenarios-tabs .rz-tabview-left,
.opened-scenarios-tabs .rz-tabview-panels,
.opened-scenarios-tabs .rz-tabview-panel {
    min-width: 0 !important;
    min-height: 0 !important;
}

.output-tabs, .output-tabs-root, .output-tabs-root .rz-tabview,
.output-tabs-root .rz-tabview-left, .output-tabs-root .rz-tabview-panels,
.output-tabs-root .rz-tabview-panel {
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
}

.hm-month,
.hm-month-cells {
    box-sizing: border-box; /* les bordures comptent dans la width */
}

/* 2) Header : plus de border-right sur chaque mois */
.hm-month {
    border-right: 0;
}

    /* 3) Header : séparateur à gauche à partir du 2e mois (épaisseur = body) */
    .hm-month + .hm-month {
        border-left: 2px solid rgba(0,0,0,.45);
    }

/* 4) Body : plus de .sep, on fait pareil que le header */
.hm-month-cells {
    border-left: 0;
}

    .hm-month-cells + .hm-month-cells {
        border-left: 2px solid rgba(0,0,0,.45);
    }

/* (Option) garde l’alternance de fond sans jouer sur la largeur */
.hm-month.alt0 {
    background: #f8fafc;
}

.hm-month.alt1 {
    background: #eef2ff;
}