/* =========================================================
   永恩农业-磐石系统 设计系统 (v66)
   基于 Ardot 设计令牌：Brand 绿/蓝主色可选 + 双主题(亮/暗) + Ant 圆角(4/6/8)/字号阶梯/间距基准令牌 + Element Plus 主题映射
   ========================================================= */

/* ===== 设计令牌 · 亮色主题 (默认) ===== */
:root {
  /* Brand 绿系 50→900 */
  --brand-50:  #EDFCF2;
  --brand-100: #D1FADE;
  --brand-200: #A6F5C4;
  --brand-300: #6BE8A6;
  --brand-400: #33D682;
  --brand-500: #12B86B;  /* 主色 */
  --brand-600: #039954;
  --brand-700: #037A47;
  --brand-800: #04613B;
  --brand-900: #044F30;

  /* Semantic 语义色 + 背景淡色 */
  --success: #12B86B; --success-bg: #EDFCF2;
  --warning: #F78F0A; --warning-bg: #FFF4E5;
  --error:   #F04538; --error-bg:   #FDECEB;
  --info:    #2E8FFA; --info-bg:    #E8F3FE;

  /* 表面 / 背景 */
  --bg-base:       #F7F7F7;
  --bg-surface:    #FFFFFF;
  --bg-elevated:   #FFFFFF;
  --bg-surface-2:  #F2F4F3;   /* 次级表面(表头/悬浮/代码块) */
  --brand-bg:      #EDFCF2;   /* 主色淡底(合计条) */

  /* 文本 */
  --text-primary:   #1A1C1C;
  --text-secondary: #575C59;
  --text-tertiary:  #8A8F8C;

  /* 边框 */
  --border-subtle: rgba(0,0,0,.08);
  --border-strong: rgba(0,0,0,.12);
  --border:        #DCDFE6;

  /* 侧边栏(双主题统一深色绿) */
  --sidebar-bg:        #0D120F;
  --sidebar-text:      #9CA39E;
  --sidebar-text-hover:#FFFFFF;
  --sidebar-border:    rgba(255,255,255,.08);

  /* 基础形状令牌 */
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px;   --radius-full: 9999px;

  /* 字号阶梯 (Ant: 基准14 / 行高1.571 · 阶梯 12/14/16/20/24/30) */
  --text-xs: 12px;
  --text-sm: 14px;   /* 基准 */
  --text-md: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 30px;
  --line-height-base: 1.571;

  /* 间距基准 (Ant: 4/8/12/16/24/32，以4为基准倍数) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-card: 0 2px 12px rgba(0,0,0,.06);
  --shadow-card-hover: 0 6px 20px rgba(0,0,0,.1);

  /* ===== Element Plus 主题映射 (亮) ===== */
  --el-color-primary: var(--brand-500);
  --el-color-primary-light-3: var(--brand-400);
  --el-color-primary-light-5: var(--brand-300);
  --el-color-primary-light-7: var(--brand-200);
  --el-color-primary-light-8: var(--brand-100);
  --el-color-primary-light-9: var(--brand-50);
  --el-color-primary-dark-2: var(--brand-600);
  --el-color-success: var(--success);
  --el-color-warning: var(--warning);
  --el-color-danger:  var(--error);
  --el-color-error:   var(--error);
  --el-color-info:    var(--info);
  --el-bg-color: var(--bg-surface);
  --el-bg-color-page: var(--bg-base);
  --el-bg-color-overlay: var(--bg-elevated);
  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-secondary);
  --el-text-color-secondary: var(--text-tertiary);
  --el-text-color-placeholder: var(--text-tertiary);
  --el-border-color: var(--border);
  --el-border-color-light: var(--border-subtle);
  --el-border-color-lighter: var(--border-subtle);
  --el-fill-color-blank: var(--bg-surface);
  --el-fill-color-light: var(--bg-surface-2);
  --el-fill-color-lighter: var(--bg-surface-2);
  --el-mask-color: rgba(0,0,0,.5);

  /* Element Plus 圆角(控件6/小4) 与 字号(基准14·行高1.571) —— 对齐 Ant */
  --el-border-radius-base: var(--radius-md);   /* 6px 控件默认 */
  --el-border-radius-small: var(--radius-sm);  /* 4px 小控件 */
  --el-border-radius-round: var(--radius-full);
  --el-font-size-base: var(--text-sm);         /* 14px */
  --el-font-line-height-primary: 22px;         /* 14 * 1.571 */
}

/* ===== 设计令牌 · 暗色主题 ===== */
html.theme-dark {
  --success-bg: #06291B;
  --warning-bg: #2E210A;
  --error-bg:   #2E1412;
  --info-bg:    #0E2238;

  --bg-base:       #0D120F;
  --bg-surface:    #171A17;
  --bg-elevated:   #1C211F;
  --bg-surface-2:  #1E231F;
  --brand-bg:      #06291B;

  --text-primary:   #E6E8E8;
  --text-secondary: #9CA39E;
  --text-tertiary:  #6B736E;

  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.14);
  --border:        rgba(255,255,255,.14);

  --sidebar-bg:        #0B0F0C;
  --sidebar-text:      #9CA39E;
  --sidebar-text-hover:#FFFFFF;
  --sidebar-border:    rgba(255,255,255,.06);

  --shadow-card: 0 2px 12px rgba(0,0,0,.4);
  --shadow-card-hover: 0 6px 20px rgba(0,0,0,.55);

  /* Element Plus (暗) */
  --el-bg-color: var(--bg-surface);
  --el-bg-color-page: var(--bg-base);
  --el-bg-color-overlay: var(--bg-elevated);
  --el-text-color-primary: var(--text-primary);
  --el-text-color-regular: var(--text-secondary);
  --el-text-color-secondary: var(--text-tertiary);
  --el-text-color-placeholder: var(--text-tertiary);
  --el-border-color: var(--border);
  --el-border-color-light: var(--border-subtle);
  --el-border-color-lighter: var(--border-subtle);
  --el-fill-color-blank: var(--bg-surface);
  --el-fill-color-light: var(--bg-surface-2);
  --el-fill-color-lighter: var(--bg-surface-2);
  --el-mask-color: rgba(0,0,0,.65);
}

/* ===== 主色轴 · 蓝 (Ant Design #1677FF) =====
   叠加在暗/亮主题之上：仅覆盖 brand 色阶 + 主色相关变量 + 亮色侧栏蓝调，
   表面/文本/边框仍由 .theme-dark 控制，互不冲突。 */
html.primary-blue {
  /* Ant 蓝阶 50→900 */
  --brand-50:  #E6F4FF;
  --brand-100: #BAE0FF;
  --brand-200: #91CAFF;
  --brand-300: #69B1FF;
  --brand-400: #4096FF;
  --brand-500: #1677FF;  /* 主色(蓝) */
  --brand-600: #0958D9;
  --brand-700: #003EB3;
  --brand-800: #00329B;
  --brand-900: #002C8C;

  --brand-bg: #E6F4FF;            /* 主色淡底(合计条/激活组) */

  /* 亮色侧栏(蓝调深底) */
  --sidebar-bg:     #001529;
  --sidebar-border: rgba(255,255,255,.08);

  /* Element Plus 主色(蓝) —— 其余语义/表面变量沿用 :root */
  --el-color-primary: var(--brand-500);
  --el-color-primary-light-3: var(--brand-400);
  --el-color-primary-light-5: var(--brand-300);
  --el-color-primary-light-7: var(--brand-200);
  --el-color-primary-light-8: var(--brand-100);
  --el-color-primary-light-9: var(--brand-50);
  --el-color-primary-dark-2: var(--brand-600);
}
html.primary-blue.theme-dark {
  --brand-bg: #0E2238;
  --sidebar-bg: #0A1A33;
  --sidebar-border: rgba(255,255,255,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; color: var(--text-primary); background: var(--bg-base); transition: background-color .25s, color .25s; }

/* ===== Element Plus 主题覆盖 ===== */
.el-button--primary { --el-button-bg-color: var(--brand-500); --el-button-border-color: var(--brand-500); --el-button-hover-bg-color: var(--brand-400); --el-button-hover-border-color: var(--brand-400); --el-button-active-bg-color: var(--brand-600); --el-button-active-border-color: var(--brand-600); }

/* ===== Sidebar ===== */
.sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); transition: width 0.3s, background-color .25s; overflow: hidden; }
.logo-area { height: 60px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); border-bottom: 1px solid var(--sidebar-border); }
.logo-icon { font-size: 28px; }
.logo-text { color: #fff; font-size: var(--text-md); font-weight: 700; white-space: nowrap; }
.sidebar-menu { border-right: none !important; background: transparent !important; }
.sidebar-menu .el-menu-item.is-active { background-color: var(--brand-500) !important; color: #fff !important; }
.sidebar-menu .el-menu-item:hover { background-color: rgba(255,255,255,0.06) !important; }

/* ===== Header ===== */
.app-header { background: var(--bg-surface); display: flex; align-items: center; padding: 0 var(--space-4); box-shadow: 0 1px 3px var(--border-subtle); height: 52px !important; transition: background-color .25s; }
.collapse-btn { cursor: pointer; color: var(--text-secondary); transition: color 0.2s; }
.collapse-btn:hover { color: var(--brand-500); }
.header-title { font-size: var(--text-md); font-weight: 600; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.theme-toggle { cursor: pointer; color: var(--text-secondary); transition: color 0.2s, background-color .2s; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); }
.theme-toggle:hover { color: var(--brand-500); background: var(--bg-surface-2); }
.primary-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px var(--border-subtle); transition: background-color .2s; }
.user-info { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.user-name { font-size: var(--text-sm); color: var(--text-secondary); }

/* ===== Main Content ===== */
.app-main { background: var(--bg-base); overflow-y: auto; padding: var(--space-5); transition: background-color .25s; }

/* ===== Page Common ===== */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); }
.page-header h2 { font-size: var(--text-lg); font-weight: 600; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); align-items: center; }

/* ===== Stat Cards ===== */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.stat-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s, background-color .25s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.stat-card .stat-label { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-2); }
.stat-card .stat-value { font-size: var(--text-xl); font-weight: 700; }
.stat-card .stat-icon { font-size: 36px; opacity: 0.8; }

/* ===== Chart Cards ===== */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.chart-row.wide-left { grid-template-columns: 2fr 1fr; }
.chart-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); transition: background-color .25s; }
.chart-card h3 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-4); color: var(--text-primary); }

/* ===== Table ===== */
.el-table { border-radius: var(--radius-md); overflow: hidden; }
.el-dialog { border-radius: var(--radius-lg); overflow: hidden; }

/* ===== 产品编辑弹窗：body 限高内部滚动，避免合并规格后超出视口 ===== */
.spu-edit-dialog .el-dialog__body { max-height: calc(90vh - 180px); overflow-y: auto; }
.el-table th.el-table__cell { background-color: var(--bg-surface-2) !important; font-weight: 600; color: var(--text-secondary); }

/* ===== Pagination ===== */
.pagination-wrap { display: flex; justify-content: flex-end; margin-top: var(--space-4); }

/* ===== Options Page ===== */
.options-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-5); }
.group-panel { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-card); transition: background-color .25s; }
.group-panel h4 { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-3); color: var(--text-primary); }
.group-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s; font-size: var(--text-sm); color: var(--text-secondary); }
.group-item:hover { background: var(--bg-surface-2); }
.group-item.active { background: var(--brand-bg); color: var(--brand-600); font-weight: 600; }
.options-panel { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-card); transition: background-color .25s; }
.options-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.options-header h3 { font-size: var(--text-md); font-weight: 600; }

/* ===== Detail Drawer ===== */
.el-drawer__header { margin-bottom: 0 !important; padding: var(--space-4) var(--space-5) !important; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.el-drawer__body { padding: var(--space-5) !important; }

/* ===== Sidebar Flex Layout ===== */
.sidebar { display: flex !important; flex-direction: column !important; }
.sidebar-collapse-area { margin-top: auto; padding: var(--space-2); border-top: 1px solid var(--sidebar-border); flex-shrink: 0; }
.sidebar-collapse-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; color: var(--sidebar-text) !important; font-size: var(--text-xs); transition: all 0.2s; }
.sidebar-collapse-btn:hover { background: rgba(255,255,255,0.08); color: var(--sidebar-text-hover) !important; }
.sidebar-menu { flex: 1; overflow-y: auto; border-right: none !important; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .chart-row, .chart-row.wide-left { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .options-layout { grid-template-columns: 1fr; }
}

/* ===== Icon Sizing ===== */
.el-icon svg { width: 1em; height: 1em; }
.el-menu-item .el-icon svg { width: 16px; height: 16px; }
.sidebar-menu .el-menu-item { height: 48px; line-height: 48px; }
.collapse-btn { cursor: pointer; font-size: var(--text-lg); }
.collapse-btn svg { width: 20px !important; height: 20px !important; }

/* ===== Force Layout ===== */
.el-container { display: flex !important; flex-direction: row !important; }
.el-aside { flex-shrink: 0 !important; overflow-y: auto !important; }
.el-main { flex: 1 !important; overflow-y: auto !important; min-height: 0 !important; }
.el-header { flex-shrink: 0 !important; }

/* ===== Sidebar Text Fix ===== */
.sidebar-menu .el-menu-item { color: var(--sidebar-text) !important; font-size: 14px !important; }
.sidebar-menu .el-menu-item:hover { color: var(--sidebar-text-hover) !important; background-color: rgba(255,255,255,0.08) !important; }
.sidebar-menu .el-menu-item .el-icon { color: var(--sidebar-text) !important; }

/* ===== Sidebar Collapse ===== */
.sidebar-menu.el-menu--collapse { width: 64px !important; }
.sidebar-menu.el-menu--collapse .el-menu-item { padding: 0 !important; justify-content: center !important; }
.sidebar-menu.el-menu--collapse .el-menu-item .el-icon svg { width: 20px !important; height: 20px !important; }
.sidebar-menu.el-menu--collapse .el-menu-item__title { display: none !important; }

/* ===== Sub-menu Styling ===== */
.sidebar-menu .el-sub-menu__title { height: 48px; line-height: 48px; color: var(--sidebar-text) !important; font-size: 14px !important; }
.sidebar-menu .el-sub-menu__title:hover { color: var(--sidebar-text-hover) !important; background-color: rgba(255,255,255,0.08) !important; }
.sidebar-menu .el-sub-menu__title .el-icon { color: var(--sidebar-text) !important; }
.sidebar-menu .el-sub-menu .el-menu-item { padding-left: 50px !important; height: 42px; line-height: 42px; font-size: 13px !important; }
.sidebar-menu .el-sub-menu .el-menu-item.is-active { color: var(--brand-500) !important; background-color: var(--brand-bg) !important; }
.sidebar-menu.el-menu--collapse .el-sub-menu__title { padding: 0 !important; justify-content: center !important; }
.sidebar-menu.el-menu--collapse .el-sub-menu__title .el-icon svg { width: 20px !important; height: 20px !important; }
.sidebar-menu.el-menu--collapse .el-sub-menu__title span { display: none !important; }

/* Column toolbar */
.column-toolbar { display:flex; justify-content:flex-end; margin-bottom:8px; gap:8px; }
.column-toolbar .el-button-group .el-button { border-radius: 0; }
.column-toolbar .el-button-group .el-button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.column-toolbar .el-button-group .el-button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* Column control dialog */
.column-control-list { max-height: 400px; overflow-y: auto; }
.column-control-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.column-control-left { display: flex; align-items: center; gap: var(--space-2); }
.column-control-label { font-size: var(--text-sm); }
.column-control-right { display: flex; gap: 4px; }

/* ===== 弹窗 / 表格 移动端适配 ===== */
@media (max-width: 768px) {
  /* 弹窗宽度不超屏，超高时内部滚动，避免手机上溢出且按钮点不到 */
  .el-dialog { max-width: 95vw; max-height: 92vh; display: flex; flex-direction: column; }
  .el-dialog__body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .el-dialog__footer { flex-shrink: 0; }
  /* 表格字号略缩，次要列在手机上隐藏（列上加 hide-mobile 类） */
  .el-table { font-size: var(--text-xs); }
  .el-table .hide-mobile { display: none !important; }
}