/* Shared dashboard KPI contract（2026-09-11）（CSS 架構重構 P3 自 legacy/core.css 拆出） */
@layer components {

  /* ===== Shared dashboard KPI contract (2026-09-11) ===== */
  #content .ui-kpi-grid { display: grid; gap: 16px; margin-bottom: 18px; }
  #content .ui-kpi-card {
    min-width: 0; min-height: 94px; display: flex; align-items: center; gap: 12px;
    padding: 16px 18px; border: 1px solid var(--c-border); border-radius: var(--r-lg);
    background: var(--c-white); box-shadow: 0 1px 2px rgba(15,23,42,.04);
    color: var(--c-text); text-align: left;
  }
  #content .ui-kpi-card--stacked { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; }
  #content .ui-kpi-icon {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; margin: 0;
    border-radius: var(--r-md); background: var(--c-primary-soft); font-size: var(--fs-16);
  }
  #content .ui-kpi-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  #content .ui-kpi-value { color: var(--c-text); font-size: var(--fs-28); line-height: 1; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
  #content .ui-kpi-label { margin: 0; color: var(--c-muted); font-size: var(--fs-13); font-weight: var(--fw-medium); }
  #content .ui-kpi-meta { margin-top: auto; align-self: flex-start; color: var(--c-muted); font-size: var(--fs-11); font-weight: var(--fw-medium); line-height: 1.2; }
  #content .ui-kpi-card--stacked .ui-kpi-meta { align-self: flex-end; text-align: right; }
  #content .ui-kpi-card--blue .ui-kpi-value { color: var(--c-primary); }
  #content .ui-kpi-card--indigo .ui-kpi-value { color: var(--c-primary); }
  #content .ui-kpi-card--slate .ui-kpi-value { color: var(--c-text-2); }
  #content .ui-kpi-card--purple .ui-kpi-value { color: var(--c-prepare); }
  #content .ui-kpi-card--green .ui-kpi-value { color: var(--c-success); }
  #content .ui-kpi-card--amber .ui-kpi-value { color: var(--c-warning); }
  #content .ui-kpi-card--red .ui-kpi-value { color: var(--c-danger); }
  #content .ui-kpi-grid--compact { gap: 10px; margin-top: 12px; margin-bottom: 0; }
  #content .ui-kpi-card--compact { min-height: 72px; flex-direction: column; align-items: stretch; gap: 3px; padding: 10px; text-align: center; }
  #content .ui-kpi-card--compact .ui-kpi-icon { width: 28px; height: 28px; flex-basis: 28px; align-self: center; font-size: var(--fs-14); }
  #content .ui-kpi-card--compact .ui-kpi-body { align-items: center; gap: 3px; }
  #content .ui-kpi-card--compact .ui-kpi-value { font-size: var(--fs-16); }
  #content .ui-kpi-card--compact .ui-kpi-label { font-size: var(--fs-11); }
  #content .ui-kpi-card--compact .ui-kpi-meta { align-self: center; font-size: var(--fs-11); }
  #content .ui-kpi-card--inline { min-width: 142px; min-height: 82px; flex-direction: row; padding: 12px 16px; }

  @media (max-width: 767px) {
    #content .ui-kpi-grid { gap: 8px; margin-bottom: 14px; }
    #content .ui-kpi-card { min-height: 78px; gap: 8px; padding: 12px; }
    #content .ui-kpi-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: var(--fs-14); }
    #content .ui-kpi-value { font-size: var(--fs-20); }
    #content .ui-kpi-label { font-size: var(--fs-11); }
    #content .ui-kpi-meta { font-size: var(--fs-11); line-height: 1.15; white-space: normal; }
    #content .ui-kpi-card--compact { min-height: 70px; gap: 2px; padding: 8px; }
    #content .ui-kpi-card--compact .ui-kpi-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: var(--fs-12); }
    #content .ui-kpi-card--compact .ui-kpi-value { font-size: var(--fs-16); }
    #content .ui-kpi-card--compact .ui-kpi-meta { font-size: var(--fs-11); }
    #content .ui-kpi-card--inline { min-width: 0; min-height: 72px; }
  }
}