/*
 * V149 · 控件视觉系统
 * 目标：让按钮、输入、筛选、表格与弹窗具备清晰层级和一致反馈。
 * 仅作用于登录后的业务系统；登录页保持现有视觉。
 */

body[data-ui-version="44"] {
  --ctl-accent: var(--accent, #5167dc);
  --ctl-accent-strong: #3f55c5;
  --ctl-accent-soft: color-mix(in srgb, var(--accent, #5167dc) 10%, var(--panel, #fff));
  --ctl-accent-softer: color-mix(in srgb, var(--accent, #5167dc) 5%, var(--panel, #fff));
  --ctl-surface: color-mix(in srgb, var(--panel, #fff) 94%, var(--bg, #f3f6fb));
  --ctl-surface-raised: var(--panel, #fff);
  --ctl-surface-muted: color-mix(in srgb, var(--bg, #f3f6fb) 70%, var(--panel, #fff));
  --ctl-border: color-mix(in srgb, var(--line-strong, #ccd4e2) 82%, var(--ink, #1d2740));
  --ctl-border-soft: color-mix(in srgb, var(--line, #e2e7f0) 88%, var(--ink, #1d2740));
  --ctl-text: var(--ink, #1d2740);
  --ctl-muted: var(--muted, #748099);
  --ctl-blue-shadow: 0 7px 18px rgba(55, 76, 173, .18);
  --ctl-panel-shadow: 0 10px 28px rgba(38, 57, 88, .08);
  --ctl-popup-shadow: 0 24px 58px rgba(24, 42, 72, .22);
  --ctl-radius: 11px;
  --ctl-radius-lg: 15px;
}

/* 业务页面基础层级 */
body[data-ui-version="44"] .app-shell {
  color: var(--ctl-text);
}

body[data-ui-version="44"] .view-root > .panel,
body[data-ui-version="44"] .view-root > section.panel,
body[data-ui-version="44"] .modal {
  border: 1px solid var(--ctl-border-soft);
  background: var(--ctl-surface-raised);
  box-shadow: var(--ctl-panel-shadow);
}

body[data-ui-version="44"] .view-root > .panel,
body[data-ui-version="44"] .view-root > section.panel {
  border-radius: var(--ctl-radius-lg);
}

body[data-ui-version="44"] .panel-header {
  border-bottom: 1px solid var(--ctl-border-soft);
  background:
    linear-gradient(100deg, var(--ctl-accent-softer), transparent 48%),
    var(--ctl-surface-raised);
}

body[data-ui-version="44"] .panel-header h2,
body[data-ui-version="44"] .panel-header h3,
body[data-ui-version="44"] .view-title h1,
body[data-ui-version="44"] .view-title h2 {
  color: var(--ctl-text);
  letter-spacing: -.02em;
}

/* 输入控件：视觉一致、边界明确、焦点可见 */
body[data-ui-version="44"] .app-shell :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea),
body[data-ui-version="44"] .modal-root :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea) {
  box-sizing: border-box;
  min-width: 0;
  min-height: 41px;
  padding: 9px 12px;
  color: var(--ctl-text);
  font-size: 14px;
  font-weight: 520;
  line-height: 1.45;
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
  background-color: var(--ctl-surface-raised);
  box-shadow: inset 0 1px 1px rgba(23, 40, 70, .03), 0 1px 2px rgba(23, 40, 70, .03);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body[data-ui-version="44"] .app-shell :where(input, select, textarea):hover:not(:disabled),
body[data-ui-version="44"] .modal-root :where(input, select, textarea):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ctl-accent) 46%, var(--ctl-border));
  background-color: var(--ctl-surface);
}

body[data-ui-version="44"] .app-shell :where(input, select, textarea):focus,
body[data-ui-version="44"] .modal-root :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--ctl-accent);
  background-color: var(--ctl-surface-raised);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctl-accent) 18%, transparent);
}

body[data-ui-version="44"] :where(input, textarea)::placeholder {
  color: color-mix(in srgb, var(--ctl-muted) 80%, transparent);
  font-weight: 450;
}

body[data-ui-version="44"] :where(input[type="checkbox"], input[type="radio"]) {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--ctl-accent);
  cursor: pointer;
}

body[data-ui-version="44"] :where(label, .field-label) {
  color: color-mix(in srgb, var(--ctl-text) 86%, var(--ctl-muted));
  font-weight: 650;
}

/* 按钮：主操作、普通操作、危险操作清晰分级 */
body[data-ui-version="44"] .app-shell :where(.primary-button, .ghost-button, .small-button),
body[data-ui-version="44"] .modal-root :where(.primary-button, .ghost-button, .small-button) {
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body[data-ui-version="44"] .app-shell :where(.primary-button, .small-button.primary),
body[data-ui-version="44"] .modal-root :where(.primary-button, .small-button.primary) {
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--ctl-accent) 76%, #243683);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ctl-accent) 90%, #fff) 0%, var(--ctl-accent-strong) 100%);
  box-shadow: var(--ctl-blue-shadow), inset 0 1px 0 rgba(255, 255, 255, .2);
}

body[data-ui-version="44"] .app-shell :where(.primary-button, .small-button.primary):hover:not(:disabled),
body[data-ui-version="44"] .modal-root :where(.primary-button, .small-button.primary):hover:not(:disabled) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ctl-accent) 82%, #fff) 0%, color-mix(in srgb, var(--ctl-accent-strong) 88%, #1d2d75) 100%);
  box-shadow: 0 10px 24px rgba(55, 76, 173, .25), inset 0 1px 0 rgba(255, 255, 255, .24);
  transform: translateY(-1px);
}

body[data-ui-version="44"] .app-shell :where(.primary-button, .small-button.primary):active:not(:disabled),
body[data-ui-version="44"] .modal-root :where(.primary-button, .small-button.primary):active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 9px rgba(55, 76, 173, .18);
}

body[data-ui-version="44"] .app-shell :where(.ghost-button, .small-button:not(.primary):not(.danger)),
body[data-ui-version="44"] .modal-root :where(.ghost-button, .small-button:not(.primary):not(.danger)) {
  color: color-mix(in srgb, var(--ctl-text) 92%, var(--ctl-accent));
  border: 1px solid var(--ctl-border);
  background: linear-gradient(180deg, var(--ctl-surface-raised), var(--ctl-surface-muted));
  box-shadow: 0 2px 7px rgba(32, 49, 76, .06);
}

body[data-ui-version="44"] .app-shell :where(.ghost-button, .small-button:not(.primary):not(.danger)):hover:not(:disabled),
body[data-ui-version="44"] .modal-root :where(.ghost-button, .small-button:not(.primary):not(.danger)):hover:not(:disabled) {
  color: var(--ctl-accent-strong);
  border-color: color-mix(in srgb, var(--ctl-accent) 45%, var(--ctl-border));
  background: var(--ctl-accent-soft);
  box-shadow: 0 5px 14px rgba(46, 68, 128, .12);
}

body[data-ui-version="44"] .app-shell :where(.small-button.danger, .danger-button),
body[data-ui-version="44"] .modal-root :where(.small-button.danger, .danger-button) {
  color: #b4233f;
  border: 1px solid #f0a9b7;
  background: #fff4f6;
  box-shadow: none;
}

body[data-ui-version="44"] .app-shell :where(.small-button.danger, .danger-button):hover:not(:disabled),
body[data-ui-version="44"] .modal-root :where(.small-button.danger, .danger-button):hover:not(:disabled) {
  color: #fff;
  border-color: #c8324d;
  background: #c8324d;
}

body[data-ui-version="44"] :where(button, .small-button, .primary-button, .ghost-button)[disabled] {
  color: color-mix(in srgb, var(--ctl-muted) 72%, #fff) !important;
  border-color: var(--ctl-border-soft) !important;
  background: var(--ctl-surface-muted) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: .72 !important;
}

/* 工具条和筛选区：从页面背景中明确分组 */
body[data-ui-version="44"] .app-shell :where(.toolbar, .catalog-commandbar, .catalog-filter-row, .store-catalog-filter-row, .product-catalog-actions, .catalog-product-summary, .store-product-summary) {
  border: 1px solid var(--ctl-border-soft);
  border-radius: 13px;
  background:
    linear-gradient(100deg, var(--ctl-accent-softer), transparent 58%),
    var(--ctl-surface);
  box-shadow: 0 3px 12px rgba(31, 49, 79, .045);
}

body[data-ui-version="44"] .app-shell :where(.catalog-commandbar, .catalog-filter-row, .store-catalog-filter-row) {
  gap: 9px;
  padding: 10px 12px;
}

body[data-ui-version="44"] .catalog-filter-row {
  align-items: center;
  min-width: 0;
}

body[data-ui-version="44"] .catalog-search-confirm {
  min-width: 0;
  min-height: 40px;
  overflow: visible;
}

body[data-ui-version="44"] .catalog-search-confirm :where(input, button) {
  min-height: 40px !important;
}

body[data-ui-version="44"] .catalog-command-actions {
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

body[data-ui-version="44"] .app-shell :where(.catalog-search-form, .catalog-command-search, .store-catalog-search) input {
  background-color: var(--ctl-surface-raised);
}

body[data-ui-version="44"] .app-shell :where(.catalog-category-trigger, .catalog-price-filter-trigger) {
  min-height: 40px;
  color: var(--ctl-text);
  border: 1px solid var(--ctl-border);
  border-radius: 10px;
  background: var(--ctl-surface-raised);
  box-shadow: 0 2px 7px rgba(32, 49, 76, .05);
}

body[data-ui-version="44"] .app-shell :where(.catalog-category-trigger, .catalog-price-filter-trigger):hover,
body[data-ui-version="44"] .app-shell details[open] > :where(.catalog-category-trigger, .catalog-price-filter-trigger) {
  color: var(--ctl-accent-strong);
  border-color: color-mix(in srgb, var(--ctl-accent) 52%, var(--ctl-border));
  background: var(--ctl-accent-soft);
}

/* 筛选弹层：有明确标题区、内容区、操作区 */
body[data-ui-version="44"] :where(.catalog-category-popover, .catalog-price-filter-popover).catalog-floating-popover {
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--ctl-accent) 24%, var(--ctl-border)) !important;
  border-radius: 15px !important;
  background: var(--ctl-surface-raised) !important;
  color: var(--ctl-text) !important;
  box-shadow: var(--ctl-popup-shadow) !important;
}

body[data-ui-version="44"] :where(.catalog-category-actions, .catalog-price-filter-actions) {
  gap: 8px;
  padding: 11px 0 0 !important;
  border-top: 1px solid var(--ctl-border-soft) !important;
  background: var(--ctl-surface-raised) !important;
}

body[data-ui-version="44"] .catalog-category-options label {
  min-height: 34px;
  padding: 6px 7px;
  border-radius: 8px;
  transition: background-color .14s ease, color .14s ease;
}

body[data-ui-version="44"] .catalog-category-options label:hover {
  color: var(--ctl-accent-strong);
  background: var(--ctl-accent-soft);
}

/* 数据表：表头、行、数字列和操作区形成清晰节奏 */
body[data-ui-version="44"] .erp-master-table .table-wrap,
body[data-ui-version="44"] .table-wrap {
  border: 1px solid var(--ctl-border-soft);
  border-radius: 13px;
  background: var(--ctl-surface-raised);
  box-shadow: 0 5px 16px rgba(34, 52, 82, .055);
}

body[data-ui-version="44"] .erp-master-table thead th,
body[data-ui-version="44"] .table-wrap thead th {
  min-height: 42px;
  padding-top: 11px;
  padding-bottom: 11px;
  color: color-mix(in srgb, var(--ctl-text) 86%, var(--ctl-muted));
  font-size: 13px;
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: .015em;
  border-bottom: 1px solid var(--ctl-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ctl-accent) 7%, var(--ctl-surface-raised)), var(--ctl-surface-muted));
  box-shadow: 0 2px 5px rgba(31, 48, 76, .06);
}

body[data-ui-version="44"] .erp-master-table tbody td,
body[data-ui-version="44"] .table-wrap tbody td {
  color: color-mix(in srgb, var(--ctl-text) 92%, var(--ctl-muted));
  font-size: 14px;
  line-height: 1.45;
  border-bottom-color: var(--ctl-border-soft);
  background-color: var(--ctl-surface-raised);
  transition: background-color .14s ease, box-shadow .14s ease;
}

body[data-ui-version="44"] .erp-master-table tbody tr:nth-child(even) td,
body[data-ui-version="44"] .table-wrap tbody tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--ctl-surface-muted) 56%, var(--ctl-surface-raised));
}

body[data-ui-version="44"] .erp-master-table tbody tr:hover td,
body[data-ui-version="44"] .table-wrap tbody tr:hover td {
  background-color: var(--ctl-accent-soft);
}

body[data-ui-version="44"] .erp-master-table tbody tr:hover td:first-child,
body[data-ui-version="44"] .table-wrap tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--ctl-accent);
}

body[data-ui-version="44"] :where(.catalog-upc, .material-code, .order-number, .money, .store-stock-value) {
  color: color-mix(in srgb, var(--ctl-text) 88%, var(--ctl-accent));
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

body[data-ui-version="44"] .catalog-row-actions,
body[data-ui-version="44"] .row-actions {
  gap: 7px;
}

body[data-ui-version="44"] .catalog-row-actions .small-button,
body[data-ui-version="44"] td .small-button {
  min-height: 33px;
  padding: 6px 10px;
  font-size: 13px;
}

/* 标签和状态不再挤成同一个灰度 */
body[data-ui-version="44"] :where(.status-badge, .badge, .pill) {
  border-width: 1px;
  border-style: solid;
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

/* 弹窗：标题、正文、底部操作明确分层 */
body[data-ui-version="44"] .modal-root {
  background: rgba(16, 29, 52, .45);
  backdrop-filter: blur(7px);
}

body[data-ui-version="44"] .modal {
  border-radius: 17px;
  box-shadow: 0 30px 80px rgba(18, 31, 55, .32);
}

body[data-ui-version="44"] .modal-header {
  min-height: 64px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ctl-border-soft);
  background:
    linear-gradient(100deg, var(--ctl-accent-soft), transparent 60%),
    var(--ctl-surface-raised);
}

body[data-ui-version="44"] .modal-header h2,
body[data-ui-version="44"] .modal-header h3 {
  margin: 0;
  color: var(--ctl-text);
  font-size: 20px;
  letter-spacing: -.02em;
}

body[data-ui-version="44"] .modal-body {
  padding: 20px;
  background: var(--ctl-surface-raised);
}

body[data-ui-version="44"] .modal-footer {
  gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--ctl-border-soft);
  background: var(--ctl-surface-muted);
}

/* 提醒框降低干扰：保留可见性，不遮挡主要控件 */
body[data-ui-version="44"] .delivery-reminder-root {
  border: 1px solid color-mix(in srgb, #e6a625 38%, var(--ctl-border));
  border-radius: 13px;
  background: color-mix(in srgb, #fff8de 82%, var(--ctl-surface-raised));
  box-shadow: 0 14px 34px rgba(77, 60, 21, .16);
}

/* 深色主题沿用同一控件结构，改用主题自身底色 */
html[data-local-theme="dark"] body[data-ui-version="44"] {
  --ctl-accent-strong: color-mix(in srgb, var(--accent, #7888ff) 84%, #fff);
  --ctl-blue-shadow: 0 8px 20px rgba(0, 0, 0, .26);
  --ctl-panel-shadow: 0 10px 28px rgba(0, 0, 0, .2);
  --ctl-popup-shadow: 0 24px 60px rgba(0, 0, 0, .46);
}

@media (max-width: 1180px) {
  body[data-ui-version="44"] .app-shell :where(.catalog-commandbar, .catalog-filter-row, .store-catalog-filter-row) {
    flex-wrap: wrap;
  }

  body[data-ui-version="44"] .app-shell :where(.catalog-commandbar, .store-catalog-filter-row) > :first-child {
    flex: 1 1 420px;
  }
}

@media (max-width: 1450px) {
  body[data-ui-version="44"] .catalog-commandbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body[data-ui-version="44"] .catalog-filter-row {
    width: 100% !important;
    grid-template-columns: minmax(240px, 1fr) 132px 138px 146px 72px !important;
  }

  body[data-ui-version="44"] .catalog-command-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

@media (max-width: 980px) {
  body[data-ui-version="44"] .catalog-filter-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(126px, auto)) !important;
    height: auto !important;
  }

  body[data-ui-version="44"] .catalog-search-confirm {
    grid-column: 1 / -1;
  }

  body[data-ui-version="44"] .catalog-sort-control,
  body[data-ui-version="44"] .catalog-sort-direction {
    min-width: 0 !important;
  }
}

@media (max-width: 720px) {
  body[data-ui-version="44"] .app-shell :where(.primary-button, .ghost-button, .small-button),
  body[data-ui-version="44"] .modal-root :where(.primary-button, .ghost-button, .small-button) {
    min-height: 42px;
  }

  body[data-ui-version="44"] .app-shell :where(.toolbar, .catalog-commandbar, .catalog-filter-row, .store-catalog-filter-row) {
    padding: 9px;
    border-radius: 11px;
  }

  body[data-ui-version="44"] .modal-header,
  body[data-ui-version="44"] .modal-body,
  body[data-ui-version="44"] .modal-footer {
    padding-right: 14px;
    padding-left: 14px;
  }

  body[data-ui-version="44"] .catalog-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  body[data-ui-version="44"] .catalog-command-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-ui-version="44"] .catalog-command-actions > :last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-ui-version="44"] *,
  body[data-ui-version="44"] *::before,
  body[data-ui-version="44"] *::after {
    transition-duration: .01ms !important;
  }
}