/* Shared desktop appearance. Keep business layout and semantic states intact. */
@media (min-width: 821px) {
  :root, :host {
    --bg: #fff;
    --bg-elevated: #f9f9f9;
    --card: #fff;
    --border: rgba(0, 0, 0, .08);
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --accent: #0071e3;
    --apple-bg: #fff;
    --apple-surface: #fff;
    --apple-surface-strong: #fff;
    --apple-border: var(--border);
    --apple-border-strong: rgba(0, 0, 0, .16);
    --apple-text: var(--text);
    --apple-muted: var(--text-secondary);
    --apple-accent: var(--accent);
    --apple-shadow: none;
    --apple-radius: 10px;
    --control-height: 36px;
    --control-radius: 8px;
  }
  body, body.report-page { background: #fff; color: var(--text); -webkit-font-smoothing: antialiased; }
  body, input, select, textarea, button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; letter-spacing: 0; }
  .report-side { background: #f9f9f9; border: 0; border-radius: 12px; box-shadow: none; backdrop-filter: none; }
  .report-main-panel, .report-surface, .voucher-card, .voucher-upload-shell, .voucher-status-card, .voucher-section-block, .invoice-editor, .report-table-wrap, .table-panel { background: #fff; border-color: var(--border); box-shadow: none; border-radius: 10px; }
  .report-main-panel { backdrop-filter: none; }
  .report-nav-head { background: transparent; border-color: transparent; border-radius: 8px; }
  .report-nav-head:hover { background: rgba(0, 0, 0, .035); }
  .report-segment, .report-segment-btn { border-radius: 8px; }
  .report-nav-btn { border-radius: 8px; }
  .report-nav-btn.active { background: #fff; border-color: transparent; transform: none; }
  .report-nav-btn.active :is(strong, span) { color: var(--accent); }
  .report-nav-btn strong, .report-nav-head, .report-brand h1 { font-weight: 500; }
  .report-hero h2, .invoice-page-head h2 { display: none; }
  .report-hero { background: transparent; }
  .workbench-main, .workbench-panel .workbench-surface, .workbench-scroll, .workbench-embed-shell, .workbench-embed-frame { background: #fff; }
  .sales-toolbar-grid .filter-field-inline > label, .filter-field-inline > label { font-weight: 400; font-size: 12px; }
  .table-toolbar, .sync-row.inventory-sales-filter-row { row-gap: 8px; }
  :is(.ui-button, .btn-query, .btn-refresh, .apple-btn, .report-link, .report-export-btn, .btn, .payroll-primary-btn, .payroll-secondary-btn, .bank-primary-btn, .bank-secondary-btn) {
    height: 36px; min-height: 36px; border-radius: 8px; padding: 0 12px; font-size: .82rem; font-weight: 500; box-shadow: none;
  }
  :is(.apple-btn, .report-link).primary { background: var(--accent); border-color: var(--accent); color: #fff; }
  :is(.apple-btn, .report-link).primary:hover { background: var(--accent-hover); transform: none; }
  :is(.ui-input, .ui-select, .ui-control, .report-input, .sku-performance-select, .field input, .field select, .form-row input, .form-row select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    height: 36px; min-height: 36px; border-radius: 8px; border-color: var(--border); background: #fff; padding: 0 12px; font-size: .82rem;
  }
  :is(.replenishment-drawer, .finance-drawer, .profit-drilldown-drawer, .modal-inner, .invoice-edit-dialog, .payroll-dialog-inner, .bank-edit-dialog, .editor) :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    height: 36px; min-height: 36px; border-radius: 8px; border-color: var(--border); background: #fff; font-size: .82rem;
  }
  textarea { border-radius: 8px; border-color: var(--border); }
  :is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  body table th { font-weight: 500; }
  body table thead th { background: #fafafb; }
  :is(.status-pill, .ui-pill, .report-chip) { font-weight: 500; }
  :is(.report-table, .inventory-sales-table, .material-table, .finance-table, .bank-table, .invoice-table, .payroll-table) { font-variant-numeric: tabular-nums; }
  :is(.replenishment-drawer-backdrop, .finance-drawer-backdrop, .profit-drilldown-backdrop, .bank-modal-overlay, .invoice-preview-overlay, .payroll-dialog, .modal, .backdrop) { background: rgba(29, 29, 31, .24); }
  :is(.replenishment-drawer, .finance-drawer, .profit-drilldown-drawer, .editor) {
    background: #fff; color: var(--text); border-left: 1px solid var(--border); box-shadow: -8px 0 28px rgba(0, 0, 0, .10);
  }
  :is(.modal-inner, .invoice-preview-dialog, .invoice-edit-dialog, .invoice-adjustment-dialog, .invoice-batch-edit-dialog, .invoice-payment-audit-dialog, .payroll-dialog-inner, .bank-edit-dialog) {
    background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
  }
  :is(.replenishment-drawer-head, .finance-drawer-head, .invoice-preview-dialog-head, .payroll-dialog-head, .bank-dialog-head, .editor-head) { background: #fff; border-color: var(--border); }
  :is(.replenishment-drawer, .finance-drawer, .profit-drilldown-drawer, .modal-inner, .invoice-edit-dialog, .payroll-dialog-inner, .bank-edit-dialog, .editor) :is(h2, h3) { font-weight: 600; }
  :is(.replenishment-drawer, .finance-drawer, .profit-drilldown-drawer, .modal-inner, .invoice-edit-dialog, .payroll-dialog-inner, .bank-edit-dialog, .editor) :is(label, .field-label) { font-weight: 500; }
  :is(.drawer-card, .source-drawer-panel, .voucher-step-index) { background: #f9f9f9; border-color: var(--border); box-shadow: none; }
}

/* Twelve months plus summary: fill ordinary windows without oversized rows. */
@media (min-width: 821px) {
  .operating-profit-workspace .profit-table-section:has(.operating-profit-table tbody > tr:nth-child(13):last-child) {
    container-type: size;
  }
  .profit-table-section:has(.operating-profit-table tbody > tr:nth-child(13):last-child) .operating-profit-monthly-wrap {
    height: min(100%, 714px);
  }
  .profit-table-section:has(.operating-profit-table tbody > tr:nth-child(13):last-child) .operating-profit-table thead th {
    height: 36px;
  }
  .profit-table-section:has(.operating-profit-table tbody > tr:nth-child(13):last-child) .operating-profit-table tbody td {
    height: clamp(40px, calc((100cqh - 38px) / 13), 52px);
  }
}

/* Page tabs share the account switcher's geometry and selection treatment. */
@media (min-width: 821px) {
  .operating-profit-workspace, main.report-page { padding-top: 0; }
  :is(.operating-profit-tabs, .filing-tabs, .report-segment) {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #f2f4f7;
    box-sizing: border-box;
  }
  :is(.operating-profit-tab, .filing-tab, .report-segment-btn, .company-account-option, .payroll-account-option) {
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: 0;
  }
  :is(.operating-profit-tab, .filing-tab, .report-segment-btn).active {
    color: var(--accent);
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
  }
}

/* Invoice list fits the available desktop width, including its action column. */
@media (min-width: 821px) {
  body .invoice-table { min-width: 0; width: 100%; }
  body .invoice-table :is(th, td) { min-width: 0; padding-left: 6px; padding-right: 6px; overflow: hidden; text-overflow: ellipsis; }
  body .invoice-table th { white-space: normal; overflow-wrap: anywhere; }
  body .invoice-table .invoice-actions-cell { min-width: 0; white-space: normal; overflow: visible; }
  body .invoice-table :is(th, td):nth-child(1) { width: 2.5%; }
  body .invoice-table :is(th, td):nth-child(2) { width: 10%; }
  body .invoice-table :is(th, td):nth-child(3) { width: 5%; }
  body .invoice-table :is(th, td):nth-child(4) { width: 11%; }
  body .invoice-table :is(th, td):nth-child(5) { width: 11%; }
  body .invoice-table :is(th, td):nth-child(6) { width: 8%; }
  body .invoice-table :is(th, td):nth-child(7) { width: 8%; }
  body .invoice-table :is(th, td):nth-child(8) { width: 7%; }
  body .invoice-table :is(th, td):nth-child(9) { width: 9%; }
  body .invoice-table :is(th, td):nth-child(10) { width: 7%; }
  body .invoice-table :is(th, td):nth-child(11) { width: 7%; }
  body .invoice-table :is(th, td):nth-child(12) { width: 14.5%; }
}

@media (min-width: 821px) {
  .payment-toolbar-slot:not([hidden]) { display: contents; }
  .payment-toolbar-slot .field { display: grid; gap: 4px; min-width: 0; font-size: 12px; color: var(--text-secondary); }
  .payment-toolbar-slot .field:not(.search) { width: 108px; }
  .payment-toolbar-slot .search { flex: 1 1 180px; }
  .payment-toolbar-slot .btn { flex: 0 0 auto; }
  .payments-embedded .toolbar-row.secondary { display: flex; align-items: end; justify-content: flex-start; gap: 24px; flex-wrap: wrap; }
  .payments-embedded .toolbar-row.secondary .message:empty { display: none; }
  .payments-embedded .toolbar-row.secondary .total { align-items: flex-start; text-align: left; }
  .payments-embedded #taxEstimate strong { color: var(--accent); font-weight: 500; }
}

@media (min-width: 821px) {
  main.report-page { padding-bottom: 0; }
  .payments-embedded .page, html.embed-workbench .payments-embedded .page { padding-bottom: 0; }
  .report-content .fp-payment-frame { min-height: 0; display: block; }
}
@media (min-width: 821px) {
  .payment-toolbar-slot .btn { border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer; }
  .payment-toolbar-slot .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
}

@media (min-width: 821px) {
  .payments-embedded .content { overflow-y: auto; padding-bottom: 12px; }
  .tax-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
  .breakdown-panel { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; align-self: start; }
  .breakdown-panel header { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; background: #fbfbfd; border-bottom: 1px solid var(--border); }
  .breakdown-panel header strong { font-size: 14px; font-weight: 500; }
  .breakdown-panel header span, .breakdown-line small, .payment-list-heading span { color: var(--text-secondary); font-size: 12px; font-weight: 400; }
  .breakdown-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; height: 56px; box-sizing: border-box; padding: 8px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
  .breakdown-line:last-child { border-bottom: 0; }
  .breakdown-line div { min-width: 0; }
  .breakdown-line small { display: block; line-height: 1.5; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .breakdown-line > span { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .breakdown-line.emphasis { background: #f7f9fc; font-weight: 500; }
  .breakdown-panel:last-child .breakdown-amount strong { color: var(--accent); }
  .breakdown-placeholder { grid-column: 1 / -1; padding: 20px 0; color: var(--text-secondary); font-size: 13px; }
  .payment-list-heading { display: flex; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; margin-bottom: 10px; }
  .payments-embedded .content > .list { height: auto; max-height: 300px; grid-template-rows: minmax(0, auto) 36px; }
  .payments-embedded .content > .list table { min-width: 0; }
}

@media (min-width: 821px) {
  .payments-embedded .toolbar-row.secondary .total { display: none; }
  .payments-embedded .toolbar-row.secondary:has(.message:empty):not(:has(#resetFilters)) { display: none; }
  .payments-embedded .content { display: grid; grid-template-rows: minmax(0, 1fr) 24px 180px; gap: 12px; overflow: hidden; padding-bottom: 0; }
  .payments-embedded .tax-breakdown { min-height: 0; margin-bottom: 0; }
  .payments-embedded .breakdown-panel { min-height: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-self: stretch; }
  .payments-embedded .breakdown-panel header { flex: 0 0 auto; }
  .payments-embedded .breakdown-body { min-height: 0; overflow-y: auto; flex: 1; }
  .payments-embedded .payment-list-heading { margin: 0; }
  .payments-embedded .content > .list { height: 180px; max-height: none; grid-template-rows: minmax(0, 1fr) 36px; }
}

@media (min-width: 821px) {
  .breakdown-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .breakdown-heading > strong { white-space: nowrap; }
  .breakdown-amount { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .breakdown-amount small { color: var(--text-secondary); font-size: 12px; }
  .breakdown-amount strong { font-variant-numeric: tabular-nums; }
}

@media (min-width: 821px) {
  html.embed-workbench .payments-embedded .page, .payments-embedded .page { padding-left: 0; padding-right: 0; }
  #financialConfirm[hidden] { display: none; }
}

@media (min-width: 821px) {
  #financialConfirm { width: 136px; min-width: 136px; flex: 0 0 136px; }
  #financialConfirm .company-account-option { min-width: 0; padding: 0 8px; }
  .financial-actions-menu { position: relative; }
  .financial-actions-menu summary { list-style: none; height: 36px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; }
  .financial-actions-menu summary::-webkit-details-marker { display: none; }
   .financial-actions-menu summary::after { content: ''; width: 8px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 5 4 2 7 5M1 9 4 12 7 9' fill='none' stroke='%23555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
  .financial-actions-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 160px; padding: 6px; display: grid; gap: 4px; border: 1px solid var(--border); border-radius: 10px; background: #fff; box-shadow: 0 6px 22px rgba(0,0,0,.1); }
  .financial-actions-popover .report-export-btn { width: 100%; text-align: left; border: 0; background: #fff; }
  .financial-actions-popover .report-export-btn:hover { background: #f7f7f9; }
  .report-toolbar:has(#financialActions[style*="flex"]) { flex-wrap: nowrap; }
  .report-toolbar:has(#financialActions[style*="flex"]) .report-field { min-width: 100px; }
  .report-toolbar:has(#financialActions[style*="flex"]) #custodyBalance { flex: 0 0 auto; }
}

@media (min-width: 821px) {
  body .invoice-table .invoice-pill-business-category { width: calc(5em + 20px); min-width: calc(5em + 20px); box-sizing: border-box; }
}

@media (min-width: 821px) {
  body .bank-toolbar-main { grid-template-columns: 164px repeat(3, 96px) minmax(160px, 1fr) repeat(2, 88px) 80px; }
  body .bank-toolbar-secondary { grid-template-columns: 108px 80px 128px minmax(0, 1fr) auto; }
  body .bank-toolbar-main .bank-account-filter, body .bank-toolbar-main .bank-filter-search { grid-column: auto; }
}

/* Drawer typography is shared across pages, including the tax editor shadow root. */
@media (min-width: 821px) {
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(p, label, .field-label, .source-trace-title, .source-trace-formula, .source-group-row, .source-detail-summary, .operating-note, .review-status, .fp-field) {
    font-size: 13px; line-height: 20px; font-weight: 400;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(h2, .finance-drawer-title > strong, .fc-drawer-head > strong, .panel-head > strong) {
    font-size: 14px; line-height: 20px; font-weight: 500;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(h3, h4, .drawer-card-head, .source-trace-metric > strong, .finance-drawer-period > strong, .adjustment-history-main > strong, .adjustment-history-side > strong) { font-size: 13px; line-height: 20px; font-weight: 500; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] .replenishment-advice-quantity { font-size:13px; line-height:20px; font-weight:500; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] .replenishment-advice-reason { font-size: 12px; line-height: 18px; font-weight: 400; }
  #replenishmentAdviceBackdrop .replenishment-close { font-size: 13px; line-height: 20px; }
  #replenishmentAdviceBackdrop .replenishment-drawer-head h2 { font-size: 14px; line-height: 20px; font-weight: 500; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(.finance-drawer-title > span, .finance-drawer-period, .replenishment-drawer-head p, .replenishment-planning-meta, #replenishmentPlanningStatus, small, .fp-note, .fc-muted, .source-trace-metric > span, .adjustment-history-side > span) {
    font-size: 12px; line-height: 18px; font-weight: 400;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(input, select, textarea, button, .filing-file-picker, .review-link-btn, .fp-btn, .fc-nav, .replenishment-close) {
    font-size: 13px; line-height: 20px; font-family: inherit;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] button { font-weight: 500; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor) :is(.btn, .btn-query, .btn-refresh, .ui-button, .apple-btn, .report-export-btn, .fc-social-save, .filing-file-picker, .review-link-btn, .fp-btn, .fc-nav, .replenishment-close) {
    height: 36px; min-height: 36px; box-sizing: border-box; padding: 0 12px; border-radius: 8px; box-shadow: none;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor) :is(input, select):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
    height: 36px; min-height: 36px; box-sizing: border-box; border-radius: 8px;
  }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor)[class] :is(th, td) { font-size: 13px; line-height: 20px; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor) th { font-weight: 500; }
  :is(.replenishment-drawer, .finance-drawer, .fc-drawer, .fp-dialog, .editor) .finance-drawer-close {
    width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1;
  }
}

/* Shared inline disclosures; action menus and SKU pickers retain their layout. */
details:not(.financial-actions-menu):not(.perf-trend-sku-dropdown) > summary {
  position: relative;
  padding-left: 16px;
  list-style: none;
  cursor: pointer;
  color: var(--text-secondary, #6e6e73);
  font-weight: 400;
}
details > summary::marker { content: ''; }
details > summary::-webkit-details-marker { display: none; }
details:not(.financial-actions-menu):not(.perf-trend-sku-dropdown) > summary::before {
  content: '';
  position: absolute;
  left: 2px;
  top: calc(50% - 3px);
  width: 5px;
  height: 5px;
  border-right: 1px solid #86868b;
  border-bottom: 1px solid #86868b;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}
details[open]:not(.financial-actions-menu):not(.perf-trend-sku-dropdown) > summary::before { transform: rotate(45deg); }
details > summary:focus-visible { outline: 2px solid var(--accent, #0071e3); outline-offset: 3px; border-radius: 3px; }
.op-batch-disclosure > summary { font-size: 12px; line-height: 20px; }
.operating-profit-cost-columns .operating-profit-simple-table .op-batch-transactions-row[hidden] { display: none; }
.operating-profit-cost-columns .operating-profit-simple-table .op-batch-transactions-row > td {
  white-space: normal;
  overflow: visible;
  padding: 6px 12px 10px;
  background: #fbfbfd;
}
.op-batch-transactions { display: grid; gap: 8px; }
.op-batch-transaction { min-width: 0; font-size: 12px; line-height: 20px; }
.op-batch-transaction-main { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.op-batch-transaction-note { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-secondary, #6e6e73); }
.op-batch-edit { border: 0; background: transparent; color: var(--accent, #0071e3); padding: 2px 0; margin-left: auto; font: inherit; cursor: pointer; }
.op-batch-edit:focus-visible { outline: 2px solid var(--accent, #0071e3); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { details > summary::before { transition: none; } }