/* ============================================================
   PLANNING BMPM - Styles spécifiques à la page planning
   ============================================================ */

/* 0. Layout planning : body et wrapper avec hauteur fixe pour footer visible + scroll grille */
body.planning-page {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

/* Wrapper sous le header = viewport - hauteur header (64px) */
body.planning-page > div.h-screen {
    height: calc(100vh - 64px) !important;
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 1. Conteneur principal du planning : prend l'espace restant, scroll interne */
body.planning-page .grid-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: white;
    position: relative;
}

.grid-container::-webkit-scrollbar { width: 14px; height: 14px; }
.grid-container::-webkit-scrollbar-track { background: #f1f1f1; }
.grid-container::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 10px; border: 3px solid #f1f1f1; }
.grid-container::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* 2. Colonnes sticky */
.col-div {
    position: sticky;
    left: 0;
    z-index: 35;
    background-color: #1e293b !important;
    color: white;
    min-width: 90px;
    width: 90px;
    text-align: center;
    font-weight: 900;
    border-right: 2px solid #000 !important;
}

.col-perso {
    position: sticky;
    left: 90px;
    z-index: 30;
    background-color: #ffffff !important;
    min-width: 220px;
    width: 220px;
    border-right: 2px solid #1e293b00 !important;
    text-align: center;
    vertical-align: middle;
    padding: 0 !important;
}

.col-perso > div { padding: 4px 0; }

/* 3. En-tête sticky */
.sticky-header th {
    position: sticky !important;
    top: 0 !important;
    z-index: 60;
    background-color: #f8fafc !important;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

.sticky-header th.col-div { z-index: 70; left: 0; background-color: #1e293b !important; }
.sticky-header th.col-perso { z-index: 65; left: 90px; background-color: #f1f5f9 !important; }

/* 4. Cellules */
.cell {
    min-width: 115px;
    width: 115px;
    height: 50px;
    border: 1px solid #cbd5e1 !important;
    vertical-align: top;
    background-color: white;
    transition: background-color 0.2s;
    padding: 0 !important;
    overflow: hidden;
    position: relative !important;
    contain: layout style;
    box-sizing: border-box;
}

/* 5. Inputs & selects */
.select-mini {
    display: block;
    width: 100%;
    height: 25px;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 2px;
    margin: 0;
    border: none;
    background: transparent;
    color: #1e40af;
    text-align: center;
}

.input-note {
    display: block;
    width: 100%;
    height: 25px;
    font-size: 10px;
    padding: 2px 4px;
    background: transparent;
    border: none;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    text-align: center;
    margin: 0;
}

/* 6. États cellules */
.not-garde {
    background-color: #e2e8f0 !important;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255,255,255,0.4) 5px, rgba(255,255,255,0.4) 10px);
}

.today { background-color: #ffedd5 !important; }

/* 7. Couleurs absences */
.bg-abs-CORG { background-color: #3b82f6 !important; color: white !important; }
.bg-abs-STAGE { background-color: #bbf7d0 !important; }
.bg-abs-MPE { background-color: #fbcfe8 !important; }
.bg-abs-PATC { background-color: #fed7aa !important; }
.bg-abs-PERM, .bg-abs-PERM_EDT, .bg-abs-PERM_DIV, .bg-abs-PERM_BSC, .bg-abs-PERM_CDC {
    background-color: #fef3c7 !important;
    color: #92400e !important;
    position: relative !important;
}
.bg-abs-CORG select, .bg-abs-CORG input { color: white !important; }
.bg-abs-PERM .static-view { user-select: none; }

/* 8. Erreurs */
.cell-error { background-color: #dc2626 !important; transition: background-color 0.3s ease; }
.text-error { color: #ffffff !important; font-weight: 900 !important; background-color: transparent !important; }
.cell-engin-error {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
    font-weight: 900 !important;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

/* 9. Récap engins */
.row-engin-label {
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    font-size: 11px;
    font-weight: 800;
    border-bottom: 1px solid #1e293b !important;
}
.cell-engin {
    background-color: #0f172a !important;
    color: white !important;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle !important;
    border: 1px solid #1e293b !important;
}

/* 10. Séparateurs */
.spacer-bordee td {
    height: 45px;
    background-color: #0f172a !important;
    color: white;
    font-weight: 900;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 2px solid rgba(0, 0, 0, 0) !important;
}
.bordee-label { position: sticky; left: 0; padding-left: 20px; width: 100vw; }
.spacer-sixieme td {
    height: 20px;
    background-color: #e2e8f0 !important;
    border-top: 1px solid #94a3b8 !important;
    border-bottom: 1px solid #94a3b8 !important;
}
.vertical-text {
    writing-mode: vertical-lr;
    text-orientation: upright;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 900;
    margin: 0 auto;
}

/* 11. Niveaux emploi */
.niv-4 { background-color: #3b82f6 !important; color: #ffffff !important; }
.niv-3 { background-color: #fde047 !important; color: #854d0e !important; }
.niv-2 { background-color: #4ade80 !important; color: #14532d !important; }
.niv-1 { background-color: #f9a8d4 !important; color: #831843 !important; }

/* 12. Badges stats */
.stat-pill { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 900; margin-top: 4px; margin-bottom: 2px; }
.stat-ok { background-color: #22c55e !important; color: white !important; }
.stat-surplus { background-color: #f97316 !important; color: white !important; }
.stat-alerte { background-color: #ef4444 !important; color: white !important; }

/* 13. Permissions (cellules planning) */
.perm-status-badge { position: absolute; top: 2px; right: 2px; font-size: 14px; z-index: 20; pointer-events: none; }
.perm-settings-btn {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    cursor: pointer;
    font-size: 14px;
    transition: transform 0.2s ease;
    opacity: 1 !important;
    color: #92400e !important;
}
.perm-settings-btn:hover { transform: rotate(45deg) scale(1.2); }
#perm-context-menu {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    min-width: 180px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
    animation: fadeInScale 0.1s ease-out;
}
#perm-context-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.has-new-perm-start { border-left: 3px solid rgba(30, 41, 59, 0.5) !important; position: relative; }

/* 14. Boutons */
.btn-pdf {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
    padding: 2px;
    border-radius: 4px;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transition: all 0.2s;
    cursor: pointer;
}
.btn-pdf:hover { background: #3b82f6; color: white; }
.btn-filter.active { background-color: #ef4444 !important; color: white; }

/* 15. Loader planning */
#loading:not(.hidden) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #1e293b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* 16. Performance */
.planning-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    will-change: transform;
    backface-visibility: hidden;
    overscroll-behavior-x: contain;
}
/* Desktop/tablette : content-visibility pour alléger le rendu des lignes hors écran */
@media (min-width: 769px) {
    .grid-container tr { content-visibility: auto; contain-intrinsic-size: 1px 50px; }
}
@media (min-width: 769px) {
    .grid-container * { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
}

/* 17. Utilitaires */
.hide-element { display: none !important; }
.grid-container input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; opacity: 0.6; }
.grid-container input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* 18. Responsive tablette */
@media (min-width: 768px) and (max-width: 1024px) {
    .col-div { min-width: 70px !important; width: 70px !important; font-size: 10px; }
    .col-perso { left: 70px !important; min-width: 180px !important; width: 180px !important; font-size: 12px; }
    .cell { min-width: 100px; width: 100px; height: 45px; }
    .select-mini { font-size: 10px; height: 22px; }
    .input-note { font-size: 9px; height: 23px; }
}

/* 19. Responsive mobile - mêmes tailles de cases/colonnes que PC, scroll fluide */
@media (max-width: 768px) {
    .h-screen.planning-page {
        height: 100dvh !important;
        display: flex;
        flex-direction: column;
    }
    #nav-content.mobile-active {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        background-color: #1e293b;
        padding: 1rem;
        border-bottom: 1px solid #334155;
        z-index: 50;
        animation: slideDown 0.2s ease-out forwards;
    }
    /* Colonnes DIV et NOM réduites sur mobile pour gagner de la place */
    .col-div { min-width: 50px !important; width: 50px !important; font-size: 9px !important; padding: 2px !important; }
    .col-perso { left: 50px !important; min-width: 120px !important; width: 120px !important; font-size: 10px !important; padding: 2px !important; }
    .sticky-header th.col-perso { left: 50px !important; }
    /* Conteneur scroll : hauteur fixe pour éviter reflows, une seule couche GPU */
    #mainContainer.grid-container {
        flex: 1;
        min-height: 0;
        height: calc(100dvh - 64px - 3rem); /* header 64px, footer ~3rem */
        width: 100%;
        overflow: auto;
        overflow-x: auto;
        overflow-y: auto;
        display: block;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        isolation: isolate;
    }
    /* Table : une seule couche GPU pour tout le contenu (scroll = déplacer la texture) */
    #mainContainer.grid-container table {
        transform: translate3d(0, 0, 0);
        will-change: transform;
        table-layout: fixed;
    }
    /* Chargement complet du tableau (pas de content-visibility) */
    #mainContainer.grid-container table,
    #mainContainer.grid-container tbody,
    #mainContainer.grid-container thead,
    #mainContainer.grid-container tr,
    #mainContainer.grid-container th,
    #mainContainer.grid-container td {
        content-visibility: visible !important;
        contain-intrinsic-size: none !important;
    }
    /* Pas de backface sur chaque cellule (trop de layers = saccades) */
    #mainContainer.grid-container * {
        backface-visibility: visible !important;
    }
    #mainContainer.grid-container,
    #mainContainer.grid-container table {
        backface-visibility: hidden !important;
    }
    /* Désactiver contain sur les cellules pour alléger le travail au scroll */
    .cell {
        contain: none !important;
        min-width: 115px !important;
        width: 115px !important;
        height: 50px !important;
        font-size: inherit;
        transition: none;
    }
    .select-mini { height: 25px !important; font-size: 11px !important; padding: 6px 2px !important; }
    .input-note { height: 25px !important; font-size: 10px !important; padding: 2px 4px !important; }
    .spacer-bordee td { height: 45px; font-size: 14px; letter-spacing: 3px; }
    .spacer-sixieme td { height: 20px; }
    .vertical-text { font-size: 28px; letter-spacing: 6px; }
    .stat-pill { font-size: 11px; padding: 2px 8px; }
    .perm-settings-btn { width: 18px; height: 18px; font-size: 14px; }
    .perm-status-badge { font-size: 14px; }
    #perm-context-menu { min-width: 180px; font-size: inherit; }
    #loading:not(.hidden) { padding: 20px; font-size: inherit; }
    .spinner { width: 40px; height: 40px; border-width: 4px; }
}

/* 20. Petit mobile - colonnes DIV/NOM encore plus compactes */
@media (max-width: 480px) {
    .col-div { min-width: 45px !important; width: 45px !important; font-size: 8px !important; }
    .col-perso { left: 45px !important; min-width: 100px !important; width: 100px !important; font-size: 9px !important; }
    .sticky-header th.col-perso { left: 45px !important; }
    .cell { min-width: 115px !important; width: 115px !important; height: 50px !important; }
    .select-mini { height: 25px !important; font-size: 11px !important; }
    .input-note { height: 25px !important; font-size: 10px !important; }
    .spacer-bordee td { height: 45px; font-size: 14px; }
    #perm-context-menu { min-width: 180px; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}