/* Section 02 V2 — TRUE independent formal UI, built on QHC (Quick Health
   Check) presentation conventions.
   - `.s02v2-root` also carries `.qhc-module` (added by section02V2View.js)
     purely so it inherits QHC's global input/select/radio reset and its
     `.qhc-field` / `.qhc-choice*` / `.qhc-input-affix` / `.qhc-fixed-*`
     rules from quickHealthCheck.css — no QHC state, storage, or business
     logic is touched by doing this.
   - Everything below is genuinely new layout for markup that QHC has no
     equivalent for: primary nav, panels, list zone, order line items,
     mode lock/switch, order-source row, POS panel, business-info row. */

.s02v2-root {
  --s02v2-accent: #0f766e;
  --s02v2-ink: #17211d;
  --s02v2-muted: #64716b;
  --s02v2-line: #d7e3da;
  --s02v2-danger: #b3261e;
  padding: 10px 12px 12px;
}

.s02v2-root * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------- Primary nav */

.s02v2-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.s02v2-workforce-projection{border:1px solid var(--s02v2-line);border-radius:12px;margin-top:16px;min-width:0;overflow:hidden}
.s02v2-workforce-projection>summary{align-items:center;cursor:pointer;display:flex;gap:16px;justify-content:space-between;list-style:none;padding:14px 16px}
.s02v2-workforce-projection>summary::-webkit-details-marker{display:none}
.s02v2-workforce-projection>summary span:first-child{display:grid;gap:4px;min-width:0}
.s02v2-workforce-projection>summary strong{color:var(--s02v2-ink);font-size:1rem}
.s02v2-workforce-projection>summary small{color:var(--s02v2-muted);font-size:.82rem;line-height:1.45;overflow-wrap:anywhere}
.s02v2-workforce-projection[open]>summary>span:last-child{transform:rotate(180deg)}
.s02v2-workforce-projection__body{border-top:1px solid var(--s02v2-line);display:grid;gap:14px;padding:16px}
.s02v2-workforce-projection__dates{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,220px))}
.s02v2-workforce-projection__dates label{display:grid;gap:4px;min-width:0}
.s02v2-workforce-projection__dates span{color:var(--s02v2-muted);font-size:.78rem;font-weight:700}
.s02v2-workforce-projection__dates input{box-sizing:border-box;max-width:100%;min-width:0;width:100%}
.s02v2-workforce-projection__grid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.s02v2-workforce-projection__grid section{border:1px solid var(--s02v2-line);border-radius:10px;min-width:0;padding:12px}
.s02v2-workforce-projection__grid h4{font-size:.9rem;margin:0 0 8px}
.s02v2-workforce-projection__grid p,.s02v2-workforce-projection__grid dd{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.s02v2-workforce-projection__grid dl,.s02v2-workforce-projection__grid dl div{display:grid;gap:6px;margin:0}
.s02v2-workforce-projection__grid dl div{grid-template-columns:minmax(0,1fr) auto}
.s02v2-workforce-projection__grid dt{color:var(--s02v2-muted);font-size:.8rem;overflow-wrap:anywhere}
.s02v2-workforce-projection__warning{background:#fff7e6;border:1px solid #e7c986;border-radius:8px;color:#704b00;margin:0;padding:10px 12px}
.s02v2-workforce-projection__source{color:var(--s02v2-accent);font-size:.86rem;font-weight:800;width:max-content;max-width:100%}
@media(max-width:520px){.s02v2-workforce-projection__dates,.s02v2-workforce-projection__grid{grid-template-columns:minmax(0,1fr)}.s02v2-workforce-projection>summary,.s02v2-workforce-projection__body{padding:12px}.s02v2-workforce-projection__grid dl div{grid-template-columns:minmax(0,1fr)}.s02v2-workforce-projection__source{overflow-wrap:anywhere;width:auto}}

.s02v2-primary-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.s02v2-primary-group-title {
  color: var(--s02v2-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 0;
}

.s02v2-primary-group--expense {
  margin-top: 16px;
}

.s02v2-primary-nav {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
  width: 100%;
}

.s02v2-primary-tab {
  background: #fffaf5;
  border: 1px solid var(--s02v2-line);
  border-radius: 10px;
  color: var(--s02v2-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  min-height: 48px;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  text-align: center;
  white-space: normal;
}

.s02v2-primary-tab[aria-selected="true"] {
  background: var(--s02v2-accent);
  border-color: var(--s02v2-accent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  color: #fff;
}

.s02v2-panel-slot {
  display: grid;
  min-width: 0;
  width: 100%;
}

.s02v2-panel-slot:empty {
  display: none;
}

.s02v2-panel-slot--income:not(:empty) {
  margin: 12px 0 0;
}

.s02v2-panel-slot--expense:not(:empty) {
  margin: 12px 0 0;
}

.s02v2-body {
  display: grid;
  min-width: 0;
}

/* Desktop: one visual row of four equal tabs, then the single active form. */
@media (min-width: 700px) {
  .s02v2-shell {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .s02v2-primary-group-title {
    display: none;
  }

  .s02v2-primary-group--income,
  .s02v2-primary-group--expense {
    display: grid;
    flex: 1 1 calc(50% - 4px);
    gap: 0;
    margin: 0;
    min-width: 0;
    order: 1;
  }

  .s02v2-primary-nav--pair {
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s02v2-panel-slot--income,
  .s02v2-panel-slot--expense {
    flex: 1 1 100%;
    margin: 4px 0 0;
    order: 2;
  }
}

/* -------------------------------------------------------------- Forms -- */

.s02v2-form {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.s02v2-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.s02v2-list-zone {
  margin-top: 4px;
}

.s02v2-list-zone .s02v2-record-list:empty,
.s02v2-list-zone .s02v2-list-empty {
  margin: 0;
  min-height: 0;
  padding: 0;
}

.s02v2-field-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field > .qhc-field,
.s02v2-purchase-field > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-other-expense-field {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-other-expense-field > .qhc-field,
.s02v2-other-expense-field > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-field-grid--compact,
.s02v2-order-meta,
.s02v2-purchase-meta {
  gap: 8px;
}

/*
 * Responsive field label (order number / purchase document number): the
 * full formal label shows by default; a shorter mobile variant replaces it
 * only under the mobile breakpoint below. The input's own `aria-label`
 * (see `plainInputFieldResponsiveLabel` in section02V2Ui.js) always carries
 * the full meaning for assistive tech, independent of which span is shown.
 */
.s02v2-field-label-short {
  display: none;
}

.s02v2-field-label-full {
  display: inline;
}

/* Order/purchase meta date: wrap + explicit calendar button (button visible on mobile only). */
.s02v2-meta-date-wrap {
  min-width: 0;
  position: relative;
  width: 100%;
}

.s02v2-meta-date-wrap > input[type="date"] {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.s02v2-meta-date-btn {
  display: none;
}

.s02v2-line-entry {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.s02v2-line-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.s02v2-line-row--product,
.s02v2-line-row--values {
  align-items: end;
}

.s02v2-line-field {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-line-field > .qhc-field,
.s02v2-line-field > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-line-add-wrap {
  align-items: end;
  display: flex;
  min-width: 0;
}

.s02v2-line-add {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

/* Shared purchase form layout (general desktop / mobile). */
.s02v2-purchase-layout {
  display: grid;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-row {
  display: grid;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field > .qhc-field,
.s02v2-purchase-field > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field--payment .s02v2-settlement--compact {
  border: 0;
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
}

.s02v2-purchase-field--payment .s02v2-settlement-title {
  color: var(--ink, #17211d);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

/* Mobile／narrow: nested equal pills inside the payment field. */
.s02v2-purchase-field--payment .s02v2-settlement-status.qhc-choice {
  align-items: stretch;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  width: 100%;
}

.s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option,
.s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option--compact {
  box-sizing: border-box;
  flex: 1 1 auto;
  height: 40px;
  justify-content: center;
  max-width: none;
  min-height: 40px;
  min-width: 0;
  padding: 6px 8px;
  width: 100%;
}

.s02v2-purchase-field--supplier .bp-picker,
.s02v2-purchase-field--supplier .s02v2-settlement-party {
  margin: 0;
  min-width: 0;
  width: 100%;
}

/* Match supplier title metrics to sibling category `.qhc-field > span`. */
.s02v2-purchase-field--supplier .s02v2-settlement-title {
  color: var(--ink, #17211d);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.s02v2-purchase-field--supplier .s02v2-settlement-party {
  gap: 3px;
}

.s02v2-form-actions--inline {
  align-items: end;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  height: 100%;
  margin-top: 0;
}

.s02v2-form-actions--inline .primary-action,
.s02v2-form-actions--inline .secondary-action {
  flex: 0 0 auto;
  min-height: 40px;
  white-space: nowrap;
  width: auto;
}

.s02v2-line-list .s02v2-line-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) auto auto;
  padding: 4px 0;
}

.s02v2-line-name,
.s02v2-line-qty {
  min-width: 0;
  overflow-wrap: anywhere;
}

.s02v2-line-amount {
  font-weight: 800;
  justify-self: end;
  white-space: nowrap;
}

.s02v2-line-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.s02v2-line-list .s02v2-record-sub {
  margin: 0;
}

.s02v2-line-list .s02v2-record-actions {
  margin-top: 2px;
}

@media (max-width: 699px) {
  .s02v2-line-list .s02v2-line-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .s02v2-line-qty {
    grid-column: 1 / 2;
  }

  .s02v2-line-amount {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .s02v2-line-actions-inline {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (min-width: 769px) {
  /* Order header meta reuses .s02v2-purchase-row--meta (date | doc | settlement). */

  /*
   * Sales line-entry: shared parent tracks so 数量 right = 添加到订单 right.
   * Columns = unit price | amount (wide money) | add button.
   * Product spans price+amount; quantity sits in the add track.
   */
  .s02v2-line-entry {
    column-gap: 12px;
    gap: 12px;
    grid-template-columns: minmax(6.5rem, 0.85fr) minmax(18rem, 2.8fr) max-content;
    row-gap: 12px;
  }

  .s02v2-line-row--product,
  .s02v2-line-row--values {
    align-items: end;
    column-gap: 12px;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: 8px;
  }

  .s02v2-line-row--product > .s02v2-line-field--product {
    grid-column: 1 / 3;
    min-width: 0;
  }

  .s02v2-line-row--product > .s02v2-line-field--quantity {
    grid-column: 3 / -1;
    min-width: 0;
    width: 100%;
  }

  .s02v2-line-field--amount {
    min-width: 0;
  }

  .s02v2-line-field--amount .s02v2-calculated-amount {
    min-width: 18rem;
    width: 100%;
  }

  .s02v2-line-field--add {
    align-self: end;
    min-width: max-content;
    width: 100%;
  }

  .s02v2-line-add-wrap {
    width: 100%;
  }

  .s02v2-line-add {
    width: 100%;
  }

  .s02v2-settlement-open--partial,
  .s02v2-settlement-open--unpaid,
  .s02v2-settlement-details-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s02v2-settlement-create-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /*
   * Purchase／order meta row 1: five equal outer columns —
   * date | document # | paid | partial | unpaid.
   * No visible payment／receipt status title; each pill is its own grid cell via subgrid.
   */
  .s02v2-purchase-row--meta {
    align-items: end;
    column-gap: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 8px;
  }

  .s02v2-purchase-row--meta > .s02v2-meta-date-field,
  .s02v2-purchase-row--meta > .qhc-field.s02v2-field {
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row--meta > .s02v2-meta-date-field .s02v2-meta-date-wrap,
  .s02v2-purchase-row--meta > .s02v2-meta-date-field .s02v2-meta-date-wrap > input[type="date"],
  .s02v2-purchase-row--meta > .qhc-field.s02v2-field > input:not([type="hidden"]) {
    box-sizing: border-box;
    height: 40px;
    max-width: none;
    min-height: 40px;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row--meta > .s02v2-purchase-field--payment {
    align-items: end;
    display: grid;
    grid-column: 3 / span 3;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
    min-width: 0;
    width: auto;
  }

  .s02v2-purchase-row--meta > .s02v2-purchase-field--payment .s02v2-settlement--compact {
    display: contents;
  }

  .s02v2-purchase-row--meta > .s02v2-purchase-field--payment .s02v2-settlement-status.qhc-choice {
    display: contents;
  }

  .s02v2-purchase-row--meta > .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option,
  .s02v2-purchase-row--meta > .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option--compact {
    height: 40px;
    min-height: 40px;
    width: 100%;
  }

  /*
   * Purchase party + item share one parent track line so 数量 left = 类别 left:
   * layout columns = name/supplier (2fr) | qty (1fr) | unit (7rem).
   * Category spans qty+unit; meta / balance / footer span the full row.
   */
  .s02v2-purchase-layout {
    column-gap: 8px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(7rem, 7rem);
    row-gap: 10px;
  }

  .s02v2-purchase-layout > .s02v2-purchase-row--meta,
  .s02v2-purchase-layout > .s02v2-purchase-row--footer,
  .s02v2-purchase-layout > .s02v2-purchase-row--actions,
  .s02v2-purchase-layout > .s02v2-settlement--balance {
    grid-column: 1 / -1;
  }

  .s02v2-purchase-row--party,
  .s02v2-purchase-row--item {
    column-gap: 8px;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: 8px;
  }

  .s02v2-purchase-row--party {
    align-items: start;
  }

  .s02v2-purchase-field--category {
    grid-column: 2 / -1;
  }

  .s02v2-purchase-field--supplier,
  .s02v2-purchase-field--category {
    align-self: start;
  }

  /*
   * Party labels/controls: helper text under supplier must not shift category
   * (bp-picker title is a sibling of .s02v2-settlement-party, so the
   * label+control grid is on .bp-picker — peer of category .qhc-field).
   */

  .s02v2-purchase-field--supplier .bp-picker,
  .s02v2-purchase-field--category > .qhc-field {
    align-content: start;
    display: grid;
    gap: 3px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-field--supplier .bp-picker > .s02v2-settlement-title,
  .s02v2-purchase-field--category > .qhc-field > span {
    line-height: 1.25;
    min-height: 1.05rem;
  }

  /* Party body: search/selected in the control row; hints flow underneath. */
  .s02v2-purchase-field--supplier .bp-picker > .s02v2-settlement-party {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    min-width: 0;
  }

  .s02v2-purchase-field--supplier .bp-picker > input,
  .s02v2-purchase-field--supplier .s02v2-settlement-party > input[type="search"],
  .s02v2-purchase-field--supplier .s02v2-settlement-party > input[type="text"],
  .s02v2-purchase-field--category > .qhc-field > select {
    box-sizing: border-box;
    height: 40px;
    min-height: 40px;
    width: 100%;
  }

  /* Purchase row 3: name | qty | unit — columns from shared parent subgrid */
  .s02v2-purchase-row--item {
    align-items: end;
  }

  /* Purchase row 4: unit price | amount (auto). Paid/unpaid follow in DOM; save after. */
  .s02v2-purchase-row--footer {
    align-items: end;
    column-gap: 8px;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 3fr);
    row-gap: 8px;
  }

  .s02v2-purchase-field--amount .s02v2-calculated-amount {
    min-width: 16.5rem;
    width: 100%;
  }

  .s02v2-purchase-field--quantity {
    min-width: 0;
  }

  .s02v2-purchase-field--unit {
    min-width: 7rem;
  }

  .s02v2-purchase-field--unitPrice {
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-field--unitPrice > .qhc-field,
  .s02v2-purchase-field--unitPrice .qhc-input-affix,
  .s02v2-purchase-field--unitPrice input {
    box-sizing: border-box;
    width: 100%;
  }

  /* Save sits after amount → paid → unpaid so reading order matches the money flow. */
  .s02v2-purchase-row--actions {
    align-items: end;
    justify-items: end;
  }

  .s02v2-purchase-field--save {
    min-width: 0;
    /* Longest EN save label: "Save Purchase Record" (+ padding). */
    width: min(100%, 14rem);
  }

  .s02v2-purchase-field--save .s02v2-form-actions--inline {
    width: 100%;
  }

  .s02v2-purchase-field--save .s02v2-form-actions--inline .primary-action {
    flex: 1 1 auto;
    width: 100%;
  }

  /* Other income desktop: date | category | amount | description.
   * Date + category sized to content (incl. longest EN category);
   * amount + description split the remaining space ~½ / ½. */
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-field-grid.s02v2-other-income-grid {
    align-items: end;
    column-gap: 8px;
    grid-template-columns:
      max-content
      max-content
      minmax(0, 1fr)
      minmax(0, 1fr);
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(1),
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(2) {
    max-width: 100%;
    width: max-content;
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(1) input[type="date"],
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(2) select {
    box-sizing: border-box;
    max-width: 100%;
    width: max-content;
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(2) select {
    /* Longest EN: "Government Subsidy / Grant" (+ padding / chevron). */
    min-width: 13.5rem;
  }

  /* Daily operating expense desktop: date | category | amount (row1);
   * description full width (row2). Date + category sized to content
   * (incl. longest EN category); amount takes remaining space so its
   * right edge aligns with description. */
  .s02v2-other-expenses .s02v2-field-grid.s02v2-other-expense-main {
    align-items: end;
    column-gap: 8px;
    grid-template-columns:
      max-content
      max-content
      minmax(0, 1fr);
    row-gap: 12px;
  }

  .s02v2-other-expenses .s02v2-other-expense-field--date,
  .s02v2-other-expenses .s02v2-other-expense-field--category {
    max-width: 100%;
    width: max-content;
  }

  .s02v2-other-expenses .s02v2-other-expense-field--date input[type="date"],
  .s02v2-other-expenses .s02v2-other-expense-field--category select {
    box-sizing: border-box;
    max-width: 100%;
    width: max-content;
  }

  .s02v2-other-expenses .s02v2-other-expense-field--category select {
    /* Longest EN: "Platform / Commission Fees" (+ padding / chevron). */
    min-width: 14rem;
  }

  .s02v2-other-expenses .s02v2-other-expense-field--amount {
    min-width: 0;
    width: 100%;
  }

  .s02v2-other-expense-field--description {
    grid-column: 1 / -1;
  }
}

@media (min-width: 700px) and (max-width: 768px) {
  /* Meta (date|doc + payment) uses the ≤768 pairing rule below — not a full stack. */
  .s02v2-purchase-row--party,
  .s02v2-purchase-row--item,
  .s02v2-purchase-row--footer,
  .s02v2-purchase-row--actions,
  .s02v2-line-row--product,
  .s02v2-line-row--values {
    grid-template-columns: minmax(0, 1fr);
  }

  .s02v2-purchase-row--actions {
    justify-items: stretch;
  }

  .s02v2-purchase-field--save {
    width: 100%;
  }
}

.s02v2-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.s02v2-edit-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d7c89a;
  background: #fff8e8;
  color: #5c4a1f;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
}

.s02v2-notes-field {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
  width: 100%;
}

.s02v2-notes-field > span {
  color: var(--s02v2-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.s02v2-notes-input,
.s02v2-root textarea.s02v2-notes-input {
  field-sizing: content;
  font: inherit;
  line-height: 1.35;
  max-height: calc(1.35em * 3 + 1rem);
  min-height: 2.4rem;
  overflow-y: auto;
  resize: none;
  width: 100%;
}

.s02v2-local-save-actions {
  align-items: center;
  gap: 10px;
}

.s02v2-local-save-status {
  color: var(--s02v2-muted, #64716b);
  flex: 1 1 auto;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}

.s02v2-local-save-status[data-tone="success"] {
  color: #0f766e;
}

.s02v2-local-save-status[data-tone="warn"] {
  color: #9a6700;
}

.s02v2-local-save-status[data-tone="error"] {
  color: #b42318;
}

.s02v2-local-save-status[hidden] {
  display: none !important;
}

.s02v2-bizinfo-block .s02v2-local-save-status {
  margin-top: 4px;
}

.s02v2-form-actions .primary-action {
  background: var(--s02v2-accent, #0f766e);
  border: 1px solid var(--s02v2-accent, #0f766e);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 8px 18px;
}

.s02v2-form-actions .primary-action:disabled {
  background: #d9dfdc;
  border-color: #c4ccc8;
  color: #68736e;
  cursor: not-allowed;
  opacity: 1;
}

.s02v2-form-actions .secondary-action {
  background: #fff;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  color: var(--s02v2-ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 42px;
  padding: 8px 16px;
}

/* -------------------------------------------------------- Sales mode -- */

.s02v2-mode-choice {
  margin: 0 0 8px;
}

/*
 * mobile-three-layout-breakages-fix-001:
 * Expense／investment peer labels (e.g. “Business Investment & Committed Funds”)
 * must wrap to two lines on narrow screens — never nowrap truncate／ellipsis.
 * Desktop (≥700) keeps the shared .qhc-choice-option nowrap single-line look.
 */
@media (max-width: 699px) {
  .s02v2-root .s02v2-mode-choice.qhc-choice {
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    width: 100%;
  }

  .s02v2-root .s02v2-mode-choice .qhc-choice-option {
    align-items: center;
    box-sizing: border-box;
    flex: 1 1 0;
    height: auto;
    min-height: 44px;
    min-width: 0;
    overflow: visible;
    padding: 8px 6px;
    text-overflow: clip;
    white-space: normal;
  }

  .s02v2-root .s02v2-mode-choice .qhc-choice-option > span {
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
  }
}

.s02v2-block {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  min-width: 0;
}

.s02v2-block > .s02v2-section-title {
  margin: 0;
}

.s02v2-investment-funds {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.s02v2-funds-summary {
  display: grid;
  gap: 6px;
  margin: 0;
}

.s02v2-funds-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
  margin: 0;
}

.s02v2-funds-row dt,
.s02v2-funds-row dd {
  margin: 0;
}

.s02v2-funds-row dd {
  font-weight: 800;
}

.s02v2-funds-row--total {
  border-top: 1px solid var(--s02v2-line, #d7e0db);
  padding-top: 8px;
}

.s02v2-message--warn {
  background: #fff7e8;
  border: 1px solid #e0c789;
  border-radius: 10px;
  color: #6b5010;
  margin: 0;
  padding: 8px 10px;
}

/* Missing business defaultCurrency prompt (UI-CURRENCY-CONTEXT-001.1): plain-language
   guidance plus a clear entry point into business settings — never a currency picker. */
.s02v2-currency-missing {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.s02v2-currency-missing p {
  margin: 0;
}

.s02v2-currency-missing-action {
  align-self: flex-start;
}

.s02v2-mode-lock {
  background: #fff7e8;
  border: 1px solid #e0c789;
  border-radius: 10px;
  color: #6b5010;
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0 0 8px;
  padding: 8px 10px;
}

.s02v2-confirm-inline {
  background: #fdecea;
  border: 1px solid #f0b8b3;
  border-radius: 10px;
  color: var(--s02v2-danger);
  display: grid;
  gap: 8px;
  margin: 0 0 8px;
  padding: 10px;
}

.s02v2-confirm-inline p {
  margin: 0;
}

.s02v2-confirm-actions {
  display: flex;
  gap: 8px;
}

/* Secondary aids under ORDER only — never a peer sales-mode tab. */
.s02v2-order-sources-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 8px;
}

.s02v2-order-sources-label {
  color: var(--s02v2-muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.s02v2-order-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.s02v2-order-source {
  background: #fff;
  border: 1px solid var(--s02v2-line);
  border-radius: 999px;
  color: var(--s02v2-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  min-height: 32px;
  padding: 4px 12px;
}

.s02v2-order-source--primary[aria-pressed="true"] {
  background: #e9f6f2;
  border-color: #9fd0c2;
  color: var(--s02v2-accent);
}

.s02v2-order-source--secondary[aria-pressed="true"] {
  background: #e9f6f2;
  border-color: #9fd0c2;
  color: var(--s02v2-accent);
}

.s02v2-pos-panel {
  background: #f4f8f5;
  border: 1px solid var(--s02v2-line);
  border-radius: 10px;
  margin: 0 0 8px;
  padding: 10px;
}

.s02v2-pos-panel h4 {
  font-size: 0.86rem;
  margin: 0 0 6px;
}

.s02v2-pos-step {
  display: grid;
  gap: 8px;
}

.s02v2-pos-hint {
  color: var(--s02v2-muted);
  font-size: 0.8rem;
  margin: 0;
}

.s02v2-pos-counts {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.s02v2-platform-notice {
  background: #f4f8f5;
  border: 1px solid var(--s02v2-line);
  border-radius: 10px;
  color: var(--s02v2-muted);
  font-size: 0.84rem;
  margin: 0 0 8px;
  padding: 10px;
}

/* --------------------------------------------------------- Line items -- */

/* Legacy free-form line editor row (not product/values entry rows). */
.s02v2-line-row:not(.s02v2-line-row--product):not(.s02v2-line-row--values) {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  margin-bottom: 6px;
}

.s02v2-line-empty {
  color: var(--s02v2-muted);
  font-size: 0.82rem;
  margin: 0 0 6px;
}

.s02v2-line-remove {
  background: none;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  color: var(--s02v2-danger);
  cursor: pointer;
  font-size: 1rem;
  height: 40px;
  width: 32px;
}

.s02v2-line-add {
  margin-top: 2px;
}

.s02v2-line-sum {
  align-items: center;
  color: var(--s02v2-ink);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.84rem;
  gap: 8px;
  margin: 8px 0 0;
}

.s02v2-line-apply {
  background: #fff;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  min-height: 30px;
  padding: 4px 10px;
}

/* -------------------------------------------------------------- Message */

.s02v2-message {
  border-radius: 8px;
  font-size: 0.84rem;
  margin: 0;
  padding: 8px 10px;
}

.s02v2-message--success {
  background: #e4f0ec;
  color: #0f5b3f;
}

.s02v2-message--error {
  background: #fdecea;
  color: var(--s02v2-danger);
}

.s02v2-message--info {
  background: #f4f8f5;
  color: var(--s02v2-ink);
}

.s02v2-inline-feedback {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
}

.s02v2-inline-feedback--success {
  color: #0f5b3f;
}

.s02v2-inline-feedback--error {
  color: var(--s02v2-danger);
}

/* ------------------------------------------------------------ List zone */

.s02v2-list-zone {
  border-top: 1px solid var(--s02v2-line);
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-top: 10px;
}

.s02v2-list-title {
  color: var(--s02v2-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0;
}

/* Empty state lives inside the list zone below the form — never a large
   right-side empty card. */
.s02v2-list-empty {
  color: var(--s02v2-muted);
  font-size: 0.86rem;
  margin: 0;
  padding: 6px 0;
}

.s02v2-record-list {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.s02v2-record-row {
  background: #fffaf5;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  padding: 8px 10px;
}

.s02v2-record-main {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.s02v2-record-title {
  color: var(--s02v2-ink);
  font-size: 0.86rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.s02v2-record-amount {
  color: var(--s02v2-ink);
  flex-shrink: 0;
  font-size: 0.9rem;
}

.s02v2-record-sub {
  color: var(--s02v2-muted);
  font-size: 0.78rem;
  margin: 2px 0 0;
}

.s02v2-record-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.s02v2-record-action {
  background: none;
  border: 1px solid var(--s02v2-line);
  border-radius: 999px;
  color: var(--s02v2-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 28px;
  padding: 2px 10px;
}

.s02v2-record-action--danger {
  border-color: rgba(179, 38, 30, 0.35);
  color: var(--s02v2-danger);
}

/* ------------------------------------------------------------- Purchase */

.s02v2-line-block {
  display: grid;
  gap: 8px;
  margin: 4px 0 8px;
}

.s02v2-line-entry {
  margin: 0;
}

.s02v2-line-actions {
  margin: 0;
}

.s02v2-line-list {
  margin: 0;
}

.s02v2-line-empty {
  color: var(--s02v2-muted);
  font-size: 0.86rem;
  margin: 0;
}

.s02v2-line-sum,
.s02v2-order-total {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin: 0;
}

.s02v2-order-total {
  background: #f4f8f5;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  font-size: 0.88rem;
  padding: 6px 10px;
}

.s02v2-order-total strong,
.s02v2-line-sum strong {
  font-size: 1rem;
  font-weight: 800;
}

.s02v2-calculated-amount {
  align-items: center;
  background: #f4f8f5;
  border: 1px solid var(--s02v2-line);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--s02v2-ink);
  display: flex;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  height: 40px;
  justify-content: flex-end;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 10px;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------- Business info row */

/* Desktop: people | area | effective date (fixedDate); save on next full row. */
.s02v2-bizinfo-block {
  margin-top: 10px;
}

.s02v2-bizinfo-row {
  align-items: end;
  display: grid;
  gap: 10px;
  /* Desktop: 平均员工数 35%｜经营面积 35%｜生效日期 30% — date only needs dd/mm/yyyy + icon.
     Use fr (not bare %) so gaps do not skew the 35:35:30 share of the row.
     Save spans a second row so it stays content-sized without crowding the fields. */
  grid-template-areas:
    "people area date"
    "actions actions actions";
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 3.5fr) minmax(0, 3fr);
  margin-top: 6px;
}

.s02v2-bizinfo-people {
  grid-area: people;
  min-width: 0;
}

.s02v2-bizinfo-area {
  grid-area: area;
  min-width: 0;
}

/* fixedDate shares this row — override standalone 320px so the date fills its 30% cell only. */
.s02v2-bizinfo-row > .smp-standalone-date {
  grid-area: date;
  justify-self: stretch;
  max-width: none;
  min-width: 0;
  width: 100%;
}

/* Beat global `.qhc-module .smp-standalone-date > input` max-width:320px — scoped to this row only. */
.qhc-module .s02v2-bizinfo-row .smp-standalone-date > input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.s02v2-bizinfo-row .smp-standalone-date > input[type="date"] {
  max-width: none;
  min-width: 0;
  width: 100%;
}

.s02v2-bizinfo-actions {
  grid-area: actions;
  justify-self: start;
  margin-top: 0;
  min-width: 0;
  width: auto;
}

.s02v2-bizinfo-save {
  min-height: 40px;
  white-space: nowrap;
  width: auto;
}

/* Mobile: 生效日期｜平均员工数／天 (~50/50); 经营面积｜保存资料 (area flex, save content-sized). */
@media (max-width: 699px) {
  .s02v2-bizinfo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    grid-template-areas: none;
    grid-template-columns: none;
  }

  .s02v2-bizinfo-people,
  .s02v2-bizinfo-area,
  .s02v2-bizinfo-row > .smp-standalone-date,
  .s02v2-bizinfo-actions {
    grid-area: auto;
  }

  .s02v2-bizinfo-row > .smp-standalone-date {
    flex: 1 1 calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
    min-width: 0;
    order: 1;
  }

  .s02v2-bizinfo-people {
    flex: 1 1 calc((100% - 10px) / 2);
    max-width: calc((100% - 10px) / 2);
    min-width: 0;
    order: 2;
  }

  .s02v2-bizinfo-area {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
    order: 3;
  }

  .s02v2-bizinfo-actions {
    flex: 0 0 auto;
    justify-self: auto;
    margin-top: 0;
    order: 4;
    width: auto;
  }

  .s02v2-bizinfo-save {
    width: auto;
  }
}

/* ------------------------------------------------ Expenses & investment */

.s02v2-operating-expenses-page {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.s02v2-other-expenses {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.s02v2-section-title {
  color: var(--s02v2-ink);
  font-size: 0.92rem;
  font-weight: 800;
  margin: 0;
}

.s02v2-investment-page {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* Investment detail: amount → notes → save.
   Mobile stacks; desktop (700px+) puts the three on one row. */
.s02v2-investment-entry-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

.s02v2-investment-entry-row > .qhc-field,
.s02v2-investment-entry-row > .s02v2-field,
.s02v2-investment-entry-row > .s02v2-form-actions {
  min-width: 0;
}

@media (min-width: 700px) {
  .s02v2-field-grid.s02v2-investment-meta {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .s02v2-investment-entry-row {
    align-items: end;
    gap: 10px 12px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .s02v2-investment-entry-row > .s02v2-form-actions {
    align-items: center;
    flex-wrap: nowrap;
    margin-top: 0;
    width: auto;
  }

  .s02v2-investment-entry-row > .s02v2-form-actions .primary-action,
  .s02v2-investment-entry-row > .s02v2-form-actions .secondary-action {
    flex: 0 0 auto;
    white-space: nowrap;
    width: auto;
  }

  /* Keep notes visually compact on desktop — single-line default, not a full-row block. */
  .s02v2-investment-entry-row .s02v2-notes-input,
  .s02v2-root .s02v2-investment-entry-row textarea.s02v2-notes-input {
    min-height: 2.5rem;
  }
}

/* --------------------------------------------------------------- Mobile */

@media (max-width: 699px) {
  .s02v2-primary-nav--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .s02v2-primary-tab {
    font-size: 0.86rem;
    min-height: 48px;
    padding: 8px 10px;
  }

  .s02v2-field-grid:not(.s02v2-order-meta):not(.s02v2-purchase-meta) {
    grid-template-columns: minmax(0, 1fr);
  }

  .s02v2-purchase-layout,
  .s02v2-purchase-row:not(.s02v2-purchase-row--meta),
  .s02v2-line-entry,
  .s02v2-line-row--product,
  .s02v2-line-row--values {
    grid-template-columns: minmax(0, 1fr);
  }

  .s02v2-purchase-row--actions {
    justify-items: stretch;
  }

  .s02v2-purchase-field--save {
    width: 100%;
  }

  .s02v2-line-add,
  .s02v2-form-actions--inline .primary-action,
  .s02v2-form-actions--inline .secondary-action {
    width: 100%;
  }

  .s02v2-line-list .s02v2-line-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .s02v2-line-list .s02v2-line-row input:nth-of-type(1) {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------- Settlement AR/AP */

.s02v2-wrap {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.s02v2-settlement,
.s02v2-settlement-board {
  min-width: 0;
  overflow-x: hidden;
}

.s02v2-settlement {
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
}

.s02v2-settlement-title {
  color: var(--s02v2-ink);
  font-size: 0.88rem;
  font-weight: 800;
  margin: 0;
}

.s02v2-settlement-status.qhc-choice {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.s02v2-settlement-open,
.s02v2-settlement-paid-optional {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.s02v2-settlement-details-grid {
  display: grid;
  gap: 12px;
  min-width: 0;
  width: 100%;
}

.s02v2-settlement-detail {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-settlement-detail > .qhc-field,
.s02v2-settlement-detail > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-settlement-detail .s02v2-calculated-amount {
  width: 100%;
}

.s02v2-settlement-party {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.s02v2-settlement-party input[type="text"],
.s02v2-settlement-party input[type="search"] {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.s02v2-settlement-suggestions {
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* Sales customer searchable combobox (general-searchable-customer-combobox-001) */
.bp-customer-combobox {
  min-width: 0;
  width: 100%;
}

.bp-customer-combobox-shell {
  max-width: 100%;
  min-width: 0;
  position: relative;
  width: 100%;
}

.bp-customer-combobox-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0;
  max-width: 100%;
  min-height: 38px;
  min-width: 0;
  overflow: hidden;
  padding: 8px 28px 8px 10px;
  position: relative;
  text-align: left;
  width: 100%;
}

.bp-customer-combobox-toggle::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--s02v2-muted, #6b7280);
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-35%);
}

.bp-customer-combobox[data-bp-combobox-open="1"] .bp-customer-combobox-toggle::after {
  transform: translateY(-65%) rotate(180deg);
}

.bp-customer-combobox-field-label {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
}

.bp-customer-combobox-sep {
  flex: 0 0 auto;
  margin: 0 0.35em;
  opacity: 0.55;
}

.bp-customer-combobox-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-customer-combobox-menu {
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  left: 0;
  margin-top: 4px;
  max-height: min(320px, 70vh);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  z-index: 30;
}

.bp-customer-combobox-search {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.bp-customer-combobox-option {
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  overflow: hidden;
  padding: 8px 10px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.bp-customer-combobox-option.is-active,
.bp-customer-combobox-option:hover,
.bp-customer-combobox-option.is-current {
  background: #f3f6fb;
}

.bp-customer-combobox-walkin {
  font-weight: 600;
}

.bp-customer-combobox-add {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 0 0 8px 8px;
  color: var(--s02v2-accent, #1f6f5b);
  font-weight: 600;
  margin-top: 2px;
  padding-top: 10px;
}

.bp-customer-combobox-suggestions {
  display: grid;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.bp-customer-combobox-results {
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
}

.bp-customer-combobox-result-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-customer-combobox-result-sub {
  color: var(--s02v2-muted, #6b7280);
  display: block;
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-customer-combobox-empty {
  margin: 0;
  padding: 4px 6px;
}

/* Optional supplier combobox (restaurant-section01-supplier-selector-layout-fix-001) */
.bp-supplier-combobox {
  min-width: 0;
  width: 100%;
}

.bp-supplier-combobox-shell {
  max-width: 100%;
  min-width: 0;
  position: relative;
  width: 100%;
}

.bp-supplier-combobox-toggle {
  align-items: center;
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  max-width: 100%;
  min-height: 38px;
  min-width: 0;
  overflow: hidden;
  padding: 8px 28px 8px 10px;
  position: relative;
  text-align: left;
  width: 100%;
}

.bp-supplier-combobox-toggle.is-placeholder {
  color: var(--s02v2-muted, #6b7280);
}

.bp-supplier-combobox-toggle::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--s02v2-muted, #6b7280);
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-35%);
}

.bp-supplier-combobox[data-bp-combobox-open="1"] .bp-supplier-combobox-toggle::after {
  transform: translateY(-65%) rotate(180deg);
}

.bp-supplier-combobox-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-supplier-combobox-menu {
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  box-sizing: border-box;
  display: grid;
  gap: 6px;
  left: 0;
  margin-top: 4px;
  max-height: min(320px, 70vh);
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  z-index: 40;
}

.bp-supplier-combobox-search {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.bp-supplier-combobox-option {
  background: #fff;
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.bp-supplier-combobox-add {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 0 0 8px 8px;
  color: var(--s02v2-accent, #1f6f5b);
  font-weight: 600;
  padding-top: 10px;
}

.bp-supplier-combobox-menu-actions {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 8px;
}

.bp-supplier-combobox-menu-actions .secondary-action {
  box-sizing: border-box;
  min-height: 36px;
  width: 100%;
}

.bp-supplier-combobox-suggestions {
  display: grid;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.bp-supplier-combobox-results {
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
}

.bp-supplier-combobox-result-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-supplier-combobox-result-sub {
  color: var(--s02v2-muted, #6b7280);
  display: block;
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-supplier-combobox-empty {
  margin: 0;
  padding: 4px 6px;
}

.s02v2-settlement-result.is-current button {
  background: #eef6f3;
}

/* Selected party: label is status text; action buttons use an equal-width grid. */
.s02v2-settlement-selected {
  align-items: center;
  background: color-mix(in srgb, var(--s02v2-accent, #1f6f5b) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--s02v2-accent, #1f6f5b) 28%, #d8dee8);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  padding: 8px 10px;
  width: fit-content;
}

.s02v2-settlement-selected-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Equal outer width / height / gaps — not auto-sized by label length. */
.s02v2-settlement-selected-actions,
.s02v2-settlement-replace-actions {
  display: grid;
  flex: 1 1 auto;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 100%;
  min-width: 0;
  width: min(100%, 22rem);
}

.s02v2-settlement-selected-actions .secondary-action,
.s02v2-settlement-replace-actions .secondary-action {
  box-sizing: border-box;
  min-height: 36px;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  width: 100%;
}

.s02v2-settlement--party {
  margin-bottom: 2px;
}

.s02v2-settlement-empty--library {
  align-items: flex-start;
  display: grid;
  gap: 8px;
}

.s02v2-settlement-doc-party,
.s02v2-settlement-doc-outstanding {
  font-weight: 600;
}

.s02v2-settlement-change {
  min-height: 32px;
}

.s02v2-settlement-results {
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 8px;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
}

.s02v2-settlement-result + .s02v2-settlement-result {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
}

.s02v2-settlement-result button {
  background: #fff;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.s02v2-settlement-result.is-active button,
.s02v2-settlement-result button:hover {
  background: #f3f6fb;
}

.s02v2-settlement-empty {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.s02v2-settlement-empty p,
.s02v2-settlement-required,
.s02v2-settlement-save-hint {
  color: #9a6700;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.s02v2-settlement-create {
  border: 1px dashed var(--s02v2-border, #d8dee8);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
}

.s02v2-settlement-create-actions {
  margin-top: 0;
}

/* Shared partner create actions — visible inside and outside .s02v2-root. */
.bp-create-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
}

.bp-create-actions .primary-action,
.bp-create-actions .bp-create-save {
  background: var(--s02v2-accent, #0f766e);
  border: 1px solid var(--s02v2-accent, #0f766e);
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  justify-content: center;
  min-height: 42px;
  opacity: 1;
  padding: 8px 18px;
  visibility: visible;
}

.bp-create-actions .primary-action:disabled,
.bp-create-actions .bp-create-save:disabled,
.bp-create-actions .primary-action[aria-disabled="true"],
.bp-create-actions .bp-create-save[aria-disabled="true"] {
  background: #d9dfdc;
  border-color: #c4ccc8;
  box-shadow: none;
  color: #68736e;
  cursor: not-allowed;
  opacity: 1;
}

.bp-create-actions .secondary-action,
.bp-create-actions .bp-create-cancel {
  background: #fff;
  border: 1px solid var(--s02v2-line, #d7e3da);
  border-radius: 8px;
  color: var(--s02v2-ink, #17211d);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 42px;
  padding: 8px 16px;
}

.bp-create-actions .secondary-action:disabled,
.bp-create-actions .bp-create-cancel:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.bp-create-error {
  color: var(--s02v2-danger, #b3261e);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  width: 100%;
}

@media (max-width: 430px) {
  .bp-create-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-create-actions .primary-action,
  .bp-create-actions .secondary-action,
  .bp-create-actions .bp-create-save,
  .bp-create-actions .bp-create-cancel {
    width: 100%;
  }
}

.s02v2-settlement-board {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
  display: grid;
  gap: 8px;
  margin-top: 2px;
  min-width: 0;
  padding-top: 10px;
}

.s02v2-settlement-board-strip {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.s02v2-settlement-board-chip {
  align-items: baseline;
  background: #f7f9fc;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 10px;
  display: inline-flex;
  flex: 1 1 160px;
  gap: 8px;
  justify-content: space-between;
  min-height: 34px;
  min-width: 0;
  padding: 6px 12px;
  text-align: left;
}

.s02v2-settlement-board-chip span {
  color: var(--s02v2-muted, #64716b);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.s02v2-settlement-board-chip.is-open {
  border-color: var(--s02v2-accent, #2563eb);
  outline: 2px solid color-mix(in srgb, var(--s02v2-accent, #2563eb) 35%, transparent);
}

.s02v2-settlement-empty-line {
  margin: 0;
  min-height: 0;
  padding: 4px 0;
}

.s02v2-settlement-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.s02v2-settlement-doc-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.s02v2-settlement-doc {
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
}

.s02v2-settlement-doc-grid {
  display: grid;
  gap: 4px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.s02v2-settlement-follow {
  display: grid;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 699px) {
  .s02v2-settlement-status.qhc-choice {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .s02v2-settlement-doc-grid,
  .s02v2-line-entry,
  .s02v2-settlement-open--partial,
  .s02v2-settlement-open--unpaid,
  .s02v2-settlement-create-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Order number / purchase document number: show the concise mobile
     label instead of the full formal one (UI-MOBILE-PURCHASE-METADATA-001).
     The input's `aria-label` still carries the full meaning. */
  .s02v2-field-label-full {
    display: none;
  }

  .s02v2-field-label-short {
    display: inline;
  }

  .s02v2-settlement-board-strip {
    flex-direction: column;
  }

  .s02v2-settlement-board-chip {
    border-radius: 10px;
    flex: 1 1 auto;
  }

  /* Totals / results: title on its own row; amount full-width right-aligned. */
  .s02v2-order-total,
  .s02v2-line-sum,
  .s02v2-funds-row {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .s02v2-order-total strong,
  .s02v2-line-sum strong,
  .s02v2-funds-row dd {
    display: block;
    font-variant-numeric: tabular-nums;
    max-width: none;
    overflow: visible;
    text-align: right;
    white-space: nowrap;
    width: 100%;
  }

  .s02v2-settlement-detail > .qhc-field,
  .s02v2-settlement-detail > .s02v2-field,
  .s02v2-line-field--amount,
  .s02v2-purchase-field--amount {
    display: grid;
    gap: 4px;
    width: 100%;
  }

  .s02v2-calculated-amount {
    box-sizing: border-box;
    height: auto;
    min-height: 40px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-block: 8px;
    text-overflow: clip;
    width: 100%;
  }

  .s02v2-form-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .s02v2-form-actions .primary-action,
  .s02v2-form-actions .secondary-action {
    justify-content: center;
    width: 100%;
  }

  .s02v2-settlement-doc-outstanding {
    display: block;
    font-variant-numeric: tabular-nums;
    max-width: none;
    overflow: visible;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }

  .s02v2-settlement-board-chip {
    align-items: stretch;
    flex-direction: column;
    gap: 4px;
  }

  .s02v2-settlement-board-chip span {
    display: block;
    font-variant-numeric: tabular-nums;
    max-width: none;
    overflow: visible;
    text-align: right;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
  }
}

/*
 * Order date + document number / purchase date + document number
 * (UI-MOBILE-PURCHASE-METADATA-001): from 360px up to the 699px mobile
 * ceiling, keep date and document number on the same row (~50%/50%) with a
 * 10-12px gap instead of stacking, so the low-frequency document number
 * field does not consume a whole row of vertical space on ordinary phones.
 * Compound selectors beat the generic `.s02v2-field-grid` single-column mobile
 * rule above (same breakpoint) so stale/partial CSS cannot silently re-stack
 * these metadata rows when both classes are present on the same element.
 * Below 360px there is not enough width for two fields without shrinking
 * fonts/truncating dates, so they stack back to two full-width rows.
 * Canonical 360–699px / <360px grid rules are emitted after UI-MOBILE-COMPACT-HUB
 * at EOF so compact-hub gap resets cannot override them.
 */

/*
 * Purchase quantity + unit mobile pairing lives at EOF ≤768
 * (general-mobile-purchase-qty-unit-row-001): name full width, then
 * 数量 | 单位 (qty flex remainder, unit compact). Desktop ≥769 keeps
 * the shared subgrid name | qty | unit from the desktop purchase layout.
 */

/* Purchase unit: vertical custom suggestions under the field (not native datalist / keyboard chip bar). */
.s02v2-unit-field {
  min-width: 0;
  position: relative;
}

.s02v2-unit-field .qhc-field,
.s02v2-unit-field .s02v2-field {
  min-width: 0;
}

.s02v2-unit-suggestions {
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(20, 32, 48, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 12.5rem;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  width: max-content;
  z-index: 30;
}

.s02v2-unit-suggestions[hidden] {
  display: none;
}

.s02v2-unit-suggestions li + li {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
}

.s02v2-unit-suggestions button {
  background: #fff;
  border: 0;
  border-radius: 0;
  display: block;
  font: inherit;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  width: 100%;
}

.s02v2-unit-suggestions button:hover,
.s02v2-unit-suggestions button:focus-visible {
  background: #f3f6fb;
}

.s02v2-product-suggest-wrap {
  position: relative;
}

.s02v2-line-product-hint {
  margin: 0 0 8px;
}

.s02v2-product-suggestions {
  background: #fff;
  border: 1px solid var(--s02v2-border, #d8dee8);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(20, 32, 48, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 14rem;
  min-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 30;
}

.s02v2-product-suggestions[hidden] {
  display: none;
}

.s02v2-product-suggestions li + li {
  border-top: 1px solid var(--s02v2-border, #d8dee8);
}

.s02v2-product-suggestions button {
  background: #fff;
  border: 0;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font: inherit;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
}

.s02v2-product-suggestions button:hover,
.s02v2-product-suggestions button:focus-visible {
  background: #f3f6fb;
}

.s02v2-product-option-meta {
  color: #6b655c;
  font-size: 0.85em;
}

.s02v2-catalog-group {
  padding: 0.35rem 0.65rem 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #5f574c;
  background: #f4f0e8;
  list-style: none;
}

.s02v2-inventory-tools {
  margin: 1rem 0 0.5rem;
  padding: 0.85rem 0 0;
  border-top: 1px solid #e5dfd3;
}

.s02v2-inventory-tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.s02v2-material-manager {
  display: grid;
  gap: 0.75rem;
  margin: 0.75rem 0;
  padding: 0.85rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.5rem;
  background: #fbfaf7;
}

.s02v2-material-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.s02v2-material-manager-head h4 {
  margin: 0;
}

.s02v2-material-business-rate,
.s02v2-material-create-form,
.s02v2-material-purchase-edit {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s02v2-material-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.s02v2-material-row {
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.45rem;
  background: #fff;
}

.s02v2-material-row.is-editing {
  grid-template-columns: minmax(0, 1fr);
}

.s02v2-material-row-main {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.s02v2-material-purchase-cost,
.s02v2-material-mgmt-rate,
.s02v2-material-managed-cost {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.s02v2-material-purchase-cost--missing {
  color: #8a2b2b;
}

.s02v2-material-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.s02v2-material-action-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.9rem;
}

.s02v2-material-action-status[data-tone="error"] {
  color: #8a2b2b;
}

@media (max-width: 699px) {
  .s02v2-material-business-rate,
  .s02v2-material-create-form,
  .s02v2-material-purchase-edit {
    grid-template-columns: minmax(0, 1fr);
  }
}

.s02v2-inventory-tool-form {
  margin-top: 0.35rem;
  padding: 0.75rem;
  border: 1px solid #e5dfd3;
  border-radius: 0.5rem;
  background: #fbfaf7;
}

/* Desktop ≥700: first four inventory-tool fields as 2×2 (~50/50)
 * (date|item ; qty|reason). Mobile ≤699 date|reason 4:6 pairing is at EOF
 * after UI-MOBILE-COMPACT-HUB so it beats the generic single-column stack. */
@media (min-width: 700px) {
  .s02v2-inventory-tool-form .s02v2-field-grid.s02v2-inventory-tool-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: none;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field {
    grid-area: auto;
  }
}

.s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field,
.s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field {
  min-width: 0;
  width: 100%;
}

.s02v2-line-linked,
.s02v2-line-unlinked {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 500;
}

.s02v2-line-linked {
  color: #2f6b4f;
}

.s02v2-line-unlinked {
  color: #9a3412;
}

.bp-picker,
.bp-manage {
  min-width: 0;
}

.bp-manage {
  display: contents;
}

.bp-manage-panel,
.bp-manage-panel--workspace {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 8px 0 0;
}

.bp-manage-toolbar {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bp-manage-search {
  min-width: 0;
  width: 100%;
}

.bp-manage-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bp-manage-filter.is-active {
  border-color: var(--s02v2-accent, #0f766e);
  outline: 1px solid color-mix(in srgb, var(--s02v2-accent, #0f766e) 40%, transparent);
}

.bp-manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.bp-manage-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 10px;
  min-width: 0;
  overflow: visible;
}

.bp-manage-main {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.bp-manage-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.bp-manage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bp-manage-sub,
.bp-manage-balances,
.bp-manage-empty {
  margin: 0;
  opacity: 0.78;
  font-size: 0.92em;
}

.bp-inline-editor {
  margin-top: 8px;
  min-width: 0;
  overflow: visible;
}

.bp-inline-editor-title {
  margin: 0 0 8px;
}

.bp-create-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Selected-bar actions use an equal 2-col grid (see .s02v2-settlement-selected-actions). */

@media (max-width: 899px) {
  .bp-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 699px) {
  .bp-create-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .s02v2-settlement-selected {
    width: 100%;
  }

  .s02v2-settlement-selected-actions,
  .s02v2-settlement-replace-actions {
    width: 100%;
  }

  .s02v2-settlement-selected-label {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .bp-customer-combobox,
  .bp-customer-combobox-shell,
  .bp-customer-combobox-toggle,
  .bp-customer-combobox-menu,
  .bp-supplier-combobox,
  .bp-supplier-combobox-shell,
  .bp-supplier-combobox-toggle,
  .bp-supplier-combobox-menu {
    max-width: 100%;
    width: 100%;
  }

  .bp-customer-combobox-menu,
  .bp-supplier-combobox-menu {
    left: 0;
    right: 0;
    max-height: min(260px, 50vh);
  }
}

/*
 * UI-MOBILE-COMPACT-HUB — tight mobile spacing for Section 02 V2 hub
 * (收入 / 支出與投入 / 經營資料). CSS-only; desktop (≥700) unchanged.
 */
@media (max-width: 699px) {
  .s02v2-root {
    padding: 8px;
  }

  .s02v2-wrap {
    gap: 10px;
  }

  .s02v2-primary-group {
    gap: 6px;
  }

  .s02v2-primary-group--expense {
    margin-top: 10px;
  }

  .s02v2-primary-nav {
    gap: 6px;
  }

  .s02v2-panel-slot--income:not(:empty),
  .s02v2-panel-slot--expense:not(:empty) {
    margin-top: 8px;
  }

  .s02v2-panel,
  .s02v2-form {
    gap: 8px;
  }

  .s02v2-field-grid:not(.s02v2-order-meta):not(.s02v2-purchase-meta),
  .s02v2-field-grid--compact {
    gap: 6px;
  }

  .s02v2-block {
    gap: 8px;
    margin-bottom: 10px;
  }

  .s02v2-operating-expenses-page,
  .s02v2-investment-page,
  .s02v2-other-expenses {
    gap: 8px;
  }

  .s02v2-bizinfo-block {
    margin-top: 0;
  }

  .s02v2-bizinfo-row {
    gap: 6px;
    margin-top: 0;
  }

  .s02v2-mode-choice {
    margin-bottom: 0;
  }

  .s02v2-root .qhc-choice {
    gap: 6px;
    margin: 0;
  }

  .s02v2-root .qhc-choice legend {
    margin-bottom: 4px;
  }

  .s02v2-root .qhc-field,
  .s02v2-root .s02v2-field,
  .s02v2-root .smp-field {
    gap: 3px;
  }

  .s02v2-root .smp-hint,
  .s02v2-root .qhc-hint {
    margin: 0;
  }

  .s02v2-root .smp-hint + .smp-hint,
  .s02v2-root .qhc-hint + .qhc-hint,
  .s02v2-root .qhc-hint--compact + .qhc-hint--compact {
    margin-top: 3px;
  }

  .s02v2-form-actions,
  .s02v2-local-save-actions,
  .s02v2-confirm-actions {
    gap: 6px;
  }

  .s02v2-line-entry,
  .s02v2-line-row,
  .s02v2-purchase-layout,
  .s02v2-purchase-row {
    gap: 6px;
  }

  .s02v2-purchase-field--payment .s02v2-settlement--compact {
    margin-top: 0;
    padding: 0;
  }

  .s02v2-settlement {
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
  }

  .s02v2-settlement-details-grid,
  .s02v2-settlement-open,
  .s02v2-settlement-paid-optional {
    gap: 6px;
  }

  .s02v2-list-zone {
    gap: 6px;
    margin-top: 0;
    padding-top: 8px;
  }

  .s02v2-investment-funds {
    gap: 6px;
    margin-top: 8px;
  }

  .s02v2-order-sources-wrap {
    gap: 4px;
    margin-bottom: 6px;
  }

  .s02v2-root .qhc-fixed-row {
    gap: 6px;
    padding: 6px 0;
  }

  .s02v2-root .qhc-fixed-controls {
    gap: 6px;
  }

  .s02v2-root .qhc-fixed-row:first-child {
    padding-top: 0;
  }

  .s02v2-root.qhc-module input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
  .s02v2-root.qhc-module select,
  .s02v2-root .smp-field > input,
  .s02v2-root .smp-input-affix input {
    box-sizing: border-box;
    min-height: 44px;
  }

  .s02v2-form-actions .primary-action,
  .s02v2-form-actions .secondary-action,
  .s02v2-bizinfo-save {
    min-height: 44px;
  }

  .s02v2-primary-tab {
    min-height: 44px;
  }

  .s02v2-root .qhc-choice-option {
    box-sizing: border-box;
    min-height: 44px;
  }

  .s02v2-calculated-amount {
    min-height: 44px;
  }
}

@media (max-width: 359px) {
  .s02v2-root {
    padding: 6px;
  }
}

/*
 * Order / purchase meta — ≤768px pairing (after compact hub / generic stacks).
 * Shared markup: `.s02v2-purchase-row.s02v2-purchase-row--meta`
 * (+ `.s02v2-order-meta` on sales). Double-class specificity (0,2,0) beats the
 * ≤699px `.s02v2-purchase-row:not(.s02v2-purchase-row--meta) { 1fr }` stack;
 * meta is also excluded from that stack via :not().
 * Row 1: 采购／订单日期 | 原采购单／单据号 — each ~50%.
 * Row 2: payment／receipt status pills full width.
 * Desktop ≥769px keeps five-equal columns (date | doc | paid | partial | unpaid).
 * Inputs use min-width: 0 so half-width date fields do not force horizontal scroll.
 */
@media (max-width: 768px) {
  .s02v2-purchase-row.s02v2-purchase-row--meta {
    align-items: start;
    column-gap: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
    min-width: 0;
    row-gap: 8px;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta > .s02v2-meta-date-field,
  .s02v2-purchase-row.s02v2-purchase-row--meta > .qhc-field.s02v2-field {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta > .s02v2-purchase-field--payment {
    grid-column: 1 / -1;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  /*
   * mobile-three-layout-breakages-fix-001:
   * Three nowrap payment pills’ max-content (~320px) exceeds the card on ≤320–390
   * and expands the page (esp. Safari fieldset min-content). Allow wrap + lock
   * fieldset to the track; do not hide overflow at the page level.
   */
  .s02v2-purchase-field--payment .s02v2-settlement-status.qhc-choice {
    box-sizing: border-box;
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option,
  .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option--compact {
    box-sizing: border-box;
    height: auto;
    justify-content: center;
    max-width: 100%;
    min-height: 40px;
    min-width: 0;
    overflow: visible;
    padding: 6px 4px;
    text-overflow: clip;
    white-space: normal;
    width: 100%;
  }

  .s02v2-purchase-field--payment .s02v2-settlement-status .qhc-choice-option > span {
    min-width: 0;
    overflow-wrap: break-word;
    text-align: center;
    white-space: normal;
  }

  /* Sales customer combobox is a direct form child (not inside purchase-layout). */
  [data-s02v2-form="order"] > .bp-customer-combobox,
  [data-s02v2-form="order"] .bp-customer-combobox,
  [data-s02v2-form="order"] .bp-customer-combobox-shell,
  [data-s02v2-form="order"] .bp-customer-combobox-toggle {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-field-label-short {
    white-space: nowrap;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta > .qhc-field > input,
  .s02v2-purchase-row.s02v2-purchase-row--meta > .s02v2-field > input,
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"] {
    overflow: hidden;
    padding-left: 4px;
    padding-right: 24px;
    text-align: left;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit,
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    display: inline-flex;
    justify-content: flex-start;
    margin: 0;
    min-width: 0;
    padding: 0;
    text-align: left;
    width: auto;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit-text,
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit-month-field,
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit-day-field,
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-datetime-edit-year-field {
    margin: 0;
    padding: 0;
    text-align: left;
  }

  /* Hide native indicator; custom button is the visible calendar control. */
  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-wrap > input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--ink, #1f2937);
    cursor: pointer;
    display: flex;
    height: 22px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    z-index: 1;
  }

  .s02v2-purchase-row.s02v2-purchase-row--meta .s02v2-meta-date-btn svg {
    display: block;
    fill: none;
    height: 16px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    width: 16px;
  }

  /*
   * Other income — ≤768 mobile／tablet pairing.
   * Row 1: 日期 | 类别 — each 50%.
   * Row 2: 金额 full width.
   * Row 3: 说明 full width.
   * DOM order is already date → category → amount → description; amount／desc
   * span so they do not sit side-by-side under the default 2-col field-grid
   * (700–768) or the ≤699 single-column stack override.
   * Desktop ≥769 keeps the four-track compact row (date|cat|amount|desc).
   */
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-field-grid.s02v2-other-income-grid {
    align-items: start;
    column-gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 8px;
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(1),
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(2) {
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(1) input[type="date"],
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(2) select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(3),
  .s02v2-panel[data-s02v2-panel="other_income"] .s02v2-other-income-grid > .qhc-field:nth-child(4) {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  /*
   * Purchase item — ≤768 mobile／tablet: 物品名称 full width; 数量 | 单位
   * one row (qty first / remainder; unit compact max-content).
   * Double-class + later source order beats:
   * - ≤699 `.s02v2-purchase-row:not(.s02v2-purchase-row--meta) { 1fr }`
   * - 700–768 `.s02v2-purchase-row--item { 1fr }` stack
   * Desktop ≥769 keeps shared parent subgrid name | qty | unit.
   */
  .s02v2-purchase-row.s02v2-purchase-row--item {
    align-items: end;
    column-gap: 8px;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) max-content;
    justify-items: stretch;
    min-width: 0;
    row-gap: 8px;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--name {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--quantity {
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--unit {
    justify-self: end;
    max-width: 6.75rem;
    min-width: 4.75rem;
    width: max-content;
  }

  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--unit .s02v2-unit-field,
  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--unit .qhc-field,
  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--unit .s02v2-field {
    min-width: 0;
    width: 100%;
  }

  .s02v2-purchase-row.s02v2-purchase-row--item > .s02v2-purchase-field--unit input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }
}

/* period-selector-arrow-and-hourly-wage-polish-001: wage-only hourly inputs. */
.s02v2-root .qhc-fixed-inline-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.s02v2-root .qhc-fixed-controls--hourly {
  align-items: end;
  display: grid;
  grid-column: 2 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(8rem, 0.8fr) minmax(0, 1fr);
  min-width: 0;
}

.s02v2-root .qhc-fixed-control-field,
.s02v2-root .qhc-fixed-work-hours {
  display: grid;
  min-width: 0;
}

.s02v2-root .qhc-fixed-work-hours input {
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;
}

@media (max-width: 900px) {
  .s02v2-root .qhc-fixed-controls--hourly {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr) minmax(7.25rem, 7.875rem);
  }

  .s02v2-root .qhc-fixed-controls--hourly .qhc-fixed-work-hours {
    grid-column: 1 / -1;
  }
}

/*
 * Inventory tools (供应商退货 / 库存报损) — mobile ≤699:
 * Row 1: 采购日期 | 原因 — 4fr : 6fr (~40% / 60%).
 * Row 2: inventory item or original purchase / inbound lot — full width.
 * Row 3: 数量 — full width.
 * DOM order stays date → item → qty → reason; grid-areas place reason
 * beside date. Desktop ≥700 keeps 2×2 (date|item ; qty|reason).
 */
@media (max-width: 699px) {
  .s02v2-inventory-tool-form .s02v2-field-grid.s02v2-inventory-tool-fields {
    align-items: start;
    column-gap: 8px;
    grid-template-areas:
      "inv-date inv-reason"
      "inv-item inv-item"
      "inv-qty inv-qty";
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    row-gap: 8px;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field:nth-child(1),
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field:nth-child(1) {
    grid-area: inv-date;
    min-width: 0;
    width: 100%;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field:nth-child(2),
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field:nth-child(2) {
    grid-area: inv-item;
    min-width: 0;
    width: 100%;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field:nth-child(3),
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field:nth-child(3) {
    grid-area: inv-qty;
    min-width: 0;
    width: 100%;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field:nth-child(4),
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field:nth-child(4) {
    grid-area: inv-reason;
    min-width: 0;
    width: 100%;
  }

  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field input,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .qhc-field select,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field input,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields > .s02v2-field select,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields .s02v2-meta-date-wrap,
  .s02v2-inventory-tool-form .s02v2-inventory-tool-fields .s02v2-meta-date-wrap > input {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   general-detailed-calculator-button-hierarchy-batch-001
   Detailed Calculator Section 02 (#operating-records) — color/border/shadow/state only.
   Layout tokens above (width/height/gap/padding/font-size) remain locked.
   ========================================================================== */

/* Form / settlement / partner create — sole solid Primary in each operation region. */
#operating-records .s02v2-form-actions .primary-action:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-settlement-follow .primary-action:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .primary-action:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-save:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-import"].primary-action:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-mode-switch"]:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-investment-overlap"]:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-bp-duplicate] .primary-action:not(:disabled):not([aria-disabled="true"]) {
  background: linear-gradient(180deg, #17352b 0%, #10231d 100%);
  border-color: rgba(199, 161, 90, 0.62);
  box-shadow: 0 2px 8px rgba(16, 35, 29, 0.22);
  color: #fffdf8;
}

#operating-records .s02v2-form-actions .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-form-actions .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-settlement-follow .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-settlement-follow .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-save:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-save:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-import"].primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-import"].primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-mode-switch"]:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-mode-switch"]:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-investment-overlap"]:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-investment-overlap"]:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-bp-duplicate] .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-bp-duplicate] .primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 3px 10px rgba(16, 35, 29, 0.3);
}

#operating-records .s02v2-form-actions .primary-action:active:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-settlement-follow .primary-action:active:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .primary-action:active:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-save:active:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-import"].primary-action:active:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-mode-switch"]:active:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="confirm-investment-overlap"]:active:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-bp-duplicate] .primary-action:active:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 1px 4px rgba(16, 35, 29, 0.18);
}

#operating-records .s02v2-form-actions .primary-action:disabled,
#operating-records .s02v2-form-actions .primary-action[aria-disabled="true"],
#operating-records .s02v2-settlement-follow .primary-action:disabled,
#operating-records .s02v2-settlement-follow .primary-action[aria-disabled="true"],
#operating-records .bp-create-actions .primary-action:disabled,
#operating-records .bp-create-actions .primary-action[aria-disabled="true"],
#operating-records .bp-create-actions .bp-create-save:disabled,
#operating-records .bp-create-actions .bp-create-save[aria-disabled="true"],
#operating-records [data-s02v2-action="pos-import"].primary-action:disabled,
#operating-records [data-s02v2-action="pos-import"].primary-action[aria-disabled="true"] {
  background: #d9dfdc;
  border-color: #c4ccc8;
  box-shadow: none;
  color: #68736e;
}

/* Add-to-order may carry .primary-action when line-ready — demote to Secondary (add-another). */
#operating-records .s02v2-line-add.primary-action:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-line-add.secondary-action:not(:disabled):not([aria-disabled="true"]) {
  background: var(--surface-soft, #f3eee3);
  border-color: rgba(23, 33, 29, 0.14);
  box-shadow: none;
  color: var(--ink, #17211d);
}

#operating-records .s02v2-line-add.primary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-line-add.primary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-line-add.secondary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-line-add.secondary-action:focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: #ebe4d6;
  border-color: rgba(23, 33, 29, 0.22);
  box-shadow: none;
}

/* Ordinary secondary / neutral actions — soft surface, no Primary shadow. */
#operating-records .s02v2-form-actions .secondary-action,
#operating-records .s02v2-settlement-follow .secondary-action,
#operating-records .bp-create-actions .secondary-action,
#operating-records .bp-create-actions .bp-create-cancel,
#operating-records [data-s02v2-action="cancel-edit"],
#operating-records [data-s02v2-action="cancel-follow"],
#operating-records [data-s02v2-action="close-inventory-tool"],
#operating-records [data-s02v2-action="cancel-mode-switch"],
#operating-records [data-s02v2-action="cancel-investment-overlap"],
#operating-records [data-s02v2-action="pos-preview"],
#operating-records [data-s02v2-action="save-business-info"],
#operating-records [data-s02v2-action="dismiss-partner-duplicate"],
#operating-records [data-s02v2-action="force-save-counterparty"],
#operating-records [data-s02v2-action="open-receipt"],
#operating-records [data-s02v2-action="open-payment"],
#operating-records [data-s02v2-action="toggle-settled"],
#operating-records [data-s02v2-action="open-supplier-return"],
#operating-records [data-s02v2-action="open-inventory-write-off"],
#operating-records .s02v2-record-action:not(.s02v2-record-action--danger) {
  background: var(--surface-soft, #f3eee3);
  border-color: rgba(23, 33, 29, 0.14);
  box-shadow: none;
  color: var(--ink, #17211d);
}

#operating-records .s02v2-form-actions .secondary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-form-actions .secondary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .secondary-action:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .secondary-action:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-cancel:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .bp-create-actions .bp-create-cancel:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="cancel-edit"]:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="cancel-edit"]:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="save-business-info"]:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="save-business-info"]:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-preview"]:hover:not(:disabled):not([aria-disabled="true"]),
#operating-records [data-s02v2-action="pos-preview"]:focus-visible:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-record-action:not(.s02v2-record-action--danger):hover:not(:disabled):not([aria-disabled="true"]),
#operating-records .s02v2-record-action:not(.s02v2-record-action--danger):focus-visible:not(:disabled):not([aria-disabled="true"]) {
  background: #ebe4d6;
  border-color: rgba(23, 33, 29, 0.22);
  box-shadow: none;
}

/* Light Danger — remove / void / archive (restrained; never louder than Primary). */
#operating-records .s02v2-line-remove,
#operating-records .s02v2-record-action--danger,
#operating-records .bp-create-archive,
#operating-records [data-s02v2-action="confirm-partner-archive"] {
  background: #ffffff;
  border-color: rgba(185, 28, 28, 0.38);
  box-shadow: none;
  color: #b91c1c;
}

#operating-records .s02v2-line-remove:hover,
#operating-records .s02v2-line-remove:focus-visible,
#operating-records .s02v2-record-action--danger:hover,
#operating-records .s02v2-record-action--danger:focus-visible,
#operating-records .bp-create-archive:hover,
#operating-records .bp-create-archive:focus-visible,
#operating-records [data-s02v2-action="confirm-partner-archive"]:hover,
#operating-records [data-s02v2-action="confirm-partner-archive"]:focus-visible {
  background: rgba(185, 28, 28, 0.06);
  border-color: rgba(185, 28, 28, 0.5);
  box-shadow: none;
  color: #991b1b;
}

#operating-records .s02v2-line-remove:active,
#operating-records .s02v2-record-action--danger:active,
#operating-records .bp-create-archive:active,
#operating-records [data-s02v2-action="confirm-partner-archive"]:active {
  background: rgba(185, 28, 28, 0.1);
  box-shadow: none;
}

/* general-section02-sales-purchase-record-flow-001: session draft list + independent form rhythm */
.s02v2-session-drafts {
  margin: 0.75rem 0 1rem;
}
.s02v2-session-draft-row .s02v2-line-qty {
  white-space: normal;
}
.s02v2-form-actions--add-record {
  margin: 0.5rem 0 0.75rem;
}
.s02v2-transaction-block,
.s02v2-receipt-block,
.s02v2-payment-block,
.s02v2-purchase-details-block {
  margin: 0 0 0.75rem;
}

/*
 * general-section02-sales-income-grid-polish-001
 * General independent sales income only (`order` + independent-record-flow).
 * Desktop full-width rows:
 *   1) date | document | customer — 2 : 2 : 6
 *   2) product/service | quantity — 6 : 4
 *   3) unit price | amount — 4 : 6
 * Purchase / Restaurant / legacy order form keep their existing grids.
 */
.s02v2-sales-income-party {
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
}

.s02v2-sales-income-party > .bp-customer-combobox,
.s02v2-sales-income-party > .bp-picker {
  min-width: 0;
  width: 100%;
}

@media (min-width: 769px) {
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta.s02v2-order-meta {
    align-items: end;
    column-gap: 8px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 6fr);
    row-gap: 8px;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta.s02v2-order-meta > .s02v2-meta-date-field,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta.s02v2-order-meta > .qhc-field.s02v2-field,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta.s02v2-order-meta > .s02v2-sales-income-party {
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-entry {
    column-gap: 8px;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 12px;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--product,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--values {
    align-items: end;
    column-gap: 8px;
    grid-column: 1 / -1;
    row-gap: 8px;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--product {
    grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--product > .s02v2-line-field--product,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--product > .s02v2-line-field--quantity {
    grid-column: auto;
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-row--values {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-field--amount .s02v2-calculated-amount {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  /* Keep date|doc pairing; customer spans full width under them — no hard squeeze. */
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta.s02v2-order-meta > .s02v2-sales-income-party {
    grid-column: 1 / -1;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }
}

/*
 * general-section02-sales-product-selection-and-service-entry-001
 * 「商品｜服务」choice lives inside the existing 销售商品／服务名称 field slot.
 * No default type; no extra row; keeps desktop product|qty = 6:4.
 * Toggle buttons are content-sized (EN/ES/PT longer words); goods select matches qty height.
 */
[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-line-field--product[data-s02v2-sales-content] {
  min-width: 0;
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-slot {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chooser,
[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chosen {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-type {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-type-btn {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-sizing: border-box;
  color: #374151;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  /* Match S02/QHC control height (.qhc-module input → 40px). */
  height: 40px;
  line-height: 1.2;
  max-width: 100%;
  min-height: 40px;
  min-width: max-content;
  padding: 0 0.7rem;
  text-align: center;
  white-space: nowrap;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-type-btn[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

/* Services catalog sales source (opt-in only; General ignores these nodes). */
[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-service-sale-source {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  max-width: 100%;
  min-width: 0;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-service-sale-empty {
  margin: 0.4rem 0 0.35rem;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-service-catalog-select-wrap {
  margin-top: 6px;
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select-wrap,
[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-service-field {
  flex: 1 1 7rem;
  min-width: 0;
  position: relative;
  width: auto;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line, #d1d5db);
  border-radius: 8px;
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  /* Single-line control: same visual height as 数量 input (40px). */
  height: 40px;
  max-width: 100%;
  min-height: 40px;
  min-width: 0;
  overflow: hidden;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select-value {
  color: #111827;
  flex: 1 1 auto;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select-value--placeholder {
  color: #9ca3af;
  font-weight: 400;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-service-field input {
  box-sizing: border-box;
  height: 40px;
  min-height: 40px;
  min-width: 0;
  width: 100%;
}

/* Unset chooser: keep the two type buttons as a compact pair that can grow with language. */
[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chooser .s02v2-sales-content-type {
  width: 100%;
}

[data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chooser .s02v2-sales-content-type-btn {
  flex: 1 1 auto;
  min-width: max-content;
}

@media (max-width: 768px) {
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chosen {
    align-items: stretch;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chosen > .s02v2-sales-content-type,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-chooser .s02v2-sales-content-type {
    flex-wrap: wrap;
    width: 100%;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-content-type-btn {
    flex: 1 1 auto;
    /* Match ≤699 S02 input touch target (min-height: 44px). */
    height: 44px;
    min-height: 44px;
    min-width: max-content;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-service-field input {
    height: 44px;
    min-height: 44px;
  }

  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-goods-select-wrap,
  [data-s02v2-form="order"][data-s02v2-independent-record-flow="1"] .s02v2-sales-service-field {
    flex: 1 1 100%;
    width: 100%;
  }
}

/*
 * general-section02-purchase-expense-layout-rebuild-001
 * General independent purchase only (`purchase` + independent-record-flow).
 * Neutralize the shared 3-track purchase-layout so 交易资料／采购明细／付款情况
 * stack top-to-bottom (never as three side-by-side columns). Desktop ≥901 ratios:
 *   交易资料: date | document | supplier — 2 : 2 : 6
 *   采购明细: category | name — 2 : 8
 *             quantity | unit — 4 : 6
 *             unit price | amount — 4 : 6
 *   付款情况: full-width status + partial fields
 * Restaurant / legacy purchase keep the shared grids above.
 */
@media (min-width: 769px) {
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent {
    column-gap: 8px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-transaction-block,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-purchase-details-block,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-payment-block,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-form-actions--add-record,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-session-drafts,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-layout--independent > .s02v2-purchase-row--actions {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-field--category {
    grid-column: auto;
  }
}

@media (min-width: 901px) {
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta {
    align-items: start;
    column-gap: 8px;
    grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 6fr);
    row-gap: 8px;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .s02v2-meta-date-field,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .qhc-field.s02v2-field,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .s02v2-purchase-field--supplier {
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .qhc-field.s02v2-field > span,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .qhc-field.s02v2-field .s02v2-field-label-full {
    white-space: nowrap;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-field--supplier .bp-picker,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-field--supplier .s02v2-settlement-party {
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--catalog {
    align-items: end;
    column-gap: 8px;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
    row-gap: 8px;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--qty-unit {
    align-items: end;
    column-gap: 8px;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    row-gap: 8px;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--footer {
    align-items: end;
    column-gap: 8px;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    row-gap: 8px;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-field--amount .s02v2-calculated-amount {
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-payment-block .s02v2-purchase-field--payment {
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-payment-block .s02v2-settlement--compact {
    border: 0;
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-payment-block .s02v2-settlement-status.qhc-choice {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-payment-block .s02v2-settlement-status .qhc-choice-option,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-payment-block .s02v2-settlement-status .qhc-choice-option--compact {
    box-sizing: border-box;
    height: 40px;
    justify-content: center;
    max-width: none;
    min-height: 40px;
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-form-actions--add-record {
    display: flex;
    justify-content: flex-end;
    margin: 0.35rem 0 0.5rem;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-session-drafts {
    margin: 0.35rem 0 0.5rem;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--actions {
    justify-items: end;
    margin: 0;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-settlement-save-hint {
    margin: 0.25rem 0 0;
  }
}

@media (max-width: 900px) {
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--meta > .s02v2-purchase-field--supplier {
    grid-column: 1 / -1;
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--catalog,
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--qty-unit {
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-form-actions--add-record {
    display: flex;
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--qty-unit {
    align-items: end;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }

  [data-s02v2-form="purchase"][data-s02v2-independent-record-flow="1"] .s02v2-purchase-row--qty-unit > .s02v2-purchase-field--unit {
    max-width: none;
    min-width: 0;
    width: 100%;
  }
}
.s02-labour-source {
  margin: 0 0 0.75rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.s02-labour-source__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: center;
}

.s02-labour-source__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #26352e);
}

.s02-labour-source__control {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.s02-labour-source__source-label {
  font-size: 0.8rem;
  color: var(--muted, #617068);
}

.s02-labour-source__control select {
  box-sizing: border-box;
  width: auto;
  max-width: 100%;
  min-width: 10rem;
  min-height: 40px;
  border: 1px solid var(--line, #d9e2dc);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  background: #fff;
  color: var(--text, #26352e);
}

.s02-labour-source__period,
.s02-labour-source__status {
  margin: 0;
  color: var(--muted, #617068);
  font-size: 0.875rem;
}

.s02-labour-source__status {
  color: var(--text, #26352e);
}

@media (min-width: 901px) {
  .s02-labour-source__grid {
    grid-template-columns: max-content minmax(10rem, 16rem) minmax(0, 1fr);
    grid-template-areas:
      "title control period"
      "status status status";
  }
  .s02-labour-source__title { grid-area: title; }
  .s02-labour-source__control { grid-area: control; }
  .s02-labour-source__period { grid-area: period; justify-self: start; }
  .s02-labour-source__status { grid-area: status; }
}

@media (max-width: 430px) {
  .s02-labour-source__grid { grid-template-columns: minmax(0, 1fr); }
  .s02-labour-source__control select { width: 100%; max-width: none; }
}