/* CSVPro Modern UI — drop-in theme layer. Functionality untouched; visuals only. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap");

:root {
  --background: 230 33% 98%;
  --foreground: 232 38% 11%;
  --card: 0 0% 100%;
  --card-foreground: 232 38% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 232 38% 11%;
  --primary: 245 83% 60%;
  --primary-foreground: 0 0% 100%;
  --secondary: 230 30% 94%;
  --secondary-foreground: 232 30% 18%;
  --muted: 230 28% 95%;
  --muted-foreground: 230 12% 42%;
  --accent: 245 90% 96%;
  --accent-foreground: 245 70% 45%;
  --destructive: 0 78% 56%;
  --border: 230 24% 89%;
  --input: 230 24% 89%;
  --ring: 245 83% 60%;
  --radius: 0.875rem;
  --sidebar-background: 230 40% 99%;
  --sidebar-primary: 245 83% 60%;
  --sidebar-accent: 245 90% 96%;
  --sidebar-accent-foreground: 245 70% 45%;
  --sidebar-border: 230 24% 91%;
  --mu-shadow-sm: 0 1px 2px hsl(232 40% 20% / .05), 0 1px 3px hsl(232 40% 20% / .06);
  --mu-shadow-md: 0 8px 24px -8px hsl(245 60% 30% / .18);
  --mu-glow: 0 10px 30px -10px hsl(245 83% 60% / .55);
}

.dark {
  --background: 228 38% 5%;
  --foreground: 225 30% 94%;
  --card: 228 30% 9%;
  --card-foreground: 225 30% 94%;
  --popover: 228 30% 9%;
  --popover-foreground: 225 30% 94%;
  --primary: 249 90% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 228 24% 14%;
  --secondary-foreground: 225 25% 90%;
  --muted: 228 24% 13%;
  --muted-foreground: 225 14% 62%;
  --accent: 249 45% 18%;
  --accent-foreground: 249 90% 82%;
  --destructive: 0 70% 52%;
  --border: 228 22% 16%;
  --input: 228 22% 16%;
  --ring: 249 90% 68%;
  --sidebar-background: 228 40% 4%;
  --sidebar-primary: 249 90% 68%;
  --sidebar-accent: 228 24% 12%;
  --sidebar-accent-foreground: 225 25% 90%;
  --sidebar-border: 228 22% 12%;
  --mu-shadow-sm: 0 1px 2px #0006;
  --mu-shadow-md: 0 12px 32px -12px #000a;
  --mu-glow: 0 10px 34px -10px hsl(249 90% 68% / .6);
}

html { scroll-behavior: smooth; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
  background-color: hsl(var(--background)) !important;
  background-image:
    radial-gradient(900px 420px at 12% -8%, hsl(var(--primary) / .10), transparent 60%),
    radial-gradient(760px 380px at 92% 0%, hsl(280 80% 60% / .07), transparent 60%);
  background-attachment: fixed;
}
h1, h2, h3, h4 { font-family: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; letter-spacing: -0.02em; }
::selection { background: hsl(var(--primary) / .28); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: hsl(var(--muted-foreground) / .35) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / .3); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); background-clip: content-box; border: 2px solid transparent; }

/* Cards & surfaces */
[class*="bg-card"], .shadow-sm, .shadow {
  border-color: hsl(var(--border));
}
[class*="rounded-lg"][class*="border"][class*="bg-card"],
[class*="rounded-xl"][class*="border"][class*="bg-card"] {
  box-shadow: var(--mu-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[class*="rounded-lg"][class*="border"][class*="bg-card"]:hover,
[class*="rounded-xl"][class*="border"][class*="bg-card"]:hover {
  box-shadow: var(--mu-shadow-md);
  border-color: hsl(var(--primary) / .28);
}
[class*="backdrop-blur"] { -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); }

/* Buttons */
button, a[class*="rounded"], [role="button"] { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease, border-color .2s ease; }
button:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.bg-primary {
  background-image: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(275 82% 62%) 100%);
}
button.bg-primary:hover:not(:disabled), a.bg-primary:hover { box-shadow: var(--mu-glow); filter: brightness(1.06); transform: translateY(-1px); }
button:disabled { opacity: .55; }

/* Inputs */
input, textarea, select, [role="combobox"] {
  border-radius: calc(var(--radius) - 2px);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, [role="combobox"]:focus-visible {
  outline: none !important;
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 4px hsl(var(--primary) / .16) !important;
}
:focus-visible { outline-color: hsl(var(--ring)); }

/* Tables */
table { border-collapse: separate; border-spacing: 0; }
thead th, th { font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: hsl(var(--muted-foreground)); }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background-color: hsl(var(--primary) / .05); }

/* Badges, tabs, dialogs, menus */
[class*="rounded-full"][class*="border"] { backdrop-filter: blur(6px); }
[role="tablist"] { border-radius: calc(var(--radius) + 2px); padding: 4px; }
[role="tab"] { border-radius: calc(var(--radius) - 2px); font-weight: 500; }
[role="tab"][data-state="active"] { box-shadow: var(--mu-shadow-sm); }
[role="dialog"], [role="menu"], [data-radix-popper-content-wrapper] > div {
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 24px 60px -20px #0009, 0 0 0 1px hsl(var(--border));
}
[data-state="open"][class*="bg-black"], [class*="bg-black/80"] { backdrop-filter: blur(6px); }
img { image-rendering: auto; }

/* Progress */
[role="progressbar"] { border-radius: 999px; overflow: hidden; }
[role="progressbar"] > div { background-image: linear-gradient(90deg, hsl(var(--primary)), hsl(275 82% 62%)); }

/* Motion */
#root > * { animation: mu-fade .4s ease both; }
@keyframes mu-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}