:root{
  --bg:#0B1220; --card:#0F1626; --muted:#D7ECF6; --primary:#3C7E91; --accent:#2A5E97;
  --border:#1c2540; --text:#E9F1F7;
  /* hauteur de la 1ʳᵉ rangée du thead (mise à jour par JS si présent) */
  --thead-row1-h: 42px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,Arial}
a{color:var(--muted);text-decoration:none}

.container{max-width:1400px;margin:0 auto;padding:24px}

.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.title{font-size:22px;font-weight:800}
.sub{opacity:.7}

.card{background:linear-gradient(180deg,rgba(60,126,145,.08),rgba(42,94,151,.06));border:1px solid var(--border);border-radius:16px;padding:16px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}
.btn{background:var(--accent);border:none;color:#fff;padding:10px 14px;border-radius:12px;cursor:pointer}
.btn.secondary{background:#1b2a4b}
.btn.ghost{background:transparent;border:1px solid var(--border)}
.input,select{background:#0c152b;border:1px solid var(--border);color:var(--text);padding:10px 12px;border-radius:10px}

.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid transparent}
.badge-muted{background:#1a263b;color:#bcd2df}
.badge-green{background:#0d2b24;color:#b2e5d3}
.badge-blue{background:#0d1f33;color:#b9d7ff}
.badge-orange{background:#2c2011;color:#ffd7a8}
.badge-primary{background:#152a3a;color:#cbe9f2}
.badge-red{background:#2a1313;color:#ffc2c2}

.planning-wrap{overflow:auto;border:1px solid var(--border);border-radius:16px;max-height:calc(100vh - 120px)}

.table{min-width:1200px}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px 12px;white-space:nowrap}

/* THEAD sticky sur 2 rangées */
.table thead th{position:sticky;top:0;background:#0E172B;z-index:3000}
.table thead tr.row-1 th{top:0}
.table thead tr.row-2 th{top:var(--thead-row1-h);z-index:1500!important} /* sous A/B/C */

/* Colonnes figées A/B/C — opaques (sans dégradé) */
.table .col-sticky{position:sticky;left:0;background:#0E172B!important;background-image:none!important;z-index:2000}
.table .col-sticky-2{position:sticky;left:220px;background:#0E172B!important;background-image:none!important;z-index:2000}
.table .col-sticky-3{position:sticky;left:420px;background:#0E172B!important;background-image:none!important;z-index:2000}

/* Les titres A/B/C au-dessus des autres entêtes */
.table thead .col-sticky,
.table thead .col-sticky-2,
.table thead .col-sticky-3{z-index:4000;background:#0E172B}

/* Largeurs */
.colA{width:220px}.colB{width:200px}.colC{width:230px}
.slot{min-width:140px}
.cell{min-height:52px}

/* Missions */
.mission{border:1px dashed #2c4060;border-radius:12px;padding:8px 10px;margin:6px 0;cursor:grab}
.mission:hover{border-style:solid}
.dragging{opacity:.6;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.mission.hit{border-color:rgba(42,201,64,.65);box-shadow:0 0 0 1px rgba(42,201,64,.45);background:rgba(42,201,64,.14)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:20px;z-index:5000}
.modal.open{display:flex}
.modal-card{background:#0E172B;border:1px solid var(--border);border-radius:16px;padding:16px;max-width:680px;width:100%}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}

.small{font-size:12px;opacity:.7}
.hr{height:1px;background:var(--border);margin:12px 0}

#toast{position:fixed;right:20px;bottom:20px;background:#102038;border:1px solid var(--border);color:#dff6ff;padding:10px 14px;border-radius:10px;display:none;z-index:6000}

/* Désactiver scroll body quand modal ouverte */
body.modal-open{overflow:hidden}

/* Header global sticky */
.header{position:sticky;top:0;z-index:6000;background:var(--bg);padding:12px 0;box-shadow:0 6px 14px rgba(0,0,0,.18)}

/* ===== Status menu (inline) ===== */
.status-menu{position:absolute;z-index:6500;background:#0E172B;border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.45);min-width:220px;padding:6px}
.status-menu-list{display:flex;flex-direction:column;gap:6px}
.status-menu-item{background:#0c152b;border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer;font-size:13px}
.status-menu-item:hover{background:#13203a}
.status-menu-item.active{border-color:#2A5E97;box-shadow:inset 0 0 0 1px #2A5E97}
.status-wrap{cursor:pointer}
.status-wrap .badge{transition:transform .08s ease}
.status-wrap:hover .badge{transform:scale(1.02)}
.input.search{max-width:360px}

/* =========================================================
   ZÉRO espace entre A/B/C + 1ʳᵉ DATE collée à C (droite)
   ========================================================= */
/* On contrôle les séparations uniquement dans #planning */
#planning{
  border-collapse: separate;
  border-spacing: 0 !important;   /* aucun “gutter” */
  table-layout: fixed;
}
/* Traits fins entre colonnes, sans espace */
#planning th, #planning td{border-bottom:1px solid var(--border);padding:10px 12px}
#planning th + th, #planning td + td{border-left:1px solid var(--border)}

/* A/B/C opaques et au-dessus */
#planning th.col-sticky,    #planning td.col-sticky,
#planning th.col-sticky-2,  #planning td.col-sticky-2,
#planning th.col-sticky-3,  #planning td.col-sticky-3{
  background:#0E172B!important;
  background-image:none!important;
  z-index:4000;
  background-clip:padding-box;
}

/* Pas de double bordure entre A|B et B|C :
   – on retire le border-right de A et B
   – on garde un border-right UNIQUEMENT sur C
   – le border-left auto commence à partir de la 1ʳᵉ date */
#planning th.col-sticky,    #planning td.col-sticky{border-right:0!important}
#planning th.col-sticky-2,  #planning td.col-sticky-2{border-right:0!important}
#planning th.col-sticky-3,  #planning td.col-sticky-3{border-right:1px solid var(--border)!important}

/* Si thead a 2 rangées: la cellule “slot” (row-1) ne prend aucun espace */
#planning thead tr.row-1 th.slot{
  height:0!important; padding:0!important; border:0!important; line-height:0!important;
}

/* 1ʳᵉ date immédiatement à droite de C (pas de border côté gauche) */
#planning thead tr.row-2 th.slot:first-child{padding-left:0!important;border-left:0!important}
/* idem pour la 1ʳᵉ cellule jour de chaque ligne */
#planning tbody tr td.slot:first-of-type{border-left:0!important}

/* ===== Responsif: ajuster les offsets sticky quand les largeurs changent ===== */
@media (max-width:1024px){
  /* Largeurs réduites (déjà dans ton CSS) */
  .colA{width:180px}.colB{width:160px}.colC{width:200px}
  /* Offsets correspondants: 180, puis 180+160 = 340 */
  .table .col-sticky-2{left:180px}
  .table .col-sticky-3{left:340px}
}

/* === A+B+C في عمود واحد ثابت على اليسار === */
.colABC{ width:650px; } /* 220 + 200 + 230 — بدّلها إلا بغيتي */

/* صفر فاصلة بين الأعمدة وخط رقيق فقط */
#planning{ border-collapse:separate; border-spacing:0!important; table-layout:fixed; }
#planning th, #planning td{ padding:10px 12px; border-bottom:1px solid var(--border); }
#planning th + th, #planning td + td{ border-left:1px solid var(--border); }

/* العمود المدموج ثابت وopaque */
#planning .colABC.col-sticky{
  position:sticky; left:0;
  background:#0E172B!important; background-image:none!important;
  z-index:4000; border-right:1px solid var(--border);
  background-clip:padding-box;
}

/* شريط التواريخ يهبط تحت العمود الثابت فالتراكب */
.table thead tr.row-2 th{ z-index:1500!important; }

/* نحيد خانة الـslot اللي كانت فوق التواريخ */
#planning thead tr.row-1 th.slot{
  height:0!important; padding:0!important; border:0!important; line-height:0!important;
}

/* أول تاريخ ملصوق مباشرة بعد العمود المدموج */
#planning thead tr.row-2 th.slot:first-child{ border-left:0!important; padding-left:0!important; }
#planning tbody tr td.slot:first-of-type{ border-left:0!important; }