/*
|--------------------------------------------------------------------------
| Calendrier Base Nautique AS-CEA
|--------------------------------------------------------------------------
*/


.cbn-calendar {

    width: 100%;
    max-width: 900px;

    margin: 20px auto;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}



/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/


.cbn-calendar-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 15px;

}



.cbn-title {

    font-size: 1.4rem;

    font-weight: bold;

    text-align: center;

}



.cbn-nav {

    border: none;

    background: #eeeeee;

    cursor: pointer;

    padding: 8px 14px;

    border-radius: 4px;

    font-size: 1.2rem;

}



.cbn-nav:hover {

    opacity: 0.8;

}





/*
|--------------------------------------------------------------------------
| Weekdays
|--------------------------------------------------------------------------
*/


.cbn-weekdays {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 4px;

    margin-bottom: 4px;

}



.cbn-weekday {

    text-align: center;

    font-weight: bold;

    padding: 8px 0;

}





/*
|--------------------------------------------------------------------------
| Days
|--------------------------------------------------------------------------
*/


.cbn-days {

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 4px;

}





.cbn-day {

    min-height: 90px;

    padding: 6px;

    border-radius: 6px;

    border: 1px solid #ddd;

    position: relative;

    overflow: hidden;

}



.cbn-empty {

    background: transparent;

    border: none;

}





/*
|--------------------------------------------------------------------------
| States
|--------------------------------------------------------------------------
*/


.cbn-open {

    background:
        var(--cbn-open);

}



.cbn-closed {

    background:
        var(--cbn-closed);

}



.cbn-unknown {

    background:
        var(--cbn-unknown);

}





/*
|--------------------------------------------------------------------------
| Day content
|--------------------------------------------------------------------------
*/


.cbn-number {

    display: block;

    font-weight: bold;

    font-size: 1.1rem;

    margin-bottom: 6px;

}



.cbn-surveillant {

    display: block;

    font-size: 0.85rem;

    font-weight: bold;

}



.cbn-observation {

    display: block;

    font-size: 0.75rem;

    margin-top: 4px;

}





/*
|--------------------------------------------------------------------------
| AJAX loading
|--------------------------------------------------------------------------
*/


.cbn-loading {

    opacity: 0.6;

    pointer-events: none;

}





/*
|--------------------------------------------------------------------------
| Legend
|--------------------------------------------------------------------------
*/


.cbn-legend {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 15px;

    font-size: 0.9rem;

}



.cbn-legend-item {

    display: flex;

    align-items: center;

    gap: 6px;

}



.cbn-legend-color {

    width: 18px;

    height: 18px;

    border-radius: 3px;

    border: 1px solid #ccc;

}



.cbn-legend-color.cbn-open {

    background:
        var(--cbn-open);

}



.cbn-legend-color.cbn-closed {

    background:
        var(--cbn-closed);

}



.cbn-legend-color.cbn-unknown {

    background:
        var(--cbn-unknown);

}





/*
|--------------------------------------------------------------------------
| Mobile responsive
|--------------------------------------------------------------------------
*/


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


    .cbn-day {

        min-height: 65px;

        padding: 4px;

    }



    .cbn-number {

        font-size: 0.9rem;

    }



    .cbn-surveillant {

        font-size: 0.7rem;

    }



    .cbn-observation {

        display: none;

    }



    .cbn-title {

        font-size: 1.1rem;

    }


}