/* Homebase skin for the seller and warehouse portals.
 *
 * Both ship as compiled Ant Design Vue bundles with no source and hard-coded
 * colours (#1890ff, #7c4dff, #536dfe ...), so this is an override layer loaded
 * after their own stylesheet. It only repaints: no layout, no component
 * structure, no behaviour is touched, so every screen keeps working exactly as
 * before.
 *
 * Load order matters — this file must come after /{seller,warehouse}/assets/index-*.css. */

/* 令牌层由页面用独立 <link> 并行加载；这里不用 @import——
 * @import 要等本文件解析完才发起，是一次串行往返，在单线程 PHP 服务器下
 * 明显拖慢门户启动。 */

/* ---------- the portals' own design tokens ----------
 * Both bundles ship the same :root block (--primary-color: #396353 and a set of
 * Element Plus aliases). Remapping those is the widest lever available: it
 * repaints everything the apps style through their own variables, before any
 * per-component rule below is needed. This stylesheet loads after theirs, so
 * equal-specificity declarations here win. */
:root {
  --primary-color: var(--wf-purple-600) !important;
  --el-color-primary: var(--wf-purple-600) !important;
  --el-color-primary-light-3: var(--wf-purple-400) !important;
  --el-color-primary-light-5: var(--wf-purple-300) !important;
  --el-color-primary-light-9: var(--wf-purple-50) !important;
  --el-color-primary-dark-2: var(--wf-purple-700) !important;
  --success-color: var(--wf-green-600) !important;
  --warning-color: var(--wf-orange-600) !important;
  --danger-color: var(--wf-red-700) !important;
  --red-color: var(--wf-red-700) !important;
  --linger-color: var(--wf-purple-300) !important;
  --wuliu-color: var(--wf-purple-600) !important;
  --font-default-color: var(--wf-gray-700) !important;
  --border-default-color: var(--wf-line) !important;
  --background-color: var(--wf-gray-50) !important;
  --refrech-color: var(--wf-gray-700) !important;
  --font-black-color: var(--wf-gray-900) !important;
  --font-family: 'Figtree', sofiaFallback, arial, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wf-font);
  color: var(--wf-text);
}
body,
.ant-layout,
.ant-menu,
.ant-btn,
.ant-input,
.ant-table,
.ant-card,
.ant-modal,
.ant-dropdown,
.ant-form,
.ant-descriptions,
.ant-list,
.ant-select,
.ant-picker,
.ant-tabs,
.ant-pagination {
  font-family: var(--wf-font);
}

body {
  color: var(--wf-text);
  background: var(--wf-surface);
}

/* ---------- links ---------- */
a { color: var(--wf-link); }
a:hover,
a:focus { color: var(--wf-action-hover); }

/* ---------- buttons ---------- */
.ant-btn {
  border-radius: var(--wf-radius-pill);
  font-family: var(--wf-font);
  transition: background-color var(--wf-duration) var(--wf-ease),
              border-color var(--wf-duration) var(--wf-ease),
              color var(--wf-duration) var(--wf-ease);
}
.ant-btn-primary {
  background: var(--wf-action);
  border-color: var(--wf-action);
  color: var(--wf-text-inverse);
  text-shadow: none;
  box-shadow: none;
}
.ant-btn-primary:hover,
.ant-btn-primary:focus {
  background: var(--wf-action-hover);
  border-color: var(--wf-action-hover);
  color: var(--wf-text-inverse);
}
.ant-btn-primary:active {
  background: var(--wf-action-active);
  border-color: var(--wf-action-active);
}
.ant-btn-default,
.ant-btn:not([class*='ant-btn-']) {
  border-color: var(--wf-action);
  color: var(--wf-action);
}
.ant-btn-default:hover,
.ant-btn-default:focus {
  border-color: var(--wf-action-hover);
  color: var(--wf-action-hover);
  background: var(--wf-purple-50);
}
.ant-btn-link { color: var(--wf-action); }
.ant-btn-link:hover { color: var(--wf-action-hover); }
.ant-btn-dangerous,
.ant-btn-danger {
  background: var(--wf-red-700);
  border-color: var(--wf-red-700);
  color: var(--wf-text-inverse);
}
.ant-btn-dangerous:hover,
.ant-btn-danger:hover {
  background: var(--wf-red-600);
  border-color: var(--wf-red-600);
}
.ant-btn[disabled],
.ant-btn[disabled]:hover {
  background: var(--wf-gray-50);
  border-color: var(--wf-line);
  color: var(--wf-gray-400);
}

/* ---------- inputs ---------- */
.ant-input,
.ant-input-affix-wrapper,
.ant-input-number,
.ant-select:not(.ant-select-customize-input) .ant-select-selector,
.ant-picker {
  border-radius: var(--wf-radius-4);
  border-color: var(--wf-line-strong);
}
.ant-input:hover,
.ant-input-affix-wrapper:hover,
.ant-input-number:hover,
.ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.ant-picker:hover {
  border-color: var(--wf-action);
}
.ant-input:focus,
.ant-input-focused,
.ant-input-affix-wrapper-focused,
.ant-input-number-focused,
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
.ant-picker-focused {
  border-color: var(--wf-action);
  box-shadow: 0 0 0 2px rgba(123, 24, 159, 0.15);
}

/* ---------- selection controls ---------- */
.ant-checkbox-checked .ant-checkbox-inner,
.ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: var(--wf-action);
  border-color: var(--wf-action);
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner,
.ant-checkbox:hover .ant-checkbox-inner { border-color: var(--wf-action); }
.ant-radio-checked .ant-radio-inner { border-color: var(--wf-action); }
.ant-radio-inner::after { background-color: var(--wf-action); }
.ant-switch-checked { background-color: var(--wf-action); }

.ant-radio-button-wrapper { border-radius: 0; }
.ant-radio-button-wrapper:first-child { border-radius: var(--wf-radius-pill) 0 0 var(--wf-radius-pill); }
.ant-radio-button-wrapper:last-child { border-radius: 0 var(--wf-radius-pill) var(--wf-radius-pill) 0; }
.ant-radio-button-wrapper:hover { color: var(--wf-action); }
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: var(--wf-action);
  border-color: var(--wf-action);
  color: var(--wf-text-inverse);
}
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before { background-color: var(--wf-action); }

/* ---------- navigation ---------- */
.ant-layout-header { background: var(--wf-surface); }
.ant-layout-sider,
.ant-layout-sider-primary { background: var(--wf-surface); }

.ant-menu-light .ant-menu-item-selected,
.ant-menu-light .ant-menu-submenu-selected,
.ant-menu-item-selected {
  color: var(--wf-action);
  background: var(--wf-purple-50);
}
.ant-menu-light .ant-menu-item:hover,
.ant-menu-light .ant-menu-submenu-title:hover { color: var(--wf-action); }
.ant-menu-inline .ant-menu-item-selected::after,
.ant-menu-vertical .ant-menu-item-selected::after { border-right-color: var(--wf-action); }
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: var(--wf-action);
  border-bottom-color: var(--wf-action);
}
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub { background: var(--wf-purple-900); }
.ant-menu-dark .ant-menu-item-selected { background: var(--wf-action); }

/* ---------- surfaces ---------- */
.ant-card,
.ant-modal-content,
.ant-drawer-content,
.ant-collapse,
.ant-alert {
  border-radius: var(--wf-radius-8);
}
.ant-card { border-color: var(--wf-line); }
.ant-card-head { border-bottom-color: var(--wf-line); font-family: var(--wf-font); }
.ant-modal-header { border-bottom-color: var(--wf-line); border-radius: var(--wf-radius-8) var(--wf-radius-8) 0 0; }
.ant-modal-footer { border-top-color: var(--wf-line); }

/* ---------- tables ---------- */
.ant-table { color: var(--wf-text); }
.ant-table-thead > tr > th {
  background: var(--wf-gray-50);
  color: var(--wf-text);
  font-weight: 700;
  border-bottom-color: var(--wf-line);
}
.ant-table-tbody > tr > td { border-bottom-color: var(--wf-line); }
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover { background: var(--wf-purple-50); }
.ant-table-tbody > tr.ant-table-row-selected > td { background: var(--wf-purple-50); }

/* ---------- pagination / tabs / steps ---------- */
.ant-pagination-item-active,
.ant-pagination-item:hover {
  border-color: var(--wf-action);
  border-radius: var(--wf-radius-pill);
}
.ant-pagination-item-active a,
.ant-pagination-item:hover a { color: var(--wf-action); }
.ant-pagination-prev:hover .ant-pagination-item-link,
.ant-pagination-next:hover .ant-pagination-item-link {
  border-color: var(--wf-action);
  color: var(--wf-action);
}

.ant-tabs-tab:hover,
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: var(--wf-action); }
.ant-tabs-ink-bar { background: var(--wf-action); }

.ant-steps-item-process .ant-steps-item-icon {
  background: var(--wf-action);
  border-color: var(--wf-action);
}
.ant-steps-item-finish .ant-steps-item-icon { border-color: var(--wf-action); }
.ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { color: var(--wf-action); }

/* ---------- status colours ---------- */
.ant-tag-purple, .ant-tag-processing { color: var(--wf-action); background: var(--wf-purple-50); border-color: var(--wf-purple-100); }
.ant-tag-green, .ant-tag-success { color: var(--wf-green-600); background: var(--wf-green-50); border-color: var(--wf-green-100); }
.ant-tag-red, .ant-tag-error { color: var(--wf-red-700); background: var(--wf-red-50); border-color: var(--wf-red-100); }
.ant-badge-status-processing { background: var(--wf-action); }
.ant-badge-count { background: var(--wf-red-700); }
.ant-spin-dot-item { background-color: var(--wf-action); }
.ant-progress-bg { background-color: var(--wf-action); }

/* ---------- misc ---------- */
.ant-dropdown-menu { border-radius: var(--wf-radius-8); box-shadow: var(--wf-shadow-3); }
.ant-dropdown-menu-item:hover { background: var(--wf-purple-50); }
.ant-avatar { background: var(--wf-purple-600); }
.ant-divider { border-color: var(--wf-line); }
.ant-upload.ant-upload-drag:hover { border-color: var(--wf-action); }

::selection { background: var(--wf-purple-100); color: var(--wf-text); }

/* ---------- logo ----------
 * Both portals pull the same logo from the backend's mirrored uploads
 * (/uploads/cache/e5bcffc7…png), so it lives in data, not in the bundle.
 * Swapping it here keeps that mirrored file untouched and reversible: remove
 * this block and the original comes back. Falls back to the built-in wordmark
 * when /logo.png is absent, because `content` with a missing url renders
 * nothing — hence the background as a second layer rather than a replacement. */
img[src*="/uploads/cache/e5bcffc7b47a1304c21cecba"] {
  content: url('/logo.png');
  object-fit: contain;
  object-position: left center;
}