/* Residual styles for Polaris-based views (suppliers, POs, forecasts, reports, inventory configs) */

.turbo-progress-bar {
  background-color: #008060;
}

/* Status badges (PO list, supplier views) — Polaris badge tones: regular
   weight, softly saturated fills, dark readable text */
.status-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25rem;
  white-space: nowrap;
}

.status-badge--draft { background: #e7e7e9; color: #52555a; }
.status-badge--ordered { background: #d5e9f7; color: #00527c; }
.status-badge--partially_received { background: #fbe3b1; color: #5e4200; }
.status-badge--received { background: #b6e8d1; color: #0c5132; }
.status-badge--archived { background: #e3e3e3; color: #616161; }
.status-badge--not_received { background: #e7e7e9; color: #52555a; }
.status-badge--rejected { background: #fbd9d5; color: #5f1410; }

/* Stock level colors (reports) */
.stock-level--red { color: #d72c0d; font-weight: 600; }
.stock-level--yellow { color: #b98900; font-weight: 600; }
.stock-level--green { color: #008060; }

.pack-size-warning {
  color: #d72c0d;
  font-size: 0.85rem;
}

/* Center <dialog> elements opened with showModal() — Tailwind preflight resets margin: auto */
dialog[open] {
  margin: auto;
}

/* Modal scrim. Plain rgba (no custom properties): Tailwind's backdrop:bg-*
   utilities rely on CSS variables that don't reach ::backdrop in all
   browsers, which left dialogs floating over an undimmed page. */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Pagy pagination (PO/vendor/order/product indexes) — Polaris-style compact
   pager. Tailwind preflight strips default link styling, so style explicitly. */
nav.pagy {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 13px;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}

nav.pagy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.375rem;
  border-radius: 0.5rem;
  color: #374151;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 75ms ease;
}

nav.pagy a[href]:hover {
  background-color: #f3f4f6;
  color: #111827;
}

nav.pagy a[href]:focus-visible {
  outline: 2px solid #008060;
  outline-offset: 1px;
}

nav.pagy a.current {
  background-color: #111827;
  color: #ffffff;
  font-weight: 500;
  cursor: default;
}

nav.pagy a[aria-disabled="true"]:not(.current) {
  color: #9ca3af;
  cursor: default;
}

nav.pagy a.gap {
  min-width: auto;
  padding: 0 0.125rem;
}

.pagy.info {
  font-size: 13px;
  color: #6b7280;
}

/* Purchase order table: pinned identity columns.
   Below ~1120px the table scrolls sideways, and without this the row checkbox
   and the PO number scroll out of view — after scrolling right to read Payment
   due / Received you can no longer tell which order a row belongs to. The two
   identity columns stay put; the edge shadow only shows while there is table
   hidden behind them (po_scroll_hint_controller publishes .po-at-start).
   The offsets are literal because the table is `table-fixed` with an explicit
   colgroup whose first two columns are fixed pixel widths (40px + 76px).
   box-shadow rather than a ::after gradient: the vendor cell truncates, and
   overflow:hidden would clip a pseudo-element drawn outside it. */
[data-po-pin] {
  position: sticky;
  z-index: 2;
  transition: box-shadow 150ms ease;
}

[data-po-pin="1"] { left: 0; }
[data-po-pin="2"] { left: 40px; box-shadow: 8px 0 8px -8px rgba(17, 24, 39, 0.4); }

/* Below ~900px there is no width to spare, so Vendor/Supplier scrolls with the
   rest and only the checkbox + number stay pinned. */
[data-po-pin="3"] { position: static; }

thead [data-po-pin] { z-index: 3; }

@media (min-width: 900px) {
  [data-po-pin="2"] { box-shadow: none; }
  [data-po-pin="3"] {
    position: sticky;
    left: 116px;
    box-shadow: 8px 0 8px -8px rgba(17, 24, 39, 0.4);
  }
}

/* Nothing is hidden behind the pinned columns yet — no shadow to draw. */
.po-at-start [data-po-pin] { box-shadow: none; }

/* Dashboard card tables: a scroll affordance for the narrow widths where a
   four-column money table no longer fits its card. Pure CSS — the white
   gradients are background-attachment: local so they slide away as the table
   scrolls, leaving the grey edge shadow visible only while there is more to
   see. Without it the overflow is silent, which is how a clipped "$25,250.65"
   used to read as a real "$25,25". */
.table-scroll {
  background-image:
    linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)),
    radial-gradient(farthest-side at 0 50%, rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}