/* ==========================================================================
   Onglet admin « Hotel State »

   Tableau transposé : une colonne par nuit, une ligne par métrique. Le nombre de
   colonnes dépasse toujours la largeur de l'écran, donc le corps défile
   horizontalement pendant que les deux colonnes de libellés et l'en-tête de
   dates restent visibles.

   Toutes les règles de cellule sont préfixées par `.hstate-table` : Bootstrap
   colore les cellules via `.table > :not(caption) > * > *`, qui pèse deux classes
   et l'emporterait sinon sur nos fonds — y compris sur celui des colonnes gelées,
   qui laisseraient alors défiler le contenu par transparence.
   ========================================================================== */

.hstate-scroll {
    overflow-x: auto;
    /* Le défilement vertical n'est pas contraint : c'est la page qui défile, sinon
       l'en-tête collant n'aurait aucun conteneur de référence visible. */
    max-width: 100%;
}

.hstate-table {
    font-size: 0.78rem;
    white-space: nowrap;
    margin-bottom: 0;
}

/* --- En-tête ---------------------------------------------------------- */

.hstate-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: #f1f3f5;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    padding: 2px 6px;
}

.hstate-table thead tr:nth-child(2) th {
    /* Deuxième ligne d'en-tête : décalée sous la ligne des mois, qui mesure ~22px. */
    top: 22px;
}

.hstate-table .hstate-month {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6c757d;
}

.hstate-table .hstate-day {
    min-width: 46px;
    line-height: 1.1;
}

.hstate-table .hstate-dow {
    font-size: 0.65rem;
    font-weight: 400;
    color: #6c757d;
}

/* --- Colonnes de libellés gelées -------------------------------------- */

.hstate-table .hstate-sticky {
    position: sticky;
    z-index: 3;
    background-color: #fff;
    text-align: left;
    white-space: normal;
}

/* Les cellules d'en-tête cumulent les deux positions collantes (haut + gauche) et
   doivent passer devant les cellules de données gelées. */
.hstate-table thead .hstate-sticky {
    z-index: 4;
    background-color: #f1f3f5;
}

.hstate-table .hstate-col-1 {
    left: 0;
    min-width: 190px;
    max-width: 190px;
}

.hstate-table .hstate-col-2 {
    /* Doit correspondre exactement à la largeur de .hstate-col-1, sinon la seconde
       colonne chevauche la première pendant le défilement. */
    left: 190px;
    min-width: 78px;
    max-width: 78px;
    /* Séparateur en ombre plutôt qu'en bordure : `border-collapse: collapse`
       rattache les bordures au tableau, elles ne suivraient pas la colonne gelée
       et disparaîtraient dès le premier défilement horizontal. */
    box-shadow: 2px 0 0 #dee2e6;
}

.hstate-table .hstate-name {
    font-weight: 600;
    color: #134163;
    white-space: normal;
    line-height: 1.2;
}

.hstate-table .hstate-meta {
    font-size: 0.68rem;
    color: #adb5bd;
}

.hstate-table .hstate-badge {
    font-size: 0.6rem;
    margin-top: 2px;
}

.hstate-table .hstate-metric {
    font-size: 0.72rem;
    color: #6c757d;
    font-weight: 500;
}

/* --- Cellules de données ---------------------------------------------- */

.hstate-table .hstate-cell {
    text-align: center;
    padding: 2px 6px;
    vertical-align: middle;
}

.hstate-table .hstate-num {
    font-variant-numeric: tabular-nums;
}

.hstate-table .hstate-weekend {
    background-color: #f1f3f5;
}

.hstate-table thead .hstate-weekend {
    background-color: #e9ecef;
}

.hstate-table .hstate-today {
    box-shadow: inset 2px 0 0 #2AA1Ef, inset -2px 0 0 #2AA1Ef;
}

.hstate-table .hstate-missing {
    color: #ced4da;
}

/* Valeur neutre (MLS sans contrainte, nuit ouverte) : présente mais sans intérêt
   de lecture, atténuée pour laisser ressortir les valeurs qui comptent. */
.hstate-table .hstate-zero {
    color: #ced4da;
}

.hstate-table .hstate-closed {
    color: #dc3545;
    font-weight: 700;
}

.hstate-table .hstate-soldout {
    color: #dc3545;
    font-weight: 600;
}

/* Séparateur entre deux rate plans / room types successifs. */
.hstate-table .hstate-row-first td {
    border-top: 2px solid #adb5bd;
}

/* --- Bandeau de chambre ------------------------------------------------ */

/* La cellule s'étend sur toutes les colonnes de dates : elle est donc plus large
   que l'écran et son texte partirait hors champ au défilement. `position: sticky`
   sur la gauche fait suivre le libellé, et le fond opaque de la ligne masque les
   colonnes qui défilent dessous. */
.hstate-table tbody tr.hstate-section-row td {
    background-color: #134163;
    padding: 0;
    border-top: 2px solid #134163;
}

/* Bootstrap repeint la couleur du texte via `.table > :not(caption) > * > *`, qui
   pèse autant que `.hstate-table .hstate-section` : à égalité de spécificité c'est
   l'ordre de chargement qui tranche, et il n'est pas garanti. On monte donc d'un
   cran (tbody + tr) et on repose la couleur sur le span, qui hérite sinon de la
   règle Bootstrap appliquée à la cellule. */
.hstate-table tbody tr.hstate-section-row td,
.hstate-table tbody tr.hstate-section-row td > span {
    color: #fff;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

.hstate-table tbody tr.hstate-section-row td > span {
    position: sticky;
    left: 0;
    display: inline-block;
    padding: 3px 8px;
}