/* Styles for tablet devices */
@media only screen and (max-width: 1500px) {}

@media only screen and (max-width: 1200px) {
    .breadcrumb {
        margin-left: 0px;
    }

    .main-container {
        margin-left: 0px;
        margin-bottom: 86px;
        height: 100%;
    }
    body {
        height: 100%;
    }

    .home-gird {
        width: 100%;
        height: unset;
    }


    .login-right-container {
        display: none;
    }

    .login-body {
        padding-bottom: 0px;
    }

    /* Masquer le menu latéral sur mobile */
    .menu-container {
        left: -250px;
    }

    .bottom-menu-mobile {
        display: flex;
        bottom: 8px;
    }

    .media-tab-hide {
        display: none;
    }

    .media-tab-show {
        display: block;
    }

    .media-show {
        display: flex;
    }

    .modal {
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0px;
    }

    #recent-patient-table td:nth-child(4) {
        border-top-right-radius: 10px;
        /* Coin supérieur droit */
        border-bottom-right-radius: 10px;
        /* Coin inférieur droit */
    }

    #patient-table td:nth-child(5) {
        border-top-right-radius: 10px;
        /* Coin supérieur droit */
        border-bottom-right-radius: 10px;
        /* Coin inférieur droit */
    }
}

/* Styles spécifiques aux smartphones */
@media (max-width: 850px) {
    #search-container {
        flex-direction: column;
        width: 100%;
    }

    .step-name {
        font-size: 0.75rem;
    }

    .stepper-items {
        gap: 1rem;
    }

    .form-navigation {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .form-navigation button {
        width: 100%;
    }

    input,
    select,
    textarea {
        width: 100%;
    }

    .media-flex-column {
        flex-direction: column;
    }

    .form-column-2:not(.form-step),
    .form-column-3:not(.form-step),
    .form-column-4:not(.form-step) {
        display: flex;
        flex-direction: column;
    }

    .form-step.active {
        display: flex;
        flex-direction: column;
    }

    .media-width-100 {
        width: 100%;
    }

    .media-tab-hide {
        display: none;
    }

    .media-tab-show {
        display: block;
    }

    .home-gird {
        width: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        opacity: 0;
        animation: fadeIn 0.5s forwards ease-in-out;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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