/* Shared enterprise/platform UI contract. Load after page styles; screen only. */
@media screen {
  :root {
    color-scheme: light;
    --erp-page: #f3f6f5;
    --erp-surface: #ffffff;
    --erp-surface-soft: #f8faf9;
    --erp-surface-muted: #f1f5f4;
    --erp-sidebar: #ecedef;
    --erp-line: #d5dfda;
    --erp-line-soft: #e5ebe8;
    --erp-line-strong: #a8b8af;
    --erp-text: #22352d;
    --erp-muted: #52635b;
    --erp-primary: #0a7f5a;
    --erp-primary-hover: #066b4b;
    --erp-selected: #eaf5ef;
    --erp-danger: #b42318;
    --erp-danger-soft: #fff3f2;
    --erp-warning: #865a0c;
    --erp-warning-soft: #fff8e9;
    --erp-readonly: #46564d;
    --erp-disabled: #59675f;
    --erp-radius: 8px;
    --erp-control-radius: 6px;
    --erp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
    --erp-dialog-shadow: 0 18px 48px rgba(25, 43, 33, .2);
    --erp-backdrop: rgba(25, 43, 33, .38);
    --bg: var(--erp-page);
    --panel: var(--erp-surface);
    --panel-2: var(--erp-surface-soft);
    --text: var(--erp-text);
    --muted: var(--erp-muted);
    --line: var(--erp-line);
    --line-strong: var(--erp-line-strong);
    --primary: var(--erp-primary);
    --primary-2: var(--erp-primary-hover);
    --accent: var(--erp-primary);
    --success: var(--erp-primary);
    --danger: var(--erp-danger);
    --warning: var(--erp-warning);
    --info: var(--erp-primary-hover);
    --font: var(--erp-font);
    --radius: var(--erp-radius);
    --radius-sm: var(--erp-control-radius);
    --shadow-modal: var(--erp-dialog-shadow);
    --ui-page: var(--erp-page);
    --ui-surface: var(--erp-surface);
    --ui-surface-soft: var(--erp-surface-soft);
    --ui-surface-muted: var(--erp-surface-muted);
    --ui-line: var(--erp-line);
    --ui-line-soft: var(--erp-line-soft);
    --ui-ink: var(--erp-text);
    --ui-muted: var(--erp-muted);
    --ui-accent-soft: var(--erp-selected);
    --ui-focus: var(--erp-primary);
    --ui-shadow: none;
  }

  html { scrollbar-gutter: stable; }
  html, body { background: var(--erp-page) !important; color: var(--erp-text); font-family: var(--erp-font); }
  body { line-height: 1.5; }
  ::selection { color: var(--erp-text); background: #cde9dc; }
  input, textarea { caret-color: var(--erp-primary); }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--erp-primary); }
  :where(a) { text-underline-offset: 3px; }

  button, input, select, textarea {
    font-family: var(--erp-font);
    font-size: 14px;
    border-radius: var(--erp-control-radius);
  }
  button { min-height: 38px; line-height: 1.35; }
  button.small { min-height: 34px; font-size: 12px; }
  button:not(.primary):not(.danger) { color: var(--erp-text); }
  button.primary { color: #fff; border-color: var(--erp-primary); background: var(--erp-primary); }
  button.primary:hover:not(:disabled) { background: var(--erp-primary-hover); border-color: var(--erp-primary-hover); }
  .fixed-subtabs button.active, .fixed-subtabs button.active:hover {
    color: #fff; background: var(--erp-primary); border-color: var(--erp-primary);
  }
  button.danger { color: var(--erp-danger); border-color: #ddb9b4; background: var(--erp-surface); }
  button.danger:hover:not(:disabled) { background: var(--erp-danger-soft); border-color: var(--erp-danger); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea {
    color: var(--erp-text);
    background: var(--erp-surface);
    border-color: var(--erp-line-strong);
    min-width: 0;
  }
  html body input::placeholder, html body textarea::placeholder { color: var(--erp-muted); opacity: 1; }
  html body input[readonly], html body textarea[readonly] {
    color: var(--erp-readonly) !important;
    -webkit-text-fill-color: var(--erp-readonly);
    background: var(--erp-surface-muted) !important;
    opacity: 1;
  }
  html body :is(input, select, textarea, button):disabled {
    color: var(--erp-disabled) !important;
    -webkit-text-fill-color: var(--erp-disabled);
    background: var(--erp-surface-muted) !important;
    border-color: var(--erp-line) !important;
    opacity: 1 !important;
    cursor: not-allowed;
  }
  html body button.primary:disabled {
    background: var(--erp-surface-muted) !important;
    border-color: var(--erp-line) !important;
  }
  .staff-row > .staff-field { display: grid; min-width: 0; margin: 0; gap: 5px; align-content: end; }
  .staff-field > span { color: var(--erp-muted); font-size: 12px; line-height: 1.5; }
  .staff-row:has(> .staff-field) { align-items: end; }
  .staff-row > .staff-field input { min-width: 0; width: 100%; }
  @media (min-width: 761px) {
    .staff-row.designer { grid-template-columns: minmax(130px, 1fr) minmax(110px, .8fr) 140px 120px 76px 58px; }
    .staff-row.designer > .staff-field:nth-child(3) > span { white-space: nowrap; }
  }
  html body :is(input, select, textarea):focus { border-color: var(--erp-primary); box-shadow: none; }
  html body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--erp-primary) !important;
    outline-offset: 3px;
  }
  html body :is(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--erp-danger) !important;
    background: var(--erp-danger-soft) !important;
  }
  .field-error[role="alert"] { margin-top: 5px; color: var(--erp-danger); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
  .field-error:empty { display: none; }
  #localSaveFailure[role="alert"] {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin: 10px 0; padding: 12px 14px;
    border: 1px solid #ddb9b4; border-radius: var(--erp-radius);
    color: var(--erp-danger); background: var(--erp-danger-soft); font-size: 13px; line-height: 1.6;
  }
  #localSaveFailure[hidden], #localSaveFailure.hidden { display: none !important; }
  #localSaveFailure :is(p, strong, span) { overflow-wrap: anywhere; }
  #localSaveFailure p { margin: 0; }
  #localSaveRetryBtn, #localSaveExportBtn { flex: 0 0 auto; min-height: 36px; }

  .workspace-heading h1, .main-content > .topbar h1 { font-family: var(--erp-font); font-size: 26px !important; line-height: 1.3; letter-spacing: 0; }
  .section-head :is(h2, h3, strong), .system-tools-panel h3, .payment-ledger-title h3, .customer-dialog-head strong { font-size: 16px; line-height: 1.4; }
  html body :is(.mini, .muted, .topbar p, .section-head p, .field > label, .password-settings-status) { color: var(--erp-muted); font-size: 12px; line-height: 1.6; }
  html body :is(.cloud-login-error, .login-error, .form-status.error, .password-settings-status.error) { color: var(--erp-danger); }
  html body :is(.pill, .badge) { border-radius: var(--erp-control-radius); font-size: 11px; line-height: 1.45; }
  html body :is(.pill, .badge):not(.warn):not(.danger):not(.error) { color: var(--erp-primary-hover); background: var(--erp-selected); border-color: #b7d8c7; }
  html body :is(.pill.warn, .badge.warn, .notice.warning) { color: var(--erp-warning); background: var(--erp-warning-soft); border-color: #dbc99f; }
  html body :is(.pill.danger, .pill.error, .badge.danger) { color: var(--erp-danger); background: var(--erp-danger-soft); border-color: #ddb9b4; }
  html body :is(.disabled, .group-index) { color: var(--erp-muted); }
  html body .group-index { background: var(--erp-surface-muted); border-color: var(--erp-line); }

  /* Identical white panels and overlay headers on enterprise and platform pages. */
  html body :is(dialog, .cloud-modal-card, .cloud-login-card, .login-card) {
    color: var(--erp-text) !important; background: var(--erp-surface) !important;
    border-color: var(--erp-line) !important; border-radius: var(--erp-radius) !important;
    font-family: var(--erp-font); box-shadow: var(--erp-dialog-shadow) !important;
  }
  html body dialog::backdrop { background: var(--erp-backdrop) !important; }
  html body :is(.cloud-login-overlay, .login-overlay) { background: var(--erp-page) !important; }
  html body .cloud-modal-overlay { background: var(--erp-backdrop); }
  html body dialog.cloud-modal-overlay {
    width: 100%; max-width: none; height: 100%; max-height: none;
    margin: 0; padding: 18px; border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    align-items: center; justify-content: center; overflow: auto;
  }
  html body dialog.cloud-modal-overlay[open] { display: flex; }
  html body dialog.cloud-modal-overlay:not([open]) { display: none !important; }
  html body dialog.cloud-modal-overlay::backdrop { background: var(--erp-backdrop) !important; }
  html body #customerDiscardDialog { width: min(440px, calc(100vw - 28px)); padding: 0; }
  html body #customerDiscardDialog .customer-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  html body #customerDetailPanel { min-width: 0; }
  html body :is(.dialog-head, .customer-dialog-head, .account-profile-head, .dashboard-detail-head, .outstanding-modal-head, .picker-head, .cost-manager-head, .system-tools-head) {
    color: var(--erp-text) !important; background: var(--erp-surface) !important;
    border-bottom: 1px solid var(--erp-line) !important;
  }
  html body :is(.dashboard-detail-title, .outstanding-modal-title, .account-profile-head) strong { color: var(--erp-text) !important; font-size: 18px; }
  html body :is(.dashboard-detail-title, .outstanding-modal-title) span { color: var(--erp-muted) !important; font-size: 12px; line-height: 1.6; }
  html body :is(.dashboard-detail-close, .outstanding-modal-close, .customer-profile-close, #accountProfileCloseBtn) {
    color: var(--erp-muted) !important; background: var(--erp-surface) !important;
    border-color: var(--erp-line) !important; border-radius: var(--erp-control-radius) !important;
  }
  html body :is(.section-head, .dashboard-panel-head, .fixed-panel-head) { color: var(--erp-text); background: var(--erp-surface) !important; border-color: var(--erp-line) !important; }
  html body :is(.section, .dashboard-panel, .fixed-panel, .order-labor-card, .customer-contact-panel, .payment-stage, .system-tools-panel) {
    border-color: var(--erp-line); border-radius: var(--erp-radius); box-shadow: none;
  }
  html body :is(.dashboard-detail-summary, .outstanding-summary, .credential-summary) { background: var(--erp-surface-soft) !important; border-color: var(--erp-line) !important; }
  html body :is(.system-tools-nav, .system-tools-content, .system-tools-page > .system-tools-panel) { border-color: var(--erp-line) !important; }
  html body .system-tools-nav { background: var(--erp-surface-soft) !important; }
  html body .system-tools-nav button.active { color: var(--erp-primary-hover) !important; background: var(--erp-selected) !important; }
  html body .system-tools-page > .system-tools-panel { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }

  /* Data tables retain their task-specific columns, with one visual vocabulary. */
  :is(.order-data-table, .customer-directory-wrap, .customer-orders-wrap, .fixed-table-wrap, .dashboard-ledger-wrap, .dashboard-detail-table-wrap, .platform-page .table-wrap) table { font-family: var(--erp-font); font-size: 13px; }
  :is(.order-data-table, .customer-directory-wrap, .customer-orders-wrap, .fixed-table-wrap, .dashboard-ledger-wrap, .dashboard-detail-table-wrap, .platform-page .table-wrap) th {
    color: var(--erp-muted) !important; background: var(--erp-surface-muted) !important;
    border-color: var(--erp-line) !important; font-size: 12px; font-weight: 600;
  }
  :is(.order-data-table, .customer-directory-wrap, .customer-orders-wrap, .fixed-table-wrap, .dashboard-ledger-wrap, .dashboard-detail-table-wrap, .platform-page .table-wrap) td { border-color: var(--erp-line-soft); }
  :is(.cost-table-grid, .processing-list) > .cost-row:first-child { color: var(--erp-muted); background: var(--erp-surface-muted) !important; }
  html body :is(.cost-statistics-item > span, .order-profit-card > span, .order-overview-kpi > span, .fixed-kpi > span) { color: var(--erp-muted) !important; font-size: 12px !important; }
  /* Metric categories use one accent; explicit warning and error states keep their meaning. */
  html body :is(.fixed-kpi, .order-overview-kpi):not(.warn):not(.danger):not(.error) { border-left-color: var(--erp-primary) !important; }
  html body .workbench-kpi:not(.warn):not(.danger):not(.error) { border-top-color: var(--erp-primary) !important; }
  html body :is(.dashboard-kpi strong, .fixed-kpi strong, .kpi strong, .money, .cost-calculated, .customer-money-cell, .order-profit-card strong) { font-family: var(--erp-font); font-variant-numeric: tabular-nums; }
  html body .dashboard-kpi small { color: var(--erp-muted) !important; font-size: 12px !important; line-height: 1.6; white-space: normal; }
  html body .dashboard-kpi span { color: var(--erp-muted) !important; font-size: 13px; }
  html body .dashboard-trend-panel .trend-chart text { fill: var(--erp-muted) !important; font-size: 11px; font-family: var(--erp-font); }
  html body .kpi::before { display: none; }

  /* Both applications use a neutral single-column sidebar and green selection. */
  html body .sidebar { width: 212px !important; color: var(--erp-text) !important; background: var(--erp-sidebar) !important; border-color: var(--erp-line) !important; align-items: stretch; }
  .shell { grid-template-columns: 212px minmax(0, 1fr); }
  html body .sidebar .brand :is(h1, strong) { color: var(--erp-text) !important; }
  html body .sidebar .brand :is(p, span) { color: var(--erp-muted) !important; }
  html body .sidebar :is(.side-nav, .nav) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-content: stretch; gap: 4px !important; }
  html body .sidebar .side-nav .nav-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html body .sidebar :is(.side-nav .nav-btn, .nav button) {
    display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto !important;
    align-items: center; gap: 10px !important; min-width: 0; width: 100%; min-height: 42px;
    padding: 9px 10px !important; white-space: nowrap; text-align: left;
    color: var(--erp-text) !important; background: transparent !important; border-color: transparent !important;
  }
  html body .sidebar :is(.side-nav .nav-btn, .nav button):hover { background: #e0e6e2 !important; }
  html body .sidebar :is(.side-nav .nav-btn, .nav button).active { color: #fff !important; background: var(--erp-primary) !important; border-color: var(--erp-primary) !important; box-shadow: none !important; }
  html body .sidebar :is(.nav-icon, .nav-arrow) { color: currentColor !important; }
  html body .sidebar .nav-arrow { display: block !important; }
  html body .sidebar .nav-count { color: var(--erp-muted); background: var(--erp-surface); }
  html body .sidebar .nav button.active .nav-count { color: var(--erp-primary-hover); background: var(--erp-selected); }
  html body .sidebar :is(.sidebar-utility, .sidebar-foot) { display: grid !important; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 10px !important; border-color: var(--erp-line) !important; }
  html body .sidebar-utility > button, html body .sidebar-foot > button { justify-content: flex-start; color: var(--erp-muted) !important; background: transparent !important; border-color: transparent !important; }
  html body .sidebar :is(.sidebar-save-state, .sidebar-status) { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; color: var(--erp-muted) !important; font-size: 11px; white-space: nowrap; }
  html body .sidebar-account { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; width: 100%; min-width: 0; background: var(--erp-surface-soft); border-color: var(--erp-line); }
  html body .sidebar-account > div { min-width: 0; }
  html body .sidebar-account strong { color: var(--erp-text); }
  html body .sidebar-account small { color: var(--erp-muted); }
  html body .sidebar-account-menu-button { color: var(--erp-muted) !important; background: transparent !important; }
  html body .sidebar-account-menu { color: var(--erp-text); background: var(--erp-surface); border-color: var(--erp-line); box-shadow: var(--erp-dialog-shadow); }
  html body .sidebar-account-menu :is(strong, button) { color: var(--erp-text); }
  html body .sidebar-account-menu :is(small, svg) { color: var(--erp-muted); }
  html.navigation-drawer-open, html.navigation-drawer-open body { overflow: hidden; }
  html body .sidebar[inert] { visibility: hidden; pointer-events: none; }
  html body .sidebar-scrim.open { background: var(--erp-backdrop); }

  @media (max-width: 960px) {
    html body .sidebar { overscroll-behavior: contain; height: 100dvh !important; }
    html body .sidebar.mobile-open { visibility: visible; }
    html body .sidebar-utility { padding: 12px !important; }
    html body .sidebar-account small { display: block; }
    html body .sidebar .side-nav .nav-group + .nav-group { margin-top: 4px; }
  }
  @media (max-width: 760px) {
    #systemToolsDialog .recycle-panel-head > :is(button, .pill) { flex: 0 0 auto; white-space: nowrap; }
    #systemToolsDialog .recycle-panel-title { min-width: 0; }
    .workspace-heading h1, .main-content > .topbar h1 { font-size: 23px !important; }
    html body .main > .topbar { gap: 6px; }
    body:has(#orderDetailBar:not(.hidden)) #orderDetailTabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    body:has(#orderDetailBar:not(.hidden)) #orderDetailTabs > button { gap: 5px; font-size: 12px; white-space: nowrap; padding-right: 5px !important; padding-left: 5px !important; }
    html body #orderDetailBar .order-context-copy strong { font-size: 14px; line-height: 1.45; }
    html body #orderDetailBar .order-context-copy span { font-size: 11px; line-height: 1.5; }
    html body #orderDetailBar .order-context-actions { gap: 6px; }
    html body #orderDetailBar .order-context-actions button { min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
    html body .payment-ledger-head { padding-top: 12px; padding-bottom: 12px; }
    html body .payment-stage-fields { gap: 9px; }
    html body :is(dialog, .cloud-modal-card) { max-height: calc(100dvh - 24px); }
    html body .system-tools-page > .system-tools-panel { padding: 12px !important; }
    #localSaveFailure { align-items: stretch; }
    #localSaveFailure > :is(p, span, div) { flex-basis: 100%; }
  }
  @media (max-width: 640px) {
    #customerTab .customer-directory td { padding: 8px 10px; grid-template-columns: 94px minmax(0, 1fr); }
    #customerTab .customer-directory td.customer-name-cell > strong { font-size: 14px; }
    #customerTab .customer-directory td.customer-name-cell > span { margin-top: 2px; }
    #customerTab .customer-directory td[data-label="操作"] { padding-top: 8px; padding-bottom: 10px; }
    #customerTab .customer-row-actions button { min-height: 36px; }
    html body .customer-category-switch button { min-height: 38px; }
    html body .sidebar :is(button, .nav-btn) { min-height: 42px; }
    html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { font-size: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html body *, html body *::before, html body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}