/* ============================================================================
 * Overrides pour @preline/datepicker (VanillaCalendar Pro)
 * Popup compact avec fond blanc, ombre et couleurs du portail client.
 * ========================================================================== */

/* ── Conteneur popup ────────────────────────────────────────────────────── */
[data-vc="calendar"][data-vc-input] {
    width: 17.5rem;
    min-width: 17.5rem;
    max-width: 17.5rem;
    /* Annule la hauteur fixe (tw:h-85) injectée par date-picker.css */
    height: auto !important;
    min-height: unset !important;
    padding: 0.75rem;
    background-color: #fff;
    border: 1px solid rgb(229 231 235);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.12),
                0 8px 10px -6px rgb(0 0 0 / 0.08);
    z-index: 1000;
    font-size: 0.8125rem;
}

/*
 * Preline positionne le popup avant de le rendre visible : sa hauteur vaut
 * alors zéro. On le remonte donc de sa hauteur réelle, puis de 26 px.
 */
[data-vc="calendar"][data-vc-input][data-vc-position="top"] {
    margin-top: 0 !important;
    transform: translateY(calc(-100% - 1.625rem));
}

/* Empêche les sections internes de s'étirer en hauteur */
[data-vc="calendar"][data-vc-input] [data-vc="wrapper"],
[data-vc="calendar"][data-vc-input] [data-vc="content"],
[data-vc="calendar"][data-vc-input] [data-vc="dates"],
[data-vc="calendar"][data-vc-input] [data-vc="grid"],
[data-vc="calendar"][data-vc-input] [data-vc="column"] {
    flex-grow: 0 !important;
    height: auto !important;
}

/* ── Header : layout ─────────────────────────────────────────────────────── */
[data-vc="calendar"][data-vc-input] [data-vc="header"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
    gap: 0.25rem;
}

/* Groupe mois + année centré */
[data-vc="calendar"][data-vc-input] [data-vc="header"] > *:not([data-vc-arrow]) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
}

/* Boutons Mois / Année */
[data-vc="calendar"][data-vc-input] [data-vc="month"],
[data-vc="calendar"][data-vc-input] [data-vc="year"] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1f2937;
    background: transparent;
    border: 1px solid rgb(209 213 219);
    border-radius: 0.375rem;
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.4;
}
[data-vc="calendar"][data-vc-input] [data-vc="month"]:hover,
[data-vc="calendar"][data-vc-input] [data-vc="year"]:hover {
    background-color: #33A0BE;
    border-color: #33A0BE;
    color: #fff;
}
/* Petite flèche ▾ après le texte pour indiquer que c'est cliquable */
[data-vc="calendar"][data-vc-input] [data-vc="month"]::after,
[data-vc="calendar"][data-vc-input] [data-vc="year"]::after {
    content: "";
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: opacity 0.15s;
}
[data-vc="calendar"][data-vc-input] [data-vc="month"]:hover::after,
[data-vc="calendar"][data-vc-input] [data-vc="year"]:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    opacity: 1;
}

/* ── Flèches de navigation ───────────────────────────────────────────────── */
[data-vc="calendar"][data-vc-input] [data-vc-arrow] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(209 213 219);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    padding: 0;
    /* Masquer tout contenu textuel éventuel injecté par VC */
    font-size: 0;
    color: transparent;
}
[data-vc="calendar"][data-vc-input] [data-vc-arrow]:hover {
    background-color: #33A0BE;
    border-color: #33A0BE;
}
/* Pseudo-élément commun aux deux flèches */
[data-vc="calendar"][data-vc-input] [data-vc-arrow]::before {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}
/* Flèche gauche */
[data-vc="calendar"][data-vc-input] [data-vc-arrow="prev"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
/* Flèche droite */
[data-vc="calendar"][data-vc-input] [data-vc-arrow="next"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b5563' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}
/* Icônes blanches au hover */
[data-vc="calendar"][data-vc-input] [data-vc-arrow="prev"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
}
[data-vc="calendar"][data-vc-input] [data-vc-arrow="next"]:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* ── Ligne des jours de la semaine ──────────────────────────────────────── */
[data-vc="calendar"][data-vc-input] [data-vc="week"] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-bottom: 0.25rem;
}
[data-vc="calendar"][data-vc-input] [data-vc-week-day] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    padding: 0.25rem 0;
    text-transform: uppercase;
}

/* ── Grille des dates ───────────────────────────────────────────────────── */
[data-vc="calendar"][data-vc-input] [data-vc="dates"] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.125rem;
    row-gap: 0.125rem;
}
[data-vc="calendar"][data-vc-input] [data-vc-date] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-btn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border: 0;
    background: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #1f2937;
    padding: 0;
    transition: background-color 0.15s, color 0.15s;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-btn]:hover {
    background-color: rgb(243 244 246);
}

/* Jours hors du mois courant */
[data-vc="calendar"][data-vc-input] [data-vc-date-month="prev"] [data-vc-date-btn],
[data-vc="calendar"][data-vc-input] [data-vc-date-month="next"] [data-vc-date-btn] {
    color: #d1d5db;
}

/* Aujourd'hui */
[data-vc="calendar"][data-vc-input] [data-vc-date-today] [data-vc-date-btn] {
    font-weight: 700;
    color: #33A0BE;
}

/* Dates désactivées */
[data-vc="calendar"][data-vc-input] [data-vc-date-disabled] {
    pointer-events: none !important;
    opacity: 0.35;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-disabled] [data-vc-date-btn] {
    color: #d1d5db;
    cursor: not-allowed;
    text-decoration: line-through;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-disabled] [data-vc-date-btn]:hover {
    background: transparent;
}

/* Date sélectionnée (bornes de la plage) */
[data-vc="calendar"][data-vc-input] [data-vc-date-selected] [data-vc-date-btn] {
    background-color: #33A0BE;
    color: #fff;
    font-weight: 600;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-selected] [data-vc-date-btn]:hover {
    background-color: #2880a0;
}

/* Plage : dates intermédiaires */
[data-vc="calendar"][data-vc-input] [data-vc-date-selected="middle"] [data-vc-date-btn] {
    background-color: rgba(51, 160, 190, 0.15);
    color: #034a5e;
    border-radius: 0;
    font-weight: 500;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-selected="first"] [data-vc-date-btn],
[data-vc="calendar"][data-vc-input] [data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-selected="last"] [data-vc-date-btn] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-selected="first-and-last"] [data-vc-date-btn] {
    border-radius: 0.375rem;
}

/* Survol pendant la sélection d'une plage (avant le 2e clic) */
[data-vc="calendar"][data-vc-input] [data-vc-date-hover] [data-vc-date-btn] {
    background-color: rgba(51, 160, 190, 0.15);
    color: #034a5e;
    border-radius: 0;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-hover="first"] [data-vc-date-btn] {
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}
[data-vc="calendar"][data-vc-input] [data-vc-date-hover="last"] [data-vc-date-btn] {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

/* Vues mois & années */
[data-vc="calendar"][data-vc-input] [data-vc="months"],
[data-vc="calendar"][data-vc-input] [data-vc="years"] {
    gap: 0.5rem;
    padding: 0.25rem;
}
[data-vc="calendar"][data-vc-input] [data-vc-months-month],
[data-vc="calendar"][data-vc-input] [data-vc-years-year] {
    padding: 0.5rem 0.25rem;
    border: 0;
    background: transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #1f2937;
}
[data-vc="calendar"][data-vc-input] [data-vc-months-month]:hover,
[data-vc="calendar"][data-vc-input] [data-vc-years-year]:hover {
    background-color: rgb(243 244 246);
}
[data-vc="calendar"][data-vc-input] [data-vc-months-month-selected],
[data-vc="calendar"][data-vc-input] [data-vc-years-year-selected] {
    background-color: #33A0BE !important;
    color: #fff !important;
    font-weight: 600;
}