/* =============================================================================
   Beds24 Core — Planning Propriétaire
   assets/css/owner-planning.css

   Calendrier mensuel en lecture seule [b24c_owner_planning].
   Mobile-first — pas de dépendance externe.
   Hérite des variables CSS de owner-portal.css (:root).
   Préfixes : .b24c-planning  /  .b24c-booking-bar  (isolés de tout thème)

   ARCHITECTURE COULEURS :
   La couleur de chaque barre de réservation est injectée par JS via
   la CSS custom property --bar-bg sur l'élément .b24c-booking-bar.
   Pour changer la logique couleur (OTA, statut, logement, mix), seule
   la fonction JS resolveEventColor() doit être modifiée — le CSS reste
   inchangé. La prop --room-color sur les boutons logement suit le même principe.
   ============================================================================= */

/* =============================================================================
   Conteneur principal
   ============================================================================= */

.b24c-planning {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--b24c-color-text, #1e293b);
    width: 100%;
    max-width: none;
    /* Centrage conservé si le thème donne moins que 100% */
    margin: 0 auto;
}

/* =============================================================================
   Notice (non connecté / aucune chambre)
   ============================================================================= */

.b24c-planning__auth-notice {
    padding: 16px;
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    border-radius: var(--b24c-radius, 8px);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: var(--b24c-font-size-sm, 13px);
    text-align: center;
}

/* =============================================================================
   État : chargement initial
   ============================================================================= */

.b24c-planning__loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 16px;
    color: var(--b24c-color-text-muted, #64748b);
    font-size: var(--b24c-font-size-sm, 13px);
}

.b24c-planning__spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--b24c-color-border, #e2e8f0);
    border-top-color: var(--b24c-color-primary, #1a5276);
    border-radius: 50%;
    animation: b24c-spin 0.75s linear infinite;
    flex-shrink: 0;
}

@keyframes b24c-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   État : erreur
   ============================================================================= */

.b24c-planning__error {
    padding: 14px 16px;
    background: var(--b24c-color-error-bg, #fee2e2);
    border: 1px solid var(--b24c-color-error, #dc2626);
    border-radius: var(--b24c-radius, 8px);
    color: var(--b24c-color-error, #dc2626);
    font-size: var(--b24c-font-size-sm, 13px);
}

/* =============================================================================
   Sélecteur de chambre — multi-sélection
   ============================================================================= */

.b24c-planning__room-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}

/* Sélecteur de propriété (admin uniquement) */
.b24c-planning__property-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.b24c-planning__property-label {
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    color: var(--b24c-color-text-muted, #64748b);
}

.b24c-planning__property-select {
    padding: 5px 12px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: 20px;
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text, #1e293b);
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    max-width: 100%;
}

.b24c-planning__property-select:focus {
    outline: none;
    border-color: var(--b24c-color-text-muted, #64748b);
}

/* Boutons contrôle global (Tous / Aucun) */
.b24c-planning__ctrl-btn {
    padding: 5px 12px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: 20px;
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--b24c-transition, .15s ease),
                color      var(--b24c-transition, .15s ease),
                box-shadow var(--b24c-transition, .15s ease);
}

.b24c-planning__ctrl-btn:hover,
.b24c-planning__ctrl-btn:focus {
    background: var(--b24c-color-border, #e2e8f0);
    color: var(--b24c-color-text, #1e293b);
    outline: none;
}

/*
 * "Tous" actif (tous les logements sélectionnés).
 * Classe .b24c-planning__ctrl-btn--all-active ajoutée par JS.
 */
.b24c-planning__ctrl-btn--all-active {
    background: var(--b24c-color-text, #1e293b);
    border-color: var(--b24c-color-text, #1e293b);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.20);
}

.b24c-planning__ctrl-btn--all-active:hover,
.b24c-planning__ctrl-btn--all-active:focus {
    background: #334155;
    border-color: #334155;
    color: #fff;
}

/* Séparateur visuel entre contrôles et logements */
.b24c-planning__room-sep {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--b24c-color-border, #e2e8f0);
    align-self: center;
    flex-shrink: 0;
}

/*
 * BOUTONS LOGEMENT — toggle actif / inactif
 *
 * État INACTIF (défaut) :
 *   fond coloré logement, texte blanc, opacité réduite.
 *   → Pill coloré atténué = "logement existe mais n'est pas affiché".
 *
 * État ACTIF (--active) :
 *   fond blanc, texte couleur logement, bordure couleur logement, ombre légère.
 *   → Pill "creux" avec la couleur en contour = élégant et très lisible.
 *
 * La couleur du logement (--room-color) est injectée par JS via
 * btn.style.setProperty('--room-color', …).
 */
.b24c-planning__room-btn {
    padding: 5px 12px;
    border: 1.5px solid var(--room-color, var(--b24c-color-primary, #1a5276));
    border-radius: 20px;
    background: var(--room-color, var(--b24c-color-primary, #1a5276));
    color: #fff;
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    opacity: 0.38; /* atténué = clairement "non sélectionné" */
    transition: background    var(--b24c-transition, .15s ease),
                color         var(--b24c-transition, .15s ease),
                border-color  var(--b24c-transition, .15s ease),
                opacity       var(--b24c-transition, .15s ease),
                box-shadow    var(--b24c-transition, .15s ease);
}

.b24c-planning__room-btn:hover,
.b24c-planning__room-btn:focus {
    opacity: 0.7;
    outline: none;
}

/*
 * Bouton ACTIF : fond rouge vif, texte blanc — inversion forte pour lisibilité maximale.
 * opacity: 1 override explicitement le .38 de l'état inactif.
 * La --room-color n'est plus utilisée ici : la couleur de sélection est uniforme (rouge).
 */
.b24c-planning__room-btn--active {
    background:   #dc2626;
    border-color: #b91c1c;
    color:        #fff;
    font-weight:  700;
    opacity:      1;
    box-shadow:   0 2px 8px rgba(185, 28, 28, .30);
}

.b24c-planning__room-btn--active:hover,
.b24c-planning__room-btn--active:focus {
    background:   #b91c1c;
    border-color: #991b1b;
    box-shadow:   0 3px 12px rgba(185, 28, 28, .45);
    opacity:      1;
    outline: none;
}

/* =============================================================================
   Navigation période — disposition 3 zones (Aujourd'hui | label | ← →)
   ============================================================================= */

/*
 * Grille 3 colonnes : [gauche 1fr] [centre auto] [droite 1fr]
 * Le centre (label) est ainsi toujours parfaitement centré quelles que soient
 * les largeurs des zones gauche et droite.
 */
.b24c-planning__nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 16px;
    gap: 8px;
}

/* Zone gauche — contient le bouton Aujourd'hui */
.b24c-planning__nav-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

/* Zone droite — contient ← et → */
.b24c-planning__nav-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.b24c-planning__month-label {
    text-align: center;
    font-size: var(--b24c-font-size-lg, 17px);
    font-weight: 700;
    color: var(--b24c-color-text, #1e293b);
    margin: 0;
    letter-spacing: -0.01em;
    /* Évite que de longs labels (semaine chevauchant deux mois) dépassent */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b24c-planning__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-bg-section, #fff);
    color: var(--b24c-color-text, #1e293b);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--b24c-transition, .15s ease),
                border-color var(--b24c-transition, .15s ease);
}

.b24c-planning__nav-btn:hover,
.b24c-planning__nav-btn:focus {
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    border-color: var(--b24c-color-primary, #1a5276);
    outline: none;
}

.b24c-planning__nav-btn:active {
    background: var(--b24c-color-border, #e2e8f0);
}

/* =============================================================================
   Bouton Aujourd'hui
   ============================================================================= */

.b24c-planning__today-btn {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-bg-section, #fff);
    color: var(--b24c-color-text, #1e293b);
    font-size: var(--b24c-font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background     var(--b24c-transition, .15s ease),
                border-color   var(--b24c-transition, .15s ease),
                color          var(--b24c-transition, .15s ease),
                opacity        var(--b24c-transition, .15s ease);
}

.b24c-planning__today-btn:hover:not(:disabled),
.b24c-planning__today-btn:focus:not(:disabled) {
    background:   var(--b24c-color-neutral-bg, #f1f5f9);
    border-color: var(--b24c-color-primary, #1a5276);
    color:        var(--b24c-color-primary, #1a5276);
    outline: none;
}

.b24c-planning__today-btn:active:not(:disabled) {
    background: var(--b24c-color-border, #e2e8f0);
}

/* État : période courante déjà affichée — bouton désactivé */
.b24c-planning__today-btn:disabled,
.b24c-planning__today-btn--current {
    opacity: .4;
    cursor: default;
    pointer-events: none;
}

/* Masqué en vue Semaine */
.b24c-planning__today-btn--hidden {
    visibility: hidden;  /* garde l'espace — évite le saut de layout */
    pointer-events: none;
}

/* =============================================================================
   Grille calendrier
   ============================================================================= */

.b24c-planning__calendar-wrap {
    background: var(--b24c-color-bg-section, #fff);
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius, 8px);
    padding: 12px;
    box-shadow: var(--b24c-shadow-card, 0 1px 3px rgba(0,0,0,.08));
    margin-bottom: 16px;
}

.b24c-planning__calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* En-têtes de jours */
.b24c-planning__day-hdr {
    text-align: center;
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    color: var(--b24c-color-text-muted, #64748b);
    padding: 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Message sélection vide (rendu à la place de la grille) */
.b24c-planning__empty-sel {
    grid-column: 1 / -1;
    text-align: center;
    padding: 24px 16px;
    color: var(--b24c-color-text-muted, #64748b);
    font-size: var(--b24c-font-size-sm, 13px);
    margin: 0;
}

/* =============================================================================
   Cellule de jour
   ============================================================================= */

.b24c-planning__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;   /* numéro centré horizontalement */
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px 3px;
    border-radius: 4px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

/* Cellule vide (avant le 1er du mois) */
.b24c-planning__day--empty {
    pointer-events: none;
}

/* Numéro du jour — toujours en haut, centré */
.b24c-planning__day-num {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--b24c-color-text, #1e293b);
    flex-shrink: 0;
}

/* Indicateur "aujourd'hui" */
.b24c-planning__day--today .b24c-planning__day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--b24c-color-primary, #1a5276);
    color: #fff;
    font-weight: 700;
    font-size: 10px;
}

/* Conteneur des barres */
.b24c-planning__day-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0; /* évite le débordement dans la grille */
}

/* Badge "+N" */
.b24c-planning__more-badge {
    font-size: 9px;
    font-weight: 700;
    color: var(--b24c-color-text-muted, #64748b);
    text-align: center;
    line-height: 1.2;
    padding: 0 2px;
}

/* =============================================================================
   Barres de réservation (.b24c-booking-bar)
   ============================================================================= */

/*
 * --bar-bg : couleur de fond, injectée par JS via resolveEventColor().
 * Pour changer la logique couleur (OTA, statut, mix) sans toucher au CSS,
 * modifier uniquement resolveEventColor() dans owner-planning.js.
 */

.b24c-booking-bar {
    --bar-bg: #94a3b8; /* fallback si JS absent */

    display: flex;
    align-items: center;
    width: 100%;
    min-height: 14px;
    padding: 1px 3px;
    box-sizing: border-box;
    background-color: var(--bar-bg);
    border: 1px solid transparent;
    border-radius: 2px;
    overflow: hidden;
    cursor: default;
    transition: filter var(--b24c-transition, .15s ease);
}

.b24c-booking-bar:hover {
    filter: brightness(0.92);
    cursor: pointer; /* barres cliquables → fiche réservation */
}

.b24c-booking-bar:focus {
    outline: 2px solid var(--b24c-color-primary, #1a5276);
    outline-offset: 1px;
}

/* ---- Texte dans la barre ---- */

.b24c-booking-bar__text {
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
    font-weight: 500;
    min-width: 0;
}

/* Texte sombre pour les barres à fond clair (ex. bloqué = gris clair) */
.b24c-booking-bar__text--dark {
    color: var(--b24c-color-text-muted, #64748b);
}

/* ---- Types visuels ---- */

/*
 * arrival  : guest arrive dans l'après-midi → barre sur la moitié droite
 * checkout : guest repart le matin → barre sur la moitié gauche
 * middle   : journée entière occupée → barre pleine
 * single   : séjour d'une nuit → barre pleine, arrondis complets
 *
 * Ces marges reproduisent le "demi-jour" arrival/checkout.
 * Phase 2 (hors scope) : barres continues cross-cellule via position absolute.
 */

.b24c-booking-bar--arrival {
    margin-left: 45%;
    border-radius: 2px 0 0 2px;
}

.b24c-booking-bar--checkout {
    margin-right: 45%;
    border-radius: 0 2px 2px 0;
}

.b24c-booking-bar--middle {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
}

.b24c-booking-bar--single {
    border-radius: 2px;
    margin-left: 0;
    margin-right: 0;
}

/* ---- Modificateurs de statut ---- */

/* Confirmé : par défaut (rien à ajouter — resolveEventColor() donne la couleur) */

/*
 * En attente : bordure tiretée, opacité réduite.
 * La couleur de fond (--bar-bg) reste celle du logement — seul le traitement change.
 * Pour passer à une couleur spécifique "pending" (ex. jaune), modifier resolveEventColor().
 */
.b24c-booking-bar--pending {
    opacity: 0.65;
    border-color: var(--bar-bg);
    background-color: transparent;
}

.b24c-booking-bar--pending .b24c-booking-bar__text {
    color: var(--bar-bg);
}

/* Bloqué : gris atténué (--bar-bg = #cbd5e1, fixé par resolveEventColor) */
.b24c-booking-bar--blocked {
    opacity: 0.7;
}

/* =============================================================================
   Légende
   ============================================================================= */

.b24c-planning__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--b24c-font-size-xs, 12px);
    color: var(--b24c-color-text-muted, #64748b);
}

.b24c-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.b24c-legend-item::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Couleurs de légende — représentatives, pas liées à un logement spécifique */
.b24c-legend-item--confirmed::before {
    background: #2563eb;
}
.b24c-legend-item--pending::before {
    background: transparent;
    border: 1px dashed #2563eb;
    opacity: 0.65;
}
.b24c-legend-item--blocked::before {
    background: #cbd5e1;
    opacity: 0.7;
}
.b24c-legend-item--free::before {
    background: transparent;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
}

/* =============================================================================
   Responsive
   ============================================================================= */

/* Petits mobiles */
@media (max-width: 360px) {
    .b24c-planning__calendar-wrap {
        padding: 6px;
    }
    .b24c-planning__calendar {
        gap: 1px;
    }
    .b24c-planning__day {
        min-height: 44px;
        padding: 3px 1px 2px;
    }
    .b24c-planning__day-num {
        font-size: 10px;
    }
    .b24c-planning__day--today .b24c-planning__day-num {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    .b24c-booking-bar {
        min-height: 12px;
    }
    .b24c-booking-bar__text {
        font-size: 9px;
    }
}

/* Desktop */
@media (min-width: 480px) {
    .b24c-planning__calendar-wrap {
        padding: 16px;
    }
    .b24c-planning__calendar {
        gap: 3px;
    }
    .b24c-planning__day {
        min-height: 62px;
        padding: 5px 3px 4px;
        gap: 3px;
    }
    .b24c-planning__day-num {
        font-size: 12px;
    }
    .b24c-planning__day--today .b24c-planning__day-num {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }
    .b24c-booking-bar {
        min-height: 16px;
        padding: 1px 4px;
    }
    .b24c-booking-bar__text {
        font-size: 11px;
    }
    .b24c-planning__more-badge {
        font-size: 10px;
    }
}

/* =============================================================================
   Panneau détail réservation
   Masqué par défaut, affiché en dessous du planning au clic sur une barre.
   Aucune modal, aucune dépendance : le planning reste visible au-dessus.
   ============================================================================= */

/*
 * Le panneau est invisible (max-height: 0, opacity: 0).
 * La classe --visible est ajoutée / retirée par JS (selectBooking / closeDetailPanel).
 * Astuce : opacity transite plus vite → le contenu disparaît d'abord visuellement,
 * puis max-height revient à 0 en douceur (sans à-coup visible).
 */
.b24c-detail-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    transition:
        max-height 0.32s ease,
        opacity    0.22s ease,
        margin-top 0.32s ease;
}

.b24c-detail-panel--visible {
    max-height: 900px; /* assez grand pour n'importe quel contenu */
    opacity: 1;
    margin-top: 20px;
}

/* Card enveloppe */
.b24c-detail-panel__inner {
    background: var(--b24c-color-bg-section, #fff);
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius, 8px);
    box-shadow: var(--b24c-shadow-card, 0 1px 3px rgba(0,0,0,.08));
    overflow: hidden;
}

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

.b24c-detail-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--b24c-color-neutral-bg, #f8fafc);
    border-bottom: 1px solid var(--b24c-color-border, #e2e8f0);
    gap: 12px;
}

.b24c-detail-panel__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.b24c-detail-panel__guest {
    font-weight: 700;
    font-size: var(--b24c-font-size-base, 15px);
    color: var(--b24c-color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b24c-detail-panel__pax {
    font-size: var(--b24c-font-size-sm, 13px);
    color: var(--b24c-color-text-muted, #64748b);
    white-space: nowrap;
    font-weight: 400;
}

/* Bouton × fermeture */
.b24c-detail-panel__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-bg-section, #fff);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition:
        background     var(--b24c-transition, .15s ease),
        color          var(--b24c-transition, .15s ease),
        border-color   var(--b24c-transition, .15s ease);
}

.b24c-detail-panel__close:hover,
.b24c-detail-panel__close:focus {
    background:   var(--b24c-color-error-bg, #fee2e2);
    color:        var(--b24c-color-error, #dc2626);
    border-color: var(--b24c-color-error, #dc2626);
    outline: none;
}

/* --- Corps ------------------------------------------------------------------ */

.b24c-detail-panel__body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Liste définition (dl) -------------------------------------------------- */

.b24c-detail-dl {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.b24c-detail-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--b24c-color-border, #e2e8f0);
    align-items: baseline;
}

.b24c-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.b24c-detail-row__label {
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    color: var(--b24c-color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
    padding: 0;
}

.b24c-detail-row__value {
    font-size: var(--b24c-font-size-sm, 13px);
    color: var(--b24c-color-text, #1e293b);
    margin: 0;
    padding: 0;
    word-break: break-word;
}

/* Badge nuits dans la ligne Séjour */
.b24c-detail-nights {
    font-size: var(--b24c-font-size-xs, 12px);
    color: var(--b24c-color-text-muted, #64748b);
    font-weight: 500;
}

/* Badges statut */
.b24c-detail-status {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 12px;
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.b24c-detail-status--confirmed {
    background: #dcfce7;
    color: #16a34a;
}

.b24c-detail-status--pending {
    background: #fef9c3;
    color: #ca8a04;
}

.b24c-detail-status--blocked {
    background: #f1f5f9;
    color: #64748b;
}

/* Code monospace (référence OTA, ID Beds24) */
.b24c-detail-code {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Mono', monospace;
    font-size: 12px;
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--b24c-color-text, #1e293b);
}

/* --- Alerte push en erreur (workflow_status = error) ----------------------- */

.b24c-detail-panel__error-hint {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: var(--b24c-radius-sm, 5px);
    color: #c2410c;
    font-size: 12px;
    line-height: 1.4;
}

.b24c-detail-panel__push-pending-hint {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--b24c-radius-sm, 5px);
    color: #1d4ed8;
    font-size: 12px;
    line-height: 1.4;
}

.b24c-detail-panel__retry-pending-hint {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: var(--b24c-radius-sm, 5px);
    color: #c2410c;
    font-size: 12px;
    line-height: 1.4;
}

/* --- Bouton Relancer la synchronisation Beds24 ----------------------------- */

.b24c-modal__btn--retry {
    background: #f0f9ff;
    border: 1px solid #7dd3fc;
    border-radius: var(--b24c-radius-sm, 5px);
    color: #0369a1;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 6px 12px;
    transition: background 0.15s, border-color 0.15s;
}
.b24c-modal__btn--retry:hover:not(:disabled) {
    background: #e0f2fe;
    border-color: #38bdf8;
}
.b24c-modal__btn--retry:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Badges workflow sur les barres planning ------------------------------ */
/* Dot badge visible directement sur la barre sans ouvrir le détail.        */

.b24c-pms-bar { position: relative; }

.b24c-pms-bar--wf-push_pending::after,
.b24c-pms-bar--wf-retry_pending::after,
.b24c-pms-bar--wf-error::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
}

.b24c-pms-bar--wf-push_pending::after {
    background: #f97316;
    animation: b24c-wf-pulse 1.2s ease-in-out infinite;
}
.b24c-pms-bar--wf-retry_pending::after {
    background: #c2410c;
}
.b24c-pms-bar--wf-error::after {
    background: #dc2626;
}

@keyframes b24c-wf-pulse {
    0%,100% { opacity: 1; transform: scale(1);   }
    50%      { opacity: .4; transform: scale(.7); }
}

/* --- Section finances ------------------------------------------------------- */

.b24c-detail-finances {
    background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 100%);
    border: 1px solid #d1fae5;
    border-radius: var(--b24c-radius-sm, 5px);
    padding: 12px 14px;
}

.b24c-detail-finances__title {
    font-size: var(--b24c-font-size-xs, 12px);
    font-weight: 700;
    color: var(--b24c-color-text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 8px;
}

/*
 * DL finances : label à gauche (flexible), montant à droite (figé).
 * Override du grid-template-columns de .b24c-detail-row.
 */
.b24c-detail-dl--finances .b24c-detail-row {
    grid-template-columns: 1fr auto;
    padding: 5px 0;
}

.b24c-detail-dl--finances .b24c-detail-row__label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--b24c-font-size-sm, 13px);
    font-weight: 500;
}

.b24c-detail-dl--finances .b24c-detail-row__value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* Prix brut OTA (total entrant) */
.b24c-detail-row--total .b24c-detail-row__label {
    font-weight: 700;
    color: var(--b24c-color-text, #1e293b);
}
.b24c-detail-row--total .b24c-detail-row__value {
    font-weight: 700;
    color: var(--b24c-color-text, #1e293b);
}

/* Déductions (commission OTA, frais ménage) */
.b24c-detail-row--deduct .b24c-detail-row__label {
    color: var(--b24c-color-text-muted, #64748b);
    font-weight: 400;
    font-size: var(--b24c-font-size-xs, 12px);
}
.b24c-detail-row--deduct .b24c-detail-row__value {
    color: #dc2626;
    font-weight: 500;
}

/* Ligne de séparation avant le net */
.b24c-detail-finances__separator {
    height: 1px;
    background: #a7f3d0;
    margin: 6px 0;
}

/*
 * NET propriétaire — vedette de la section.
 * Montant en vert large et gras : ce que le proprio perçoit vraiment.
 */
.b24c-detail-row--net .b24c-detail-row__label {
    font-weight: 700;
    font-size: var(--b24c-font-size-sm, 13px);
    color: var(--b24c-color-text, #1e293b);
    text-transform: none;
    letter-spacing: 0;
}
.b24c-detail-row--net .b24c-detail-row__value {
    font-weight: 800;
    font-size: 16px;
    color: #16a34a;
    letter-spacing: -0.01em;
}

/* =============================================================================
   Panneau détail — Responsive
   ============================================================================= */

/* Petit mobile */
@media (max-width: 360px) {
    .b24c-detail-panel__header {
        padding: 12px;
    }
    .b24c-detail-panel__body {
        padding: 12px;
        gap: 12px;
    }
    .b24c-detail-row {
        grid-template-columns: 88px 1fr;
    }
}

/* Desktop (> 480px) */
@media (min-width: 480px) {
    .b24c-detail-panel--visible {
        margin-top: 24px;
    }
    .b24c-detail-panel__header {
        padding: 16px 20px;
    }
    .b24c-detail-panel__guest {
        font-size: var(--b24c-font-size-lg, 17px);
    }
    .b24c-detail-panel__body {
        padding: 16px 20px;
        gap: 16px;
    }
    .b24c-detail-row {
        grid-template-columns: 130px 1fr;
    }
    .b24c-detail-row--net .b24c-detail-row__value {
        font-size: 18px;
    }
}

/* =============================================================================
   PMS Planning — grille horizontale (jours × logements)

   Architecture :
     Axe X = jours du mois (colonnes)
     Axe Y = logements sélectionnés (lignes)
     Barres = positionnées en % dans la piste de chaque logement
     Label  = sticky à gauche (reste visible lors du scroll horizontal)

   Nomenclature :
     .b24c-pms              conteneur PMS (scroll horizontal)
     .b24c-pms-row          ligne (en-tête jours | logement)
     .b24c-pms-label        colonne gauche sticky (coin vide | nom logement)
     .b24c-pms-track        zone de réservations (position relative)
     .b24c-pms-day-col      colonne jour dans l'en-tête (position absolute)
     .b24c-pms-bg-col       colonne de fond dans les pistes (gridlines)
     .b24c-pms-bar          barre continue d'une réservation
   ============================================================================= */

/* ----- Overrides du conteneur existant ------------------------------------ */

/*
 * Le wrapper perd son padding : le PMS scroll jusqu'aux bords de la carte.
 * overflow: hidden clipe le scroll sur le border-radius de la carte.
 */
.b24c-planning__calendar-wrap {
    padding: 0;
    overflow: hidden;
}

/* Override de la règle @media(480px) qui remettait le padding à 16px */
@media (min-width: 480px) {
    .b24c-planning__calendar-wrap {
        padding: 0;
    }
}

/*
 * Le calendrier n'est plus un CSS-grid 7 colonnes.
 * Le PMS injecte sa propre structure.
 */
.b24c-planning__calendar {
    display: block;
}

/*
 * Pleine largeur : le planning utilise tout l'espace disponible.
 * (La valeur initiale de 680px était adaptée à l'ancienne grille mensuelle.)
 *
 * Sur Elementor : régler la page en "Pleine largeur" ou "Canvas" pour que
 * la colonne de contenu ne contraigne pas le planning.
 * Sur Divi / Avada / Gutenberg : vérifier que le bloc parent n'a pas
 * de max-width inférieur à 900px.
 *
 * Classe utilitaire disponible sur la page :
 *   .b24c-planning-page .b24c-planning { max-width: none; }
 * → À appliquer sur la <body> ou le wrapper Elementor si nécessaire.
 */
.b24c-planning {
    max-width: none;
    width: 100%;
}

/* ----- Conteneur PMS ------------------------------------------------------ */

/*
 * Variables CSS du PMS — modifiées par les breakpoints ci-dessous.
 *   --pms-label-w  : largeur de la colonne label logement
 *   --pms-day-min  : largeur minimale d'une colonne jour
 *   --pms-row-h    : hauteur d'une ligne logement
 *   --pms-head-h   : hauteur de la ligne en-tête jours
 */
.b24c-pms {
    --pms-label-w: 82px;
    --pms-day-min: 25px;
    --pms-row-h:   36px;
    --pms-head-h:  44px;

    /* min-width : label + 31 jours × largeur minimale */
    min-width: calc(var(--pms-label-w) + var(--pms-day-min) * 31);
    position: relative;
    background: var(--b24c-color-bg-section, #fff);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Scroll horizontal — appliqué sur l'élément #b24c-calendar */
.b24c-planning__calendar {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}

/* ----- Ligne (row) -------------------------------------------------------- */

.b24c-pms-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--b24c-color-border, #e2e8f0);
    min-height: var(--pms-row-h);
}

.b24c-pms-row:last-child {
    border-bottom: none;
}

/* ----- Label logement (colonne sticky gauche) ----------------------------- */

.b24c-pms-label {
    flex: 0 0 var(--pms-label-w);
    width: var(--pms-label-w);
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--b24c-color-bg-section, #fff);
    border-right: 2px solid var(--b24c-color-border, #e2e8f0);
    display: flex;
    align-items: center;
    padding: 0 7px;
    box-sizing: border-box;
    overflow: hidden;
    /* Séparation visuelle subtile entre le label et la piste */
    box-shadow: 2px 0 4px rgba(0,0,0,.04);
}

/* Coin haut-gauche (zone vide alignée avec les labels) */
.b24c-pms-label--corner {
    background: var(--b24c-color-neutral-bg, #f8fafc);
    height: var(--pms-head-h);
    align-self: auto;
}

.b24c-pms-label__text {
    font-size: 11px;
    font-weight: 700;
    /* Couleur du logement injectée par JS via --room-color */
    color: var(--room-color, var(--b24c-color-text, #1e293b));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

/* ----- Piste de réservations (zone relative pour les bars absolues) ------- */

.b24c-pms-track {
    flex: 1;
    position: relative;
    min-width: 0;
    overflow: visible; /* les barres peuvent légèrement dépasser verticalement */
}

/* Piste en-tête (contient les colonnes jours) */
.b24c-pms-track--head {
    height: var(--pms-head-h);
    background: var(--b24c-color-neutral-bg, #f8fafc);
}

/* ----- Colonnes de fond (gridlines + weekend + aujourd'hui) --------------- */

.b24c-pms-bg-col {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-right: 1px solid var(--b24c-color-border, #e2e8f0);
}

/* Weekend : léger fond différent */
.b24c-pms-bg-col--weekend {
    background: rgba(0, 0, 0, 0.022);
}

/* Aujourd'hui : tinte bleue discrète + bordure marquée */
.b24c-pms-bg-col--today {
    background: rgba(26, 82, 118, 0.055);
    border-right-color: rgba(26, 82, 118, 0.25);
}

/* ----- Colonnes jour (ligne en-tête) -------------------------------------- */

.b24c-pms-day-col {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 1px;
    box-sizing: border-box;
    border-right: 1px solid var(--b24c-color-border, #e2e8f0);
}

.b24c-pms-day-col--weekend {
    background: rgba(0, 0, 0, 0.022);
}

/* Numéro du jour */
.b24c-pms-day-num {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--b24c-color-text, #1e293b);
    line-height: 1;
}

/* Jour de semaine (lettre) */
.b24c-pms-day-dow {
    display: block;
    font-size: 8px;
    font-weight: 500;
    color: var(--b24c-color-text-muted, #64748b);
    text-transform: uppercase;
    line-height: 1;
}

/* Weekend : lettres plus discrètes */
.b24c-pms-day-col--weekend .b24c-pms-day-dow {
    color: var(--b24c-color-text-muted, #64748b);
    font-weight: 700;
}

/* Aujourd'hui : disque coloré sur le numéro */
.b24c-pms-day-col--today .b24c-pms-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--b24c-color-primary, #1a5276);
    color: #fff;
    font-weight: 800;
    font-size: 9px;
}

/* ----- Barres de réservation (.b24c-pms-bar) ------------------------------ */

/*
 * Position : absolute dans la piste.
 *   left  = (startDay - 1) / N × 100 %
 *   width = (occupiedDays) / N × 100 %
 * Le texte (nom + pax) est affiché UNE SEULE FOIS dans la barre.
 */
.b24c-pms-bar {
    --bar-bg: #94a3b8; /* fallback si JS absent */

    position: absolute;
    top: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 3px;
    background-color: var(--bar-bg);
    /*
     * Bordure blanche = séparation visuelle entre barres consécutives.
     * Crée un "gap" d'1px sans affecter les calculs de position %.
     */
    border: 1.5px solid var(--b24c-color-bg-section, #fff);
    cursor: pointer;
    z-index: 2;
    box-sizing: border-box;
    padding: 0 5px;
    min-width: 4px;
    transition:
        filter     var(--b24c-transition, .15s ease),
        box-shadow var(--b24c-transition, .15s ease);
}

.b24c-pms-bar:hover {
    filter: brightness(0.88);
    box-shadow: 0 2px 8px rgba(0,0,0,.22);
    z-index: 3;
}

/* Focus clavier : halo de couleur de la barre */
.b24c-pms-bar:focus {
    outline: none;
    box-shadow:
        0 0 0 2px var(--b24c-color-bg-section, #fff),
        0 0 0 4px var(--bar-bg);
    z-index: 3;
}

/* Texte de la barre */
.b24c-pms-bar__text {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    line-height: 1.2;
    pointer-events: none; /* clic passe à la barre parente */
    flex-shrink: 1;
}

.b24c-pms-bar__text--dark {
    color: var(--b24c-color-text, #1e293b);
}

/* ---- Statuts ---- */

/* Confirmé : par défaut (fond plein, couleur du logement) */

/* En attente : bordure tiretée, fond transparent */
.b24c-pms-bar--pending {
    opacity: 0.75;
    background-color: transparent;
    border-color: var(--bar-bg);
    border-width: 1.5px;
}

.b24c-pms-bar--pending .b24c-pms-bar__text {
    color: var(--bar-bg);
}

.b24c-pms-bar--dashed {
    background-image: repeating-linear-gradient(
        90deg,
        var(--bar-bg) 0,
        var(--bar-bg) 5px,
        transparent  5px,
        transparent  9px
    );
    background-color: transparent;
}

/* Bloqué : gris atténué */
.b24c-pms-bar--blocked {
    opacity: 0.55;
}

/* ---- Demandes locales P7 (statuts Beds24) ---- */

/* Devis (inquiry) : fond gris clair + hachures diagonales + bordure tiretée */
.b24c-pms-bar--inquiry {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(0,0,0,0.10) 5px,
        rgba(0,0,0,0.10) 10px
    );
    border: 1px dashed #64748b;
    opacity: 0.90;
    cursor: pointer;
}

/* Demande de réservation (request) : orange via inline style, curseur pointer */
.b24c-pms-bar--request {
    cursor: pointer;
}

/* Non confirmé (new) : couleur ambre via inline style, curseur pointer */
.b24c-pms-bar--new {
    cursor: pointer;
}

/* Blocage / travaux (black) : fond très sombre via inline style, curseur pointer */
.b24c-pms-bar--black {
    cursor: pointer;
    opacity: 0.90;
}

/* Réservation confirmée (confirmed) : couleur palette logement via inline style, curseur pointer */
.b24c-pms-bar--confirmed {
    cursor: pointer;
}

/* Annulée (cancelled) : atténuée, non éditable */
.b24c-pms-bar--cancelled {
    opacity: 0.35;
    cursor: default;
}

/* ---- Location longue durée (LLD) : couleur dédiée violette rayée ---- */
.b24c-pms-bar--lld {
    --lld-color: #7c3aed;
    background-color: var(--lld-color) !important;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.30) 0,
        rgba(255, 255, 255, 0.30) 6px,
        transparent 6px,
        transparent 12px
    ) !important;
    border: 1px solid #5b21b6 !important;
    opacity: 1 !important;
    cursor: pointer;
}
.b24c-pms-bar--lld .b24c-pms-bar__text {
    color: #fff !important;
}

/* ---- Sous-lignes par plaque (voitures) ---- */
.b24c-pms-row--plate .b24c-pms-label__text {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.92;
}
/* Empilement overbooking : sous-ligne supplémentaire signalée en rouge */
.b24c-pms-row--overflow .b24c-pms-label__text {
    color: #b91c1c;
    font-weight: 700;
}
.b24c-pms-row--overflow .b24c-pms-track {
    background: rgba(185, 28, 28, 0.04);
}

/* Badge séjours dans la liste de recherche client */
.b24c-modal__client-stays {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background: #2563eb;
    border-radius: 9999px;
    padding: 1px 7px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.b24c-modal__client-result-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem;
}

/* Barre continue depuis le mois précédent (pas de bord gauche arrondi) */
.b24c-pms-bar--clip-left {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Barre continue vers le mois suivant (pas de bord droit arrondi) */
.b24c-pms-bar--clip-right {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* =============================================================================
   PMS — Responsive
   ============================================================================= */

/* Petit mobile */
@media (max-width: 360px) {
    .b24c-pms {
        --pms-label-w: 68px;
        --pms-day-min: 22px;
        --pms-row-h:   32px;
        --pms-head-h:  38px;
    }
    .b24c-pms-label__text {
        font-size: 10px;
    }
    .b24c-pms-bar {
        top: 3px;
        bottom: 3px;
        padding: 0 3px;
    }
    .b24c-pms-bar__text {
        font-size: 9px;
    }
}

/* Tablette / grand mobile */
@media (min-width: 480px) {
    .b24c-pms {
        --pms-label-w: 110px;
        --pms-day-min: 29px;
        --pms-row-h:   40px;
        --pms-head-h:  50px;
    }
    .b24c-pms-label__text {
        font-size: 12px;
    }
    .b24c-pms-day-num {
        font-size: 11px;
    }
    .b24c-pms-day-dow {
        font-size: 9px;
    }
    .b24c-pms-day-col--today .b24c-pms-day-num {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }
    .b24c-pms-bar__text {
        font-size: 11px;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .b24c-pms {
        --pms-label-w: 130px;
        --pms-day-min: 32px;
        --pms-row-h:   44px;
        --pms-head-h:  54px;
    }
    .b24c-pms-label {
        padding: 0 10px;
    }
    .b24c-pms-label__text {
        font-size: 13px;
    }
    .b24c-pms-bar {
        top: 5px;
        bottom: 5px;
        padding: 0 6px;
    }
    .b24c-pms-bar__text {
        font-size: 12px;
    }
}

/* =============================================================================
   Sélecteur de vue (Mois / Trimestre / Année)
   ============================================================================= */

.b24c-planning__view-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    border-radius: 10px;
    padding: 4px;
    width: fit-content;
    max-width: 100%;
}

.b24c-planning__view-btn {
    padding: 6px 16px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--b24c-color-text-muted, #64748b);
    font-size: var(--b24c-font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background  var(--b24c-transition, .15s ease),
        color       var(--b24c-transition, .15s ease),
        box-shadow  var(--b24c-transition, .15s ease);
}

.b24c-planning__view-btn:hover {
    color: var(--b24c-color-text, #1e293b);
    background: rgba(255,255,255,.6);
}

.b24c-planning__view-btn--active {
    background:   #dc2626;
    color:        #fff;
    border-color: #b91c1c;
    box-shadow:   0 2px 8px rgba(185, 28, 28, .30);
}

.b24c-planning__view-btn--active:hover {
    background:   #b91c1c;
    color:        #fff;
}

.b24c-planning__view-btn:focus-visible {
    outline: 2px solid var(--b24c-color-primary, #1a5276);
    outline-offset: 1px;
}

/* =============================================================================
   Vue Trimestre — 3 grilles PMS empilées
   ============================================================================= */

.b24c-quarter {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.b24c-quarter__month {
    /* Chaque mois est indépendant : son propre titre + grille */
}

.b24c-quarter__month-title {
    font-size: var(--b24c-font-size-base, 15px);
    font-weight: 700;
    color: var(--b24c-color-text, #1e293b);
    margin: 0 0 10px;
    padding: 0;
    letter-spacing: -0.01em;
}

/*
 * Chaque grille PMS dans le trimestre a son propre scroll horizontal.
 * Évite que les 3 grilles partagent un scroll commun.
 */
.b24c-quarter__pms-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

@media (min-width: 480px) {
    .b24c-quarter {
        gap: 36px;
    }
    .b24c-quarter__month-title {
        font-size: var(--b24c-font-size-lg, 17px);
    }
}

/* =============================================================================
   Vue Année — zone conteneur
   ============================================================================= */

/*
 * La carte de la vue année ne scroll pas horizontalement :
 * le tableau heatmap s'adapte en interne.
 */
.b24c-planning__calendar-wrap--year {
    overflow: visible;
    padding: 12px;
}

@media (min-width: 480px) {
    .b24c-planning__calendar-wrap--year {
        padding: 16px 20px;
    }
}

/* Bouton "Voir l'année détaillée" */
.b24c-year-actions {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

.b24c-planning__detail-year-btn {
    padding: 8px 20px;
    border: 1.5px solid var(--b24c-color-primary, #1a5276);
    border-radius: 20px;
    background: transparent;
    color: var(--b24c-color-primary, #1a5276);
    font-size: var(--b24c-font-size-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    transition:
        background  var(--b24c-transition, .15s ease),
        color       var(--b24c-transition, .15s ease);
}

.b24c-planning__detail-year-btn:hover:not(:disabled) {
    background: var(--b24c-color-primary, #1a5276);
    color: #fff;
}

.b24c-planning__detail-year-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Bloc de l'année détaillée (12 grilles empilées) */
.b24c-year-detail {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media (min-width: 480px) {
    .b24c-year-detail {
        gap: 36px;
    }
}

/* =============================================================================
   Heatmap annuelle (.b24c-heatmap)

   Tableau 12 colonnes × N lignes.
   La couleur de chaque cellule est injectée en style inline par JS
   (interpolation blanc → couleur du logement selon taux d'occupation).
   Clic sur une cellule → zoom vers la vue mois.
   ============================================================================= */

.b24c-year-heatmap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.b24c-heatmap {
    width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
    table-layout: fixed;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Coin supérieur gauche (vide) */
.b24c-heatmap__corner {
    width: 90px;
    min-width: 72px;
    padding: 4px;
}

/* En-têtes mois */
.b24c-heatmap__month-head {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--b24c-color-text-muted, #64748b);
    padding: 6px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Label logement (colonne gauche) */
.b24c-heatmap__room-label {
    text-align: left;
    padding: 5px 10px 5px 0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    /* color injecté par JS via style.color */
}

/* Cellule mois */
.b24c-heatmap__cell {
    text-align: center;
    padding: 8px 3px;
    border-radius: 5px;
    cursor: pointer;
    transition:
        transform    0.12s ease,
        box-shadow   0.12s ease;
    position: relative;
    /* background-color et color injectés par JS */
}

.b24c-heatmap__cell:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    z-index: 2;
}

.b24c-heatmap__cell:focus-visible {
    outline: 2px solid var(--b24c-color-primary, #1a5276);
    outline-offset: 2px;
}

/* Texte dans la cellule (pourcentage) */
.b24c-heatmap__cell-text {
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    /* color héritée de la cellule (injectée par JS) */
    pointer-events: none;
}

@media (min-width: 480px) {
    .b24c-heatmap__corner {
        width: 120px;
    }
    .b24c-heatmap__room-label {
        max-width: 120px;
        font-size: 12px;
    }
    .b24c-heatmap__cell {
        padding: 10px 4px;
    }
    .b24c-heatmap__cell-text {
        font-size: 12px;
    }
    .b24c-heatmap {
        border-spacing: 4px;
    }
}

@media (min-width: 768px) {
    .b24c-heatmap__corner {
        width: 140px;
    }
    .b24c-heatmap__room-label {
        max-width: 140px;
        font-size: 13px;
    }
    .b24c-heatmap__cell {
        padding: 12px 6px;
    }
    .b24c-heatmap__cell-text {
        font-size: 13px;
    }
}

/* =============================================================================
   Vue Semaine — indicateur de mois dans l'en-tête des colonnes jour
   Affiché au 1er du mois ou lors d'un changement de mois en cours de semaine.
   ============================================================================= */

.b24c-pms-day-month {
    display: block;
    font-size: 7px;
    font-weight: 700;
    color: var(--b24c-color-primary, #1a5276);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-top: 1px;
}

@media (min-width: 480px) {
    .b24c-pms-day-month { font-size: 8px; }
}

/* =============================================================================
   Bouton admin — vider le cache planning
   ============================================================================= */

.b24c-planning__flush-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin-bottom: 8px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background   var(--b24c-transition, .15s ease),
        color        var(--b24c-transition, .15s ease),
        border-color var(--b24c-transition, .15s ease);
}

.b24c-planning__flush-btn:hover:not(:disabled) {
    background:   #fee2e2;
    color:        #dc2626;
    border-color: #dc2626;
}

.b24c-planning__flush-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.b24c-planning__refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    margin-bottom: 8px;
    margin-left: 6px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background   var(--b24c-transition, .15s ease),
        color        var(--b24c-transition, .15s ease),
        border-color var(--b24c-transition, .15s ease);
}

.b24c-planning__refresh-btn:hover:not(:disabled) {
    background:   #dbeafe;
    color:        #1d4ed8;
    border-color: #1d4ed8;
}

.b24c-planning__refresh-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* =============================================================================
   Navigation rapide Trimestre — barre T1/T2/T3/T4 + navigation année
   ============================================================================= */

.b24c-quarter-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--b24c-color-border, #e2e8f0);
}

/* ---- Ligne année : ‹ 2025  2026  2027 › ---- */

.b24c-quarter-nav__year-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.b24c-quarter-nav__year-label {
    font-size:     13px;
    font-weight:   700;
    color:         #fff;
    background:    #dc2626;
    border:        1.5px solid #b91c1c;
    border-radius: 20px;
    padding:       3px 14px;
    min-width:     42px;
    text-align:    center;
    line-height:   1.5;
}

.b24c-quarter-nav__year-btn {
    padding: 3px 12px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background   var(--b24c-transition, .15s ease),
        color        var(--b24c-transition, .15s ease),
        border-color var(--b24c-transition, .15s ease);
}

.b24c-quarter-nav__year-btn:hover {
    background:   var(--b24c-color-primary-light, #eff6ff);
    color:        var(--b24c-color-primary, #1a5276);
    border-color: var(--b24c-color-primary, #1a5276);
}

/* ---- Ligne boutons T1–T4 ---- */

.b24c-quarter-nav__q-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.b24c-quarter-nav__q-btn {
    flex: 1 1 0;
    min-width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--b24c-color-border, #e2e8f0);
    border-radius: var(--b24c-radius-sm, 5px);
    background: var(--b24c-color-neutral-bg, #f1f5f9);
    color: var(--b24c-color-text-muted, #64748b);
    cursor: pointer;
    text-align: center;
    transition:
        background   var(--b24c-transition, .15s ease),
        color        var(--b24c-transition, .15s ease),
        border-color var(--b24c-transition, .15s ease);
}

.b24c-quarter-nav__q-btn:hover:not(.b24c-quarter-nav__q-btn--active) {
    background:   var(--b24c-color-primary-light, #eff6ff);
    color:        var(--b24c-color-primary, #1a5276);
    border-color: var(--b24c-color-primary, #1a5276);
}

.b24c-quarter-nav__q-btn--active {
    background:   #dc2626;
    color:        #fff;
    border-color: #b91c1c;
    box-shadow:   0 2px 8px rgba(185, 28, 28, .30);
    cursor:       default;
}

.b24c-quarter-nav__q-btn--active:hover,
.b24c-quarter-nav__q-btn--active:focus {
    background:   #dc2626; /* identique au repos : cursor:default indique non-clickable */
    outline:      none;
}

.b24c-quarter-nav__q-label {
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.b24c-quarter-nav__q-months {
    font-size: 9px;
    font-weight: 500;
    opacity: .85;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 480px) {
    .b24c-quarter-nav__q-months { font-size: 10px; }
    .b24c-quarter-nav__q-btn    { min-width: 90px; }
}

/* =============================================================================
   Bannière sync hint — pending_backfill / bootstrapping / error
   Affichée entre la nav et la grille PMS lorsque sync_hint ≠ null.
   ============================================================================= */

/*
 * Keyframe commun pour l'animation pulse (utilisée par le spinner bannière
 * et les badges de logements en cours de sync).
 */
@keyframes b24c-pulse {
    0%,100% { opacity: 1; }
    50%      { opacity: .45; }
}

/* ---- Bannière de base ---- */
.b24c-sync-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    margin-bottom: 10px;
    border-radius: var(--b24c-radius, 8px);
    font-size: var(--b24c-font-size-sm, 13px);
    font-weight: 500;
    line-height: 1.4;
    border: 1px solid transparent;
}

/* Partie gauche (spinner ou icône + texte) */
.b24c-sync-banner__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Texte */
.b24c-sync-banner__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icône statique (error) */
.b24c-sync-banner__icon {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

/* Spinner animé (pending_backfill / bootstrapping) */
.b24c-sync-banner__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: b24c-spin 0.75s linear infinite;
    flex-shrink: 0;
    opacity: .7;
}

/* Bouton "Actualiser" */
.b24c-sync-banner__refresh-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    border: 1px solid currentColor;
    border-radius: var(--b24c-radius-sm, 5px);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    opacity: .85;
    transition: opacity var(--b24c-transition, .15s ease);
    white-space: nowrap;
}

.b24c-sync-banner__refresh-btn:hover:not(:disabled) {
    opacity: 1;
}

.b24c-sync-banner__refresh-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ---- Variante pending_backfill — bleu discret ---- */
.b24c-sync-banner--pending_backfill {
    background: var(--b24c-color-primary-light, #eff6ff);
    border-color: rgba(26, 82, 118, .25);
    color: var(--b24c-color-primary, #1a5276);
    animation: b24c-pulse 2.4s ease-in-out infinite;
}

/* ---- Variante bootstrapping — bleu légèrement plus intense ---- */
.b24c-sync-banner--bootstrapping {
    background: #dbeafe;
    border-color: rgba(37, 99, 235, .30);
    color: #1d4ed8;
    animation: b24c-pulse 2s ease-in-out infinite;
}

/* ---- Variante error — rouge / orange ---- */
.b24c-sync-banner--error {
    background: var(--b24c-color-error-bg, #fee2e2);
    border-color: rgba(220, 38, 38, .30);
    color: var(--b24c-color-error, #dc2626);
}

/* =============================================================================
   Badge de sync sur les boutons logement dans le sélecteur
   ============================================================================= */

/*
 * Petit point coloré affiché à droite du nom du logement dans le sélecteur
 * quand sync_hint est 'bootstrapping', 'pending_backfill' ou 'error'.
 */
.b24c-room-sync-badge {
    display: inline-block;
    width:  7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 4px;
    vertical-align: middle;
}

.b24c-room-sync-badge--bootstrapping,
.b24c-room-sync-badge--pending_backfill {
    background: #2563eb;
    animation: b24c-pulse 1.6s ease-in-out infinite;
}

.b24c-room-sync-badge--error {
    background: #dc2626;
}

/* Le libellé dans le bouton logement (room-btn) est maintenant dans un <span>
   enfant — on aligne les deux éléments (label + badge) en flex */
.b24c-planning__room-btn {
    /* déjà inline-flex ou similaire dans les règles précédentes — on s'assure
       que le badge s'aligne correctement */
    display: inline-flex;
    align-items: center;
    gap: 0;          /* gap géré via margin-left sur le badge */
}

/* =============================================================================
   Overlay hachures sur les pistes PMS non synchronisées
   ============================================================================= */

/*
 * Affiché sur la piste d'une room dont le mois n'est pas encore couvert.
 * Z-index: 1 → sous les barres (z-index: 2) mais visible sur le fond de grille.
 * pointer-events: none → les clics traversent vers les barres.
 *
 * Le motif diagonal léger signale visuellement "données incomplètes" sans
 * masquer les réservations déjà connues (qui s'affichent par-dessus).
 */
.b24c-pms-track__sync-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent          5px,
        rgba(100,116,139,.09) 5px,
        rgba(100,116,139,.09) 9px
    );
    pointer-events: none;
    z-index: 1;
}

/* =============================================================================
   Indicateur de sync sur le label de la room dans la grille PMS
   ============================================================================= */

/*
 * Petit point pulsant affiché à droite du nom de la room dans la grille PMS
 * quand le mois est en cours de synchronisation historique.
 */
.b24c-pms-label__sync-dot {
    display: inline-block;
    width:  6px;
    height: 6px;
    border-radius: 50%;
    background: #2563eb;
    margin-left: 5px;
    flex-shrink: 0;
    animation: b24c-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
}

/* =============================================================================
   Bannière en cours d'actualisation automatique
   ============================================================================= */

/*
 * Appliqué par JS juste avant le rechargement automatique (auto-poll 30 s).
 * Atténue visuellement la bannière pendant la latence réseau.
 */
.b24c-sync-banner--refreshing {
    opacity: .65;
    transition: opacity .25s ease;
}

/* =============================================================================
   P7 — Barre d'outils "Nouvelle demande de réservation"
   ============================================================================= */

#b24c-booking-request-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}

.b24c-planning__new-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1.1rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    background: #16a34a;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.b24c-planning__new-request-btn:hover {
    background: #15803d;
    box-shadow: 0 2px 8px rgba(22,163,74,.35);
}

.b24c-planning__new-request-btn:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 3px;
}

/* Message de confirmation inline */
.b24c-modal__confirmation {
    margin: 0;
    padding: 0.4rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: #166534;
    background: #dcfce7;
    border: 1px solid #86efac;
    border-radius: 20px;
    animation: b24c-fade-in 0.2s ease;
}

/* =============================================================================
   P7 — Panneau latéral droit (drawer)
   Le planning reste entièrement visible et scrollable derrière le panneau.
   ============================================================================= */

@keyframes b24c-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes b24c-slide-in-right {
    from { transform: translateX(100%); opacity: 0.6; }
    to   { transform: translateX(0);   opacity: 1; }
}

/* Conteneur drawer — occupe uniquement le côté droit, pas de fond sombre.
   SCOPÉ à #b24c-br-modal : la classe .b24c-modal est PARTAGÉE avec la modale doc de
   owner-portal (#b24c-doc-modal). Sans ce scope, `display:block` écrasait le
   `display:none` de owner-portal.css → la modale doc s'affichait en overlay sur tout
   l'extranet. Ne jamais styler `.b24c-modal` nu ici. */
#b24c-br-modal.b24c-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 100vw;
    z-index: 100000;
    display: block; /* Explicite : évite de dépendre du défaut UA lors du retrait du style inline */
    /* Pas de backdrop : le planning reste visible */
}

/* Pas de backdrop — supprimé */
.b24c-modal__backdrop { display: none; }

/* Panneau drawer */
.b24c-modal__dialog {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: -6px 0 32px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* backwards : applique l'état "from" (translateX 100%) avant le début de l'animation */
    animation: b24c-slide-in-right 0.22s ease backwards;
}

/* body.b24c-modal-open : ne pas bloquer le scroll — planning doit rester scrollable */
body.b24c-modal-open {
    /* intentionnellement vide */
}

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

.b24c-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem 0.9rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.b24c-modal__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

.b24c-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.b24c-modal__close:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ---- Corps ---- */

.b24c-modal__body {
    padding: 1.1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* ---- Pied ---- */

.b24c-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 0.9rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #f8fafc;
}

/* =============================================================================
   P7 — Formulaire demande : sections, lignes, champs
   ============================================================================= */

/* Sections : div + h4 (évite les problèmes de rendu fieldset/legend cross-browser) */

.b24c-modal__section {
    margin: 0 0 1.1rem;
}

.b24c-modal__section + .b24c-modal__section {
    padding-top: 1.1rem;
    border-top: 1px solid #f1f5f9;
}

/* Titre de section */
.b24c-modal__section-title {
    display: block;
    margin: 0 0 0.7rem;
    padding-bottom: 0.3rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
}

/* Radio boutons type de demande */
.b24c-modal__row--radios {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.b24c-modal__radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
}

.b24c-modal__radio-label input[type="radio"] {
    width: auto;
    margin: 0;
    flex-shrink: 0;
}

/* Texte indicatif (hint) */
.b24c-modal__hint {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0.3rem 0 0;
    line-height: 1.45;
    padding: 0.3rem 0.6rem;
    background: #f8fafc;
    border-left: 3px solid #cbd5e1;
    border-radius: 0 4px 4px 0;
}

/* .b24c-modal__client-warning supprimé — remplacé par .b24c-modal__client-confirm (recherche unifiée) */

.b24c-modal__row {
    margin-bottom: 0.65rem;
}

.b24c-modal__row label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.25rem;
}

.b24c-modal__row label span[aria-hidden] {
    color: #ef4444;
    margin-left: 0.1em;
}

.b24c-modal__row input,
.b24c-modal__row select,
.b24c-modal__row textarea {
    width: 100%;
    padding: 0.42rem 0.6rem;
    font-size: 0.855rem;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}

.b24c-modal__row input:focus,
.b24c-modal__row select:focus,
.b24c-modal__row textarea:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22,163,74,.15);
}

.b24c-modal__row textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.b24c-modal__row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.b24c-modal__row--split > div { margin-bottom: 0; }

.b24c-modal__row--triple {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 520px) {
    .b24c-modal__row--split,
    .b24c-modal__row--triple { grid-template-columns: 1fr; }
    /* En mobile, le drawer occupe toute la largeur */
    #b24c-br-modal.b24c-modal { width: 100vw; }
}

/* ---- Indicateurs inline ---- */

.b24c-modal__nights {
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.25em;
    margin: 0.2rem 0 0.4rem;
}

.b24c-modal__nights--error { color: #dc2626; }
.b24c-modal__nights--ok    { color: #2563eb; }

.b24c-modal__availability {
    font-size: 0.8rem;
    font-weight: 600;
    min-height: 1.25em;
    padding: 0.28rem 0.55rem;
    border-radius: 4px;
    margin-bottom: 0.2rem;
}

.b24c-modal__availability--checking  { color: #92400e; background: #fef3c7; }
.b24c-modal__availability--ok        { color: #166534; background: #dcfce7; }
.b24c-modal__availability--conflict  { color: #991b1b; background: #fee2e2; }
.b24c-modal__availability--error     { color: #78350f; background: #fef3c7; }

/* ---- Recherche client — champ unique + dropdown résultats ---- */

.b24c-modal__client-search-wrap {
    position: relative;
}

.b24c-modal__client-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    max-height: 220px;
    overflow-y: auto;
}

.b24c-modal__client-result-item {
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    line-height: 1.4;
    color: #1e293b;
}

.b24c-modal__client-result-item:last-child { border-bottom: none; }

.b24c-modal__client-result-item:hover,
.b24c-modal__client-result-item:focus {
    background: #f0fdf4;
    outline: none;
}

.b24c-modal__client-result-dates {
    color: #64748b;
    font-size: 0.75rem;
}

/* Bannière de confirmation client */
.b24c-modal__client-confirm {
    font-size: 0.82rem;
    color: #0c4a6e;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 5px;
    padding: 0.5rem 0.8rem;
    margin: 0.3rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    line-height: 1.45;
}

/* Boutons inline dans la confirmation */
.b24c-modal__btn-inline {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    flex-shrink: 0;
}

.b24c-modal__btn-inline--ok {
    color: #fff;
    background: #16a34a;
}

.b24c-modal__btn-inline--ok:hover { background: #15803d; }

.b24c-modal__btn-inline--no {
    color: #374151;
    background: #e5e7eb;
}

.b24c-modal__btn-inline--no:hover { background: #d1d5db; }

/* Options de logement indisponibles dans le sélecteur */
.b24c-modal__room-option--unavail {
    color: #94a3b8;
    font-style: italic;
}

/* ---- Erreur formulaire ---- */

.b24c-modal__form-error {
    font-size: 0.82rem;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fca5a5;
    border-radius: 5px;
    padding: 0.55rem 0.85rem;
    margin-top: 0.65rem;
    line-height: 1.55;
}

.b24c-modal__form-error span { display: block; }

/* ---- Boutons du pied ---- */

.b24c-modal__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.1rem;
    font-size: 0.855rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    font-family: inherit;
}

.b24c-modal__btn:disabled { opacity: 0.55; cursor: not-allowed; }

.b24c-modal__btn--primary {
    color: #fff;
    background: #16a34a;
}

.b24c-modal__btn--primary:hover:not(:disabled) { background: #15803d; }

.b24c-modal__btn--secondary {
    color: #374151;
    background: #e5e7eb;
}

.b24c-modal__btn--secondary:hover:not(:disabled) { background: #d1d5db; }