/* ═══════════════════════════════════════════════════════════════
   Culture Controle — Feuille de présence — Système de design
   ─────────────────────────────────────────────────────────────
   Palette principale :
     Vert accent   : #79b92c  (--green)
     Vert foncé    : #5d8f1f  (--green-dark, hover)
     Vert pâle     : #edf5d9  (--green-light, fonds subtils)
     Noir sidebar  : #0d0d0d  (--sidebar-bg)
     Fond de page  : #dde0e4  (--bg-page, gris très léger)
     Fond carte    : #ffffff  (--bg-card)
     Texte principal : #1a1a1a (--text-base)
     Texte secondaire: #6b7280 (--text-muted)
   ─────────────────────────────────────────────────────────────
   Typographie : Inter (Google Fonts CDN)
   Framework   : Bootstrap 5.3.3 + Bootstrap Icons 1.11.3
   ═══════════════════════════════════════════════════════════════ */

:root {
    --green:         #79b92c;
    --green-dark:    #5d8f1f;
    --green-light:   #edf5d9;
    --sidebar-bg:    #0d0d0d;
    --sidebar-hover: rgba(121, 185, 44, .15);
    --sidebar-active-bar: #79b92c;
    --text-base:     #1a1a1a;
    --text-muted:    #6b7280;
    --border:        #d1d5db;
    --bg-page:       #dde0e4;
    --bg-card:       #ffffff;
    --shadow-sm:     0 1px 4px rgba(0,0,0,.09);
    --shadow-md:     0 4px 16px rgba(0,0,0,.13);
    --radius:        .6rem;
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--bg-page);
    font-size: .9rem;
    color: var(--text-base);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ══════════════════════════════════════
   SIDEBAR
   Barre de navigation latérale fixe (240 px).
   Fond noir, liens blancs, indicateur vert sur le lien actif.
   Masquée sur mobile → remplacée par le panneau offcanvas.
══════════════════════════════════════ */
.sidebar {
    width: 240px;
    min-width: 240px;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 12px rgba(0,0,0,.25);
}

.sidebar-brand {
    display: block;
    text-decoration: none;
    padding: 1.25rem 1rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand img {
    display: block;
    width: 100%;
    height: auto;
}

/* Liens nav */
.sidebar .nav-link {
    color: rgba(255,255,255,.9);
    border-radius: .4rem;
    padding: .52rem .9rem;
    margin-bottom: 2px;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    position: relative;
}
.sidebar .nav-link i { opacity: .9; }

.sidebar .nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--green);
}
.sidebar .nav-link:hover i { opacity: 1; }

.sidebar .nav-link.active {
    background: var(--sidebar-hover);
    color: var(--green);
    font-weight: 600;
}
.sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 3px;
    background: var(--green);
    border-radius: 0 3px 3px 0;
}
.sidebar .nav-link.active i { opacity: 1; }

/* Séparateur de section */
.sidebar .nav-section {
    color: rgba(255,255,255,.85);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .9rem 1rem .3rem;
}

/* Sous-section dans la sidebar (niveau 2, moins marqué que nav-section) */
.sidebar .nav-subsection,
.sidebar-offcanvas .nav-subsection {
    color: rgba(255,255,255,.45);
    font-size: .6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .6rem 1rem .2rem 1.4rem;
}

/* Footer sidebar */
.sidebar > div.p-3 {
    background: rgba(0,0,0,.3);
}

/* ══════════════════════════════════════
   LAYOUT
   Structure principale : sidebar + zone principale.
   La zone principale contient la topbar et le contenu de page.
══════════════════════════════════════ */
.main-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Topbar */
.topbar {
    background: var(--bg-card);
    border-bottom: 2px solid var(--green);
    padding: .7rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 200;
}
.topbar .fw-semibold {
    color: var(--text-base);
    font-size: .95rem;
    letter-spacing: .01em;
}
.topbar .text-muted {
    color: var(--text-muted) !important;
    font-size: .82rem;
}

.page-content {
    padding: 1.75rem;
    flex: 1;
}

/* ══════════════════════════════════════
   CARDS
   Toutes les cartes de l'application.
   Fond blanc, coins arrondis, ombre portée légère.
   Les card-header principaux reçoivent un accent vert en bas.
══════════════════════════════════════ */
.card {
    border: none;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    background: var(--bg-card);
    overflow: hidden;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transition: box-shadow .2s;
}

.card-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    padding: .9rem 1.25rem;
    color: var(--text-base);
}
.card-header.bg-dark,
.card-header[class*="bg-"] {
    color: inherit;
}

/* Accent vert sur les card-header principaux */
.card-header.card-header-brand {
    background: var(--sidebar-bg);
    color: #fff;
    border-bottom: 2px solid var(--green);
}

/* ══════════════════════════════════════
   BOUTONS — override Bootstrap
   Remappe btn-primary et btn-success sur la couleur verte #79b92c.
   btn-dark utilise le noir de la sidebar.
   Les variantes outline gardent la cohérence chromatique.
══════════════════════════════════════ */
.btn-primary,
.btn-success {
    background: var(--green) !important;
    border-color: var(--green) !important;
    color: #fff !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-success:hover {
    background: var(--green-dark) !important;
    border-color: var(--green-dark) !important;
}
.btn-primary:focus,
.btn-success:focus {
    box-shadow: 0 0 0 .2rem rgba(121,185,44,.35) !important;
}

.btn-outline-primary {
    color: var(--green) !important;
    border-color: var(--green) !important;
}
.btn-outline-primary:hover {
    background: var(--green) !important;
    color: #fff !important;
}

.btn-dark {
    background: var(--sidebar-bg) !important;
    border-color: var(--sidebar-bg) !important;
    color: #fff !important;
}
.btn-dark:hover {
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
}

.btn-outline-secondary {
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}
.btn-outline-secondary:hover {
    background: var(--border) !important;
    color: var(--text-base) !important;
}

/* ══════════════════════════════════════
   FORMULAIRES
   Focus vert sur tous les champs (form-control et form-select).
══════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
    border-color: var(--green) !important;
    box-shadow: 0 0 0 .2rem rgba(121,185,44,.2) !important;
}

/* ══════════════════════════════════════
   BADGES & ALERTS
   Surcharge des couleurs Bootstrap pour aligner sur la palette verte.
══════════════════════════════════════ */
.badge.bg-success { background: var(--green) !important; }
.badge.bg-primary { background: var(--green) !important; }

.alert-success {
    background: var(--green-light);
    border-color: var(--green);
    color: var(--green-dark);
}

/* ══════════════════════════════════════
   TABLE POINTAGE
   Styles spécifiques au tableau de saisie mensuelle.

   Architecture du scroll :
     .pointage-scroll → conteneur à hauteur limitée (calc 100vh)
       → permet sticky header (thead) ET sticky footer (tfoot)
       → affiche toutes les colonnes + scroll horizontal sur mobile

   Couleurs de statut (fond + texte coloré par catégorie) :
     travaille   → blanc (neutre)
     teletravail → vert menthe
     formation   → violet lavande
     conge       → bleu clair
     ferie       → jaune ambre
     maladie     → orange saumon
     absent      → rouge clair
     weekend     → gris neutre
══════════════════════════════════════ */
.table-pointage {
    font-size: .8rem;
}

.table-pointage thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--sidebar-bg);
    color: rgba(255,255,255,.9);
    white-space: nowrap;
    vertical-align: middle;
    font-size: .73rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    border-color: #2a2a2a;
}

/* Conteneur tableau pointage — scroll interne pour sticky header */
.table-responsive.pointage-scroll {
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    overflow-x: auto;
}

/* Toutes les colonnes visibles dans le scroll — pas de masquage responsive */
.pointage-scroll th[class*="d-none"],
.pointage-scroll td[class*="d-none"] {
    display: table-cell !important;
}

/* Ligne totaux sticky en bas du conteneur */
.table-pointage tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 9;
}

/* Bouton sauvegarder flottant */
.btn-save-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.75rem;
    z-index: 1050;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    border-radius: 2rem;
    padding: .55rem 1.4rem;
    font-weight: 600;
    transition: box-shadow .2s, transform .1s;
}
.btn-save-float:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.32); }
/* Première ligne de thead : accent vert sur le bord bas */
.table-pointage thead tr:last-child th {
    border-bottom: 2px solid var(--green) !important;
}

.table-pointage tbody td {
    vertical-align: middle;
    border-color: #c4c9d0;
    border-bottom: 1px solid #c4c9d0;
}

/* Séparation plus nette entre les lignes */
.table-pointage tbody tr {
    border-bottom: 1px solid #bdc3cc;
}
.table-pointage tbody tr:hover td {
    filter: brightness(.96);
}

/* Cellule HORAIRES */
.horaires-cell { min-width: 100px; }
.horaires-cell input[type="time"] {
    width: 100%;
    padding: .15rem .3rem;
    font-size: .78rem;
}

/* Textarea d'observation : auto-hauteur, redimensionnable verticalement */
.textarea-notes {
    font-size: .78rem;
    padding: .2rem .35rem;
    resize: vertical;       /* L'utilisateur peut agrandir verticalement */
    min-height: 30px;
    overflow: hidden;       /* Empêche la scrollbar flash pendant le calcul JS */
    line-height: 1.4;
    white-space: pre-wrap;  /* Conserve les retours à la ligne */
}

.table-pointage input[type="time"],
.table-pointage input[type="number"],
.table-pointage input[type="text"] {
    font-size: .78rem;
    padding: .2rem .35rem;
}
.table-pointage select {
    font-size: .78rem;
    padding: .2rem .35rem;
}

/* Sous-total hebdomadaire */
.table-pointage .row-week-total td {
    background: #edf5d9;
    border-top: 2px solid var(--green) !important;
    font-size: .8rem;
    font-weight: 600;
    color: var(--green-dark);
}

/* ── Couleurs de statut ── */
tr.statut-weekend td    { background: #e4e6ea; color: #6b7280; }
tr.statut-ferie td      { background: #fef3c7; color: #92400e; border-bottom-color: #f6d860 !important; }
tr.statut-conge td      { background: #dbeafe; color: #1e40af; border-bottom-color: #93c5fd !important; }
tr.statut-maladie td    { background: #fed7aa; color: #9a3412; border-bottom-color: #fb923c !important; }
tr.statut-absent td     { background: #fecaca; color: #991b1b; border-bottom-color: #f87171 !important; }
tr.statut-travaille td  { background: #ffffff; }
tr.statut-teletravail td{ background: #bbf7d0; color: #14532d; border-bottom-color: #4ade80 !important; }
tr.statut-formation td  { background: #e9d5ff; color: #5b21b6; border-bottom-color: #c084fc !important; }

/* ══════════════════════════════════════
   GRILLE MOIS
   Cartes mensuelles sur le tableau de bord.
   La carte du mois courant est surlignée en vert plein.
   Un point ● vert indique les mois avec des données saisies.
══════════════════════════════════════ */
.month-grid .month-card {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: .65rem 1rem;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-base);
    background: var(--bg-card);
    transition: all .18s;
    font-size: .875rem;
    box-shadow: var(--shadow-sm);
}
.month-grid .month-card:hover {
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 2px 8px rgba(121,185,44,.25);
    transform: translateY(-1px);
}
.month-grid .month-card.current {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(121,185,44,.35);
}
.month-grid .month-card.has-data {
    font-weight: 600;
}
.month-grid .month-card.has-data::after {
    content: '●';
    display: block;
    font-size: .5rem;
    color: var(--green);
    margin-top: .15rem;
}
.month-grid .month-card.current::after {
    color: rgba(255,255,255,.7);
}

/* ══════════════════════════════════════
   OFFCANVAS SIDEBAR MOBILE
   Panneau latéral glissant sur les écrans < 992 px.
   Reprend exactement les mêmes styles que la sidebar desktop.
══════════════════════════════════════ */
.sidebar-offcanvas {
    background: var(--sidebar-bg) !important;
    width: 260px !important;
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
}
.sidebar-offcanvas .sidebar-brand { padding: 1rem; }
.sidebar-offcanvas .nav-link { color: rgba(255,255,255,.9); font-size: .875rem; }
.sidebar-offcanvas .nav-link:hover  { background: var(--sidebar-hover); color: var(--green); }
.sidebar-offcanvas .nav-link.active { background: var(--sidebar-hover); color: var(--green); font-weight: 600; }
.sidebar-offcanvas .nav-section     { color: rgba(255,255,255,.85); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .9rem 1rem .3rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE DE CONNEXION
   Carte centrée sur fond gris, accent vert en haut, inputs stylisés.
   Toutes les classes sont préfixées .login- pour éviter les collisions.
══════════════════════════════════════════════════════════════════════════ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    padding: 1.5rem;
}
.login-card {
    background: var(--bg-card);
    border-radius: .85rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    border-top: 4px solid var(--green);
}
.login-card-header    { text-align: center; margin-bottom: 2rem; }
.login-logo           { width: 100%; max-width: 260px; height: auto; margin-bottom: 1rem; }
.login-subtitle       { color: #6b7280; font-size: .875rem; margin: 0; }
.login-input-icon     { background: #f5f6f8; border-color: #d1d5db; color: #6b7280; }
.login-input          { border-color: #d1d5db; background: #f9fafb; }
.login-input:focus    { border-color: var(--green) !important; box-shadow: 0 0 0 .2rem rgba(121,185,44,.2) !important; background: #fff; }
.login-check:checked  { background-color: var(--green); border-color: var(--green); }
.login-check:focus    { box-shadow: 0 0 0 .2rem rgba(121,185,44,.25); }
.login-btn            { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; padding: .65rem; font-size: 1rem; border-radius: .5rem; transition: background .18s, transform .1s; }
.login-btn:hover      { background: var(--green-dark); border-color: var(--green-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(121,185,44,.35); }
.login-btn:active     { transform: translateY(0); }
.login-footer         { text-align: center; color: #9ca3af; font-size: .75rem; margin: 1.5rem 0 0; letter-spacing: .06em; }

/* ══════════════════════════════════════════════════════════════════════════
   PLANNING MENSUEL
   Grille planning : employés en lignes (3 sous-lignes), jours en colonnes.
   Les couleurs de cellule (.planning-xxx) reprennent les mêmes teintes que
   les statuts de la feuille de pointage, mais s'appliquent par <td> et non
   par <tr> (chaque cellule peut avoir un statut différent).
══════════════════════════════════════ */

/* Conteneur scrollable — horizontal ET vertical pour sticky thead */
.planning-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}



.table-planning {
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 900px;
}

/* Colonnes fixes */
.planning-col-name {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: none !important;
    vertical-align: middle;
    font-size: .78rem;
    line-height: 1.3;
    padding: 4px 6px !important;
}
.planning-name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 148px;
}
.planning-col-label {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    position: sticky;
    left: 160px;
    z-index: 2;
    background: #f0f4f8;
    border-right: 2px solid var(--green) !important;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
    padding: 2px 1px !important;
}

/* Colonnes jours */
.planning-col-day {
    width: 95px;
    min-width: 90px;
    font-size: .72rem;
    padding: 2px 3px !important;
    vertical-align: middle;
}

/* En-têtes weekend / férié */
.planning-th-weekend { background: #c9cdd4 !important; color: #555 !important; }
.planning-th-ferie   { background: #fde68a !important; color: #78350f !important; }

/* Ligne des numéros de semaine */
.planning-th-week {
    background: #0d0d0d !important;
    color: #b0b8c8 !important;
    font-size: .6rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 1px solid #444 !important;
}

/* Thead sticky */
.table-planning thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #0d0d0d;
    color: #fff;
    font-size: .72rem;
    padding: 3px 2px;
    text-align: center;
}
.table-planning thead th.planning-col-name {
    z-index: 5;
}
.table-planning thead th.planning-col-label {
    z-index: 4;
    background: #0d0d0d;
    color: #fff;
}

/* Cellules de données */
.planning-cell {
    padding: 2px 3px !important;
    vertical-align: top;
    font-size: .72rem;
}

/* Color picker inline dans la cellule Prix */
.planning-color-row {
    display: flex;
    align-items: center;
    margin: 2px 0;
}
.planning-color-input {
    width: 100%;
    height: 22px;
    padding: 1px 2px;
    border: 1px solid #ced4da;
    border-radius: .2rem;
    cursor: pointer;
}

.planning-cell .form-control,
.planning-cell .form-select {
    font-size: .68rem;
    padding: .15rem .3rem;
}
.planning-cell .planning-text {
    display: block;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 18px;
    line-height: 1.3;
}
.planning-cell .planning-input {
    min-height: 22px;
}

/* Séparateur entre employés */
.planning-separator td {
    height: 4px;
    background: var(--green);
    opacity: .35;
    padding: 0 !important;
}

/* Couleurs statuts par cellule */
td.planning-weekend  { background: #e4e6ea; color: #6b7280; }
td.planning-ferie    { background: #fef3c7; color: #92400e; }

/* ══════════════════════════════════════
   IMPRESSION — Planning mensuel
   Format A4 paysage, sans UI applicative.
   Toutes les classes .print-hidden sont masquées.
   Les sélects et inputs sont remplacés par leur valeur texte.
══════════════════════════════════════ */
@media print {
    /* Format de page A4 paysage */
    @page {
        size: A4 landscape;
        margin: 10mm 8mm;
    }

    /* Masquer tout ce qui ne fait pas partie du planning */
    .sidebar,
    .sidebar-offcanvas,
    .navbar,
    .offcanvas,
    .print-hidden,
    .btn-save-float,
    .app-version {
        display: none !important;
    }

    /* Supprimer la mise en page flex de l'application */
    body {
        background: #fff !important;
        font-size: .65rem !important;
        margin: 0;
        padding: 0;
    }

    /* Le conteneur principal prend toute la largeur */
    .d-flex.min-vh-100,
    .d-flex[style*="min-height"] {
        display: block !important;
    }
    .page-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Carte et scroll : retirer overflow et hauteur fixe */
    .planning-scroll {
        overflow: visible !important;
        max-height: none !important;
    }
    .card {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .card-body { padding: 0 !important; }

    /* Tableau : ajustement automatique des colonnes */
    .table-planning {
        table-layout: auto !important;
        width: 100% !important;
        font-size: .6rem !important;
        border-collapse: collapse !important;
    }
    .table-planning th,
    .table-planning td {
        padding: 1px 2px !important;
        border: 1px solid #aaa !important;
        vertical-align: middle !important;
    }

    /* Colonnes fixes : laisser le navigateur décider de la largeur */
    .table-planning colgroup col {
        width: auto !important;
        min-width: 0 !important;
    }
    .planning-col-name {
        position: static !important;   /* annuler le sticky */
        min-width: 80px !important;
        max-width: 100px !important;
        font-size: .6rem !important;
    }
    .planning-col-label {
        position: static !important;
        min-width: 22px !important;
        width: 22px !important;
        font-size: .55rem !important;
    }

    /* Masquer les formulaires (sélects, inputs, textareas, color pickers) */
    .planning-cell select,
    .planning-cell input,
    .planning-cell textarea,
    .planning-cell .planning-color-row,
    .planning-cell .planning-statut-select {
        display: none !important;
    }

    /* Afficher le texte de statut (normalement masqué en mode édition) */
    .planning-cell .planning-text {
        display: block !important;
        font-size: .58rem !important;
        min-height: 0 !important;
    }

    /* Conserver les couleurs de fond des statuts à l'impression */
    td.planning-weekend  { background: #e4e6ea !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-ferie    { background: #fef3c7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-teletravail { background: #dbeafe !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-conge    { background: #fce7f3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-maladie  { background: #fee2e2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-absent   { background: #fef9c3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    td.planning-formation{ background: #ede9fe !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .planning-separator td { background: #79b92c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Masquer la ligne Prix à l'impression (données confidentielles) */
    .planning-row-prix { display: none !important; }

    /* Conserver les couleurs personnalisées des cellules (background inline) */
    .planning-cell[style] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* En-tête collé en haut de chaque page imprimée */
    .table-planning thead { display: table-header-group; }
    .table-planning tbody { display: table-row-group; }

    /* Éviter les coupures de page au milieu d'un bloc employé (3 lignes) */
    .planning-row-site { break-inside: avoid; page-break-inside: avoid; }
}
td.planning-conge    { background: #dbeafe; color: #1e40af; }
td.planning-maladie  { background: #fed7aa; color: #9a3412; }
td.planning-absent   { background: #fecaca; color: #991b1b; }
td.planning-travaille   { background: #ffffff; }
td.planning-teletravail { background: #bbf7d0; color: #14532d; }
td.planning-formation   { background: #e9d5ff; color: #5b21b6; }

/* ══════════════════════════════════════════════════════════════════════════
   UTILITAIRES
   Classes helper génériques réutilisables dans tous les templates.
   Scrollbar personnalisée (Webkit uniquement).
══════════════════════════════════════ */
.text-green  { color: var(--green) !important; }
.bg-green    { background: var(--green) !important; color: #fff; }
.border-green{ border-color: var(--green) !important; }

/* Badge version dans le footer de la sidebar */
.app-version {
    display: inline-block;
    padding: 2px 10px;
    background: var(--green);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    border-radius: 999px;
    user-select: none;
}

/* Liens standard */
a { color: var(--green-dark); }
a:hover { color: var(--green); }

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

/* ══════════════════════════════════════
   RESPONSIVE
   Breakpoints Bootstrap utilisés :
     < 992 px : masquage de la sidebar, padding réduit
     < 576 px : mise en page ultra-compacte (téléphone)
══════════════════════════════════════ */
@media (max-width: 991.98px) {
    .page-content { padding: 1rem .75rem; }
    .topbar { padding: .6rem 1rem; }
    .table-pointage { font-size: .75rem; }
    .table-pointage input[type="time"],
    .table-pointage input[type="number"],
    .table-pointage select { font-size: .72rem; padding: .15rem .3rem; min-width: 0; }
    .month-grid .month-card { padding: .5rem .6rem; font-size: .82rem; }
    .sheet-nav { flex-wrap: wrap; gap: .5rem; }
}

@media (max-width: 575.98px) {
    .page-content { padding: .75rem .5rem; }
    .month-grid .month-card { font-size: .78rem; }
    .table-pointage .col-hide-xs { display: none; }
    .card-header.flex-header { flex-direction: column; align-items: flex-start !important; gap: .4rem; }
    .btn-export-pdf { width: 100%; justify-content: center; }
}