/* Axper Europe — css/stock.css
   Stock : jauges, seuils, boutons de mouvement, historique, fenêtre sortie / réception.
   Repris de l'appli « Atelier stock ». */

/* Quantité + jauge */
.stock-cell { display: flex; flex-direction: column; gap: 7px; min-width: 96px; }
.qty { font-family: var(--display); font-size: 19px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qty small { font-family: var(--font); font-size: 12px; font-weight: 400; color: var(--faint); }
.gauge { position: relative; display: block; width: 96px; height: 5px; border-radius: 3px; background: var(--surface-2); flex-shrink: 0; }
.gauge i { position: absolute; inset: 0 auto 0 0; width: var(--fill); border-radius: inherit; background: var(--ok); transition: width .6s var(--ease); }
.gauge em { position: absolute; top: -3px; bottom: -3px; left: var(--mark); width: 2px; border-radius: 2px; background: var(--faint); opacity: .7; }
tr.low .gauge i, .dash-row.low .gauge i { background: var(--low); }
tr.empty .gauge i, .dash-row.empty .gauge i { background: var(--empty); }
.enter .gauge i { animation: fill .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 25ms + 150ms); }
@keyframes fill { from { width: 0; } }
.order { font-family: var(--display); font-weight: 700; margin-right: 6px; }

.threshold {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: var(--surface-2); color: var(--text);
  font-weight: 600; font-size: 13px; padding: 6px 10px 6px 12px; border-radius: 10px; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: transform .3s var(--spring), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
.threshold .ico { width: 15px; height: 15px; color: var(--accent-ink); transition: transform .35s var(--spring); }
tbody tr:hover .threshold { background: var(--surface); }
.threshold:hover { background: var(--accent-soft) !important; color: var(--accent-ink); transform: translateY(-2px); }
.threshold:hover .ico { transform: rotate(-15deg) scale(1.15); }

.actions { display: flex; gap: 7px; justify-content: flex-end; }
.actions button {
  border: 0; border-radius: 15px; background: var(--surface-2); color: var(--text); height: 30px; padding: 0 12px; white-space: nowrap;
  font-size: 13px; font-weight: 600; transition: transform .3s var(--spring), background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
tbody tr:hover .actions button:not(:hover) { background: var(--surface); }
.actions button:hover { transform: translateY(-1px); background: var(--accent); color: var(--on-accent); }
.actions [data-stock="out"]:hover { background: var(--low-bg); color: var(--low-ink); }
.actions [data-stock="in"]:hover { background: var(--ok-bg); color: var(--ok); }
.actions button:active { transform: scale(.95); }

tr.flash td { animation: flash 1.8s var(--ease); }
@keyframes flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 22%, transparent); } }

/* Historique */
.history-table { min-width: 960px; }
.history-table td { vertical-align: top; padding-block: 18px; }
.history-table td:nth-child(2) { min-width: 180px; max-width: 270px; overflow-wrap: anywhere; }
.history-date { max-width: 140px; color: var(--muted); line-height: 1.7; font-variant-numeric: tabular-nums; }
.history-product { font-weight: 600; line-height: 1.5; }
.row-code { display: block; color: var(--faint); font-size: 12px; margin-top: 4px; }
.event-badge { display: inline-block; padding: 4px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.event-badge.receipt { background: var(--ok-bg); color: var(--ok); }
.event-badge.dispatch { background: var(--low-bg); color: var(--low-ink); }
.event-badge.created { background: var(--info-bg); color: var(--info-ink); }
.event-badge.settings { background: var(--neutral-bg); color: var(--neutral-ink); }
.event-quantity { display: block; font-family: var(--display); font-size: 18px; font-weight: 600; margin-top: 9px; }
.event-quantity small { font-family: var(--font); font-size: 13px; font-weight: 400; }
.stock-change { display: flex; align-items: center; gap: 10px; font-size: 17px; white-space: nowrap; padding-top: 4px; font-variant-numeric: tabular-nums; }
.stock-change > span { color: var(--faint); }
.stock-change small { font-size: 12px; font-weight: 400; }
.history-details { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.history-details > div { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.detail-label { color: var(--faint); font-size: 12px; }
.history-details strong { font-weight: 600; }
.history-note { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.history-author { font-size: 14px; overflow-wrap: anywhere; }
.link-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; padding: 4px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; background: var(--info-bg); color: var(--info-ink); transition: transform .3s var(--spring);
}
.link-chip:hover { transform: translateX(3px); }

/* Sélecteur Sortie / Réception avec curseur glissant */
.segmented { position: relative; display: flex; background: var(--surface-2); border: 0; border-radius: 12px; padding: 3px; margin-top: 22px; }
.segmented::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 9px; background: var(--low); transition: transform .45s var(--spring), background-color .3s; }
.segmented.in::before { transform: translateX(100%); background: var(--ok); }
.segmented button { position: relative; z-index: 1; flex: 1; border: 0; border-radius: 9px; padding: 9px; background: none; color: var(--muted); font-size: 14px; font-weight: 600; transition: color .3s; }
.segmented .selected { color: var(--on-tone); }

.projection { background: var(--surface-2); padding: 13px 15px; border-radius: 12px; margin-top: 14px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; transition: background-color .3s, color .3s; }
.projection b { font-family: var(--display); font-size: 16px; font-weight: 600; }
.projection.warn { color: var(--low-ink); background: var(--low-bg); }
.projection-msg { display: inline-flex; align-items: center; gap: 7px; text-align: right; }
.projection.danger { color: var(--empty-ink); background: var(--empty-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--empty) 45%, transparent); font-weight: 600; }
.projection.danger .ico { width: 17px; height: 17px; animation: blink 1.6s ease-in-out infinite; }
.projection.alert-in { animation: shake .45s; }
@keyframes blink { 50% { opacity: .35; transform: scale(.9); } }
#move-supplier-field:not([hidden]) { animation: rowIn .4s var(--ease); }

/* ============ Pagination de l'inventaire ============ */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 18px 14px; border-top: 1px solid var(--line-soft); }
.pager-info { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.pager-controls { display: flex; align-items: center; gap: 8px; }
.pager-pages { position: relative; display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: var(--surface-2); border: 0; }
.pager-pill { position: absolute; left: 0; top: 3px; bottom: 3px; border-radius: 9px; background: var(--surface); box-shadow: var(--shadow-md); pointer-events: none; }
.pager-page {
  position: relative; z-index: 1; min-width: 34px; height: 30px; padding: 0 8px; border: 0; border-radius: 9px; background: none;
  font-weight: 600; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s, transform .3s var(--spring);
}
.pager-page:hover:not(.active) { color: var(--text); transform: translateY(-1px); }
.pager-page.active { color: var(--text); }
.pager-gap { position: relative; z-index: 1; padding: 0 4px; color: var(--faint); }
.pager .icon-button .ico { transition: transform .3s var(--spring); }
.pager-controls > .icon-button:first-child:hover:not(:disabled) .ico { transform: translateX(-2px); }
.pager-controls > .icon-button:last-child:hover:not(:disabled) .ico { transform: translateX(2px); }

/* Changement de page : l'ancienne page glisse et s'efface, la nouvelle arrive du bon côté */
#stock-content { transition: opacity .17s ease, transform .17s ease; }
#stock-content.page-out { opacity: 0; transform: translateX(calc(var(--page-x, 40px) * -1)); }
#stock-content.page-in { animation: pageSlideIn .42s var(--ease) both; }
#stock-content.page-in tbody tr { animation: pageRowIn .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms); }
#stock-content.page-in .gauge i { animation: fill .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 22ms + 120ms); }
@keyframes pageSlideIn { from { opacity: 0; transform: translateX(var(--page-x, 40px)); } }
@keyframes pageRowIn { from { opacity: 0; transform: translateX(calc(var(--page-x, 40px) * .5)); } }
@media (max-width: 900px) { .pager { justify-content: center; } .pager-info { width: 100%; text-align: center; } }


/* ============ Page Prix : saisie du coût unitaire dans le tableau ============ */
.price-total { font-size: 13px; color: var(--muted); }
.price-total b { color: var(--text); font-variant-numeric: tabular-nums; }
.cost-field {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; background: var(--surface-2);
  color: var(--muted); font-weight: 600; cursor: text; transition: box-shadow .2s, background-color .2s;
}
.cost-field input { width: 90px; border: 0; background: transparent; padding: 0; outline: none; text-align: right; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cost-field input::placeholder { color: var(--low-ink); font-weight: 500; }
.cost-field.missing { background: var(--low-bg); }
.cost-field:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
.cost-field:has(input.invalid) { box-shadow: 0 0 0 2px var(--empty), 0 0 0 6px var(--empty-bg); }
tbody tr:hover .cost-field:not(:focus-within) { background: var(--surface); }
.price-value { font-variant-numeric: tabular-nums; }

/* ============ Coût unitaire et inventaire annuel ============ */
.cost-missing { color: var(--low-ink) !important; font-weight: 600; }
.small-link { font-size: 12px; text-decoration: none; }
.small-link:hover { text-decoration: underline; }
.inventory-summary { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 10px; margin: 18px 0 6px; }
.inventory-summary div { border: 0; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.inventory-summary strong { display: block; font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.inventory-summary span { font-size: 12.5px; color: var(--muted); }
.inventory-summary .value { background: var(--ok-bg); }
.inventory-summary .value strong { color: var(--ok); }
.inventory-warning { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--low-bg); color: var(--low-ink); font-size: 13.5px; line-height: 1.5; }
.inventory-warning .ico { margin-top: 2px; }
.inventory-warning small { display: block; margin-top: 4px; opacity: .85; }
.field-label { display: block; font-size: 14px; font-weight: 600; margin-top: 18px; }
.format-switch { margin-top: 8px; }
.format-switch::before { background: var(--primary); }
.format-switch.in::before { background: var(--primary); }
[data-theme="dark"] .format-switch .selected { color: var(--primary-ink); }
@media (max-width: 600px) { .inventory-summary { grid-template-columns: 1fr 1fr; } .inventory-summary .value { grid-column: 1 / -1; } }