@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap");

:root {
  --highlight: 191 74% 63%;
  --neutral: 214 16% 66%;
  --neutral-light: 214 22% 78%;
  --neutral-dark: 214 28% 16%;
  --background: 222 55% 6%;
  --foreground: 210 40% 98%;
  --card: 223 34% 10%;
  --card-foreground: 210 40% 98%;
  --popover: 223 28% 15%;
  --popover-foreground: 210 40% 98%;
  --primary: 211 92% 62%;
  --primary-foreground: 0 0% 98%;
  --secondary: 214 84% 50%;
  --secondary-foreground: 210 40% 92%;
  --muted: 223 28% 13%;
  --muted-foreground: 214 20% 78%;
  --accent: 223 24% 18%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 74% 52%;
  --destructive-foreground: 0 0% 98%;
  --border: 223 18% 26%;
  --input: 223 26% 16%;
  --ring: 211 92% 62%;
  --radius: 0.75rem;
  --success: 146 70% 42%;
  --warning: 38 92% 52%;
}

* {
  font-family: "Inter", sans-serif;
}

body {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(1200px 600px at -10% -20%, rgba(56, 189, 248, 0.05), transparent 60%),
    radial-gradient(1000px 500px at 110% -10%, rgba(16, 185, 129, 0.04), transparent 65%);
  color: hsl(var(--foreground));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

.from-blue-600 {
  --tw-gradient-from: hsl(var(--primary) / 0.35) !important;
}

.via-sky-500 {
  --tw-gradient-stops: var(--tw-gradient-from), hsl(199 80% 38% / 0.35), var(--tw-gradient-to) !important;
}

.to-emerald-400 {
  --tw-gradient-to: hsl(146 70% 35% / 0.35) !important;
}

.from-sky-600 {
  --tw-gradient-from: hsl(199 80% 36% / 0.4) !important;
}

.via-blue-600 {
  --tw-gradient-stops: var(--tw-gradient-from), hsl(211 85% 42% / 0.4), var(--tw-gradient-to) !important;
}

.to-indigo-600 {
  --tw-gradient-to: hsl(240 50% 38% / 0.4) !important;
}

.bg-white {
  background-color: hsl(var(--card)) !important;
}

.bg-gray-50 {
  background-color: hsl(var(--muted)) !important;
}

.bg-gray-100 {
  background-color: hsl(var(--accent)) !important;
}

.bg-gray-200,
.bg-gray-300 {
  background-color: hsl(var(--accent)) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
  color: hsl(var(--foreground)) !important;
}

.text-gray-600,
.text-gray-500 {
  color: hsl(var(--muted-foreground)) !important;
}

.text-gray-400 {
  color: hsl(214 18% 68%) !important;
}

.text-gray-300 {
  color: hsl(214 20% 74%) !important;
}

.border-gray-100,
.border-gray-200,
.border-gray-300 {
  border-color: hsl(var(--border)) !important;
}

.border,
.border-t,
.border-b,
.border-l,
.border-r {
  border-color: hsl(var(--border));
}

.shadow,
.shadow-md {
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.45) !important;
}

.shadow-lg {
  box-shadow: 0 20px 46px rgba(2, 6, 23, 0.55) !important;
}

table thead th {
  color: hsl(var(--muted-foreground)) !important;
}

table tbody tr:hover {
  background-color: hsl(var(--accent)) !important;
}

input,
select,
textarea {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

input::placeholder,
textarea::placeholder {
  color: hsl(var(--muted-foreground));
}

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: hsl(var(--border)) !important;
}

:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.6);
  outline-offset: 2px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: hsl(var(--ring)) !important;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.25);
}

.bg-blue-500,
.bg-blue-600 {
  background-color: hsl(var(--primary)) !important;
}

.bg-blue-700 {
  background-color: hsl(var(--secondary)) !important;
}

.text-blue-500,
.text-blue-600,
.text-blue-700 {
  color: hsl(var(--primary)) !important;
}

.text-blue-800 {
  color: hsl(var(--primary)) !important;
}

.text-blue-900 {
  color: hsl(var(--primary)) !important;
}

.text-slate-600,
.text-indigo-600,
.text-purple-600,
.text-rose-600,
.text-teal-600,
.text-cyan-600,
.text-sky-600,
.text-orange-600,
.text-lime-600 {
  color: hsl(var(--primary)) !important;
}

.text-slate-500,
.text-indigo-500,
.text-purple-500,
.text-rose-500,
.text-teal-500,
.text-cyan-500,
.text-sky-500,
.text-orange-500,
.text-lime-500 {
  color: hsl(var(--muted-foreground)) !important;
}

.bg-emerald-600 {
  background-color: hsl(var(--success)) !important;
}

.bg-emerald-700,
.bg-green-600 {
  background-color: hsl(146 70% 38%) !important;
}

.text-emerald-500,
.text-emerald-600,
.text-emerald-700 {
  color: hsl(var(--success)) !important;
}

.bg-emerald-50,
.bg-green-50 {
  background-color: hsl(var(--muted)) !important;
}

.bg-emerald-100,
.bg-green-100 {
  background-color: hsl(var(--accent)) !important;
}

.border-emerald-200,
.border-green-200 {
  border-color: hsl(var(--success) / 0.35) !important;
}

.text-green-600,
.text-green-700,
.text-green-800,
.text-green-900 {
  color: hsl(var(--success)) !important;
}

.bg-green-500 {
  background-color: hsl(var(--success)) !important;
}

.bg-blue-50 {
  background-color: hsl(var(--muted)) !important;
}

.bg-blue-100 {
  background-color: hsl(var(--accent)) !important;
}

.border-blue-200 {
  border-color: hsl(var(--primary) / 0.35) !important;
}

.bg-amber-50 {
  background-color: hsl(var(--muted)) !important;
}

.text-amber-600,
.text-amber-700,
.text-amber-800 {
  color: hsl(var(--warning)) !important;
}

.border-amber-200 {
  border-color: hsl(var(--warning) / 0.35) !important;
}

.bg-yellow-50 {
  background-color: hsl(var(--muted)) !important;
}

.bg-yellow-100 {
  background-color: hsl(var(--accent)) !important;
}

.text-yellow-800,
.text-yellow-900 {
  color: hsl(var(--warning)) !important;
}

.border-yellow-200 {
  border-color: hsl(var(--warning) / 0.35) !important;
}

.bg-red-50,
.bg-red-100 {
  background-color: hsl(var(--muted)) !important;
}

.bg-cyan-50,
.bg-sky-50,
.bg-indigo-50,
.bg-purple-50,
.bg-rose-50,
.bg-teal-50,
.bg-orange-50,
.bg-lime-50,
.bg-fuchsia-50,
.bg-pink-50,
.bg-slate-50,
.bg-zinc-50,
.bg-neutral-50,
.bg-stone-50 {
  background-color: hsl(var(--muted)) !important;
}

.bg-cyan-100,
.bg-sky-100,
.bg-indigo-100,
.bg-purple-100,
.bg-rose-100,
.bg-teal-100,
.bg-orange-100,
.bg-lime-100,
.bg-fuchsia-100,
.bg-pink-100,
.bg-slate-100,
.bg-zinc-100,
.bg-neutral-100,
.bg-stone-100 {
  background-color: hsl(var(--accent)) !important;
}

.hover\:bg-cyan-100:hover,
.hover\:bg-sky-100:hover,
.hover\:bg-indigo-100:hover,
.hover\:bg-purple-100:hover,
.hover\:bg-rose-100:hover,
.hover\:bg-teal-100:hover,
.hover\:bg-orange-100:hover,
.hover\:bg-lime-100:hover,
.hover\:bg-fuchsia-100:hover,
.hover\:bg-pink-100:hover,
.hover\:bg-slate-100:hover,
.hover\:bg-zinc-100:hover,
.hover\:bg-neutral-100:hover,
.hover\:bg-stone-100:hover,
.hover\:bg-blue-100:hover,
.hover\:bg-emerald-100:hover,
.hover\:bg-yellow-100:hover,
.hover\:bg-red-100:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-50:hover {
  background-color: hsl(var(--accent)) !important;
}

.border-cyan-200,
.border-sky-200,
.border-indigo-200,
.border-purple-200,
.border-rose-200,
.border-teal-200,
.border-orange-200,
.border-lime-200,
.border-fuchsia-200,
.border-pink-200,
.border-slate-200,
.border-zinc-200,
.border-neutral-200,
.border-stone-200 {
  border-color: hsl(var(--border)) !important;
}

.text-red-700,
.text-red-800 {
  color: hsl(var(--destructive)) !important;
}

.border-red-200 {
  border-color: hsl(var(--destructive) / 0.35) !important;
}

.bg-red-500,
.bg-red-500 {
  background-color: hsl(var(--destructive)) !important;
}

.bg-red-600 {
  background-color: hsl(0 72% 48%) !important;
}

.ohif-panel {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
}

.ohif-muted {
  color: hsl(var(--muted-foreground));
}

.ohif-glow {
  box-shadow: 0 0 20px rgba(52, 140, 253, 0.25);
}

.ohif-chip {
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--foreground));
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
}

.ohif-divider {
  border-top: 1px solid hsl(var(--border));
}