/* ===== Thème PlannLAB ===== */
:root{
    --brand:#0097A7;        /* principal */
    --brand-2:#4DB6AC;      /* secondaire */
    --text:#0D1B2A;         /* titres */
    --text-2:#4F5D75;       /* texte secondaire */
    --bg:#F9FBFC;           /* fond app */
    --card:#FFFFFF;         /* cartes */
    --line:#E6EEF2;         /* séparateurs */
    --brand-hover:#007D8A;
}

.btn-outline-primary{
  border-color: var(--brand);
  color: var(--brand);
}

.border-primary{
  border-color: var(--brand) !important;
}
.btn-outline-primary:hover {
  color: white;
  background-color: var(--brand);
  border-color: var(--brand);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}

h1{
  font-size: 1.5rem;
  color: var(--brand);
}

/* Diminuer input */
@media (min-width: 991.98px){
  .form-control { width: 50%; }
}

form .btn { margin-top: 1rem; margin-right: 1rem; }

/* Bootstrap overrides */
.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover{ background:var(--brand-hover); border-color:var(--brand-hover); }
.text-brand{ color:var(--brand); }
.bg-app{ background:var(--bg) !important; }

/* ===== Layout ===== */
.logo{ width:36px; height:36px; object-fit:cover; }
.sidebar{
  width:250px;
  background:linear-gradient(180deg,#ecf7f8 0%,#f7fbfc 100%);
  border-right:1px solid var(--line);
  min-height:100vh;
}
.sidebar .brand-text{ color:var(--brand); }
.sidebar .nav-link{
  color:var(--text);
  border-radius:.75rem;
  padding:.55rem .75rem;
  font-weight:500;
}
.sidebar .nav-link:hover{ background:#e9f6f7; color:var(--text); }
.sidebar .collapse .nav-link,
.sidebar .collapsing .nav-link {
  padding: .35rem .5rem;
  border-radius: .5rem;
  color: var(--text-2);
}
.sidebar .collapse .nav-link:hover,
.sidebar .collapsing .nav-link:hover {
  background: #eef7f7;
  color: var(--text);
}

/* Offcanvas = même style */
.offcanvas.sidebar{ width:250px; }

/* Topbar / Footer / Cards */
.topbar{
  height:64px;
  background:var(--card);
  border-bottom:1px solid var(--line);
}
.card-soft{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:0 1px 0 rgba(13,27,42,.02);
}
.footer-soft{
  border-top:1px solid var(--line);
  color:var(--text-2);
  background:var(--card);
}

/* Bandeau événements */
.events-scroll{
  display:flex; align-items:center; overflow:auto; gap:.5rem; padding-bottom:.25rem;
}
.events-scroll::-webkit-scrollbar{ height:6px }
.events-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px }

/* Tables (look léger) */
.table{
  --bs-table-color:var(--text);
  --bs-table-bg:var(--card);
  --bs-table-border-color:var(--line);
}
.table thead th{ font-weight:600; color:var(--text); }
/* .table tbody tr:nth-child(even) td{ background:#fafcfd; } */

/* Responsive ajustements */
@media (max-width: 991.98px){
  .sidebar{ min-height:auto; }
}

/* Mobile styles - Styles de base pour les petits écrans */
img {
  max-width: 100px; /* Taille réduite sur mobile */
  height: auto;
}

.animation-container {
  position: relative;
  width: 100vw; /* Prend toute la largeur de la fenêtre */
  height: 20vh; /* Hauteur pour visibilité sur mobile */
}

.animated-image {
  position: absolute;
  width: 30px; /* Taille ajustée pour mobile */
  animation: move 10s linear infinite;
}

.form-check {
  display: block; /* Chaque élément est sur une nouvelle ligne */
  margin-bottom: 10px; /* Espacement entre chaque case */
}

/* Styles pour les tableaux défilables */
.table-responsive {
  overflow-x: auto; /* Active le défilement horizontal si le contenu dépasse */
  -webkit-overflow-scrolling: touch; /* Défilement fluide */
}
.table-responsive table {
  width: 100%;
  border-collapse: collapse;
}

/* Lignes colorées par motif (listes/tableaux) */
.table-responsive tr.motif-conge    { background-color: white !important; color: rgb(116, 112, 182); }
.table-responsive tr.motif-maladie  { background-color: white !important; color: rgb(221, 45, 45); }
.table-responsive tr.motif-afc      { background-color: white !important; color: coral; }
.table-responsive tr.motif-autre    { background-color: white !important; color: rgb(36, 59, 40); }
.table-responsive tr[style*="background-color: orange"] {
  background-color: orange !important; color: black;
}

/* ===== Message de bienvenue / container ===== */
.welcome-container {
  background-color: #f4f4f9;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.welcome-message { font-size: 1.5em; color: #333; margin-right: 10px; }
.welcome-text { color: #20cbd1; font-weight: bold; }
.user-name { color: #2c3e50; font-size: 1.2em; }
.service-label { font-size: 1.1em; color: #7f8c8d; }
.service-name { color: #27ae60; font-weight: bold; }

.container-fluid {
  background-color: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h2.display-4 { color: #007bff; font-size: 2em; }
h3 { color: #333; margin-top: 20px; padding-left: 10px; }
p.lead { font-size: 1.2rem; color: #555; }

/* Accordion */
.accordion .card { margin-bottom: 10px; border: 1px solid #ddd; border-radius: 5px; }
.accordion .card-header { background-color: #007bff; color: white; }
.accordion .btn-link { color: white; text-decoration: none; font-weight: bold; font-size: 1.1rem; }
.accordion .card-body { background-color: #f1f1f1; padding: 15px; font-size: 1rem; }
.accordion .collapse.show { transition: height 0.35s ease; }
.accordion .collapse:not(.show) { display: none; }

ul, ol { list-style-type: none; padding: 0; margin: 0; }

/* =========================
   TABLEAU PLANNING - PROMPT
   ========================= */

/* ATTENTION: .container est global Bootstrap — tu l’avais déjà. */
.container {
  background-color: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom-btn { border-radius: 25px; padding: 10px 20px; font-weight: bold; }
.custom-btn:hover { opacity: 0.8; }

/* Semaine et contrôles */
.week-controls{
  display: flex; justify-content: space-between; width: 50%; margin: 0 auto;
}
.week-title { color: #4D4D4D; font-size: 1.5rem; }

/* Tableau du planning */
.custom-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}
.custom-table th, .custom-table td{
  padding: 15px; text-align: center; border: 1px solid #ddd;
}
.planning-instructions{
  font-size: 0.875rem; color: #444; line-height: 1.4;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.planning-instructions p{ margin-bottom: 0.5rem; }

/* .custom-table th { background-color: #9D2933; color:#fff; } */
.design   { background-color: #127a7f; border: 2px solid rgb(54,58,54) !important; }
.design2  { background-color: #8cbebe; border: 2px solid rgb(54,58,54) !important; }
th.design3{ width: 12rem; }

.custom-table td{
  background-color: #f9f9f9; border-radius: 8px; transition: background-color 1s ease;
}
.custom-table td:hover{ background-color: #ffe6e6; }
.custom-table tbody tr:nth-child(even) td { background-color: #f1f1f1; }

/* Modale */
.modal{
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,.5);
  display: flex; justify-content: center; align-items: center;
}
.modal-content{
  background-color: #fff; padding: 20px; border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
  width: 80%; max-width: 400px;
}
.modal-content h3{ font-size: 1.2rem; color:#333; }
.modal-content ul{ list-style-type: none; padding: 0; }
.modal-content li{
  padding: 10px; background-color: #f1f1f1; margin: 5px 0; border-radius: 5px;
}
.modal-content li:hover{ background-color: #d9d9d9; }
/* .btn-outline-dark { border-radius:25px; padding:10px 20px; font-weight:bold; } */

#posteList{ list-style-type: none; padding: 0; }
#posteList li{ padding: 10px; cursor: pointer; }
#posteList li:hover{ background-color: #f0f0f0; }

body.modal-open{ overflow: hidden; }
.modal-overlay{
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0,0,0,.5); z-index: 999;
}

/* =========================
   TABLEAU PLANNING - LEGENDE/MESSAGES
   ========================= */

.messages-container { margin: 20px; }
.message-list { list-style-type: none; padding: 0; }
.message-item{
  padding: 15px; border-bottom: 2px solid #f0f0f0; margin-bottom: 15px;
  background-color: #fafafa; border-radius: 8px;
}
.message-item:hover{ background-color:#e6e6e6; cursor: pointer; }
.message-header{ display:flex; justify-content:space-between; margin-bottom:10px; }
.message-sender{ font-weight:bold; font-size:1.1em; }
.message-date{ color:#777; font-size:.9em; }
.message-body{ margin-top:10px; }
.message-title{ font-size:1.2em; margin-bottom:10px; }
.message-excerpt{ font-size:1em; color:#555; }
.message-actions{ margin-top:10px; display:flex; gap:10px; }
.message-actions a{ padding:8px 12px; text-decoration:none; border-radius:5px; }
.message-actions a:hover{ background-color:#ddd; }
.message-actions .btn-outline-dark{ background-color:#f0f0f0; }
.message-actions .btn-danger{ background-color:#f44336; color:white; }
.h3message{
  background-color:#868c8e; padding:10px; border-radius:5px; margin-bottom:15px;
  font-size:1.5em; font-weight:bold; color:#f5f0f0;
}

/* =========================
   CALENDRIER — styles généraux
   ========================= */

.event-day{
  background-color: #9D2933 !important;
  color: white; font-weight: bold; border-radius: 5px; padding: 5px;
}

/* Pastilles — conserve tes tailles */
.legend-dot{
  display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:5px;
}
.event-dot{
  width: 8px; height: 8px; border-radius: 50%; display:inline-block; margin: 2px;
}

.invisible{ visibility: hidden; } /* garde si utilisé ailleurs */

/* Mise en page calendrier (accueil) */
#events-today{
  border:2px solid #ccc; padding:15px; border-radius:10px; background:#f9f9f9;
  max-width:400px; margin:0 auto; margin-left:20px; box-shadow:0 2px 10px rgba(0,0,0,.1);
}
#events-today h4{ font-size:1.2rem; color:#333; margin-bottom:10px; }
#events-today ul{ list-style-type:none; padding-left:0; }
#events-today ul li{
  font-size:.9rem; background:#e8f4f8; border:1px solid #ddd; margin-bottom:8px;
  padding:8px; border-radius:5px; color:#333;
}
#events-today ul li:last-child{ margin-bottom:0; }
#events-today p{ font-size:1rem; color:#777; margin-top:10px; }

/* =========================
   Media queries (images / welcome / etc.)
   ========================= */
@media (min-width: 768px) and (max-width: 1024px) {
  img { max-width: 120px; }
  .animation-container { width: 90vw; height: 15vh; }
  .animated-image { width: 40px; }
  .table-responsive { margin: 0 10px; }
  .table-responsive th, .table-responsive td { padding: 12px; }
  .welcome-container { padding: 15px; }
  .welcome-message { font-size: 1.3em; }
}
@media (min-width: 1024px) {
  .animation-container { width: 80vw; height: 10vh; }
  .welcome-container { padding: 25px; }
  .welcome-message { font-size: 1em; }
}

/* =========================
   Navbar
   ========================= */
.navbar{
  background-color:#007bff;
  border-radius:5px;
  padding:.5rem 1rem;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
#img{ width:100px; height:auto; }
.navbar h3{ font-size:2.2rem; font-weight:bold; color:rgb(22,161,179); }
.navbar-nav .nav-link{
  color:white !important; font-size:1.1rem; font-weight:500;
  padding:10px 15px; border-radius:5px; transition: background-color .3s ease, transform .3s ease;
}
.navbar-nav .nav-link:hover{ background-color:#9ea3aa; transform: scale(1.05); }
.navbar-nav .dropdown-menu .dropdown-item:hover{ background-color:#0056b3; color:white; }
.navbar-nav li{ border-bottom:1px solid rgba(255,255,255,.2); }
.navbar-nav li:last-child{ border-bottom:none; }

.navbar-light.bg-light{
  background-color:#f8f9fa !important;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
}
.navbar-nav .nav-item{ margin: 0 15px; }

@media (max-width: 767px){
  .navbar h3{ font-size:1.5rem; }
  .navbar-nav{ text-align:center; }
  .navbar-nav .nav-item{ margin-bottom:10px; }
  .navbar-toggler{ border-color:#ffffff; }
}

/* Footer personnalisé */
footer{
  background-color:#f1f1f1; padding:20px 0; font-size:.9rem; color:#333; text-align:center;
}
footer .text-center{ margin-top:10px; }

/* =========================
   Tableau récurrence (table unique)
   ========================= */
.recur-table{
  table-layout: fixed; width: 100%;
  border-collapse: separate; border-spacing: 8px 8px;
}
.recur-table thead th{ padding: 12px 10px; }
.recur-table tbody td{ padding: 0; }
.recur-table th:first-child, .recur-table td:first-child{ width: 22%; }
.recur-table th:not(:first-child), .recur-table td:not(:first-child){ width: calc((100% - 22%) / 5); }
.recur-table tbody tr:nth-child(even) td{ background: transparent; }
.recur-table tr.table-section td{
  background: #f4fafb; color: var(--text-2); font-weight: 600;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 10px; padding: 12px 16px;
}

/* Cells (pills) */
.recur-table td.cell-empty{
  background: rgba(0,151,167,.56) !important; border: 1px solid var(--brand); height: 44px;
}
.recur-table td.cell-filled{
  border: 1px solid var(--brand); text-align: center; height: 44px; vertical-align: middle;
  font-weight: 500; background: var(--brand) !important; color: #fff; text-transform: capitalize;
}
.recur-table td.cell-filled span{ display:inline-block; padding:.25rem .5rem; }
.form-label{ margin-top: .5rem; }
.rounded-pill{ font-size: .9em !important; font-weight: lighter; }
.bg-primary{ background-color: var(--brand)!important; }

/* =========================
   PLANNING — SEMAINE
   ========================= */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.team-week-table{
  table-layout: fixed; width: 100%; min-width: 920px;
  font-size: .88rem; text-transform: capitalize;
}
.team-week-table th, .team-week-table td{
  overflow:hidden; text-overflow:ellipsis; word-break:normal; overflow-wrap:normal;
}
.team-week-table .user-col { width: 96px; min-width:96px; max-width:96px; }
.team-week-table .day-col  { width: calc((100% - 96px) / 5); }
.team-week-table td.week-cell { padding: 6px; vertical-align: middle; height: 58px; }

.team-week-table .pill,
.team-week-table .pill-split,
.team-week-table .pill-half { height: 100%; }

.team-week-table .pill-split{ display:flex; flex-direction:row; gap:6px; height:100%; }

/* Pills — styles de base (communs) */
.pill{
  display:block; border-radius:12px; padding:8px; font-weight:600; text-align:center;
}
.pill .label{
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:700;
}
.pill .time, .pill-half .time{
  display:block; font-size:.78em; font-weight:600; opacity:.9; line-height:1.05; margin-top:2px; white-space:nowrap;
}
.pill-half{
  flex:1 1 50%; border-radius:10px; padding:6px; font-weight:600; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* Types (couleurs) */
.pill-holiday    { background:#F1F3F5; color:#495057; border:1px dashed #DEE2E6; }
.pill-recurrence { background:#E9ECEF; color:#6C757D; border:1px solid #DEE2E6; }
.pill-absence          { background:#FFE3E3; color:#C92A2A; }
.pill-absence.congé    { background:#FFE8CC; color:#D9480F; }
.pill-absence.maladie  { background:#FFE3E3; color:#C92A2A; }
.pill-absence.afc      { background:#FFE8E2; color:#9A3412; }
.pill-absence.autre    { background:#E9ECEF; color:#343A40; }
.pill-empty            { background:#FFFFFF; color:#6C757D; border:1px solid #E6EEF2; }
.pill-poste, .pill-half.poste{ color:#0D1B2A !important; }

tr.is-current td:first-child, tr.is-current th:first-child{
  background:#e9f6f7; border-left:3px solid var(--brand, #0097A7);
}

@media (max-width: 576px){
  .team-week-table{ font-size:.84rem; min-width: 840px; }
  .team-week-table .user-col { width: 88px; min-width:88px; max-width:88px; }
  .team-week-table .day-col  { width: calc((100% - 88px) / 5); }
  .team-week-table td.week-cell { height: 54px; }
}

/* =========================
   PLANNING — MOIS (reset simple & fiable)
   ========================= */
:root{
  --month-cell-h-desktop: 150px;   /* hauteur d’une case (desktop) */
  --month-cell-h-mobile:  150px;   /* hauteur d’une case (mobile)  */
  --month-head-h:           28px;  /* bandeau numéro du jour       */
  --month-gap:               6px;  /* padding interne du <td>      */
  --month-pill-min:        60px;  /* min-height d’un pill plein   */
  --month-minw-mobile:     1170px; /* ↑ élargit les colonnes sur mobile (scroll horizontal) */
}


.month-table{
  table-layout: fixed; width: 100%; text-transform: capitalize; font-size: .9rem;
}
.month-table thead th{ text-align:center; }
.month-table td{ vertical-align: top; }

.month-table .day-cell{
  height: var(--month-cell-h-desktop); padding: var(--month-gap); overflow: hidden;
}

.month-table .day-number{
  position: static; display:flex; align-items:center; justify-content:flex-start;
  height: var(--month-head-h); padding: 0 10px; margin-bottom: 6px;
  font-weight: 700; font-size: .95rem; color: #6c757d;
}

.month-table .day-body{
  height: calc(var(--month-cell-h-desktop) - var(--month-head-h) - 6px - (var(--month-gap) * 2));
  min-height: 0; display:flex; flex-direction:column; gap:6px; overflow: hidden;
}

.month-table .pill,
.month-table .pill-split,
.month-table .pill-half{ height: auto; overflow: hidden; }

.month-table .pill{
  flex: 1 1 auto; min-height: var(--month-pill-min);
  border-radius: 12px; padding: 10px; font-weight:700; text-align:center;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
}
.month-table .pill-split{
  flex:1 1 auto; display:flex; gap:6px; align-items:stretch; min-height: var(--month-pill-min);
}
.month-table .pill-half{
  flex:1 1 50%; min-height: var(--month-pill-min); border-radius:10px; padding:8px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}

/* texte wrap */
.month-table .pill .label,
.month-table .pill-half .label{
  display:block; white-space: normal; overflow-wrap:anywhere; word-break: break-word;
  line-height:1.15; margin-bottom:2px;
}
.month-table .pill .time,
.month-table .pill-half .time{
  display:block; white-space: normal; overflow-wrap:anywhere; word-break: break-word;
  line-height:1.12; font-size:.82em;
}

/* états */
.month-table .out-month{ background:#f5f5f5; }
.out-month .day-number{ color:#6c757d !important; }

.pill-holiday    { background:#F1F3F5; color:#495057; border:1px dashed #DEE2E6; }
.pill-recurrence { background:#E9ECEF; color:#6C757D; border:1px solid  #DEE2E6; }
.pill-absence          { background:#FFE3E3; color:#C92A2A; }
.pill-absence.congé    { background:#FFE8CC; color:#D9480F; }
.pill-absence.maladie  { background:#FFE3E3; color:#C92A2A; }
.pill-absence.afc      { background:#FFE8E2; color:#9A3412; text-transform: uppercase;}
.pill-absence.autre    { background:#E9ECEF; color:#343A40; }
.pill-empty            { background:#FFFFFF; color:#6C757D; border:1px solid #E6EEF2; }
.pill-poste, .pill-half.poste{ color:#0D1B2A !important; }

.is-weekend .placeholder-weekend{
  display:block; flex:1 1 auto; min-height: var(--month-pill-min);
  border-radius:12px; background:#E9ECEF; border:1px solid #DEE2E6;
}

/* half vide discret */
.month-table .pill-split > .pill-empty{
  background:#fff; border:1px dashed #E6EEF2; opacity:.95;
}

/* ===== Mobile (≤576px) ===== */
@media (max-width:576px){
  :root{
    --month-minw-mobile: 1170px;
    --month-cell-h-mobile: 130px;
    --month-head-h: 16px;
    --month-gap: 6px;
    --month-pill-min: 75px;
  }
  .month-table{ font-size:.82rem; min-width: var(--month-minw-mobile); }
  .month-table .day-cell{ height: var(--month-cell-h-mobile); padding: var(--month-gap); overflow: hidden; }
  .month-table .day-number{ height: var(--month-head-h); margin-bottom: 6px; font-size: .9rem; }

  /* défilement interne en mobile pour éviter le rognage */
  .month-table .day-body{
    height: calc(var(--month-cell-h-mobile) - var(--month-head-h) - 6px - (var(--month-gap) * 2));
    gap: 6px; overflow: auto; -webkit-overflow-scrolling: touch;
  }
  .month-table .pill,
  .month-table .pill-half,
  .is-weekend .placeholder-weekend{
    min-height: var(--month-pill-min); padding: 8px;
  }
  .month-table .pill .label,
  .month-table .pill-half .label{
    font-size:.93em; line-height:1.2; white-space:normal; overflow-wrap:anywhere; word-break:break-word; margin-bottom:3px;
  }
  .month-table .pill .time,
  .month-table .pill-half .time{
    font-size:.78em; line-height:1.15; white-space:normal; overflow-wrap:anywhere; word-break:break-word;
  }
}

.month-table { table-layout: fixed; width: 100%; }

/* Force une largeur fixe aux colonnes 6 et 7 (Samedi/Dimanche) */
.month-table th:nth-child(6),
.month-table td:nth-child(6),
.month-table th:nth-child(7),
.month-table td:nth-child(7) {
  width: 44px;          /* ajuste ici */
  padding: 2px 4px;
  font-size: 0.85rem;
}

@media (max-width: 576px) {
  .month-table th:nth-child(6),
  .month-table td:nth-child(6),
  .month-table th:nth-child(7),
  .month-table td:nth-child(7) {
    width: 36px;
    font-size: 0.75rem;
  }
}


/* =========================
   CALENDRIER ANNUEL — Grille moderne
   ========================= */

.calendar-month { border: 1px solid #e9ecef; }
.calendar-month .card-header { border-bottom: 1px solid #e9ecef; }

/* En-têtes jours */
.calendar-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr);
  border-bottom:1px solid #e9ecef; background:#f8f9fa;
}
.calendar-weekday{
  padding:.5rem .25rem; text-align:center; font-weight:600; font-size:.875rem;
  border-right:1px solid #e9ecef;
}
.calendar-weekday:last-child{ border-right:0; }
.calendar-weekday.is-weekend{ color:#6c757d; }

/* Grille des jours */
.calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
}
.calendar-cell{
  min-height:90px; border-right:1px solid #e9ecef; border-bottom:1px solid #e9ecef; background:#fff;
}
.calendar-cell:nth-child(7n){ border-right:0; }
.calendar-cell.is-empty{ background:#fafafa; }
.calendar-cell.is-weekend{ background:#fcfcfd; }
.calendar-cell.is-today{
  outline:2px solid #dc3545; outline-offset:-2px; background:#fff5f5;
}

.cell-inner{ display:flex; flex-direction:column; height:100%; padding:.5rem; }
.cell-day{
  font-weight:700; font-size:.95rem; line-height:1; margin-bottom:.35rem;
}
.cell-events{
  margin-top:auto; display:flex; gap:.3rem; flex-wrap:wrap;
}

/* Responsive calendrier annuel */
@media (max-width:576px){
  .calendar-cell{ min-height:70px; }
  .cell-day{ font-size:.9rem; }
  .calendar-weekday{ font-size:.8rem; }
}

/* Réccurence */

.recur-table--lite .chunk small  { font-size: 0.8rem; }

.bg-outline-primary {
  background-color: white;
  color: var(--brand);
  border-color: var(--brand);
}

/* 50/50 VERTICAL (gauche/droite) */
.recur-table--lite td.cell-filled.cell-vert-half-am {
  background: linear-gradient(to right, var(--brand) 0 50%, rgba(0,151,167,.56) 50% 100%) !important;
}
.recur-table--lite td.cell-filled.cell-vert-half-pm {
  background: linear-gradient(to right, rgba(0,151,167,.56) 0 50%, var(--brand) 50% 100%) !important;
}

/* Compétences */
.user-pill{
  padding:.35rem .6rem;
  border:1px solid #dee2e6;
  border-radius:999px;
  background:#f8f9fa;
  color:#212529;
  font-size: 0.9rem;
}
.user-pill:hover{background:#eef1f4}
.user-pill-meta{font-size:.8rem;opacity:.75}

/* ===== Sidebar / Offcanvas (un seul menu responsive) ===== */

/* Le sidebar a une largeur fixe et ne rétrécit jamais dans le flex */
.sidebar{
  width: 250px;
  flex: 0 0 250px;
  flex-shrink: 0;
  background: linear-gradient(180deg,#ecf7f8 0%,#f7fbfc 100%);
  border-right: 1px solid var(--line);
  min-height: 100vh;
}

/* À partir de lg, l’offcanvas devient une sidebar statique visible */
@media (min-width: 992px){
  .offcanvas-lg{
    position: static;
    transform: none !important;
    visibility: visible !important;
    /* background: transparent; */
    border-right: 1px solid var(--line);
  }
  .offcanvas-lg .offcanvas-header{ display: none; }  /* on masque la barre de titre/bouton Fermer */
  .offcanvas-lg .offcanvas-body{ display: block; }
}

/* Chevron : réserve une place pour éviter les micro-sauts d’alignement */
.nav-link .chev{ width: 1.25rem; text-align: right; flex: 0 0 1.25rem; }

/* Boutons de toggles (sous-menus) occupent toute la largeur et se comportent comme des liens */
.sidebar .nav-link.btn-link{
  width: 100%;
  text-align: left;
  color: var(--text);
  border-radius: .75rem;
  padding: .55rem .75rem !important;
  font-weight: 500;
}
.sidebar .nav-link.btn-link:hover{
  background: #e9f6f7;
  color: var(--text);
}

/* Sous-liens dans les collapses */
.sidebar .collapse .nav-link,
.sidebar .collapsing .nav-link{
  padding: .35rem .5rem;
  border-radius: .5rem;
  color: var(--text-2);
}
.sidebar .collapse .nav-link:hover,
.sidebar .collapsing .nav-link:hover{
  background: #eef7f7;
  color: var(--text);
}

/* ===== Stabilité de la largeur de page ===== */

/* Empêche les “sauts” liés à l’apparition/disparition de la scrollbar verticale */
html{ scrollbar-gutter: stable both-edges; }
/* fallback si nécessaire : */
/* html{ overflow-y: scroll; } */

/* Évite tout débordement horizontal accidentel */
body{ overflow-x: hidden; }

/* Si tu as des sections en 100vw, remplace par 100% pour ne pas dépasser */
.animation-container{ width: 100%; } /* remplace le 100vw existant */

/* En-tête collant OK + colonnes verticales fiables */
th.th-vert {
  position: sticky;         /* tu l’as déjà sur le thead, ça ne gêne pas */
  top: 0;
  z-index: 2;
  height: 150px;            /* hauteur pour loger le texte vertical */
  vertical-align: bottom;   /* poser le texte au bas de la cellule */
  white-space: normal;      /* IMPORTANT: ne pas forcer nowrap sur ce th */
  padding: 8px 6px;
}

/* On ne fait tourner QUE le contenu */
th.th-vert > .th-label {
  display: inline-block;
  /* Safari-friendly vertical text */
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  /* lisible de haut vers bas (sans être à l’envers) */
  transform: rotate(180deg);
  text-align: center;
  line-height: 1;
}

thead th.hit-min { color:#f44336;}
thead th.hit-max { color:green; }
td.min-col { color:#f44336; font-weight:700;}
td.max-col { color:green; font-weight:700; }

  /* .month-table .day-cell{vertical-align:top;height:130px;position:relative} */
  /* .day-number{font-weight:600;font-size:.9rem;opacity:.7;margin:4px 6px} */
  /* .day-body{padding:6px} */
  /* .is-weekend{background:#fcfcfc} */
  /* .placeholder-weekend{display:block;height:42px} */

  /* .pill{display:inline-flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;min-width:88px} */
  /* .pill-poste{color:#0b2239} */
  /* .pill-absence{background:#ffe4e4;color:#922} */
  /* .pill-recurrence{background:repeating-linear-gradient(45deg,#eef 0,#eef 6px,#dde 6px,#dde 12px);border-radius:12px;display:block;height:38px} */
  /* .pill-empty{background:#f3f5f7;color:#99a} */

  /* .pill-split{display:grid;grid-template-columns:1fr;gap:6px} */
  /* .pill-half{padding:8px 10px;border-radius:10px;min-height:34px} */
  /* .pill-half.pill-recurrence{background:repeating-linear-gradient(45deg,#eef 0,#eef 6px,#dde 6px,#dde 12px)} */

  .poste-editable{cursor:pointer;position:relative}
  .poste-editable .edit-dot{position:absolute;top:6px;right:8px;width:7px;height:7px;border-radius:50%;background:#22c55e} /* vert */
  .poste-editable .edit-dot.local{background:#0d6efd}   /* bleu */
  .poste-editable .edit-dot.remote{background:#f59e0b}  /* orange */
  .pill.locked, .pill-half.locked{opacity:.6;cursor:not-allowed;position:relative}
  .pill.locked .lock-icon, .pill-half.locked .lock-icon{position:absolute;top:2px;right:2px;font-size:.9rem;opacity:.75}

  .legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
  .legend-editable{background:#22c55e}
  .legend-local{background:#0d6efd}
  .legend-remote{background:#f59e0b}
  .legend-pill{display:inline-flex;align-items:center;justify-content:center;width:24px;height:18px;border-radius:6px;font-size:.8rem}

  /* Masquer complètement les options filtrées (on reconstruit quand même via JS) */
  select#hm_select option[hidden]{display:none}

  .btn.disabled, .btn:disabled, fieldset:disabled .btn{
    background-color: var(--brand);
    border-color: var(--brand);
  }

    /* Cellule quand la compétence n’est pas attribuée au user */
  td.no-competence {
    background: #f3f4f6; /* gris clair */
    color: #9aa0a6;      /* texte grisé */
  }

/* Icône "!" en haut à droite des cases calendrier */
.month-table .day-cell {
  position: relative; /* pour ancrer l'event-flag */
}

.event-flag {
  position: absolute;
  top: 4px;   /* ajuste verticalement */
  right: 6px; /* ajuste horizontalement */
  color: #dc3545; /* rouge Bootstrap danger */
  font-size: 1rem;
  cursor: pointer;
  z-index: 2;
}
/* Empêche la coupe des badges "tâche" sous la pill */
.team-week-table td.week-cell{
  height: auto;              /* plus de hauteur figée */
  vertical-align: top;       /* colle le contenu en haut */
  overflow: visible;         /* on autorise le débordement */
  text-overflow: initial;    /* pas de "…" sur la cellule */
}

/* Les pills ne forcent plus la hauteur */
.team-week-table .pill,
.team-week-table .pill-split,
.team-week-table .pill-half{
  height: auto;              /* au lieu de 100% */
}

/* La rangée de tâches peut prendre de la place */
.task-row{
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* Les pills ne forcent plus la hauteur à 100% (sinon elles prennent tout l'espace) */
.team-week-table .pill,
.team-week-table .pill-split,
.team-week-table .pill-half { height: auto; }

/* Sécurise l’affichage du texte dans les badges */
.week-cell .task-badge {
  white-space: nowrap;
  /* overflow: hidden; */
  text-overflow: ellipsis;
}

  .user-pill {
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.25rem .5rem;
    border:1px solid #dee2e6;
    border-radius:999px;
    color:inherit;
  }
  .user-pill:hover { background: white; }
  .user-pill-name { white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }

  .workflow-card { background:#f8fbff; }
  .workflow-steps {
    width: min(460px, 100%);
    margin-inline: auto;
    position: relative;
    padding-left: 2.5rem; /* place pour les pastilles numérotées */
  }
  .workflow-steps::before {
    content:"";
    position:absolute;
    left: 1.35rem;   /* aligne avec .step-dot */
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--bs-border-color, #dee2e6);
    z-index: 0;
  }
  .btn-step {
    position: relative;
    padding-left: 2.75rem; /* texte décalé après la pastille */
  }
  .btn-step .step-dot {
    position: absolute;
    left: 0; top: 50%;
    transform: translate(-50%, -50%); /* pastille centrée sur la ligne */
    width: 28px; height: 28px;
    border-radius: 999px;
    display:flex; align-items:center; justify-content:center;
    background: var(--bs-body-bg, #fff);
    border: 2px solid var(--bs-border-color, #dee2e6);
    font-weight: 700;
    z-index: 1;
  }
  .btn-step:disabled { opacity: .6; cursor: not-allowed; }
  .btn-success .step-dot{
    color: #198754;
  }
    .btn-danger .step-dot{
    color: #dc3545;
  }
      .btn-primary .step-dot{
    color: var(--brand);
  }
    .section-title i { opacity:.8; margin-right:.4rem; }
  .week-box { background:#f8f9fa; border:1px solid #e9ecef; border-radius:.75rem; }
  .badge-week { background:#e7f1ff; color:#0d6efd; border:1px solid #b6d4fe; }
  .toolbar-card { background:#f8fbff; }
    #conflictMirror .conflict-item { padding:.4rem .5rem; border:1px solid #ffe08a; background:#fff8e1; border-radius:.5rem; margin-bottom:.5rem; }
  #conflictMirror .conflict-item .when { font-weight:600; margin-right:.5rem; }
  #conflictMirror .conflict-item .who  { font-weight:600; }
  #conflictMirror .conflict-item .badge { margin-left:.35rem; }

  /* Zone Conflits */
  #conflictBox .conflict-count { font-weight:700; }
  #conflictBox .conflict-list { max-height: 260px; overflow:auto; }
  #conflictBox.d-none { display:none !important; }
  /* Élément déjà choisi */
/* Surlignage de l'élément déjà sélectionné dans la liste */
#posteList li.is-current,
#horaireList li.is-current{
  background: #fff8dc;              /* crème léger */
  outline: 2px solid #ffcf6e;
  position: relative;
}

.text-primary{
  color: var(--brand) !important;
}