/* ========== Admin 출고서 (shipment notes, design Rev 14) ==========
   Loaded after admin-orders.css. The editor root is .op-edit.sp-edit and the grid keeps the order grid's DOM, so every op-
   rule applies (sticky 사진 + 색상, the header strip, the bar, the sheets, 「확인할 것」); this file only adds the 출고서
   parts. Prefix sp-. Phone first: 사진 76 + 색상 90 (sticky) + 사이즈 48 + 48px quantity columns, so at 375px one 주문 and
   two 출고 columns show beside the sticky strip and the 「→」 cue shows the rest. Text colours use the text-safe tokens
   only (AdminCssContrastTests): --kk-text, --kk-text-secondary, --kk-*-text. Inputs are >= 16px, controls >= 44px. */

/* ---------- List ---------- */
/* 미송 still owed (bold): the text colour instead of the card's secondary one. */
.sp-cards .sp-remaining.fw-bold { color: var(--kk-text); }

/* ---------- Columns card 「주문·출고 열」 ---------- */
.sp-columns { padding: 1rem; }
.sp-columns-title { margin: 0 0 0.6rem; font-size: 1rem; font-weight: 700; }
.sp-columns-title:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.sp-colgroup + .sp-colgroup { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--kk-line); }
.sp-colgroup-title { margin: 0 0 0.45rem; font-size: 0.9rem; font-weight: 700; color: var(--kk-text); }
.sp-colgroup-title .op-muted-text { font-weight: 500; font-size: 0.8rem; }
.sp-colgroup-empty { margin: 0 0 0.45rem; font-size: 0.85rem; color: var(--kk-text-secondary); }
.sp-colgroup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; }
.sp-chips {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media (min-width: 768px) {
  .sp-chips { flex-direction: row; flex-wrap: wrap; }
}
.sp-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  min-height: var(--kk-touch);
  padding: 0.3rem 0.35rem 0.3rem 0.6rem;
  border: 1px solid var(--kk-line-strong);
  border-radius: var(--kk-radius-sm);
  background: var(--kk-surface);
}
.sp-chip.is-linked { background: #fffaf0; }
.sp-chip.is-changed { border-color: var(--kk-warn); background: var(--kk-warn-bg); }
.sp-chip.is-trashed,
.sp-chip.is-missing { border-color: var(--kk-danger); background: var(--kk-danger-bg); }
.sp-chip-label { margin: 0; font-weight: 650; color: var(--kk-text); white-space: nowrap; }
.sp-chip-no { font-weight: 500; color: var(--kk-text-secondary); font-variant-numeric: tabular-nums; }
.sp-chip-kind { font-size: 0.85rem; font-weight: 650; color: var(--kk-text-secondary); }
.sp-chip-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; }
.sp-chip-actions .btn { white-space: nowrap; }
.sp-edit .form-control.sp-chip-date { width: 10.5rem; font-variant-numeric: tabular-nums; }
.sp-edit .form-control.sp-chip-date.is-invalid { border-color: var(--kk-danger); background: var(--kk-danger-bg); }
.sp-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--kk-info-bg);
  color: var(--kk-info-text);
}
.sp-badge.is-changed { border: 1px solid var(--kk-warn); background: #fff; color: var(--kk-warn-text); }
.sp-badge.is-trashed,
.sp-badge.is-missing { border: 1px solid var(--kk-danger); background: #fff; color: var(--kk-danger-text); }

/* The banner over the cards while a linked order changed after its import. */
.sp-changed-list { display: block; margin-top: 0.15rem; font-size: 0.85rem; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Empty state of a new 출고서 ---------- */
.sp-empty { padding: 1rem; }
.sp-empty-text { margin: 0 0 0.75rem; font-weight: 600; color: var(--kk-text); }
.sp-empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sp-empty-help { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--kk-text-secondary); }

.sp-language-field { max-width: 22rem; }

/* ---------- The grid (widths per contract §7) ----------
   The order grid's variables, re-set for the 출고서 (the template is built per render: ☐ · 업체 · 사진 · 색상 · 사이즈 ·
   one track per quantity column · 미송 · ✕). --op-t-color follows --op-w-color on the same element. */
.sp-edit .op-grid {
  --op-w-photo: 76px;
  --op-w-color: 90px; /* 1px border + 「+ 줄」 44px + ⋯ 44px */
  --op-w-size: 48px;
  --sp-w-vendor: 64px;
  --sp-w-oq: 48px;
  --sp-w-sq: 48px;
  --sp-w-remain: 56px;
  --sp-oq-bg: #fffaf0;
  --sp-oq-bg-alt: #fbf3e6;
}
@media (min-width: 768px) {
  .sp-edit .op-grid {
    --op-w-photo: 160px;
    --op-w-color: 140px;
    --op-w-size: 72px;
    --sp-w-vendor: 120px;
    --sp-w-oq: 64px;
    --sp-w-sq: 64px;
    --sp-w-remain: 80px;
  }
}

/* Two-line column headers: "9/28" over "주문" / "출고" (aria-hidden labels; each input has its full aria-label). */
.sp-edit .op-hcell.sp-hcell-2l {
  justify-content: center;
  padding: 0 2px;
  font-size: 0.74rem;
  line-height: 1.1;
  text-align: center;
  white-space: pre-line;
}
.sp-edit .op-grid-head .sp-c-oq { background: #f1e6d6; }

/* 업체: a textarea over the whole block (the sheet wraps the text in the merged cell). */
.sp-edit .op-c-vendor { align-items: stretch; }
.sp-gin-vendor {
  flex: 1 1 auto;
  min-height: 100%;
  padding: 0.35rem 0.3rem;
  resize: none;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Quantity cells: 주문 columns tinted like the sheet's order cells, 출고 columns white; narrow padding for 48px. */
.sp-edit .op-gline > .sp-c-oq { --op-cell-bg: var(--sp-oq-bg); }
.sp-edit .op-gitem.is-alt .op-gline > .sp-c-oq { --op-cell-bg: var(--sp-oq-bg-alt); }
.sp-edit .sp-c-q .op-gin { padding: 0 0.2rem; }

/* 미송: computed, read-only; the danger text colour while more was shipped than ordered. */
.sp-edit .op-gline > .sp-c-remain { --op-cell-bg: #faf5f2; }
.sp-edit .op-gline:focus-within > .sp-c-remain { background: #fbecdc; }
.sp-remain { padding: 0 0.3rem; }
.sp-c-remain.is-negative .sp-remain,
.op-tnum.sp-c-remain.is-negative { color: var(--kk-danger-text); }
.sp-bar-remain.is-negative,
.sp-bar-remain.is-negative strong { color: var(--kk-danger-text); }

/* The photo cell offers only 「＋ 사진」 (a product's photo comes from the item sheet): it fills the cell. */
.sp-edit .sp-photo-add { flex: 1 1 auto; border-bottom: 0; }

/* ---------- Sheets ---------- */
.sp-item-source { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--kk-text-secondary); overflow-wrap: anywhere; }
.sp-bulk-note { margin: 0; font-size: 0.85rem; color: var(--kk-text-secondary); }

/* 「주문서 불러오기」: one row per order, the whole row (label) ticks the box; linked orders are greyed. */
.sp-order-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 64px;
  padding: 0.35rem 0.25rem;
  border-bottom: 1px solid var(--kk-line);
}
.sp-order-row .form-check-input { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin: 0; cursor: pointer; }
.sp-order-row .form-check-input:focus-visible { outline: 3px solid var(--kk-focus-ring); outline-offset: 2px; }
.sp-order-row.is-ticked { background: var(--kk-info-bg); }
.sp-order-label {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--kk-touch);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  cursor: pointer;
  color: var(--kk-text);
}
.sp-order-row.is-linked .sp-order-label { cursor: default; color: var(--kk-text-secondary); }
.sp-picker-foot {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--kk-line);
}
.sp-picker-count { margin-right: auto; font-size: 0.88rem; font-weight: 650; color: var(--kk-text); }