/* === Tokens / Design System === */
:root{
  /* Rayons */
  --ss-radius-sm:8px; --ss-radius-md:12px; --ss-radius-lg:16px;

  /* Couleurs marque */
  --ss-accent-500:#6366f1; --ss-accent-600:#5458e8;

  /* Alias courte (compat ajout) */
  --ss-accent: var(--ss-accent-500);

  /* Palette neutre */
  --ss-neutral-10:#fcfcfd; --ss-neutral-25:#fafafa; --ss-neutral-50:#f8fafc;
  --ss-neutral-100:#f1f5f9; --ss-neutral-200:#e2e8f0; --ss-neutral-300:#d0d7e2;

  /* Texte */
  --ss-text-900:#0f172a; --ss-text-700:#334155; --ss-text-500:#6b7280;

  /* États */
  --ss-success:#16a34a; --ss-warning:#f59e0b; --ss-danger:#ef4444; --ss-info:#0ea5e9;

  /* Layouts */
  --container: 1280px;

  /* Tokens complémentaires (compat avec ma proposition) */
  --ss-bg:#fafafa; --ss-panel:#ffffff; --ss-ink:#0f172a; --ss-muted:#6b7280; --ss-border:#e2e8f0;
  --ss-ok:#16a34a; --ss-warn:#f59e0b;
}

/* === Reset minimal === */
*{box-sizing:border-box}

/* Contexte admin stock (ajouts d’animations globales) */
body.stock-admin{background:var(--ss-bg); color:var(--ss-text-900);}
.stock-admin .ss-card{transition:box-shadow .2s ease, transform .06s ease;}
.stock-admin .ss-card:hover{box-shadow:0 10px 30px rgba(0,0,0,.06);}
.stock-admin .btn{transition:transform .06s ease, box-shadow .2s ease;}
.stock-admin .btn:active{transform:translateY(1px);}
.stock-admin .btn.primary{background:var(--ss-accent); border-color:var(--ss-accent); color:#fff;}
.stock-admin .btn.primary:hover{background:var(--ss-accent-600);}
.stock-admin .kpi .stat strong,
.stock-admin .kpi .value{font-variant-numeric: tabular-nums;}
.stock-admin kbd{border:1px solid var(--ss-border); background:#fff; border-radius:6px; padding:2px 6px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em;}

/* === Layout preview / shell === */
.wrap{max-width:var(--container); margin:0 auto; padding:24px;}
.layout{display:grid; grid-template-columns: 240px 1fr; gap:24px;}
.sidebar{background:#fff; border:1px solid var(--ss-neutral-200); border-radius:var(--ss-radius-md); padding:12px;}
.sidebar .brand{display:flex; align-items:center; gap:8px; padding:12px; font-weight:700;}
.nav{list-style:none; padding:0; margin:8px 0 0 0;}
.nav li a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:#374151;}
.nav li a:hover, .nav li a.active{background:var(--ss-neutral-100);}
.content{min-width:0;}

/* === Page Header (générique) === */
.ss-page-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px;}
.ss-page-header__title{font-size:1.6rem; font-weight:700;}
.ss-breadcrumb{color:var(--ss-text-500); font-size:.9rem;}
.actions{display:flex; gap:8px; flex-wrap:wrap;}

/* === Boutons === */
body.stock-admin .btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--ss-neutral-200); background:#fff; cursor:pointer; font-weight:600;}
body.stock-admin .btn:hover{background:var(--ss-neutral-100);}
body.stock-admin .btn.primary{background:var(--ss-accent-500); color:#fff; border-color:var(--ss-accent-500);}
body.stock-admin .btn.primary:hover{background:var(--ss-accent-600);}
body.stock-admin .btn.sm{padding:8px 10px; font-weight:700;}
body.stock-admin .btn.ghost{background:#fff;}

/* === Cards === */
.ss-card{border-radius:var(--ss-radius-md); background:#fff; border:1px solid var(--ss-neutral-200); box-shadow:0 1px 2px rgba(0,0,0,.06);}
.card-header{padding:12px 16px; border-bottom:1px solid var(--ss-neutral-200); display:flex; align-items:center; justify-content:space-between;}
.card-header.mini{padding:8px 16px; background:#fbfbff}
.card-title{margin:0; font-size:1.05rem; font-weight:800;}
.card-body{padding:16px;}

/* === KPI === */
.kpis{display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;}
.kpi .label{color:var(--ss-text-500); font-size:.9rem;}
.kpi .value{font-size:1.4rem; font-weight:800; margin-top:4px;}
.kpi .delta{font-size:.9rem; font-weight:700;}
.delta.up{color:var(--ss-success);} .delta.down{color:var(--ss-danger);} .delta.warn{color:var(--ss-warning);} .delta.danger{color:var(--ss-danger);}

/* === Chips / tags === */
.ss-chips{display:flex; flex-wrap:wrap; gap:8px;}
.ss-chip{border-radius:999px; padding:6px 10px; background:var(--ss-neutral-100); border:1px solid var(--ss-neutral-200); font-size:.9rem; display:inline-flex; align-items:center; gap:6px;}
.ss-chip .x{margin-left:6px; color:var(--ss-text-500);}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.chip{border:1px dashed var(--ss-border); padding:6px 10px; border-radius:999px; font-size:.9rem}
.chip.soft{background:#f8fafc}

/* === Inputs / Formulaires === */
body.stock-admin .input{flex:1 1 280px; padding:10px 12px; border:1px solid var(--ss-neutral-300); border-radius:10px; background:#fff;}
body.stock-admin .input.lg{padding:12px 14px; font-size:1rem}
body.stock-admin label{font-weight:700; color:#111827; margin-bottom:6px; display:block;}
.input-icon{position:relative}
.input-icon i{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa3af}
.input-icon > input, .input-icon > select, .input-icon > textarea{padding-left:36px}

/* Numeric inputs (UX propre) */
input[type=number]{appearance:textfield; -moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{appearance:none; margin:0}

/* === Tables === */
.table-wrap{overflow:auto; max-height:60vh; border:1px solid var(--ss-neutral-200); border-radius:14px;}
table{width:100%; border-collapse:separate; border-spacing:0;}
thead th{position:sticky; top:0; z-index:1; background:#fff; border-bottom:1px solid var(--ss-neutral-200); text-align:left; font-size:.9rem; padding:12px;}
tbody td, tbody th{padding:12px; border-bottom:1px solid var(--ss-neutral-100); vertical-align:middle;}
tbody tr:hover{background:var(--ss-neutral-50);}
th.right, td.right{text-align:right;}
th.center, td.center{text-align:center;}

/* Variante table compacte (formulaire d’achat) */
table.ss-table thead th{background:#fff; position:sticky; top:0; z-index:1; padding:12px; border-bottom:1px solid var(--ss-border); text-align:left; font-size:.9rem}
table.ss-table tbody td{padding:12px; border-bottom:1px solid #f1f5f9; vertical-align:middle}

/* === Pills === */
.pill{padding:.25rem .5rem; border-radius:999px; font-weight:700; font-size:.8rem; display:inline-block;}
.pill.info{color:var(--ss-info); background:color-mix(in oklab, var(--ss-info) 12%, white);}
.pill.success{color:var(--ss-success); background:color-mix(in oklab, var(--ss-success) 12%, white);}
.pill.warn{color:var(--ss-warning); background:color-mix(in oklab, var(--ss-warning) 12%, white);}
.pill.danger{color:var(--ss-danger); background:color-mix(in oklab, var(--ss-danger) 12%, white);}
.pill.neutral{color:var(--ss-text-700); background:var(--ss-neutral-100);}

/* === Stepper (simple tags) === */
.ss-stepper{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px 0;}
.ss-step{ padding:6px 10px; border-radius:999px; border:1px solid var(--ss-neutral-200); background:#fff; color:#6b7280; }
.ss-step.is-active{ border-color:var(--ss-accent-500); color:var(--ss-accent-500); font-weight:700; }

/* === Stepper (numéroté dans header sticky) === */
.stepper{display:flex; gap:14px; padding:0; margin:0; list-style:none}
.stepper li{display:flex; align-items:center; gap:8px; color:var(--ss-muted); font-weight:600}
.stepper li span{width:24px; height:24px; border-radius:999px; display:inline-grid; place-items:center; background:#eef2ff; color:#4f46e5; font-size:.9rem; font-weight:800}
.stepper li.active{color:var(--ss-ink)}

/* === Stockbar (détail produit) === */
.stockbar{height:8px; background:var(--ss-neutral-100); border-radius:6px; overflow:hidden; margin-top:6px;}
.stockbar > span{display:block; height:100%; background:var(--ss-accent-500); width:0%;}

/* === Alerts (form errors etc.) === */
.ss-alert{margin:12px 0; padding:12px 14px; border-radius:12px; border:1px solid var(--ss-border); background:#fff}
.ss-alert.error{border-color:#fecaca; background:#fff1f2; color:#991b1b}

/* === Header sticky (formulaire d’achat) === */
.ss-header{position:sticky; top:0; z-index:25; display:flex; align-items:flex-start; justify-content:space-between; padding:16px 20px; margin-bottom:16px; border:1px solid var(--ss-border); border-radius:16px; background:linear-gradient(180deg,#ffffff 0%, #f9fafb 100%); box-shadow:0 6px 30px rgba(0,0,0,.04); backdrop-filter:saturate(1.2) blur(4px);}
.ss-header .crumbs{color:var(--ss-text-500); font-size:.9rem;}
.ss-header .title{margin:.25rem 0 .6rem 0; font-size:1.8rem; font-weight:800}

/* === Grille principale du formulaire d’achat === */
.ss-grid{display:grid; grid-template-columns: 1.8fr 1fr; gap:18px}
.ss-col-aside .ss-card{margin-bottom:16px}
.ss-col-aside .stat{display:flex; align-items:center; justify-content:space-between; padding:8px 0}
.ss-col-aside .sep{height:1px; background:var(--ss-border); margin:8px 0}
.ss-col-aside .stat.big strong{font-size:1.25rem}
.checks{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checks li i{color:#94a3b8; margin-right:6px}
.checks li.ok i{color:var(--ss-ok)}

/* === Toolbar lignes === */
.lines-toolbar{display:flex; align-items:center; justify-content:space-between; margin:8px 0 12px}
.hr{height:1px; background:var(--ss-border); margin:16px 0}

/* === Autocomplete (fournisseur/produit) === */
.ac-wrap{position:relative}
.ac-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa3af}
.ac-wrap .input{padding-left:36px}
.ac-list{position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid var(--ss-border); border-radius:12px; margin-top:6px; box-shadow:0 12px 32px rgba(0,0,0,.08); display:none; max-height:260px; overflow:auto; z-index:20}
.ac-item{padding:10px 12px; cursor:pointer}
.ac-item:hover{background:#f8fafc}

/* === Lignes (effet suppression) === */
.line--deleted{filter:saturate(.2) opacity(.6);}

/* === Dropzone fichiers === */
.dropzone{border:2px dashed #cbd5e1; border-radius:14px; padding:20px; text-align:center; background:#fbfbff; cursor:pointer}
.dropzone input[type=file]{display:none}
.dropzone i{font-size:22px; color:#6366f1}
.dropzone.drag{background:#eef2ff; border-color:#a5b4fc}

/* === Actions collantes bas de carte === */
.sticky-actions{position:sticky; bottom:0; padding:12px 16px; display:flex; gap:10px; justify-content:flex-end; background:linear-gradient(180deg, #ffffff 40%, #f8fafc 100%); border-top:1px solid var(--ss-border); margin-top:16px; border-bottom-left-radius:16px; border-bottom-right-radius:16px}

/* === Helpers === */
.muted{color:var(--ss-text-500); font-size:.9rem;}
.gap-8{gap:8px;} .mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;}

/* === Responsive === */
@media (max-width: 1100px){
  .kpis{grid-template-columns: repeat(2, 1fr);}
  .layout{grid-template-columns: 1fr;}
  .sidebar{position:relative; order:2;}
  .ss-grid{grid-template-columns:1fr}
  .sticky-actions{position:static}
}

/* === Patch largeur & confort colonne principale (formulaire achat) === */
.ss-grid{grid-template-columns: 2.6fr 1fr;} /* main >> aside */
@media (min-width: 1400px){
  .wrap{max-width:1440px;}
  .ss-grid{grid-template-columns: 3fr 1fr;}
}
.ss-col-main{font-size:16px;}
.ss-col-main .input{padding:12px 14px; border-radius:12px;}
.ss-col-main table.ss-table thead th,
.ss-col-main table.ss-table tbody td{padding:14px 12px;}

/* Colonnes larges pour le tableau des lignes */
table.ss-table th:nth-child(1), table.ss-table td:nth-child(1){min-width: 420px;} /* Produit */
table.ss-table th:nth-child(2), table.ss-table td:nth-child(2){min-width: 280px;} /* Variation */
table.ss-table th:nth-child(3), table.ss-table td:nth-child(3){min-width: 140px;} /* Quantité */
table.ss-table th:nth-child(4), table.ss-table td:nth-child(4){min-width: 180px;} /* PU */
table.ss-table th:nth-child(5), table.ss-table td:nth-child(5){min-width: 120px;} /* Actions */

/* Le container du tableau ne clippe pas l’autocomplete */
.table-wrap{overflow:visible;}

/* Autocomplete très visible et au-dessus de tout */
.ac-list{z-index: 5000; box-shadow:0 16px 40px rgba(0,0,0,.12);}
.ac-item{font-size:15px;}
.ac-wrap .input{padding-left:38px;} /* place pour l’icône */
.ac-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa3af}

/* Champs quantité/prix confortables */
input[type="number"].qty{min-width:120px; text-align:center;}
input[type="number"].unit-cost{min-width:160px; text-align:right; font-variant-numeric:tabular-nums;}

/* Ligne masquée (DELETE) */
.line--deleted{opacity:.45; filter:saturate(.6); pointer-events:none;}

/* Bouton "Ajouter une ligne" visible */
#btnAddLine{font-weight:700;}