<?php /* views/orders.php — KREMER Régis v2.3.0 */ ?>

<!-- CSS spécifique au module Commandes -->
<style>
/* ── Boutons actions tableau (SVG) ── */
.oact{width:32px;height:32px;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0}
.oact svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Layout général ── */
.orders-list-view { display:flex;flex-direction:column;gap:1rem;height:100% }
.olv-header {
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
    padding-bottom:.75rem;border-bottom:1px solid var(--border)
}
.olv-title { display:flex;align-items:center;gap:.75rem }

/* ── Stats ── */
.orders-stats {
    display:flex;gap:.5rem;flex-wrap:wrap
}
.order-stat-card {
    display:flex;flex-direction:column;align-items:center;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--r-lg);padding:.6rem 1.1rem;min-width:90px;flex:1;max-width:160px
}
.osc-num  { font-size:1.5rem;font-weight:800;line-height:1 }
.osc-label{ font-size:.72rem;font-weight:600;margin-top:.2rem;text-transform:uppercase;letter-spacing:.04em }

/* ── Filtres ── */
.orders-filters {
    display:flex;gap:.5rem;flex-wrap:wrap;align-items:center
}

/* ── Formulaire plein-écran ── */
.order-form-view {
    display:flex;flex-direction:column;
    min-height:calc(100dvh - var(--safe-top) - 60px);
    margin:-1rem;                /* compenser le padding du main-content */
}
.ofv-nav {
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
    padding:.75rem 1rem;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
    position:sticky;top:0;z-index:20;
}
.ofv-nav h3 { margin:0;font-size:1rem;font-weight:700;flex:1;text-align:center }
.ofv-nav-left, .ofv-nav-right { display:flex;gap:.5rem;align-items:center }

.ofv-body {
    flex:1;overflow-y:auto;padding:1rem;
    display:grid;
    grid-template-columns:320px 1fr;
    gap:1rem;
    align-items:start;
}

/* ── Cards lignes commande ── */
.order-line-card {
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:1rem;margin-bottom:.65rem;
    background:var(--bg-elevated);position:relative;
    transition:border-color .15s,box-shadow .15s
}
.order-line-card:hover { border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-pale) }
.order-line-card.is-new-prod { border-color:var(--orange);background:rgba(251,146,60,.04) }
.order-line-card.is-new-prod:hover { box-shadow:0 0 0 3px rgba(251,146,60,.15) }

.olc-badge {
    display:inline-flex;align-items:center;gap:4px;
    padding:2px 9px;border-radius:99px;
    font-size:.72rem;font-weight:700;letter-spacing:.02em
}

/* ── Réception ── */
.recv-line-card {
    border:1px solid var(--border);border-radius:var(--r-lg);
    padding:1rem;margin-bottom:.65rem;background:var(--bg-elevated)
}
.recv-line-card.is-done { opacity:.6 }

/* ── Section title ── */
.section-title {
    margin:0 0 .75rem 0;font-size:.8rem;font-weight:700;
    color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em
}

/* ── Responsive mobile ── */
@media(max-width:840px){
    .ofv-body { grid-template-columns:1fr }
    .ofv-nav h3 { display:none }
    .order-form-view { margin:-1rem }
    .ofv-nav-right button span { display:none }
}
@media(max-width:560px){
    .orders-stats { gap:.35rem }
    .order-stat-card { min-width:70px;padding:.5rem .7rem }
    .osc-num { font-size:1.2rem }
    .ofv-nav-right { flex-wrap:wrap;justify-content:flex-end }
    .orders-filters { flex-direction:column;align-items:stretch }
    .orders-filters select { width:100% }
}
/* ── UX catalogue produits (BC) ── */
.ol-prod-tools{display:grid;grid-template-columns:1fr 1.2fr;gap:.5rem;margin:.25rem 0 .5rem}
.ol-prod-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.5rem}
@media (min-width: 980px){ .ol-prod-results{grid-template-columns:repeat(3,minmax(0,1fr));} }
.ol-prod-item{display:flex;gap:.6rem;align-items:center;padding:.55rem;border:1px solid var(--border);border-radius:12px;background:var(--card);cursor:pointer;text-align:left}
.ol-prod-item:hover{border-color:color-mix(in srgb, var(--blue) 35%, var(--border))}
.ol-prod-img{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:var(--bg2);flex:0 0 auto}
.ol-prod-img.ph{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:18px}
.ol-prod-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ol-prod-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-prod-sku{font-size:12px;color:var(--text-muted)}
.ol-prod-cat{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-prod-empty{padding:.6rem;border:1px dashed var(--border);border-radius:12px;color:var(--text-muted);background:var(--bg2)}
.ol-prod-preview{display:flex;gap:.6rem;align-items:center;margin-top:.5rem;padding:.5rem;border:1px solid var(--border);border-radius:12px;background:var(--bg2)}
.ol-prev-img{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border);background:var(--card);flex:0 0 auto}
.ol-prev-img.ph{display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:18px}
.ol-prev-name{font-weight:700}
.ol-prev-sku{font-size:12px;color:var(--text-muted)}

.ol-prod-pick{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:.5rem;align-items:start}
.sm-prod-overlay{backdrop-filter:blur(10px);max-width:min(980px,calc(100vw - 24px));}
.sm-prod-item{border:1px solid var(--border);border-radius:14px;background:var(--bg-card);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.sm-prod-item:hover{transform:translateY(-1px);border-color:color-mix(in srgb, var(--blue) 38%, var(--border));box-shadow:0 10px 24px rgba(15,23,42,.08)}
.sm-prod-item img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--bg-elevated)}
@media(max-width:980px){
  .orders-filters > *{flex:1 1 calc(50% - .5rem)}
  .ol-prod-pick{grid-template-columns:1fr}
}
@media(max-width:640px){
  .olv-header,.orders-filters{align-items:stretch}
  .orders-filters > *{flex:1 1 100%}
  .ofv-nav{padding:.75rem}
  .ofv-nav > *{width:100%}
  .ofv-nav h3{text-align:left}
  .ofv-nav-right{width:100%;justify-content:stretch}
  .ofv-nav-right .btn{flex:1 1 0}
}

</style>

<!-- Racine SPA — tout le contenu est injecté ici par JS -->
<div id="ordersRoot" style="height:100%"></div>
