/*
  Export desk: the same stone ground and ink as the site, set denser and quieter.
  Vermilion marks only the seal and the active selection (selected row, active stage).
*/
body.adm { font-size: 0.9375rem; line-height: 1.45; overflow-x: visible; }
@media (max-width: 639.98px) { html { font-size: 16px; } }

.adm-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 10px 24px; border-bottom: 1px solid var(--rule); min-height: 60px; box-sizing: border-box;
}
.adm-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 44px; }
.adm-brand .seal { width: 22px; height: 33px; font-size: 14px; border-width: 1.5px; border-radius: 2px; }
.adm-brand .wordmark { font-size: 17px; }
.adm-app { font-size: 0.9375rem; color: var(--ink-2); padding-left: 10px; border-left: 1px solid var(--rule); }
.adm-nav { display: flex; gap: 4px; }
.adm-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); text-decoration: none; }
.adm-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.adm-nav a[aria-current] { font-weight: 600; }
.adm-user { margin-left: auto; display: flex; gap: 14px; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.adm-who { color: var(--ink); }

.adm-main { max-width: 1600px; margin: 0 auto; padding: 24px 24px 64px; box-sizing: border-box; }
.adm-sec + .adm-sec { margin-top: 56px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; }
.adm-h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.adm-total { font-size: 0.9375rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* stage strip */
.stages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule-soft); }
.stage {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; text-align: left;
  padding: 12px 14px 12px 12px; min-height: 76px; color: var(--ink); background: transparent; position: relative;
  border-right: 1px solid var(--rule-soft); transition: background-color var(--t-fast) var(--ease-out);
}
.stage:last-child { border-right: 0; }
.stage:hover { background: rgb(255 255 255 / 0.25); }
.st-name { font-size: 0.8125rem; color: var(--ink-2); }
.st-n { grid-row: 1 / span 2; grid-column: 2; font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.st-sub { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stage[aria-pressed='true'] { background: rgb(255 255 255 / 0.4); }
.stage[aria-pressed='true'] .st-name { color: var(--ink); font-weight: 600; }
.stage[aria-pressed='true']::before { content: ''; position: absolute; left: 12px; top: -4px; width: 8px; height: 8px; background: var(--seal); }

.adm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 10px; }
.adm-search { flex: 0 1 360px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ink-3); background: var(--paper); font-size: 0.9375rem; border-radius: 0; }
.adm-search:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.adm-shown { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.inq-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1024px) { .inq-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (min-width: 1360px) { .inq-layout { grid-template-columns: minmax(0, 1fr) 400px; } }

/* tables */
.adm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.adm-table thead th { text-align: left; font-size: 0.8125rem; font-weight: 400; color: var(--ink-2); padding: 0 10px 8px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.adm-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.adm-table .num { text-align: right; }
.adm-table tfoot th, .adm-table tfoot td { padding: 10px 10px 0 0; font-weight: 600; text-align: left; border-top: 1px solid var(--ink); }
.adm-table tfoot .num { text-align: right; }
.adm-table strong { font-weight: 600; display: block; }
.rsub, .rdate { display: block; font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 760px) { .inq-table .rdate { display: inline; } }
.inq-table tbody tr { cursor: pointer; transition: background-color var(--t-fast) var(--ease-out); }
.inq-table tbody tr:hover { background: rgb(255 255 255 / 0.25); }
.inq-table tbody tr.is-selected { background: rgb(255 255 255 / 0.5); }
.row-open { padding: 0; min-height: 24px; color: var(--ink); font-weight: 600; text-align: left; font-variant-numeric: tabular-nums; }
.row-open:hover .rid { text-decoration: underline; text-underline-offset: 0.25em; }
.inq-table tr.is-selected .rid::before { content: ''; display: inline-block; width: 7px; height: 7px; background: var(--seal); margin-right: 7px; vertical-align: 1px; }
.adm-empty { padding: 24px 0; color: var(--ink-2); }

.pill { display: inline-block; font-size: 0.8125rem; line-height: 1; padding: 5px 8px; border: 1px solid var(--ink); white-space: nowrap; }
.pill--new { border-style: dashed; }
.pill--quoted { border-color: var(--ink-3); }
.pill--deposit { background: var(--stone); border-color: var(--stone-2); }
.pill--production { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink); }
.pill--shipped { background: var(--ink); color: var(--on-ink); }
.pill--ship-booked { border-style: dashed; }
.pill--ship-in-production { border-color: var(--ink-3); }
.pill--ship-loading { background: var(--stone); border-color: var(--stone-2); }
.pill--ship-at-sea { background: var(--ink-2); border-color: var(--ink-2); color: var(--on-ink); }
.pill--ship-arrived { background: var(--ink); color: var(--on-ink); }

/* detail panel */
.inq-detail { border: 1px solid var(--rule-mid); background: rgb(255 255 255 / 0.3); padding: 20px; position: sticky; top: 16px; outline: none; }
.inq-detail:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.dt-head { position: relative; padding-right: 64px; }
.dt-id { font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dt-co { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin-top: 4px; }
.dt-sub { color: var(--ink-2); margin-top: 2px; }
.dt-close { display: none; position: absolute; right: 0; top: -6px; min-height: 44px; min-width: 44px; text-decoration: underline; text-underline-offset: 0.3em; color: var(--ink); }
ol.stepper { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.stepper li { font-size: 0.75rem; color: var(--ink-2); display: grid; gap: 6px; line-height: 1.2; }
.stepper li::before { content: ''; height: 6px; border: 1px solid var(--ink-3); }
.stepper li.is-done::before { background: var(--ink); border-color: var(--ink); }
.stepper li.is-now::before { background: var(--seal); border-color: var(--seal); }
.stepper li.is-now { color: var(--ink); font-weight: 600; }
.dt-facts { margin: 18px 0 0; }
.dt-facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--rule-soft); }
.dt-facts dt { font-size: 0.8125rem; color: var(--ink-2); }
.dt-facts dd { margin: 0; font-variant-numeric: tabular-nums; }
.dt-note { margin-top: 14px; padding: 12px 0 0; border-top: 1px solid var(--ink); }
ul.dt-log { list-style: none; margin: 12px 0 0; padding: 0; font-size: 0.8125rem; color: var(--ink-2); display: grid; gap: 4px; }
.dt-acts { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 18px; }
.dt-acts .btn { min-height: 44px; }
.dt-final { color: var(--ink-2); }
.dt-sheet { min-height: 44px; display: inline-flex; align-items: center; }
.dt-empty { color: var(--ink-2); }

/* phones and tablets: tables become cards, the detail becomes a sheet */
@media (max-width: 1023.98px) {
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage:nth-child(3n) { border-right: 0; }
  .stage { border-bottom: 1px solid var(--rule-soft); }
  .inq-detail { display: none; position: fixed; inset: 0; z-index: 60; overflow: auto; background: var(--ground) url('../img/paper.png') repeat; background-size: 256px 152px; border: 0; padding: 20px; }
  .inq-detail.is-open { display: block; }
  .dt-close { display: inline-flex; align-items: center; justify-content: center; }
  body.sheet-open { overflow: hidden; }
}
@media (max-width: 760px) {
  .adm-top { padding: 8px 16px; gap: 4px 16px; }
  .adm-user { margin-left: 0; width: 100%; font-size: 0.8125rem; }
  .adm-app { display: none; }
  .adm-main { padding: 16px 16px 48px; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage:nth-child(3n) { border-right: 1px solid var(--rule-soft); }
  .stage:nth-child(2n) { border-right: 0; }
  .adm-search { flex-basis: 100%; }
  .adm-table thead { display: none; }
  .adm-table, .adm-table tbody, .adm-table tfoot, .adm-table tr, .adm-table td, .adm-table th { display: block; }
  .adm-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-mid); }
  .adm-table td { border: 0; padding: 0; text-align: left; }
  .adm-table td.num { text-align: left; }
  .adm-table td::before { content: attr(data-label); display: block; font-size: 0.75rem; color: var(--ink-2); margin-bottom: 1px; }
  /* inquiry card: id and date / stage; company; three figures; series and port */
  .inq-table tbody tr { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'id id stage' 'co co co' 'mw ctr val' 'ser ser port'; gap: 8px 12px; }
  .inq-table td[data-label='Inquiry'] { grid-area: id; display: flex; align-items: baseline; gap: 10px; }
  .inq-table td[data-label='Stage'] { grid-area: stage; justify-self: end; align-self: center; }
  .inq-table td[data-label='Company'] { grid-area: co; }
  .inq-table td[data-label='MW'] { grid-area: mw; }
  .inq-table td[data-label='40HC'] { grid-area: ctr; }
  .inq-table td[data-label='Value'] { grid-area: val; }
  .inq-table td[data-label='Series'] { grid-area: ser; }
  .inq-table td[data-label='Port'] { grid-area: port; text-align: right; }
  .inq-table td[data-label='Inquiry']::before, .inq-table td[data-label='Company']::before, .inq-table td[data-label='Stage']::before,
  .inq-table td[data-label='Series']::before, .inq-table td[data-label='Port']::before { display: none; }
  .inq-table td[data-label='Series'], .inq-table td[data-label='Port'] { font-size: 0.875rem; color: var(--ink-2); }
  .inq-table td[data-label='MW'], .inq-table td[data-label='40HC'], .inq-table td[data-label='Value'] { font-size: 1.0625rem; font-weight: 600; }
  .row-open { min-height: 44px; display: inline-flex; align-items: center; }
  /* shipment card: order / status; company; 40HC, port, sea days; ETD, ETA */
  .shp-table tbody tr { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'ord ord st' 'co co co' 'ser ser ser' 'ctr port days' 'etd eta eta'; gap: 8px 12px; }
  .shp-table td[data-label='Order'] { grid-area: ord; }
  .shp-table td[data-label='Status'] { grid-area: st; justify-self: end; align-self: center; }
  .shp-table td[data-label='Company'] { grid-area: co; }
  .shp-table td[data-label='40HC'] { grid-area: ctr; }
  .shp-table td[data-label='Port'] { grid-area: port; }
  .shp-table td[data-label='Sea days'] { grid-area: days; }
  .shp-table td[data-label='Series'] { grid-area: ser; }
  .shp-table td[data-label='ETD Ningbo'] { grid-area: etd; }
  .shp-table td[data-label='ETA'] { grid-area: eta; }
  .shp-table td[data-label='Order']::before, .shp-table td[data-label='Status']::before, .shp-table td[data-label='Company']::before { display: none; }
  .adm-table tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--ink); }
  .adm-table tfoot th, .adm-table tfoot td { border: 0; padding: 0; }
  .adm-table tfoot td:empty { display: none; }
  .adm-table tfoot td::before { display: none; }
}