/* YanChan Ops operations & purchasing (alpha26). Built on app.css tokens. */

/* ---------- project list ---------- */
.ops-project-table { min-width: 920px; }
.ops-project-table tbody tr { cursor: pointer; }
.ops-project-table td:first-child b { font-size: var(--fs); }
.ops-truncate { max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sop-mini { display: inline-flex; gap: 3px; vertical-align: middle; }
.sop-mini i { width: 14px; height: 5px; border-radius: 3px; background: var(--sunken); border: 1px solid var(--border); }
.sop-mini i.done { background: var(--accent); border-color: var(--accent); }
.sop-mini i.now { background: var(--copper); border-color: var(--copper); }

/* ---------- same-material pool, bulk edit, duplicates ---------- */
.ops-pool { margin: 4px 0 14px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.ops-pool h3 { margin: 12px 14px 4px; font-size: var(--fs-md); }
.ops-pool > p { margin: 0 14px 10px; font-size: var(--fs-sm); color: var(--text-2); }
.ops-pool .table { min-width: 480px; }
.ops-edit-table { min-width: 820px; }
.ops-edit-table td:first-child { min-width: 150px; }
.ops-edit-table .input { min-width: 140px; }
.ops-spec { color: var(--text-2) !important; }
.ops-duplicate-list { display: grid; gap: 12px; margin-top: 12px; }
.ops-duplicate-list article { padding: 14px; border: 1px solid var(--border); border-radius: var(--r); }
.ops-duplicate-list article > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ops-duplicate-list section { min-width: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); overflow-wrap: anywhere; }
.ops-duplicate-list section p { margin: 6px 0 2px; font-size: var(--fs-sm); color: var(--text-2); }
.ops-duplicate-list p { margin: 10px 0 4px; font-size: var(--fs-sm); }
.ops-duplicate-list small { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-xs); }
.ops-dialog .field > span { font-size: var(--fs-xs); color: var(--muted); }

/* ---------- purchasing ---------- */
.supply-table { min-width: 860px; }
.supply-table th:last-child { width: 1%; }
.supply-table td:last-child .row-actions { flex-wrap: nowrap; }
.supply-records { min-width: 980px; }
/* alpha27: entries grouped by shop (cart) or by order (in transit); actions sit next to quantities */
.order-groups { display: grid; gap: 12px; padding: 12px 16px; }
.order-group { border: 1px solid var(--border); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.order-group > header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); }
.order-group > header .grow { min-width: 160px; }
.order-group > header small, .order-sum small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.order-sum { text-align: right; font-variant-numeric: tabular-nums; }
.order-group.compact > header { padding: 8px 12px; }
.entry-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 130px auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); }
.order-group > header + .entry-row { border-top: 0; }
.entry-row small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.entry-row .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
.entry-main { min-width: 0; }
.entry-qty, .entry-price { text-align: right; font-variant-numeric: tabular-nums; }
.entry-row.selectable { grid-template-columns: 22px minmax(0, 1fr) 110px 130px; cursor: pointer; }
.entry-row.selectable:hover { background: var(--hover); }
.receive-head { display: flex; gap: 12px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r-sm); background: var(--surface); }
.receive-head small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.channel-list { display: grid; gap: 8px; }
.channel-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--panel); }
.channel-row .grow { min-width: 160px; }
.channel-row small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.channel-row.inactive { background: var(--surface); }
.channel-row[hidden] { display: none; }
.channel-row.inactive .supply-tag, .channel-row.inactive .grow { opacity: .62; }
.supply-table td, .supply-records td { vertical-align: top; }
.supply-table .supply-mat-cell > small, .supply-records td small { display: block; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.supply-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.supply-tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); line-height: 1.6; color: var(--tag, var(--muted)); background: color-mix(in srgb, var(--tag, var(--muted)) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--tag, var(--muted)) 35%, transparent); overflow-wrap: anywhere; }
.supply-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--tag, var(--muted)); flex: none; }
.supply-tag.blue, .supply-dot.blue { --tag: #3867c8; }
.supply-tag.violet, .supply-dot.violet { --tag: #7a55c0; }
.supply-tag.green, .supply-dot.green { --tag: #268257; }
.supply-tag.orange, .supply-dot.orange { --tag: #a46813; }
.supply-tag.red, .supply-dot.red { --tag: #bf4551; }
.supply-tag.teal, .supply-dot.teal { --tag: #1f7d7d; }
:root[data-theme="dark"] .supply-tag.blue, :root[data-theme="dark"] .supply-dot.blue { --tag: #93b4ff; }
:root[data-theme="dark"] .supply-tag.violet, :root[data-theme="dark"] .supply-dot.violet { --tag: #c4a4ed; }
:root[data-theme="dark"] .supply-tag.green, :root[data-theme="dark"] .supply-dot.green { --tag: #72d8a5; }
:root[data-theme="dark"] .supply-tag.orange, :root[data-theme="dark"] .supply-dot.orange { --tag: #eabb69; }
:root[data-theme="dark"] .supply-tag.red, :root[data-theme="dark"] .supply-dot.red { --tag: #ff9ba7; }
:root[data-theme="dark"] .supply-tag.teal, :root[data-theme="dark"] .supply-dot.teal { --tag: #7fd5d1; }
.supply-price { display: inline-block; padding: 2px 0; border: 0; border-bottom: 1px dashed currentColor; background: none; color: var(--accent); font-size: var(--fs-sm); font-weight: 600; text-align: right; cursor: pointer; }
.supply-price:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.supply-record-summary { display: flex; gap: 14px; flex-wrap: wrap; padding: 12px 16px; font-size: var(--fs-sm); color: var(--muted); border-bottom: 1px solid var(--border); }
.supply-record-summary b { color: var(--text); }
.supply-footnote { margin: 0; padding: 10px 16px 14px; }
.supply-attention { color: var(--warn) !important; }
.supply-checks { display: grid; gap: 2px; margin-top: 10px; }
.supply-dialog .table td { vertical-align: top; }
.supply-dialog input[data-qty], .supply-dialog input[data-quote] { width: 120px; text-align: right; }
.supply-dialog [data-brand] { min-width: 120px; }
/* alpha36 (D-6): material head (MSHost.materialHead / materialThumb) in board rows, order rows and dialogs; package tag and
   实际备注 (coordinate Comment) next to the code; whole-order cancel and whole-shop checkout rows */
.supply-mat-cell { min-width: 0; }
.supply-mat-cell > small, .supply-cart-mat small { display: block; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.supply-mat-cell .supply-tags { margin-top: 4px; }
.supply-mat-cell > :not(.mhead) { margin-left: 50px; } /* under the head's text: 40 px thumbnail + 10 px gap (app.css .mhead) */
.supply-pkg { display: inline-block; max-width: 100%; padding: 0 6px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--sunken); color: var(--text-2); font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; vertical-align: 1px; overflow-wrap: anywhere; }
.supply-design { color: var(--text-2) !important; }
.supply-design b { color: var(--text); font-weight: 600; }
.supply-desig { color: var(--muted); font-family: var(--mono); }
.supply-code { font-weight: 600; }
.entry-main { display: flex; gap: 10px; align-items: flex-start; }
.entry-text { flex: 1; min-width: 0; }
.entry-row.is-focus { background: var(--selected); }
.supply-cart-mat { display: flex; gap: 10px; align-items: flex-start; min-width: 200px; }
.supply-cart-mat > div { min-width: 0; }
.supply-drawer-head { margin-bottom: 4px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface); }
.receive-head { align-items: flex-start; }
.receive-head > .supply-tag { flex: none; }
/* phones only: the card layout hides the thead and its select-all box, so the board shows this one above the cards */
.supply-selall { display: none; }

@media (max-width: 760px) {
  /* the board as cards: material head, the three numbers in one row, then the actions; no horizontal scroll */
  .table.mobile-cards.supply-table { min-width: 0; }
  .table.mobile-cards.supply-table tr { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0; }
  .table.mobile-cards.supply-table td { min-width: 0; padding: 4px 10px; }
  .table.mobile-cards.supply-table td.number { white-space: normal; }
  .table.mobile-cards.supply-table td.supply-mat, .table.mobile-cards.supply-table td.supply-act { grid-column: 1 / -1; }
  .table.mobile-cards.supply-table td.supply-sel { position: absolute; top: 10px; right: 6px; width: auto; padding: 0; }
  .table.mobile-cards.supply-table td.supply-sel + td.supply-mat { padding-right: 40px; }
  .supply-selall { display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center; gap: 8px; min-height: 40px; padding: 4px 6px 4px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-sm); cursor: pointer; } /* box on the right, above the cards' own boxes */
  .supply-selall input { width: 18px; height: 18px; margin: 0; }
  .supply-table td:last-child .row-actions { flex-wrap: wrap; }
  .supply-cart-mat { min-width: 0; }
  .ops-duplicate-list article > div { grid-template-columns: minmax(0, 1fr); }
  .ops-truncate { max-width: 220px; }
  .order-groups { padding: 10px; }
  .entry-row { grid-template-columns: minmax(0, 1fr) auto; }
  .entry-row .entry-main { grid-column: 1 / -1; }
  .entry-row .row-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .entry-row.selectable { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .entry-row.selectable .entry-main { grid-column: 2 / -1; }
  .entry-row.selectable .entry-qty { grid-column: 2; text-align: left; }
  .order-group > header .btn { width: 100%; }
}