/* ===========================================================================
   FEUILLE D'ÉCRAN — Cycles de rotation
   Écran : Components/Pages/App/Cycles.razor — /app/cycles

   POURQUOI CE FICHIER EXISTE, ET PAS UN BLOC DE PLUS DANS modele-erp.css
   Les styles d'écran s'y empilaient tous en fin de fichier. Trois branches
   ouvertes le même jour y ont ajouté leur bloc, et les trois se sont
   télescopées — non sur le fond, qui ne se recouvre jamais, mais sur la
   dernière ligne du fichier et sur la clé de cache que chacune bumpait.
   Une feuille par écran donne à chacun sa fin de fichier et sa clé.

   CE QUI RESTE DANS LE GABARIT : tout ce qui sert à DEUX écrans ou plus.
   Une classe promue là-bas ne redescend pas ici — sinon un écran finit par
   dépendre de la feuille d'un autre pour s'afficher.

   Chargée APRÈS modele-erp.css : ses règles peuvent affiner le gabarit à
   spécificité égale, l'inverse n'est pas vrai.
   =========================================================================== */

/* ===========================================================================
   CYCLES DE ROTATION — frise de séquence, récapitulatif, grille de crans.
   Passation « design_handoff_cycles » (cycles.css), reçue le 2026-08-17.

   Le reste de l'écran — barre, table, pied, modale, formulaire dense —
   réutilise les classes existantes : rien n'est redéfini ici. Les couleurs de
   la passation ont été remplacées par les jetons --et-* équivalents, la règle
   du dépôt étant qu'aucune feuille ne redéclare une couleur en dur.
   =========================================================================== */

/* --- Frise ---------------------------------------------------------------
   La séquence lue d'un coup d'œil, en colonne « Séquence ». C'est la colonne
   qui porte l'écran : un cycle EST son ordre, et une liste de postes en toutes
   lettres ne dit pas l'ordre.

   LES CRANS NE S'ENROULENT PAS. Une frise coupée en deux lignes se relit de
   travers — on lirait la fin du cycle sous son début, et rien ne dirait que
   les deux lignes se suivent. Elle défile si elle dépasse.                  */
.cyc-frise {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    max-width: 320px;
    padding: 1px 0;
}

/* Dans l'aperçu, la largeur n'est plus contrainte et la place ne manque pas :
   l'enroulement y est préférable au défilement, qui cacherait la moitié d'un
   cycle de 28 dans un panneau qu'on a justement ouvert pour le lire. */
.cyc-frise-apercu { max-width: none; flex-wrap: wrap; }

.cyc-cran {
    flex: none;
    min-width: 26px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--et-sur-aplat);
    white-space: nowrap;
}

/* Le repos n'est pas une couleur de plus : c'est une absence. Fond clair,
   texte gris — il doit se lire comme un creux dans la séquence. */
.cyc-cran.est-repos {
    background: var(--et-repos-bg);
    color: var(--et-faint);
}

/* --- Récapitulatif -------------------------------------------------------
   Tuiles calculées de la fiche, filets par la gouttière comme la bande de
   faits saillants de la fiche employé. Elles se recalculent à CHAQUE cran
   posé : on règle un cycle en regardant sa charge bouger, pas en la vérifiant
   après coup.                                                              */
.cyc-recap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1px;
    background: var(--et-hairline);
    border: 1px solid var(--et-hairline);
    margin-top: 12px;
}
.cyc-recap-tuile { background: var(--et-surface-2); padding: 8px 11px; }
.cyc-recap-tuile.est-attention { background: var(--et-avertissement-bg); }

.cyc-recap-tuile .lib { font-size: 12px; color: var(--et-muted); }
.cyc-recap-tuile .val {
    margin-top: 2px;
    font-family: var(--et-font-mono);
    font-size: 15px;
    font-weight: 500;
    color: var(--et-ink);
}
.cyc-recap-tuile.est-attention .val { color: var(--et-avertissement-ink); }
.cyc-recap-tuile .pre { margin-top: 1px; font-size: 12px; color: var(--et-faint); }

/* --- Palette -------------------------------------------------------------
   Le poste « au pinceau » : on le choisit une fois, puis on clique les crans.
   Choisir puis cliquer coûte un geste par jour ; N listes déroulantes en
   coûteraient trois.                                                       */
.cyc-palette {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}
.cyc-palette-lib {
    font-family: var(--et-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--et-muted);
    margin-right: 3px;
}

.cyc-pinceau {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    background: var(--et-surface);
    border: 1px solid var(--et-filet-fort);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--et-ink);
    cursor: pointer;
    white-space: nowrap;
}
.cyc-pinceau:hover:not(:disabled) { border-color: var(--et-form-blue); }
.cyc-pinceau.est-actif { background: var(--et-tint); border-color: var(--et-form-blue); color: var(--et-form-blue-d); }
.cyc-pinceau:disabled { opacity: .55; cursor: not-allowed; }

.cyc-pinceau .pt { width: 9px; height: 9px; flex: none; }
.cyc-pinceau .pt.est-repos { background: var(--et-repos-bg); border: 1px solid var(--et-repos-bord); }

/* --- Grille de crans -----------------------------------------------------
   La vraie zone de saisie du cycle. SEPT COLONNES : un cycle multiple de 7 se
   lit alors en semaines empilées, ce qui est exactement la lecture attendue
   d'un 2×12 ou d'un 3×8.                                                   */
.cyc-grille {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.cyc-case {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 6px 7px;
    background: var(--et-surface);
    border: 1px solid var(--et-filet-fort);
    border-left-width: 3px;
    border-left-color: var(--et-repos-bord);
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.cyc-case:hover:not(:disabled) { background: var(--et-surface-3); }
.cyc-case:disabled { cursor: not-allowed; }
.cyc-case.est-repos { background: var(--et-surface-3); }

.cyc-case .rang {
    position: absolute;
    top: 4px;
    left: 6px;
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-inerte);
}
.cyc-case .jour {
    font-family: var(--et-font-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--et-faint);
}
.cyc-case .pastille {
    min-width: 40px;
    padding: 2px 7px;
    background: var(--et-repos-bg);
    font-family: var(--et-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--et-sur-aplat);
}
.cyc-case.est-repos .pastille { background: var(--et-repos-bg); color: var(--et-faint); }

.cyc-case .duree {
    font-family: var(--et-font-mono);
    font-size: 12px;
    color: var(--et-ink);
}
.cyc-case.est-repos .duree { color: var(--et-inerte); }

/* --- Outils de la séquence ----------------------------------------------- */
.cyc-outils {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.cyc-outils-aide {
    flex: 1;
    min-width: 200px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--et-faint);
}