/* ═══════════════════════════════════════════════════════════════════
   assets/syn-achats.css — Achats : commandes, litiges, catalogue,
   mouvements de stock, et leurs fenêtres (refonte, lot 5)

   Chargée après syn-zones.css. Tout est sous #page-purchases ou l'une
   des fenêtres d'Achats (liste ACH ci-dessous). Les couleurs viennent
   des jetons du thème ; les couleurs de catégorie (réglées dans le
   Catalogue) restent celles posées en ligne par les scripts.
   ACH : #catalogOverlay #browseOverlay #listsOverlay #saveListOverlay
         #stMotifsOverlay #supplierOverlay #orderDetailOverlay
         #disputeDetailOverlay
   ═══════════════════════════════════════════════════════════════════ */

/* ── Navigation interne ──────────────────────────────────────────
   Le rail (≥ 1100 px) et le tiroir listent déjà Commandes, Litiges,
   Catalogue et Mouvements : sur ordinateur, la barre d'onglets d'Achats
   ferait doublon. Sous 1100 px, elle reste, en bande qui défile. */
@media (min-width:1100px){ #page-purchases .purchasesNav{ display:none !important; } }
#page-purchases .purchasesNav{ display:flex; gap:4px; padding:4px; margin:0 0 14px; border-radius:calc(var(--r) + 2px);
  background:color-mix(in srgb, var(--bd) 45%, transparent); overflow-x:auto; scrollbar-width:none; flex-wrap:nowrap; }
#page-purchases .purchasesNav::-webkit-scrollbar{ display:none; }
#page-purchases .purchaseTab{ flex:1 1 0; min-width:max-content; height:38px; padding:0 10px; border:0; border-radius:var(--r); background:none; box-shadow:none;
  color:var(--mu); font-family:var(--f); font-size:14px; font-weight:700; white-space:nowrap; cursor:pointer; }
#page-purchases .purchaseTab.active{ background:var(--surface, #fff); color:var(--syn); box-shadow:0 1px 3px rgba(2,6,23,.08); }

/* Sous-onglets (commandes, catalogue, mouvements) : une ligne, sans coupure. */
#page-purchases .adminSubNav{ display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 0 4px; margin-bottom:14px; }
#page-purchases .adminSubNav::-webkit-scrollbar{ display:none; }
#page-purchases .adminSubTab{ flex:0 0 auto; white-space:nowrap; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--bd);
  background:var(--surface, #fff); color:var(--tx); font-family:var(--f); font-size:13.5px; font-weight:700; box-shadow:none; }
#page-purchases .adminSubTab:hover{ border-color:var(--syn); color:var(--syn); }
#page-purchases .adminSubTab.active{ background:var(--syn); border-color:var(--syn); color:#fff; }
#page-purchases .adminSubTab:focus-visible, #page-purchases .purchaseTab:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }

/* En-tête de la vue */
#page-purchases .adminViewTitle{ font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
#page-purchases .adminBack{ border-radius:var(--r); font-family:var(--f); font-weight:700; }
#page-purchases .adminHubIcon{ background:var(--synT); color:var(--syn); display:grid; place-items:center; }
#page-purchases .adminHubIcon svg{ width:22px; height:22px; }
#page-purchases .pageHead .title, #page-purchases .purchasePanel .title{ font-weight:800; letter-spacing:-.01em; color:var(--tx); }

/* ── Boutons, partout dans Achats ────────────────────────────── */
#page-purchases .btn, #catalogOverlay .btn, #browseOverlay .btn, #listsOverlay .btn, #saveListOverlay .btn, #stMotifsOverlay .btn,
#supplierOverlay .btn, #orderDetailOverlay .btn, #disputeDetailOverlay .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:var(--r); font-family:var(--f); font-weight:700;
  background:var(--syn); color:#fff; border:1px solid transparent; box-shadow:none; text-shadow:none; }
#page-purchases .btn:hover, #catalogOverlay .btn:hover, #browseOverlay .btn:hover, #listsOverlay .btn:hover, #saveListOverlay .btn:hover,
#stMotifsOverlay .btn:hover, #supplierOverlay .btn:hover, #orderDetailOverlay .btn:hover, #disputeDetailOverlay .btn:hover{ background:var(--synD); }
#page-purchases .btn.green, #catalogOverlay .btn.green, #saveListOverlay .btn.green, #stMotifsOverlay .btn.green, #supplierOverlay .btn.green,
#orderDetailOverlay .btn.green, #disputeDetailOverlay .btn.green{ background:var(--syn); }
#page-purchases .btn.secondary, #catalogOverlay .btn.secondary, #browseOverlay .btn.secondary, #listsOverlay .btn.secondary, #saveListOverlay .btn.secondary,
#stMotifsOverlay .btn.secondary, #supplierOverlay .btn.secondary, #orderDetailOverlay .btn.secondary, #disputeDetailOverlay .btn.secondary{
  background:var(--surface, #fff); color:var(--tx); border-color:var(--bd); }
#page-purchases .btn.secondary:hover, #catalogOverlay .btn.secondary:hover, #browseOverlay .btn.secondary:hover, #listsOverlay .btn.secondary:hover,
#saveListOverlay .btn.secondary:hover, #stMotifsOverlay .btn.secondary:hover, #supplierOverlay .btn.secondary:hover,
#orderDetailOverlay .btn.secondary:hover, #disputeDetailOverlay .btn.secondary:hover{ border-color:var(--syn); color:var(--syn); background:var(--surface, #fff); }
#page-purchases .btn.danger, #catalogOverlay .btn.danger, #stMotifsOverlay .btn.danger, #supplierOverlay .btn.danger,
#orderDetailOverlay .btn.danger, #disputeDetailOverlay .btn.danger{
  background:var(--surface, #fff); color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
#page-purchases .btn.danger:hover, #catalogOverlay .btn.danger:hover, #stMotifsOverlay .btn.danger:hover, #supplierOverlay .btn.danger:hover,
#orderDetailOverlay .btn.danger:hover, #disputeDetailOverlay .btn.danger:hover{ background:var(--red); color:#fff; }
#page-purchases .btn:disabled, #orderDetailOverlay .btn:disabled, #disputeDetailOverlay .btn:disabled{ opacity:.5; cursor:not-allowed; }
#page-purchases .btn svg, #orderDetailOverlay .btn svg, #disputeDetailOverlay .btn svg{ width:16px; height:16px; }
#orderDetailOverlay #orderAccept{ background:var(--ok); }
#orderDetailOverlay #orderAccept:hover{ background:color-mix(in srgb, var(--ok) 85%, #000); }

/* Petits boutons d'icône (modifier, supprimer…) */
#page-purchases .refBtn, #stMotifsOverlay .refBtn, #listsOverlay .refBtn{ width:32px; height:32px; padding:0; display:inline-grid; place-items:center;
  border-radius:calc(var(--r) - 2px); border:1px solid var(--bd); background:var(--surface, #fff); color:var(--mu); box-shadow:none; }
#page-purchases .refBtn svg, #stMotifsOverlay .refBtn svg, #listsOverlay .refBtn svg{ width:15px; height:15px; }
#page-purchases .refBtn:hover, #stMotifsOverlay .refBtn:hover, #listsOverlay .refBtn:hover{ border-color:var(--syn); color:var(--syn); }
#page-purchases .refBtn.refBtnDel:hover, #page-purchases .refBtn[data-cat-del]:hover, #stMotifsOverlay .refBtn[data-motif-del]:hover,
#listsOverlay .refBtn[data-list-del]:hover{ border-color:var(--red); color:var(--red); }

/* ── Pastilles de statut et de priorité ──────────────────────── */
#page-purchases .orderStatutBadge, #orderDetailOverlay .orderStatutBadge, #page-purchases .disputeStatutBadge, #disputeDetailOverlay .disputeStatutBadge,
#page-purchases .disputePrioBadge, #disputeDetailOverlay .disputePrioBadge, #page-purchases .stStatus{
  --pc:var(--mu); display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:999px; border:0;
  font-family:var(--f); font-size:12px; font-weight:800; letter-spacing:0; text-transform:none; white-space:nowrap;
  background:color-mix(in srgb, var(--pc) 12%, transparent); color:color-mix(in srgb, var(--pc) 88%, #000); }
#page-purchases .orderStatutBadge::before, #orderDetailOverlay .orderStatutBadge::before, #page-purchases .disputeStatutBadge::before,
#disputeDetailOverlay .disputeStatutBadge::before, #page-purchases .disputePrioBadge::before, #disputeDetailOverlay .disputePrioBadge::before,
#page-purchases .stStatus::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pc); flex:0 0 auto; }
#page-purchases .orderStatut-soumise, #orderDetailOverlay .orderStatut-soumise{ --pc:var(--amb); }
#page-purchases .orderStatut-acceptee, #orderDetailOverlay .orderStatut-acceptee{ --pc:var(--ok); }
#page-purchases .orderStatut-refusee, #orderDetailOverlay .orderStatut-refusee{ --pc:var(--red); }
#page-purchases .orderStatut-archivee, #orderDetailOverlay .orderStatut-archivee{ --pc:var(--mu); }
#page-purchases .statut-a_traiter, #disputeDetailOverlay .statut-a_traiter{ --pc:var(--syn); }
#page-purchases .statut-en_cours, #disputeDetailOverlay .statut-en_cours{ --pc:var(--amb); }
#page-purchases .statut-resolu, #disputeDetailOverlay .statut-resolu{ --pc:var(--ok); }
#page-purchases .prio-basse, #disputeDetailOverlay .prio-basse{ --pc:var(--ok); }
#page-purchases .prio-moderee, #disputeDetailOverlay .prio-moderee{ --pc:var(--mu); }
#page-purchases .prio-haute, #disputeDetailOverlay .prio-haute{ --pc:var(--amb); }
#page-purchases .prio-urgent, #disputeDetailOverlay .prio-urgent{ --pc:var(--red); }
#page-purchases .stStatus.pending{ --pc:var(--amb); }
#page-purchases .stStatus.done, #page-purchases .stStatus.fixed{ --pc:var(--ok); }
#page-purchases .stStatus.refused{ --pc:var(--red); }

/* ── Cartes : commandes, litiges, mouvements ─────────────────── */
#page-purchases .orderCard, #page-purchases .disputeCard, #page-purchases .stCard, #page-purchases .catalogCard{
  background:var(--surface, #fff); border:1px solid var(--bd); border-radius:calc(var(--r) + 4px); box-shadow:var(--sh);
  transition:border-color var(--tC), box-shadow var(--tC); }
#page-purchases .orderCard:hover, #page-purchases .disputeCard:hover{ border-color:color-mix(in srgb, var(--syn) 45%, var(--bd)); box-shadow:var(--sh2); }
#page-purchases .orderCard{ padding:12px 14px; gap:12px; }
#page-purchases .orderCardNum, #page-purchases .stCardNum{ font-family:var(--m); font-weight:800; font-size:15px; color:var(--syn); }
#page-purchases .orderCardMeta, #page-purchases .disputeCardMeta, #page-purchases .stCardMeta{ color:var(--mu); font-size:12.5px; }
#page-purchases .orderCardRight{ gap:8px; }
#page-purchases .disputeCard{ padding:12px 14px; }
#page-purchases .disputeCardTitle{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:800; color:var(--tx); }
#page-purchases .disputeFavStar{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--bd); cursor:pointer;
  filter:none; opacity:1; font-size:0; transition:color var(--tC), background var(--tC); }
#page-purchases .disputeFavStar svg{ width:19px; height:19px; color:color-mix(in srgb, var(--mu) 55%, transparent); }
#page-purchases .disputeFavStar.active svg{ color:#f59e0b; fill:#f59e0b; }
#page-purchases .disputeFavStar:hover{ background:var(--synT); }
#page-purchases .disputeFavStar:focus-visible{ outline:2px solid var(--syn); outline-offset:2px; }
#page-purchases #disputeFilterFav{ flex:0 0 46px; width:46px; padding:0; align-self:stretch; height:auto; min-height:42px; }
#page-purchases #disputeFilterFav svg{ width:18px; height:18px; }
#page-purchases #disputeFilterFav.on{ background:#fef3c7; border-color:#f59e0b; color:#b45309; }
#page-purchases #disputeFilterFav.on svg{ fill:#f59e0b; stroke:#b45309; }
#page-purchases .ordersGroupTitle{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); margin:16px 0 8px; }
#page-purchases .admEmpty{ border:1px dashed var(--bd); border-radius:calc(var(--r) + 2px); padding:22px 14px; text-align:center; color:var(--mu); font-size:14px; background:none; }

/* Mouvements */
#page-purchases .stCard{ padding:14px 16px; }
#page-purchases .stCardHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#page-purchases .stCardMeta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px; }
#page-purchases .stCardComment{ background:color-mix(in srgb, var(--bg) 60%, var(--surface, #fff)); border-radius:var(--r); padding:8px 10px; margin-top:10px; font-size:13.5px; }
#page-purchases .stViewLine{ display:grid; grid-template-columns:28px minmax(0,1.6fr) minmax(0,.8fr) 70px minmax(0,1fr); align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--bd); }
#page-purchases .stViewLine:last-child{ border-bottom:0; }
#page-purchases .stViewDir{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800; }
#page-purchases .stViewRef b{ font-family:var(--m); }
#page-purchases .stViewName{ display:block; color:var(--mu); font-size:12px; }
#page-purchases .stViewLot{ color:var(--mu); font-size:12.5px; }
#page-purchases .stCardFoot{ display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--bd); }
#page-purchases .stActLabel{ font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); margin-bottom:6px; }
#page-purchases .stActGroup.mod{ border-left:3px solid var(--syn); padding-left:12px; }
#page-purchases .stActBtns{ display:flex; flex-wrap:wrap; gap:6px; }
#page-purchases .admMiniBtn{ height:32px; padding:0 12px; border-radius:calc(var(--r) - 2px); border:1px solid var(--bd); background:var(--surface, #fff);
  color:var(--tx); font-family:var(--f); font-size:12.5px; font-weight:700; box-shadow:none; }
#page-purchases .admMiniBtn:hover{ border-color:var(--syn); color:var(--syn); }
#page-purchases .admMiniBtn.ok{ background:var(--ok); border-color:var(--ok); color:#fff; }
#page-purchases .admMiniBtn.warn{ color:var(--amb); border-color:color-mix(in srgb, var(--amb) 40%, transparent); }
#page-purchases .admMiniBtn.danger{ color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, transparent); }
#page-purchases .admMiniBtn.danger:hover{ background:var(--red); color:#fff; }

/* Saisie de commande : rayons, articles, panier */
#page-purchases .orderRayon{ border-radius:calc(var(--r) + 4px); border:1px solid var(--bd); background:var(--surface, #fff); box-shadow:var(--sh); }
#page-purchases .orderRayon:hover{ border-color:var(--syn); }
#page-purchases .orderPanelIcon, #page-purchases .orderEmptyIcon{ color:var(--syn); }
#page-purchases .orderPanelIcon svg{ width:20px; height:20px; }
#page-purchases .orderEmptyIcon svg{ width:40px; height:40px; opacity:.55; }
#page-purchases .orderSearchIcon svg{ width:17px; height:17px; color:var(--mu); }
#page-purchases .orderAddBtn{ width:36px; height:36px; padding:0; }
#page-purchases .orderAddBtn svg{ width:18px; height:18px; }
#page-purchases .catalogFournisseurTitle, #page-purchases .catalogGroupHeader{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); }
#page-purchases .catalogCardTitle, #page-purchases .catalogLineTitle{ font-weight:700; color:var(--tx); }
#page-purchases .catalogCardSub, #page-purchases .catalogLineSub{ color:var(--mu); }
#page-purchases .catChip{ border-radius:999px; font-family:var(--f); font-weight:700; }
#page-purchases .catChip.active{ background:var(--syn); border-color:var(--syn); color:#fff; }

/* ── Fenêtre d'une commande ──────────────────────────────────── */
#orderDetailOverlay .orderSectionTitle{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); }
#orderDetailOverlay .orderSection{ border-radius:calc(var(--r) + 2px); border-color:var(--bd); }
#orderDetailOverlay .orderLineQty{ font-family:var(--m); font-weight:800; background:var(--synT); color:var(--synD); border-radius:999px; }

/* ── Litige en pleine page ───────────────────────────────────── */
/* Boutons de statut de la réponse : la pastille de la couleur du statut. */
/* --pc vient de la classe statut-* (règles plus haut) ; repli sur le gris. */
#disputeDetailOverlay .disputeSetBtn{ height:34px; padding:0 12px; font-size:12.5px;
  background:color-mix(in srgb, var(--pc, var(--mu)) 10%, var(--surface, #fff)); color:color-mix(in srgb, var(--pc, var(--mu)) 88%, #000);
  border-color:color-mix(in srgb, var(--pc, var(--mu)) 30%, transparent); }
#disputeDetailOverlay .disputeSetBtn::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--pc, var(--mu)); }
#disputeDetailOverlay .disputeSetBtn:hover{ background:color-mix(in srgb, var(--pc, var(--mu)) 18%, var(--surface, #fff)); }
#disputeDetailOverlay .disputeFullHeader{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#disputeDetailOverlay .disputeFullBack{ display:inline-flex; align-items:center; gap:6px; border-radius:var(--r); font-family:var(--f); font-weight:700; }
#disputeDetailOverlay .disputeFullBack::before{ content:"‹"; font-size:18px; line-height:1; }
#disputeDetailOverlay .disputeFullTitle{ flex:1 1 200px; min-width:0; font-weight:800; letter-spacing:-.01em; overflow-wrap:anywhere; }
#disputeDetailOverlay .disputeDetailSectionTitle{ font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--mu); }
#disputeDetailOverlay .disputeDetailSection{ border-radius:calc(var(--r) + 4px); border-color:var(--bd); }

/* ── Téléphone ───────────────────────────────────────────────── */
@media (max-width:640px){
  #page-purchases .adminViewTitle{ font-size:20px; }
  #page-purchases .purchaseTab{ font-size:13px; padding:0 6px; min-width:0; }
  /* Filtres : la recherche sur toute la ligne, les listes côte à côte (largeurs en ligne levées). */
  #page-purchases .disputeFilters{ flex-wrap:wrap; gap:8px; }
  #page-purchases .disputeFilters > input.input{ flex:1 1 100% !important; min-width:0 !important; }
  #page-purchases .disputeFilters > select.input{ flex:1 1 0; max-width:none !important; min-width:0; }
  #page-purchases .input, #disputeDetailOverlay .input{ font-size:16px; }
  #page-purchases .stViewLine{ grid-template-columns:28px minmax(0,1fr) auto; grid-template-areas:"d r q" "d l m"; row-gap:2px; }
  #page-purchases .stViewLine > .stViewDir{ grid-area:d; align-self:start; }
  #page-purchases .stViewLine > .stViewRef{ grid-area:r; }
  #page-purchases .stViewLine > .stViewLot{ grid-area:l; }
  #page-purchases .stViewLine > div:nth-child(4){ grid-area:q; text-align:right; font-family:var(--m); }
  #page-purchases .stViewLine > div:nth-child(5){ grid-area:m; text-align:right; color:var(--mu); font-size:12.5px; }
  #page-purchases .stViewLine > .stWas{ grid-column:2 / -1; }
  #page-purchases .stCardFoot{ flex-direction:column; }
  #page-purchases .stActGroup.mod{ border-left:0; padding-left:0; border-top:1px dashed var(--bd); padding-top:10px; }
  #page-purchases .admMiniBtn{ height:40px; flex:1 1 auto; }
  #page-purchases .refBtn{ width:40px; height:40px; }
  /* Fenêtre d'une commande : actions en grille, la principale en grand. */
  /* Le pied est affiché ou masqué en ligne par purchases.js : on n'agit que sur son contenu. */
  #orderDetailOverlay .orderModalFooter{ flex-direction:column-reverse; align-items:stretch; gap:8px; }
  #orderDetailOverlay .orderModalFooterRight{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  #orderDetailOverlay .orderModalFooterLeft{ display:grid; }
  #orderDetailOverlay #orderAccept{ grid-column:1 / -1; order:-1; height:46px; }
  #orderDetailOverlay .btn{ height:44px; }
  #disputeDetailOverlay .disputeFullHeader{ padding:10px 12px; }
  #disputeDetailOverlay .disputeFullTitle{ order:3; flex-basis:100%; font-size:17px; }
  #disputeDetailOverlay .disputeFullHeaderActions{ margin-left:auto; display:flex; gap:6px; }
  #disputeDetailOverlay .disputeFullHeaderActions .btn{ height:40px; padding:0 12px; }
}

:root.anims-off #page-purchases *{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion:reduce){ #page-purchases *{ transition:none !important; animation:none !important; } }