/* ======== Base ======== */
:root{
  --input-h: 42px;
  --input-radius: 8px;
  --brand: #007BFF;
  --ink: #0f172a;
  --muted: #6b7280;
  --bg: #f0f2f5;
  --card: #fff;
  --shadow: 0 4px 12px rgba(0,0,0,0.07);
}

*{ box-sizing: border-box; }

body {
  font-family: Arial, sans-serif;
  background-color: var(--bg);
  padding: 20px;
  margin: 0;
  color: var(--ink);
}

.container {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--card);
  padding: 28px;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

h2 {
  color: var(--ink);
  text-align: center;
  margin: 0 0 18px;
  font-size: 24px;
}

h3 {
  color: var(--ink);
  margin: 0;
  font-size: 18px;
}

/* ======== Pasos numerados ======== */
.step-title{
  display:flex; align-items:center; gap:10px;
  margin: 16px 0 12px;
}
.step-badge{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
  color:#0b63d1; background:#e8f2ff; border:1px solid #cfe4ff;
}

/* ======== Layout base de secciones ======== */
.form-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 24px;
  margin-bottom: 16px;
}

.form-group { display:flex; flex-direction:column; }
.form-group label { margin-bottom: 6px; font-weight: 600; }

.form-group input,
.form-group select {
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: var(--input-radius);
  font-size: 15px;
  height: var(--input-h);
  background:#fff;
}

.dynamic-group input {
  margin-bottom: 8px;
  width: 100%;
  height: var(--input-h);
}

.muted { color: var(--muted); font-size:12px; }

hr {
  border: none;
  border-top: 1px solid #e9edf3;
  margin: 18px 0;
}

/* ======== Botones (con contraste en hover/focus) ======== */
button {
  padding: 8px 14px;
  background-color: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button:hover { background-color: #0666d3; }
button:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
button:active { filter: brightness(.93); }
.add-button { margin-top: -2px; }

/* CTA estilo barra inferior */
.cta-bar{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  margin-top: 10px;
}
.cta{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 14px; border:none; border-radius:10px;
  background:#eef0f3; color:#111827; cursor:pointer; text-decoration:none; font-weight:600;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cta:hover{ background:#dfe3e8; }
.cta:focus-visible{ outline:2px solid #1f2937; outline-offset:2px; }
.cta:active{ filter:brightness(.97); }
.cta.primary{ background: var(--brand); color:#fff }
.cta.primary:hover{ background:#0666d3; }
.cta.primary:focus-visible{ outline:2px solid #1d4ed8; outline-offset:2px; }

/* ======== Triple fila (Responsables / Matériel / Lot sacs) ======== */
.triple-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 980px){
  .triple-grid { grid-template-columns: 1fr; }
}
.triple-grid .panel {
  background: #fdfdfd;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  display:flex; 
  flex-direction:column; 
  gap:12px;
  height: auto;           /* clave: que el contenido defina la altura */
  min-height: 0;
  overflow: visible;
  position: relative;
}
.triple-grid .panel > h3{
  text-align: center !important;
  margin: 0 0 8px 0;
  color: var(--ink);
}
.triple-grid .panel .add-button{ margin-top: auto !important; width: 100%; }
.triple-grid .panel select,
.triple-grid .panel input{
  width: 100%;
}

/* ======== Responsables (grid robusto) ======== */
#section-responsables { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
#section-responsables > h3 { text-align:left !important; margin:0 0 10px 0; font-size:16px; }

#responsablesList.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  grid-auto-flow: row dense;
  width: 100%;
}
@media (max-width: 860px){
  #responsablesList.grid{ grid-template-columns: 1fr; }
}

#section-responsables .responsable-item{
  display:flex; gap:8px; align-items:center; width:100%;
}
#section-responsables .responsable-item select,
#section-responsables .responsable-item input{
  flex:1; height: 42px;
  border:1px solid #e5e7eb; border-radius:10px; padding:0 12px;
}

#btnAjouterResponsable.add-button{
  margin-top: 8px !important;
  width: 100%;
}

/* ======== Poids Variable ======== */
#poidsLotWrapper { margin-bottom: 18px; }
#poidsLotWrapper .lot-block{ display:flex; flex-direction:column; gap:10px; }
#poidsLotWrapper .lot-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
#poidsLotWrapper .lot-tools{ display:inline-flex; gap:6px; align-items:center; }
#poidsLotWrapper input[name="numero_lot[]"]{ max-width: 320px; }

/* Grid de pesos */
.grid-poids {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.grid-poids input[type="number"] {
  text-align: center;
  height: var(--input-h);
  border-radius: 10px;
  padding: 6px 8px;
  font-weight: 600;
}

/* ======== Poids Fixe / Crèmes & Kumis ======== */
.fixe-item, .liquide-item{
  border:1px solid #e5e7eb;
  background:#f7f7f9;
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}
.fixe-row, .liquide-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr .9fr .9fr; /* ProduitLot | Lot | #Boîtes | Unités */
  gap:12px;
  align-items:end;
}
.fixe-row .form-group,
.liquide-row .form-group{ margin:0; }
.fixe-row .form-group label,
.liquide-row .form-group label{ font-weight:600; font-size:13px; margin-bottom:4px; }
.fixe-row input, .fixe-row select,
.liquide-row input, .liquide-row select{
  height:42px; border:1px solid #e5e7eb; border-radius:10px; padding:0 12px; font-size:15px;
}
@media (max-width: 900px){
  .fixe-row, .liquide-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .fixe-row, .liquide-row{ grid-template-columns: 1fr; }
}

/* ======== Totales ======== */
.poids-total { text-align: center; font-weight: 700; margin-top:8px; }

/* Placeholders */
::placeholder{ font-size:12px; color:#9aa3af; }
/* === Fix contraste botones en Responsables (incl. "Supprimer") === */
#section-responsables .responsable-item button,
#section-responsables .responsable-item .remove-button,
#section-responsables .responsable-item .btn-remove,
#section-responsables .responsable-item [aria-label="Supprimer"],
#section-responsables .responsable-item [title="Supprimer"]{
  background:#eef0f3;           /* gris legible */
  color:#111827;                 /* texto oscuro */
  border:1px solid #e5e7eb;
}

#section-responsables .responsable-item button:hover,
#section-responsables .responsable-item .remove-button:hover,
#section-responsables .responsable-item .btn-remove:hover{
  background:#e5e7eb;
}

#section-responsables .responsable-item button:focus-visible{
  outline:2px solid #1f2937; outline-offset:2px;
}

#section-responsables .responsable-item button[disabled],
#section-responsables .responsable-item .remove-button[disabled]{
  background:#f5f6f8;
  color:#9aa3af;                 /* se nota que está desactivado */
  border:1px solid #e5e7eb;
  cursor:not-allowed;
  box-shadow:none;
}

/* Por si algún “Supprimer” viene como .cta */
#section-responsables .responsable-item .cta{
  background:#eef0f3; color:#111827;
}
#section-responsables .responsable-item .cta:hover{
  background:#e5e7eb;
}
#section-responsables .responsable-item .cta[disabled]{
  background:#f5f6f8; color:#9aa3af; border:1px solid #e5e7eb;
}
/* === Contraste universal para botones deshabilitados === */
button[disabled],
.cta[disabled]{
  background: #f5f6f8 !important;
  color: #9aa3af !important;
  border: 1px solid #e5e7eb !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* === Lotes – Poids Variable: tools (+5, +10, +25, Supprimer) === */
#poidsLotWrapper .lot-tools button,
#poidsLotWrapper .lot-header button{
  background: #eef0f3;          /* gris legible */
  color: #111827;
  border: 1px solid #e5e7eb;
  height: 36px;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 600;
}
#poidsLotWrapper .lot-tools button:hover,
#poidsLotWrapper .lot-header button:hover{
  background: #e5e7eb;
}
#poidsLotWrapper .lot-tools button:focus-visible,
#poidsLotWrapper .lot-header button:focus-visible{
  outline: 2px solid #1f2937; outline-offset: 2px;
}
#poidsLotWrapper .lot-tools button[disabled],
#poidsLotWrapper .lot-header button[disabled]{
  background: #f5f6f8;
  color: #9aa3af;
  border: 1px solid #e5e7eb;
}

/* === Lotes – Poids Fixe: botón Supprimer y afines === */
#fixeLotsContainer .fixe-item button,
#fixeLotsContainer .fixe-item .btn-remove{
  background: #eef0f3;
  color: #111827;
  border: 1px solid #e5e7eb;
  height: 36px;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 600;
}
#fixeLotsContainer .fixe-item button:hover,
#fixeLotsContainer .fixe-item .btn-remove:hover{
  background: #e5e7eb;
}
#fixeLotsContainer .fixe-item button[disabled],
#fixeLotsContainer .fixe-item .btn-remove[disabled]{
  background: #f5f6f8;
  color: #9aa3af;
  border: 1px solid #e5e7eb;
  cursor: not-allowed;
}

/* === Sección 2 (por si algún botón queda pálido en esos paneles) === */
.triple-grid .panel button:not(.primary):not(.add-button){
  background: #eef0f3;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.triple-grid .panel button:not(.primary):not(.add-button):hover{
  background: #e5e7eb;
}
.triple-grid .panel button[disabled]{
  background: #f5f6f8;
  color: #9aa3af;
}