/* Styles calendar (extrait de calendar.php — issue #9964) */
/* Refonte visuelle du composant calendrier — toolbar moderne, événements lisibles, mobile responsive */

/* ============================================================
   Tokens locaux du composant calendrier
   ============================================================ */
:root {
    --cal-toolbar-gap: 8px;
    --cal-button-radius: 8px;
    --cal-button-padding-y: 6px;
    --cal-button-padding-x: 12px;
    --cal-button-bg: transparent;
    --cal-button-bg-hover: var(--bkg-color111);
    --cal-button-bg-active: var(--bkg-color140);
    --cal-button-text: var(--txt-color3);
    --cal-button-text-active: #fff;
    --cal-button-border: var(--bor-color1);
    --cal-event-radius: 6px;
    --cal-event-border: 3px;
    --cal-tap-target: 40px;
}

.hide-this {
    display: none !important;
}

.filter-area-2,
.filter-area {
    margin-left: 4px !important;
    bottom: 1px;
    position: relative;
}

.fc-day-grid-event .fc-content {
    white-space: normal !important;
}

.tooltip {
    pointer-events: none;
}

.popover {
    white-space: pre-wrap;
}

.fc-daygrid-day:hover {
    background-color: var(--bkg-color111) !important;
}

/* Vue semaine/jour — curseur indique qu'on peut tirer une plage horaire */
.fc-timeGridWeek-view .fc-timegrid-slot-lane,
.fc-timeGridDay-view .fc-timegrid-slot-lane {
    cursor: crosshair;
}

.fc-view-harness {
    background-color: var(--bkg-color108);
}

.table-bordered td {
    border: 1px solid var(--bor-color1);
}

/* ============================================================
   Toolbar — segmented control moderne, plus de "btn-primary" bleu
   ============================================================ */
.fc .fc-toolbar.fc-header-toolbar {
    align-items: center;
    gap: var(--cal-toolbar-gap);
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.fc-toolbar-title {
    font-weight: 500;
    font-size: 1.05rem !important;
    color: var(--txt-color3);
    text-transform: capitalize;
    margin: 0 4px !important;
}

.fc-toolbar-title::first-letter {
    text-transform: capitalize;
}

/* Tous les boutons de la toolbar : style ghost neutre.
   Le themeSystem 'bootstrap' de FullCalendar émet des `.btn.btn-primary`
   au lieu de `.fc-button` — on cible les deux. */
.fc .fc-button,
.fc .fc-button-primary,
.fc-header-toolbar .btn,
.fc-header-toolbar .btn.btn-primary {
    background-color: var(--cal-button-bg) !important;
    background-image: none !important;
    border: 1px solid var(--cal-button-border) !important;
    color: var(--cal-button-text) !important;
    border-radius: var(--cal-button-radius) !important;
    padding: var(--cal-button-padding-y) var(--cal-button-padding-x) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    box-shadow: none !important;
    min-height: var(--cal-tap-target);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fc .fc-button:hover,
.fc .fc-button-primary:hover,
.fc-header-toolbar .btn:hover,
.fc-header-toolbar .btn.btn-primary:hover {
    background-color: var(--cal-button-bg-hover) !important;
    color: var(--cal-button-text) !important;
    border-color: var(--cal-button-border) !important;
}

.fc .fc-button:focus,
.fc .fc-button-primary:focus,
.fc .fc-button:focus-visible,
.fc-header-toolbar .btn:focus,
.fc-header-toolbar .btn.btn-primary:focus {
    outline: 2px solid var(--cal-button-bg-active) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Bouton actif (vue courante) — fond accent, texte blanc */
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc-header-toolbar .btn.active,
.fc-header-toolbar .btn.btn-primary.active {
    background-color: var(--cal-button-bg-active) !important;
    border-color: var(--cal-button-bg-active) !important;
    color: var(--cal-button-text-active) !important;
}

/* Today : style discret (ghost) */
.fc .fc-today-button,
.fc-header-toolbar .fc-today-button {
    background-color: var(--cal-button-bg) !important;
    color: var(--cal-button-text) !important;
}

.fc .fc-today-button:disabled,
.fc-header-toolbar .fc-today-button:disabled {
    opacity: 0.4 !important;
    background-color: var(--cal-button-bg) !important;
    border-color: var(--cal-button-border) !important;
    color: var(--cal-button-text) !important;
}

/* Prev / Next — compact icône */
.fc .fc-prev-button,
.fc .fc-next-button,
.fc-header-toolbar .fc-prev-button,
.fc-header-toolbar .fc-next-button {
    padding: var(--cal-button-padding-y) 10px !important;
}

/* Grouper les boutons de vue en segmented control */
.fc .fc-button-group,
.fc-header-toolbar .btn-group {
    background-color: var(--bkg-color111);
    border-radius: var(--cal-button-radius);
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--cal-button-border);
    display: inline-flex !important;
}

.fc .fc-button-group .fc-button,
.fc-header-toolbar .btn-group .btn {
    border: none !important;
    border-radius: calc(var(--cal-button-radius) - 2px) !important;
    min-height: calc(var(--cal-tap-target) - 4px);
}

.fc .fc-button-group .fc-button:not(.fc-button-active),
.fc-header-toolbar .btn-group .btn:not(.active) {
    background-color: transparent !important;
}

.fc .fc-button-group .fc-button:hover:not(.fc-button-active),
.fc-header-toolbar .btn-group .btn:hover:not(.active) {
    background-color: var(--bkg-color108) !important;
}

/* ============================================================
   Filtre du calendrier (selectpicker) — alignement avec toolbar
   ============================================================ */
.filterAreaDiv .selectpicker + .dropdown-toggle.btn-default,
#toolbar .dropdown-toggle.btn-default {
    border-radius: var(--cal-button-radius) !important;
    min-height: var(--cal-tap-target);
    border: 1px solid var(--cal-button-border) !important;
}

/* ============================================================
   Événements — bordure pastel, contenu enrichi, lisibilité
   ============================================================ */
#calendar a.fc-event,
#calendar .fc-event {
    color: var(--fc-event-text-color, inherit) !important;
    text-decoration: none;
    border-radius: var(--cal-event-radius) !important;
    border: none !important;
    border-left: var(--cal-event-border) solid currentColor !important;
    padding: 2px 6px !important;
    margin-bottom: 2px;
    overflow: hidden;
    transition: filter 0.15s ease;
}

#calendar a.fc-event:hover,
#calendar .fc-event:hover {
    color: var(--fc-event-text-color, inherit) !important;
    filter: brightness(0.95);
}

#calendar .fc-event-title {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#calendar .fc-event-time {
    font-weight: 400;
    opacity: 0.85;
    margin-right: 4px;
    /* #10571 — la time-box est un flex child de .fc-event-main-frame, au
       même titre que .fc-event-title-container (flex-grow:1). Sans
       flex-shrink:0 elle se faisait écraser dès que le titre était un peu
       long : FullCalendar pose `overflow:hidden` sur la time-box mais
       AUCUN white-space/ellipsis, donc les derniers caractères de l'heure
       étaient simplement coupés (« 10:3 », « 14: » …). On verrouille la
       largeur de la time-box sur son contenu — c'est le titre qui ellipse,
       pas l'heure. */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Badge places restantes intégré dans le titre */
.fc-event-places-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    vertical-align: middle;
}

.fc-event-places-badge.is-full {
    background-color: rgba(0, 0, 0, 0.35);
}

/* Icône statut (annulé, brouillon) */
.fc-event-status-icon {
    margin-right: 4px;
    opacity: 0.85;
}

/* Vue Liste (listWeek/listMonth) : look épuré */
.fc .fc-list-event:hover td {
    background-color: var(--bkg-color111) !important;
}

.fc .fc-list-day-cushion {
    background-color: var(--bkg-color111) !important;
}

/* ============================================================
   Numéros de jour & en-têtes
   ============================================================ */
/*Correction bug caractères spéciaux en vue mois/jour*/
.fc-dayGridWeek-view .fc-daygrid-day-number,
.fc-dayGridWeek-view .fc-daygrid-week-number,
.fc-dayGridDay-view .fc-daygrid-day-number,
.fc-dayGridDay-view .fc-daygrid-week-number {
    display: none;
}

.fc-dayGridWeek-view .fc-daygrid-day-top,
.fc-dayGridDay-view .fc-daygrid-day-top {
    margin-bottom: 3px;
}

/* ============================================================
   Mobile — toolbar toujours visible, layout compact
   Plus de toggle hide/show. Buttons restent accessibles.
   ============================================================ */
.mobile-mb {
    margin-bottom: 10px !important;
}

.mobile-fc-toolbar-header .filterAreaDiv {
    width: 100%;
}

@media (max-width: 768px) {
    body.eb-has-topbar-v2 #space-left,
    body.eb-has-topbar-v2 .content-wrapper {
        background: var(--eb-bg, #f3f6fb);
    }

    .eb-calendar-container {
        padding-left: 4px;
        padding-right: 4px;
    }

    #calendar {
        padding: 0 4px 18px;
    }

    .fc-view-harness {
        height: auto !important;
        min-height: 0 !important;
        background: transparent;
    }

    /* #10527 — toolbar compacte : on cesse d'empiler chaque chunk sur sa
       propre ligne (6 lignes => hauteur perdue). On répartit sur 3 lignes :
       1) filtres pleine largeur, 2) prev/next/Aujourd'hui à gauche + titre à
       droite, 3) sélecteur de vue pleine largeur. */
    .fc .fc-toolbar.fc-header-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        margin: 4px 0 8px;
    }

    .fc .fc-toolbar-chunk {
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    /* Filtres (#toolbar, déplacé ici par calendar.php) : ligne pleine, et
       bouton filtre + dropdown + Synchroniser sur UNE seule ligne.
       NB : une règle générique `#toolbar { flex-direction: column }` (≤575.98px)
       empilait les 3 contrôles ; on la neutralise ici (spécificité (1,1,0)). */
    .fc-header-toolbar > #toolbar {
        flex: 1 1 100%;
        order: 0;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    /* bouton filtre + Synchroniser : largeur du contenu ; dropdown : extensible.
       (annule .eb-filter-mobile-wrap{width:100%} qui mangeait la ligne) */
    .fc-header-toolbar > #toolbar > .eb-filter-mobile-wrap,
    .fc-header-toolbar > #toolbar > .rotate-button {
        flex: 0 0 auto;
        width: auto;
        margin: 0;
    }
    .fc-header-toolbar > #toolbar > .bootstrap-select {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* prev/next + Aujourd'hui à gauche, titre à droite, même ligne */
    .fc-toolbar-chunk:has(.fc-prev-button)   { order: 1; flex: 0 1 auto; }
    .fc-toolbar-chunk:has(.fc-toolbar-title) { order: 2; flex: 0 1 auto; }

    /* Sélecteur de vue (Mois/Semaine/Jour/Liste) : ligne pleine */
    .fc-toolbar-chunk:has(.fc-dayGridMonth-button) { order: 3; flex: 1 0 100%; }

    .fc-toolbar-title {
        text-align: center;
        font-size: 1rem !important;
        font-weight: 650;
        line-height: 1.2;
        color: #1f2937;
    }

    .fc .fc-button {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .fc .fc-button-group .fc-button {
        flex: 1 1 auto;
    }

    /* Sur petits écrans la vue jour/semaine prend toute la largeur */
    #calendar .fc-event-title {
        font-size: 0.8rem;
    }

    #calendar .fc-list,
    #calendar .fc-list-view,
    #calendar .fc-scroller,
    #calendar .fc-scroller-liquid {
        border: 0 !important;
        background: transparent !important;
        overflow: visible !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    #calendar .fc-list-table {
        --bs-border-width: 0;
        --bs-table-border-color: transparent;
        display: block;
        width: 100% !important;
        border: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-collapse: separate !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    #calendar .fc-list-table > :not(caption) > * > * {
        border-width: 0 !important;
        border-color: transparent !important;
        box-shadow: none !important;
    }

    #calendar .fc-list-table tbody {
        display: block;
    }

    #calendar .fc-list-table tr,
    #calendar .fc-list-table th,
    #calendar .fc-list-table td {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    #calendar .fc-list-day {
        display: block;
        margin: 14px 0 6px;
    }

    #calendar .fc-list-day th {
        display: block;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #calendar .fc-list-day-cushion {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 0 4px !important;
        background: transparent !important;
        color: #334155;
        font-size: .82rem;
        font-weight: 700;
        text-transform: capitalize;
    }

    #calendar .fc-list-day-text,
    #calendar .fc-list-day-side-text {
        color: inherit !important;
        text-decoration: none !important;
    }

    #calendar .fc-list-event {
        display: grid;
        grid-template-columns: minmax(74px, auto) 12px 1fr;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        margin: 0 0 6px;
        padding: 0 10px;
        background: var(--eb-surface, #fff);
        border: 0 !important;
        border-left: 0 !important;
        border-radius: 9px;
        box-shadow: 0 1px 0 rgba(148, 163, 184, .12);
        overflow: hidden;
    }

    #calendar .fc-list-event td {
        display: block;
        border: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #calendar .fc-list-event-time {
        color: #334155;
        font-size: .78rem;
        font-weight: 650;
        white-space: nowrap;
    }

    #calendar .fc-list-event-graphic {
        width: 12px;
        min-width: 12px;
    }

    #calendar .fc-list-event-dot {
        width: 9px;
        height: 9px;
        margin: 0 auto;
        border: 0 !important;
        border-radius: 999px;
        background: var(--fc-event-border-color, currentColor);
        box-shadow: 0 0 0 3px rgba(15, 23, 42, .06);
    }

    #calendar .fc-list-event-graphic .fc-list-event-dot {
        margin: 0 auto;
    }

    #calendar .fc-list-event-title {
        min-width: 0;
        color: #1f2937;
        font-size: .86rem;
        font-weight: 600;
        line-height: 1.25;
    }

    #calendar .fc-list-event-title a {
        color: inherit !important;
        text-decoration: none !important;
    }

    #calendar .fc-list-empty {
        border: 0 !important;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
    }
}

@media (max-width: 480px) {
    .eb-calendar-container {
        padding-left: 2px;
        padding-right: 2px;
    }

    #calendar {
        padding-left: 2px;
        padding-right: 2px;
    }

    .fc-toolbar-title {
        font-size: 0.95rem !important;
    }

    .fc .fc-button {
        font-size: 0.75rem !important;
        padding: 5px 8px !important;
        min-height: 36px;
    }

    .fc .fc-button-group {
        width: 100%;
    }

    .fc .fc-button-group .fc-button {
        min-width: 0;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    #calendar .fc-list-event {
        grid-template-columns: minmax(72px, auto) 10px 1fr;
        gap: 7px;
        padding: 0 9px;
    }
}