/* Shipping workbench visual calibration only. No print, data, workflow, or state rules belong here. */

@media screen {
  /* Keep the page shell and company switcher as the page context, not a second workspace card. */
  .workspace:has(.shipping-list-layout) {
    max-width: var(--erp-content-max-width-standard);
  }

  .shipping-company-context {
    margin-bottom: var(--erp-section-gap);
  }

  /* The list layout is the work region, so its legacy outer panel stays visually quiet. */
  .shipping-list-layout.erp-list-layout {
    display: grid;
    gap: var(--erp-section-gap);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .shipping-list-layout > .erp-list-header {
    display: none;
  }

  .shipping-list-layout .erp-list-toolbar {
    align-items: center;
    min-height: 56px;
    margin: 0;
    padding: var(--erp-space-2) var(--erp-space-3);
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
  }

  /* Company is already selected by the dedicated switcher directly above the work region. */
  .shipping-list-layout .shipping-toolbar-context {
    display: none;
  }

  .shipping-list-layout .erp-list-actions {
    margin-left: auto;
  }

  .shipping-list-layout #newShipmentDraft {
    width: auto;
    padding-inline: var(--erp-space-3);
  }

  .shipping-list-layout #newShipmentDraft::after {
    content: "新增出貨";
    margin-left: 6px;
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-semibold);
    white-space: nowrap;
  }

  /* Keep section headings as structure and give only their list body a Surface. */
  .shipping-list-layout .erp-list-content {
    display: grid;
    gap: var(--erp-section-gap);
    max-height: none;
    overflow: visible;
  }

  .shipping-list-layout .erp-list-section {
    display: grid;
    gap: var(--erp-space-3);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .shipping-list-layout .erp-list-section-header {
    align-items: baseline;
    padding-inline: var(--erp-space-1);
  }

  .shipping-list-layout .erp-list-section-header h3 {
    color: var(--erp-text);
    font-size: 22px;
    font-weight: var(--erp-font-weight-semibold);
    line-height: var(--erp-line-height-tight);
  }

  .shipping-list-layout .erp-list-section-header p,
  .shipping-list-layout .erp-list-section-meta .erp-list-count {
    color: var(--erp-text-muted);
    font-size: var(--erp-font-size-sm);
    font-weight: var(--erp-font-weight-regular);
  }

  .shipping-list-layout .erp-list-section-content {
    gap: 0;
    max-height: min(52vh, 620px);
    overflow: auto;
    border: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: var(--erp-radius-lg);
    background: var(--erp-surface);
    box-shadow: var(--erp-shadow-xs);
  }

  .shipping-list-layout .erp-list-section-content > .erp-list-row {
    min-height: 76px;
    border: 0;
    border-bottom: var(--erp-border-width) var(--erp-border-style) var(--erp-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .shipping-list-layout .erp-list-section-content > .erp-list-row:last-child {
    border-bottom: 0;
  }

  .shipping-list-layout .erp-list-section-content > .erp-list-row:hover {
    border-color: var(--erp-border);
    background: var(--erp-surface-hover);
    box-shadow: none;
  }

  .shipping-shipment-row {
    grid-template-columns: minmax(200px, 1.35fr) minmax(104px, .6fr) minmax(110px, .65fr) minmax(110px, .65fr) minmax(110px, .65fr) minmax(94px, .5fr) !important;
  }

  .shipping-source-row {
    grid-template-columns: minmax(200px, 1.35fr) minmax(104px, .6fr) minmax(140px, .8fr) minmax(104px, .6fr) minmax(116px, .7fr) !important;
  }

  .shipping-list-layout .erp-list-cell > strong,
  .shipping-list-layout .erp-list-cell > b {
    color: var(--erp-text);
    font-weight: var(--erp-font-weight-semibold);
  }

  .shipping-list-layout .erp-list-cell > small,
  .shipping-list-layout .shipping-cell--status > small,
  .shipping-list-layout .shipping-cell--receivable > small {
    color: var(--erp-text-muted);
    font-size: 13px;
    line-height: var(--erp-line-height-normal);
  }

  .shipping-list-layout .shipping-quantity-cell {
    font-variant-numeric: tabular-nums;
  }

  .shipping-list-layout .shipping-quantity-cell b {
    white-space: nowrap;
  }

  .shipping-list-layout .erp-list-status {
    min-height: 22px;
    margin-top: var(--erp-space-1);
    padding: 3px 8px;
  }

  .shipping-list-layout .shipping-source-action {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: var(--erp-radius-md);
    color: #fff;
    background: var(--erp-primary);
  }

  .shipping-list-layout .shipping-source-action > b,
  .shipping-list-layout .shipping-source-action > .tf-icon {
    color: #fff;
  }

  .shipping-list-layout .shipping-source-row:hover .shipping-source-action,
  .shipping-list-layout .shipping-source-row:focus-visible .shipping-source-action {
    color: #fff;
    background: var(--erp-primary-hover);
  }

  .shipping-list-layout .shipping-source-row:active .shipping-source-action {
    color: #fff;
    background: var(--erp-primary-active);
  }

  .shipping-list-layout .erp-list-empty {
    min-height: 132px;
    border: 0;
    border-radius: 0;
    background: var(--erp-surface-muted);
  }
}

@media screen and (max-width: 1100px) {
  .shipping-list-layout .erp-list-section-content > .shipping-shipment-row,
  .shipping-list-layout .erp-list-section-content > .shipping-source-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  /* The legacy narrow layout spans every cell across one column. Reset that
     placement before using the two-column shipping reading pattern. */
  .shipping-list-layout .erp-list-section-content > .erp-list-row .erp-list-cell,
  .shipping-list-layout .erp-list-section-content > .erp-list-row .erp-list-amount {
    grid-column: auto;
  }

  .shipping-list-layout .erp-list-section-content > .shipping-shipment-row .erp-list-cell--primary,
  .shipping-list-layout .erp-list-section-content > .shipping-source-row .erp-list-cell--primary {
    grid-column: 1 / -1;
  }
}

@media screen and (max-width: 760px) {
  .shipping-list-layout.erp-list-layout {
    gap: var(--erp-space-4);
  }

  .shipping-list-layout .erp-list-toolbar {
    min-height: 48px;
    padding: var(--erp-space-2);
  }

  .shipping-list-layout .erp-list-section-header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--erp-space-1);
  }

  .shipping-list-layout .erp-list-section-header h3 {
    font-size: 20px;
  }

  .shipping-list-layout .erp-list-section-meta {
    width: auto;
  }

  .shipping-list-layout .erp-list-section-content {
    max-height: none;
    overflow: visible;
  }

  .shipping-list-layout .erp-list-section-content > .erp-list-row {
    min-height: auto;
    padding: var(--erp-space-3);
  }
}

@media screen and (max-width: 480px) {
  .shipping-list-layout .erp-list-actions {
    display: flex;
    width: 100%;
    justify-content: flex-end;
  }

  .shipping-list-layout #newShipmentDraft {
    min-width: 0;
  }

  .shipping-list-layout .erp-list-section-header {
    padding-inline: 0;
  }

  .shipping-list-layout .erp-list-section-content > .shipping-shipment-row,
  .shipping-list-layout .erp-list-section-content > .shipping-source-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .shipping-list-layout .erp-list-section-content > .erp-list-row .erp-list-cell--primary,
  .shipping-list-layout .erp-list-section-content > .erp-list-row .erp-list-cell,
  .shipping-list-layout .erp-list-section-content > .erp-list-row .erp-list-amount {
    grid-column: 1 / -1;
  }
}