/* Règles CSS spécifiques aux écrans étroits (mobile/tablette), extraites
   de styles.css (section "10. RESPONSIVE / MOBILE" et quelques blocs
   ponctuels ailleurs) pour ne pas mélanger réglages desktop et mobile
   dans un même fichier -- même principe que print.css (chargé, lui, via
   media="print" dans templates/base.html).

   Ce fichier est chargé via media="(max-width: 991.98px)" sur la balise
   <link> (voir templates/base.html) : le navigateur ne l'applique (et le
   recharge dynamiquement au redimensionnement) qu'en dessous de cette
   largeur, la plus large des largeurs de rupture utilisées ici. Les
   règles ci-dessous gardent CHACUNE leur propre @media (max-width: ...)
   quand elles ont besoin d'un seuil plus étroit (767.98px, 575.98px,
   399.98px) -- ce fichier ne remplace pas ces seuils, il évite juste
   qu'ils s'appliquent par erreur au-delà de 991.98px.

   Points de rupture utilisés (alignés sur les seuils Bootstrap sm/md/lg,
   juste en dessous de 576px/768px/992px) :
     575.98px, 767.98px, 991.98px, et un ponctuel 399.98px (poste-nom). */

/* Réserve la place de la bottom nav (fixed, donc hors du flux normal) :
   sans ça, le bas de chaque page (footer, dernière ligne d'un tableau...)
   se retrouve masqué derrière. Posé uniquement quand la bottom nav existe
   réellement sur la page (voir templates/base.html, body.has-bottom-nav --
   admin seulement) plutôt qu'inconditionnellement pour tout le monde. */
@media (max-width: 991.98px) {
    body.has-bottom-nav {
        padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0));
    }
}

/* Sous 768px : la nav de date (flèches + date) prend toute la largeur,
   flèches aux extrémités -- plus de place, et cohérent avec le reste de la
   barre qui passe en colonne. Le switch Jour/Semaine/Mois et le repli
   d'actions "..." partagent la ligne suivante (au lieu de deux lignes
   séparées) pour limiter la hauteur totale de la barre, sticky en
   permanence à l'écran (.header-fixe). Les actions (réglages/impression/
   PDF) se replient derrière l'icône "..." (voir .planning-actions-toggle/
   .planning-actions, static/css/styles.css §"repli mobile
   .planning-actions-wrap") plutôt que de rester affichées en permanence à
   côté, alors qu'elles servent rarement sur mobile. */
@media (max-width: 767.98px) {
    .planning-toolbar-nav {
        width: 100%;
        justify-content: space-between;
    }
    .planning-toolbar-center {
        order: 2;
    }
    .planning-toolbar-actions-wrap {
        order: 2;
    }
    /* pn masque le bouton aujourd'hui */
    .planning-toolbar-today {
    display: none;
    }
    
    /* Le menu réglages (icône engrenage + son dropdown Bootstrap) devient un
       dropdown DANS le panneau "..." (lui-même un dropdown maison, voir
       .planning-actions-toggle/.planning-actions ci-dessous) : un dropdown
       dans un dropdown. Sous ce seuil, ses items sont donc "remontés"
       directement au niveau du panneau, au même titre que les autres
       actions (imprimer, PDF...), plutôt que cachés derrière un second
       niveau de clic. Le bouton engrenage lui-même n'a alors plus lieu
       d'être puisqu'il n'y a plus rien à ouvrir.
       display:contents fait disparaître un élément de l'arbre de mise en
       page SANS retirer ses enfants du DOM : le <div class="dropdown">,
       le <ul class="dropdown-menu"> et chaque <li> s'effacent ainsi l'un
       après l'autre, et ce sont finalement les <button>/<a class=
       "dropdown-item"> eux-mêmes qui deviennent des enfants directs du
       panneau -- sans dupliquer le HTML (settings_menu, propre à chaque
       page, garde ses id uniques) ni toucher au rendu desktop, où ce
       menu réglages continue de fonctionner normalement. */
    .planning-toolbar-actions.planning-actions .dropdown > .dropdown-toggle {
        display: none;
    }
    .planning-toolbar-actions.planning-actions .dropdown,
    .planning-toolbar-actions.planning-actions .planning-toolbar-settings-menu,
    .planning-toolbar-actions.planning-actions .planning-toolbar-settings-menu > li {
        display: contents;
    }
}

/* Sous md, les mini-nav (.dashboard-widget) passent en pastilles d'icônes
   colorées + libellé dessous, sur une seule ligne quel que soit le nombre
   de tuiles (4 à 6) — la carte complète (fond blanc, bordure, 32px) ne
   tient plus à plat sur un écran de téléphone et retombe sur 2 lignes. */
@media (max-width: 767.98px) {
    .dashboard-grid-widget {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.3rem;
        justify-content: space-between;
    }
    .dashboard-widget {
        flex: 1 1 0;
        min-width: 0;
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        /* La version desktop met overflow:hidden pour couper proprement le
           contenu aux coins arrondis de la carte ; ici il n'y a plus de
           carte, et ça rognait le badge (S1, compteur) qui déborde
           volontairement du cercle d'icône. */
        overflow: visible;
    }
    .dashboard-widget:hover {
        transform: none;
        box-shadow: none;
    }
    .dashboard-widget .icon {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }
    /* La pastille colorée porte l'icône (le <i> directement, ou le wrapper
       .icon-with-badge quand un badge accompagne l'icône) ; le libellé reste
       un texte plat en dessous, hors de la pastille. */
    .dashboard-widget .icon > i,
    .dashboard-widget .icon > .icon-with-badge {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
        flex: 0 0 auto;
    }
    .dashboard-widget .icon.icon-saisie > i,
    .dashboard-widget .icon.icon-saisie > .icon-with-badge { background: var(--app-accent-color); }
    .dashboard-widget .icon.icon-planning > i,
    .dashboard-widget .icon.icon-planning > .icon-with-badge { background: var(--app-primary-color); }
    .dashboard-widget .icon.icon-calendar-semaine > i,
    .dashboard-widget .icon.icon-calendar-semaine > .icon-with-badge { background: var(--app-primary-color); }
    .dashboard-widget .icon.icon-postes > i,
    .dashboard-widget .icon.icon-postes > .icon-with-badge { background: var(--app-color-pharmacien); }
    .dashboard-widget .icon.icon-equipe > i,
    .dashboard-widget .icon.icon-equipe > .icon-with-badge { background: var(--app-color-equipe); }
    .dashboard-widget .icon.icon-5 > i,
    .dashboard-widget .icon.icon-5 > .icon-with-badge { background: var(--app-color-cp); }
    .dashboard-widget .icon.icon-demandes > i,
    .dashboard-widget .icon.icon-demandes > .icon-with-badge { background: var(--app-color-maladie); }
    .dashboard-widget .icon.icon-solidarite > i,
    .dashboard-widget .icon.icon-solidarite > .icon-with-badge { background: var(--app-color-ferie); }

    .dashboard-widget .icon-with-badge .badge {
        top: -0.25rem;
        right: -0.4rem;
        font-size: 0.6rem;
        padding: 0.15em 0.4em;
    }

    .dashboard-widget .title {
        font-size: 8.5px;
        letter-spacing: 0.01em;
        margin-top: 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .dashboard-widget .icon-calendar-semaine .calendar-semaine-numero {
        position: absolute;
        left: 50%;
        top: 53%;
        transform: translate(-50%, -50%);
        font-size: 12px; /*0.34em;*/
        font-weight: 800;
        letter-spacing: -0.02em;
        color: white;
        pointer-events: none;
    }
    /* Etat actif : anneau autour de la pastille plutôt que le fond plein
       (illisible ici, vu que le fond est déjà pris par la couleur de
       catégorie) — les règles desktop ci-dessus mettent le fond de la
       carte entière en couleur unie via :has(), plus spécifique qu'un
       simple .dashboard-widget.active ; on neutralise donc avec !important
       plutôt que de dupliquer 7 sélecteurs :has() ici. */
    .dashboard-widget.active {
        background: none !important;
    }
    .dashboard-widget.active .icon > i,
    .dashboard-widget.active .icon > .icon-with-badge {
        box-shadow: 0 0 0 2px var(--app-card-bg-color), 0 0 0 4px currentColor;
    }
    .dashboard-widget.active .title {
        font-weight: 700;
    }
    /* Couleur du libellé = couleur de la catégorie (assombrie de ~20% vers
       le noir pour rester lisible en petit texte sur fond blanc — les
       teintes claires comme --app-color-ferie sont trop pâles utilisées
       telles quelles en couleur de texte, contrairement à un usage en
       fond de pastille). Prime sur la règle desktop .active .title{color:white}
       (même :has(), donc même spécificité, mais déclarée après dans le
       fichier) — pas besoin de !important ici.
       (--app-primary-text-color, utilisée plus haut dans ce fichier, est en
       fait toujours invalide au calcul : elle se définit comme
       var(--app-primary-text-color, #212121), une référence à elle-même
       jamais réécrite ailleurs contrairement à --app-primary — on l'évite
       ici aussi.) */
    .dashboard-widget.active:has(.icon-saisie) .title {
        color: color-mix(in srgb, var(--app-accent-color) 78%, black);
    }
    .dashboard-widget.active:has(.icon-planning) .title {
        color: color-mix(in srgb, var(--app-primary-color) 78%, black);
    }
    .dashboard-widget.active:has(.icon-postes) .title {
        color: var(--app-color-pharmacien);
    }
    .dashboard-widget.active:has(.icon-equipe) .title {
        color: color-mix(in srgb, var(--app-color-equipe) 65%, black);
    }
    .dashboard-widget.active:has(.icon-5) .title {
        color: color-mix(in srgb, var(--app-color-cp) 78%, black);
    }
    .dashboard-widget.active:has(.icon-demandes) .title {
        color: color-mix(in srgb, var(--app-color-maladie) 78%, black);
    }
    .dashboard-widget.active:has(.icon-solidarite) .title {
        color: color-mix(in srgb, var(--app-color-ferie) 65%, black);
    }

    /* Variante "grande carte" (-lg, pages Équipe / Rapports / Ma page
       employé) : icône, titre et description sont des div frères (pas de
       titre imbriqué dans .icon comme dans la mini-nav) — on relaie la
       mise en colonne au niveau de la carte, et la description, illisible
       à cette taille, disparaît sur mobile. */
    .dashboard-grid-widget-lg {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 0.3rem;
        justify-content: space-between;
    }
    .dashboard-widget-lg {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        text-align: center;
        /* 4 tuiles par ligne (au lieu d'une seule ligne qui écrasait les
           icônes quand leur nombre grandit, voir Ma page employé) -- le
           calc soustrait la part des 3 espaces .dashboard-grid-widget-lg
           entre 4 tuiles pour que la 4e reste bien sur la même ligne. */
        flex: 0 0 calc(25% - 0.225rem);
    }
    .dashboard-widget-lg .desc {
        display: none;
    }
    /* Sur ces cartes, le badge (ex: compteur de demandes) est un frère de
       .icon dans un conteneur .icon-row plutôt qu'un wrapper
       .icon-with-badge : même repositionnement en médaillon que dans la
       mini-nav, appliqué ici à .icon-row. */
    .dashboard-widget-lg .icon-row {
        position: relative;
        display: inline-flex;
        width: auto;
    }
    .dashboard-widget-lg .icon-row .badge {
        position: absolute;
        top: -0.25rem;
        right: -0.4rem;
        font-size: 0.6rem;
        padding: 0.15em 0.4em;
    }
}

/* Sous 768px, la barre d'outils planning passe sur 2 lignes (nav de date
   pleine largeur + switch/actions en dessous, voir _planning_toolbar.html)
   au lieu d'une seule sur desktop -- le décalage scroll-margin-top de
   .jour-card (styles.css) doit être plus grand ici pour que l'ancre
   #jour-YYYY-MM-DD ne se retrouve pas sous cette barre plus haute. */
@media (max-width: 767.98px) {
    .planning-journalier .jour-card {
        scroll-margin-top: calc(var(--navbar-height) + 100px);
    }
}

/* Sous 767px, la frise n'a plus assez de largeur pour afficher à la fois
   le repère de début (ex "8h30") et le premier repère d'heure pleine juste
   après (ex "9h") sans que leurs libellés ne se chevauchent -- ce dernier
   est marqué .graduation-tick-proche-debut côté serveur uniquement quand
   il est à moins de 45 min du début (routes/planning.py::_graduations_heures)
   et masqué ici, le repère de début suffisant à lui seul sur petit écran.
   Gardé visible au-delà de 767px, où la largeur ne pose pas ce problème. */
@media (max-width: 767.98px) {
    .planning-journalier .graduation-tick-proche-debut {
        display: none;
    }
}

/* ---------------------------------------------------------------
   10. RESPONSIVE / MOBILE
   Regroupe toutes les adaptations petits écrans. Le reste de la
   feuille (desktop) n'est pas modifié : ces règles ne font que
   surcharger via media query, sans jamais toucher au bloc @media
   print plus bas.
   --------------------------------------------------------------- */

/* --- 10.1 Marges générales des pages ------------------------------ */
@media (max-width: 767.98px) {
    .page-root.px-5 {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
    }
    .page-root.px-4 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .page-root.py-5,
    .page-root.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .page-card {
        padding: 1rem;
    }
}

/* --- 10.2 En-tête de page partagé (_page_header.html) -------------- */
@media (max-width: 575.98px) {
    .header-fixe-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }
    .header-fixe-center h1 {
        white-space: normal;
        font-size: 1.05rem;
        text-align: center;
    }
    .header-fixe-side {
        justify-content: center;
    }
}

/* --- 10.3 Tableaux larges : première colonne collée au scroll ------ */
@media (max-width: 767.98px) {
    .table-sticky-first thead th:first-child,
    .table-sticky-first tbody td:first-child,
    .table-sticky-first tfoot td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        background: #fff;
        box-shadow: 2px 0 3px rgba(0, 0, 0, 0.06);
    }
    .table-sticky-first thead th:first-child {
        z-index: 3;
    }

    /* #planning-semaine-table autorise le retour à la ligne au sein des
       cellules (word-break/overflow-wrap, cf. section 7) et fixe la largeur
       de ses colonnes en pourcentage (style inline "width: 5%/8%/12%") pour
       un rendu compact en desktop. Sur mobile, ces deux réglages combinés
       empêchent le tableau de dépasser la largeur de l'écran : au lieu de
       déclencher le défilement horizontal de .table-responsive (comme les
       autres tableaux larges de l'appli), les 16 colonnes se compressent et
       le texte se chevauche. On repasse en "une seule ligne" avec une
       largeur minimale par colonne (au lieu du pourcentage) pour que le
       tableau retrouve sa largeur naturelle et défile proprement. */
    #planning-semaine-table {
        table-layout: auto !important;
    }
    #planning-semaine-table th,
    #planning-semaine-table td {
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
        width: auto !important;
        min-width: 88px;
    }
    #planning-semaine-table th:first-child,
    #planning-semaine-table td:first-child {
        min-width: 130px;
    }
    #planning-semaine-table th.total-col,
    #planning-semaine-table td.total-col {
        min-width: 70px;
    }
}

/* --- 10.4 Grilles calendrier (planning mensuel global / individuel) */
@media (max-width: 767.98px) {
    .calendrier-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }
    .calendrier-scroll .grid-calendrier,
    .calendrier-scroll .grille-calendrier {
        grid-template-columns: repeat(6, minmax(130px, 1fr));
    }
    .calendrier-scroll .grid-calendrier.avec-dimanche,
    .calendrier-scroll .grille-calendrier.avec-dimanche {
        grid-template-columns: repeat(7, minmax(130px, 1fr));
    }
}

/* --- 10.5 Modale de saisie unifiée : lignes horaires --------------- */
/* Sur desktop, .time-range-row garde le comportement Bootstrap normal
   (col-4 / col-2 / col-1 / col-auto sur une seule ligne). En dessous de
   576px, le label passe seul sur sa ligne puis les deux champs heure
   se partagent la largeur à ~48% chacun pour rester tactiles. */
@media (max-width: 575.98px) {
    .time-range-row {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }
    .time-range-row .time-label {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: left;
    }
    .time-range-row .time-input-col {
        flex: 1 1 44%;
        max-width: 48%;
    }
    .time-range-row .time-sep {
        flex: 0 0 auto;
    }
}

/* --- 10.7 Postes configurables : ligne poignée + nom + actions ----- */
@media (max-width: 399.98px) {
    .poste-nom {
        min-width: 100px;
    }
}

/* --- 10.8 Fiche employé : ruban d'onglets défilant ------------------ */
@media (max-width: 767.98px) {
    #employeTab {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #employeTab .nav-link {
        white-space: nowrap;
    }
}

/* Repli mobile des boutons d'action (Dimanche/horaires/total/impression...)
   derrière l'icône "..." -- .planning-actions-wrap et l'état par défaut
   (.planning-actions-toggle masqué) restent dans styles.css, car ils
   s'appliquent aussi au-delà de 991.98px (rien à afficher là où ce
   fichier ne s'applique plus). */
@media (max-width: 767.98px) {
    .planning-actions-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .planning-actions {
        display: none !important;
        position: absolute;
        right: 0;
        top: calc(100% + 0.3rem);
        z-index: 1025;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.35rem !important;
        min-width: 210px;
        background: #fff;
        border: 1px solid var(--app-border-light-color);
        border-radius: var(--app-border-radius-md);
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.12);
        padding: 0.5rem;
        margin: 0 !important;
    }
    .planning-actions.open {
        display: flex !important;
    }
    .planning-actions .btn {
        width: 100%;
        text-align: left;
        justify-content: flex-start !important;
    }
    .planning-actions > .d-flex {
        width: 100%;
    }
}