/* ============================================================
   麓小鸣旅拍 · Web 管理后台 · 通用视觉统一层（lxm-polish.css）
   UI Designer · 2026-08-14
   ------------------------------------------------------------
   作用：对「全局共享基元」做品牌化收口，使所有尚未单独精修的模块
   （订单列表、渠道、系统、登录等）一并达到 audit / reconciliation
   同级的视觉水准；同时补齐全站一致的可访问性细节。
   原则：
   - 仅用品牌令牌，不新增硬编码颜色；
   - 只改全局单类名选择器；页面级 .page-route-x .xxx 特异性更高，不受影响；
   - 不改动任何 HTML 结构与 JS 逻辑（纯视觉收口）。
   ============================================================ */

/* ---------- 卡片 / 面板 / 指标卡：统一圆角·描边·轻投影·暖底 ---------- */
.table-card,
.panel,
.stat-card {
  border-radius: var(--lxm-r-lg);
  border: 1px solid var(--lxm-line);
  background: var(--lxm-surface);
  box-shadow: var(--lxm-shadow-sm);
}

/* ---------- 筛选条：品牌左侧强调 ---------- */
.filter-card {
  border-radius: var(--lxm-r-lg);
  border: 1px solid var(--lxm-line);
  border-left: 4px solid var(--lxm-brand);
  background: var(--lxm-surface);
  box-shadow: var(--lxm-shadow-sm);
}

/* ---------- 订单状态快捷筛选（order-alerts） ---------- */
.order-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.order-alerts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--lxm-line);
  border-radius: var(--lxm-r-pill);
  background: var(--lxm-surface);
  color: var(--lxm-ink-2);
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--lxm-shadow-sm);
  transition: border-color var(--lxm-t-fast), background var(--lxm-t-fast), color var(--lxm-t-fast);
}
.order-alerts button:hover {
  border-color: var(--lxm-brand-soft-2);
}
.order-alerts button.active {
  border-color: var(--lxm-brand);
  background: var(--lxm-brand-soft);
  color: var(--lxm-brand);
  font-weight: 600;
}
.order-alerts button.active span {
  background: var(--lxm-brand) !important;
}

/* ---------- 指标 / 汇总卡（order-summary / kpi-card） ---------- */
.order-summary > div,
.kpi-card {
  border-radius: var(--lxm-r-lg);
  border: 1px solid var(--lxm-line);
  background: var(--lxm-surface);
  box-shadow: var(--lxm-shadow-sm);
}
.order-summary > div,
.kpi-card {
  transition: border-color var(--lxm-t-fast), box-shadow var(--lxm-t-fast), transform var(--lxm-t-fast);
}
.order-summary > div:hover,
.kpi-card:hover {
  border-color: var(--lxm-brand-soft-2);
  box-shadow: var(--lxm-shadow-md);
  transform: translateY(-2px);
}
.kpi-card.active {
  border-color: var(--lxm-brand);
  background: var(--lxm-brand-soft);
}
.kpi-card.active::after {
  color: var(--lxm-brand);
}
.kpi-card em {
  color: var(--lxm-brand-ink);
}

/* ---------- 数据范围条 / 批量操作条 / 翻页 ---------- */

/* 高级筛选折叠区：订单列表等筛选卡内第二层 */
.filter-card .filter-advanced {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  margin-top: 2px;
  border-top: 1px dashed var(--lxm-line);
}
.filter-card .filter-advanced .el-select,
.filter-card .filter-advanced .el-input {
  width: 180px;
}

/* 表格空态：与品牌风格统一（麓小鸣暖色调，替代默认灰色“暂无数据”） */
.el-table__empty-block {
  padding: 18px 0;
}
.el-table__empty-text {
  color: var(--lxm-brand-ink, #8a7a6d);
  font-size: 13px;
  line-height: 1.9;
}
.el-table__empty-text::before {
  content: "🦌";
  display: block;
  font-size: 22px;
  margin-bottom: 2px;
  opacity: .55;
}

.tenant-scope-bar,
.table-pager {
  border-radius: var(--lxm-r-lg);
  border: 1px solid var(--lxm-line);
  background: var(--lxm-surface);
  box-shadow: var(--lxm-shadow-sm);
}
.batch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--lxm-line);
  border-left: 4px solid var(--lxm-brand-strong);
  border-radius: var(--lxm-r-lg);
  background: var(--lxm-surface);
  box-shadow: var(--lxm-shadow-sm);
}
.batch-bar strong,
.batch-bar .batch-stats {
  color: var(--lxm-ink-2);
  font-size: 13px;
}

/* ---------- 页面级配置头（渠道/权限等）：与财务审核头一致的品牌左侧强调 ---------- */
.config-page-head {
  border-left: 4px solid var(--lxm-brand-strong) !important;
}
.config-metric-grid div {
  transition: border-color var(--lxm-t-fast), box-shadow var(--lxm-t-fast), transform var(--lxm-t-fast);
}
.config-metric-grid div:hover {
  border-color: var(--lxm-brand-soft-2);
  box-shadow: var(--lxm-shadow-md);
  transform: translateY(-2px);
}

/* ---------- Element Plus 表格：品牌化表头 + 暖色 hover（全局统一） ---------- */
.el-table {
  --el-table-border-color: var(--lxm-line);
  --el-table-header-bg-color: var(--lxm-cream);
  font-size: 13px;
}
.el-table th.el-table__cell {
  background: var(--lxm-cream) !important;
  color: var(--lxm-ink-3) !important;
  font-weight: 700;
}
.el-table td.el-table__cell {
  padding: 9px 0;
}
.el-table .cell {
  line-height: 1.4;
}
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: var(--lxm-bg);
}
.el-table__body tr:hover > td.el-table__cell {
  background: var(--lxm-brand-soft) !important;
}

/* ---------- 通用状态点（status-dot 多数模块内联设色，这里补尺寸） ---------- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---------- 表内链接 / 次要文字 ---------- */

.muted {
  color: var(--lxm-muted);
}

/* ---------- 品牌滚动条 ---------- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--lxm-line-strong);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lxm-brand-vivid);
}

/* ---------- 全站一致性：可访问性（WCAG AA 聚焦环 + 品牌选区） ---------- */
:focus-visible {
  outline: 2px solid var(--lxm-brand);
  outline-offset: 2px;
}
::selection {
  background: var(--lxm-brand-soft);
  color: var(--lxm-ink-3);
}

/* ============================================================
   核心 Element Plus 基元品牌化（全局收口 · 第二阶段）
   UI Designer · 2026-08-14
   ------------------------------------------------------------
   目标：让尚未单独精修的模块（订单列表 / 渠道 / 配置中心 /
   系统设置 / 售后 / 任务 …）的输入、选择、分页、标签、
   勾选、标签页也呈现品牌色，与已精修模块（audit /
   reconciliation / dashboard）保持同一套视觉语言。
   策略：仅覆盖「EP 默认蓝」的全局单类名；页面级
   .page-route-x .xxx 特异性更高，仍优先生效，互不影响。
   ============================================================ */

/* ---------- 输入框 / 文本域 / 下拉 / 日期范围：聚焦品牌描边 ---------- */
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-select .el-input.is-focus .el-input__wrapper,
.el-range-editor.is-active {
  box-shadow: 0 0 0 1px var(--lxm-brand) inset !important;
}
.el-textarea__inner:focus {
  box-shadow: 0 0 0 1px var(--lxm-brand) inset !important;
  outline: none;
}

/* ---------- 勾选 / 单选 / 开关：品牌选中态 ---------- */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--lxm-brand);
  border-color: var(--lxm-brand);
}
.el-switch.is-checked .el-switch__core {
  background-color: var(--lxm-brand);
  border-color: var(--lxm-brand);
}

/* ---------- 分页：当前页品牌填充 ---------- */
.el-pagination.is-background .el-pager li.is-active {
  background-color: var(--lxm-brand);
  color: #fff;
  font-weight: 600;
}

/* ---------- 标签页：激活品牌色 + 品牌指示条 ---------- */
.el-tabs__item.is-active {
  color: var(--lxm-brand);
  font-weight: 600;
}
.el-tabs__active-bar {
  background-color: var(--lxm-brand);
}

/* ---------- 默认标签（无 type）：品牌浅底，避免 raw 蓝 ---------- */
.el-tag:not(.el-tag--success):not(.el-tag--warning):not(.el-tag--danger):not(.el-tag--info):not(.el-tag--primary) {
  background-color: var(--lxm-brand-soft);
  border-color: var(--lxm-brand-soft-2);
  color: var(--lxm-brand-ink);
}

/* ---------- 弹窗关闭钮：悬停品牌色（轻量微交互） ---------- */
.el-dialog__headerbtn:hover .el-dialog__close,
.el-message-box__headerbtn:hover .el-message-box__close {
  color: var(--lxm-brand);
}

/* ---------- 会话验证态 ---------- */
.auth-loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  color: var(--lxm-ink-2);
  background: var(--lxm-cream);
  text-align: center;
}
.auth-loading-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--lxm-r-lg);
  color: #fff;
  background: var(--lxm-brand-grad);
  box-shadow: var(--lxm-shadow-md);
  font-size: 24px;
  font-weight: 800;
}
.auth-loading strong { font-size: 16px; color: var(--lxm-ink); }
.auth-loading span { color: var(--lxm-muted); font-size: 13px; }

.conn-status.conn-offline {
  color: var(--lxm-warning);
  background: var(--lxm-warning-soft);
  border-color: var(--lxm-line-strong);
}

/* ---------- 内容页冷灰残留收口（动态页面样式之后仍以令牌为准） ---------- */
.page-route-spot,
.page-route-album,
.page-route-package,
.page-route-shelf-products,
.page-route-contentTags,
.page-route-productAudit,
.page-route-peripherals,
.page-route-addonServices,
.page-route-videoSingle {
  --content-ink: var(--lxm-ink-2) !important;
  --content-muted: var(--lxm-muted) !important;
  --content-line: var(--lxm-line) !important;
  --content-panel: var(--lxm-surface) !important;
  --content-soft: var(--lxm-bg) !important;
  --content-shadow: var(--lxm-shadow-sm) !important;
}
.page-route-spot h3,
.page-route-spot h4,
.page-route-album h3,
.page-route-album h4,
.page-route-package h3,
.page-route-package h4,
.page-route-shelf-products h3,
.page-route-contentTags h3,
.page-route-productAudit h3,
.page-route-peripherals h3,
.page-route-addonServices h3,
.page-route-videoSingle h3,
.page-route-album .album-toolbar h3,
.page-route-package .pkg-toolbar h3,
.page-route-peripherals .ppl-toolbar h3,
.page-route-videoSingle .vse-toolbar h3 {
  color: var(--lxm-ink) !important;
}
.page-route-spot p,
.page-route-album p,
.page-route-package p,
.page-route-shelf-products p,
.page-route-contentTags p,
.page-route-productAudit p,
.page-route-peripherals p,
.page-route-addonServices p,
.page-route-videoSingle p,
.page-route-album .muted,
.page-route-package .muted,
.page-route-peripherals .muted,
.page-route-videoSingle .muted {
  color: var(--lxm-muted) !important;
}
.page-route-spot .spot-toolbar,
.page-route-album .album-toolbar,
.page-route-package .pkg-toolbar,
.page-route-shelf-products .shelf-toolbar,
.page-route-contentTags .tag-toolbar,
.page-route-productAudit .audit-toolbar,
.page-route-peripherals .ppl-toolbar,
.page-route-addonServices .addon-toolbar,
.page-route-videoSingle .vse-toolbar,
.page-route-spot .spot-tree-card,
.page-route-spot .spot-detail-card,
.page-route-spot .spot-relation-panel,
.page-route-album .album-list,
.page-route-album .album-form,
.page-route-package .pkg-list,
.page-route-package .pkg-form,
.page-route-peripherals .ppl-list,
.page-route-peripherals .ppl-form,
.page-route-videoSingle .vse-list,
.page-route-videoSingle .vse-form {
  border-color: var(--lxm-line) !important;
  background: var(--lxm-surface) !important;
  box-shadow: var(--lxm-shadow-sm) !important;
}

/* ---------- 移动端后台导航与编辑器 ---------- */
.mobile-menu-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lxm-line-strong);
  border-radius: var(--lxm-r-sm);
  color: var(--lxm-ink-2);
  background: var(--lxm-surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.mobile-nav-backdrop { display: none; }

@media (max-width: 760px) {
  .admin-shell { display: block !important; min-width: 0 !important; }
  .lxm-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: 264px !important;
    flex: 0 0 264px !important;
    transform: translateX(-105%);
    transition: transform var(--lxm-t-normal);
    z-index: 1000 !important;
  }
  .lxm-sidebar.mobile-open { transform: translateX(0); }
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    border: 0;
    background: rgba(42, 33, 27, .42);
    cursor: pointer;
  }
  .lxm-main { width: 100%; min-width: 0; }
  .lxm-topbar {
    min-height: 0 !important;
    padding: 10px 12px !important;
    align-items: flex-start !important;
  }
  .lxm-topbar > div:first-child {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    width: 100%;
  }
  .mobile-menu-toggle { display: inline-flex; grid-column: 1; grid-row: 1 / span 3; }
  .lxm-topbar > div:first-child .topbar-breadcrumb { grid-column: 2; grid-row: 1; min-width: 0; }
  .lxm-topbar > div:first-child h1 { grid-column: 2; grid-row: 2; width: auto !important; min-width: 0; }
  .lxm-topbar > div:first-child p { grid-column: 2; grid-row: 3; min-width: 0; overflow-wrap: anywhere; }
  .lxm-topbar h1 { font-size: 17px !important; }
  .top-actions {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .top-actions > .el-date-editor,
  .top-actions > .el-select { width: min(100%, 220px) !important; max-width: 100% !important; }
  .lxm-content { padding: 12px !important; }
  .order-summary,
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .table-card,
  .panel,
  .lxm-table-card { overflow-x: auto; }
  .album-editor,
  .pkg-editor,
  .ppl-editor,
  .vse-editor,
  .decor-workbench,
  .lxm-layout--3,
  .lxm-layout--2,
  .lxm-layout--side { grid-template-columns: 1fr !important; }
  .album-preview,
  .pkg-preview,
  .ppl-preview,
  .vse-preview { position: static !important; }
  .el-dialog { width: calc(100vw - 24px) !important; max-width: calc(100vw - 24px) !important; }
}