/* =========================================================
   PLANNING ANNUEL — programmation des chapitres sur l'année
   ========================================================= */

/* Le <main> générique (base.css) plafonne à 900px ET pose margin:30px auto
   (gap visible entre navbar et context bar) : on lève les deux ici, comme
   le fait main:has(.doc-page-scroll) (doc.css) pour sheet_detail — sinon
   .ctx-bar (sticky) reste collée à la navbar seulement après un premier
   scroll, pas dès le chargement. */
main:has(.planning-page) {
    max-width: none;
    width: 90%;
    margin: 0 auto;
}

.planning-page {
    /* Hauteur exacte de l'espace disponible sous la navbar/context bar,
       calculée en JS (planning.js) et posée ici en variable — jamais de
       scrollbar : .planning-grid (flex:1) et tout son contenu (flex-grow
       proportionnel aux heures) se répartissent exactement cette hauteur,
       ils ne peuvent pas la dépasser. */
    height: var(--planning-available-height, calc(100vh - 160px));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-3);
    overflow: hidden;
}

/* Le Σ, l'onglet nav et le fil d'Ariane sont pilotés par --page-accent,
   déclaré une seule fois pour cette page dans nav.css. Les règles qui
   vivaient ici ne repeignaient que border-bottom-color, laissant le TEXTE
   de l'onglet en bleu — bug corrigé par la centralisation. */

/* ---------- Context bar (thomaths/_context_bar_page.html + context_bar.css) ----------
   .planning-ctx-bar fixe juste la largeur de contenu (--ctx-max-width) pour
   que la barre tombe pile sur les mêmes bords que .planning-page en
   dessous ; le fil d'Ariane / la structure de la barre elle-même sont
   génériques, cf. context_bar.css. */
.planning-ctx-bar {
    --ctx-max-width: 90vw;
}

.planning-tabs {
    /* Le centrage sur toute la barre est déjà géré par .ctx-bar-center
       (context_bar.css) — cette classe n'a plus qu'à disposer son propre
       contenu. */
    display: flex;
}



.planning-hours-counter {
    /* Dernier enfant de .ctx-bar-extra (flex, justify-content:flex-end) :
       tout à droite de la barre. */
    order: 3;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px var(--space-2);
}

.planning-actions {
    order: 2;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.planning-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
}

.planning-tab:hover {
    color: var(--text);
}

.planning-tab.is-active {
    color: var(--success);
    border-color: var(--success);
    background: rgba(74, 157, 110, 0.1);
}

.planning-tab-icon {
    font-size: 0.8rem;
}

.planning-hours-counter .planning-hours-sep {
    color: var(--text-faint);
    margin: 0 2px;
}

.planning-hours-counter .planning-hours-label {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 2px;
}

.planning-hours-counter.is-overflow {
    color: var(--danger);
    border-color: var(--danger);
}

/* .planning-btn / .planning-btn-primary ont été repliées sur les boutons
   génériques (.button-secondary et .button, cf. theme.css) : même
   taille standard, à 1px près de ce que faisaient ces règles. Le fond
   passe de --surface à --surface-3, ce qui détache mieux le bouton de la
   carte sur laquelle il est posé. Ne pas redessiner un bouton ici. */

.planning-legend {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-5);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.planning-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.planning-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.planning-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    /* Piste ruler (semaines) fixe tout à gauche, puis une piste "1fr" par
       période (+ colonne overflow éventuelle, comptée dans --n-periods,
       cf. layout.grid_columns côté vue). */
    grid-template-columns: 84px repeat(var(--n-periods), 1fr);
    gap: var(--space-3);
    /* stretch (pas start) : chaque colonne remplit toute la hauteur de la
       grille — c'est ce qui donne à .planning-col-body sa hauteur réelle,
       ensuite répartie proportionnellement entre les blocs (flex-grow). */
    align-items: stretch;
}

.planning-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Session surlignée : ne concerne QUE le titre (l'en-tête), pas toute la
   hauteur de la colonne — fond ocre nettement rempli (moins transparent que
   la bordure elle-même). */
.planning-col.is-active .planning-col-header {
    border-color: var(--ocre);
    background: var(--ocre-bg);
    cursor: default;
}

.planning-col-header {
    cursor: pointer;
}

/* Pointillés de semaine : uniquement sur la session surlignée (cf.
   planning.js — clic sur un titre pour changer laquelle, remis à la
   session réelle à chaque rechargement). */
.planning-col:not(.is-active) .planning-week-line {
    display: none;
}

.planning-col-weeks {
    color: var(--text-faint);
    font-weight: 500;
}

/* ---------- Ruler de semaines (session active uniquement) ---------- */
.planning-week-ruler {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.planning-week-ruler-header {
    /* Même structure/hauteur que .planning-col-header (titre + dates), pour
       que le début des semaines s'aligne avec le début des blocs de la
       colonne active — visibility:hidden garde la boîte mais pas le rendu. */
    visibility: hidden;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
}

.planning-week-ruler-header::before {
    content: "\00a0";
    display: block;
    font-size: 0.85rem;
}

.planning-week-ruler-header::after {
    content: "\00a0";
    display: block;
    font-size: 0.72rem;
}

.planning-week-cell {
    /* Toutes les semaines ont la MÊME hauteur (flex-grow uniforme) — y
       compris une semaine partielle en bord de période. */
    flex: 1 0 0;
    min-height: 0;
    box-sizing: border-box;
    padding: 3px var(--space-2);
    font-size: 0.68rem;
    line-height: 1.15;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.planning-week-cell:hover {
    background: var(--surface-3);
}

.planning-week-cell.is-odd {
    background: var(--surface);
}

.planning-week-cell.is-even {
    background: var(--surface-2);
}

/* Semaine en cours : mise en valeur par-dessus l'alternance pair/impair —
   même ocre que la session en cours (.planning-col.is-active). */
.planning-week-cell.is-current {
    background: var(--ocre-bg);
    box-shadow: inset 0 0 0 1px var(--ocre);
}

.planning-week-cell.is-current .planning-week-number {
    color: var(--ocre);
}

.planning-week-number {
    font-weight: 700;
    color: var(--text);
}

.planning-week-range {
    color: var(--text-faint);
}

.planning-col-header {
    background: var(--bg-elev);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-bottom: none;
}

.planning-col-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.planning-col-dates {
    font-size: 0.72rem;
    color: var(--text-faint);
}

.planning-col-body {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* Pas de gap : la hauteur de chaque .planning-chip doit être exactement
       proportionnelle à sa durée (flex-grow) pour que les lignes de semaine
       (positionnées en absolu, en %) tombent au bon endroit. */
    gap: 0;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background: var(--inset);
    overflow: hidden;
}

.planning-chip {
    /* flex-grow posé en inline style (proportionnel aux heures) ; flex-basis
       à 0 et flex-shrink à 0 ici pour que SEUL flex-grow pilote la hauteur
       réelle, distribuée sur la hauteur fixe de .planning-col-body. */
    flex: 0 0 0;
    box-sizing: border-box;
    padding: 3px var(--space-2);
    font-size: 0.78rem;
    line-height: 1.2;
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    border-bottom: 1px solid var(--inset);
    overflow: hidden;
}

.planning-chip.theme-algebre { border-left-color: var(--theme-algebre); background: var(--theme-algebre-bg); }
.planning-chip.theme-analyse { border-left-color: var(--theme-analyse); background: var(--theme-analyse-bg); }
.planning-chip.theme-proba   { border-left-color: var(--theme-proba); background: var(--theme-proba-bg); }
.planning-chip.theme-none    { border-left-color: var(--text-faint); }

.planning-chip-content {
    /* Décale titre + heures ensemble vers le bas sans agrandir la boîte du
       chip (pas de padding-top sur .planning-chip : ça pousserait la
       bordure/les pointillés de semaine, positionnés en % de
       .planning-col-body, cf. plus haut) — translateY sur ce wrapper commun
       garde les deux lignes solidaires, contrairement à un décalage posé
       sur le titre seul (les heures, sur la ligne suivante, ne suivaient
       pas et venaient chevaucher le titre décalé). */
    transform: translateY(5px);
}

.planning-chip-title {
    display: block;
    font-weight: 600;
    color: var(--text);
}

.planning-chip-hours {
    color: var(--text-muted);
    font-size: 0.74rem;
    outline: none;
    border-radius: 4px;
    padding: 0 2px;
}

.planning-chip-hours:hover,
.planning-chip-hours:focus {
    background: var(--surface-3);
    color: var(--text);
}

.planning-chip-hours-unit {
    color: var(--text-faint);
    font-size: 0.74rem;
}

/* ---------- Lignes de repère (semaines, conseils de classe) ----------
   Positionnées en absolu par-dessus les blocs (z-index), à un décalage en %
   (pas en px : la hauteur de .planning-col-body est désormais fluide,
   cf. layout.*.week_lines / cuts.*.top_pct, vue planning.py). */
.planning-week-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(238, 241, 246, 0.35);
    z-index: 2;
    pointer-events: none;
}

.planning-cut {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}

.planning-cut-line {
    display: block;
    width: 100%;
    border-top: 2px dashed var(--danger-soft);
}

.planning-cut-label {
    position: absolute;
    right: 4px;
    bottom: 0;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    background: var(--danger);
    border-radius: 3px;
    padding: 1px 5px;
    box-shadow: var(--shadow);
}

/* Repère DS : même principe que .planning-cut mais violet et trait plein
   (pas pointillé) pour le distinguer d'un événement ponctuel au premier
   coup d'œil. */
.planning-ds-marker {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    pointer-events: none;
}

.planning-ds-line {
    display: block;
    width: 100%;
    border-top: 2px solid var(--violet);
}

.planning-ds-label {
    position: absolute;
    right: 4px;
    bottom: 0;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    background: var(--violet);
    border-radius: 3px;
    padding: 1px 5px;
    box-shadow: var(--shadow);
}

/* Repère "Aujourd'hui" : même principe que .planning-cut (conseils de
   classe) mais en blanc, et au-dessus (z-index) pour rester visible même
   si un cut tombe au même endroit. */
.planning-today {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    pointer-events: none;
}

.planning-today-line {
    display: block;
    width: 100%;
    border-top: 2px dashed #fff;
}

.planning-today-label {
    position: absolute;
    right: 4px;
    bottom: 0;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: 600;
    color: #000;
    white-space: nowrap;
    background: #fff;
    border-radius: 3px;
    padding: 1px 5px;
    box-shadow: var(--shadow);
}

.planning-overflow-banner {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: rgba(217, 83, 79, 0.1);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    color: var(--danger);
    font-size: 0.88rem;
}

/* ---------- Modale calendrier ---------- */
.planning-modal-overlay[hidden] {
    display: none;
}

.planning-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.planning-modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
    width: min(600px, 92vw);
    /* Hauteur FIXE (pas juste max-height) : dimensionnée pour le plus grand
       onglet (DS, 10 lignes) — sans ça, chaque onglet plus court fait
       rétrécir la boîte, et comme l'overlay la centre, elle "saute"
       verticalement à chaque changement d'onglet. Les onglets plus courts
       gardent juste du vide en bas plutôt que de la faire bouger. */
    height: min(680px, 85vh);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.planning-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text);
}

.planning-modal-zone {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-left: 4px;
}

.planning-modal-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--border);
}

.planning-modal-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    padding: var(--space-2) var(--space-2) calc(var(--space-2) - 2px);
    margin-bottom: -1px;
}

.planning-modal-tab:hover {
    color: var(--text);
}

.planning-modal-tab.is-active {
    color: var(--text);
    border-bottom-color: var(--violet);
}

.planning-modal-body {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
}

.planning-modal-panel[hidden] {
    display: none;
}

.planning-modal-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 var(--space-3);
}

/* ---------- Liste de cartes (inspirée du panneau info d'une feuille,
   .exo-meta-group/.exo-meta-row) : chaque période/événement/DS est une
   carte à fond légèrement surélevé plutôt qu'une ligne de tableau nue. ---------- */
.planning-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.planning-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 8px 8px 8px 12px;
    transition: border-color 0.12s;
}

.planning-row:hover {
    border-color: var(--border);
}

.planning-row-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.planning-row-field-grow {
    flex: 1;
    min-width: 0;
}

.planning-row-label {
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-faint);
}

.planning-row input {
    background: var(--inset);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    color: var(--text);
    padding: 5px 8px;
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.planning-row input:focus {
    outline: none;
    border-color: var(--violet);
}

/* Bouton supprimer : icône circulaire discrète (même langage que
   .exo-info-panel-close), collée à droite de la carte via margin-left:auto
   plutôt qu'un ✕ flottant au fil du texte — hitbox nette et bornée.
   min-width:0 est OBLIGATOIRE ici : tout <button> hérite par défaut d'un
   min-width:120px (form.css) qui l'emporte sur width:28px tant qu'il n'est
   pas explicitement remis à zéro — piège déjà documenté dans form.css,
   mais retombé dedans plusieurs fois sur cette page (croix, ◀▶) avant de
   penser à le fixer ici plutôt qu'au cas par cas. */
.planning-row-remove {
    flex: none;
    margin-left: auto;
    min-width: 0;
    width: 28px;
    height: 28px;
    box-sizing: border-box;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-faint);
    font-size: 0.85rem;
    cursor: pointer;
}

.planning-row-remove:hover {
    color: var(--danger);
    background: var(--danger-soft, rgba(217, 83, 79, 0.12));
}

.planning-calendar-add {
    margin: 4px 0 0;
}

.planning-calendar-panel-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.planning-row-ds {
    align-items: center;
}

.planning-ds-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 7px;
    background: var(--violet-soft);
    color: var(--violet);
    font-weight: 700;
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Marqueur "!" : DS placé sur le premier samedi des vacances (juste après
   la fin officielle de la période, mais qui appartient encore à la
   dernière semaine de cours) — autorisé par le décalage ±7, mais signalé
   plutôt que passé sous silence. */
.planning-ds-special {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--danger-soft, rgba(217, 83, 79, 0.16));
    color: var(--danger);
    font-weight: 800;
    font-size: 0.72rem;
    cursor: help;
}

.planning-ds-special[hidden] {
    display: none;
}

.planning-ds-shift {
    flex: none;
    display: flex;
    gap: 2px;
    background: var(--inset);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 2px;
}

.planning-ds-shift-btn {
    min-width: 0;
    width: 26px;
    height: 26px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
}

.planning-ds-shift-btn:hover {
    color: var(--text);
    background: var(--surface-3);
}

.planning-text-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 8px 4px;
    margin-left: auto;
}

.planning-text-btn:hover {
    color: var(--violet);
}

/* Modale texte : plus petite, hauteur libre (pas la hauteur fixe de la
   modale calendrier — pas d'onglets à faire coïncider ici). */
.planning-text-modal-box {
    width: min(420px, 92vw);
    height: auto;
    max-height: 80vh;
}

.planning-text-output {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text);
}

.planning-modal-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .planning-grid {
        grid-template-columns: 1fr;
    }
}