/* Onglet Plannings : vues Mois et Liste, planning par site, jours fériés, bouton Imprimer (js/plannings.js, js/plannings-vues.js ;
   lot 1.5 du plan V2, Arnaud 20/10/2026). Les styles de la grille horaire et des cases restent dans app.css (#planApp .pl-*).
   Variables communes de l'appli seulement (--surface, --line, --ink, --muted, --soft, --ok, --nok, --accent) : clair, sombre et
   couleurs de la société suivent tout seuls. PC d'abord (≥ 1100 px), téléphone en fin de fichier. */

/* ---------- barre du haut : Semaine / Jour / Mois / Liste, Imprimer ---------- */
/* PC : Imprimer en icône seule (nom dans l'infobulle), pour laisser la place à la période */
#planApp .pl-bar,#planApp .pl-bar:has(.pl-lk){grid-template-columns:44px minmax(0,1fr) 44px auto 150px 280px 44px}
#planApp .pl-bar:has(.pl-lk){grid-template-columns:44px minmax(0,1fr) 44px auto 150px 280px 44px 44px}
/* période sur deux lignes (titre, puis dates en sous-titre discret, comme les autres onglets) : tient sur PC à côté des boutons */
#planApp .pl-lab.pnav-lab{display:flex;flex-direction:column;justify-content:center;line-height:1.1}
#planApp .pl-lab.pnav-lab>*{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#planApp .pl-mode{grid-template-columns:repeat(4,1fr)}
#planApp .pl-mode button{font-size:14px}
#planApp .pl-pr{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0}
#planApp .pl-pr span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#planApp .pl-pr svg{flex:none}

/* ---------- par salarié / par site ---------- */
#planApp .pl-axe{grid-template-columns:1fr 1fr;margin:0}
#planApp .pl-axe button{font-size:14px}
#planApp .pl-in{display:inline;font-size:inherit}

/* ---------- jours fériés ---------- */
#planApp .pl-fe{display:inline-block;font-style:normal;font-size:10px;font-weight:700;line-height:15px;padding:0 5px;border-radius:4px;
  color:var(--ink);background:color-mix(in srgb,var(--muted) 22%,var(--surface));border:1px solid color-mix(in srgb,var(--muted) 45%,var(--surface));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;vertical-align:middle}
#planApp .pl-th span .pl-fe{display:block;margin:2px auto 0;width:max-content}
#planApp .pl-tc.fe{background-color:color-mix(in srgb,var(--muted) 10%,transparent)}
#planApp .pl-card .pl-fe{margin-left:auto;font-size:9px;line-height:13px;padding:0 3px}
@container (max-width:84px){#planApp .pl-card .pl-fe{display:none}}

/* ---------- vue Mois : calendrier du lundi au dimanche ---------- */
#planApp .pl-mo{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
#planApp .pl-mw,#planApp .pl-mg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
#planApp .pl-mw{background:var(--soft);border-bottom:1px solid var(--line)}
#planApp .pl-mw span{padding:6px 4px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
#planApp .pl-md{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:112px;padding:5px 6px;
  border-top:1px solid var(--line);border-left:1px solid var(--line);cursor:pointer;font-size:12px;color:var(--ink);overflow:hidden}
#planApp .pl-md:nth-child(7n+1){border-left:0}
#planApp .pl-md:nth-child(-n+7){border-top:0}
#planApp .pl-md:hover{background:var(--soft)}
#planApp .pl-md:focus-visible{outline:3px solid var(--focus,#2C7BE5);outline-offset:-3px}
#planApp .pl-md.hors{opacity:.45}
#planApp .pl-md.fe{background-color:color-mix(in srgb,var(--muted) 10%,transparent)}
#planApp .pl-md.td{box-shadow:inset 0 0 0 2px var(--ok)}
#planApp .pl-md.trou{box-shadow:inset 3px 0 0 var(--nok)}
#planApp .pl-md.td.trou{box-shadow:inset 0 0 0 2px var(--ok),inset 5px 0 0 var(--nok)}
#planApp .pl-mh{display:flex;align-items:center;gap:4px;min-height:20px}
#planApp .pl-mh b{font-size:14px}
#planApp .pl-mh small{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
#planApp .pl-mh .pl-fe{min-width:0}
#planApp .pl-ml{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
#planApp .pl-ml i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:3px;background:var(--ag,var(--theme,#00ACC3));vertical-align:0}
#planApp .pl-ml b{color:var(--ag,var(--ink));font-size:11px}
#planApp .pl-ml.ab{color:var(--muted)}
#planApp .pl-ml .pl-ab{display:inline;font-size:11px}
#planApp .pl-mm{font-size:11px;color:var(--muted)}

/* ---------- vue Liste : une ligne par prestation ---------- */
#planApp .pl-lt{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
#planApp .pl-lr{display:grid;grid-template-columns:92px 118px minmax(0,1fr) minmax(0,1.4fr) minmax(0,1.1fr) 82px;gap:8px;align-items:center;
  padding:6px 10px;border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:13px;min-height:36px}
#planApp .pl-lr span{min-width:0;overflow-wrap:anywhere}
#planApp .pl-lr .gty{float:none;margin:0 0 0 4px}
#planApp .pl-lr.nd{border-top:1px solid var(--line)}
#planApp .pl-lh{border-top:0;background:var(--soft);font-weight:700;color:var(--muted);font-size:12px}
#planApp .pl-lc-dt{font-weight:700}
#planApp .pl-lr.td .pl-lc-dt{color:var(--ok)}
#planApp .pl-lr.ab{color:var(--muted)}
#planApp .pl-lr.trou{color:var(--nok);font-weight:600}

/* ---------- téléphone et petits écrans ---------- */
@media(max-width:1099px){
  /* téléphone : ‹ période ›, puis Aujourd'hui et Imprimer côte à côte, puis les vues */
  #planApp .pl-bar,#planApp .pl-bar:has(.pl-lk){grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) 44px}
  #planApp .pl-bar .pl-lab{grid-column:2/4}
  #planApp .pl-bar>.h-btn:nth-child(4){grid-column:1/3}
  #planApp .pl-pr{grid-column:3/5;padding:0 12px}
  #planApp .pl-pr span{position:static;width:auto;height:auto;clip:auto}
  #planApp .pl-axe{margin:0 0 10px}
  #planApp .pl-mw span{font-size:11px;padding:4px 0}
  #planApp .pl-md{min-height:58px;padding:3px;font-size:10px;align-items:center}
  #planApp .pl-mh{flex-direction:column;gap:1px}
  #planApp .pl-mh small{margin:0;font-size:9px}
  #planApp .pl-mh .pl-fe{font-size:8px;line-height:11px;padding:0 2px;max-width:100%}
  #planApp .pl-ml,#planApp .pl-mm{display:none}
  #planApp .pl-lh{display:none}
  #planApp .pl-lr{grid-template-columns:minmax(0,1fr);gap:2px;padding:8px 10px;font-size:13px}
  #planApp .pl-lr .pl-lc-dt:empty{display:none}
  #planApp .pl-lr span:nth-child(2){font-weight:700}
  #planApp .pl-lr span:nth-child(6){color:var(--muted);font-size:12px}
  #planApp .pl-lr span:nth-child(6):empty{display:none}
}