/* ============================================================
   theme-base.css —— 主题共用组件骨架（无条件启用）
   ------------------------------------------------------------
   20261004SIDEBASE 新增。解决两个结构性问题：

   1) style.css 定义 62 个变量，但三套主题只覆盖 31 个 ——
      --gray-50~900（9个）与 --input-fill / --input-fill-hover
      四套主题全部漏掉，「换了主题但输入框/表格边框还是冷灰」。

   2) style.css 中 chip / 次按钮 / 卡片圆角 等组件写死了十六进制，
      主题文件改不到（实测四套全部漏色）。

   职责划分（三层架构）：
     基础变量层  style.css :root（几何/字号/间距/灰阶/输入框）
     组件骨架层  theme-base.css（本文件，只写 var()，不含具体色值）
     色板层      theme-claude.css / theme-google.css / theme-m3.css
                 （各约 50 行，只写 :root 变量 + 形状/字族差异）

   加载顺序（index.html）：
     style.css → theme-base.css → theme-{claude,google,m3}.css

   ★ 铁律：本文件所有 var() 的默认值 = style.css 现有计算值，
     保证默认主题视觉零变化。任何默认值改动都必须先核对 style.css。

   写法约定：
   - 颜色一律 var(--xxx)，不写十六进制字面量（#fff 白字除外）
   - 只覆盖 style.css 已存在的属性，绝不新增属性/新增选择器覆盖面
     （例：不给 .btn 凭空加背景 —— style.css 的 .btn 本就无背景）
   - 主题想改外观 → 只改色板层变量，不改本文件
   ============================================================ */

/* ============================================================
   第 1 段：语义色槽（style.css 未定义为变量、四套主题原先也漏的）
   默认值全部对齐 style.css 现状；主题只需覆盖想改的项
   ============================================================ */
:root {
  /* --- 表格（对齐 style.css:378-388）--- */
  --tb-th-bg: var(--th-bg);                 /* thead th 底 */
  --tb-th-fg: var(--text-muted);            /* thead th 字 */
  --tb-th-border: var(--border);
  --tb-td-border: var(--gray-100);          /* tbody td 分隔线（P0：Claude 漏） */
  --tb-stripe-bg: var(--gray-50);           /* 偶数行 */
  --tb-row-hover-bg: var(--primary-soft);   /* 行 hover */

  /* --- 表单控件（对齐 style.css:233-241）--- */
  --ctl-bg: var(--input-fill);
  --ctl-bg-hover: var(--input-fill-hover);
  --ctl-fg: var(--text);
  --ctl-border: transparent;                /* 基线就是 transparent */
  --ctl-border-hover: var(--ctl-border);
  --ctl-border-focus: var(--primary);
  --ctl-ring: 0 0 0 3px var(--primary-soft);
  --ctl-radius: var(--radius-sm);

  /* --- 按钮（对齐 style.css:268-273；注意 .btn 本身无背景）--- */
  --btn-primary-bg: var(--primary-grad);
  --btn-primary-fg: #ffffff;
  --btn-primary-border: transparent;
  --btn-ghost-bg: transparent;
  --btn-ghost-fg: var(--text-muted);
  --btn-ghost-border: var(--border-strong);
  --btn-ghost-bg-hover: var(--bg);
  --btn-ghost-fg-hover: var(--text);
  --btn-outline-bg: var(--card);
  --btn-outline-fg: var(--primary);
  --btn-outline-border: var(--primary);
  --btn-outline-bg-hover: var(--primary-soft);
  /* 资产/设备页筛选栏的「白底灰边」次按钮（原先 #fff/#d4dbe8 写死，四套全漏） */
  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #5b6579;
  --btn-secondary-border: #d4dbe8;
  --btn-secondary-bg-hover: #f0f5ff;
  --btn-secondary-fg-hover: #2563eb;

  /* --- 筛选 chip --- */
  --chip-top-bg: var(--card);               /* .filter-chip 顶栏式（style.css:160） */
  --chip-top-border: var(--border);
  --chip-top-radius: 10px;
  --chip-bar-bg: var(--gray-100);           /* flat-toolbar chip（style.css:352，P0 四套全漏） */
  --chip-bar-border: var(--gray-100);
  --chip-bar-fg: #374151;
  --chip-bar-fg-in: #1f2937;
  --chip-bg-hover: var(--primary-soft);
  --chip-border-hover: var(--primary);
  --chip-divider: var(--gray-200);

  /* --- 页签组（基线：.rest-tabs 有两条定义，3286 的胶囊版生效 ——
         background: var(--gray-100) / radius-md；3188 的 border-bottom 版被覆盖。
         .rest-tabs .tab-item.active 基线未定义样式 -> 骨架默认透明，
         由 Google/M3 色板显式给激活底色）--- */
  --tabs-bg: var(--gray-100);
  /* 基线 .rest-tabs(style.css:3188) 是 border-bottom:2px solid var(--gray-200)。
     用 --gray-200 而非 --border：原 Claude 主题把 gray-200 暖化后，
     页签底边框才跟着暖（实测 OLD 冷灰 #e2e8f0 → NEW 暖灰 #e7e4db，属修复）。*/
  --tabs-border: var(--gray-200);
  --tab-fg: var(--text-muted);
  --tab-active-bg: transparent;
  --tab-active-fg: var(--text);
  --tab-ls: normal;
  --ptab-active-bg: var(--primary-grad);   /* .process-tab.active 基线是蓝色渐变 */
  --ptab-active-fg: #ffffff;

  /* --- 弹窗（基线 style.css:534 是毛玻璃 rgba(255,255,255,.72) + blur，
         Google/M3 原主题把它改成了纯白卡 —— 这里保留基线观感）--- */
  --modal-bg: rgba(255, 255, 255, .72);
  --modal-fg: var(--text);
  --modal-border: rgba(255, 255, 255, .65);
  --modal-radius: var(--radius-lg);
  --modal-head-bg: transparent;
  --modal-head-border: transparent;
  --modal-blur: blur(26px) saturate(170%);

  /* --- 卡片（对齐 style.css:449-452，圆角是 --radius-md 不是 --radius）
         注意：基线 .stat-card / .alert-card / .kpi-group-item 各自另有定义，
         这里只对基线确有背景/边框的 .card 系生效，避免凭空给卡片加白底 --- */
  --card-2-bg: var(--card);                 /* .card/.d-card/.admin-card/.base-info-card */
  --card-2-border: var(--border);
  /* 基线 .card 是 --radius-md(12px)，但 Claude/M3 原主题用 --radius(16px) —— 主题覆盖 */
  --card-2-radius: var(--radius-md);
  --card-2-shadow: var(--shadow);
  --card-2-fg: var(--text);

  /* --- 侧栏（对齐 style.css:62-70 / 112-125）--- */
  --side-bg: var(--card);
  --side-fg: #1f2937;
  --side-border: var(--gray-100);
  --side-shadow: 2px 0 14px rgba(16, 24, 40, .05);
  --side-scroll-thumb: var(--gray-400);
  --side-scroll-thumb-hover: #c2c9d4;
  --side-item-shadow-active: inset 3px 0 0 var(--primary);
  --side-item-radius: var(--radius-sm);
  /* 排印与内距：默认值 = index.html:77-101 内联块（默认主题基线，视觉零变化）
     内联块与本骨架同为 0,1,0 特异度但位于文档流更后，故内联块里也引用同一批变量，
     三主题只需覆盖下面的槽位即可生效。*/
  --side-item-size: 13px;
  --side-item-weight: 500;
  --side-item-ls: .2px;
  --side-item-lh: normal;
  --side-item-pad: 8px 12px;/* index.html:83 */
  --side-item-pad-compact: 7px 10px;  /* index.html:99 桌面紧凑态 */
  --side-item-weight-active: 600;/* index.html:90 */
  --side-item-fg: #55607a;              /* index.html:81 */
  --side-item-bg-hover: #f5f8fd;         /* index.html:85 */
  --side-item-fg-hover: #1d4ed8;         /* index.html:85 */
  --side-item-bg-active: linear-gradient(90deg, #eef4ff, rgba(238, 244, 255, 0));
  --side-item-fg-active: var(--primary);  /* index.html:89 */
  --tab-radius: var(--radius-sm);
  --btn-primary-radius: var(--radius-sm);
  --btn-ghost-radius: var(--radius-sm);

  /* --- 顶栏（对齐 style.css:147-153，基线是半透明白）--- */
  --topbar-bg: rgba(255, 255, 255, .86);
  --topbar-border: var(--border);
  /* 基线 style.css:154 只有 border-bottom；Google/M3 是四边全边框。
     必须配 --topbar-border-style，否则 width 有值但 style 是 none → 不显示。*/
  --topbar-border-width: 0 0 1px 0;
  --topbar-border-style: solid;
  --topbar-fg: var(--text);
  --topbar-radius: 0;
  --topbar-shadow: none;
  --topbar-blur: saturate(180%) blur(12px);   /* style.css:153 */

  /* --- 徽标 / 状态标签（对齐 style.css:427-429，padding 是 space-1/space-3）--- */
  --badge-bg: var(--primary-soft);
  --badge-fg: var(--primary);
  --badge-radius: var(--radius-full);
  --badge-pad: var(--space-1) var(--space-3);
  --badge-weight: 700;          /* 基线 .badge 无 font-weight，回落浏览器默认即 700 */
  --badge-ls: normal;

  /* --- KPI 卡（对齐 style.css:469-473）--- */
  --kpi-bg: var(--card);
  --kpi-border: var(--border);
  --kpi-radius: var(--radius-md);
  --kpi-shadow: var(--shadow);
  --kpi-label-fg: var(--text-muted);
  --kpi-sub-fg: var(--text);
  /* 强调卡（style.css:477 .kpi.accent：主色渐变底 + 白字）*/
  --kpi-accent-bg: var(--primary-grad);
  --kpi-accent-fg: #ffffff;
  --kpi-accent-sub-fg: rgba(255, 255, 255, .85);   /* style.css:479 */
  --kpi-accent-border: 0;                       /* 基线 border:none → width 0 */
  --kpi-accent-radius: var(--radius-md);
  --kpi-accent-shadow: 0 8px 22px rgba(37, 99, 235, .32);

  /* --- 卡片内的次级卡（基线各自有定义，此处只暴露主题可覆盖槽）--- */
  /* .alert-card 在真实 DOM 里同时带 .card 类，旧主题用 html.theme-X(0,2,0) 才能压过 .card。
     骨架规则与 .card 同为 0,1,0 但加载更后，会把 .card 的背景/圆角重置掉，
     故默认值必须「等于 .card 的值」（style.css:200）而非「无背景无圆角」：
       Claude 的 .card = var(--card) + var(--radius) → 自动跟随 --card-2-*
       Google/M3 覆盖为白卡 1px 边框（对齐旧 theme-google.css:209 / theme-m3.css:229）*/
  --alert-card-bg: var(--card-2-bg);
  --alert-card-border: 1px;
  --alert-card-border-color: var(--card-2-border, var(--border));
  --alert-card-radius: var(--card-2-radius, var(--radius-md));
  --stat-card-radius: var(--radius-md);

  /* --- 主按钮阴影（基线 style.css:268 是蓝色投影，Google/M3 改中性灰）--- */
  --btn-primary-shadow: 0 3px 10px rgba(37, 99, 235, .28);
  --btn-primary-weight: 400;

  /* --- 弹窗阴影（基线 style.css:539）--- */
  --modal-shadow: 0 24px 60px rgba(15, 23, 42, .22), inset 0 1px 0 rgba(255, 255, 255, .75);

  /* --- 登录卡（对齐 style.css:1036-1038：基线无 border，阴影是 rgba(2,6,23,.35)）--- */
  --login-card-bg: var(--card);
  --login-card-border: 0;                       /* 基线 .login-card 无边框 */
  --login-card-radius: var(--radius-lg);
  --login-card-shadow: 0 24px 70px rgba(2, 6, 23, .35);

  /* --- 表格排印（Google/M3 用 500 字重 + 字距，基线是 700）--- */
  --th-weight: 700;
  --th-ls: normal;
  --td-ls: normal;
  --num-ls: -.5px;

  /* --- 图标描边（收敛 9 种混用为 1 个变量；411 处 Lucide 基线是 2px）--- */
  --icon-stroke: 2;
  --icon-stroke-linecap: round;
  --icon-stroke-linejoin: round;
}

/* ============================================================
   第 2 段：表格 —— 只重写 style.css 已有的属性，选择器与基线同构
   ============================================================ */
thead th {
  background: var(--tb-th-bg);
  color: var(--tb-th-fg);
  border-bottom: 1px solid var(--tb-th-border);
  font-weight: var(--th-weight);
  letter-spacing: var(--th-ls);
}
tbody td { border-bottom: 1px solid var(--tb-td-border); letter-spacing: var(--td-ls); }
tbody tr:nth-child(even) { background: var(--tb-stripe-bg); }
tbody tr:hover { background: var(--tb-row-hover-bg); }

/* ============================================================
   第 3 段：表单控件 —— 原先只有 Google/M3 覆盖，Claude 全漏
   ============================================================ */
.field input,
.field select,
.field textarea {
  background: var(--ctl-bg);
  color: var(--ctl-fg);
  border: 1px solid var(--ctl-border);
  border-radius: var(--ctl-radius);
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  background: var(--ctl-bg-hover);
  border-color: var(--ctl-border-hover);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ctl-border-focus);
  box-shadow: var(--ctl-ring);
}

/* ============================================================
   第 4 段：按钮 —— 不给 .btn 凭空加属性，只重写已存在的四个变体
   ============================================================ */
/* --btn-primary-border 是「颜色」槽（基线 style.css:263 .btn{border:none}），
   不是宽度槽。基线按钮无边框，故只设 color 不设 width/style ——
   若误当宽度用会渲染出 3px 白边（实测踩过）。*/
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-border);
  border-radius: var(--btn-primary-radius);
  box-shadow: var(--btn-primary-shadow);
}
.btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border: 1px solid var(--btn-ghost-border);
  border-radius: var(--btn-ghost-radius);
}
.btn-ghost:hover {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-fg-hover);
}
.btn-outline {
  background: var(--btn-outline-bg);
  color: var(--btn-outline-fg);
  border: 1px solid var(--btn-outline-border);
}
.btn-outline:hover { background: var(--btn-outline-bg-hover); }

/* 资产页筛选栏次按钮（style.css:4083/4088 写死 #fff / #d4dbe8 / #5b6579）
   20261006DEVREMOVE：原选择器组里的 #tab-device 两项随设备管理菜单下线一并移除。 */
#tab-asset .filter-bar > .btn:not(.btn-primary):not(.btn-danger),
#tab-asset .filter-bar .seg .btn.btn-outline {
  background: var(--btn-secondary-bg);
  border: 1px solid var(--btn-secondary-border);
  color: var(--btn-secondary-fg);
}
#tab-asset .filter-bar > .btn:not(.btn-primary):not(.btn-danger):hover,
#tab-asset .filter-bar .seg .btn.btn-outline:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-fg-hover);
  color: var(--btn-secondary-fg-hover);
}

/* ============================================================
   第 5 段：筛选 chip —— P0 漏色点（换完三套仍是 #f1f5f9 冷灰）
   ============================================================ */
.filter-chip {
  background: var(--chip-top-bg);
  border-color: var(--chip-top-border);
  border-radius: var(--chip-top-radius);
}
.filter-bar.flat-toolbar .chip {
  background: var(--chip-bar-bg);
  border: 1px solid var(--chip-bar-border);
  color: var(--chip-bar-fg);
}
.filter-bar.flat-toolbar .chip i { color: var(--chip-bar-fg); }
.filter-bar.flat-toolbar .chip select,
.filter-bar.flat-toolbar .chip input { color: var(--chip-bar-fg-in); }
.filter-bar.flat-toolbar .chip:hover {
  background: var(--chip-bg-hover);
  border-color: var(--chip-border-hover);
}
.filter-bar.flat-toolbar .chip.qk:hover {
  background: var(--chip-bg-hover);
  border-color: var(--chip-border-hover);
  color: var(--chip-border-hover);
}
.filter-bar.flat-toolbar .chip.qk.on {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.filter-bar.flat-toolbar .tb-div { background: var(--chip-divider); }

/* ============================================================
   第 6 段：卡片 / 弹窗 / 登录卡
   ============================================================ */
.card,
.d-card,
.admin-card,
.base-info-card {
  background: var(--card-2-bg);
  border: 1px solid var(--card-2-border);
  border-radius: var(--card-2-radius);
  box-shadow: var(--card-2-shadow);
  color: var(--card-2-fg);
}
/* 统计卡 / 预警卡 / KPI 分组卡：基线无背景，这里只给圆角变量槽，
   背景与边框留给各自的色板（避免凭空给基线加白底造成回归） */
.stat-card,
.kpi-group-item { border-radius: var(--stat-card-radius, var(--radius-md)); }
/* Google/M3 的 .alert-card 是白卡带边框 + 14px 圆角（head-theme-*.css:209/229），
   基线既无背景也无圆角 —— 宽度 0 + 圆角 0 表示「不显示、不改变形状」。
   Claude 原主题未覆盖 .alert-card，色板不设 --alert-card-* 即可回落到透明无框。*/
.alert-card {
  background: var(--alert-card-bg);
  border-width: var(--alert-card-border);
  border-style: solid;
  border-color: var(--alert-card-border-color, currentColor);
  border-radius: var(--alert-card-radius, 0);
}

.modal {
  background: var(--modal-bg);
  color: var(--modal-fg);
  border: 1px solid var(--modal-border);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  backdrop-filter: var(--modal-blur);
  -webkit-backdrop-filter: var(--modal-blur);
}
.modal .modal-head,
.modal .modal-foot {
  background: var(--modal-head-bg);
  border-color: var(--modal-head-border);
}

.login-card {
  background: var(--login-card-bg);
  border-width: var(--login-card-border);
  border-style: solid;
  border-color: var(--login-card-border-color, currentColor);
  border-radius: var(--login-card-radius);
  box-shadow: var(--login-card-shadow);
}

/* ============================================================
   第 7 段：侧栏 / 顶栏
   ============================================================ */
.sidebar {
  background: var(--side-bg);
  color: var(--side-fg);
  border-right: 1px solid var(--side-border);
  box-shadow: var(--side-shadow);
}
.sidebar-nav { scrollbar-color: var(--side-scroll-thumb) transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--side-scroll-thumb); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--side-scroll-thumb-hover); }

.side-item {
  color: var(--side-item-fg);
  border-radius: var(--side-item-radius);
  font-size: var(--side-item-size);
  font-weight: var(--side-item-weight);
  letter-spacing: var(--side-item-ls);
  line-height: var(--side-item-lh);
  padding: var(--side-item-pad);
}
.side-item:hover {
  background: var(--side-item-bg-hover);
  color: var(--side-item-fg-hover);
}
.side-item.active {
  background: var(--side-item-bg-active);
  color: var(--side-item-fg-active);
  box-shadow: var(--side-item-shadow-active);
  font-weight: var(--side-item-weight-active);
}

.topbar {
  background: var(--topbar-bg);
  border-color: var(--topbar-border);
  color: var(--topbar-fg);
  border-radius: var(--topbar-radius);
  box-shadow: var(--topbar-shadow);
  backdrop-filter: var(--topbar-blur);
  -webkit-backdrop-filter: var(--topbar-blur);
}
/* Google/M3 的顶栏是四边全边框（基线只有 border-bottom）。
   写成 border-width/border-style 而非 border 简写：简写会把
   style.css:154 的 border-bottom-color 一并重置（实测掉成 currentColor）。*/
.topbar {
  border-width: var(--topbar-border-width);
  border-style: var(--topbar-border-style);
}

/* ============================================================
   第 8 段：页签组
   基线：.rest-tabs 只有 border-bottom 无背景；.process-tabs/.process-tab 基线在 style.css
   ============================================================ */
/* 注意：style.css 有两条 .rest-tabs —— 3188（border-bottom 无背景）与
   3286（胶囊式，background: var(--gray-100)）。后者生效，故 --tabs-bg
   基线值是 --gray-100 而非 transparent。 */
.rest-tabs,
.rpt-entity-tabs,
.alert-tabs {
  background: var(--tabs-bg);
  border-color: var(--tabs-border);
}
.process-tabs {
  background: var(--tabs-bg);
  border-color: var(--tabs-border);
}
.rest-tabs .tab-item,
.rpt-entity-tabs .tab-item,
.alert-tabs .tab-item,
.process-tab { color: var(--tab-fg); letter-spacing: var(--tab-ls, normal); }
.rest-tabs .tab-item.active,
.rpt-entity-tabs .tab-item.active,
.alert-tabs .tab-item.active {
  background: var(--tab-active-bg);
  color: var(--tab-active-fg);
}
.process-tab.active {
  background: var(--ptab-active-bg);
  color: var(--ptab-active-fg);
}

/* ============================================================
   第 9 段：KPI 卡
   ============================================================ */
.kpi {
  background: var(--kpi-bg);
  border: 1px solid var(--kpi-border);
  border-radius: var(--kpi-radius);
  box-shadow: var(--kpi-shadow);
}
/* 强调卡：基线 style.css:477 是主色渐变 + border:none + 蓝色投影 + 白字。
   ★ 原 Google/M3 主题用 `html.theme-x .kpi{background:#fff}` 的高特异性把 .accent
     也压成白卡，却没把 color 从 #fff 改回深色 —— 白字白底，内容「消失」（原主题 bug）。
     这里显式建槽并让三套主题都保持渐变底，从根上修掉该 bug。 */
.kpi.accent {
  background: var(--kpi-accent-bg);
  color: var(--kpi-accent-fg);
  border-width: var(--kpi-accent-border);
  border-style: var(--kpi-accent-border-style, solid);
  border-color: var(--kpi-accent-border-color, currentColor);
  border-radius: var(--kpi-accent-radius);
  box-shadow: var(--kpi-accent-shadow);
}
.kpi.accent .k-label,
.kpi.accent .k-sub { color: var(--kpi-accent-sub-fg); }
.kpi .k-label { color: var(--kpi-label-fg); }
.kpi .k-sub { color: var(--kpi-sub-fg); }
.kpi .k-value { letter-spacing: var(--num-ls); }

/* ============================================================
   第 10 段：徽标 / 状态标签
   ============================================================ */
.badge,
.pct,
.tag-chip {
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: var(--badge-radius);
  padding: var(--badge-pad);
  font-weight: var(--badge-weight);
  letter-spacing: var(--badge-ls);
}

/* ============================================================
   第 11 段：图标描边统一（9 种混用 → 1 个变量）
   Claude 2.2 / Google 2 / M3 2，由色板层按需覆盖
   ============================================================ */
.side-item .side-icon svg,
.topbar svg,
.topbar-right svg,
.btn svg,
.seg-icon-btn svg,
.cm-toolbtn svg,
.field svg,
.filter-bar svg,
.ico {
  stroke-width: var(--icon-stroke);
  stroke-linecap: var(--icon-stroke-linecap);
  stroke-linejoin: var(--icon-stroke-linejoin);
}