body {
    background-color: skyblue;
}

/* ── Slot calendar expansion animation ── */
.slot-calendar-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

.slot-calendar-wrapper.slot-calendar-open {
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}

/* ── Doctor result card ── */
.doctor-result-card {
    /* Contour terracotta discret sur chaque carte (comme la maquette). */
    border: 1px solid #D68C78 !important;
}

.doctor-result-card:hover {
    border-color: rgba(214, 140, 120, 0.7) !important;
    box-shadow: 0 6px 20px rgba(214, 140, 120, 0.12);
}

/* Surbrillance de la fiche dont le marqueur est sélectionné : anneau + fond
   sauge, statiques et instantanés (pas de transition ni d'animation → aucun
   repaint continu). Reste active jusqu'au clic sur un autre marqueur.
   box-shadow en !important pour battre celui de .organic-search. */
.doctor-result-card.is-highlighted {
    /* Fond blanc conservé ; surbrillance = anneau terracotta (comme la maquette). */
    box-shadow: 0 0 0 2px #D68C78,
                0 16px 36px rgba(214, 140, 120, 0.22) !important;
}

/* ── Slot button styling (Doctolib-like) ── */
.slot-btn {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    min-width: 70px;
    transition: all 0.15s ease;
}

.slot-btn:hover {
    background-color: #0d6efd;
    color: #fff;
    transform: scale(1.05);
}

.slot-btn.active {
    background-color: #0d6efd;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

/* ── Slot column layout ── */
.slot-column {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

/* Les créneaux de l'agenda déplié gardent le style/taille des chips .sd-slot
   (pas d'override de largeur/taille ici). */
.slot-column button {
    white-space: nowrap;
}

.slot-date-column {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-align: center;
}

/* ── Booking confirmation panel ── */
.booking-confirm-panel {
    animation: fadeInUp 0.3s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Dashboard sidebar nav ── */
#dashboardSidebar .nav-link {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#dashboardSidebar .nav-link:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

#dashboardSidebar .nav-link.active {
    border-left: 3px solid #0d6efd;
}

/* ── Doctor profile link in search results ── */
.doctor-profile-link {
    text-decoration: none;
}

.doctor-profile-link:hover {
    text-decoration: underline;
}

/* ── Status filter pills ── */
#statusTabs .nav-link {
    border-radius: 50rem;
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    margin-right: 0.5rem;
    transition: all 0.2s ease;
}

/* ── Photo upload dropzone ── */
.photo-dropzone {
    border: 2px dashed #dee2e6;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.photo-dropzone:hover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.03);
}

.photo-dropzone.dragover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.08);
}

/* ── Doctor info column (md+ fixed width) ── */
@media (min-width: 768px) {
    .doctor-info-col {
        width: 240px;
    }
}

/* ── Mobile: slot calendar scroll ── */
@media (max-width: 767.98px) {
    .slot-calendar-right {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .slot-nav,
    .slot-grid {
        min-width: 300px;
    }

    .slot-btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.15rem;
        min-width: auto;
    }
}