:root {
    --modal_close_button: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
}

section:has(.etendu-individus) h2 {
    width: 100%;
}

.item-list.etendu-clefs-partage {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.item-list.etendu-clefs-partage > * {
    width: 400px;
}

#add_partage_key_button {
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 20px !important;
    background: none;
    box-shadow: var(--box-shadow);
    color: var(--primary-color) !important;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

#add_partage_key_button:hover {
    color: white !important;
    text-decoration: none;
    background-color: var(--primary-color) !important;
}

#add_partage_key_button i {
    font-size: 5rem;
    color: inherit;
}

.partage_key_info {
    margin-bottom: 5px;
}

.capdemat-clef-partage-card {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    grid-template-areas: 'icon clef statut'
                         'icon date_creation date_utilisation'
                         'icon name name'
                         'icon link link';
    gap: 10px;
    background-color: white;
    box-shadow: var(--box-shadow);
    padding: 2rem;
    border-radius: 20px;
}

.capdemat-clef-partage-card i {
    grid-area: icon;
}

.capdemat-clef-partage-card .individu_name {
    grid-area: name;
}

.capdemat-clef-partage-card .clef {
    grid-area: clef;
    cursor: pointer;
}

.capdemat-clef-partage-card .statut {
    grid-area: statut;
}

.capdemat-clef-partage-card .date_creation {
    grid-area: date_creation;
}

.capdemat-clef-partage-card .date_utilisation {
    grid-area: date_utilisation;
}

.capdemat-clef-partage-card .actions {
    grid-area: link;
    justify-content: flex-end;
}

.capdemat-clef-partage-card :where(.civilite, .nom_usage, .prenom, .prenom2, .prenom3) {
    font-weight: bold;
    margin-bottom: 10px;
}

.capdemat-clef-partage-card i {
    font-size: 5rem;
    color: var(--primary-color);
    margin-right: 1.5rem;
    height: 100%;
    float: left;
}


.capdemat-clef-partage-card > div {
    margin-bottom: 10px;
}

.capdemat-clef-partage-card > div::before {
    display: block;
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}


.capdemat-clef-partage-card > div.individu_name:not(:empty)::before {
    content: 'Individu';
}

.capdemat-clef-partage-card > div.clef::before {
    content: 'Clef';
}

.capdemat-clef-partage-card > div.date_creation::before {
    content: 'Date de création';
}

.capdemat-clef-partage-card > div.date_utilisation::before {
    content: 'Date d\'utilisation';
}

.capdemat-clef-partage-card > div.statut::before {
    content: 'Statut';
}

.revok_partage_token_link {
    color: var(--danger-color);
}

form.etendu-rattachement-form {
    display: flex;
    width: 100%;
    align-items: center;
}

form.etendu-rattachement-form > *:first-child {
    flex-grow: 1;
}


.cde_rim_rapprochement_liste #rim_ajouter_dossier_button {
    width: 100%;
    border-width: 0px;
    border-color: rgb(0, 0, 0);
    border-style: solid;
    border-radius: 20px !important;
    background: none;
    box-shadow: var(--box-shadow);
    color: var(--primary-color) !important;
    justify-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    transition: all 0.3s ease-in-out;
}

.cde_rim_rapprochement_liste #rim_ajouter_dossier_button i {
    font-size: 5rem;
    color: inherit;
}

.cde_rim_rapprochement_liste #rim_ajouter_dossier_button:hover {
    color: white !important;
}

dialog {
    opacity: 0;
    transition: opacity 0.5s;
    overscroll-behavior: contain;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    color: inherit;
    border: none;

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

dialog .btn-close {
    --btn-close-color: #000;
    --btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --btn-close-opacity: 0.5;
    --btn-close-hover-opacity: 0.75;
    --btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --btn-close-focus-opacity: 1;
    --btn-close-disabled-opacity: 0.25;
    --btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--btn-close-color);
    background: transparent var(--btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--btn-close-opacity);
    margin-left: auto;
    display: block;
    position: absolute;
    --offset: 15px;
    right: var(--offset);
    top: var(--offset);
}

dialog .btn-close:hover {
    color: var(--btn-close-color);
    text-decoration: none;
    opacity: var(--btn-close-hover-opacity);
    background: transparent var(--btn-close-bg) center/1em auto no-repeat !important;
}

dialog > *:not(header) {
    padding: 0 1rem;
}

dialog header {
    background-color: #007bff;
}

dialog header h1 {
    padding: 1rem 1rem;
    margin: 0 0 25px;
    border-bottom: 2px solid #007bff;
    color: #ffffff;
    letter-spacing: 2px;
}

/* Design des modales ouvertes (avec l'attribut open) */
dialog[open] {
    animation: fade-in 0.5s forwards;
}

/* Design de l'arrière plan des modale (partie sombre) */
dialog::backdrop {
    background-color: hsla(240, 5%, 34%, 0.6);
    backdrop-filter: blur(3px);
    animation: fade-in 0.2s forwards;
}

.capdemat_demande_card.etendu {
    background-color: white;
    box-shadow: var(--box-shadow);
    padding: 2rem;
    border-radius: 20px;
    margin-bottom: 25px;
    display: grid;
    gap: 15px;
    align-items: flex-start;
    grid-template-columns: auto repeat(4, 1fr);
    grid-template-areas: 'icon num_dossier date   demandeur    action'
                         'icon nom_demande status beneficiaire action' !important;
}

.capdemat_demande_card.etendu .demandeur {
    display: block !important;
    order: 1 !important;
    grid-area: demandeur !important;
}

.capdemat_demande_card.etendu .demandeur::before {
    content: 'Demandeur' !important;
}

.capdemat_demande_card.etendu .statut {
    display: block !important;
    order: 1 !important;
    grid-area: status !important;
}

.capdemat_demande_card.etendu .statut::before {
    content: 'Statut' !important;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}


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

    .item-list.etendu-clefs-partage {
        grid-template-columns: none;
        grid-auto-columns: minmax(250px, 1fr);
        text-align: center;
        justify-content: center;
    }

    .capdemat-clef-partage-card {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        background-color: white;
        box-shadow: var(--box-shadow);
        padding: 1rem;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .capdemat-clef-partage-card i {
        width: 100%;
        text-align: center;
        margin: 0 0 15px 0 !important;
        height: fit-content;
    }

    .item-list.etendu-clefs-partage > * {
        width: 100%;
    }
}