/* =====================================================================
 * theme-cockpit.css —— 「途途智慧园区驾驶舱」深蓝科技风 主题覆盖层
 * 用法：在 css/common.css 之后引入本文件（index.html / 独立页 <link>）。
 * 原则：仅调整色调与风格，不改动任何页面内容与结构。
 * 调色来源：驾驶舱 :root（#04101f 深蓝底 / #2b7cff 主蓝 / #22d3ee 青 / 蓝色渐变面板）
 * ===================================================================== */

/* ---------- 1. 主题变量覆盖 ---------- */
:root {
  /* 主色：驾驶舱亮蓝 */
  --color-primary: #2b7cff;
  --color-primary-light: rgba(43, 124, 255, 0.12);
  --color-primary-dark: #1a5bd6;
  --color-primary-hover: #5ea1ff;

  /* 辅助色 */
  --color-cyan: #22d3ee;
  --color-cyan-light: rgba(34, 211, 238, 0.12);
  --color-purple: #a06bff;
  --color-purple-light: rgba(160, 107, 255, 0.12);
  --color-lime: #3ddc97;
  --color-lime-light: rgba(61, 220, 151, 0.12);

  /* 功能色 */
  --color-success: #3ddc97;  --color-success-light: rgba(61, 220, 151, 0.12);
  --color-warning: #ffb020;  --color-warning-light: rgba(255, 176, 32, 0.12);
  --color-danger:  #ff5c5c;  --color-danger-light:  rgba(255, 92, 92, 0.12);
  --color-info:    #a06bff;  --color-info-light:    rgba(160, 107, 255, 0.12);

  /* 文字层级 */
  --color-text-primary: #e9f2ff;
  --color-text-regular: #9db2d4;
  --color-text-secondary: #7c93b8;
  --color-text-placeholder: #5c719a;

  /* 背景系统：深蓝 */
  --color-border: rgba(70, 150, 255, 0.20);
  --color-border-light: rgba(70, 150, 255, 0.11);
  --color-bg-page: #04101f;
  --color-bg-card: rgba(15, 33, 62, 0.72);
  --color-bg-card-solid: #0b1b36;
  --color-bg-hover: rgba(43, 124, 255, 0.07);
  --color-bg-sidebar: #050e1c;
  --color-bg-sidebar-hover: rgba(43, 124, 255, 0.10);
  --color-bg-sidebar-active: rgba(43, 124, 255, 0.16);
  --color-bg-input: rgba(9, 22, 44, 0.85);

  --shadow-sm: 0 1px 2px rgba(0, 10, 30, 0.35);
  --shadow-base: 0 2px 6px rgba(0, 10, 30, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 10, 30, 0.45);
  --shadow-lg: 0 14px 40px rgba(0, 10, 30, 0.55);
}

/* ---------- 2. 全局背景：深蓝渐变 + 细网格 ---------- */
body {
  background:
    radial-gradient(1200px 620px at 50% -12%, rgba(27, 86, 178, 0.34), transparent 62%),
    radial-gradient(900px 520px at 3% 104%, rgba(12, 120, 150, 0.16), transparent 60%),
    radial-gradient(900px 520px at 97% 104%, rgba(70, 40, 150, 0.14), transparent 60%),
    linear-gradient(180deg, #061225 0%, #04101f 100%) !important;
  background-attachment: fixed !important;
}
/* 网格纹理（固定层，不挡交互） */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(70, 150, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 150, 255, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 92%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 92%);
}
/* 内容层置于网格之上 */
.layout, .main-wrap, .main-content, .page-container, .top-nav, .sidebar { position: relative; z-index: 1; }
.main-content { background: transparent !important; }

/* ---------- 3. 面板统一皮肤（蓝色渐变 + 内发光 + 边框） ---------- */
.card, .chart-card, .kpi-card, .device-status-card, .realtime-card,
.contract-card, .mode-card, .modal, .alert-table-wrap {
  background: linear-gradient(180deg, rgba(20, 45, 86, 0.66), rgba(8, 19, 38, 0.90)) !important;
  border: 1px solid rgba(70, 150, 255, 0.20) !important;
  box-shadow: inset 0 1px 0 rgba(140, 200, 255, 0.10),
              inset 0 0 34px rgba(28, 86, 180, 0.11),
              0 3px 14px rgba(0, 0, 0, 0.35) !important;
}
.chart-card, .card { position: relative; border-radius: 8px; }
/* 面板四角装饰（青色角标，驾驶舱标志性元素） */
.chart-card::before, .chart-card::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 3;
}
.chart-card::before { left: -1px; top: -1px; border-left: 2px solid var(--color-cyan); border-top: 2px solid var(--color-cyan); border-radius: 3px 0 0 0; opacity: .85; }
.chart-card::after  { right: -1px; bottom: -1px; border-right: 2px solid var(--color-cyan); border-bottom: 2px solid var(--color-cyan); border-radius: 0 0 3px 0; opacity: .4; }

/* hover 态改为亮蓝 */
.card:hover, .chart-card:hover, .kpi-card:hover { border-color: rgba(43, 124, 255, 0.45) !important; }

/* ---------- 4. 面板标题：青色渐变竖条 ---------- */
.card-title, .chart-card-title {
  display: inline-flex; align-items: center; gap: 8px;
}
.card-title::before, .chart-card-title::before {
  content: ""; width: 3px; height: 14px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(180deg, #5ee7ff, #2b7cff);
  box-shadow: 0 0 9px var(--color-cyan);
}
.chart-card-title { color: #eaf3ff; letter-spacing: .4px; }

/* ---------- 5. 顶部导航 / 侧边栏（驾驶舱 Header 感） ---------- */
.top-nav {
  background: linear-gradient(180deg, rgba(11, 27, 54, 0.92), rgba(6, 16, 33, 0.96)) !important;
  border-bottom: 1px solid rgba(70, 150, 255, 0.20) !important;
  box-shadow: 0 2px 18px rgba(0, 20, 60, 0.45) !important;
}
.top-nav-item.active {
  background: linear-gradient(180deg, rgba(43, 124, 255, 0.22), transparent) !important;
  border-bottom-color: var(--color-primary) !important;
}
.top-nav-logo .logo-icon {
  background: linear-gradient(135deg, #2b7cff, #16b7d8) !important;
  box-shadow: 0 0 16px rgba(43, 124, 255, 0.55), inset 0 0 10px rgba(255, 255, 255, 0.22) !important;
}
.sidebar {
  background: linear-gradient(180deg, #071326 0%, #050e1c 100%) !important;
  border-right: 1px solid rgba(70, 150, 255, 0.18) !important;
}
.sub-menu-item.active {
  background: linear-gradient(90deg, rgba(43, 124, 255, 0.18), rgba(43, 124, 255, 0.04)) !important;
  color: #cfe4ff !important; border-left-color: var(--color-cyan) !important;
}
.menu-group-item.expanded { color: #cfe4ff; }

/* ---------- 6. 按钮 / 标签 / 选项卡 ---------- */
.btn-primary {
  background: linear-gradient(180deg, #2f83ff, #1a5bd6) !important;
  box-shadow: 0 0 12px rgba(43, 124, 255, 0.35);
}
.btn-primary:hover { box-shadow: 0 0 18px rgba(43, 124, 255, 0.55); }
.btn-outline { color: #9fc6ff; }

.tab-pill.active, .seg span.on, .chart-tab-pill.active {
  background: linear-gradient(180deg, #2f83ff, #1a5bd6) !important;
  box-shadow: 0 0 12px rgba(43, 124, 255, 0.55) !important;
  color: #fff !important;
}
.page-btn.active { background: linear-gradient(180deg, #2f83ff, #1a5bd6) !important; color: #fff !important; }

/* ---------- 7. 表格 ---------- */
.data-table thead th {
  background: linear-gradient(180deg, rgba(30, 66, 120, 0.55), rgba(14, 32, 60, 0.55)) !important;
  color: #a9c6ee !important;
  border-bottom: 1px solid rgba(70, 150, 255, 0.22) !important;
}
.data-table tbody td { border-bottom: 1px solid rgba(70, 150, 255, 0.09); }
.data-table tbody tr:hover { background: rgba(43, 124, 255, 0.09) !important; }
.table-wrap { border: 1px solid rgba(70, 150, 255, 0.16) !important; }

/* ---------- 8. KPI 卡图标：发光圆 ---------- */
.kpi-icon, .realtime-dot, .shortcut-icon {
  border: 1px solid rgba(96, 178, 255, 0.42);
  box-shadow: inset 0 0 14px rgba(43, 124, 255, 0.45), 0 0 12px rgba(43, 124, 255, 0.22);
}
.kpi-value { color: #ffffff; text-shadow: 0 0 18px rgba(64, 160, 255, 0.30); }

/* ---------- 9. 表单控件 ---------- */
.form-control, .filter-select, .filter-input, .form-input {
  background: rgba(9, 22, 44, 0.85) !important;
  border: 1px solid rgba(70, 150, 255, 0.22) !important;
  color: #dbe8ff !important;
}
.form-control:focus, .filter-select:focus, .filter-input:focus, .form-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 2px rgba(43, 124, 255, 0.18);
}

/* 9.1 兜底：未套用任何类的原生输入控件（裸 select / date / month / number / text …）
 * 浏览器默认呈白底，深色主题下是一块刺眼白 —— 这里统一到深色。
 * 刻意使用「元素选择器」（权重 0,0,1）且不加 !important：
 * 任何类级样式（.filter-select / 页面自定义 .xxx-input）都能正常覆盖它。
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select,
textarea {
  background-color: rgba(9, 22, 44, 0.85);
  border: 1px solid rgba(70, 150, 255, 0.22);
  border-radius: 6px;
  color: #dbe8ff;
  font-family: inherit;
  outline: none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(43, 124, 255, 0.18);
}
select option { background: #0b1b33; color: #dbe8ff; }
input::placeholder, textarea::placeholder { color: var(--color-text-placeholder); }
/* 原生日历/时间图标在深色底上几乎不可见 → 反色 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}
/* 例外：A4 纸面预览需保持纸白质感（与第 12 节例外声明一致） */
.rep-page input:not([type="checkbox"]):not([type="radio"]),
.rep-page select,
.rep-page textarea {
  background-color: #fff;
  color: #1f2937;
  border-color: #cbd5e1;
}

/* 9.2 兜底：按钮 / 标签类文本不换行
 * 窄表格列或窄卡片里，按钮常被挤到「一列一个字」的竖排（如 28px 宽的「查看」被拆成两行）。
 * 按钮文案一律保持单行，超宽由容器自适应，而不是把字拆开。
 */
button,
.btn, .btn-set, .btn-start, .btn-stop, .btn-primary, .btn-secondary, .btn-danger, .btn-default,
.tag, .status-tag, .table-link, .main-tab, .tab-pill, .tab-item {
  white-space: nowrap;
}

/* ---------- 10. 空状态 / 滚动条 ---------- */
.empty-state { color: var(--color-text-placeholder); }
::-webkit-scrollbar-thumb { background: rgba(70, 150, 255, 0.25); }
::-webkit-scrollbar-thumb:hover { background: rgba(70, 150, 255, 0.45); }

/* ---------- 11. 遗留细节对齐（原白底/旧色族残留） ---------- */
/* 只读、禁用输入框：原本是白底 #f7fafc，深色下会变成刺眼白块 */
.form-control[readonly], .form-control[disabled], .form-control:disabled,
input[readonly], input[disabled], textarea[readonly], textarea[disabled],
select[disabled] {
  background: rgba(9, 22, 44, 0.55) !important;
  color: var(--color-text-secondary) !important;
  border-color: rgba(70, 150, 255, 0.16) !important;
}
/* 标签底色：common.css 内仍写死旧蓝色族的 rgba，这里统一到新色族 */
.tag-primary { background: rgba(43, 124, 255, 0.12) !important; border-color: rgba(43, 124, 255, 0.30) !important; }
.tag-success { background: rgba(61, 220, 151, 0.12) !important; border-color: rgba(61, 220, 151, 0.30) !important; }
.tag-warning { background: rgba(255, 176, 32, 0.12) !important; border-color: rgba(255, 176, 32, 0.30) !important; }
.tag-danger  { background: rgba(255, 92, 92, 0.12) !important;  border-color: rgba(255, 92, 92, 0.30) !important; }
.tag-info    { background: rgba(160, 107, 255, 0.12) !important; border-color: rgba(160, 107, 255, 0.30) !important; }
.tag-default { background: rgba(255, 255, 255, 0.05) !important; }

/* 进度条槽 / 弹窗遮罩 */
.progress-bar { background: rgba(255, 255, 255, 0.06) !important; }
.modal-overlay { background: rgba(2, 8, 20, 0.66) !important; backdrop-filter: blur(3px); }

/* ---------- 12. 例外声明 ----------
 * 以下表面属于「刻意的浅色」，不参与深色化，切勿加入上面的统一皮肤选择器：
 *   .rep-page 及其内部  —— 用能分析报告(P007h)的 A4 纸面预览，需保持纸白质感
 *   .toggle-switch / .slider 的白色滑块 —— 开关控件的高亮小球
 */

/* =====================================================================
 * 13. 设计令牌：字号 / 行高 / 间距 / 圆角（全站唯一来源）
 * ---------------------------------------------------------------------
 * 目标：像驾驶舱那样节奏统一 —— 同样的语义用同样的尺寸。
 * ===================================================================== */
:root {
  /* 字体：中文优先；数字用等宽字形，保证表格/KPI 竖直对齐不跳动 */
  --font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei",
                 "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-family-num: "DIN Alternate", "HarmonyOS Sans SC", "PingFang SC",
                     "Microsoft YaHei", -apple-system, sans-serif;

  /* 字号阶（12 阶，替代原先散落的 20+ 种写法） */
  --fs-micro: 11px;    /* 图表轴、表内备注 */
  --fs-xs: 12px;       /* 次要说明、KPI 标签 */
  --fs-sm: 13px;       /* 表格正文、表单控件 */
  --fs-base: 14px;     /* 正文 */
  --fs-md: 16px;       /* 卡片标题 */
  --fs-lg: 18px;       /* 区块标题 */
  --fs-xl: 20px;       /* 页面标题 */
  --fs-xxl: 24px;      /* KPI 数值 */
  --fs-display: 28px;  /* 主 KPI / 汇总数值 */

  /* 行高阶（4 阶，替代原先 10 种） */
  --lh-tight: 1.25;    /* 标题、KPI 数值 */
  --lh-ui: 1.5;        /* 控件、表格、标签 */
  --lh-body: 1.6;      /* 正文 */
  --lh-read: 1.75;     /* 长段落、说明文字 */

  /* 间距阶（4px 基，保留 2/6/10 细粒度） */
  --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;
  --sp-5: 10px; --sp-6: 12px; --sp-7: 14px; --sp-8: 16px;
  --sp-9: 20px; --sp-10: 24px; --sp-11: 32px; --sp-12: 40px;
  --sp-13: 48px; --sp-14: 64px;

  /* 圆角阶 */
  --radius-sm: 4px; --radius-base: 6px; --radius-lg: 8px;
  --radius-xl: 12px; --radius-xxl: 16px;

  /* 卡片节奏：全站统一 */
  --card-pad-y: 16px;
  --card-pad-x: 20px;
  --card-gap: 16px;      /* 卡片之间的间隙 */
  --block-gap: 20px;     /* 区块之间的间隙 */
  --control-h: 32px;     /* 按钮 / 选择器统一高度（对齐基础 .btn） */
  --control-h-sm: 28px;  /* 小号按钮 */
  --input-h: 34px;       /* 文本输入框高度（对齐基础 .form-control） */
}

/* =====================================================================
 * 14. 全局排版基线
 * ===================================================================== */
body {
  font-family: var(--font-family) !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-body) !important;
  letter-spacing: 0.2px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* 数字等宽：表格/KPI 不再左右跳 */
}
/* 中文断行规则：不在词中折断，长串数字/英文允许换行 */
body, .page-container, .page-body { word-break: normal; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); word-break: keep-all; }

/* =====================================================================
 * 15. 排版层级：同一语义 → 同一字号/行高
 * ===================================================================== */
/* 说明：本节统一加 !important。SPA(index.html) 会把子页面 <style> 注入到
 * body 内、位于 head 之后，同级选择器下会压过主题层；只有 !important 才能
 * 保证全站排版真正归一。 */
.page-title      { font-size: var(--fs-xl) !important;      line-height: var(--lh-tight) !important; font-weight: 600; }
.page-title-sub  { font-size: var(--fs-sm) !important;      line-height: var(--lh-ui) !important; }
.card-title,
.chart-card-title,
.device-status-title { font-size: var(--fs-md) !important; line-height: var(--lh-tight) !important; font-weight: 600; }

.kpi-label       { font-size: var(--fs-xs) !important;      line-height: var(--lh-ui) !important; }
.kpi-value       { font-size: var(--fs-xxl) !important;     line-height: var(--lh-tight) !important; font-variant-numeric: tabular-nums; }
.kpi-value .unit { font-size: var(--fs-xs) !important;      line-height: 1 !important; }
.kpi-sub,
.kpi-trend       { font-size: var(--fs-micro) !important;   line-height: var(--lh-ui) !important; }

.data-table th,
.data-table td   { font-size: var(--fs-sm) !important;      line-height: var(--lh-ui) !important; vertical-align: middle; }
.data-table th   { font-size: var(--fs-xs) !important;      letter-spacing: 0.3px; }
.form-label      { font-size: var(--fs-sm) !important;      line-height: var(--lh-ui) !important; }
.form-control,
.filter-select,
.filter-input    { font-size: var(--fs-sm) !important;      line-height: var(--lh-ui) !important; }
.btn             { font-size: var(--fs-sm) !important;      line-height: 1 !important; }
.btn-sm          { font-size: var(--fs-xs) !important; }
.tag             { font-size: var(--fs-xs) !important;      line-height: var(--lh-ui) !important; }
.detail-label    { font-size: var(--fs-xs) !important;      line-height: var(--lh-ui) !important; }
.detail-value    { font-size: var(--fs-sm) !important;      line-height: var(--lh-ui) !important; }
.empty-state-text { font-size: var(--fs-sm) !important;     line-height: var(--lh-body) !important; }

/* 长段落类文本放宽行高，避免密集压迫 */
.form-help, .field-tip, .tip-text, .desc, .remark, .note { line-height: var(--lh-read) !important; }

/* =====================================================================
 * 16. 间距节奏：卡片、栅格、页头页身、表格、控件
 * ===================================================================== */
/* 卡片内边距统一 */
.card, .kpi-card, .device-status-card, .realtime-card,
.contract-card, .mode-card, .alert-table-wrap {
  padding: var(--card-pad-y) var(--card-pad-x) !important;
}
.chart-card-header { padding: var(--sp-7) var(--card-pad-x) !important; }
.chart-card-body   { padding: var(--card-pad-y) var(--card-pad-x) !important; }

/* 栅格间隙统一（原 .kpi-grid 16 / .chart-grid 20 不一致）
 * 注意：不改 grid-template-columns —— 各页 KPI 数量不同（3/4/5 个），
 * 强行统一列数会让卡片留空或挤压，只统一间隙即可。 */
.kpi-grid, .chart-grid, .realtime-grid, .shortcut-grid, .mode-grid, .stat-grid {
  gap: var(--card-gap) !important;
  margin-bottom: var(--block-gap) !important;
}

/* 页头 / 页身 */
.page-header { padding: var(--card-pad-y) var(--sp-10) !important; }
.page-body   { padding: var(--block-gap) var(--sp-10) !important; }
/* 不用 .page-body > * + * 加 margin —— 各区块自带 margin-bottom，叠加会变成双倍间距 */
.filter-bar  { gap: var(--card-gap) !important; margin-bottom: var(--block-gap) !important; }
.filter-item { gap: var(--sp-2) !important; }

/* 表格单元格 */
.data-table thead th { padding: var(--sp-5) var(--card-gap) !important; }
.data-table tbody td { padding: var(--sp-5) var(--card-gap) !important; }

/* 控件统一高度与内边距
 * 关键：排除 .btn-text —— 它是表格操作列里的「文字链接按钮」
 * （全站 945 处，多为 btn btn-text btn-sm），必须保持 inline、无高度无内边距，
 * 否则会被撑成 28px 的实心按钮，操作列排版会崩。 */
.btn:not(.btn-text)              { height: var(--control-h) !important;    padding: 0 var(--sp-7) !important; }
.btn-sm:not(.btn-text)           { height: var(--control-h-sm) !important; padding: 0 var(--sp-5) !important; }
.btn-lg:not(.btn-text)           { height: 38px !important;                padding: 0 var(--sp-10) !important; }
.btn-text, .btn-text.btn-sm      { height: auto !important; padding: 0 !important; background: transparent !important; border: none !important; }
.form-control                { height: var(--input-h) !important; padding: 0 var(--sp-5) !important; line-height: calc(var(--input-h) - 2px); }
.filter-select, .filter-input { height: var(--control-h) !important; padding: 0 var(--sp-5) !important; line-height: calc(var(--control-h) - 2px); }
/* 分页按钮保持正方形 */
.page-btn    { width: var(--control-h-sm) !important; height: var(--control-h-sm) !important; min-width: var(--control-h-sm); padding: 0 !important; }
/* 胶囊统一为全圆角 */
.tab-pill, .chart-tab-pill { padding: var(--sp-3) var(--sp-7) !important; line-height: var(--lh-ui); border-radius: 999px !important; }

/* 弹窗内部节奏 */
.modal-header { padding: var(--card-pad-y) var(--card-pad-x) !important; }
.modal-body   { padding: var(--card-pad-y) var(--card-pad-x) !important; }
.modal-footer { padding: var(--sp-6) var(--card-pad-x) !important; gap: var(--sp-4) !important; }

/* =====================================================================
 * 17. 换行与对齐防错：标题不断行、数值不折行、省略号兜底
 * ===================================================================== */
.btn, .tag, .page-btn, .tab-pill, .form-label,
.data-table thead th, .card-title, .chart-card-title,
.device-status-title, .kpi-label, .kpi-value, .kpi-value .unit {
  white-space: nowrap !important;
}
.card-title, .chart-card-title, .page-title,
.device-status-title, .kpi-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* flex 子项允许收缩，避免长内容把卡片撑破 */
.chart-card-header > *, .kpi-content, .filter-item, .card-title, .chart-card-title { min-width: 0; }
.chart-card-header { gap: var(--sp-4) !important; }
/* 表格：数值列等宽数字，文本列正常换行不折断 */
.data-table td .num, .data-table td.number, .num { font-variant-numeric: tabular-nums; }

/* =====================================================================
 * 18. 组件规范：标签 / 图标 / 交互态 / 焦点可见性
 * ===================================================================== */
/* --- 标签：统一为 6px 圆角小胶囊，几何尺寸对齐间距阶 --- */
.tag {
  padding: var(--sp-1) var(--sp-4) !important;
  border-radius: var(--radius-base) !important;
  line-height: 20px !important;
  font-weight: 500;
}
/* --- KPI 图标：42px 收敛到 40px（8px 栅格） --- */
.kpi-icon, .shortcut-icon {
  width: 40px !important; height: 40px !important;
  font-size: var(--fs-xl) !important;
  border-radius: var(--radius-lg) !important;
}
/* --- 文字操作按钮（表格操作列）：保持内联，不撑高 --- */
.btn-text { color: var(--color-primary) !important; }
.btn-text:hover { color: var(--color-primary-hover) !important; text-decoration: none !important; }
.btn-text.text-danger, .btn-text.btn-danger { color: var(--color-danger) !important; }

/* --- 交互态统一：按下位移 + 焦点可见（键盘可达性） --- */
.btn:not(:disabled):active { transform: translateY(1px); }
:focus-visible { outline: 2px solid rgba(43, 124, 255, 0.65); outline-offset: 1px; }
.card:focus-visible, .chart-card:focus-visible { outline-offset: -2px; }

/* --- 表格行过渡与末行收边 --- */
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:last-child td { border-bottom: none; }

/* --- 空状态留白统一 --- */
.empty-state { padding: var(--sp-11) var(--sp-9) !important; }

/* --- 选中文字与输入占位符 --- */
::selection { background: rgba(43, 124, 255, 0.35); color: #fff; }
::placeholder { color: var(--color-text-placeholder) !important; opacity: 1; }