/* ------------------------------------BTN-CTA------------------------------------ */
.btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.2s ease-in;
}

.btn-primary {
    background-color: var(--accent-color);
    color: #ffffff;
}

.btn-primary:hover {
    background-color: var(--accent-color-hover);
    cursor: pointer;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: var(--infos);
    color: var(--secondary-color);
    cursor: pointer;
}

.btn-tertiary {
    background-color: var(--primary-color);
    color: var(--infos-color);
    border: solid 1px var(--infos);
}

.btn-tertiary:hover {
    background-color: var(--infos);
    color: var(--secondary-color);
    cursor: pointer;
    border: solid 1px var(--primary-color);
}

.btn-disabled {
    background-color: var(--disabled);
    color: var(--disabled-color);
    cursor: not-allowed;
    pointer-events: none;
}

.a-disabled {
   cursor: not-allowed;
   pointer-events: none;
   color: var(--disabled-color) !important;
}

.btn-danger {
    background-color: var(--red-color);
    color: #ffffff;
}

.btn-danger:hover {
    background-color: var(--error);
    cursor: pointer;
}

/* Styles pour les messages flash */
.flash-container {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    top: 8%;
    left: 25%;
    z-index: 2000;
    width: 60%;
    transition: opacity 1s ease-in-out;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 0 3px var(--secondary-color);

    .alert {
        width: 100%;
        font-weight: bold;
    }

    .charging-bar {
        margin-top: 5px;
        width: 100%;
        height: 5px;
        background-color: var(--accent-color);
        border-radius: 0 5px 5px 5px;
        transition: width 1s linear;
    }

}

.alert-error {
    padding: 15px;
    color: var(--secondary-color);
}


.alert-success {
    padding: 15px;
    color: var(--green-color);
}

.alert-info {
    padding: 15px;
    color: var(--red-color);
}

.text-center {
    text-align: center;
}

/* ------------------------------------Utilitaires------------------------------------ */

.container {
    padding: 0.938rem 9.375rem;
    width: 100%;
}

.main-content {
    padding: 1.6rem 2rem;
}

.banner {
    background-color: var(--secondary-color);
}

.hidden {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.no-scroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
}

.divider-line {
    width: 100%;
    height: 1px;
    background-color: var(--accent-color);
}

.padding-center {
    padding: 4.6rem 9.375rem;
}

.text-size-1 {
    font-size: var(--text-size-1);
}

.text-size-2 {
    font-size: var(--text-size-2);
}

.text-size-3 {
    font-size: var(--text-size-3);
}

.color-primary {
    color: var(--primary-color);
}

.color-secondary {
    color: var(--secondary-color);
}

.color-accent {
    color: var(--accent-color);
}

.hero-intro {
    background-color: #144B5C;
    color: white;

    p {
        margin-top: 0.8rem;
        width: 60%;
    }
}

.shadow {
    -webkit-box-shadow: 5px 5px 15px 5px #0000002a;
    box-shadow: 5px 5px 15px 5px #0000002a;
}

.translate {
    transition: all 0.3s ease-in-out;
}

.translate:hover {
    transform: translateY(-10px);
}

.relative {
    position: relative;
}

/* ============ DASHBOARD ============ */

.main-header {
    box-sizing: border-box;
    padding: 1.6rem 2rem;
    -webkit-box-shadow: 2px 2px 8px 2px #00000070;
    box-shadow: 2px 2px 8px 2px #00000070;

    h3 {
        color: var(--secondary-color);
    }
}


/* ============ STAT CARD DASHBOARD ============ */

.stats-container-right svg {
    color: var(--accent-color);
}

.stats-container {
    display: flex;
    justify-content: space-between;
    /* min-width: 325px; */
    width: 315px;
    padding: 1.5rem;
    background-color: white;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    border-radius: 4px;
    box-sizing: border-box;

    .stats-container-left {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
    }
}

.stats-container-left-title,
.stats-container-left-number {
    color: var(--secondary-color);
}

.stats-container-left-number {
    font-size: 1.5rem;
}

.stats-container-left-comparison {
    font-size: 0.875rem;
}

.up {
    color: var(--green-color);
}

.down {
    color: var(--red-color);
}

.none {
    color: rgba(0, 0, 0, 0.5);
}

/* ========= PASTILLES POUR LE STATUS DU RDV ========= */

.badge-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    width: 120px;
    border-radius: 20px;
    text-align: center;
    padding: 0.4rem 0.2rem;
}

/* En attente */
.badge-status.en-attente {
    background: var(--warning);
    color: var(--accent-color);
    border: 1px solid rgba(184, 118, 2, 0.25);
}

/* Confirmé */
.badge-status.confirme {
    background: var(--success);
    color: var(--green-color);
    border: 1px solid rgba(18, 105, 47, 0.25);
}

/* Annulé */
.badge-status.annule {
    background: var(--error);
    color: var(--red-color);
    border: 1px solid rgba(217, 38, 2, 0.25);
}

/* Terminé */
.badge-status.termine {
    background: var(--infos);
    color: var(--secondary-color);
    border: 1px solid var(--border-color);
}

.badge-status>svg {
    width: 16px;
    height: 16px;
}



.pill {
    font-size: 14px;
    padding: 0.2rem 0;
    border-radius: 20px;
    width: fit-content;
    color: white;
    opacity: 0.8;
    width: 100px;
    text-align: center;
}

/* Sub-menu  ACTIONS for Dashboard */

.admin-actions {
    text-align: right;
    padding-right: 2.438rem;
}
.admin-actions .btn,
.actions-btn {
    gap: 0.4rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--secondary-color);
    border-radius: 4px;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.actions-list {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s linear 0.25s;
    transform: translateY(-8px);
}

.actions-list.is-open {
    position: absolute;
    right: 3.5%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    visibility: visible;
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    height: fit-content;
    padding: 20px;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0s;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    form .btn {
        transition: none;
    }
    
    .cancel-btn {
        color: var(--red-color);
        background: transparent;
        border: none;
        font-size: 16px;
        padding: 0;
        cursor: pointer;
        font-size: 14px;
    }
}

.actions-list a,
.actions-list button {
    display: block;
    padding: 0.25rem 0.5rem;
    text-decoration: none;
}

.is-open>a:nth-child(1) {
    color: var(--secondary-color);
    padding: 0;
    text-align: left;
}

.is-open>form:nth-child(2)>button:nth-child(2) {
    color: red;
    border: none;
    background: transparent;
    font-size: 16px;
    padding: 0;
}


.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--secondary-color);
    margin-top: 1rem;
    border-radius: 4px;
    transition: transform 0.2s ease-in-out;
}

.back-link:hover {
    text-decoration: underline;
    transform: translateX(3px);
}


 #consentement {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  margin-bottom: 1rem !important;
}

#consentement.appointment-consentement {
    font-size: 1.2rem;
    color: var(--secondary-color);
    font-weight: bold;
}

.form-error-consentement ul li {
    color: var(--red-color);
    font-size: 0.875rem;
}


/* ============================== */
/* RESPONSIVE - ECRANS INTERMEDIAIRES */
/* ============================== */
@media screen and (max-width: 1200px) {
    .padding-center {
        padding: 4rem 4.5rem;
    }

    .hero-intro {
        p {
            width: 70%;
        }
    }
}

@media screen and (max-width: 1135px) {

    .card-top {
        position: relative;

        .actions-list {
            position: absolute;
            top: 10%;
            right: 3%;
            transform: translateY(0px);
        }

        .actions-list.is-open {
            transform: translateY(25px);
        }
    }
}

/* ============================== */
/* SEARCHBAR */
/* ============================== */
.searchbar {
    position: relative;
    max-width: 300px;
    margin: 20px 0;
}

.search-input {
    width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

/* ============================== */
/* RESPONSIVE - TABLETTES */
/* ============================== */
@media screen and (max-width: 992px) {
    .padding-center {
        padding: 3.2rem 2.4rem;
    }

    .hero-intro {
        h1 {
            margin-bottom: 2rem;
        }

        p {
            width: 100%;
            line-height: 22px;
        }
    }
}

/* ============================== */
/* RESPONSIVE - MOBILES */
/* ============================== */
@media screen and (max-width: 600px) {
    .padding-center {
        padding: 2.4rem 1.6rem;
    }
}

@media screen and (max-width: 475px) {
    .stats-container {
        width: fit-content;
    }
}