/** Material-inspired surfaces using shadcn tokens — modest radius, outlined fields. */

export const ruleEngineSurface = {
  pageCard:
    "overflow-hidden rounded-lg border border-border bg-card shadow-sm",
  pageCardToolbar: "border-b border-border bg-muted/30 px-3 py-2.5 sm:px-4 sm:py-3",
  dialog: "max-h-[90vh] overflow-y-auto rounded-lg border-border sm:max-w-lg",
  dialogSm: "rounded-lg border-border sm:max-w-md",
} as const;

export const ruleEngineField = {
  label: "text-sm font-medium text-foreground",
  requiredMark: "text-destructive",
  input:
    "h-10 w-full rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30",
  textarea:
    "min-h-[96px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30",
  selectTrigger:
    "h-10 w-full rounded-md border border-input bg-background px-3 text-sm shadow-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 data-[placeholder]:text-muted-foreground",
  selectContent: "rounded-md border-border shadow-md",
  switchRow: "flex min-h-10 items-center justify-between gap-3 rounded-md border border-border bg-muted/20 px-3",
  switchHint: "text-xs text-muted-foreground",
} as const;

export const ruleEngineToolbar = {
  search:
    "h-9 rounded-md border border-input bg-background pl-9 text-sm shadow-xs placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 sm:h-10 sm:pl-10",
  viewToggleGroup:
    "flex h-9 items-center rounded-md border border-border bg-muted/40 p-0.5 sm:h-10",
  viewToggleBtn:
    "inline-flex h-7 items-center gap-1 rounded-sm px-2 text-xs font-medium transition-colors sm:h-8 sm:gap-1.5 sm:px-3 sm:text-sm",
  viewToggleActive: "bg-background text-foreground shadow-sm",
  viewToggleIdle: "text-muted-foreground hover:bg-background/60 hover:text-foreground",
  actionBtn: "h-9 rounded-md shadow-xs sm:h-10",
  primaryBtn: "h-9 gap-1.5 rounded-md px-3 text-xs font-medium shadow-xs sm:h-10 sm:gap-2 sm:px-4 sm:text-sm",
} as const;

export const ruleEngineCard = {
  article:
    "group flex flex-col overflow-hidden rounded-lg border border-border bg-card shadow-sm transition-shadow duration-200 hover:shadow-md",
  header: "border-b border-border bg-muted/25 px-3 py-2.5 sm:px-4 sm:py-3.5",
  avatar:
    "flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground sm:h-10 sm:w-10 sm:text-sm",
  title: "truncate text-sm font-semibold text-foreground sm:text-[15px]",
  meta: "text-xs text-muted-foreground",
  detailLabel:
    "text-[10px] font-medium uppercase tracking-wide text-muted-foreground sm:text-[11px]",
  detailValue: "mt-0.5 text-xs text-foreground sm:text-sm",
  footer: "mt-auto border-t border-border bg-muted/20 px-2 py-2 sm:px-3 sm:py-2.5",
  skeleton: "animate-pulse rounded-lg border border-border bg-muted/30 p-3 sm:p-4",
} as const;

export const ruleEngineTable = {
  headerCell:
    "h-11 bg-muted/50 text-xs font-semibold uppercase tracking-wide text-muted-foreground",
  bodyCell: "py-3.5 text-sm text-foreground",
} as const;