.procurement-module { height: 100vh; min-height: 560px; overflow: hidden; background: var(--paper); }
.procurement-workspace { display: grid; height: 100%; grid-template-columns: var(--queue-width) minmax(0, 1fr); }
.procurement-list-panel { display: grid; min-width: 0; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto; gap: 10px; padding: 16px 14px 12px; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
.procurement-queue-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.procurement-record-list { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.procurement-record-card { display: grid; width: 100%; gap: 5px; margin: 0 0 6px; padding: 10px 11px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); color: var(--ink); text-align: left; transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-normal) var(--ease-out); }
.procurement-record-card:hover { border-color: #9fc8ed; background: #f8fbff; transform: translateY(-1px); }
.procurement-record-card.selected { border-color: #58a8ef; background: var(--surface-selected); }
.procurement-record-card.urgent:not(.selected) { border-color: #efb3a8; background: #fff9f8; }
.record-card-top, .record-card-bottom { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.record-card-top > span { display: inline-flex; align-items: center; gap: 5px; }
.record-card-top > strong { font-size: 16px; }
.procurement-record-card > b { overflow: hidden; color: #344054; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.procurement-record-card > small { overflow: hidden; color: #475467; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.record-card-bottom { color: var(--muted); font-size: 13px; }
.record-card-bottom em { font-style: normal; }
.status-pill.status-pending, .status-pill.status-ordered, .status-pill.status-supplier_processing, .status-pill.status-received, .status-pill.status-cancelled,
.procurement-record-card .status-pill { min-height: 22px; padding: 0 8px; border: 0; font-size: 13px; }
.status-pill.status-pending { background: var(--amber-soft); color: var(--amber); }
.status-pill.status-ordered { background: var(--blue-soft); color: #075eaa; }
.status-pill.status-supplier_processing { background: #f2ecff; color: #6941c6; }
.status-pill.status-received { background: var(--green-soft); color: var(--green); }
.status-pill.status-cancelled { background: var(--red-soft); color: var(--red); }
.urgent-pill { display: inline-flex; min-height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; background: var(--red); color: white; font-size: 13px; font-style: normal; font-weight: 700; }

.procurement-detail-panel { min-width: 0; height: 100%; overflow: hidden; background: var(--paper); isolation: isolate; }
.procurement-detail-content { display: grid; height: 100%; min-width: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.procurement-detail-header { display: flex; min-width: 0; min-height: 82px; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.procurement-detail-header > div:first-child { min-width: 0; }
.procurement-detail-header h2 { margin: 4px 0 0; overflow: hidden; font-size: 26px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.copy-email { display: block; max-width: 100%; margin: 4px 0 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--muted); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.copy-email:not(:disabled):hover { color: var(--blue); text-decoration: underline; }
.detail-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; }
.detail-header-actions a, .detail-header-actions button { display: inline-flex; min-height: 42px; align-items: center; padding: 0 12px; border-radius: var(--radius-control); font-size: 15px; font-weight: 700; text-decoration: none; }
.detail-header-actions button { border: 0; background: var(--blue); color: white; }
.procurement-detail-scroll { min-height: 0; overflow-y: auto; scrollbar-gutter: stable; }
.procurement-detail-layout { display: grid; min-width: 0; grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr); align-items: start; gap: 16px; padding: 14px 20px 22px; }
.procurement-detail-column { display: grid; min-width: 0; align-content: start; gap: 16px; }
.procurement-full-row { grid-column: 1 / -1; }
.urgent-context { display: flex; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid #efb3a8; border-radius: var(--radius-control); background: #fff6f4; color: #9f2f1c; }
.urgent-context strong { flex: 0 0 auto; font-size: 14px; }
.urgent-context span { font-size: 14px; line-height: 1.45; }
.handoff-count { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border-radius: 999px; background: var(--blue-soft); color: #075eaa; font-size: 13px; font-weight: 700; white-space: nowrap; }
.handoff-priority-grid { display: grid; gap: 12px; padding: 14px; }
.handoff-review-note, .handoff-extra-products { border: 1px solid #f2c36c; border-radius: var(--radius-control); background: #fffaf0; }
.handoff-review-note { padding: 13px; }
.handoff-review-note span, .handoff-section-title span { display: block; color: #8a4808; font-size: 13px; font-weight: 700; }
.handoff-review-note strong { display: block; margin-top: 7px; overflow-wrap: anywhere; color: #4b2b0b; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.handoff-extra-products { padding: 12px; }
.handoff-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.handoff-section-title small { color: #8a5c20; font-size: 13px; text-align: right; }
.handoff-empty { margin: 10px 0 0; color: #8a5c20; font-size: 14px; }
.handoff-extra-list { display: grid; gap: 7px; margin-top: 10px; }
.handoff-extra-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 9px 10px; border: 1px solid #f1dfba; border-radius: 8px; background: #fff; }
.handoff-extra-list article div { min-width: 0; }
.handoff-extra-list article strong, .handoff-extra-list article small { display: block; overflow-wrap: anywhere; }
.handoff-extra-list article strong { font-size: 14px; }
.handoff-extra-list article small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.handoff-extra-list article > span { display: inline-flex; align-items: center; align-self: start; min-height: 22px; padding: 0 8px; border-radius: 999px; background: var(--amber-soft); color: #8a4808; font-size: 13px; font-weight: 700; }
.handoff-extra-list article > p { grid-column: 1 / -1; margin: 3px 0 0; color: #69451b; font-size: 13px; line-height: 1.45; }
.procurement-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--surface-muted); }
.procurement-context-grid > div { min-width: 0; padding: 10px 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.procurement-context-grid > div:nth-child(3n) { border-right: 0; }
.procurement-context-grid > .wide { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
.procurement-context-grid span, .procurement-cost-strip span { display: block; color: var(--muted); font-size: 13px; }
.procurement-context-grid strong { display: block; margin-top: 5px; overflow-wrap: anywhere; font-size: 14px; }

.procurement-card { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.procurement-card > header { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.procurement-card h3 { margin: 0; font-size: 18px; }
.procurement-card header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.procurement-card header button { min-height: 42px; padding: 0 12px; border-radius: var(--radius-control); font-size: 15px; font-weight: 700; }
.procurement-card header [data-role="saveStatus"] { color: var(--green); font-size: 14px; font-weight: 600; }
.procurement-card header [data-role="saveStatus"][data-mode="saving"] { color: var(--amber); }
.procurement-card header [data-role="saveStatus"][data-mode="error"] { color: var(--red); }
.procurement-cost-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.procurement-cost-strip > div { padding: 10px 13px; border-right: 1px solid var(--line); }
.procurement-cost-strip > div:last-child { border-right: 0; }
.procurement-cost-strip strong { display: block; margin-top: 4px; font-size: 15px; }
.cost-warning { margin: 0; padding: 9px 13px; border-bottom: 1px solid #f4cf89; background: var(--amber-soft); color: #8a4808; font-size: 13px; }
.procurement-items-card { min-width: 0; }
.procurement-item-groups { display: grid; min-width: 0; gap: 14px; padding: 14px; }
.procurement-item-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.procurement-item-group > header { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--surface-muted); }
.procurement-item-group > header h4 { margin: 0; font-size: 15px; }
.procurement-item-group > header p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.procurement-item-group > header > span { display: inline-flex; min-height: 23px; align-items: center; padding: 0 8px; border-radius: 999px; background: #eef2f6; color: #475467; font-size: 13px; font-weight: 700; }
.procurement-item-group.review-extra-group { border-color: #f0c36f; }
.procurement-item-group.review-extra-group > header { background: #fffaf0; }
.procurement-item-group.review-extra-group > header > span { background: var(--amber-soft); color: #8a4808; }
.procurement-item-group.legacy-custom-group > header { background: #f7f4fb; }
.procurement-item-list { display: grid; min-width: 0; }
.procurement-item-row { display: grid; min-width: 0; grid-template-columns: minmax(210px, 1.45fr) minmax(170px, 1.15fr) minmax(160px, 1fr) 84px 84px minmax(125px, .75fr) minmax(140px, .85fr); align-items: start; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.procurement-item-row:first-child { border-top: 0; }
.procurement-item-row > div, .procurement-item-row > label { min-width: 0; }
.procurement-item-row strong, .procurement-item-row small, .procurement-item-row b, .procurement-item-row a, .procurement-item-row span { display: block; overflow-wrap: anywhere; }
.procurement-item-row strong { margin-top: 5px; font-size: 14px; }
.procurement-item-row small { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.procurement-item-row a { margin-top: 5px; color: var(--blue); font-size: 13px; text-decoration: none; }
.procurement-item-row > label, .procurement-item-spec, .procurement-item-supplier { display: grid; gap: 5px; }
.procurement-item-row > label > span, .procurement-item-spec > span, .procurement-item-supplier > span { color: var(--muted); font-size: 13px; font-weight: 600; }
.procurement-item-row b { font-size: 14px; line-height: 1.45; }
.procurement-item-row input { width: 100%; min-height: 36px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 7px; color: var(--ink); background: var(--surface); }
.procurement-items-empty { margin: 0; padding: 28px 14px; color: var(--muted); text-align: center; }
.procurement-timeline-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 14px; border-bottom: 1px solid var(--line); }
.procurement-timeline-form textarea { width: 100%; min-height: 68px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px; resize: vertical; }
.procurement-timeline-list { display: grid; gap: 8px; padding: 14px; }
.procurement-timeline-entry { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 3px 12px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.procurement-timeline-entry time,
.procurement-timeline-entry small { color: var(--muted); font-size: 13px; }
.procurement-timeline-entry p,
.procurement-timeline-entry small { grid-column: 2; margin: 0; white-space: pre-wrap; }
.source-pill { display: inline-flex; min-height: 20px; align-items: center; padding: 0 7px; border-radius: 999px; background: #eef2f6; color: #475467; font-size: 13px; font-weight: 600; }

.procurement-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; padding: 14px; }
.procurement-form.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.procurement-form label { display: grid; min-width: 0; gap: 5px; color: #344054; font-size: 14px; font-weight: 600; }
.procurement-form label.wide, .procurement-form .wide { grid-column: 1 / -1; }
.procurement-form input, .procurement-form select, .procurement-form textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); }
.procurement-form textarea { resize: vertical; }
.procurement-form label > a { justify-self: start; color: var(--blue); font-size: 13px; text-decoration: none; }
.form-actions { display: flex; justify-content: flex-end; }
.form-actions button, .primary-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: var(--radius-control); background: var(--blue); color: white; font-weight: 700; }
.danger-outline-button { min-height: 38px; padding: 0 14px; border: 1px solid #efb3a8; border-radius: var(--radius-control); background: var(--red-soft); color: var(--red); font-weight: 700; }

.procurement-action-bar { position: relative; z-index: 6; display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 20px; border-top: 1px solid var(--line); background: rgba(255,255,255,.98); }
.procurement-action-bar > span { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; }
.procurement-action-bar > span i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.procurement-action-bar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.procurement-action-bar button { min-height: 38px; padding: 0 14px; border-radius: var(--radius-control); font-weight: 700; }

@media (max-width: 1180px) {
  .procurement-detail-layout { grid-template-columns: 1fr; }
  .procurement-full-row { grid-column: auto; }
  .procurement-item-row { grid-template-columns: minmax(210px, 1.4fr) minmax(170px, 1.1fr) minmax(160px, 1fr) repeat(3, minmax(100px, .65fr)); }
  .procurement-item-notes { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .procurement-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-context-grid > div:nth-child(3n) { border-right: 1px solid var(--line); }
  .procurement-context-grid > div:nth-child(2n) { border-right: 0; }
  .procurement-context-grid > .wide { border-right: 0; }
  .procurement-item-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-item-identity, .procurement-item-spec, .procurement-item-supplier, .procurement-item-notes { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .procurement-module { height: auto; min-height: 100vh; overflow: visible; }
  .procurement-workspace { grid-template-columns: 1fr; height: auto; }
  .procurement-list-panel { min-height: 520px; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .procurement-record-list { max-height: 52vh; }
  .procurement-detail-panel, .procurement-detail-content { height: auto; min-height: 70vh; overflow: visible; }
  .procurement-detail-scroll { overflow: visible; }
  .procurement-detail-layout { padding-inline: 12px; }
  .procurement-action-bar { position: sticky; bottom: 0; z-index: 10; }
  .procurement-cost-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-cost-strip > div:nth-child(2) { border-right: 0; }
  .procurement-cost-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .procurement-item-groups { padding: 10px; }
}
@media (max-width: 520px) {
  .procurement-detail-header { align-items: flex-start; padding-inline: 12px; }
  .detail-header-actions { align-items: flex-end; flex-direction: column; }
  .procurement-context-grid, .procurement-form, .procurement-form.compact { grid-template-columns: 1fr; }
  .procurement-context-grid > div, .procurement-context-grid > div:nth-child(2n), .procurement-context-grid > div:nth-child(3n) { border-right: 0; }
  .handoff-section-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .handoff-section-title small { text-align: left; }
  .procurement-form label.wide, .procurement-form .wide { grid-column: auto; }
  .procurement-item-row { grid-template-columns: 1fr; }
  .procurement-item-identity, .procurement-item-spec, .procurement-item-supplier, .procurement-item-notes { grid-column: auto; }
  .procurement-item-group > header { align-items: flex-start; }
  .procurement-action-bar { display: grid; }
  .procurement-action-bar > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procurement-timeline-form,
  .procurement-timeline-entry { grid-template-columns: 1fr; }
  .procurement-timeline-entry p,
  .procurement-timeline-entry small { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .procurement-record-card { transition-duration: .01ms; }
}