/* Shared screen-only surface system. Print templates remain unchanged. */
@media screen {
  :root {
    --ui-page: #f3f6f5;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8faf9;
    --ui-surface-muted: #f1f5f4;
    --ui-line: #d8e2df;
    --ui-line-soft: #e6eeeb;
    --ui-ink: #203638;
    --ui-muted: #52635b;
    --ui-accent-soft: #eaf6f1;
    --ui-shadow: 0 1px 2px rgba(32, 54, 56, .035), 0 6px 16px rgba(32, 54, 56, .035);
  }

  html,
  body {
    background: var(--ui-page) !important;
  }

  .app,
  .main {
    background: transparent !important;
  }

  .main > .topbar,
  .main-content > .topbar {
    border-bottom: 1px solid var(--ui-line) !important;
    background: transparent !important;
  }

  .main > .topbar {
    margin-bottom: 12px !important;
  }

  .main > #moduleShell,
  .main > #quoteSection,
  .main > #quotePreviewSection,
  .main > #costSection,
  .main > #costPreview {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #moduleShell > .section-body:not(.hidden),
  #moduleShell > .order-context-bar:not(.hidden),
  #moduleShell > .order-detail-tabs:not(.hidden) {
    margin-top: 10px !important;
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  #moduleShell > .section-body:not(.hidden) {
    padding: 14px !important;
  }

  #moduleShell > #workbenchTab:not(.hidden) {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #moduleShell > .order-context-bar:not(.hidden),
  #moduleShell > .order-detail-tabs:not(.hidden) {
    padding: 8px 10px !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: none !important;
  }

  #moduleShell > .order-detail-tabs:not(.hidden) {
    overflow-x: auto;
  }

  .main > #quoteSection > .section-head,
  .main > #quoteSection > .section-body,
  .main > #quotePreviewSection > .section-head,
  .main > #quotePreviewSection > .section-body,
  .main > #costPreview > .section-head,
  .main > #costPreview > .section-body {
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .main > #quoteSection > .section-head,
  .main > #quotePreviewSection > .section-head,
  .main > #costPreview > .section-head {
    background: var(--ui-surface-soft) !important;
  }

  .main > #quoteSection > .section-body,
  .main > #quotePreviewSection > .section-body,
  .main > #costPreview > .section-body {
    margin-top: 10px !important;
    background: var(--ui-surface) !important;
  }

  #costSection > .section {
    border: 1px solid var(--ui-line) !important;
    border-radius: 8px !important;
    background: var(--ui-surface) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  #costSection .section-head,
  #costSection .cost-section-head {
    background: var(--ui-surface-soft) !important;
    border-color: var(--ui-line-soft) !important;
  }

  /* Cost and profit detail surfaces stay compact on screen; print templates are untouched. */
  #costSection .order-labor-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  #costSection .order-labor-field label,
  #costSection label.order-labor-field {
    display: grid;
    gap: 5px;
    min-width: 0;
    margin: 0;
  }

  #costSection .order-labor-field > input,
  #costSection .order-labor-field > select,
  #costSection .order-labor-field label > input,
  #costSection .order-labor-field label > select,
  #costSection label.order-labor-field > input,
  #costSection label.order-labor-field > select {
    width: 100%;
    min-width: 0;
    height: 34px;
    margin-top: 5px;
    font-size: 12px;
  }

  #costSection .order-labor-field label > input,
  #costSection .order-labor-field label > select,
  #costSection label.order-labor-field > input,
  #costSection label.order-labor-field > select {
    margin-top: 0;
  }

  #costSection .order-installation-adjustments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 8px;
    margin-top: 10px;
  }

  #costSection .order-installation-adjustments .install-adjustments {
    min-width: 0;
    padding: 10px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 6px;
    background: var(--ui-surface);
  }

  #costSection .order-installation-adjustments .install-adjustments + .install-adjustments {
    padding-top: 10px;
    border-top: 1px solid var(--ui-line-soft);
  }

  #costSection .order-installation-adjustments .install-adjust-row {
    grid-template-columns: minmax(0, 1fr) 78px 44px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  #costSection .order-installation-adjustments .install-adjust-row input {
    min-width: 0;
    width: 100%;
    height: 34px;
    box-sizing: border-box;
  }

  #costSection .order-installation-adjustments .install-adjust-row button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 34px;
    min-height: 34px;
    white-space: nowrap;
    line-height: 1;
    padding: 0;
  }

  #costSection .order-labor-edit-status {
    min-height: 17px;
    margin-top: 7px;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.4;
  }

  #costSection .order-labor-edit-status.error {
    color: var(--danger);
  }

  #costSection .installation-cost-editor {
    display: grid;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 6px;
    background: var(--ui-surface);
  }

  #costSection .installation-cost-editor-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
  }

  #costSection .installation-cost-editor-head strong,
  #costSection .installation-cost-editor-head span {
    display: block;
  }

  #costSection .installation-cost-editor-head strong {
    color: var(--ui-ink);
    font-size: 12px;
  }

  #costSection .installation-cost-editor-head > div > span,
  #costSection .installation-cost-editor-note {
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.4;
  }

  #costSection .installation-cost-editor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #costSection .installation-cost-editor-grid label,
  #costSection .installation-cost-calculated {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    margin: 0;
  }

  #costSection .installation-cost-editor-grid label > span,
  #costSection .installation-cost-calculated > span {
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  #costSection .installation-cost-editor-grid input,
  #costSection .installation-cost-editor-grid select,
  #costSection .installation-cost-calculated strong {
    width: 100%;
    min-width: 0;
  }

  #costSection .installation-cost-calculated strong {
    display: flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 9px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 5px;
    background: var(--ui-surface-soft);
    color: var(--ui-ink);
    font-size: 13px;
    line-height: 1.25;
  }

  #costSection .legacy-installation-cost-notice {
    margin-top: 8px;
  }

  /* UI review: group existing payment fields without changing their data bindings. */
  #costSection .order-installation-payment-group {
    min-width: 0;
    margin-top: 10px;
  }

  #costSection .order-installation-payment-title,
  #costSection .order-installation-adjustments .install-adjust-title {
    display: block;
    margin: 0 0 6px;
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }

  #costSection .order-installation-payment-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 560px;
    min-width: 0;
  }

  #costSection .order-installation-payment-fields > .order-labor-field {
    grid-column: auto;
  }

  #costSection .order-installation-adjustments .install-adjust-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px 44px;
    gap: 6px;
    margin-bottom: 4px;
    color: var(--ui-ink);
    font-size: 11px;
    line-height: 1.4;
  }

  .cost-template-manager-row.reserved-installation-template {
    padding: 5px;
    border: 1px dashed var(--ui-line);
    border-radius: 6px;
    background: var(--ui-surface-muted);
  }

  #costSection .cost-statistics,
  #costPreview .cost-statistics {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  #costSection .cost-statistics-title,
  #costPreview .cost-statistics-title {
    color: var(--ui-ink);
    font-size: 12px;
    font-weight: 700;
  }

  #costSection .cost-statistics-grid,
  #costPreview .cost-statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #costSection .cost-statistics-item,
  #costPreview .cost-statistics-item {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 6px;
    background: var(--ui-surface-soft);
    text-align: center;
  }

  #costSection .cost-statistics-item span,
  #costPreview .cost-statistics-item span {
    display: block;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  #costSection .cost-statistics-item strong,
  #costPreview .cost-statistics-item strong {
    display: block;
    margin-top: 4px;
    color: var(--ui-ink);
    font-size: 14px;
    line-height: 1.25;
  }

  #costSection .cost-statistics-item.is-total,
  #costPreview .cost-statistics-item.is-total {
    border-color: #b8d8ca;
    background: var(--ui-accent-soft);
  }

  #costSection .cost-statistics-item.is-total span,
  #costPreview .cost-statistics-item.is-total span {
    color: var(--ui-ink);
    font-weight: 700;
  }

  #costSection .cost-statistics-item.is-total strong,
  #costPreview .cost-statistics-item.is-total strong {
    font-weight: 800;
  }

  /* Keep the existing cash-balance wording and its detail-dialog click target. */
  #businessDashboard [data-dashboard-detail="balance"] small {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  /* Separate table rows lightly; preserve every input boundary and column. */
  #costSection .cost-table-grid {
    row-gap: 3px;
  }

  #costSection .cost-table-grid > .cost-row[data-cost-id] {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: var(--ui-line-soft);
    border-left-color: transparent;
    border-radius: 0;
  }

  #orderList .order-status-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 3px;
    min-width: 0;
  }

  #orderList .order-status-phrase {
    white-space: nowrap;
  }

  #orderList .order-status-text .order-state-dot {
    flex: 0 0 auto;
    margin-right: 0;
  }

  #orderProfitPage .order-profit-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  #orderProfitPage .order-profit-page-head strong,
  #orderProfitPage .order-profit-breakdown-head strong {
    display: block;
    color: var(--ui-ink);
    font-size: 14px;
  }

  #orderProfitPage .order-profit-page-head span,
  #orderProfitPage .order-profit-breakdown-head span {
    display: block;
    margin-top: 3px;
    color: var(--ui-muted);
    font-size: 11px;
    line-height: 1.45;
  }

  #orderProfitPage .order-profit-breakdown {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 7px;
    background: var(--ui-surface);
  }

  #orderProfitPage .order-profit-breakdown-head {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ui-line-soft);
  }

  #orderProfitPage .order-profit-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  #orderProfitPage .order-profit-breakdown-card {
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--ui-line-soft);
    border-radius: 6px;
    background: var(--ui-surface-soft);
  }

  #orderProfitPage .order-profit-breakdown-card span {
    display: block;
    color: var(--ui-muted);
    font-size: 10px;
    line-height: 1.35;
  }

  #orderProfitPage .order-profit-breakdown-card strong {
    display: block;
    margin-top: 4px;
    color: var(--ui-ink);
    font-size: 15px;
  }
  .main .workbench-overview,
  .main .dashboard-kpis,
  .main .dashboard-panel,
  .main .order-table-panel,
  .main .order-management-list,
  .main .customer-directory-wrap,
  .main .customer-orders-wrap,
  .main .payment-ledger,
  .main .contract-editor,
  .main .designer-card,
  .main .fixed-panel,
  .main .order-profit-card,
  .main .cost-table-wrap,
  .main .fixed-table-wrap,
  .main .customer-contact-panel,
  .main .customer-summary,
  .main .order-labor-card,
  .main .cabinet-name-library,
  .main .summary {
    border-color: var(--ui-line-soft) !important;
    background: var(--ui-surface-soft) !important;
    box-shadow: none !important;
  }

  .main .dashboard-kpis,
  .main .summary,
  .main .order-management-list,
  .main .customer-directory-wrap,
  .main .customer-orders-wrap,
  .main .payment-ledger,
  .main .contract-editor,
  .main .fixed-table-wrap,
  .main .cost-table-wrap {
    background: var(--ui-surface) !important;
  }

  .main .section-head,
  .main .dashboard-panel-head,
  .main .order-table-summary,
  .main .payment-ledger-head,
  .main .contract-editor-head,
  .main .fixed-head,
  .main .customer-detail-head,
  .main .cost-section-head,
  .main .processing-editor-head,
  .main .cabinet-editor-head {
    border-color: var(--ui-line-soft) !important;
    background: var(--ui-surface-soft) !important;
  }

  .main .section-body {
    background: var(--ui-surface) !important;
  }

  .main .notice,
  .main .workbench-empty,
  .main .dashboard-detail-empty,
  .main .cost-manager-empty {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface-muted) !important;
  }

  .main table {
    border-collapse: collapse !important;
  }

  .main th {
    border-color: var(--ui-line) !important;
    background: #f1f5f4 !important;
  }

  .main td {
    border-color: var(--ui-line-soft) !important;
  }

  .main tbody tr:hover td {
    background: #f6faf8 !important;
  }

  .main .contract-editor-block,
  .main .system-tools-page > .system-tools-panel,
  .main .payment-stage + .payment-stage,
  .main .contract-summary-strip,
  .main .payment-overview {
    border-color: var(--ui-line-soft) !important;
  }

  #systemToolsDialog > .system-tools-body {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface) !important;
  }

  .system-tools-nav {
    border-right: 1px solid var(--ui-line-soft) !important;
    background: var(--ui-surface-soft) !important;
  }

  .system-tools-content {
    background: var(--ui-surface) !important;
  }

  .system-tools-page > .system-tools-panel {
    padding: 14px !important;
    border: 1px solid var(--ui-line-soft) !important;
    border-radius: 8px !important;
    background: var(--ui-surface-soft) !important;
  }

  .system-tools-page > .system-tools-panel h3 {
    padding-bottom: 10px;
    border-color: var(--ui-line-soft) !important;
  }

  .processing-common-panel {
    border-color: var(--ui-line) !important;
    background: var(--ui-surface) !important;
    box-shadow: 0 10px 26px rgba(32, 54, 56, .14) !important;
  }

  .processing-common-head,
  .processing-common-list {
    border-color: var(--ui-line-soft) !important;
  }

  .processing-common-tools {
    background: var(--ui-surface-soft);
  }
  /* Platform management surface */
  .shell,
  .shell > .main,
  .main-content {
    background: transparent !important;
  }

  .main-content > .topbar {
    margin-bottom: 14px;
  }

  .platform-page .section,
  .platform-page .kpis,
  .platform-page .table-wrap,
  .platform-page .renewal-qr-settings,
  .platform-page .invite-result {
    border-color: var(--ui-line) !important;
    box-shadow: var(--ui-shadow) !important;
  }

  .platform-page .section {
    background: var(--ui-surface) !important;
  }

  .platform-page .section + .section {
    margin-top: 12px;
  }

  .platform-page .section-head {
    border-color: var(--ui-line-soft) !important;
    background: var(--ui-surface-soft) !important;
  }

  .platform-page .section-body {
    background: var(--ui-surface) !important;
  }

  .platform-page .table-wrap {
    margin: 0 16px 16px;
    border-radius: 6px;
    background: var(--ui-surface) !important;
  }

  .platform-page .table-wrap table {
    border-collapse: collapse;
    border: 0;
  }

  .platform-page th {
    border-color: var(--ui-line) !important;
    background: #f1f5f4 !important;
  }

  .platform-page td {
    border-color: var(--ui-line-soft) !important;
  }

  .platform-page .task-list {
    background: var(--ui-surface) !important;
  }

  .platform-page .task-item {
    border-color: var(--ui-line-soft) !important;
  }

  .platform-page .renewal-qr-settings {
    margin: 0 16px 16px;
    background: var(--ui-surface-soft) !important;
  }

  .platform-page .kpis {
    background: var(--ui-surface) !important;
  }

  .platform-page .kpi {
    border-color: var(--ui-line-soft) !important;
    background: var(--ui-surface) !important;
  }

  dialog,
  .cloud-login-card,
  .cloud-modal-card {
    border-color: var(--ui-line) !important;
    box-shadow: 0 18px 48px rgba(32, 54, 56, .16) !important;
  }

  @media (max-width: 760px) {
    /* Compact only the order-detail shell; keep every label and action visible. */
    body:has(#orderDetailBar:not(.hidden)) .main > .topbar {
      min-height: 0;
      gap: 6px;
      padding-top: 8px !important;
      padding-bottom: 8px !important;
      margin-bottom: 6px !important;
    }

    body:has(#orderDetailBar:not(.hidden)) #moduleShell > #orderDetailBar,
    body:has(#orderDetailBar:not(.hidden)) #moduleShell > #orderDetailTabs {
      min-height: 0;
      margin-top: 6px !important;
      margin-bottom: 6px;
      padding: 6px 8px !important;
    }

    body:has(#orderDetailBar:not(.hidden)) #orderDetailBar,
    body:has(#orderDetailBar:not(.hidden)) #orderDetailBar .order-context-main,
    body:has(#orderDetailBar:not(.hidden)) #orderDetailBar .order-context-actions {
      gap: 6px;
    }

    body:has(#orderDetailBar:not(.hidden)) #orderDetailTabs > button {
      min-height: 44px;
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }

    .main > .topbar,
    .main > #moduleShell,
    .main > #quoteSection,
    .main > #quotePreviewSection,
    .main > #costSection,
    .main > #costPreview {
      width: min(100% - 24px, 1660px) !important;
    }

    #moduleShell > .section-body:not(.hidden) {
      padding: 12px !important;
    }

    .main > #quoteSection > .section-head,
    .main > #quoteSection > .section-body,
    .main > #quotePreviewSection > .section-head,
    .main > #quotePreviewSection > .section-body,
    .main > #costPreview > .section-head,
    .main > #costPreview > .section-body {
      border-radius: 7px !important;
    }

    .platform-page .table-wrap,
    .platform-page .renewal-qr-settings {
      margin-right: 12px;
      margin-left: 12px;
    }

    .system-tools-page > .system-tools-panel {
      padding: 12px !important;
    }

    #costSection .cost-statistics-grid,
    #costPreview .cost-statistics-grid,
    #orderProfitPage .order-profit-breakdown-grid {
      grid-template-columns: 1fr;
    }

    #costSection .installation-cost-editor-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #costSection .order-installation-adjustments {
      grid-template-columns: 1fr;
    }

    #orderProfitPage .order-profit-page-head {
      align-items: flex-start;
      flex-direction: column;
    }

    #orderProfitPage .order-profit-page-head button {
      width: 100%;
    }
  }

  @media (max-width: 360px) {
    #costSection .order-installation-payment-fields {
      grid-template-columns: 1fr;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .processing-common-panel,
    button,
    input,
    select,
    textarea {
      transition: none !important;
    }
  }
}