/* =====================================================================
   1) LÉGENDE
   ===================================================================== */
.legend-box {
    display: inline-block;
    width: 36px;
    height: 24px;
}

    .legend-box.holiday {
        background: #4fb3f0;
    }

    .legend-box.today {
        border: 2px solid #c0392b;
        background: #fff;
    }

    .legend-box.selected {
        background-color: #0d6efd;
    }

    .legend-box.leave {
        background-color: #f8b4d9;
    }

    .legend-box.guard {
        background-color: #dc3545;
        border: 1px solid #b02a37;
    }

/* =====================================================================
   2) GRILLE ANNUELLE (responsive)
   ===================================================================== */
.year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 24px;
}

@@media (max-width: 1400px) {
    .year-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@@media (max-width: 1000px) {
    .year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@@media (max-width: 650px) {
    .year-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   3) MOIS : TITRE ET TABLEAU
   ===================================================================== */
.month-title {
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    color: #1f6a8a;
    margin-bottom: 6px;
}

.month-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .month-table th {
        background: #2b2b2b;
        color: #fff;
        text-align: center;
        font-size: .8rem;
        padding: 6px 0;
        border: 1px solid #fff;
    }

    .month-table td {
        text-align: center;
        height: 40px;
        border: 1px solid #dcdcdc;
        background: #fff;
        font-size: .95rem;
    }

        .month-table td.empty {
            background: #f0f0f0;
        }

        /* =====================================================================
   4) ÉTATS DE BASE : cliquable / désactivé
   ===================================================================== */
        .month-table td.selectable {
            cursor: pointer;
        }

            .month-table td.selectable:hover {
                background-color: #e7f1ff;
            }

        /* Week-ends + jours passés : grisés et non cliquables.
           Le fond gris ne s'applique PAS aux jours fériés, congés et gardes
           (sinon il écraserait leur couleur). */
        .month-table td.disabled-day {
            color: #adb5bd;
            cursor: not-allowed;
        }

            .month-table td.disabled-day:not(.holiday):not(.leave):not(.guard) {
                background: #f8f9fa;
            }

        /* =====================================================================
   5) ÉVÉNEMENTS : férié, garde, congé
   ===================================================================== */
        .month-table td.holiday {
            background: #4fb3f0;
            color: #000;
        }

        .month-table td.guard {
            background-color: #dc3545;
            color: #fff;
            font-weight: 600;
        }

        .month-table td.leave {
            background-color: #f8b4d9;
            color: #000;
        }

        /* Congé/garde sur un jour passé : on garde la couleur, texte un peu atténué */
        .month-table td.disabled-day.guard {
            color: #fff;
            opacity: .75; /* léger effet « passé » sans perdre la couleur */
        }

        .month-table td.disabled-day.leave {
            color: #6c757d;
        }

        .month-table td.guard .holiday-name {
            color: #fff;
        }

        /* =====================================================================
   6) AUJOURD'HUI
   ===================================================================== */
        .month-table td.today {
            outline: 2px solid #c0392b;
            outline-offset: -2px;
            font-weight: 700;
        }

        /* =====================================================================
   7) SÉLECTION : prime sur tout le reste
   ===================================================================== */
        .month-table td.selected,
        .month-table td.selected:hover {
            background-color: #0d6efd !important;
            color: #fff !important;
        }

            .month-table td.selected .holiday-name {
                color: #fff;
            }