:root {
    --c1: #27ae60;
    --c2: #2980b9;
    --bg: #ecf0f1;
    --font-fam: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--bg);
    font-family: var(--font-fam);
    margin: 0;
    padding: 0;
    color: #333;
}

/* === UI FORM === */
.actions-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 10px;
}

.box {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

h3 {
    color: var(--c2);
    margin-top: 0;
    border-bottom: 3px solid var(--c1);
    padding-bottom: 10px;
}

.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.btn-gen {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}

.btn-back {
    background: #95a5a6;
}

.btn-print {
    background: #8e44ad;
}

select,
input[type="text"] {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* === LISTES === */
.lists-wrap {
    display: flex;
    gap: 10px;
    height: 50vh;
    min-height: 300px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.list-col {
    flex: 1;
    width: 50%;
    min-width: 50%;
    border: 2px solid #eee;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background: #fdfdfd;
    overflow: hidden;
}

.list-head {
    padding: 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-weight: bold;
}

.list-col:last-child .list-head {
    background: #d5f5e3;
}

.list-body {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
}

.card {
    background: white;
    padding: 8px;
    margin: 5px;
    border: 1px solid #eee;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
}
@media(min-width: 400px) {
    .card { flex-direction: row; align-items: center; }
}


.card:hover {
    background: #eaf2f8;
    border-color: #3498db;
}

.card small {
    font-size: 0.8em;
    color: #999;
}

.missing-date {
    border-left: 3px solid red;
    background: #fff5f5;
}

.search-box-list {
    display: flex;
    margin: 5px 0;
}

.search-input-list {
    width: 100%;
    padding: 6px;
}

.btn-clear-list {
    background: #e74c3c;
    color: white;
    border: none;
    cursor: pointer;
}

/* === APERÇU ECRAN === */
.print-scaler-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 50px;
    /* Permettre le scroll horizontal du wrapper si l'enfant est plus grand */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch;
}

.page-sheet {
    width: 1122px;
    height: 794px;
    background: white;
    margin: 20px auto;
    padding: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    transform-origin: top center;
    /* Important: ne pas cacher l'overflow pour que les popups fonctionnent si besoin, 
       mais ici on veut scroll la page entière */
    flex-shrink: 0; /* Empêche l'écrasement dans le flex container */
}

/* === TABLEAU === */
.cal-wrap {
    flex-grow: 1;
    border: 1px solid #999;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.month-h {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    padding: 5px 0;
    color: var(--c2);
    border-bottom: 2px solid var(--c1);
    height: 50px;
    background: #f8f9fa;
}

.cal-table {
    width: 100%;
    height: calc(100% - 50px);
    border-collapse: collapse;
    table-layout: fixed;
}

.cal-table thead th {
    background: transparent;
    color: #2c3e50;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #ccc;
    border-bottom: 2px solid #2c3e50;
    height: 25px;
}

.cal-table tbody tr.cal-row {
    height: 16.66% !important;
}

.cal-table td {
    border: 1px solid #ccc;
    vertical-align: top;
    padding: 0;
    position: relative;
    overflow: hidden;
    width: 14.2857%;
}

/* Positionnement du numéro du jour */
.day-num {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 1.2em !important;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.3);
    z-index: 10;
    pointer-events: none;
    line-height: 1;
}

/* Événements */
.evts {
    position: relative;
    z-index: 2;
    /* AUGMENTATION DU PADDING pour laisser de la place au Saint ET Férié */
    padding-top: 35px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.evt {
    font-size: 7pt;
    padding: 1px 2px;
    border-left: 3px solid;
    line-height: 1.15; /* Légèrement augmenté pour éviter troncature */
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
}

.picto {
    font-size: 0.9em;
    margin-right: 2px;
}

.gender-m {
    border-left-color: #00bcd4;
    background-color: #f0fbff;
}

.gender-f {
    border-left-color: #e91e63;
    background-color: #fff0f5;
}

.gender-u {
    border-left-color: #90a4ae;
    background-color: #f5f5f5;
}

/* Style spécifique pour les événements déplacés ou surchargés */
.evt-displaced,
.evt-surcharged { /* AJOUTÉ: Style pour l'événement surchargé */
    border: 1px dashed #c0392b;
    background: #fff5f5;
    color: #c0392b; /* Texte rouge pour alerter */
    font-weight: bold;
}

#toggle-empty-rows.active {
    background: #e74c3c !important;
}

/* === CORRECTION PDF SPECIFIQUE === */
/* Ces règles s'appliquent uniquement pendant la génération PDF */
.pdf-export-mode .evt {
    overflow: visible !important;
    white-space: normal !important;
    height: auto !important;
    padding-bottom: 4px !important; /* Espace en bas pour éviter troncature */
    margin-bottom: 2px !important;
}

.pdf-export-mode .saint-du-jour,
.pdf-export-mode .jour-ferie {
    overflow: visible !important;
    white-space: normal !important; /* Permettre au saint de s'afficher en entier si besoin */
    height: auto !important;
    padding-bottom: 2px;
}

.pdf-export-mode .evt-detail {
    line-height: 1.3 !important;
}

.pdf-stretch-rows {
    width: 100%;
    overflow: visible !important;
}

/* === ADAPTATION POUR MOBILE (Corrigé pour alignement strict à gauche) === */
@media (max-width: 768px) {
    /* Sur mobile, on retire le scale pour éviter que ce soit tout petit.
       On laisse le conteneur scroller (overflow-x: auto sur .print-scaler-wrapper).
       On aligne à gauche pour éviter le décalage. */
    .print-scaler-wrapper {
        align-items: flex-start; 
        padding-left: 0; /* Alignement strict à gauche */
    }
    
    .page-sheet {
        margin: 20px 0 20px 10px; /* Ajout d'une petite marge à gauche pour ne pas coller au bord */
        transform: none !important; /* Pas de réduction */
        /* On garde la largeur fixe de 1122px pour avoir la "grille agrandie" demandée */
    }
}

/* === STYLES POUR LES SAINTS ET JOURS FÉRIÉS === */
.saint-du-jour {
    font-size: 0.75em;
    color: #e67e22;
    font-weight: bold;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 25;
    max-width: 95%; /* AUGMENTÉ pour plus de place */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.jour-ferie {
    font-size: 0.75em;
    color: #c0392b;
    font-weight: bold;
    position: absolute;
    top: 18px; /* DÉCALÉ légèrement plus bas (2px de plus) */
    left: 2px;
    z-index: 25;
    max-width: 95%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* === STYLE POUR LE PICTO "▼" (Triangle) === */
/* Le picto triangle est nécessaire pour l'espace, on le garde mais invisible ou blanc */
.evt-detail::after {
    content: "▼";
    display: block;
    text-align: center;
    font-size: 0.6em;
    margin-top: 2px;
    color: white; /* Blanc pour être invisible visuellement mais présent */
    font-weight: bold;
    line-height: 1;
}

/* En mode PDF, on veut être sûr que cet espace existe pour ne pas tronquer le texte au-dessus */
.pdf-export-mode .evt-detail::after {
    content: "▼"; 
    color: white;
    display: block;
    height: 10px; /* Force une hauteur minimale en bas de cellule */
}

/* === STYLE POUR LA BULLE ZOOM (Pop-up) === */
.zoom-bubble {
    position: fixed;
    z-index: 99999;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    font-size: 0.95rem;
    line-height: 1.4;
    max-width: 280px;
    /* On réactive les pointer-events pour pouvoir cliquer le bouton copier */
    pointer-events: auto; 
    white-space: normal;
    border: 3px solid transparent;
    animation: fadeIn 0.15s ease-out;
    background-color: white; /* Assurer que la bulle a un fond */
}

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.zoom-bubble .evt-titre {
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 2px;
}
.zoom-bubble .evt-detail {
    margin-bottom: 4px;
}
.zoom-bubble .evt-highlight {
    font-weight: bold;
    color: #e67e22;
}

/* Bouton copier dans la bulle */
.btn-copy-bubble {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 5px;
    background: #eaf2f8; /* Couleur de fond plus visible */
    border: 1px solid #3498db;
    border-radius: 4px;
    color: #2980b9;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    font-size: 0.8em;
    transition: background-color 0.1s;
}
.btn-copy-bubble:hover {
    background: #d5e5f5;
}