/* ============================================================
   Material 3 主题（M3 · 青绿色板 · Roboto）
   ------------------------------------------------------------
   20261004SIDEBASE：瘦身为纯色板层。
   组件骨架已上移到 theme-base.css（三套共用，只写 var()）。
   本文件只负责：色板 + M3 独有的形状/字族差异。

   激活方式：<html class="theme-m3"> + 本文件启用
   ============================================================ */
@import url('https://miaoda.feishu.cn/fonts/css2?family=Roboto:wght@400;500;600;700;900&display=swap');

/* ---------- 色板 ---------- */
:root {
  --bg: #F5FBF9;
  --bg-grad: radial-gradient(900px 500px at 85% -12%, #E3F5EC 0%, transparent 55%), #F5FBF9;
  --card: #fbfefd;
  --border: #D6E4DE;
  --border-strong: #BFC9C6;
  --text: #191C1C;
  --text-muted: #4A635E;
  --text-strong: #161a1a;
  --primary: #006A60;
  --primary-dark: #004F48;
  --primary-soft: #B3EFE4;
  --primary-grad: linear-gradient(135deg, #00897B, #006A60);
  --green: #085B2E;
  --green-soft: #EAF6EE;
  --red: #BA1A1A;
  --red-soft: #FFEDEA;
  --amber: #8A5300;
  --amber-soft: #FFF2DC;
  --th-bg: #e7f3ee;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .06);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, .08), 0 8px 16px rgba(0, 0, 0, .10);
  --c-f1: #006A60;
  --c-f2: #0B57D0;
  --c-f3: #8A5300;
  --c-f4: #085B2E;

  /* ---------- 语义色槽（M3 青灰）---------- */
  --gray-50: #F5FBF9;
  --gray-100: #E3EAE8;
  --gray-200: #D6E4DE;
  --gray-400: #A5B2AE;
  --gray-500: #7A928C;
  --gray-600: #4A635E;
  --gray-700: #334B47;
  --gray-800: #1F2E2C;
  --gray-900: #191C1C;
  /* 输入框：M3 白底 */
  --input-fill: #ffffff;
  --input-fill-hover: #F5FBF9;

  /* ---------- 表格 ---------- */
  --tb-td-border: #E3EAE8;
  --tb-row-hover-bg: #F0F7F4;

  /* ---------- 表单控件（M3 白底 + 青绿 hover）---------- */
  --ctl-border: #BFC9C6;
  --ctl-border-hover: #006A60;
  --ctl-radius: 10px;

  /* ---------- 按钮（M3 实心 + 20px 大圆角）---------- */
  --btn-primary-bg: #006A60;
  --btn-primary-bg-hover: #004F48;
  --btn-primary-border: transparent;
  --btn-primary-radius: 20px;
  --btn-ghost-radius: 20px;
  --btn-ghost-bg-hover: rgba(0, 106, 96, .08);

  /* ---------- chip（M3 淡青底）---------- */
  --chip-bar-bg: #E3EAE8;
  --chip-bar-border: #D6E4DE;
  --chip-bar-fg: #4A635E;
  --chip-bar-fg-in: #191C1C;

  /* ---------- 卡片 / 弹窗 ---------- */
  --card-2-bg: var(--card);/* 旧版 theme-m3.css:102 用 var(--card)，勿写死 #ffffff */
  --card-2-border: #D6E4DE;
  --modal-bg: #ffffff;
  --modal-border: #D6E4DE;
  /* 旧 theme-m3.css:189-193 只改背景/边框/圆角/阴影，未清 backdrop-filter，
     故 --modal-blur 保持基线毛玻璃 */
  --modal-radius: 20px;
  --modal-head-bg: #F5FBF9;
  --modal-head-border: #D6E4DE;
  --login-card-radius: 20px;

  /* ---------- 侧栏（M3 表面容器 #EFF6F4 + 青绿胶囊）---------- */
  --side-bg: #EFF6F4;
  --side-fg: #191C1C;
  --side-border: #D6E4DE;
  --side-shadow: none;
  --side-scroll-thumb: #BFC9C6;
  --side-scroll-thumb-hover: #A5B2AE;
  --side-item-fg: #4A635E;
  --side-item-bg-hover: rgba(0, 106, 96, .08);
  --side-item-fg-hover: #006A60;
  --side-item-bg-active: #B3EFE4;
  --side-item-fg-active: #004F48;
  --side-item-shadow-active: none;
  --side-item-radius: 28px;
  /* 侧栏排印（对齐旧版 theme-m3.css:57-65） */
  --side-item-size: 13px;
  --side-item-weight: 400;
  --side-item-ls: .2px;
  --side-item-lh: 1.55;
  --side-item-pad: 10px 16px;
  --side-item-pad-compact: 10px 16px;/* 旧主题以 spec(0,2,0) 压过 index.html:99紧凑态 */
  --side-item-weight-active: 500;

  /* ---------- 顶栏（M3 白卡 + 大圆角）---------- */
  --topbar-bg: #ffffff;
  --topbar-border: #D6E4DE;
  --topbar-border-width: 1px;
  --topbar-border-style: solid;     /* 宽度有值但 style 是 none 就不显示，必须显式给 */
  --topbar-radius: var(--radius);
  --topbar-shadow: var(--shadow);

  /* ---------- 页签（青绿胶囊）---------- */
  --tab-active-bg: #B3EFE4;
  --tab-active-fg: #004F48;
  --ptab-active-bg: #B3EFE4;
  --ptab-active-fg: #004F48;
  --tabs-bg: #ffffff;
  --tabs-border: #D6E4DE;
  --tab-fg: #4A635E;
  --tab-ls: .2px;
  --stat-card-radius: 14px;
  --tab-radius: 999px;
  --alert-card-bg: #ffffff;
  --alert-card-border: 1px;
  --alert-card-border-color: #D6E4DE;
  --alert-card-radius: 14px;

  /* ---------- 徽标（M3 青绿胶囊）---------- */
  --badge-bg: #B3EFE4;
  --badge-fg: #004F48;
  --badge-radius: 999px;
  --badge-pad: 2px 12px;
  --badge-weight: 500;
  /* 原 M3 主题未设徽标字距，--badge-ls 保持基线 normal */

  /* ---------- 卡片与 KPI（M3 原主题用 --radius=16px 圆角）---------- */
  --card-2-radius: var(--radius);
  --kpi-bg: #ffffff;
  --kpi-border: #D6E4DE;
  --kpi-radius: var(--radius);
  /* 强调卡保持基线渐变底 + 白字（--kpi-accent-* 走骨架默认）。
     原主题的 `html.theme-m3 .kpi{background:#fff}` 高特异性会连 .accent 一起压白，
     造成白字白底内容消失 —— 不复制该副作用。 */
  --kpi-label-fg: #4A635E;
  --kpi-sub-fg: #7A928C;

  /* ---------- 按钮 / 弹窗 / 登录卡的柔和投影 ---------- */
  --btn-primary-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 8px rgba(0, 0, 0, .06);
  --modal-shadow: 0 24px 60px rgba(25, 28, 28, .22);
  --login-card-border: 1px;
  --login-card-border-color: #D6E4DE;
  --login-card-radius: 20px;
  --login-card-shadow: var(--shadow-lg);

  /* ---------- 表格排印（M3：表头 500/0.4，单元格字距 .2）---------- */
  --th-weight: 500;
  --th-ls: .4px;
  --td-ls: .2px;

  /* ---------- 图标描边（M3 2px 圆角）---------- */
  --icon-stroke: 2;
}

/* ---------- M3 独有：字族 ---------- */
html.theme-m3 {
  font-family: "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
}
html.theme-m3 body { color: var(--text); }
html.theme-m3 .kpi .k-value,
html.theme-m3 .kpi-num,
html.theme-m3 .big-num,
html.theme-m3 .rpt-kpi-val,
html.theme-m3 .cm-kpi-val,
html.theme-m3 .stat-num,
html.theme-m3 .cm14-kpi .k14-v,
html.theme-m3 .cm14-kpi .k14-val {
  font-family: "Roboto", "Noto Sans SC", "PingFang SC", sans-serif;
  font-weight: 700;
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}

/* ---------- M3 独有：白底 logo 融入青绿侧栏 ---------- */
html.theme-m3 .side-logo {
  mix-blend-mode: multiply;
  background: transparent;
}

/* ---------- M3 独有：KPI 顶部青绿顶条 ---------- */
html.theme-m3 .kpi {
  position: relative;
  overflow: hidden;
}
html.theme-m3 .kpi:not(.accent)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
html.theme-m3 .kpi-grid .kpi:nth-child(6n+1):not(.accent)::before { background: #006A60; }
html.theme-m3 .kpi-grid .kpi:nth-child(6n+2):not(.accent)::before { background: #0B57D0; }
html.theme-m3 .kpi-grid .kpi:nth-child(6n+3):not(.accent)::before { background: #8A5300; }
html.theme-m3 .kpi-grid .kpi:nth-child(6n+4):not(.accent)::before { background: #085B2E; }
html.theme-m3 .kpi-grid .kpi:nth-child(6n+5):not(.accent)::before { background: #006A60; }
html.theme-m3 .kpi-grid .kpi:nth-child(6n+6):not(.accent)::before { background: #0B57D0; }

/* ---------- M3 独有：圆角形状变量 ---------- */
html.theme-m3 .btn-primary { border-radius: var(--btn-primary-radius); }
html.theme-m3 .btn-ghost { border-radius: var(--btn-ghost-radius); }
html.theme-m3 .btn-ghost:hover { background: var(--btn-ghost-bg-hover); }
html.theme-m3 .btn-primary:active { background: #003B36; }
html.theme-m3 .side-item { border-radius: var(--side-item-radius); }
html.theme-m3 .process-tab { border-radius: var(--tab-radius); }
html.theme-m3 .theme-switch,
html.theme-m3 .theme-switch .ts-item { border-radius: 999px; }
html.theme-m3 .modal { border: 1px solid var(--modal-border); }

/* ---------- M3 独有：基础资料图标卡 / 统计卡 / 工具钮 ---------- */
html.theme-m3 .admin-icon-card {
  background: #ffffff;
  border: 1px solid #D6E4DE;
  border-radius: 14px;
}
html.theme-m3 .admin-icon-card.active {
  background: #EAF6EE;
  border-color: #9CC9A8;
  box-shadow: 0 4px 16px rgba(8, 91, 46, .12);
}
html.theme-m3 .admin-icon-card.active .label { color: #085B2E; }
html.theme-m3 .stat-card,
html.theme-m3 .alert-card,
html.theme-m3 .kpi-group-item {
  background: #ffffff;
  border: 1px solid #D6E4DE;
  border-radius: 14px;
}
html.theme-m3 .cm-toolbtn {
  background: #ffffff;
  border: 1px solid #BFC9C6;
  color: #3C4043;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .25px;
}
html.theme-m3 .cm-toolbtn:hover {
  background: #EAF6EE;
  border-color: #9CC9A8;
  color: #085B2E;
}
html.theme-m3 .kpi-group.production .kpi-group-icon { background: #C3E6CE; }
html.theme-m3 .kpi-group.efficiency .kpi-group-icon { background: #B3EFE4; }
html.theme-m3 .kpi-group.quality .kpi-group-icon { background: #FFF2DC; }
html.theme-m3 .cm14-kpi {
  background: #ffffff;
  border: 1px solid #D6E4DE;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
html.theme-m3 .cm14-kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--ac, #006A60);
  border-radius: var(--radius) var(--radius) 0 0;
}