/* GRAC EPR Web Admin design tokens, ported from the approved prototype. */
:root {
  /* Brand: GRAC green */
  --grac-green-900: #155d37;
  --grac-green-800: #1a6b3f;
  --grac-green-700: #23814d;
  --grac-green-600: #2d9d5c;
  --grac-green-500: #3cb371;
  --grac-green-100: #d4edda;
  --grac-green-50: #e8f5ea;
  --grac-green-25: #f3faf4;

  /* Compatibility aliases used by existing Razor CSS. */
  --epr-brand-800: var(--grac-green-900);
  --epr-brand-700: var(--grac-green-800);
  --epr-brand-600: var(--grac-green-600);
  --epr-brand-500: var(--grac-green-500);

  /* Semantic colors */
  --epr-success: var(--grac-green-600);
  --epr-warning: #f2994a;
  --epr-danger: #e53935;
  --epr-info: #1e88e5;
  --epr-blockchain-accent: #4338ca;
  --epr-blockchain-accent-soft: rgba(67, 56, 202, 0.1);

  /* Neutral, surface, border */
  --epr-neutral-900: #2c3338;
  --epr-neutral-700: #4a5562;
  --epr-neutral-500: #6b7280;
  --epr-neutral-300: #e2e5e9;
  --epr-neutral-100: #f4f6f8;

  --epr-page-bg: #eef1f4;
  --epr-surface: #fff;
  --epr-surface-muted: var(--epr-neutral-100);
  --epr-surface-elevated: #fff;
  --epr-border: var(--epr-neutral-300);

  --epr-text-primary: var(--epr-neutral-900);
  --epr-text-secondary: var(--epr-neutral-700);
  --epr-text-muted: var(--epr-neutral-500);
  --epr-text-inverse: #fff;

  /* Type */
  --epr-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --epr-font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --epr-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --epr-font-size-xs: 0.75rem;
  --epr-font-size-sm: 0.875rem;
  --epr-font-size-md: 1rem;
  --epr-font-weight-medium: 500;
  --epr-font-weight-semibold: 600;

  --epr-page-title-size: 2rem;
  --epr-page-title-line-height: 2.5rem;
  --epr-page-title-weight: 700;
  --epr-section-title-size: 1.5rem;
  --epr-section-title-line-height: 2rem;
  --epr-section-title-weight: 700;
  --epr-card-title-size: 1.125rem;
  --epr-card-title-line-height: 1.5rem;
  --epr-card-title-weight: 700;
  --epr-body-size: 0.875rem;
  --epr-body-line-height: 1.4285714286;
  --epr-label-size: 0.75rem;
  --epr-label-line-height: 1rem;
  --epr-label-weight: 600;
  --epr-table-head-size: 0.75rem;
  --epr-table-cell-size: 0.8125rem;
  --epr-table-cell-line-height: 1.125rem;
  --epr-kpi-value-size: 2.125rem;
  --epr-kpi-value-line-height: 2.375rem;
  --epr-tabular: tabular-nums lining-nums;

  /* Prototype naming aliases for future component CSS. */
  --epr-type-page-title-fs: var(--epr-page-title-size);
  --epr-type-page-title-lh: var(--epr-page-title-line-height);
  --epr-type-page-title-fw: var(--epr-page-title-weight);
  --epr-type-page-sub-fs: 1rem;
  --epr-type-page-sub-lh: 1.5rem;
  --epr-type-page-sub-fw: 400;
  --epr-type-section-fs: var(--epr-section-title-size);
  --epr-type-section-lh: var(--epr-section-title-line-height);
  --epr-type-section-fw: var(--epr-section-title-weight);
  --epr-type-card-title-fs: var(--epr-card-title-size);
  --epr-type-card-title-lh: var(--epr-card-title-line-height);
  --epr-type-card-title-fw: var(--epr-card-title-weight);
  --epr-type-body-fs: var(--epr-body-size);
  --epr-type-body-lh: var(--epr-body-line-height);
  --epr-type-body-fw: 400;
  --epr-type-body-strong-fw: var(--epr-font-weight-medium);
  --epr-type-label-fs: var(--epr-label-size);
  --epr-type-label-lh: var(--epr-label-line-height);
  --epr-type-label-fw: var(--epr-label-weight);
  --epr-type-table-head-fs: var(--epr-table-head-size);
  --epr-type-table-head-lh: 1rem;
  --epr-type-table-head-fw: var(--epr-label-weight);
  --epr-type-table-cell-fs: var(--epr-table-cell-size);
  --epr-type-table-cell-lh: var(--epr-table-cell-line-height);
  --epr-type-table-cell-fw: 400;
  --epr-type-kpi-label-fs: var(--epr-label-size);
  --epr-type-kpi-label-lh: var(--epr-label-line-height);
  --epr-type-kpi-label-fw: var(--epr-label-weight);
  --epr-type-kpi-value-fs: var(--epr-kpi-value-size);
  --epr-type-kpi-value-lh: var(--epr-kpi-value-line-height);
  --epr-type-kpi-value-fw: 700;
  --epr-type-code-fs: 0.75rem;
  --epr-type-code-lh: 1rem;
  --epr-type-code-fw: 500;

  /* Spacing */
  --epr-space-1: 0.25rem;
  --epr-space-2: 0.5rem;
  --epr-space-3: 0.75rem;
  --epr-space-4: 1rem;
  --epr-space-5: 1.25rem;
  --epr-space-6: 1.5rem;

  /* Shape and elevation */
  --epr-radius-sm: 0.25rem;
  --epr-radius-md: 0.375rem;
  --epr-radius-lg: 0.5rem;
  --epr-radius-xl: 0.875rem;
  --epr-radius-pill: 999px;

  --epr-border-width: 1px;
  --epr-border-width-emphasis: 2px;

  --epr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --epr-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --epr-shadow-lg: 0 8px 24px rgba(18, 38, 56, 0.08);
  --epr-elevation-0: none;
  --epr-elevation-1: var(--epr-shadow-sm);
  --epr-elevation-2: var(--epr-shadow-md);

  /* Density */
  --epr-density-gap: var(--epr-space-3);
  /* Khoảng cách giữa các vùng trong .epr-template (grid) */
  --epr-density-section-gap: var(--epr-space-3);
  --epr-density-page-pad-x: var(--epr-space-4);
  --epr-density-page-pad-y: var(--epr-space-4);
  --epr-density-card-pad: var(--epr-space-4);
  --epr-density-filter-pad: var(--epr-space-3);
  --epr-table-cell-pad-y: 0.75rem;
  --epr-table-cell-pad-x: 0.625rem;
  --epr-form-control-pad-y: 0.625rem;
  --epr-form-control-pad-x: 0.75rem;
  /* Cùng một chiều cao tối thiểu cho input và select (đồng bộ line-box + padding dọc). */
  --epr-form-control-min-height: calc(2 * var(--epr-form-control-pad-y) + 1.5em);
  /* Select cần padding phải rộng hơn cho icon mũi tên (Bootstrap form-select). */
  --epr-form-select-pad-end: calc(var(--epr-form-control-pad-x) + 1.125rem);
  --epr-card-radius: var(--epr-radius-md);
  --epr-card-shadow: var(--epr-shadow-lg);

  /* Shell dimensions */
  --epr-topbar-height: 56px;
  --epr-sidebar-width: 280px;
  --epr-sidebar-collapsed: 64px;
  --epr-sidebar-active-bg: var(--grac-green-50);
  --epr-sidebar-active-border: var(--grac-green-800);
  --epr-nav-tree-line: rgba(74, 85, 98, 0.55);

  /* Icon sizing */
  --epr-icon-sidebar: 1.25rem;
  --epr-icon-topbar: 1.125rem;
  --epr-icon-inline: 1rem;
  --epr-icon-section: 1.125rem;
  --epr-icon-kpi: 1.375rem;
  --epr-icon-chip: 0.9375rem;

  /* KPI accents */
  --epr-kpi-1-accent: #1d4ed8;
  --epr-kpi-1-border: rgba(29, 78, 216, 0.16);
  --epr-kpi-2-accent: var(--grac-green-700);
  --epr-kpi-2-border: rgba(21, 93, 55, 0.18);
  --epr-kpi-3-accent: #6d28d9;
  --epr-kpi-3-border: rgba(109, 40, 217, 0.16);
  --epr-kpi-4-accent: #c2410c;
  --epr-kpi-4-border: rgba(194, 65, 12, 0.18);

  /* Bootstrap variable bridge for existing Razor markup. */
  --bs-primary: var(--epr-brand-600);
  --bs-primary-rgb: 45, 157, 92;
  --bs-success: var(--epr-success);
  --bs-warning: var(--epr-warning);
  --bs-danger: var(--epr-danger);
  --bs-info: var(--epr-info);

  /* Focus ring */
  --epr-focus-ring-color: var(--epr-brand-600);
  --epr-focus-ring-width: 2px;
  --epr-focus-ring-offset: 2px;
}