/*
 * roulement.css - Cluster « Planning de roulement » (joursouvrables.fr).
 *
 * Le gros du style vient du design system partagé :
 *   - calculateur-de-delai.css : grid #calculator, .delai-inputs-column, .glass-summary-card,
 *     .standardized-result-hero, .result-area-refactored, .other-result-details-refactored.
 *   - calendar-year.css : .cm-tool-actions / .btn-action (Imprimer / PDF / Partager).
 *   - bundle-core.css : grille du calendrier (.rmc-container / .rmc-month / .rmc-grid /
 *     .rmc-weekday / .rmc-day) réutilisée pour la mise en page ; ne reste ici que la
 *     COULEUR par poste (voir plus bas).
 *
 * Tout est namespacé sous .roulement-tool (la page n'est pas encore enregistrée dans
 * le tools_manager, donc body.tool-* n'est pas garanti). Aucun border-left coloré sur
 * une carte (doc 11 §1.8.1). Aucun m-dash. Aucune valeur monétaire.
 */

/* ------------------------------------------------------------------ */
/* Sélecteur segmenté (repris de compteur-de-jours.css : non chargé   */
/* ici, on inclut donc les règles de base tokenisées).                */
/* ------------------------------------------------------------------ */
.roulement-tool .segment-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-radius: 12px;
    padding: 5px;
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--light-bg, #f8f9fa);
}
.roulement-tool .segment-selector .segment-btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    font-family: var(--font-family-base, inherit);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color, #495057);
    cursor: pointer;
    white-space: normal;
    line-height: 1.25;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.roulement-tool .segment-selector .segment-btn.active {
    background: var(--primary-color, #0071e3);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.25);
}
.roulement-tool .segment-selector .segment-btn:not(.active):hover {
    background: rgba(0, 113, 227, 0.08);
    color: var(--primary-color, #0071e3);
}
body.dark-mode .roulement-tool .segment-selector {
    border-color: #3a3a3c;
    background: #2c2c2e;
}
body.dark-mode .roulement-tool .segment-selector .segment-btn.active {
    background: #0a84ff;
}

/* Réponse rapide (candidat featured snippet), tokenisée dark-safe. */
.roulement-tool .roul-answer {
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 0 0 24px;
    line-height: 1.6;
    color: var(--text-color, #1b2b43);
}
.roulement-tool .roul-answer p { margin: 0; }
.roulement-tool .roul-answer strong { color: var(--primary-color, #0071e3); }

/* Note fine sous un champ. */
.roulement-tool .roul-field-note {
    display: block;
    margin-top: 6px;
    font-size: 0.82rem;
    color: var(--secondary-color, #6b7280);
    line-height: 1.4;
}

/* ------------------------------------------------------------------ */
/* Constructeur de cycle personnalisé (pastilles de postes).          */
/* ------------------------------------------------------------------ */
.roulement-tool .roul-custom { margin-top: 8px; }
.roulement-tool .roul-custom[hidden] { display: none; }
.roulement-tool .roul-custom-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
    min-height: 8px;
}
.roulement-tool .roul-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #dee2e6);
    background: var(--content-bg, #fff);
    font-size: 0.86rem;
    color: var(--text-color, #1b2b43);
}
.roulement-tool .roul-chip__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.roulement-tool .roul-chip__x {
    border: none;
    background: transparent;
    color: var(--secondary-color, #6b7280);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
}
.roulement-tool .roul-chip__x:hover { background: rgba(0, 0, 0, 0.06); color: #c5221f; }
body.dark-mode .roulement-tool .roul-chip__x:hover { background: rgba(255, 255, 255, 0.12); }

.roulement-tool .roul-custom-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    border: 1px dashed var(--border-color, #cdd9ea);
    border-radius: 10px;
    background: var(--light-bg, #f8f9fa);
}
body.dark-mode .roulement-tool .roul-custom-add { background: #2c2c2e; border-color: #3a3a3c; }
.roulement-tool .roul-custom-add .roul-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--secondary-color, #6b7280);
}
.roulement-tool .roul-custom-add select,
.roulement-tool .roul-custom-add input {
    padding: 7px 8px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    background: var(--content-bg, #fff);
    color: var(--text-color, #1b2b43);
    font: inherit;
    font-size: 0.86rem;
}
.roulement-tool .roul-custom-add input[type="number"] { width: 68px; }
.roulement-tool .roul-custom-add input[type="time"] { width: 108px; }
.roulement-tool .roul-btn-add {
    padding: 8px 14px;
    border: 1px solid var(--primary-color, #0071e3);
    border-radius: 8px;
    background: transparent;
    color: var(--primary-color, #0071e3);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.roulement-tool .roul-btn-add:hover { background: rgba(0, 113, 227, 0.08); }
.roulement-tool .roul-custom-total {
    margin-top: 8px;
    font-size: 0.84rem;
    color: var(--secondary-color, #6b7280);
}

/* Presets de période (Ce mois / Cette année / 3 mois). */
.roulement-tool .roul-period-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.roulement-tool .roul-preset-btn {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color, #dee2e6);
    background: transparent;
    color: var(--text-color, #1b2b43);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.roulement-tool .roul-preset-btn:hover { border-color: var(--primary-color, #0071e3); }
.roulement-tool .roul-preset-btn.active {
    background: var(--primary-color, #0071e3);
    border-color: var(--primary-color, #0071e3);
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* Hero du résultat : deux valeurs côte à côte.                       */
/* ------------------------------------------------------------------ */
.roulement-tool .roul-hero-pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 48px;
}
.roulement-tool .roul-hero-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.roulement-tool .roul-hero-cell .highlight-value-refactored { line-height: 1; }

/* ------------------------------------------------------------------ */
/* Ruban de cycle (timeline SVG).                                     */
/* ------------------------------------------------------------------ */
.roulement-tool .roul-ruban-wrap {
    margin: 20px 0 8px;
    padding: 16px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 12px;
    background: var(--content-bg, #fff);
    overflow-x: auto;
}
.roulement-tool .roul-ruban-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-color, #1b2b43);
    margin: 0 0 10px;
}
.roulement-tool .roul-ruban svg { display: block; max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ */
/* Légende des postes.                                                */
/* ------------------------------------------------------------------ */
.roulement-tool .roul-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.84rem;
    color: var(--text-color, #1b2b43);
}
.roulement-tool .roul-legend li { display: inline-flex; align-items: center; gap: 7px; }
.roulement-tool .roul-legend .roul-swatch {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 800;
}

/* ------------------------------------------------------------------ */
/* Couleur du calendrier par POSTE. On réutilise .rmc-day (bundle-core) */
/* pour la taille et la grille ; on ajoute ici uniquement la couleur.  */
/* Chaque cellule porte une initiale (accessibilité : pas de couleur   */
/* seule, WCAG 1.4.1).                                                 */
/* ------------------------------------------------------------------ */
.roulement-tool .rmc-day.roul-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
    border: 1px solid transparent;
    min-height: 34px;
}
.roulement-tool .rmc-day.roul-cell .roul-day-num { font-weight: 600; }
.roulement-tool .rmc-day.roul-cell .roul-day-code {
    font-size: 0.62em;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Palette claire : fond teinté + texte foncé (contraste AA). */
.roulement-tool .roul-poste-M { background: #fff1c2; color: #6f5300; border-color: #e6c65a; }
.roulement-tool .roul-poste-A { background: #ffdfc0; color: #8a4500; border-color: #f0a868; }
.roulement-tool .roul-poste-N { background: #dcdcf7; color: #2f2f8f; border-color: #a9a9e6; }
.roulement-tool .roul-poste-J { background: #d2e6ff; color: #0b4a8a; border-color: #8fbdf0; }
.roulement-tool .roul-poste-G { background: #ecdcf7; color: #5b2a86; border-color: #c9a9e6; }
.roulement-tool .roul-poste-R { background: #eef0f2; color: #55606e; border-color: #d7dbe0; }

/* Jour férié : anneau rouge (outline, jamais border-left coloré) + marqueur. */
.roulement-tool .rmc-day.roul-cell.roul-ferie {
    outline: 2px solid #c5221f;
    outline-offset: -2px;
}
.roulement-tool .rmc-day.roul-cell.roul-ferie::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c5221f;
}

/* Palette sombre : fonds désaturés foncés + texte clair. */
body.dark-mode .roulement-tool .roul-poste-M { background: #4a3d12; color: #ffe08a; border-color: #6b5820; }
body.dark-mode .roulement-tool .roul-poste-A { background: #4d3212; color: #ffc487; border-color: #6f4a1e; }
body.dark-mode .roulement-tool .roul-poste-N { background: #2a2a55; color: #c9c9ff; border-color: #3d3d78; }
body.dark-mode .roulement-tool .roul-poste-J { background: #123a5c; color: #a8d3ff; border-color: #1e547f; }
body.dark-mode .roulement-tool .roul-poste-G { background: #3a2352; color: #ddb8ff; border-color: #52356f; }
body.dark-mode .roulement-tool .roul-poste-R { background: #2c2f33; color: #b8c0c9; border-color: #3d4148; }
body.dark-mode .roulement-tool .rmc-day.roul-cell.roul-ferie { outline-color: #ff6b64; }
body.dark-mode .roulement-tool .rmc-day.roul-cell.roul-ferie::after { background: #ff6b64; }

/* ------------------------------------------------------------------ */
/* Encadré informatif « repos court » (non-YMYL : jamais « illégal »). */
/* ------------------------------------------------------------------ */
.roulement-tool .roul-note-repos {
    margin-top: 20px;
    padding: 14px 18px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    background: var(--content-bg, #fff);
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-color, #1b2b43);
}
.roulement-tool .roul-note-repos[hidden] { display: none; }
.roulement-tool .roul-note-repos strong { color: #b45309; }
body.dark-mode .roulement-tool .roul-note-repos strong { color: #fbbf24; }
.roulement-tool .roul-note-repos a { color: var(--primary-color, #0071e3); }

/* Avertissement YMYL visible. */
.roulement-tool .roul-disclaimer {
    font-size: 0.84rem;
    color: var(--secondary-color, #6b7280);
    margin: 22px 0 0;
    line-height: 1.5;
}

/* Feriés listés dans le résultat. */
.roulement-tool .roul-feries-box {
    margin-top: 18px;
    background: var(--content-bg, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 14px 20px;
}
.roulement-tool .roul-feries-box[hidden] { display: none; }
.roulement-tool .roul-feries-box h4 { margin: 0 0 8px; font-size: 0.98rem; color: var(--text-color, #1b2b43); }
.roulement-tool .roul-feries-box ul { margin: 0; padding-left: 20px; }
.roulement-tool .roul-feries-box li { font-size: 0.9rem; color: var(--secondary-color, #6b7280); margin-bottom: 4px; }

/* Erreur inline (sanitisation). */
.roulement-tool .roul-inline-error {
    margin-top: 8px;
    font-size: 0.84rem;
    color: #c5221f;
}
.roulement-tool .roul-inline-error[hidden] { display: none; }
body.dark-mode .roulement-tool .roul-inline-error { color: #ff8a80; }

/* Avis non bloquant (période inversée ou tronquée) : ton informatif neutre, encadré
   complet (pas de bande latérale colorée, cf. doc 11), lisible en clair et sombre. */
.roulement-tool .roul-inline-notice {
    margin: 0 0 14px;
    padding: 10px 14px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #495057;
    background: #f1f3f5;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}
.roulement-tool .roul-inline-notice[hidden] { display: none; }
body.dark-mode .roulement-tool .roul-inline-notice {
    color: #ced4da;
    background: #1a1f26;
    border-color: #343a40;
}