/* Page Commandes : « Commandes clients » (orders-live.js, orders-staff.js) et « Fournisseurs » (pages/commandes-fournisseurs.js).
   Chargé APRÈS style.css et responsive.css. Ordinateur : deux colonnes (liste | détail). Tablette : idem, détail plus étroit.
   Téléphone (≤ 700 px) : la liste occupe l'écran ; le détail s'ouvre par-dessus avec un bouton « ← Retour ». */

#page-commandes { position: relative; }
.co-tab-badge { margin-left: 5px; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #dc2626; color: #fff; font-size: .72em; font-weight: 700; line-height: 18px; text-align: center; }

/* ---------- Barre du haut ---------- */
#co-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 8px; flex: none; }
#co-bar #co-live { margin-left: auto; }
#co-badge { background: #dc2626; color: #fff; border-radius: 9px; padding: 0 6px; font-size: .8em; margin-left: 3px; }
#co-badge[hidden] { display: none; }

/* ---------- Commandes clients ---------- */
#co-panel, #cf-panel { display: none; flex: 1; min-height: 0; gap: 8px; padding: 0 8px 8px; }
#co-panel > .card, #cf-panel > .card { min-height: 0; }
.co-listcard, .cf-listcard { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.co-detail, .cf-detail { width: 320px; flex: none; }
#co-filters, #cf-filters { padding: 6px 8px; border-bottom: 1px solid var(--border); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
#co-filters select, #cf-filters select { width: auto; margin-left: auto; padding: 2px 6px; }
.co-search, .cf-tools { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.co-empty { padding: 18px 14px; text-align: center; color: var(--muted); font-size: .85em; }
#co-back, #cf-back { display: none; }

.co-row { display: flex; gap: 8px; align-items: center; padding: 7px 9px; border-bottom: 1px solid var(--border); cursor: pointer; }
.co-main { flex: 1; min-width: 0; }
.co-title { font-weight: 700; font-size: .85em; overflow-wrap: anywhere; }
.co-side { text-align: right; flex: none; }
.co-side b { font-size: .85em; }
.co-actions { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.co-actions .btn { padding: 2px 8px; text-decoration: none; }
.co-badge-st { border-radius: 4px; padding: 1px 6px; font-size: .78em; font-weight: 600; white-space: nowrap; }

.co-dhead { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.co-line { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: .82em; }
.co-total { padding: 8px 10px; font-weight: 800; display: flex; justify-content: space-between; }
.co-btns { padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 5px; }
.co-btns .btn { text-align: center; text-decoration: none; }
.co-hist { padding: 4px 10px 10px; }

/* ---------- Nouvelle commande (fenêtre) ---------- */
.os-src { display: flex; gap: 6px; margin-top: 4px; }
.os-src button { flex: 1; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
.os-hit { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: none; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.os-hit:hover, .os-hit.on { background: var(--panel2); }
.os-hit .nm { font-weight: 600; font-size: .9em; }
.os-chip { display: inline-block; font-size: .72em; padding: 0 6px; border-radius: 9px; background: var(--panel2); margin: 2px 4px 0 0; color: var(--muted); }
.os-chip.zero { background: rgba(220,38,38,.12); color: #dc2626; }
.os-warn { color: #b45309; font-size: .72em; font-weight: 600; }
.os-err { color: #dc2626; font-size: .84em; margin-top: 6px; min-height: 1.2em; }
.os-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; font-size: .86em; }
.os-opts label { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---------- Fournisseurs (bons de commande d'achat) ---------- */
.cf-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-tools .input { width: auto; flex: 1 1 140px; min-width: 0; }
.cf-tools #cf-sup { flex: 2 1 170px; }
.cf-tools #cf-q { flex: 1 1 100%; }
.cf-row { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.cf-prog { height: 4px; border-radius: 2px; background: var(--panel2); margin-top: 4px; overflow: hidden; }
.cf-prog > i { display: block; height: 100%; background: #059669; }
.cf-dline { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: .82em; }
.cf-rcv { font-size: .78em; color: var(--muted); }
.cf-rcv b { color: #059669; }
/* ligne d'édition : article | fournisseur | réf. fournisseur | qté | prix | total | actions */
.cf-edit-line { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) 70px 92px 86px 76px; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .84em; }
.cf-el-total { text-align: right; }
.cf-el-btns { display: flex; gap: 2px; justify-content: flex-end; }
.cf-edit-head > span:nth-child(n+4) { text-align: right; }
.cf-sup { border-bottom: 6px solid var(--panel2); }
.cf-suphead { display: flex; justify-content: space-between; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; background: var(--panel2); font-size: .85em; }
.cf-supbtns { display: flex; gap: 4px; }
.cf-supbtns .btn { padding: 2px 8px; text-decoration: none; }
.cf-subtotal { display: flex; justify-content: space-between; padding: 5px 10px; font-size: .82em; }
.cf-refchip { display: inline-block; font-size: .72em; padding: 0 6px; border-radius: 4px; background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }
.cf-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cf-chip { font-size: .8em; padding: 2px 8px; border-radius: 999px; background: var(--panel2); }
.cf-chip.warn { background: rgba(220,38,38,.12); color: #dc2626; }
.cf-cnt { background: #7c3aed; color: #fff; border-radius: 9px; padding: 0 6px; font-size: .78em; margin-left: 2px; }
.cf-edit-head { font-size: .72em; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.cf-edit-line input, .cf-edit-line select { padding: 4px 6px; }
.cf-edit-line input[type=number] { text-align: right; }
.cf-rcv-line { display: grid; grid-template-columns: 1fr 56px 100px; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .86em; }
.cf-rcv-line input { padding: 4px 6px; text-align: right; }
.cf-st { border-radius: 4px; padding: 1px 6px; font-size: .78em; font-weight: 600; white-space: nowrap; }
.cf-print-sheet { font-family: Arial, sans-serif; font-size: 12px; }

/* ---------- Tablette ---------- */
@media (max-width: 900px) {
  .co-detail, .cf-detail { width: 280px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 700px) {
  /* fenêtres de cette page : de la place sous la fenêtre pour la barre d'état du bas */
  #modal-overlay:has(.modal.co-modal) { padding-bottom: 64px; }
  .modal.co-modal { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); }
  #co-bar [data-v] { flex: 1 1 40%; }
  #co-bar #co-new { flex: 1 1 55%; order: 3; }
  #co-bar #co-live { order: 4; margin-left: 0; font-size: .75em; }
  #co-bar #co-mute { order: 5; }
  #co-panel, #cf-panel { padding: 0 4px 6px; position: relative; }
  .co-detail, .cf-detail { display: none; width: auto; position: absolute; inset: 0 4px 6px; z-index: 40; }
  #co-panel.co-detail-open .co-detail, #cf-panel.cf-detail-open .cf-detail { display: flex; }
  #co-panel.co-detail-open .co-listcard, #cf-panel.cf-detail-open .cf-listcard { visibility: hidden; }
  #co-back, #cf-back { display: inline-flex; align-items: center; }
  #co-filters, #cf-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #co-filters::-webkit-scrollbar, #cf-filters::-webkit-scrollbar { display: none; }
  #co-filters .btn, #cf-filters .btn { flex: none; }
  #co-filters select, #cf-filters select { flex: none; margin-left: 0; }
  .co-row, .cf-row { min-height: 56px; }
  .co-actions .btn { min-height: 40px; min-width: 44px; }
  .cf-edit-head { display: none; }
  .cf-edit-line { grid-template-columns: 1fr 70px 1fr 56px; grid-template-areas: "name name name btns" "sup sup sup sup" "ref ref ref ref" "qty price total total"; padding: 8px 0; }
  .cf-el-name { grid-area: name; } .cf-el-sup { grid-area: sup; } .cf-el-ref { grid-area: ref; } .cf-el-qty { grid-area: qty; }
  .cf-el-price { grid-area: price; } .cf-el-total { grid-area: total; } .cf-el-btns { grid-area: btns; align-self: start; }
  .cf-rcv-line { grid-template-columns: 1fr 50px 84px; }
}
@media (max-width: 700px) { .cf-rcv-line.cf-edit-head { display: grid; } }

/* ---------- Corbeille des commandes fournisseurs, fiche fournisseur ---------- */
.cf-supstrip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--panel2); font-size: .85em; }
.cf-trashbox { margin: 8px 10px; padding: 8px 10px; border: 1px dashed #dc2626; border-radius: 8px; color: #b91c1c; font-size: .85em; background: rgba(220,38,38,.06); }
.cf-warnbox { margin: 10px 0; padding: 8px 10px; border: 1px solid #d97706; border-radius: 8px; background: rgba(217,119,6,.08); font-size: .88em; }
.cf-radio { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; cursor: pointer; }
.cf-radio input { margin-top: 3px; }