/* PLM app (plm-*): change orders on bills of materials. Tokens from admin.css only, logical properties, light + dark through the tokens, phone first at 375 px.
   Loaded by public/js/admin/modules/plm/kit.js (useCss) and linked in admin.html. The kanban engine (kb-*) lives in erp.css, the "How this works" box (bk-*) in orders.css. */

/* ------------------------------------------------------------ shared bits */
.plm-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block: 12px; }
.plm-bar .search-box { flex: 1 1 220px; max-width: 360px; }
.plm-bar .btn.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-d); }
.plm-link { color: var(--accent-d); font-weight: 650; text-decoration: none; overflow-wrap: anywhere; }
.plm-link:hover { text-decoration: underline; }
.plm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--panel-3); color: var(--muted); }
.plm-ver { display: inline-block; padding: 1px 8px; border-radius: 6px; font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-d); unicode-bidi: isolate; }
.plm-pri { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 750; background: var(--warn-soft); color: var(--warn-ink); }
.plm-pri.p2 { background: var(--danger-soft); color: var(--danger-ink); }
.plm-appr { gap: 4px; }
.plm-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.plm-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-block: 8px; border-radius: var(--r-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); font-size: 13.5px; }
.plm-note.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.plm-note > div, .plm-note > span { min-width: 0; overflow-wrap: anywhere; }
.plm-note p { margin: 0 0 6px; }
.modal textarea, .plm-prop textarea, .plm-approvals textarea { width: 100%; }
.plm-orders { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.plm-sumlist { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 4px; }

/* ------------------------------------------------------------ board */
.plm-board { min-width: 0; }
.plm-kb .kb-col { flex: 1 0 272px; min-width: 250px; max-width: 340px; }
.plm-card { display: grid; gap: 6px; min-width: 0; }
.plm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plm-card-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.plm-card-title { font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.plm-card-prod { overflow-wrap: anywhere; }
.plm-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.plm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plm-kb .kb-card:has(.plm-card.p2) { box-shadow: inset 3px 0 0 var(--danger), var(--shadow); }
.plm-kb .kb-card:has(.plm-card.p1) { box-shadow: inset 3px 0 0 var(--warn), var(--shadow); }
[dir="rtl"] .plm-kb .kb-card:has(.plm-card.p2) { box-shadow: inset -3px 0 0 var(--danger), var(--shadow); }
[dir="rtl"] .plm-kb .kb-card:has(.plm-card.p1) { box-shadow: inset -3px 0 0 var(--warn), var(--shadow); }
.plm-stage-sel { display: none; width: 100%; min-height: 44px; margin-top: 4px; padding-inline: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }

/* ------------------------------------------------------------ tables (list, components, operations, changes) */
.plm-tablewrap { overflow-x: auto; }
.plm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.plm-table th { text-align: start; font-size: 12px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.plm-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plm-table th.num, .plm-table td.num { text-align: end; font-variant-numeric: tabular-nums; }
.plm-table tbody tr:last-child td { border-bottom: 0; }
.plm-table .plm-del { text-align: end; white-space: nowrap; width: 1%; }
.plm-c-main { min-width: 180px; }
.plm-pbadge { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.plm-pbadge:empty { display: none; }
.plm-row-actions { display: inline-flex; gap: 2px; }
.plm-c-act { white-space: nowrap; text-align: end; }
.plm-edit input:not([type=checkbox]), .plm-edit select, .plm-edit textarea, .plm-edit .ss-input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); outline: 0; }
.plm-edit input:focus, .plm-edit select:focus, .plm-edit textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.plm-edit td { min-width: 110px; }
.plm-edit td:first-child { min-width: 220px; }
.plm-edit td.plm-instr-cell { min-width: 220px; }
.plm-apply { color: var(--muted); font-size: 13px; }
.plm-instr { white-space: pre-wrap; overflow-wrap: anywhere; }

/* the changes: a marker (+, −, ~) and a word in every changed row, on top of the tint */
.plm-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 750; white-space: nowrap; }
.plm-mark > b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 15px; line-height: 1; }
.plm-mark.m-added { color: var(--ok-ink); }
.plm-mark.m-added > b { background: var(--ok-soft); }
.plm-mark.m-removed { color: var(--danger-ink); }
.plm-mark.m-removed > b { background: var(--danger-soft); }
.plm-mark.m-changed { color: var(--warn-ink); }
.plm-mark.m-changed > b { background: var(--warn-soft); }
.plm-table tr.plm-r-added > td { background: color-mix(in srgb, var(--ok-soft) 55%, transparent); }
.plm-table tr.plm-r-removed > td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.plm-table tr.plm-r-removed > td:not(:first-child) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.plm-table tr.plm-r-changed > td { background: color-mix(in srgb, var(--warn-soft) 55%, transparent); }
.plm-sums { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 8px 12px; }
.plm-sum { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--panel-3); color: var(--ink); }
.plm-sum > b { font-size: 15px; line-height: 1; }
.plm-sum.m-added { background: var(--ok-soft); color: var(--ok-ink); }
.plm-sum.m-removed { background: var(--danger-soft); color: var(--danger-ink); }
.plm-sum.m-changed { background: var(--warn-soft); color: var(--warn-ink); }
.plm-difftools { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.plm-vs { margin: 0; font-variant-numeric: tabular-nums; }
.plm-ref { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 0 14px 12px; }
.plm-ref > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 650; }
.plm-ref[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }

/* ------------------------------------------------------------ change order page */
.plm-banners { display: grid; gap: 8px; margin-bottom: 12px; }
.plm-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); font-size: 13.5px; }
.plm-banner > .ico { color: var(--info-ink); margin-top: 2px; }
.plm-banner > div { flex: 1; min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; justify-items: start; }
.plm-banner.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); }
.plm-banner.warn > .ico { color: var(--warn-ink); }
.plm-banner.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.plm-banner.ok > .ico { color: var(--ok-ink); }
.plm-banner.neutral { background: var(--panel-3); border-color: var(--line); }
.plm-approvals { margin-bottom: 8px; padding: 0 14px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); }
.plm-appr-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.plm-appr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plm-appr-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.plm-appr-row.d-approved { box-shadow: inset 3px 0 0 var(--ok); }
.plm-appr-row.d-refused { box-shadow: inset 3px 0 0 var(--danger); }
[dir="rtl"] .plm-appr-row.d-approved { box-shadow: inset -3px 0 0 var(--ok); }
[dir="rtl"] .plm-appr-row.d-refused { box-shadow: inset -3px 0 0 var(--danger); }
.plm-appr-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.plm-appr-note { overflow-wrap: anywhere; }
.plm-appr-status { margin: 10px 0 0; font-weight: 650; }
.plm-appr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
:root:root .plm-appr-actions .btn { min-height: 44px; }

.plm-tabs { display: flex; gap: 4px; margin-top: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.plm-tab { flex: 0 0 auto; min-height: 44px; padding-inline: 16px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.plm-tab:hover { color: var(--ink); }
.plm-tab.on { color: var(--accent-d); border-bottom-color: var(--accent); }
.plm-panel { padding-top: 12px; min-width: 0; }

/* the versions chain */
.plm-vlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plm-vitem { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.plm-vitem.active { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.plm-vitem.here { box-shadow: inset 3px 0 0 var(--accent); }
[dir="rtl"] .plm-vitem.here { box-shadow: inset -3px 0 0 var(--accent); }
.plm-vnum { flex: 0 0 auto; min-width: 44px; text-align: center; font-weight: 800; font-size: 16px; color: var(--accent-d); unicode-bidi: isolate; }
.plm-vmain { flex: 1; min-width: 0; display: grid; gap: 4px; overflow-wrap: anywhere; }
.plm-vhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* the new change order dialog */
.plm-bomlist { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; margin-block: 8px; }
.plm-bomrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: inherit; text-align: start; cursor: pointer; }
.plm-bomrow:hover:not(:disabled) { border-color: var(--accent); }
.plm-bomrow.on { border-color: var(--accent); background: var(--accent-soft); }
.plm-bomrow:disabled { opacity: .6; cursor: not-allowed; }
.plm-bomrow-main { display: grid; gap: 2px; min-width: 0; }
.plm-chosen { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--ok-soft); color: var(--ok-ink); }
.plm-empty { padding: 12px; text-align: center; }

/* bottom action bar of the change order page on phones */
.plm-mbar { display: none; }

/* ------------------------------------------------------------ tablet */
@media (max-width: 1024px) { .plm-kb .kb-col { flex-basis: 260px; } }

/* ------------------------------------------------------------ phone */
@media (max-width: 720px) {
  .plm-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .plm-bar .search-box { grid-column: 1 / -1; max-width: none; }
  .plm-bar > .grow, .plm-bar > .icon-btn { display: none; }
  .plm-bar > .chip-select, .plm-bar > .btn, .plm-bar > .segmented { min-width: 0; width: 100%; min-height: 44px; }
  .plm-bar > .segmented .seg { flex: 1; min-height: 44px; }
  .plm-kb .kb-board { scroll-snap-type: x mandatory; scroll-padding-inline: 4px; }
  .plm-kb .kb-col { flex-basis: 86%; max-width: 86%; }
  .plm-stage-sel { display: block; }
  .plm-table thead { display: none; }
  .plm-table, .plm-table tbody, .plm-table tr, .plm-table td { display: block; width: 100%; }
  .plm-table tr { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-2); padding: 6px 10px; margin-bottom: 8px; }
  .plm-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border: 0; text-align: end; min-height: 36px; }
  .plm-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; text-align: start; flex: 0 0 auto; }
  .plm-table td[data-label=""]::before, .plm-table td:not([data-label])::before { content: none; }
  .plm-table td > * { min-width: 0; }
  .plm-table tr.plm-r-removed > td:not(:first-child) { text-decoration: none; }
  .plm-edit td, .plm-edit td:first-child, .plm-edit td.plm-instr-cell { min-width: 0; }
  .plm-edit td:first-child, .plm-edit td.plm-instr-cell { display: block; text-align: start; }
  .plm-edit td:first-child::before, .plm-edit td.plm-instr-cell::before { display: block; margin-bottom: 4px; }
  .plm-edit td input:not([type=checkbox]), .plm-edit td select { max-width: 60%; }
  .plm-table .plm-del { width: 100%; justify-content: flex-end; }
  .plm-table td.plm-c-main { display: block; text-align: start; }
  .plm-table td.plm-c-main::before { content: none; }
  .plm-list .list-body .data-table td.plm-c-act { display: flex; justify-content: flex-end; }
  :root:root .plm-row-actions .icon-btn, :root:root .plm-del .icon-btn { width: 44px; height: 44px; }
  .plm-difftools { justify-content: stretch; }
  .plm-difftools .segmented { width: 100%; }
  .plm-difftools .seg { flex: 1; min-height: 44px; }
  .plm-vitem { flex-wrap: wrap; }
  .plm-banner { flex-wrap: wrap; }
  .plm-doc { padding-bottom: 76px; }
  .plm-doc .dh-actions { display: none; }
  .plm-mbar { display: flex; gap: 8px; position: fixed; inset-inline: 0; bottom: var(--bn-h); z-index: 30; padding: 10px max(14px, env(safe-area-inset-left)); background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
  :root:root .plm-mbar .btn { flex: 1 1 0; min-width: 0; min-height: 48px; font-size: 15px; padding-inline: 8px; }
  :root:root .plm-mbar .btn.btn-danger-ghost { flex: 0 0 52px; }
  .plm-mbar .btn.btn-danger-ghost > span:not(.ico) { display: none; }
  :root:root .plm-appr-actions .btn { flex: 1 1 calc(50% - 6px); }
}
@media (max-width: 900px) and (max-height: 520px) { .plm-mbar { bottom: 0; } }