/* =========================================================
   VARIABLES
   ========================================================= */

body {
    --bs-link-color-rgb: 165, 180, 252;

    --date-bg: #6366f1;
    --card-bg: #202a3a;
    --card-bg-hover: #293548;



    --text-color: #e5e7eb;
    --text-muted: #8f9bad;

    --primary: #6366f1;
    --primary-hover: #5558e8;

    --dashboard-primary : #18202d;
    --dashborad-border : #303c4f;
    --border-color: #303c4f;
    --fc-bg-event-color: rgb(255 0 0 / 50%);
}

/* =========================================================
   CONTAINER
   ========================================================= */

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1620px;
    }

}


/* =========================================================
   MODALES
   ========================================================= */

@media (min-width: 992px) {

    .modal,
    .modal-xl {
        --bs-modal-width: 1200px;
    }

}

.modal .modal-content {
    background: var(--card-bg);
    border: 1px solid var(--border-color);

    border-radius: .75rem;

    color: var(--text-color);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);
}

.modal .modal-header {
    background: var(--card-bg);

    border-bottom: 1px solid var(--border-color);

    color: #f1f5f9;
}

.modal .modal-title {
    color: #f1f5f9;

    font-size: 1rem;
    font-weight: 600;
}

.modal .modal-body {
    background: var(--card-bg);

    color: var(--text-color);
}

.modal .modal-footer {
    background: var(--card-bg);

    border-top: 1px solid var(--border-color);
}

.modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: .6;
}

.modal .btn-close:hover {
    opacity: 1;
}


/* =========================================================
   CALENDRIER DE SÉLECTION
   ========================================================= */

.fc-theme-standard {

    color: var(--text-color);

    --fc-border-color: var(--border-color);
    --fc-page-bg-color: var(--card-bg);
    --fc-neutral-bg-color: #263245;
    --fc-list-event-hover-bg-color: #293548;
    --fc-today-bg-color: rgba(99, 102, 241, .10);

}


/* Jours */

.fc-theme-standard .fc-daygrid-day {
    cursor: pointer;

    background: var(--card-bg);

    transition:
            background-color .15s ease,
            color .15s ease;
}

.fc-theme-standard .fc-daygrid-day.closure-day{
    background: var(--fc-bg-event-color) !important;
}

.fc-theme-standard .fc-daygrid-day:hover {
    background: #293548;
}


/* Jour sélectionné */

.fc-theme-standard .fc-daygrid-day.active {
    background: var(--date-bg) !important;

    color: #fff !important;
}

.fc-theme-standard .fc-daygrid-day.active .fc-daygrid-day-number {
    color: #fff;
}


/* Aujourd'hui */

.fc-theme-standard .fc-day-today {
    background: rgba(99, 102, 241, .10) !important;
}


/* Numéros des jours */

.fc-theme-standard .fc-daygrid-day-number {
    color: #cbd5e1;
}

.fc-theme-standard .fc-col-header-cell-cushion {
    color: #8f9bad;

    font-size: .75rem;
    font-weight: 600;

    text-decoration: none;
}


/* Jours précédents / suivants */

.fc-theme-standard .fc-day-other {
    background: #1c2533;
}

.fc-theme-standard .fc-day-other .fc-daygrid-day-number {
    color: #566276;
}


/* Header calendrier */

.fc-theme-standard .fc-toolbar-title {
    color: #f1f5f9;

    font-size: 1rem;
    font-weight: 600;
}

.fc-theme-standard .fc-button {
    background: var(--dashborad-border);

    border-color: #3b485c;

    color: #dce2ea;

    box-shadow: none;
}

.fc-theme-standard .fc-button:hover {
    background: #3a485d;

    border-color: #46556b;
}

.fc-theme-standard .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--primary);

    border-color: var(--primary);

    color: #fff;
}


/* =========================================================
   CRÉNEAUX
   ========================================================= */

.slot-card {
    cursor: pointer;

    background: var(--card-bg);

    border: 1px solid var(--border-color);

    color: var(--text-color);

    border-radius: .65rem;

    transition:
            transform .2s ease,
            box-shadow .2s ease,
            border-color .2s ease,
            background-color .2s ease;
}

.slot-card:hover {
    transform: translateY(-3px);

    background: var(--card-bg-hover);

    border-color: #46556b;

    box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}


/* Créneau sélectionné */

.slot-card.active {
    border: 2px solid var(--primary) !important;

    background: rgba(99, 102, 241, .10);
}

.slot-card.active .select-slot-btn {
    background-color: var(--primary);

    border-color: var(--primary);

    color: #fff;
}


/* =========================================================
   CONTENU DES CRÉNEAUX
   ========================================================= */

.slot-card h5,
.slot-card h6,
.slot-card strong {
    color: #f1f5f9;
}

.slot-card p {
    color: #aeb9c8;
}

.slot-card .text-muted {
    color: #7f8a9a !important;
}


/* =========================================================
   BOUTON CRÉNEAU
   ========================================================= */

.slot-card .select-slot-btn {
    background: var(--dashborad-border);

    border-color: #46536a;

    color: #dce2ea;

    transition:
            background-color .15s ease,
            border-color .15s ease;
}

.slot-card .select-slot-btn:hover {
    background: var(--primary);

    border-color: var(--primary);

    color: #fff;
}


/* =========================================================
   OPTIONS DES CRÉNEAUX
   ========================================================= */

.slot-options {
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {

    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   FORMULAIRES DANS LA MODALE
   ========================================================= */

.modal label {
    color: #aeb9c8;

    font-size: .75rem;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .035em;
}

.modal .form-control,
.modal .form-select {
    background-color: var(--dashboard-primary); !important;

    border: 1px solid #3a4659 !important;

    color: #e5e7eb !important;

    border-radius: .5rem;

    box-shadow: none;
}

.modal .form-control::placeholder {
    color: #687589;
}

.modal .form-control:focus,
.modal .form-select:focus {
    background-color: var(--dashboard-primary); !important;

    border-color: var(--primary) !important;

    color: #f1f5f9 !important;

    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .15);
}


/* =========================================================
   TEXTE SECONDAIRE
   ========================================================= */

.modal .text-muted {
    color: #7f8a9a !important;
}

/* =========================================================
   CARDS DANS LES MODALES
   ========================================================= */

.modal .card {
    background: #263245;

    border: 1px solid #3a4659;

    border-radius: .65rem;

    color: #e5e7eb;

    box-shadow: none;
}

.modal .card .card-header {
    background: #293548;

    border-bottom: 1px solid #3a4659;

    color: #f1f5f9;
}

.modal .card .card-body {
    background: #263245;

    color: #dce2ea;
}

.modal .card .card-footer {
    background: #293548;

    border-top: 1px solid #3a4659;
}


/* Titres */

.modal .card .card-title,
.modal .card h5,
.modal .card h6 {
    color: #f1f5f9;
}


/* Textes */

.modal .card p {
    color: #aeb9c8;
}

.modal .card .text-muted {
    color: #7f8a9a !important;
}


/* =========================================================
   CARDS DE CRÉNEAUX
   ========================================================= */

.modal .card-body .slot-card {
    background: #263245;
    border: 1px solid #3a4659;
    color: #e5e7eb;
}

.modal .card-body .slot-card:hover {
    background: #2d3a4f;
    border-color: #4b5b72;
}

.modal .card-body .slot-card.active {
    background: rgba(99, 102, 241, .12);

    border-color: var(--date-bg); !important;
}


/* =========================================================
   BADGES DANS LES CARDS
   ========================================================= */

.modal .card .badge {
    font-weight: 500;
}

.modal .card .badge.bg-light {
    background: var(--dashborad-border); !important;
    color: #dce2ea !important;
}

.modal .card .badge.bg-secondary {
    background: #3a4659 !important;
    color: #dce2ea !important;
}


/* =========================================================
   BOUTONS DANS LES CARDS
   ========================================================= */

.modal .card .btn-outline-primary {
    color: #a5b4fc;

    border-color: var(--date-bg);
}

.modal .card .btn-outline-primary:hover {
    background: var(--date-bg);

    color: #fff;
}

.modal .card .btn-outline-secondary {
    color: #aeb9c8;

    border-color: #46536a;
}

.modal .card .btn-outline-secondary:hover {
    background: var(--dashborad-border);

    border-color: #596981;

    color: #fff;
}


.day-reservations-link{
    text-align: center;
    background: #6466f1;
    border-color: #6466f1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 767.98px) {

    .fc-theme-standard .fc-toolbar {
        flex-direction: column;

        gap: .5rem;
    }

    .fc-theme-standard .fc-toolbar-title {
        font-size: .95rem;
    }

    .slot-card {
        margin-bottom: .75rem;
    }

}