/*
==========================================================

LIBURU

agenda.css

Gestion de l'agenda

==========================================================
*/


/******************************************************
 CONTENEUR
******************************************************/

.agenda_container
{
    width:100%;
}



/******************************************************
 GRILLE DES JOURS
******************************************************/

.agenda_grille
{
    width:100%;

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(150px,1fr)
        );

    gap:12px;
}

/******************************************************
 JOUR
******************************************************/

.jour
{
    width:100%;

    min-width:0;

    height:200px;
    max-height:200px;

    background:#fff;

    border-radius:16px;

    padding:12px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.06);

    display:flex;

    flex-direction:column;

    overflow:hidden;

    position:relative;
}
.contenu
{
    flex:1;

    overflow:hidden;

    position:relative;
}
.voir_plus
{
    position:absolute;

    bottom:8px;

    left:50%;

    transform:translateX(-50%);

    border:none;

    background:#667eea;

    color:white;

    padding:5px 14px;

    border-radius:20px;

    cursor:pointer;

    font-size:12px;

    z-index:5;
}

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.10);
}



/******************************************************
 ENTETE JOUR
******************************************************/

.jour_entete
{
    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;
}



.jour_entete h2
{
    font-size:16px;

    font-weight:600;
}



.jour_entete h2 span
{
    display:block;

    font-size:13px;

    color:#888;
}



/******************************************************
 BOUTON +
******************************************************/

.ajouter
{
    width:34px;

    height:34px;

    border-radius:50%;

    border:none;

    background:#667eea;

    color:white;

    font-size:24px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;
}



/******************************************************
 RESPONSIVE

 Aligné avec agenda.js

******************************************************/


@media(max-width:1100px)
{
    .agenda_grille
    {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px,1fr)
            );
    }
}



@media(max-width:768px)
{
    .agenda_grille
    {
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(220px,1fr)
            );
    }
}



@media(max-width:420px)
{

.agenda_grille
{
    grid-template-columns:
        1fr;
}

}

/******************************************
EVENEMENT - LIGNE INFORMATIONS
******************************************/

.event_ligne_infos
{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;
}


/******************************************
BOUTON SUPPRESSION EVENT
******************************************/

.supprimer_event
{
    width:22px;

    height:22px;

    padding:0;

    border:none;

    border-radius:50%;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;
}

/******************************************
TASKS D'ANTICIPATION
******************************************/

.task_anticipation
{
    font-size:13px;

    padding:6px 8px;

    margin-top:5px;

    background:#f5f5f5;

    border-radius:8px;
}

.liste_tasks_agenda
{
    margin-top:10px;

    padding-left:8px;

    max-height:80px;

    overflow:hidden;
}


.task_agenda
{
    font-size:13px;

    color:#555;

    padding:4px 0;

    cursor:pointer;
}


.task_agenda:hover
{
    color:#667eea;
}

.task_agenda_date
{
    font-size:13px;

    padding:6px 8px;

    margin-top:5px;

    background:#f5f5f5;

    border-radius:8px;

    cursor:pointer;

    color:#555;
}


.task_agenda_date:hover
{
    color:#667eea;
}

/*
======================================================
LIMITATION AFFICHAGE CONTENU JOUR
======================================================
*/

.jour
{
    height:260px;
    overflow:hidden;
}


.contenu
{
    position:relative;
    overflow:hidden;
}



.voir_plus_jour
{
    margin-top:10px;

    width:100%;

    padding:6px 10px;

    border:none;

    border-radius:8px;

    background:#667eea;

    color:white;

    cursor:pointer;

    font-size:13px;
}


.voir_plus_jour:hover
{
    opacity:.85;
}

/******************************************
BOUTON STATUT TASK
******************************************/

.task_statut
{
    width:20px;

    height:20px;

    padding:0;

    margin:0 6px 0 0;

    border:none;

    background:transparent;

    color:#555;

    font-size:18px;

    line-height:20px;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    outline:none;

    box-shadow:none;

    appearance:none;

    -webkit-appearance:none;
}


.task_statut:hover
{
    color:#667eea;
}


.task_statut:focus
{
    outline:none;

    box-shadow:none;
}


.task_statut:disabled
{
    cursor:default;

    opacity:.6;
}