HAL (HTTP API Layer)

@tailwind base; @tailwind components; @tailwind utilities; /* Shadcn/UI CSS Variables - Gray theme with dark mode */ :root { --radius: 0.625rem; --background: oklch(1 0 0); --foreground: oklch(0.13 0.028 261.692); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0.028 261.692); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0.028 261.692); --primary: oklch(0.21 0.034 264.665); --primary-foreground: oklch(0.985 0.002 247.839); --primary-hover: oklch(0.18 0.030 264.665); --secondary: oklch(0.967 0.003 264.542); --secondary-foreground: oklch(0.21 0.034 264.665); --secondary-hover: oklch(0.95 0.003 264.542); --muted: oklch(0.967 0.003 264.542); --muted-foreground: oklch(0.551 0.027 264.364); --muted-hover: oklch(0.95 0.003 264.542); --accent: oklch(0.967 0.003 264.542); --accent-foreground: oklch(0.21 0.034 264.665); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0.002 247.839); --border: oklch(0.928 0.006 264.531); --input: oklch(0.928 0.006 264.531); --ring: oklch(0.707 0.022 261.325); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.002 247.839); --sidebar-foreground: oklch(0.13 0.028 261.692); --sidebar-primary: oklch(0.21 0.034 264.665); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.967 0.003 264.542); --sidebar-accent-foreground: oklch(0.21 0.034 264.665); --sidebar-border: oklch(0.928 0.006 264.531); --sidebar-ring: oklch(0.707 0.022 261.325); } @media (prefers-color-scheme: dark) { :root { --background: oklch(0.13 0.028 261.692); --foreground: oklch(0.985 0.002 247.839); --card: oklch(0.21 0.034 264.665); --card-foreground: oklch(0.985 0.002 247.839); --popover: oklch(0.21 0.034 264.665); --popover-foreground: oklch(0.985 0.002 247.839); --primary: oklch(0.928 0.006 264.531); --primary-foreground: oklch(0.21 0.034 264.665); --primary-hover: oklch(0.85 0.006 264.531); --secondary: oklch(0.278 0.033 256.848); --secondary-foreground: oklch(0.985 0.002 247.839); --secondary-hover: oklch(0.32 0.033 256.848); --muted: oklch(0.278 0.033 256.848); --muted-foreground: oklch(0.707 0.022 261.325); --muted-hover: oklch(0.32 0.033 256.848); --accent: oklch(0.278 0.033 256.848); --accent-foreground: oklch(0.985 0.002 247.839); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0.002 247.839); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.034 264.665); --sidebar-foreground: oklch(0.985 0.002 247.839); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.278 0.033 256.848); --sidebar-accent-foreground: oklch(0.985 0.002 247.839); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); } } .dark { --background: oklch(0.13 0.028 261.692); --foreground: oklch(0.985 0.002 247.839); --card: oklch(0.21 0.034 264.665); --card-foreground: oklch(0.985 0.002 247.839); --popover: oklch(0.21 0.034 264.665); --popover-foreground: oklch(0.985 0.002 247.839); --primary: oklch(0.928 0.006 264.531); --primary-foreground: oklch(0.21 0.034 264.665); --primary-hover: oklch(0.85 0.006 264.531); --secondary: oklch(0.278 0.033 256.848); --secondary-foreground: oklch(0.985 0.002 247.839); --secondary-hover: oklch(0.32 0.033 256.848); --muted: oklch(0.278 0.033 256.848); --muted-foreground: oklch(0.707 0.022 261.325); --muted-hover: oklch(0.32 0.033 256.848); --accent: oklch(0.278 0.033 256.848); --accent-foreground: oklch(0.985 0.002 247.839); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0.002 247.839); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.034 264.665); --sidebar-foreground: oklch(0.985 0.002 247.839); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.278 0.033 256.848); --sidebar-accent-foreground: oklch(0.985 0.002 247.839); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } html { color-scheme: light dark; } } @layer components { /* Button styles */ .btn { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50; @apply bg-primary text-primary-foreground shadow h-9 px-4 py-2; } .btn:hover { background-color: var(--primary-hover); } .btn-outline { @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50; @apply border border-input bg-background shadow-sm h-9 px-4 py-2; } .btn-outline:hover { @apply bg-accent text-accent-foreground; } .btn-sm { @apply h-8 rounded-md px-3 text-xs; } /* Card styles */ .card { @apply rounded-xl border bg-card text-card-foreground shadow; } /* Force equal height cards with flexbox */ .card.h-full { height: 100%; display: flex; flex-direction: column; } .card header { @apply flex flex-col space-y-1.5 p-6; } .card header.flex-shrink-0 { flex-shrink: 0; } .card header h3, .card header h4 { @apply font-semibold leading-none tracking-tight; } .card header p { @apply text-sm text-muted-foreground; } .card section { @apply p-6 pt-0; } .card section.flex-grow { flex-grow: 1; } .card footer { @apply flex items-center p-6 pt-0; } /* Badge styles */ .badge { @apply inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2; @apply border-transparent bg-secondary text-secondary-foreground; } .badge:hover { background-color: var(--secondary-hover); } /* Alert styles */ .alert { @apply relative w-full rounded-lg border px-4 py-3 text-sm; @apply border-border text-foreground; } .alert h3 { @apply mb-1 font-medium leading-none tracking-tight; } .alert section { @apply leading-relaxed; } /* Table styles */ .table { @apply w-full caption-bottom text-sm; } .table thead { @apply border-b; } .table tbody tr:last-child { @apply border-0; } .table tr { @apply border-b transition-colors; } .table tr:hover { background-color: var(--muted-hover); } .table th { @apply h-10 px-2 text-left align-middle font-medium text-muted-foreground; } .table td { @apply p-2 align-middle; } /* Code and pre styles */ pre { @apply rounded-lg border bg-muted p-4 text-sm overflow-x-auto; } code { @apply relative rounded bg-muted px-1 py-0.5 font-mono text-sm; } pre code { @apply bg-transparent p-0; } }