/**
 * EvoBGP UI surface contract (ReUI Pro).
 *
 * Ops / list / dashboard / detail / settings: **Frame** only.
 * KPI tiles: **stats-12** via `KpiStatGrid` / `reui-kit/KpiStatGrid`.
 * Lists: Frame + DataGrid (`ResourcePage` / `DataGridSection`), not Card shell.
 *
 * @see https://reui.io/preview/base/stats-12
 * @see https://reui.io/preview/base/dashboard-1
 * @see https://reui.io/preview/base/data-grid-filtering-2
 * @see docs/ui-design-contract.md
 */
export const UI_SURFACE = 'frame' as const

/** Skip link — keyboard: first Tab. */
export const SKIP_TO_CONTENT_CLASS =
  'bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2'

/** Grid for ReUI stats-12 KPI rows (3–6 tiles). */
export const kpiStatGridClassName = '@container w-full'

/** @deprecated Use kpiStatGridClassName — kept for legacy imports. */
export const dashboardKpiGridClassName = kpiStatGridClassName

/** @deprecated Sparkline KPI row replaced by stats-12 grid. */
export const kpiGridClassName =
  'grid grid-cols-1 gap-5 @3xl:grid-cols-2 @6xl:grid-cols-4'

/** @deprecated */
export const kpiCardContentClassName = 'flex flex-col items-start gap-4 p-5'

/** Two-column chart panel row (monitoring / network overview). */
export const chartPanelGridClassName =
  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'

/**
 * Main + sidebar: stack until the dashboard container is wide enough.
 * Do not nest this inside another 2-col grid — that squeezes modules/timeline.
 * @see https://reui.io/preview/base/dashboard-1
 */
export const dashboardMainSidebarClassName =
  'grid min-w-0 grid-cols-1 items-start gap-4 @5xl:grid-cols-2'