/* Reference workflow: Order -> Invoice -> Payment. Paper and other modules are unchanged. */
@media screen {
  :is(#orderView, #invoiceView, #receivableView) {
    --sales-space: 16px;
    --sales-field-height: 40px;
  }

  #orderForm,
  #invoiceView .invoice-preview-panel,
  #receivableView .receivable-payment-panel {
    padding: var(--sales-space);
    min-width: 0;
  }

  #orderForm .order-form-head,
  #invoiceView .invoice-preview-panel > .panel-head,
  #receivableView .receivable-payment-panel > .panel-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 12px;
    margin: 0 0 var(--sales-space);
    padding: 0 0 12px;
    border-bottom: 1px solid var(--ui-line);
  }

  #orderForm .order-form-head h2,
  #invoiceView .invoice-preview-panel > .panel-head h2,
  #receivableView .receivable-payment-panel > .panel-head h2 {
    margin: 0;
  }

  #receivableView .receivable-payment-panel > .panel-head > div { text-align: left; }

  :is(#orderForm, #receivablePaymentForm) label {
    min-width: 0;
    gap: 4px;
  }

  #orderView #orderForm :is(input, select),
  #receivableView #receivablePaymentForm :is(input, select) {
    box-sizing: border-box;
    height: var(--sales-field-height);
    min-height: var(--sales-field-height);
    max-width: 100%;
  }

  #orderForm .order-form-head { align-items: flex-end; }
  #orderForm .order-date-field { flex: 0 1 150px; }
  #orderForm .order-form-head > div { padding-bottom: 5px; }
  #orderForm .items-list { gap: 12px; margin-bottom: var(--sales-space); }
  #orderView #orderForm .item-row + .item-row { padding-top: 12px; }
  #orderView #orderForm .item-row > .removeItemBtn { align-self: end; height: var(--sales-field-height); }
  #orderForm #distributorCard { margin: 8px 0 var(--sales-space); color: var(--ui-muted); }
  #orderForm .order-form-footer { margin-top: var(--sales-space); padding-top: 12px; gap: 12px; border-top-color: var(--ui-line); }

  #orderView .report-metrics,
  #receivableView .receivable-metrics {
    --ui-dashboard-card-height: 96px;
    --dashboard-card-min-height: 96px;
    --ui-dashboard-number-size: 20px;
    --type-metric-size: 20px;
    --dashboard-number-size: 20px;
    --ui-dashboard-card-padding: 8px 12px;
    --dashboard-card-padding: 8px 12px;
  }
  #orderView .report-metric,
  #receivableView .finance-metric {
    grid-template-rows: auto minmax(28px, 1fr) auto;
    min-height: 96px;
  }
  #orderView .report-metric > .dashboard-period-label { padding: 0; min-height: 0; white-space: normal; text-align: right; }
  #orderView .report-metric > strong,
  #receivableView .finance-metric > strong { margin-block: 0; }
  #orderView .report-metric .dashboard-card-context { flex-wrap: wrap !important; white-space: normal; }

  :is(#orderView, #invoiceView, #receivableView) .table-wrap {
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    max-width: 100%;
  }
  :is(#orderView .report-table, #invoiceView .invoice-order-table,
      #invoiceView .invoice-history-table, #receivableView .receivable-table) :is(th, td) {
    padding: 8px 10px;
    vertical-align: middle;
  }
  :is(#orderView .report-table, #invoiceView .invoice-order-table,
      #invoiceView .invoice-history-table, #receivableView .receivable-table) tbody tr:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: -2px;
  }

  #invoiceView .invoice-workspace-toolbar { gap: 12px; margin-bottom: var(--sales-space); align-items: center; }
  #invoiceWorkspaceTools .filter-action-toolbar.hidden { display: none !important; }
  #invoiceView .invoice-view-tabs { flex: 0 1 auto; min-width: 0; }
  #invoiceView .segmented-view-tab { padding-inline: 12px; }
  #invoiceView .invoice-preview-panel > .panel-head .report-actions { width: auto; margin: 0; }
  #invoiceView .invoice-preview-icon-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #invoiceView .invoice-preview-icon-toolbar > button {
    width: 36px;
    height: 36px;
    min-height: 36px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    box-shadow: none;
  }
  #invoiceView .invoice-preview-icon-toolbar > button:hover:not(:disabled) { background: var(--ui-hover); }
  #invoiceView .sales-panel-feedback { margin: 0 0 12px; }

  #receivableView #receivablePaymentForm { gap: 12px; }
  #receivableView #receivablePaymentSummary .receivable-grand-total { gap: 12px 16px; margin-bottom: var(--sales-space); border-bottom-color: var(--ui-line); }
  #receivableView #receivablePaymentForm .form-actions { align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
  #receivableView #receivablePaymentSubmitBtn { margin-left: auto; min-width: 112px; }
  #receivableView #receivablePaymentForm .sales-panel-feedback { grid-column: 1 / -1; }
  #receivableView .receivable-history-toggle {
    color: var(--ui-ink);
    background: transparent;
    border: 1px solid var(--ui-line);
    border-radius: 7px;
    min-height: 40px;
    margin-top: 12px;
    box-shadow: none;
  }
  #receivableView .receivable-history-toggle:hover { background: var(--ui-hover); }
  #receivableView .receivable-history-toggle:disabled { opacity: .55; }

  .sales-panel-feedback { display: grid; gap: 3px; min-width: 0; }
  .sales-save-feedback { margin: 0; color: var(--ui-ink); overflow-wrap: anywhere; }
  .sales-save-feedback[data-state="error"] { color: var(--theme-negative, #a33333); }
  .sales-save-feedback[hidden] { display: none; }
  .sales-cloud-state { color: var(--ui-muted); overflow-wrap: anywhere; }
  .sales-cloud-state[data-tone="error"] { color: var(--theme-negative, #a33333); }
  .sales-cloud-state:empty { display: none; }

  @media (pointer: coarse), (max-width: 767px) {
    :is(#orderView, #invoiceView, #receivableView) { --sales-field-height: 44px; }
    #invoiceView .invoice-workspace-toolbar { align-items: flex-start; }
    #invoiceView .invoice-view-tabs { display: flex; }
    #invoiceView .segmented-view-tab { min-height: 44px; white-space: normal; }
    #invoiceView .invoice-workspace-tools { max-width: 100%; }
    #orderForm .actions > button,
    #orderForm #addItemBtn,
    #receivablePaymentForm .form-actions > button { min-height: 44px; }
    #invoiceView .invoice-preview-icon-toolbar > button { width: 44px; height: 44px; min-height: 44px; }
    #receivableView .receivable-history-toggle { min-height: 44px; }
  }

  @media (max-width: 420px) {
    #orderView .report-metrics { grid-template-columns: minmax(0, 1fr) !important; }
    #orderView .report-metric { min-height: 88px; }
    #invoiceView .invoice-preview-panel > .panel-head { flex-wrap: wrap; }
    #receivableView #receivablePaymentForm .form-actions { flex-wrap: wrap; }
  }
}

@layer aphaw-typography {
  @media screen {
    .sales-cloud-state { font-size: var(--type-helper-size) !important; }
  }
}

@media print {
  .sales-panel-feedback { display: none !important; }
}