:root{ --bg:#fafafa; --card:#fff; --text:#111; --muted:#666; --line:#e5e5e5; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text); }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
h1{ font-size:20px; margin:0 0 12px; }
h2{ font-size:16px; margin:0 0 8px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin:12px 0; }
.small{ color:var(--muted); font-size:13px; line-height:1.35; }
code{ background:#f1f1f1; padding:2px 6px; border-radius:8px; }
.topbar{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:10px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn{ display:inline-block; text-decoration:none; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:#111; font-size:14px; }
.table-wrap{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:auto; }
table{ width:100%; border-collapse:collapse; min-width:820px; }
th, td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ text-align:left; font-size:13px; color:var(--muted); background:#fcfcfc; position:sticky; top:0; }
td{ font-size:14px; }
td.num{ text-align:right; font-variant-numeric: tabular-nums; }
td.prod{ white-space:nowrap; }

.upload{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.primary{ border-color:#d0d0d0; font-weight:600; }

.upload-grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; align-items:end; }
.upload-grid .file{ grid-column: 1 / -1; }
.actions-row{ grid-column: 1 / -1; display:flex; justify-content:flex-start; gap:10px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field input{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:14px; background:#fff; }
.label{ font-size:13px; color:var(--muted); }
.hint{ margin-top:4px; }
@media (max-width: 820px){
  .upload-grid{ grid-template-columns: 1fr; }
}

.cell-input{ width:90px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font-size:14px; text-align:right; }

.select{ padding:8px 10px; border:1px solid var(--line); border-radius:12px; font-size:14px; background:#fff; }
.top-input{ width:90px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; font-size:14px; text-align:right; }
.save-status{ margin-top:8px; font-size:13px; color:var(--muted); }
.save-status.saving{ color:#444; }
.save-status.dirty{ color:#a15b00; }
.save-status.error{ color:#b00020; }
.save-status.saved{ color:#2e7d32; }

.workflow{ min-width:160px; }
.wf{ display:flex; gap:6px; flex-wrap:wrap; }
.wf-btn{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; }
.wf-btn.na{ opacity:0.35; }
.wf-btn.todo{ opacity:1; outline:2px solid rgba(255,165,0,0.25); }
.wf-btn.done{ opacity:1; outline:2px solid rgba(46,125,50,0.25); }


/* responsive full-width */
.container{
  max-width: 100%;
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table{
  width: 100%;
  border-collapse: collapse;
}

th, td{
  padding: 10px 10px;
  vertical-align: top;
}

/* Reduce horizontal overflow on desktop */
@media (min-width: 900px){
  .container{ padding-left: 18px; padding-right: 18px; }
  th, td{ padding: 10px 12px; }
  .workflow{ min-width: 200px; }
}

/* Mobile tweaks */
@media (max-width: 600px){
  h1{ font-size: 18px; }
  .topbar{ gap: 12px; }
  th, td{ padding: 8px 8px; font-size: 13px; }
  .prod{ max-width: 220px; }
  .cell-input{ width: 76px; }
  .workflow{ min-width: 160px; }
}

/* Workflow visual states */
.wf{ display:flex; gap:6px; flex-wrap:wrap; }
.wf-btn{
  flex: 1 1 44px;
  min-width: 44px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-weight: 800;
  color: #111;
}

/* N/A (gris) */
.wf-btn.na{
  background: #f0f0f0;
  border-color: #cfcfcf;
  color: #666;
}

/* À faire (rouge clair) */
.wf-btn.todo{
  background: #f8d7da;
  border-color: #f1aeb5;
  color: #111;
}

/* Fait (vert clair) */
.wf-btn.done{
  background: #d1e7dd;
  border-color: #a3cfbb;
  color: #111;
}

.total-preparer{ white-space: nowrap; }
.total-recolter{ white-space: nowrap; }


/* Group row coloring based on solde (manque = rouge, ok/surplus = vert) */
tr.group-bad td{ background: rgba(220, 53, 69, 0.12); }
tr.group-ok td{ background: rgba(25, 135, 84, 0.10); }
tr.group-bad input, tr.group-ok input{ background: rgba(255,255,255,0.85); }

/* Workflow layout (2x2 grid) */
.workflow{ min-width: 320px; }
.wf{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-btn{
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 700px){
  .workflow{ min-width: 260px; }
  .wf-btn{ font-size: 13px; min-height: 42px; }
}