/* ═══════════════════════════════════════════════════════════════════
   InkHub — Couche d'harmonisation globale « pages »
   ───────────────────────────────────────────────────────────────────
   Généralise le pattern .fc2 de la fiche commande (it#627) à TOUTES les
   pages restées en Bootstrap legacy (produits, FDS, fournisseurs, lots,
   BOM, utilisateurs, audit, prestashop, axonaut…).

   Principe : on ne réécrit PAS le markup. On enveloppe le contenu de
   chaque page dans `.ink-page` (injecté une seule fois par le layout) et
   on RE-STYLE les primitives Bootstrap (.page-header, .card, .btn, .table,
   .badge, .alert, .form-*, .nav-tabs, .pagination, .list-group, .modal…)
   pour qu'elles adoptent le langage visuel de « Commandes »/« Dashboard ».

   Tokens scopés sous `.ink-page` → ZÉRO fuite sur :root / sidebar /
   topbar / les pages déjà refaites (.ord-cmd) qui s'excluent via
   `{% block page_scope %}{% endblock %}`.

   Palette identique à .ord-cmd (order-index.css) : neutres chauds,
   1 accent UI bleu encre #0077B6, couleur réservée au sens.
   ═══════════════════════════════════════════════════════════════════ */

.ink-page{
  /* surfaces neutres chaudes */
  --bg:#F6F7F9; --surface:#FFFFFF; --surface-2:#FAFBFC; --surface-3:#F2F4F7;
  --border:#E8EAEF; --border-strong:#D8DCE4;
  /* texte */
  --text:#1A1C22; --text-2:#616875; --text-3:#8C93A1;
  /* accent UI unique — bleu encre profond */
  --accent:#0077B6; --accent-ink:#005E91; --accent-soft:rgba(0,119,182,.09); --accent-line:rgba(0,119,182,.28);
  /* statuts pipeline (sens métier) */
  --st-draft:#64748B; --st-mapping:#C98A00; --st-validation:#0E8C9B; --st-prepare:#0077B6; --st-done:#3F8F46;
  /* feedback */
  --danger:#D2382C; --danger-soft:#FBECEA;
  --ok:#3F8F46; --ok-soft:rgba(63,143,70,.08);
  --warn:#C98A00; --warn-soft:rgba(201,138,0,.08);
  --info:#0E8C9B; --info-soft:rgba(14,140,155,.08);
  /* rythme */
  --r:12px; --r-sm:8px; --r-lg:16px;
  --sh:0 1px 2px rgba(20,23,31,.05);
  --sh-md:0 6px 20px -8px rgba(20,23,31,.16),0 1px 2px rgba(20,23,31,.04);
  --ink-font:'Inter',-apple-system,system-ui,sans-serif;
  --ink-display:'Geist','Inter',sans-serif;
  --ink-mono:'Geist Mono',ui-monospace,Menlo,monospace;

  font-family:var(--ink-font); color:var(--text); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
[data-theme="dark"] .ink-page{
  --bg:#0A0B10; --surface:#14161E; --surface-2:#171A23; --surface-3:#1E222C;
  --border:#262B36; --border-strong:#333A47;
  --text:#E8EAF0; --text-2:#A6ADBB; --text-3:#727A89;
  --accent:#3AA6E0; --accent-ink:#5DBDEE; --accent-soft:rgba(58,166,224,.14); --accent-line:rgba(58,166,224,.34);
  --danger:#F0635A; --danger-soft:rgba(240,99,90,.14);
  --ok-soft:rgba(63,143,70,.16); --warn-soft:rgba(201,138,0,.16); --info-soft:rgba(58,166,224,.14);
  --sh:0 1px 2px rgba(0,0,0,.4);
  --sh-md:0 6px 20px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.4);
}

.ink-page{box-sizing:border-box}
.ink-page *{box-sizing:border-box}
.ink-page .mono,.ink-page .font-monospace,.ink-page code,.ink-page .tabular-nums{font-variant-numeric:tabular-nums}
.ink-page code,.ink-page .font-monospace{font-family:var(--ink-mono)}

/* ───────── typographie ───────── */
.ink-page h1,.ink-page h2,.ink-page h3,.ink-page h4,.ink-page h5,.ink-page h6,.ink-page .h1,.ink-page .h2,.ink-page .h3,.ink-page .h4,.ink-page .h5,.ink-page .h6{
  font-family:var(--ink-display);letter-spacing:-.01em;color:var(--text)}
.ink-page .text-muted{color:var(--text-2)!important}
.ink-page .text-secondary{color:var(--text-2)!important}
.ink-page a{color:var(--accent);text-decoration:none}
.ink-page a:hover{color:var(--accent-ink)}
.ink-page hr{border-color:var(--border);opacity:1}
.ink-page small,.ink-page .small{color:var(--text-2)}

/* ───────── en-tête de page (.page-header legacy) ───────── */
/* le bandeau plein-largeur Bootstrap devient un en-tête propre posé sur
   le fond de page, dans le langage de .ls1-head (Commandes). */
.ink-page .page-header{
  background:transparent;border:none;padding:0;margin:0 0 20px;
}
.ink-page .page-header h1,.ink-page .page-header .h1{
  font:700 26px/1.1 var(--ink-display);letter-spacing:-.02em;color:var(--text);margin:0}
.ink-page .page-header .text-muted,.ink-page .page-header p{font-size:13px;color:var(--text-3);margin:5px 0 0}
/* pastille compteur à côté du titre (.badge bg-secondary / bg-light…) */
.ink-page .page-header h1 .badge,.ink-page .page-header .h1 .badge{
  font:600 12px var(--ink-font);vertical-align:middle;padding:4px 10px;border-radius:999px;
  background:var(--surface-3)!important;color:var(--text-2)!important;border:1px solid var(--border)}

/* titres de section génériques hors page-header */
.ink-page h2,.ink-page .h2{font-size:18px;font-weight:700}
.ink-page h3,.ink-page .h3{font-size:16px;font-weight:700}
.ink-page h4,.ink-page .h4{font-size:14px;font-weight:600}

/* ───────── cartes ───────── */
.ink-page .card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh)}
.ink-page .card-header{
  background:transparent;border-bottom:1px solid var(--border);padding:14px 18px;
  font:700 14px var(--ink-display);letter-spacing:-.01em;color:var(--text)}
.ink-page .card-header h1,.ink-page .card-header h2,.ink-page .card-header h3,.ink-page .card-header h4,.ink-page .card-header h5,.ink-page .card-header h6,
.ink-page .card-header .h1,.ink-page .card-header .h2,.ink-page .card-header .h3,.ink-page .card-header .h4,.ink-page .card-header .h5,.ink-page .card-header .h6{
  font:700 14px var(--ink-display);margin:0;color:var(--text)}
.ink-page .card-body{padding:18px}
.ink-page .card-footer{background:var(--surface-2);border-top:1px solid var(--border);padding:12px 18px}

/* ───────── boutons ───────── */
.ink-page .btn{
  border-radius:9px;font-weight:600;font-size:13px;padding:9px 15px;
  transition:background .15s,border-color .15s,color .15s,transform .1s}
.ink-page .btn:active{transform:translateY(1px)}
.ink-page .btn-sm,.ink-page .btn-group-sm > .btn{font-size:12px;border-radius:7px;padding:6px 11px}
.ink-page .btn-lg{font-size:14px;border-radius:10px;padding:11px 18px}
/* primaire / accent (Bootstrap + classes maison .btn-ink-*) — !important :
   Bootstrap CSS est chargé via importmap, on sécurise l'accent. */
.ink-page .btn-primary,.ink-page .btn-ink-primary{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:none}
.ink-page .btn-primary:hover,.ink-page .btn-primary:focus,.ink-page .btn-ink-primary:hover,.ink-page .btn-ink-primary:focus{
  background:var(--accent-ink)!important;border-color:var(--accent-ink)!important;color:#fff!important}
.ink-page .btn-success,.ink-page .btn-ink-success{
  background:var(--st-done)!important;border-color:var(--st-done)!important;color:#fff!important}
.ink-page .btn-success:hover,.ink-page .btn-ink-success:hover{filter:brightness(.94)}
.ink-page .btn-secondary,.ink-page .btn-ink-secondary{
  background:var(--surface-3)!important;border-color:var(--border-strong)!important;color:var(--text)!important}
.ink-page .btn-secondary:hover,.ink-page .btn-ink-secondary:hover{background:var(--border)!important;color:var(--text)!important}
.ink-page .btn-danger{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
/* outline → look sobre charte */
.ink-page .btn-outline-primary{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.ink-page .btn-outline-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ink-page .btn-outline-secondary{border-color:var(--border-strong);color:var(--text-2);background:var(--surface)}
.ink-page .btn-outline-secondary:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.ink-page .btn-outline-danger{border-color:rgba(210,56,44,.34);color:var(--danger);background:var(--surface)}
.ink-page .btn-outline-danger:hover{background:var(--danger-soft);color:var(--danger);border-color:rgba(210,56,44,.34)}
.ink-page .btn-outline-success{border-color:rgba(63,143,70,.4);color:var(--st-done);background:var(--surface)}
.ink-page .btn-outline-success:hover{background:var(--ok-soft);color:var(--st-done)}
.ink-page .btn-light{background:var(--surface-3);border-color:var(--border);color:var(--text)}
.ink-page .btn-link{color:var(--accent);font-weight:600;text-decoration:none}
.ink-page .btn-link:hover{color:var(--accent-ink);text-decoration:underline}

/* ───────── tables ───────── */
.ink-page .table{
  color:var(--text);margin-bottom:0;
  --bs-table-bg:transparent;--bs-table-color:var(--text);--bs-table-border-color:var(--border)}
.ink-page .table > thead th,.ink-page .table > thead > tr > th{
  font:600 11px var(--ink-font);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3);
  border-bottom:1px solid var(--border);background:var(--surface-2);padding:11px 12px;vertical-align:middle;white-space:nowrap}
.ink-page .table > thead th a{color:inherit;text-decoration:none}
.ink-page .table > thead th a:hover{color:var(--text)}
.ink-page .table > tbody td,.ink-page .table > tbody > tr > td{
  border-bottom:1px solid var(--border);padding:12px;vertical-align:middle;font-size:13.5px;color:var(--text)}
.ink-page .table > tbody > tr:last-child > td{border-bottom:none}
.ink-page .table-hover > tbody > tr:hover > *{background:var(--surface-2)}
.ink-page .table-light,.ink-page .table > thead.table-light th{--bs-table-bg:var(--surface-2);background:var(--surface-2);color:var(--text-3)}
.ink-page .table .text-end,.ink-page .table .text-right{text-align:right}
.ink-page .table code{font-family:var(--ink-mono);font-size:12.5px;color:var(--text-2)}
/* carte qui contient une table : la table colle aux bords */
.ink-page .card > .table-responsive,.ink-page .card > .table{margin:0}
/* Conteneur de table « nu » (hors .card) → vraie surface carte, sinon le
   tableau transparent se fond dans le fond gris .ink-page (#F6F7F9). */
.ink-page .table-responsive{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh)}
/* déjà dans une .card → pas de double encadrement */
.ink-page .card .table-responsive{background:transparent;border:0;box-shadow:none;border-radius:0}
/* liste unifiée : filtres (.card-body) + table dans UNE carte, façon Commandes.
   Séparateur entre la zone filtres et le tableau. */
.ink-page .card.ink-listcard > .card-body{padding-bottom:14px}
.ink-page .card.ink-listcard > .table-responsive{border-top:1px solid var(--border)}

/* ───────── badges / pastilles ───────── */
.ink-page .badge{font-weight:600;border-radius:999px;padding:.38em .72em;font-size:11.5px}
.ink-page .badge.bg-primary{background:var(--accent)!important;color:#fff!important}
.ink-page .badge.bg-secondary{background:var(--surface-3)!important;color:var(--text-2)!important;border:1px solid var(--border)}
.ink-page .badge.bg-success{background:var(--ok-soft)!important;color:var(--st-done)!important;border:1px solid rgba(63,143,70,.22)}
.ink-page .badge.bg-danger{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid rgba(210,56,44,.22)}
.ink-page .badge.bg-warning{background:var(--warn-soft)!important;color:var(--st-mapping)!important;border:1px solid rgba(201,138,0,.22)}
.ink-page .badge.bg-info{background:var(--info-soft)!important;color:var(--st-validation)!important;border:1px solid rgba(14,140,155,.22)}
.ink-page .badge.bg-light{background:var(--surface-3)!important;color:var(--text-2)!important;border:1px solid var(--border)}
.ink-page .badge.bg-dark{background:var(--text)!important;color:var(--surface)!important}
/* variantes -subtle Bootstrap 5.3 : on garde le look, juste pill + bordure fine */
.ink-page .badge.text-bg-success,.ink-page .badge.bg-success-subtle{background:var(--ok-soft)!important;color:var(--st-done)!important;border:1px solid rgba(63,143,70,.22)}
.ink-page .badge.text-bg-danger,.ink-page .badge.bg-danger-subtle{background:var(--danger-soft)!important;color:var(--danger)!important;border:1px solid rgba(210,56,44,.22)}
.ink-page .badge.text-bg-warning,.ink-page .badge.bg-warning-subtle{background:var(--warn-soft)!important;color:var(--st-mapping)!important;border:1px solid rgba(201,138,0,.22)}
.ink-page .badge.text-bg-info,.ink-page .badge.bg-info-subtle{background:var(--info-soft)!important;color:var(--st-validation)!important;border:1px solid rgba(14,140,155,.22)}
.ink-page .badge.text-bg-secondary,.ink-page .badge.bg-secondary-subtle{background:var(--surface-3)!important;color:var(--text-2)!important;border:1px solid var(--border)}

/* ───────── alertes → notes sobres ───────── */
.ink-page .alert{border-radius:10px;font-size:13px;border-width:1px;padding:12px 15px}
.ink-page .alert-success{background:var(--ok-soft);border-color:rgba(63,143,70,.22);color:#2f6e36}
.ink-page .alert-warning{background:var(--warn-soft);border-color:rgba(201,138,0,.22);color:#8a6200}
.ink-page .alert-danger{background:var(--danger-soft);border-color:rgba(210,56,44,.22);color:#9e251b}
.ink-page .alert-info{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}
.ink-page .alert-secondary{background:var(--surface-2);border-color:var(--border);color:var(--text-2)}
.ink-page .alert-heading{color:inherit;font-family:var(--ink-display)}
[data-theme="dark"] .ink-page .alert-success{color:#7fc98a}
[data-theme="dark"] .ink-page .alert-warning{color:#e0b057}
[data-theme="dark"] .ink-page .alert-danger{color:#f0938a}

/* ───────── formulaires ───────── */
.ink-page .form-label{color:var(--text-2);font-weight:600;font-size:12.5px;margin-bottom:5px}
.ink-page .form-control,.ink-page .form-select{
  border-radius:8px;border:1px solid var(--border-strong);font-size:13.5px;color:var(--text);
  background-color:var(--surface);padding:8px 12px;transition:border-color .15s,box-shadow .15s}
.ink-page .form-control::placeholder{color:var(--text-3)}
.ink-page .form-control:focus,.ink-page .form-select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);background-color:var(--surface)}
.ink-page .form-control-sm,.ink-page .form-select-sm{font-size:12.5px;padding:6px 10px;border-radius:7px}
.ink-page .form-text{color:var(--text-3);font-size:12px}
.ink-page .input-group-text{background:var(--surface-2);border-color:var(--border-strong);color:var(--text-2);border-radius:8px}
.ink-page .form-check-input{border-color:var(--border-strong)}
.ink-page .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.ink-page .form-check-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ink-page .form-switch .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}

/* champ TomSelect (recherche produits/refs) harmonisé */
.ink-page .ts-control{border-radius:8px;border-color:var(--border-strong);background:var(--surface);font-size:13.5px;color:var(--text);min-height:38px}
.ink-page .ts-control.focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.ink-page .ts-dropdown{border-color:var(--border-strong);border-radius:8px;box-shadow:var(--sh-md)}

/* ───────── onglets / nav (filtres en liens type .nav-tabs / .nav-pills) ───────── */
.ink-page .nav-tabs{border-bottom:1px solid var(--border);gap:2px}
.ink-page .nav-tabs .nav-link{
  border:none;border-radius:8px 8px 0 0;color:var(--text-2);font-weight:600;font-size:13px;padding:9px 14px}
.ink-page .nav-tabs .nav-link:hover{color:var(--text);background:var(--surface-2);border-color:transparent}
.ink-page .nav-tabs .nav-link.active{
  color:var(--accent);background:var(--surface);border-bottom:2px solid var(--accent)}
.ink-page .nav-pills .nav-link{color:var(--text-2);font-weight:600;font-size:13px;border-radius:8px}
.ink-page .nav-pills .nav-link.active{background:var(--accent);color:#fff}

/* ───────── pagination ───────── */
.ink-page .pagination{gap:4px}
.ink-page .page-link{
  border:1px solid var(--border);border-radius:7px;color:var(--text-2);background:var(--surface);
  font:600 12.5px var(--ink-font);min-width:32px;text-align:center;padding:6px 10px}
.ink-page .page-link:hover{background:var(--surface-3);color:var(--text);border-color:var(--border-strong)}
.ink-page .page-item.active .page-link{background:var(--accent);border-color:var(--accent);color:#fff}
.ink-page .page-item.disabled .page-link{opacity:.45;background:var(--surface);border-color:var(--border)}

/* ───────── list-group ───────── */
.ink-page .list-group{border-radius:var(--r);border-color:var(--border)}
.ink-page .list-group-item{
  background:var(--surface);border-color:var(--border);color:var(--text);padding:12px 16px;font-size:13.5px}
.ink-page .list-group-item-action:hover{background:var(--surface-2)}
.ink-page .list-group-item.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)}

/* ───────── dropdown ───────── */
.ink-page .dropdown-menu{
  border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--sh-md);background:var(--surface);padding:5px}
.ink-page .dropdown-item{border-radius:6px;color:var(--text);font-size:13px;padding:7px 11px}
.ink-page .dropdown-item:hover,.ink-page .dropdown-item:focus{background:var(--surface-3);color:var(--text)}
.ink-page .dropdown-item.active{background:var(--accent);color:#fff}
.ink-page .dropdown-divider{border-color:var(--border)}

/* ───────── modale ───────── */
.ink-page .modal-content,.modal-content{border:1px solid var(--border);border-radius:var(--r-lg)}
.ink-page .modal-header{border-bottom:1px solid var(--border)}
.ink-page .modal-footer{border-top:1px solid var(--border)}

/* ───────── progress ───────── */
.ink-page .progress{background:var(--surface-3);border-radius:999px;height:8px}
.ink-page .progress-bar{background:var(--accent)}
.ink-page .progress-bar.bg-success{background:var(--st-done)!important}
.ink-page .progress-bar.bg-warning{background:var(--st-mapping)!important}
.ink-page .progress-bar.bg-info{background:var(--accent)!important}
.ink-page .progress-bar.bg-danger{background:var(--danger)!important}

/* ───────── états vides (markup .text-center dans une carte/section) ───────── */
.ink-page .ink-empty,.ink-page .empty-state{text-align:center;color:var(--text-3);padding:42px 20px}
.ink-page .ink-empty h3,.ink-page .empty-state h3{font:600 15px var(--ink-display);color:var(--text-2);margin:0 0 4px}

/* ───────── divers utilitaires charte ───────── */
.ink-page .border,.ink-page .border-top,.ink-page .border-bottom,.ink-page .border-start,.ink-page .border-end{border-color:var(--border)!important}
.ink-page .bg-light,.ink-page .bg-body-tertiary{background:var(--surface-2)!important}
.ink-page .bg-white,.ink-page .bg-body{background:var(--surface)!important}
.ink-page .text-primary{color:var(--accent)!important}
.ink-page .text-success{color:var(--st-done)!important}
.ink-page .text-danger{color:var(--danger)!important}
.ink-page .text-warning{color:var(--st-mapping)!important}
.ink-page .text-info{color:var(--st-validation)!important}
.ink-page .shadow-sm{box-shadow:var(--sh)!important}
.ink-page .shadow{box-shadow:var(--sh-md)!important}
.ink-page .rounded,.ink-page .rounded-3{border-radius:var(--r)!important}
.ink-page .rounded-2{border-radius:var(--r-sm)!important}