/* Leveringsoversigt tab — upload an ERP ItemPlanning "stykliste" export, show price/stock/
   delivery-date overview per shortage line. Every value comes from the shared design tokens in
   style.css (:root and its [data-theme="dark"] override), so this file needs no dark-mode rules
   of its own. Mirrors indkob.css's structure/naming, own prefix (delivery-*). */

/* The wide split-leg table needs more room than the shared main{max-width:1440px} leaves on a
   normal desktop monitor (on request — "masser af tomrum i siderne") — widened only while this
   tab is actually showing, via the data-active-tab attribute redesign.js's tab-switch handler
   sets on <main>, so every other tab keeps its own normal 1440px width untouched. */
main[data-active-tab="delivery"] { max-width: 1900px; }

.delivery-wrap { display: flex; flex-direction: column; gap: var(--gap-stack); }

.delivery-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.delivery-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.delivery-sub { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; max-width: 720px; }

.delivery-deadline-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; font-size: 0.8rem; color: var(--text-2);
}
.delivery-deadline-row label { font-weight: 600; color: var(--text); }
.delivery-deadline-input {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text);
  border-radius: var(--radius-sm); padding: 5px 8px; font-size: 0.8rem; font-family: inherit;
}
.delivery-deadline-hint { font-size: 0.72rem; color: var(--text-muted); }

.delivery-dropzone {
  position: relative;
  margin-top: 12px;
  border: 2px dashed var(--border-strong, #c2c7cf);
  border-radius: var(--radius-sm);
  background: var(--surface2);
  padding: 32px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s, background .12s;
  color: var(--text-muted);
}
.delivery-api-error-badge {
  position: absolute; top: 8px; right: 10px;
  background: var(--red-tint); color: var(--red);
  font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  cursor: help;
}
.delivery-dropzone:hover,
.delivery-dropzone.drag {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.delivery-dz-title { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.delivery-dz-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 4px; }

.delivery-filename {
  margin-top: 10px; font-size: 0.76rem; color: var(--text-2); font-family: var(--mono);
}
.delivery-error {
  margin-top: 10px; padding: 9px 13px; border-radius: var(--radius-sm); font-size: 0.78rem;
  background: var(--red-tint); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent);
}

.delivery-history { margin-top: 14px; }
.delivery-history-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); margin-bottom: 6px; }
.delivery-history-list { display: flex; flex-wrap: wrap; gap: 6px; }
.delivery-history-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-2);
  padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
  text-align: left; max-width: 240px;
}
.delivery-history-item:hover { border-color: var(--accent); }
.delivery-history-item.active { border-color: var(--accent); background: var(--accent-tint); }
.delivery-history-name {
  font-size: 0.76rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.delivery-history-meta { font-size: 0.66rem; color: var(--text-muted); }

.delivery-progress { margin-top: 14px; }
.delivery-progress-bar {
  height: 6px; border-radius: 3px; background: var(--surface3); overflow: hidden;
}
.delivery-progress-fill { height: 100%; background: var(--accent); transition: width .15s; }
.delivery-progress-label { margin-top: 6px; font-size: 0.74rem; color: var(--text-muted); }

/* ── Results ─────────────────────────────────────────────────────────────── */
.delivery-summary { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.8rem; color: var(--text-2); }
.delivery-summary b { color: var(--text); }
.delivery-sum-ok   { color: var(--green); }
.delivery-sum-flag { color: var(--yellow); }
.delivery-sum-miss { color: var(--text-muted); }

.delivery-filters { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.delivery-filter-btn {
  border: 1px solid var(--border); background: var(--surface2); color: var(--text-2);
  font-size: 0.74rem; font-weight: 600; padding: 5px 10px; border-radius: 20px;
  cursor: pointer; font-family: inherit;
}
.delivery-filter-btn:hover { border-color: var(--accent); }
.delivery-filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.delivery-filter-count { opacity: 0.75; }

/* No overflow-x here (unlike indkob.css's table-wrap) — an "auto" on either axis forces the
   other to "auto" too per the CSS overflow spec, which would make this element sticky's own
   containing block instead of the page viewport, and the header would never actually stick.
   A very wide table scrolls the page itself instead — same trade-off project.css already
   accepts elsewhere for its own wide tables. */
.delivery-table-wrap { margin-top: 12px; }
.delivery-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
.delivery-table thead th {
  text-align: left; padding: 8px 10px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted);
  border-bottom: 2px solid var(--border); cursor: pointer; user-select: none;
  /* Follows the page scroll (on request) — sticks below the app's own sticky site header,
     see --delivery-header-offset set from JS (deliveryRender) to that header's real height. */
  position: sticky; top: var(--delivery-header-offset, 0px); background: var(--surface); z-index: 3;
}
.delivery-table thead th:hover { color: var(--text); }
.delivery-table thead th.is-sorted { color: var(--accent-ink); }
.delivery-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--divider); }
.delivery-table tbody tr:hover td { background: var(--surface2); }
.delivery-table tbody tr.delivery-row-missing td { color: var(--text-faint); }

.delivery-td-ipn { font-family: var(--mono); }
.delivery-td-desc { white-space: normal; max-width: 300px; }
.delivery-td-num, .delivery-td-money { text-align: right; font-family: var(--mono); }
.delivery-td-date { font-family: var(--mono); }
.delivery-td-lead { font-family: var(--mono); }
/* Wraps rather than forcing the column wide — "Manuel prishentning (MICROCHIP)" was otherwise the
   single widest cell in the whole table despite being one of the least important to read at a
   glance. */
.delivery-td-status { color: var(--text-muted); font-size: 0.74rem; white-space: normal; max-width: 130px; }

.delivery-td-num span[title], .delivery-td-lead span[title] { cursor: help; border-bottom: 1px dotted var(--text-faint); }

/* Available-now / rest legs — "N stk · price/stk · leverandør" as one compact phrase per cell
   rather than exploding into separate columns (on request: too many columns reads as confusing). */
.delivery-td-leg { white-space: normal; max-width: 320px; font-family: var(--mono); font-size: 0.76rem; }
.delivery-leg-empty { color: var(--text-faint); font-style: italic; }
.delivery-td-leg a { color: var(--accent-ink); text-decoration: none; }
.delivery-td-leg a:hover { text-decoration: underline; }

/* Spelled out inline whenever a leg's purchase quantity exceeds what's actually confirmed in
   stock (e.g. a cheaper reel/pack size bought while genuinely on backorder) — see
   deliveryLegCellHtml, the exact confusion this exists to prevent. */
.delivery-leg-note { color: var(--text-muted); font-style: italic; }

/* Whole row — Würth/Microchip parts must be hand-priced, never trusted from the automated search. */
.delivery-table tbody tr.delivery-row-manual td {
  background: var(--yellow-tint); color: var(--text);
}
.delivery-row-manual .delivery-td-status { color: var(--yellow); font-weight: 700; }

/* Availability rule (on request): green = enough stock right now, yellow = no stock but the
   supplier's lead time still lands before the file's own "Tidligst tilrådighed (Lev.tid)" date,
   red = it wouldn't (or the lead time is unknown). Only applied to priced ('ok') rows — a
   not-found row keeps its plain .delivery-row-missing look, see deliveryAvailabilityFlag. */
.delivery-table tbody tr.delivery-row-green td { background: var(--green-tint); color: var(--text); }
.delivery-table tbody tr.delivery-row-yellow td { background: var(--yellow-tint); color: var(--text); }
.delivery-table tbody tr.delivery-row-red td { background: var(--red-tint); color: var(--text); }