/* =============================================================================
   Gantt view — [events_gantt]
   ============================================================================= */

/* Variables locales */
.gantt-wrapper {
    --gantt-label-width: 210px;
    --gantt-slot-width: 90px;       /* largeur d'un slot actif (30 min) */
    --gantt-slot-inactive: 22px;    /* largeur d'un slot sans événement */
    --gantt-row-height: 60px;
    --gantt-bg: #173557;
    --gantt-bg-alt: #1d3e63;
    --gantt-cat-header-bg: #0e253f; /* séparateur de catégorie (plus foncé que les lignes) */
    --gantt-border: rgba(255, 255, 255, 0.07);
    --gantt-header-bg: #102a47;
    --gantt-text: #c8d8e8;
    --gantt-text-muted: #8ec3ff;
    --gantt-overlay: rgba(0, 0, 0, 0.6);
    --gantt-radius: 8px;
    --gantt-bar-height: 44px;
    font-family: inherit;
    position: relative;
}

/* ---- Scroll wrapper ---- */
.gantt-scroll-container {
    overflow-x: auto;
    overflow-y: visible;
    cursor: grab;
    user-select: none;
    scrollbar-color: var(--astro-jaune, #fba818) rgba(255,255,255,0.08);
    scrollbar-width: thin;
    border-radius: var(--gantt-radius);
    border: 1px solid var(--gantt-border);
}

.gantt-scroll-container::-webkit-scrollbar { height: 6px; }
.gantt-scroll-container::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
.gantt-scroll-container::-webkit-scrollbar-thumb {
    background: var(--astro-jaune, #fba818);
    border-radius: 3px;
}
.gantt-scroll-container.is-dragging { cursor: grabbing; }

/* ---- Accordéon (repli via bouton externe .gantt-collapse-toggle) ---- */
.gantt-wrapper.is-collapsed .gantt-scroll-container {
    max-height: 0;
    overflow: hidden;
    border-width: 0;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, border-width 0.35s ease;
}
.gantt-wrapper .gantt-scroll-container {
    max-height: 4000px;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.gantt-wrapper.is-collapsed .gantt-theme-toggle {
    display: none;
}

/* Bouton de thème interne masqué : on utilise désormais un bouton externe
   .gantt-theme-toggle-ext placé librement dans la page. On cible uniquement
   le conteneur injecté DANS le wrapper, pas le bouton externe. */
.gantt-wrapper > .gantt-theme-toggle {
    display: none;
}

/* ---- Grille principale ---- */
.gantt-grid {
    display: grid;
    /* grid-template-columns défini inline par PHP */
    width: max-content;
    min-width: 100%;
    background: var(--gantt-bg);
    color: var(--gantt-text);
}

/* ---- Cellules d'en-tête ---- */
.gantt-header-cell {
    background: var(--gantt-header-bg);
    color: var(--gantt-text-muted);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 4px;
    border-bottom: 1px solid var(--gantt-border);
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gantt-header-cell.gantt-hour-cell,
.gantt-header-cell.gantt-subheader {
    padding: 4px 4px;
}

.gantt-header-cell.gantt-label-cell {
    z-index: 3;
    left: 0;
    justify-content: flex-start;
    padding-left: 12px;
}

/* Libellé colonne titre : version courte réservée au mobile */
.gantt-corner-short { display: none; }

.gantt-hour-cell {
    border-left: 1px solid var(--gantt-border);
    /* Caler le label sur le trait de début d'heure (et non au centre des 2 demi-cases)
       pour lever l'ambiguïté visuelle : "15H" désigne 15h00, pas une zone 15h–16h. */
    justify-content: flex-start;
    padding-left: 8px;
}

/* ---- En-tête niveau 1 : label du jour ---- */
.gantt-day-label {
    border-left: 2px solid var(--astro-jaune, #fba818);
    color: var(--astro-jaune, #fba818);
    font-size: 1em;
}

/* ---- Séparateur de catégorie (bande pleine largeur) ----
   Fond distinct des lignes events (et de leur variante --alt) pour ressortir. */
.gantt-cat-header {
    display: flex;
    align-items: center;
    min-height: 0;
    background: var(--gantt-cat-header-bg);
    border-right: none; /* annule le border-right de .gantt-label-cell sur le libellé */
    border-bottom: 1px solid var(--gantt-border);
}

/* Libellé : occupe la colonne label sticky (reste collé à gauche au scroll) */
.gantt-label-cell.gantt-cat-header-label {
    padding: 6px 12px;
    background: var(--gantt-cat-header-bg);
    color: var(--astro-jaune, #fba818);
    font-size: 0.82em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Bande de fond à droite du libellé (fond continu avec le libellé, sans trait de séparation) */
.gantt-cat-header-fill {
    border-left: 2px solid rgba(251, 168, 24, 0.25);
    border-bottom: 1px solid var(--gantt-border);
}

/* ---- Colonne gauche sticky ---- */
.gantt-label-cell {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--gantt-bg);
    border-right: 1px solid var(--gantt-border);
    border-bottom: 1px solid var(--gantt-border);
}

.gantt-event-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 8px;
    min-height: var(--gantt-row-height);
    grid-column: 1;
}

.gantt-event-label--alt {
    background: var(--gantt-bg-alt);
}

.gantt-label-thumb {
    width: 48px;
    height: 44px;
    object-fit: cover;
    border-radius: 5px;
    flex-shrink: 0;
}

.gantt-label-title {
    font-size: 0.78em;
    font-weight: 600;
    color: var(--gantt-text);
    line-height: 1.3;
    text-decoration: none;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gantt-label-title:hover {
    color: #fff;
    text-decoration: underline;
}

/* ---- Cellules de fond de ligne (une par slot) ---- */
.gantt-row-bg {
    min-height: var(--gantt-row-height);
    border-bottom: 1px solid var(--gantt-border);
    border-left: 1px solid var(--gantt-border);
    background: var(--gantt-bg);
}

.gantt-row-bg--alt {
    background: var(--gantt-bg-alt);
}

.gantt-row-bg.gantt-day-boundary {
    border-left: 2px solid rgba(251, 168, 24, 0.25);
}

.gantt-hour-cell.gantt-day-boundary {
    border-left: 2px solid var(--astro-jaune, #fba818);
}

/* ---- Barre Gantt ---- */
.gantt-bar {
    /* positionnement par grid-column inline */
    position: relative;
    align-self: center;
    height: var(--gantt-bar-height);
    min-width: 6px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgb(255 255 255 / 45%);
    background-color: var(--cat-color, #183557);
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
    z-index: 1;
    margin: 0 2px; /* léger retrait pour ne pas coller aux bords de slot */
}

.gantt-bar:hover {
    filter: brightness(1.15);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    z-index: 3;
}

.gantt-bar-thumb {
    height: 100%;
    width: 24%;
    height: 100%!important;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 5px 0 0 5px;
}

.gantt-bar-inner {
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    overflow: hidden;
    min-width: 0;
    line-height: 1.2;
}

.gantt-bar-title {
    font-size: 0.75em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-bar-time {
    font-size: 0.65em;
    opacity: 0.75;
    white-space: nowrap;
}

/* Badge places restantes / complet — haut-droite de la barre.
   Couleurs/icônes/forme héritées de .event-gauge (events-filter.css) ;
   ici on ne fait que le positionner. */
.gantt-bar-gauge {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 3px 4px;
    z-index: 2;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Barre sans heure de fin calculée (fallback 1h) */
.gantt-bar[data-fallback-duration] {
    opacity: 0.75;
    border-right: 3px dashed rgba(255, 255, 255, 0.4);
}

/* ---- Message vide ---- */
.gantt-empty {
    grid-column: 1 / -1;
    padding: 2.5em 1em;
    text-align: center;
    color: var(--astro-rose, #d45195);
    font-style: italic;
}

/* =============================================================================
   Thème clair — .gantt-light
   ============================================================================= */

.gantt-wrapper.gantt-light {
    --gantt-bg: #eef0fa;
    --gantt-bg-alt: #e6e9f6;
    --gantt-cat-header-bg: #d6daed; /* séparateur de catégorie (plus marqué que les lignes) */
    --gantt-border: rgba(23, 53, 87, 0.15);
    --gantt-header-bg: #dcddef;
    --gantt-text: #173557;
    --gantt-text-muted: #5a6e88;
    --gantt-overlay: rgba(23, 53, 87, 0.45);
}

/* Toggle button */
.gantt-theme-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.gantt-theme-toggle button {
    background: var(--gantt-header-bg, #102a47);
    color: var(--gantt-text-muted, #6a88a4);
    border: 1px solid var(--gantt-border, rgba(255,255,255,0.07));
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 0.78em;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.gantt-theme-toggle button:hover {
    color: var(--gantt-text, #c8d8e8);
}

/* Scrollbar clair */
.gantt-light .gantt-scroll-container {
    scrollbar-color: var(--astro-jaune, #fba818) rgba(0, 0, 0, 0.06);
}

.gantt-light .gantt-scroll-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

/* En-tête clair */
.gantt-light .gantt-header-cell {
    background: var(--gantt-header-bg);
}

/* Day label — garder le jaune mais assombrir un peu pour lisibilité */
.gantt-light .gantt-day-label {
    color: var(--astro-rose);
    border-left-color: var(--astro-rose);
}

.gantt-light .gantt-flyout a.event-book:hover {
    background: transparent;
    color: var(--astro-bleu);
    border-color: var(--astro-bleu);
}

/* Colonne sticky claire */
.gantt-light .gantt-label-cell {
    background: var(--gantt-bg);
}

.gantt-light .gantt-cat-header-label {
    background: var(--gantt-cat-header-bg);
    color: var(--astro-rose);
}

.gantt-light .gantt-cat-header-fill {
    border-left-color: #cc51974d;
}

.gantt-light .gantt-event-label--alt {
    background: var(--gantt-bg-alt);
}

/* Fond lignes alternes */
.gantt-light .gantt-row-bg--alt {
    background: var(--gantt-bg-alt);
}

/* Day boundary plus doux */
.gantt-light .gantt-row-bg.gantt-day-boundary {
    border-left-color: #cc51974d;
}

.gantt-light .gantt-hour-cell.gantt-day-boundary {
    border-left-color: var(--astro-rose);
}

/* Barres Gantt — texte sombre sur fond clair de catégorie */
.gantt-light .gantt-bar {
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    filter: saturate(0.85) brightness(1.1);
}

.gantt-light .gantt-bar:hover {
    filter: saturate(0.85) brightness(1.25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Fallback duration bar */
.gantt-light .gantt-bar[data-fallback-duration] {
    border-right-color: rgba(0, 0, 0, 0.25);
}

/* Label title hover */
.gantt-light .gantt-label-title:hover {
    color: #000;
}

/* Message vide */
.gantt-light .gantt-empty {
    color: var(--astro-rose, #c03a7a);
}

/* ---- TEST : visuel pleine largeur, titre en overlay ---- */
.gantt-bar--visual-only {
    position: relative;
}
.gantt-bar--visual-only .gantt-bar-thumb {
    width: 100%;
    border-radius: 6px;
    flex-shrink: 0;
}
.gantt-bar--visual-only .gantt-bar-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 7px 5px 3px;
    background:
        linear-gradient(#00000000, color-mix(in srgb, var(--cat-color, #000000) 50%, #00000000)), 
        linear-gradient(transparent 10%, rgb(0 0 0));
    border-radius: 0 0 6px 6px;
}
.gantt-bar--visual-only .gantt-bar-title {
    font-size: 0.62em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}
.gantt-bar--visual-only .gantt-bar-time { display: none; }

/* ---- Mobile ---- */
@media (max-width: 767px) {
    .gantt-wrapper {
        --gantt-label-width: 99px;
        --gantt-slot-width: 46px;
        --gantt-slot-inactive: 12px;
        --gantt-row-height: 44px;
        --gantt-bar-height: 36px;
    }

    .gantt-bar-thumb { display: none; }
    .gantt-bar--visual-only .gantt-bar-thumb { display: block; }
    .gantt-label-thumb { display: none; }
    .gantt-label-title { font-size: 0.72em; -webkit-line-clamp: 2; }
    .gantt-bar-time { display: none; }

    /* Heures compressées très étroites sur mobile : éviter que le label ne morde
       sur la cellule voisine. Padding réduit + overflow masqué. */
    .gantt-hour-cell {
        padding-left: 4px;
        overflow: hidden;
    }

    /* Colonne titre étroite : le libellé de catégorie déborde sur la barre
       de séparation → on retire les bordures des séparateurs sur mobile.
       (label : border-right de .gantt-label-cell ; fill : border-left rose/jaune) */
    .gantt-label-cell.gantt-cat-header-label {
        border-right: none;
    }
    .gantt-cat-header-fill {
        border-left: none;
    }

    /* Date sticky au scroll horizontal : le libellé du jour reste collé à
       gauche (juste après la colonne titre) tant qu'on est dans ce jour, puis
       il est poussé hors vue quand le jour suivant arrive. La cellule occupe
       déjà toute la largeur du jour ; on cale le texte à gauche et on le rend
       sticky à l'intérieur de cette cellule. */
    .gantt-day-label {
        justify-content: flex-start;
    }
    .gantt-day-label-text {
        position: sticky;
        left: var(--gantt-label-width);
        padding-left: 6px;
    }

    /* Libellé colonne titre raccourci sur mobile pour gagner de la place */
    .gantt-corner-full { display: none; }
    .gantt-corner-short { display: inline; }
}

/* =============================================================================
   Tooltip custom (desktop hover)
   ============================================================================= */

.gantt-tooltip {
    position: fixed;
    z-index: 10001;
    max-width: 280px;
    padding: 6px 10px;
    background: var(--gantt-bg);
    color: var(--gantt-text);
    border: 1px solid var(--astro-jaune, #fba818);
    border-radius: 6px;
    font-size: 0.85em;
    line-height: 1.35;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.gantt-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gantt-tooltip-title {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.gantt-tooltip-time {
    display: block;
    color: var(--gantt-text-muted);
    font-size: 0.92em;
}

/* Tooltip masqué sur écrans tactiles (pas de hover) */
@media (hover: none), (pointer: coarse) {
    .gantt-tooltip { display: none; }
}

/* =============================================================================
   Flyout modal (clic/tap)
   ============================================================================= */

.gantt-flyout-overlay {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--gantt-overlay);
    /* Desktop par défaut : overlay contraint au .gantt-wrapper */
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.gantt-flyout-overlay.is-open {
    display: flex;
    opacity: 1;
}

.gantt-flyout {
    position: relative;
    width: 90%;
    max-width: 420px;
    padding: 1.5rem;
    background: var(--gantt-bg);
    color: var(--gantt-text);
    border: 1px solid var(--astro-jaune, #fba818);
    border-radius: var(--gantt-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    transform: scale(0.96);
    transition: transform 0.15s ease;
}

.gantt-flyout-overlay.is-open .gantt-flyout {
    transform: scale(1);
}

.gantt-flyout-close {
    position: absolute;
    top: 6px;
    right: 10px;
    background: transparent!important;
    border: none;
    color: var(--gantt-text-muted)!important;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
}

.gantt-flyout-close:hover {
    color: var(--astro-jaune, #fba818) !important;
}

.gantt-flyout a.event-book {
    background: transparent;
    color: var(--astro-jaune);
}

.gantt-flyout a.event-book:hover {
    background: transparent;
    color: #fff;
    border-color: #fff;
}

.gantt-flyout-title {
    margin: 0 24px 8px 0;
    font-size: 1.15em;
    line-height: 1.25;
    color: var(--gantt-text);
}

.gantt-flyout-time {
    color: var(--astro-jaune, #fba818);
    font-weight: 600;
    margin-bottom: 0.8rem;
    font-size: 0.95em;
}

.gantt-flyout-pricing {
    margin-bottom: 0.8rem;
    font-size: 0.9em;
    color: var(--gantt-text-muted);
}

.gantt-flyout-pricing:empty { display: none; }

.gantt-flyout-excerpt {
    margin-bottom: 1.2rem;
    font-size: 0.92em;
    line-height: 1.45;
    color: var(--gantt-text);
}

.gantt-flyout-excerpt:empty { display: none; }

.gantt-flyout-book {
    display: inline-block;
}

/* Mobile : overlay plein écran classique (fixed) */
@media (max-width: 767px) {
    .gantt-flyout-overlay {
        position: fixed;
        z-index: 10000;
    }

    .gantt-flyout {
        width: 94%;
        padding: 1.1rem;
    }

    .gantt-flyout-title { font-size: 1.05em; }
}

/* Fallback fixed quand le wrapper est trop petit (< 380px) */
.gantt-flyout-overlay.use-fixed {
    position: fixed;
    z-index: 10000;
}