@layer components {
  .erp-screen--dashboard { gap: calc(var(--erp-gap) + 6px); }
  /* Dải chỉ số: một khung chung, các ô ngăn bằng vạch 1px (không phải các thẻ rời có vạch màu bên trái).
     Màu trạng thái chỉ là chấm nhỏ cạnh nhãn, và chỉ khi có ý nghĩa (tốt / cần chú ý / xấu). */
  .erp-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow: hidden;
    border-radius: var(--erp-radius-lg); background: var(--erp-panel-bg); border: 1px solid var(--erp-border); box-shadow: var(--erp-shadow-sm);
    backdrop-filter: blur(var(--erp-blur)); -webkit-backdrop-filter: blur(var(--erp-blur));
  }
  .erp-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 18px 16px; margin: -1px 0 0 -1px; border-top: 1px solid var(--erp-border); border-inline-start: 1px solid var(--erp-border); }
  .erp-kpi h2 { display: flex; align-items: center; gap: 7px; font-size: var(--erp-fs-sm); font-weight: 500; color: var(--erp-text-muted); }
  .erp-kpi[data-tone="success"] h2::before, .erp-kpi[data-tone="warning"] h2::before, .erp-kpi[data-tone="danger"] h2::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--erp-success);
  }
  .erp-kpi[data-tone="warning"] h2::before { background: var(--erp-warning); }
  .erp-kpi[data-tone="danger"] h2::before { background: var(--erp-danger); }
  .erp-kpi__value { font-size: var(--erp-fs-2xl); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
  .erp-chart {
    padding: 14px 16px; border-radius: var(--erp-radius-lg); background: var(--erp-panel-bg); border: 1px solid var(--erp-border);
    box-shadow: var(--erp-shadow-sm); backdrop-filter: blur(var(--erp-blur)); -webkit-backdrop-filter: blur(var(--erp-blur));
  }
  .erp-chart figcaption { font-weight: 650; margin-bottom: 8px; }
  .erp-chart__svg { width: 100%; max-height: 280px; }
  .erp-chart__grid { stroke: var(--erp-grid-line); stroke-width: 1; }
  .erp-chart__bar { fill: var(--erp-primary); opacity: .9; }
  .erp-chart__bar:hover { opacity: 1; }
  .erp-chart__line { stroke: var(--erp-primary); stroke-width: 2; }
  .erp-chart__value { fill: var(--erp-text-muted); font-size: 12px; }
  .erp-chart__label { fill: var(--erp-text-muted); font-size: 12px; }
  .erp-card-block {
    padding: 14px 16px; border-radius: var(--erp-radius-lg); background: var(--erp-panel-bg); border: 1px solid var(--erp-border);
    backdrop-filter: blur(var(--erp-blur)); -webkit-backdrop-filter: blur(var(--erp-blur));
  }
  .erp-card-block::before { content: attr(data-title); display: block; font-weight: 650; margin-bottom: 8px; }
  .erp-card-block ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; padding: 0; list-style: none; }
  .erp-card-block a {
    display: block; padding: 9px 12px; border-radius: var(--erp-radius); background: var(--erp-surface-2); border: 1px solid var(--erp-border);
    text-decoration: none; color: var(--erp-text); font-weight: 500;
  }
  .erp-card-block a:hover { border-color: var(--erp-primary); color: var(--erp-primary); }
}