/* ══════════════════════════════════════════════
   SUPPLY ISSUES — Head Office › Approvisionnement
   Page rules are scoped to .supply, dialog rules to .supply-form.
   Uses the tokens and components of style.css; nothing here is decorative.
══════════════════════════════════════════════ */

.supply { padding-top: 20px; }
.supply .stat-grid { margin-bottom: 0; }
.supply .section-head {
  flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 28px 0 12px;
}
.supply-lede { margin: -4px 0 12px; font-size: var(--fs-sm); color: var(--text-muted); }
.supply-banner__detail { display: block; margin-top: 2px; font-size: var(--fs-sm); font-weight: 400; }

/* ── Filter bar ───────────────────────────────── */
.supply-filters { display: flex; flex-direction: column; gap: 12px; }
.supply-filters .field { margin-bottom: 0; min-width: 0; }
.supply-filters__top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.supply-filters__group { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }
.supply-filters__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.supply-filters .segmented__opt { height: 36px; padding: 0 16px; white-space: nowrap; }
.supply-filters__search { flex: 1 1 260px; }
.supply-filters__search .input { -webkit-appearance: none; appearance: none; }
.supply-filters__selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }

.supply-meta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px;
  min-height: 32px; margin: 12px 0 8px;
}
.supply-meta__count { font-size: var(--fs-sm); color: var(--text-muted); }

@media (max-width: 559px) {
  .supply-filters__group { flex: 1 1 100%; }
  .supply-filters__selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply-filters__selects .field:nth-child(3) { grid-column: 1 / -1; }
}

/* ── Issues table (wide layout) ─────────────────
   Ten columns are wider than the page's content column on most laptops, so the cells are
   compact, the table scrolls sideways inside .table-wrap, and the row actions stay pinned
   to the right edge. */
.supply-table-host { container-type: inline-size; container-name: supply-table; outline: none; transition: opacity var(--dur) var(--ease); }
.supply-table-host.is-loading { opacity: 0.55; pointer-events: none; }

.supply .table th, .supply .table td { padding: 10px 9px; }
.supply .table th:first-child, .supply .table td:first-child { padding-left: 14px; }
.supply .table th:last-child, .supply .table td:last-child { padding-right: 12px; }
.supply .table th { white-space: normal; vertical-align: bottom; line-height: 1.25; letter-spacing: 0.02em; }
.supply .table td { vertical-align: top; font-size: var(--fs-sm); line-height: 1.4; }
.supply .table td.col-article { font-size: var(--fs-base); }

.supply .col-clinic, .supply .col-supplier, .supply .col-order, .supply .col-po, .supply td.col-eta { white-space: nowrap; }
.supply .col-article { min-width: 170px; }
.supply .col-status { min-width: 128px; }
.supply .col-days { min-width: 60px; }
.supply .col-notes { min-width: 120px; }
.supply .col-actions {
  position: sticky; right: 0; z-index: 1; width: 1%; white-space: nowrap; text-align: right;
  background: var(--surface);
}
.supply .table tr:hover td.col-actions { background: var(--surface-2); }

.supply-status-text { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.35; color: var(--text-muted); }
.supply-resolved { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--fs-xs); color: var(--text-muted); }
.supply-eta { font-variant-numeric: tabular-nums; }
.supply-eta--overdue { color: var(--danger-text); font-weight: 500; }
.supply-eta + .badge { margin-top: 4px; }
.supply-notes {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; max-width: 220px; overflow-wrap: anywhere;
}
.supply-row--resolved td, .supply-row--resolved .gcode { color: var(--text-muted); }

/* Row actions: icon-only in the table, labelled in the card layouts. */
.supply-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.supply-actions .supply-act { width: 30px; height: 30px; padding: 0; gap: 8px; }
.supply-act__text {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.supply-actions.is-confirming .supply-act { display: none; }
.supply-actions .inline-confirm { flex-wrap: wrap; justify-content: flex-end; max-width: 200px; }

/* ── Issues table (card layouts) ────────────────
   When the table's own box is too narrow for ten columns each issue becomes a card: article
   and status first, then the details in a 4-column (medium) or 2-column (narrow) grid. Sized
   by the table's container rather than the window, so it also adapts next to the desktop
   sidebar. */
@container supply-table (max-width: 999px) {
  .supply-table, .supply-table tbody { display: block; }
  .supply-table thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .supply-table tbody tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
  }
  .supply-table tbody tr:last-child { border-bottom: 0; }
  .supply .supply-table td,
  .supply .supply-table td:first-child,
  .supply .supply-table td:last-child { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .supply .supply-table td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint);
  }
  .supply .supply-table td.num { text-align: left; }
  .supply .supply-table td.is-empty { display: none; }
  .supply .supply-table tr:hover td,
  .supply .supply-table tr:hover td.col-actions { background: transparent; }

  .supply .supply-table td.col-article { grid-column: span 2; order: 1; }
  .supply .supply-table td.col-status { grid-column: span 2; order: 2; }
  .supply .supply-table td.col-clinic { order: 3; }
  .supply .supply-table td.col-supplier { order: 4; }
  .supply .supply-table td.col-order { order: 5; }
  .supply .supply-table td.col-days { order: 6; }
  .supply .supply-table td.col-eta { order: 7; }
  .supply .supply-table td.col-po { order: 8; }
  .supply .supply-table td.col-notes { grid-column: span 2; order: 9; }
  .supply .supply-table td.col-actions {
    grid-column: 1 / -1; order: 10; position: static; width: auto; text-align: left; background: transparent;
  }

  .supply-notes { display: block; max-width: none; }
  .supply-actions { display: flex; justify-content: flex-start; gap: 8px; }
  .supply-actions .supply-act { width: auto; height: 32px; padding: 0 12px; }
  .supply-act__text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .supply-actions .inline-confirm { max-width: none; justify-content: flex-start; }
}
@container supply-table (max-width: 639px) {
  .supply-table tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply .supply-table td.col-article,
  .supply .supply-table td.col-status,
  .supply .supply-table td.col-notes { grid-column: 1 / -1; }
}

/* ── Recurring issues ─────────────────────────── */
.supply-recurring { padding-top: 6px; padding-bottom: 6px; }
.supply-recurring__row { align-items: flex-start; }
.supply-recurring__main { flex: 1; min-width: 0; }
.supply-recurring__meta { margin-top: 2px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ── New / edit dialog ────────────────────────── */
.supply-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 640px) {
  .supply-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .supply-form__full { grid-column: 1 / -1; }
}
.supply-form .field { min-width: 0; }
.supply-form .field-hint { color: var(--text-muted); }
.supply-req { color: var(--text-muted); font-weight: 400; }

.supply-form .input.is-invalid, .supply-form .select.is-invalid { border-color: var(--sienna); }
.supply-form .input.is-invalid:focus, .supply-form .select.is-invalid:focus { box-shadow: 0 0 0 3px var(--sienna-tint); }
.supply-form .field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-xs); color: var(--danger-text); }
.supply-form .field-error .icon { margin-top: 1px; }

.supply-generic__selected {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 4px 6px 4px 14px; border-radius: var(--radius-sm); background: var(--blue-tint);
}
.supply-generic__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.supply-generic__results { margin-top: 8px; gap: 4px; }
.supply-generic__results:empty { display: none; }
.supply-pick { padding: 9px 12px; border-radius: var(--radius-sm); }
.supply-pick .pick-row__main { min-width: 0; }
.supply-pick .pick-row__title { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.supply-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.supply-suggest:empty { display: none; }
.supply-chip {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.supply-chip:hover { background: var(--blue-tint); border-color: var(--accent); }

.supply-eta-box {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1.5px solid var(--border); font-variant-numeric: tabular-nums;
}

/* The save buttons stay reachable while a long form scrolls inside the dialog. */
.supply-form__actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 4px 0 -24px; padding: 14px 0 24px;
  background: var(--surface); border-top: 1px solid var(--border);
}
@media (max-width: 599px) {
  .supply-form__actions {
    margin-bottom: calc(-20px - env(safe-area-inset-bottom));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .supply-form__actions .btn { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .supply-table-host { transition: none; }
}