/*
 * 湖北祖安 CRM 统一设计系统
 * 规则来源：docs/DESIGN_SYSTEM.md
 * 此文件在旧版 styles.css 之后加载，用作全系统唯一公共视觉层。
 */
:root {
  color-scheme: light;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono-numeric: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --text: #172033;
  --text-secondary: #526277;
  --text-tertiary: #718096;
  --text-disabled: #9aa7b7;
  --surface-page: #f4f7fb;
  --surface-panel: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #eef3f8;
  --border: #d6e0eb;
  --border-strong: #b9c9da;
  --brand: #145da5;
  --brand-hover: #0f4f8e;
  --brand-active: #0c4278;
  --brand-soft: #eaf3fc;
  --success: #187451;
  --success-soft: #eaf7f0;
  --warning: #a46613;
  --warning-soft: #fff7e5;
  --danger: #b42318;
  --danger-hover: #931c14;
  --danger-soft: #fff0ee;
  --info: #1e67a8;
  --info-soft: #edf6ff;
  --focus: #2684ff;
  --focus-ring: rgba(38, 132, 255, 0.24);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 44px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.14);
  --duration-fast: 160ms;
  --duration-base: 220ms;
  --page-max: 1440px;
  --z-sticky: 30;
  --z-dropdown: 70;
  --z-modal: 100;
  --z-toast: 120;

  /* Backward-compatible aliases. */
  --bg: var(--surface-page);
  --panel: var(--surface-panel);
  --panel-soft: var(--surface-subtle);
  --ink: var(--text);
  --muted: var(--text-secondary);
  --line: var(--border);
  --blue: var(--brand);
  --blue-weak: var(--brand-soft);
  --red: var(--danger);
  --red-weak: var(--danger-soft);
  --green: var(--success);
  --green-weak: var(--success-soft);
  --gold: var(--warning);
  --gold-weak: var(--warning-soft);
  --shadow: var(--shadow-md);
}

html { scroll-padding-top: 96px; }

body {
  color: var(--text);
  background: var(--surface-page);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; text-wrap: balance; }
h1 { font-size: 24px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.35; }
h3 { font-size: 16px; line-height: 1.4; }
p { text-wrap: pretty; }

:where(input, select, textarea, button) { font-family: inherit; }
:where(input, select, textarea) { font-size: 14px; }
:where(input, select, textarea):focus-visible,
:where(button, a, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: var(--focus) !important;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea).is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.12) !important;
}

:where(input, select, textarea):disabled {
  color: var(--text-secondary);
  background: var(--surface-muted);
  border-color: var(--border);
  opacity: 1;
  cursor: not-allowed;
}

.workspace > main,
.workspace > .content,
.view-container {
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.topbar { z-index: var(--z-sticky); min-height: 72px; }
.sidebar { background: #172033; }
.nav-item { min-height: var(--control-lg); border-radius: var(--radius-md); transition: color var(--duration-fast), background var(--duration-fast); }

:where(.icon-btn, .action-btn, .small-btn, .btn) {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

:where(.icon-btn, .small-btn, .btn.ghost) { background: var(--surface-panel); }
:where(.icon-btn, .small-btn, .btn.ghost):hover { background: var(--surface-subtle); border-color: var(--border-strong); }
:where(.action-btn.primary, .btn.primary) { color: #fff; background: var(--brand); border-color: var(--brand); }
:where(.action-btn.primary, .btn.primary):hover { background: var(--brand-hover); border-color: var(--brand-hover); }
:where(button.danger, .action-btn.danger, .danger-btn, .btn.danger, .small-btn.danger) { color: var(--danger); background: var(--surface-panel); border-color: #efb6b0; }
:where(button.danger, .action-btn.danger, .danger-btn, .btn.danger, .small-btn.danger):hover { color: #fff; background: var(--danger); border-color: var(--danger); }
:where(button, .btn)[disabled], :where(button, .btn).is-loading { opacity: .62; cursor: wait; pointer-events: none; }

.small-btn { min-height: var(--control-sm); padding-inline: 10px; font-size: 13px; }
.icon-btn { width: var(--control-md); height: var(--control-md); min-height: var(--control-md); padding: 0; }

:where(.search-input, .field input, .field select, .field textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  border-color: var(--border);
  border-radius: var(--radius-md);
}

:where(.search-input, .field input, .field select, input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select) { min-height: var(--control-md); }
:where(.field textarea, textarea) { min-height: 88px; }
.field { gap: 6px; }
.field :where(label, > span) { color: var(--text-secondary); font-size: 13px; font-weight: 600; line-height: 1.4; }
:where(.compact.muted, .field small, .helper-text, .form-help) { color: var(--text-secondary); font-size: 12px; line-height: 1.5; }
:where(.form-error, .field-error) { color: var(--danger); font-size: 12px; line-height: 1.45; }

.panel,
.card,
.order-entry-section,
.order-main,
.modal,
.ui-card,
.ui-section {
  border-color: var(--border);
  border-radius: var(--radius-lg);
}

.order-main { gap: var(--space-5); padding: var(--space-5); background: var(--surface-subtle); }
.order-entry-section { padding: var(--space-4); box-shadow: var(--shadow-sm); }
.order-entry-title { padding-bottom: var(--space-3); }
.order-entry-title-meta { font-size: 12px; }
.order-workbench-hero .compact { font-size: 12px; }

.section-title-row,
.order-entry-title,
.proof-group-head,
.modal-header { min-height: 44px; align-items: center; }

.order-step-shell { gap: var(--space-4); }
.order-step-nav { top: 80px; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.order-step-btn { min-height: 52px; border-radius: var(--radius-md); }
.order-step-btn strong { font-size: 14px; }
.order-step-state { font-size: 11px; }

.sale-settlement-extra { gap: var(--space-3); padding-top: var(--space-4); }
.sale-settlement-extra-head > div > strong { font-size: 16px; }
.sale-settlement-extra-head > div > span { font-size: 12px; }
.sale-settlement-row { gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-lg); }

.packing-items-editor { gap: var(--space-3); padding: 0; background: transparent; border: 0; }
.packing-item-row { padding: var(--space-3); border-radius: var(--radius-md); }
.packing-aggregate-summary { gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); }

.other-add-actions { gap: var(--space-3); padding: 0; background: transparent; border: 0; }
.other-add-card { border-radius: var(--radius-md); }
.other-empty-state { border-radius: var(--radius-md); }

.table-wrap,
.data-table-wrap { max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; }
:where(table) { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
:where(th) { color: var(--text-secondary); font-size: 13px; font-weight: 650; }
:where(th, td) { min-height: var(--control-lg); }

.modal-backdrop { z-index: var(--z-modal); }
.modal { box-shadow: var(--shadow-lg); }
.modal-header { padding: var(--space-4) var(--space-5); }
.modal-body { padding: var(--space-5); }

.toast {
  z-index: var(--z-toast);
  max-width: min(420px, calc(100vw - 24px));
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 14px;
  line-height: 1.45;
}
.toast.success { background: var(--success); }
.toast.error { background: var(--danger); }
.toast.warning { background: var(--warning); }

.ui-stack { display: grid; gap: var(--space-4); }
.ui-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ui-card { padding: var(--space-4); background: var(--surface-panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.ui-section { padding: var(--space-5); background: var(--surface-panel); border: 1px solid var(--border); }
.ui-status { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.ui-status.info { color: var(--info); background: var(--info-soft); }
.ui-status.success { color: var(--success); background: var(--success-soft); }
.ui-status.warning { color: var(--warning); background: var(--warning-soft); }
.ui-status.danger { color: var(--danger); background: var(--danger-soft); }

@media (max-width: 1024px) {
  .order-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  h1 { font-size: 20px; }
  h2 { font-size: 18px; }
  .topbar { min-height: 60px; padding: 10px 12px; }
  .order-main { gap: var(--space-4); padding: var(--space-3); }
  .order-entry-section, .ui-card, .ui-section { padding: var(--space-3); }
  .order-step-nav { top: 60px; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; }
  .order-step-nav::-webkit-scrollbar { display: none; }
  .order-step-btn { min-width: 88px; min-height: 48px; grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: 6px 4px; text-align: center; }
  .order-step-index { width: 20px; height: 20px; font-size: 11px; }
  .order-step-btn strong { font-size: 12px; }
  .order-step-state { min-width: 0; padding: 2px 5px; font-size: 10px; }
  .packing-item-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .packing-item-remark-field { grid-column: 1 / -1; }
  .packing-aggregate-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: var(--space-2); }
  .packing-aggregate-summary > * { min-width: 0; font-size: 11px; overflow-wrap: anywhere; }
  .sale-settlement-extra-head { flex-direction: column; align-items: stretch; }
  .sale-settlement-extra-head .small-btn { align-self: flex-start; }
  .modal-backdrop { padding: 0; }
  .modal { width: 100%; max-width: none; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .modal-header { padding: max(12px, env(safe-area-inset-top)) 12px 12px; }
  .modal-body { padding: 12px; }
  :where(.action-btn, .btn) { min-height: var(--control-lg); }
}

@media (max-width: 420px) {
  .packing-item-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packing-item-card-grid .field { min-width: 0; }
  .packing-item-card-grid :where(input, select) { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .sidebar, .topbar-actions, .mobile-bottom-nav, .order-mobile-action-bar, .toast { display: none !important; }
  body { background: #fff; color: #000; }
  .app-shell { display: block; }
  .order-main, .panel, .card { box-shadow: none; }
}