/* ==========================================================================
   Tabler 对齐层（自动生成，勿手改）
   --------------------------------------------------------------------------
   作用：把本站自定义组件的外观交给 Tabler 的设计系统决定。
   做法：为每个自定义组件补一组「以 Tabler 语义变量为准」的覆盖规则，
        类名与结构不变（脚本选择器不受影响），只改视觉。
   生成的 Tabler 变量：--tblr-primary / --tblr-border-color / --tblr-body-bg /
        --tblr-card-bg / --tblr-secondary / --tblr-border-radius 等
   ========================================================================== */

/* ---------- 1. 卡片类组件统一为 Tabler 卡片的观感 ---------- */
.card,
.stat,
.viz,
.panel,
.org-node,
.board-card,
.tool,
.tri__col,
.who__card,
.formula-card,
.loop {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-card-bg, #ffffff);
  box-shadow: var(--tblr-box-shadow-card, 0 1px 2px rgba(0, 0, 0, .04));
}

/* 卡片头：与 Tabler 的 .card-header 视觉一致 */
.viz__head,
.card__head,
.panel__head {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
  border-radius: var(--tblr-border-radius, 4px) var(--tblr-border-radius, 4px) 0 0;
}

.viz__title,
.card__title,
.panel__title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--tblr-body-color, #1b2434);
}

.viz__subtitle,
.card__subtitle {
  font-size: .75rem;
  color: var(--tblr-secondary, #6c7a91);
}

.viz__source {
  font-size: .6875rem;
  color: var(--tblr-secondary, #6c7a91);
  border-color: var(--tblr-border-color, #e6e7e9);
}

/* 卡片体：Tabler 内边距 */
.viz__body,
.card__body,
.panel__body {
  padding: 1rem;
}

/* 教学要点条：改用 Tabler 的提示条观感 */
.viz__insight {
  margin: 0 1rem 1rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--tblr-primary, #066fd1);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-primary-lt, #e9f0fb);
  color: var(--tblr-body-color, #1b2434);
  font-size: .8125rem;
}

.viz__insight::before { color: var(--tblr-primary, #066fd1); }

/* ---------- 2. 表格统一为 Tabler 表格 ---------- */
.ws-table-wrap,
.table-wrap {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-card-bg, #ffffff);
}

.ws-table,
.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
  color: var(--tblr-body-color, #1b2434);
}

.ws-table thead th,
.kpi-table thead th {
  padding: .5rem .75rem;
  background: var(--tblr-bg-surface-secondary, #f6f8fb);
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  color: var(--tblr-secondary, #6c7a91);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  position: static;
}

.ws-table td,
.ws-table th,
.kpi-table td,
.kpi-table th {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--tblr-border-color, #e6e7e9);
  vertical-align: middle;
}

.ws-table tbody tr:last-child td,
.kpi-table tbody tr:last-child td { border-bottom: 0; }

.ws-table tbody tr:hover,
.kpi-table tbody tr:hover { background: var(--tblr-bg-surface-secondary, #f6f8fb); }

/* 数值列：等宽数字右对齐（Tabler 的数据表格惯例） */
.ws-table__amount,
.ws-table__id,
.kpi-table__target,
.num {
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.ws-table__amount { text-align: right; }

/* ---------- 3. 徽标统一为 Tabler 徽标 ---------- */
.badge,
.st {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .125rem .375rem;
  border-radius: var(--tblr-border-radius, 4px);
  font-size: .6875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.badge--accent, .badge--gold, .badge--info {
  background: var(--tblr-primary-lt, #e9f0fb);
  color: var(--tblr-primary, #066fd1);
}

.badge--success, .st--success { background: var(--tblr-green-lt, #e7f6ea); color: var(--tblr-green, #2fb344); }
.badge--warning, .st--warning { background: var(--tblr-yellow-lt, #fdf5e6); color: var(--tblr-yellow, #f59f00); }
.badge--danger,  .st--danger  { background: var(--tblr-red-lt, #fbeaea); color: var(--tblr-red, #d63939); }
.badge--outline { background: transparent; border: 1px solid var(--tblr-border-color, #e6e7e9); color: var(--tblr-secondary, #6c7a91); }

/* ---------- 4. 按钮统一为 Tabler 按钮 ---------- */
.btn {
  border-radius: var(--tblr-border-radius, 4px);
  font-weight: 500;
  font-size: .8125rem;
  min-height: 2rem;
  padding: .25rem .75rem;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}

.btn--primary {
  background: var(--tblr-primary, #066fd1);
  border-color: var(--tblr-primary, #066fd1);
  color: #fff;
}

.btn--primary:hover {
  background: color-mix(in srgb, var(--tblr-primary, #066fd1) 88%, #000);
  border-color: color-mix(in srgb, var(--tblr-primary, #066fd1) 88%, #000);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  color: var(--tblr-body-color, #1b2434);
}

.btn--outline:hover {
  border-color: var(--tblr-primary, #066fd1);
  color: var(--tblr-primary, #066fd1);
  background: var(--tblr-primary-lt, #e9f0fb);
}

.btn--ghost { background: transparent; border-color: transparent; color: var(--tblr-primary, #066fd1); }
.btn--ghost:hover { background: var(--tblr-primary-lt, #e9f0fb); }

.btn--sm { min-height: 1.75rem; padding: .125rem .5rem; font-size: .75rem; }

/* ---------- 5. 表单控件统一为 Tabler 控件 ---------- */
.input,
.select,
.textarea,
input[type="search"],
input[type="text"],
input[type="number"] {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-card-bg, #ffffff);
  color: var(--tblr-body-color, #1b2434);
  font-size: .8125rem;
  min-height: 2.125rem;
  padding: .25rem .625rem;
}

.input:focus, .select:focus, .textarea:focus,
input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus {
  outline: none;
  border-color: var(--tblr-primary, #066fd1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tblr-primary, #066fd1) 18%, transparent);
}

.field__label,
.card__meta {
  color: var(--tblr-secondary, #6c7a91);
  font-size: .75rem;
}

/* ---------- 6. 进度条统一为 Tabler 进度条 ---------- */
.progress, .sla-bar, .composition__bar, .compare__track, .rank-row__track {
  background: var(--tblr-border-color, #e6e7e9);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar, .sla-bar__fill, .compare__fill, .rank-row__fill {
  border-radius: 999px;
}

.progress-bar, .sla-bar__fill {
  background: var(--tblr-primary, #066fd1);
}

/* ---------- 7. 统计卡与指标数值 ---------- */
.stat__value,
.board-card__value,
.figure--hero,
.hero__stat dd,
.stat-band__item dd {
  font-family: var(--tblr-font-monospace, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  color: var(--tblr-body-color, #1b2434);
}

.stat__label,
.board-card__name,
.metric-mini__label {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--tblr-secondary, #6c7a91);
}

.stat__hint,
.board-card__hint,
.metric-mini__note {
  color: var(--tblr-secondary, #6c7a91);
  font-size: .75rem;
}

/* ---------- 8. 侧栏与工作台导航 ---------- */
.ws-nav {
  border: 1px solid var(--tblr-border-color, #e6e7e9);
  border-radius: var(--tblr-border-radius, 4px);
  background: var(--tblr-card-bg, #ffffff);
}

.ws-nav button[aria-current="true"] {
  background: var(--tblr-primary-lt, #e9f0fb);
  color: var(--tblr-primary, #066fd1);
  box-shadow: inset 2px 0 0 var(--tblr-primary, #066fd1);
}

/* ---------- 9. 深色兼容 ---------- */
@media (prefers-color-scheme: dark) {
  .card, .stat, .viz, .panel, .org-node, .board-card, .tool, .tri__col, .who__card, .formula-card, .loop,
  .ws-table-wrap, .table-wrap, .ws-nav {
    background: var(--tblr-card-bg, #1a1f26);
    border-color: var(--tblr-border-color, #2b3138);
  }
}