/* ==========================================================================
   Procurement workspace: RFQs, quotations, negotiation, purchase orders,
   templates, vessels, reports, benchmarks, messages, notifications.
   Plain CSS on the Swiss tokens (app/assets/tailwind/application.css).
   One structure for every screen:
     .ws            vertical rhythm for the page
     .ws-head       back link · kicker · 40px title · grey line · actions
     .ws-facts      key facts as a hairline strip of label/value pairs
     .ws-sec        a section: label in cols 1–3, content in cols 4–12
   ========================================================================== */

.ws { display: grid; gap: var(--s-8); min-width: 0; }
.ws > * { min-width: 0; }
.ws--narrow { max-width: 64rem; }

/* Back link above the title */
.ws-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.ws-back:hover { color: var(--ink); }

/* Page head */
.ws-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-6); }
.ws-head__main { flex: 1 1 32rem; min-width: 0; }
.ws-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-4); margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.app-content .ws-head h1 { margin: 0; }
.ws-head__sub { margin-block-start: var(--s-3); max-width: 44em; color: var(--grey-text); }
.ws-head__sub a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ws-head .btn-row { flex: 0 1 auto; min-width: 0; }

/* Facts strip: label over value, hairline above each */
.ws-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--s-5) var(--col-gap); margin: 0; }
.ws-facts > div { display: grid; gap: 4px; align-content: start; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); }
.ws-facts dt { font-size: var(--t-s); color: var(--grey-text); }
.ws-facts dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ws-facts--lead dd { font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }

/* Section: heading row above the content (title + count on the left,
   optional action on the right), hairline above. A familiar app pattern
   that gives tables and forms the full content width. */
.ws-sec { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); }
.ws-sec__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-3); margin: 0; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); line-height: 1.3; }
.ws-sec__label small { font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.ws-sec__label p { flex-basis: 100%; max-width: 44em; margin: 0; font-size: var(--t-s); font-weight: 400; letter-spacing: var(--track-body); color: var(--grey-text); }
.ws-sec__body { min-width: 0; }
.ws-sec__body > * + * { margin-block-start: var(--s-5); }
.ws-sec--flush .ws-sec__body > .table-wrap:first-child { border-top: 0; }
.ws-sec__tools { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }

/* Detail layout: main column + summary sidebar (sticky on desktop) */
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: var(--s-8) var(--s-8); align-items: start; }
.ws-layout__main { display: grid; gap: var(--s-8); min-width: 0; }
.ws-layout__aside { display: grid; gap: var(--s-5); position: sticky; top: calc(var(--header-h) + var(--s-5)); min-width: 0; }
@media (max-width: 63.99rem) {
  .ws-layout { grid-template-columns: minmax(0, 1fr); }
  .ws-layout__aside { position: static; order: -1; }
}

/* Summary panel: hairline box with rows of label · value */
.ws-panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.ws-panel--field { background: #fafafa; }
.ws-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
.ws-panel__title { margin: 0; font-size: var(--t-body); font-weight: 500; }
.ws-panel__body { padding: var(--s-4) var(--s-5); }
.ws-panel__body > * + * { margin-block-start: var(--s-4); }
.ws-panel__total { display: grid; gap: 2px; padding: var(--s-5); border-bottom: 1px solid var(--rule); }
.ws-panel__total span { font-size: var(--t-s); color: var(--grey-text); }
.ws-panel__total b { font-size: var(--t-xl); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.ws-panel__actions { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); }
.ws-panel__actions form { display: grid; }
.ws-panel__actions .btn { width: 100%; }
.ws-panel__note { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.ws-dl { margin: 0; }
.ws-dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.ws-dl > div:last-child { border-bottom: 0; }
.ws-dl dt { flex: none; color: var(--grey-text); }
.ws-dl dd { margin: 0; text-align: end; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Vertical timeline (purchase orders, sidebar) */
.ws-timeline { margin: 0; padding: 0; list-style: none; }
.ws-timeline li { position: relative; display: flex; justify-content: space-between; gap: var(--s-3); padding: 0 0 var(--s-4) var(--s-5); font-size: var(--t-s); color: var(--grey-text); }
.ws-timeline li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--grey); background: var(--paper); }
.ws-timeline li::after { content: ""; position: absolute; left: 4px; top: 17px; bottom: 2px; width: 1px; background: var(--rule); }
.ws-timeline li:last-child { padding-bottom: 0; }
.ws-timeline li:last-child::after { display: none; }
.ws-timeline li.is-done, .ws-timeline li.is-current { color: var(--ink); }
.ws-timeline li.is-done::before { background: var(--ink); box-shadow: none; }
.ws-timeline li.is-current::before { background: var(--ink); box-shadow: 0 0 0 3px var(--field); }
.ws-timeline li.is-current { font-weight: 500; }
.ws-timeline small { font-size: var(--t-s); font-weight: 400; color: var(--grey-text); font-variant-numeric: tabular-nums; }

/* Status filter tabs above lists */
.ws-tabs { display: flex; gap: var(--s-6); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--rule); }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tabs a { display: inline-flex; flex: none; align-items: baseline; gap: 6px; min-height: 48px; padding-block: 13px 0; margin-bottom: -1px; border-bottom: 1px solid transparent; color: var(--grey-text); white-space: nowrap; }
.ws-tabs a:hover { color: var(--ink); }
.ws-tabs a[aria-current="page"] { color: var(--ink); border-color: var(--ink); }
.ws-tabs small { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.ws-tabs + .table-wrap, .ws-tabs + .ws-list { border-top: 0; }

/* Summary strip of numbers above lists */
.ws-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); border: 1px solid var(--rule); border-radius: var(--radius); }
.ws-stats > div { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); border-inline-start: 1px solid var(--rule); }
.ws-stats > div:first-child { border-inline-start: 0; }
.ws-stats b { font-size: var(--t-l); font-weight: 500; line-height: 1.15; letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.ws-stats span { font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 47.99rem) {
  .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-stats > div:nth-child(odd) { border-inline-start: 0; }
  .ws-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* Tables inside the workspace */
.ws .table-wrap { border-top: 1px solid var(--ink); }
.ws .data-table th, .ws .data-table td { padding-inline: 0 var(--s-5); }
.ws .data-table th:last-child, .ws .data-table td:last-child { padding-inline-end: 0; }
.ws .data-table td { padding-block: 14px; }
.ws .data-table .num { text-align: end; white-space: nowrap; }
.ws .data-table .muted { color: var(--grey-text); }
.ws .data-table .idx { width: 3rem; color: var(--grey-text); }
.ws .data-table tbody tr:hover { background: none; }
.ws .data-table tfoot td { border-bottom: 0; border-top: 1px solid var(--ink); padding-block: 14px; font-weight: 500; }
.ws-primary { font-size: var(--t-body); font-weight: 500; }
a.ws-primary:hover { color: var(--grey-text); }
.ws-sub { display: block; margin-block-start: 2px; font-size: var(--t-s); color: var(--grey-text); }
.data-table tr.is-flagged td:first-child { box-shadow: inset 2px 0 0 var(--signal); padding-inline-start: 12px; }

/* Row actions: text buttons, right aligned */
.ws-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px var(--s-5); }
.ws-actions form { display: contents; }
.ws-act { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink); font-size: var(--t-s); white-space: nowrap; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 200ms var(--ease); }
.ws-act:hover { text-decoration-color: currentColor; }
.ws-act--danger { color: var(--danger); }

/* Button row under a section or at the end of a form */
.ws .btn-row form { display: contents; }
.ws-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); }
.ws-foot .btn-row { flex: none; }
.ws-foot__note { flex: 1 1 16rem; font-size: var(--t-s); color: var(--grey-text); }

/* Forms */
.ws-form { display: grid; gap: var(--s-8); }
.ws-fields { display: grid; gap: var(--s-5) var(--s-6); }
@media (min-width: 48rem) {
  .ws-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-fields .field--full { grid-column: 1 / -1; }
}
.ws .field__label { display: block; }
.ws-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); cursor: pointer; }
.ws-check input { width: 18px; height: 18px; margin: 0; }

/* Line-item editor rows: description · qty · unit · notes · remove */
.ws-items { display: grid; }
.ws-items__head, .ws-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 3fr) 2.75rem; column-gap: var(--s-4); align-items: end; }
.ws-items__head { padding-block-end: var(--s-2); border-bottom: 1px solid var(--ink); font-size: var(--t-s); color: var(--grey-text); }
.ws-item { padding-block: 4px; }
.ws-item .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-item__remove { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--grey-text); cursor: pointer; }
.ws-item__remove:hover { color: var(--danger); }
.ws-item__remove svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }
@media (max-width: 47.99rem) {
  .ws-items__head { display: none; }
  .ws-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem; row-gap: 4px; padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
  .ws-item > :first-child { grid-column: 1 / -1; }
  .ws-item > :nth-child(4) { grid-column: 1 / span 2; }
  .ws-item .field__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}

/* Pricing table inputs (quotations, negotiation) */
.ws .data-table .input { min-height: 40px; padding-block: 6px; }
.ws .data-table .input--price { width: 8rem; text-align: end; }
.ws-note { max-width: 40em; padding-inline-start: var(--s-4); border-inline-start: 1px solid var(--ink); }
.ws-note__label { display: block; margin-block-end: 4px; font-size: var(--t-s); color: var(--grey-text); }

/* Parsed items (rfq-parser) */
[data-rfq-parser-target="items"] > div { display: flex !important; justify-content: space-between; gap: var(--s-4); padding: 10px 0 !important; border-bottom: 1px solid var(--rule); border-radius: 0 !important; background: none !important; }

/* Status labels in the procurement flow */
.status--awarded::before, .status--accepted::before, .status--completed::before, .status--delivered::before { background: var(--ink); }
.status--awarded, .status--accepted, .status--completed, .status--delivered { color: var(--ink); }

/* Progress (purchase order timeline) */
.ws-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--col-gap); margin: 0; padding: 0; list-style: none; }
.ws-steps li { display: grid; gap: 4px; padding-block-start: var(--s-3); border-top: 2px solid var(--rule); font-size: var(--t-s); color: var(--grey-text); }
.ws-steps li.is-done { border-top-color: var(--ink); color: var(--ink); }
.ws-steps li.is-current { border-top-color: var(--ink); color: var(--ink); font-weight: 500; }
.ws-steps small { font-size: var(--t-s); font-weight: 400; color: var(--grey-text); font-variant-numeric: tabular-nums; }
@media (max-width: 47.99rem) { .ws-steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .ws-steps li { grid-template-columns: 1fr auto; padding-block: 10px; border-top-width: 1px; } }

/* Messages */
.ws-thread { display: grid; gap: var(--s-5); }
.ws-msg { display: grid; gap: 6px; max-width: 40em; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); }
.ws-msg--mine { justify-self: end; border-top-color: var(--ink); }
.ws-msg__meta { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.ws-msg__meta b { font-weight: 500; color: var(--ink); }
.ws-msg__body { white-space: pre-line; }

/* List rows (conversations, notifications, templates, vessels) */
.ws-list { border-top: 1px solid var(--ink); }
.ws-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px var(--s-5); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); color: inherit; }
a.ws-row:hover .ws-row__title, .ws-row:has(a.ws-row__title:hover) .ws-row__title { color: var(--grey-text); }
.ws-row__title { font-weight: 500; transition: color 200ms var(--ease); }
.ws-row__sub { grid-column: 1; font-size: var(--t-s); color: var(--grey-text); }
.ws-row__aside { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--t-s); color: var(--grey-text); text-align: end; font-variant-numeric: tabular-nums; }
.ws-row--unread .ws-row__title::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 8px; border-radius: 50%; background: var(--ink); vertical-align: 0.15em; }

/* Numbers as type (reports) */
.ws-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--s-5) var(--col-gap); }
.ws-kpi { display: grid; gap: 4px; padding-block-start: var(--s-3); border-top: 1px solid var(--rule); }
.ws-kpi__value { font-size: var(--t-xl); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.ws-kpi__label { font-size: var(--t-s); color: var(--grey-text); }

/* Horizontal bars (reports): label · bar · value */
.ws-bars { display: grid; }
.ws-bar { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); min-height: 44px; border-bottom: 1px solid var(--rule); font-size: var(--t-s); }
.ws-bar__track { height: 6px; background: var(--field); }
.ws-bar__fill { height: 100%; background: var(--ink); }
.ws-bar__value { font-variant-numeric: tabular-nums; text-align: end; }
@media (max-width: 47.99rem) { .ws-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; padding-block: 8px; } .ws-bar__track { grid-column: 1 / -1; grid-row: 2; } }

/* Chart container (price_chart controller draws inline SVG) */
.ws-chart { height: 200px; }

/* Empty states stay inside the section grid */
.ws .empty-state { padding-block: var(--s-6); }
.ws .empty-state h2 { font-size: var(--t-m); }

/* Rating scale (supplier review): five 44px squares, ink when chosen */
.ws-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); margin: 0; padding: var(--s-4) 0; border: 0; border-bottom: 1px solid var(--rule); }
.ws-rating__label { float: left; padding: 0; font-weight: 500; }
.ws-scale { display: flex; gap: 6px; }
.ws-scale label { position: relative; cursor: pointer; }
.ws-scale input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ws-scale span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--radius); font-variant-numeric: tabular-nums; transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.ws-scale label:hover span { border-color: var(--ink); }
.ws-scale input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ws-scale input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Phones: tables keep a readable width and scroll inside their frame
   instead of squeezing descriptions to one word per line. */
@media (max-width: 47.99rem) {
  .ws .table-wrap { margin-inline-end: calc(var(--gutter) * -1); padding-inline-end: var(--gutter); }
  .ws .table-wrap .data-table { min-width: 38rem; }
  .ws .table-wrap .data-table--compact { min-width: 30rem; }
}
.ws-sec__body > .ws-list:first-child { border-top: 0; }

/* Chat: thread and composer in one hairline panel, bubbles left/right */
.ws-chat { display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ws-chat__list { display: flex; flex-direction: column; gap: var(--s-4); min-height: 22rem; max-height: 60vh; padding: var(--s-5); overflow-y: auto; }
.ws-chat__empty { margin: auto; color: var(--grey-text); }
.ws-bubble { max-width: min(36em, 85%); align-self: flex-start; }
.ws-bubble--mine { align-self: flex-end; text-align: end; }
.ws-bubble__meta { margin-block-end: 4px; font-size: var(--t-s); color: var(--grey-text); }
.ws-bubble__meta b { font-weight: 500; color: var(--ink); }
.ws-bubble__body { display: inline-block; padding: 10px 14px; border-radius: 12px 12px 12px 3px; background: var(--field); white-space: pre-line; text-align: start; }
.ws-bubble--mine .ws-bubble__body { border-radius: 12px 12px 3px 12px; background: var(--ink); color: var(--paper); }
.ws-chat__composer { display: flex; align-items: flex-end; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--rule); background: #fafafa; }
.app-content textarea.ws-chat__input.ws-chat__input { flex: 1; min-height: 44px; max-height: 12rem; padding: 10px 0; border: 0; resize: none; background: transparent; field-sizing: content; }
.app-content textarea.ws-chat__input.ws-chat__input:focus { border: 0; padding-bottom: 10px; }
@media (max-width: 63.99rem) { .ws-layout--chat .ws-layout__aside { order: 0; } }

/* Forms keep the settings-page pattern: section title and hint on the left
   (cols 1–4), fields on the right (cols 5–12). Easier to scan than
   full-width fields, and it reads like any familiar admin form. */
@media (min-width: 64rem) {
  .ws-form .ws-sec { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .ws-form .ws-sec__label { grid-column: 1 / span 4; display: block; font-size: var(--t-body); letter-spacing: var(--track-body); }
  .ws-form .ws-sec__label small { display: block; margin-block-start: 2px; }
  .ws-form .ws-sec__label p { margin-block-start: var(--s-2); }
  .ws-form .ws-sec__label p { max-width: 22em; }
  .ws-form .ws-sec__body { grid-column: 5 / -1; }
}
/* Sticky action bar at the end of long forms */
.ws-form > .ws-foot { position: sticky; bottom: 0; z-index: 5; margin-inline: calc(var(--gutter) * -1); padding: var(--s-4) var(--gutter); background: var(--scrim); border-top: 1px solid var(--rule); }

/* Section heading that carries a view switch (reports): the switch drops
   to its own line at body size. */
.ws-sec__label > h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.ws-sec__label > .chip-row { flex-basis: 100%; margin: 0; font-size: var(--t-body); font-weight: 400; letter-spacing: var(--track-body); }