/**
 * GRAC EPR — Design system lock: archetypes + shared patterns.
 * Load sau app.css / grac-typography.css. Dựa trên tokens.css (--epr-*).
 */

/* -------------------------------------------------------------------------- */
/* Archetypes — điều chỉnh nhịp qua #outlet[data-epr-arch] (set trong router)   */
/* -------------------------------------------------------------------------- */

#outlet[data-epr-arch="dashboard"] {
  --epr-ds-density-gap: var(--epr-space-4);
}

#outlet[data-epr-arch="list"] {
  --epr-ds-density-gap: var(--epr-space-3);
}

#outlet[data-epr-arch="detail"] {
  --epr-ds-density-gap: var(--epr-space-4);
}

#outlet[data-epr-arch="workspace"] {
  --epr-ds-density-gap: var(--epr-space-3);
  --epr-ds-density-card-pad: var(--epr-space-3);
}

#outlet[data-epr-arch] > .epr-dashboard-surface,
#outlet[data-epr-arch] > .epr-rpt-surface {
  gap: var(--epr-ds-density-gap);
  padding: var(--epr-ds-density-page-pad-y) var(--epr-ds-density-page-pad-x);
}

#outlet[data-epr-arch="dashboard"] > .epr-dashboard-surface,
#outlet[data-epr-arch="dashboard"] > .epr-rpt-surface {
  box-shadow: var(--epr-elevation-1);
}

#outlet[data-epr-arch="workspace"] > .epr-dashboard-surface {
  border-radius: var(--epr-radius-md);
}

/* -------------------------------------------------------------------------- */
/* Page header — khóa với scale typography (tránh lệch 1.4rem vs 2rem)         */
/* -------------------------------------------------------------------------- */

.epr-page-header h1 {
  margin: 0 0 var(--epr-space-1);
  font-family: var(--epr-font-display);
  font-size: clamp(1.35rem, 2.1vw, var(--epr-type-page-title-fs));
  line-height: var(--epr-type-page-title-lh);
  font-weight: var(--epr-type-page-title-fw);
  color: var(--epr-neutral-900);
  letter-spacing: -0.02em;
}

.epr-page-header p {
  margin: 0;
  font-size: var(--epr-type-page-sub-fs);
  line-height: var(--epr-type-page-sub-lh);
  color: var(--epr-neutral-500);
}

/* -------------------------------------------------------------------------- */
/* Section title (dùng ngoài / bổ sung .card-hd)                                */
/* -------------------------------------------------------------------------- */

.epr-ds-section-title {
  margin: 0 0 var(--epr-space-3);
  font-family: var(--epr-font-sans);
  font-size: var(--epr-type-section-fs);
  line-height: var(--epr-type-section-lh);
  font-weight: var(--epr-type-section-fw);
  color: var(--epr-neutral-900);
  letter-spacing: -0.01em;
}

.epr-ds-section-title--subtle {
  font-size: var(--epr-type-card-title-fs);
  line-height: var(--epr-type-card-title-lh);
  font-weight: var(--epr-type-card-title-fw);
  color: var(--epr-neutral-700);
}

/* `.card-hd` trong SPA (`.tpl-page`) đặt font nhỏ — khi gắn DS section title thì ưu tiên token */
.tpl-page .card-hd.epr-ds-section-title {
  margin: 0;
}

.tpl-page .card-hd.epr-ds-section-title.epr-ds-section-title--subtle {
  font-size: var(--epr-type-card-title-fs);
  line-height: var(--epr-type-card-title-lh);
  font-weight: var(--epr-type-card-title-fw);
  color: var(--epr-neutral-700);
}

/* -------------------------------------------------------------------------- */
/* Filter bar (chung cho list / bảng)                                            */
/* -------------------------------------------------------------------------- */

.epr-ds-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--epr-space-3);
  padding: var(--epr-ds-density-filter-pad) var(--epr-space-4);
  margin-bottom: var(--epr-space-3);
  background: var(--epr-surface-muted);
  border: var(--epr-border-width) solid var(--epr-border);
  border-radius: var(--epr-radius-md);
  box-shadow: var(--epr-elevation-0);
}

/* -------------------------------------------------------------------------- */
/* Status chip — nguồn duy nhất cho badge trạng thái (success / warn / …)        */
/* -------------------------------------------------------------------------- */

.epr-ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--epr-space-1);
  max-width: 100%;
  padding: 0.2rem var(--epr-space-3);
  font-size: var(--epr-font-size-xs);
  font-weight: var(--epr-font-weight-semibold);
  line-height: 1.2;
  border-radius: var(--epr-radius-pill);
  border: var(--epr-border-width) solid transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.epr-ds-chip--prominent {
  padding: 0.28rem 0.65rem;
  font-size: var(--epr-font-size-sm);
  font-weight: var(--epr-font-weight-semibold);
  letter-spacing: 0.02em;
}

.epr-ds-chip--success {
  background: var(--grac-green-100);
  color: var(--grac-green-800);
  border-color: rgba(21, 93, 55, 0.12);
}

.epr-ds-chip--warn {
  background: rgba(242, 153, 74, 0.14);
  color: #9a5b18;
  border-color: rgba(242, 153, 74, 0.22);
}

.epr-ds-chip--danger {
  background: rgba(229, 57, 53, 0.1);
  color: #9a2c2c;
  border-color: rgba(229, 57, 53, 0.18);
}

.epr-ds-chip--info {
  background: rgba(30, 136, 229, 0.1);
  color: #1d5f9f;
  border-color: rgba(30, 136, 229, 0.18);
}

.epr-ds-chip--neutral {
  background: var(--epr-neutral-100);
  color: var(--epr-neutral-700);
  border-color: var(--epr-border);
}

/* -------------------------------------------------------------------------- */
/* CTA hierarchy — hàng nút chuẩn                                                */
/* -------------------------------------------------------------------------- */

.epr-ds-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--epr-space-2);
  align-items: center;
}

.epr-ds-cta-row .epr-btn--primary {
  order: 0;
}

.epr-ds-cta-row .epr-btn--soft {
  order: 1;
}

.epr-ds-cta-row .epr-btn--ghost {
  order: 2;
}

/* -------------------------------------------------------------------------- */
/* Empty state — đồng danh .epr-empty                                            */
/* -------------------------------------------------------------------------- */

.epr-ds-empty {
  padding: var(--epr-space-6);
  text-align: center;
  color: var(--epr-neutral-500);
  font-size: var(--epr-font-size-sm);
  line-height: 1.45;
  border: var(--epr-border-width) dashed var(--epr-border);
  border-radius: var(--epr-radius-md);
  background: rgba(255, 255, 255, 0.72);
}

.epr-ds-empty__title {
  margin: 0 0 var(--epr-space-2);
  font-size: var(--epr-font-size-md);
  font-weight: var(--epr-font-weight-semibold);
  color: var(--epr-neutral-900);
}

.epr-ds-empty__hint {
  margin: 0;
  font-size: var(--epr-font-size-xs);
  color: var(--epr-neutral-500);
}

/* -------------------------------------------------------------------------- */
/* Validation (form prototype)                                                      */
/* -------------------------------------------------------------------------- */

.epr-ds-field {
  margin-bottom: var(--epr-space-4);
}

.epr-ds-field__label {
  display: block;
  margin-bottom: var(--epr-space-1);
  font-size: var(--epr-font-size-xs);
  font-weight: var(--epr-font-weight-semibold);
  color: var(--epr-neutral-700);
}

.epr-ds-field__hint {
  margin-top: var(--epr-space-1);
  font-size: var(--epr-font-size-xs);
  color: var(--epr-neutral-500);
}

.epr-ds-field.is-invalid .epr-select,
.epr-ds-field.is-invalid .epr-input:not([type="checkbox"]):not([type="radio"]),
.epr-ds-field.is-invalid textarea {
  border-color: var(--epr-danger);
  box-shadow: 0 0 0 1px rgba(229, 57, 53, 0.14);
}

.epr-ds-field__error {
  margin-top: var(--epr-space-1);
  font-size: var(--epr-font-size-xs);
  font-weight: var(--epr-font-weight-medium);
  color: var(--epr-danger);
}

/* Đồng bộ empty state có sẵn với token biên */
.epr-empty {
  border-width: var(--epr-border-width);
}