/* Planning de l'équipe et plan de charge (lot P1-2). Jetons de la charte Horalio (docs/DESIGN-SYSTEM.md). */

nav.actions.planning-bascule { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; }
nav.actions.planning-bascule > * { text-align: center; white-space: nowrap; }

.planning-alertes { margin: 0 0 var(--e-3); }
.planning-alertes summary { cursor: pointer; }
.planning-alertes ul { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--e-1); }

.planning { padding: 0; overflow: hidden; }
.planning__message { margin: 0; padding: var(--e-2) var(--e-4); background: var(--danger-fond); color: var(--danger-texte); font-size: var(--t-libelle); }
.planning__defilement { overflow-x: auto; }
.planning__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 980px; font-size: var(--t-libelle); }
.planning--mois .planning__table { min-width: 1180px; }
.planning__table th, .planning__table td { border-bottom: 1px solid var(--trait-2); border-right: 1px solid var(--trait-3); vertical-align: top; text-align: left; }
.planning__table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--encre-douce); font-weight: 600; padding: var(--e-2); font-size: var(--t-meta); }

.planning__collaborateur { position: sticky; left: 0; z-index: 2; width: 170px; background: var(--surface); padding: var(--e-2) var(--e-3); }
thead .planning__collaborateur { z-index: 3; }
.planning__nom { display: block; color: var(--encre); font-weight: 600; }
.planning__horaire { display: block; color: var(--encre-douce); font-size: var(--t-meta); font-weight: 400; }
.planning__charge { width: 150px; padding: var(--e-2) var(--e-3); background: var(--surface-2); }
.planning--mois .planning__jour { padding: var(--e-1); text-align: center; }
.planning--mois .planning__jour a { color: inherit; text-decoration: none; }

.planning__jour--repos, .planning__case--indisponible { background: var(--surface-4); }
.planning__jour--ferie { background: var(--attention-fond-2); }
.planning__jour--aujourdhui { color: var(--primaire); box-shadow: inset 0 -2px 0 var(--primaire); }
.planning__ferie { display: block; color: var(--attention-texte); font-weight: 500; font-size: var(--t-micro); }

.planning__case { position: relative; padding: var(--e-1) var(--e-1) 24px; min-height: 72px; transition: background var(--duree) var(--courbe); }
.planning--mois .planning__case { padding: var(--e-1); text-align: center; min-height: 0; }
.planning__case--surcharge { background: var(--danger-ligne); }
.planning__case--cible { background: var(--primaire-pale); box-shadow: var(--anneau); }

.planning__jauge { height: 4px; margin: 0 0 var(--e-1); border-radius: var(--rayon-pilule); background: var(--trait-2); overflow: hidden; }
.planning__jauge span { display: block; height: 100%; background: var(--graphe-ok); }
.planning__case--surcharge .planning__jauge span { background: var(--graphe-depasse); }

.planning__creneau {
    display: grid; gap: 1px; margin: 0 0 var(--e-1); padding: var(--e-1) var(--e-2);
    border-radius: var(--rayon-sm); background: var(--primaire-pale); color: var(--encre);
    border-left: 3px solid var(--marque); font-size: var(--t-meta); overflow-wrap: anywhere;
}
.planning__creneau[draggable="true"] { cursor: grab; }
.planning__creneau--glisse { opacity: .5; }
.planning__creneau--masque { background: var(--neutre-fond); border-left-color: var(--neutre); color: var(--neutre-texte); }
.planning__intitule { font-weight: 600; }
.planning__duree { color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.planning__actions { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); }
.planning__action { color: var(--primaire); font-size: var(--t-micro); font-weight: 500; }

.planning__jalon { display: block; margin: 0 0 var(--e-1); padding: 2px var(--e-2); border-radius: var(--rayon-xs); background: var(--attention-fond); color: var(--attention-texte); font-size: var(--t-micro); overflow-wrap: anywhere; }
.planning__jalon--compact { display: inline; padding: 0 2px; margin: 0; background: none; }
.planning__indispo { display: block; margin: 0 0 var(--e-1); padding: 2px var(--e-2); border-radius: var(--rayon-xs); background: var(--neutre-fond); color: var(--neutre-texte); font-size: var(--t-micro); }

.planning__ajouter {
    position: absolute; right: var(--e-1); bottom: var(--e-1); display: inline-grid; place-items: center;
    width: 20px; height: 20px; border-radius: var(--rayon-pilule); color: var(--encre-douce); text-decoration: none;
    opacity: .35; transition: opacity var(--duree) var(--courbe), background var(--duree) var(--courbe);
}
.planning__case:hover .planning__ajouter, .planning__ajouter:focus-visible { opacity: 1; background: var(--primaire-pale); color: var(--primaire); }
.planning__compact { display: block; color: var(--encre); text-decoration: none; font-variant-numeric: tabular-nums; font-size: var(--t-meta); }
.planning--mois .planning__case--surcharge .planning__compact { color: var(--danger-texte); font-weight: 600; }

.planning__total { display: block; color: var(--encre); font-variant-numeric: tabular-nums; }
.planning__total--surcharge { color: var(--danger-texte); }
.planning__taux { color: var(--encre-douce); font-size: var(--t-meta); }
.planning__total--surcharge .planning__taux { color: var(--danger-texte); }
.planning__detail { display: block; color: var(--encre-douce); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.planning__detail--alerte { color: var(--attention-texte); font-weight: 600; }
.planning__charge .etiquette { margin-top: var(--e-1); }
.planning__legende { margin: 0; padding: var(--e-2) var(--e-4); }

/* Lot P1-2b : propositions du bouton « Proposer ». */
.planning__proposer { display: inline-block; margin-top: 2px; font-size: var(--t-meta); font-weight: 500; }
.propositions__bilan { margin: var(--e-2) 0 0; color: var(--encre-douce); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.propositions__bilan strong { color: var(--encre); }
.propositions__remarques summary { cursor: pointer; }
.propositions__remarques li + li { margin-top: var(--e-1); }
.propositions { padding: 0; }
.propositions__liste { list-style: none; margin: 0; padding: 0; }
.propositions__jour { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-1) var(--e-3); padding: var(--e-3) var(--e-4) var(--e-1); border-top: 1px solid var(--trait-2); }
.propositions__jour:first-child { border-top: 0; }
.propositions__jour h2 { margin: 0; font-size: var(--t-sm); font-weight: 700; }
.propositions__libre { color: var(--encre-douce); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.proposition { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2) var(--e-3); padding: var(--e-2) var(--e-4); }
.proposition__quoi { display: grid; gap: 2px; min-width: 0; }
.proposition__intitule { font-weight: 600; color: var(--encre); overflow-wrap: anywhere; }
.proposition__detail { color: var(--encre-douce); font-size: var(--t-meta); font-variant-numeric: tabular-nums; }
.proposition__actions { display: flex; align-items: center; gap: var(--e-2); }
.proposition__actions form { margin: 0; }

@media (max-width: 720px) {
    .planning__collaborateur { width: 120px; }
    nav.actions.planning-bascule { width: 100%; }
    .proposition__actions { width: 100%; }
    .proposition__actions form, .proposition__actions .bouton { flex: 1; }
    .proposition__actions .bouton { width: 100%; justify-content: center; }
}