/*
  Personal UI polish for New API.
  This file is injected by Nginx and does not modify the official Docker image.
*/

:root {
  --background: oklch(0.992 0.003 250);
  --foreground: oklch(0.19 0.025 258);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.025 258);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.025 258);
  --primary: oklch(0.54 0.13 221);
  --primary-foreground: oklch(0.99 0.005 250);
  --secondary: oklch(0.965 0.012 238);
  --secondary-foreground: oklch(0.25 0.04 248);
  --muted: oklch(0.962 0.009 250);
  --muted-foreground: oklch(0.48 0.035 255);
  --accent: oklch(0.94 0.035 200);
  --accent-foreground: oklch(0.24 0.045 230);
  --border: oklch(0.91 0.012 252);
  --input: oklch(0.91 0.012 252);
  --ring: oklch(0.61 0.12 221);
  --chart-1: oklch(0.62 0.15 221);
  --chart-2: oklch(0.64 0.13 164);
  --chart-3: oklch(0.72 0.16 74);
  --chart-4: oklch(0.63 0.16 298);
  --chart-5: oklch(0.64 0.18 24);
  --radius: 0.5rem;
  --sidebar: oklch(0.978 0.008 250);
  --sidebar-foreground: oklch(0.22 0.03 258);
  --sidebar-accent: oklch(0.935 0.028 210);
  --sidebar-accent-foreground: oklch(0.24 0.045 230);
  --sidebar-border: oklch(0.9 0.012 252);
}

.dark {
  --background: oklch(0.22 0.016 258);
  --foreground: oklch(0.91 0.012 252);
  --card: oklch(0.255 0.017 258);
  --card-foreground: oklch(0.91 0.012 252);
  --popover: oklch(0.275 0.018 258);
  --popover-foreground: oklch(0.91 0.012 252);
  --primary: oklch(0.72 0.12 221);
  --primary-foreground: oklch(0.16 0.02 258);
  --secondary: oklch(0.31 0.018 258);
  --secondary-foreground: oklch(0.9 0.012 252);
  --muted: oklch(0.31 0.018 258);
  --muted-foreground: oklch(0.72 0.018 252);
  --accent: oklch(0.34 0.04 210);
  --accent-foreground: oklch(0.92 0.012 252);
  --border: oklch(0.37 0.018 258);
  --input: oklch(0.39 0.018 258);
  --ring: oklch(0.72 0.12 221);
  --sidebar: oklch(0.235 0.017 258);
  --sidebar-foreground: oklch(0.88 0.014 252);
  --sidebar-accent: oklch(0.325 0.028 218);
  --sidebar-accent-foreground: oklch(0.93 0.012 252);
  --sidebar-border: oklch(0.35 0.018 258);
}

html {
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in oklch, var(--primary) 8%, transparent) 0, transparent 30rem),
    var(--background) !important;
}

[data-slot='sidebar'],
[data-sidebar='sidebar'] {
  border-right-color: color-mix(in oklch, var(--sidebar-border) 82%, transparent) !important;
}

[data-slot='card'] {
  border-color: color-mix(in oklch, var(--border) 86%, transparent) !important;
  box-shadow:
    0 1px 2px rgb(15 23 42 / 0.04),
    0 8px 24px rgb(15 23 42 / 0.035);
}

.dark [data-slot='card'] {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.18),
    0 12px 30px rgb(0 0 0 / 0.22);
}

[data-slot='table'] thead tr {
  background: color-mix(in oklch, var(--muted) 70%, transparent);
}

[data-slot='table'] th {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  font-weight: 650;
}

[data-slot='table'] td {
  font-variant-numeric: tabular-nums;
}

button,
[role='button'],
input,
select,
textarea,
[data-slot='card'] {
  letter-spacing: 0;
}

input,
select,
textarea {
  background: color-mix(in oklch, var(--background) 48%, var(--card)) !important;
}

button:not(:disabled),
[role='button']:not(:disabled) {
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease,
    border-color 120ms ease;
}

button:not(:disabled):active,
[role='button']:not(:disabled):active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  [data-slot='card'] {
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.035);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}