/* F4IOZ — « Planning » (/sat/planning): the form and the satellites on the left, the passes on the right.
   One screen on a desktop (the shell's « ecran »): each card scrolls inside itself; stacked on a phone or a narrow window. */

.pl-page { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-page .page-head { margin-bottom: 0; }
.pl-grille { display: grid; grid-template-columns: minmax(340px, 410px) minmax(0, 1fr); gap: 14px; align-items: start; min-width: 0; }
.pl-gauche { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pl-gauche > .card, .pl-res { margin: 0; min-width: 0; }

.pl-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; margin: 0 0 8px; }
.pl-champ { display: flex; flex-direction: column; align-items: stretch; gap: 3px; flex: 1 1 140px; min-width: 0; font-size: 12.5px; color: var(--text-muted); text-align: left; }
.pl-champ > span { text-align: left; }
.pl-champ input { width: 100%; min-width: 0; min-height: 34px; padding: 5px 9px; color: var(--text); }
.pl-champ.pl-large { flex: 1 1 200px; }
.pl-champ.pl-court { flex: 0 0 96px; }
.pl-utc { justify-content: space-between; margin: -4px 0 8px; font: 11.5px var(--font-mono); color: var(--text-muted); }
.pl-rapide { display: inline-flex; flex-wrap: wrap; gap: 4px; flex: 1 1 auto; }
.pl-rapide .btn { padding: 0 9px; min-height: 30px; font-size: 12.5px; }
.pl-page .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
.pl-case { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-dim); flex: 1 1 180px; }
.pl-etat { font-size: 13px; color: var(--text-dim); min-width: 0; }
.pl-etat.pl-mal { color: var(--red); }
.pl-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; }
.pl-trop { color: var(--red); font-weight: 600; }

.pl-outils { align-items: center; margin-bottom: 6px; }
.pl-outils input { flex: 1 1 90px; min-width: 70px; min-height: 34px; }
.pl-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1px 10px; align-content: start; overflow: auto; max-height: 260px; }
.pl-liste label { display: flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 24px; }

.pl-res-corps { display: flex; flex-direction: column; min-height: 0; }
.pl-actions { align-items: center; }
.pl-page a.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.pl-alerte { margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: var(--r-s); font-size: 13px; background: color-mix(in srgb, var(--amber) 9%, transparent); }
.pl-alerte.vieux { border-width: 2px; border-color: var(--red); }
.pl-alerte.bon { border-color: var(--border); background: none; color: var(--text-dim); }
.pl-cadre { overflow: auto; min-height: 0; max-height: 58vh; border: 1px solid var(--border); border-radius: var(--r-s); }
.pl-cadre .card-empty { margin: 0; padding: 18px; }
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }
.pl-table td, .pl-table th { padding: 5px 7px; vertical-align: top; text-align: left; font-size: 13px; }
.pl-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-table tr.pl-jour th { background: var(--panel-2); color: var(--accent); font-size: 12.5px; position: static; border-top: 1px solid var(--border); }
.pl-u { display: block; font-size: 11px; color: var(--text-muted); }
.pl-chev { display: block; font-size: 11.5px; color: var(--amber); font-weight: 400; }
.pl-freq { font-size: 12px; color: var(--text-dim); min-width: 210px; }
.pl-texte { margin-top: 8px; font-size: 13px; }
.pl-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.pl-deux label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); }
.pl-deux textarea { width: 100%; font-size: 12px; resize: none; }

@media (min-width: 1100px) and (min-height: 640px) {
  body.planning-page .pl-ligne { margin-bottom: 6px; }
  body.planning-page .pl-page { flex: 1; min-height: 0; }
  body.planning-page .page-head p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; }
  body.planning-page .pl-grille { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  body.planning-page .pl-gauche { min-height: 0; }
  body.planning-page .pl-form .card-body, body.planning-page .pl-sats .card-body { padding: 8px 14px 10px; }
  body.planning-page .pl-sats { flex: 1; min-height: 120px; display: flex; flex-direction: column; overflow: hidden; }
  body.planning-page .pl-sats .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body.planning-page .pl-liste { flex: 1; min-height: 0; max-height: none; }
  body.planning-page .pl-res { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  body.planning-page .pl-res-corps { flex: 1; min-height: 0; padding: 8px 14px 10px; }
  body.planning-page .pl-cadre { flex: 1; max-height: none; }
}
@media (max-width: 1099px) { .pl-grille { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pl-champ { flex-basis: 100%; } .pl-champ.pl-court { flex: 0 0 96px; } .pl-champ.pl-large { flex: 1 1 150px; } .pl-deux { grid-template-columns: 1fr; } .pl-table td, .pl-table th { padding: 4px 6px; } }