dockhand/app.css

@import "tailwindcss";
@import "tw-animate-css";

@source "../node_modules/layerchart/**/*.svelte";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--radius: 0.5rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);

	--color-background: hsl(var(--background));
	--color-foreground: hsl(var(--foreground));
	--color-card: hsl(var(--card));
	--color-card-foreground: hsl(var(--card-foreground));
	--color-popover: hsl(var(--popover));
	--color-popover-foreground: hsl(var(--popover-foreground));
	--color-primary: hsl(var(--primary));
	--color-primary-foreground: hsl(var(--primary-foreground));
	--color-secondary: hsl(var(--secondary));
	--color-secondary-foreground: hsl(var(--secondary-foreground));
	--color-muted: hsl(var(--muted));
	--color-muted-foreground: hsl(var(--muted-foreground));
	--color-accent: hsl(var(--accent));
	--color-accent-foreground: hsl(var(--accent-foreground));
	--color-destructive: hsl(var(--destructive));
	--color-destructive-foreground: hsl(var(--destructive-foreground));
	--color-border: hsl(var(--border));
	--color-input: hsl(var(--input));
	--color-ring: hsl(var(--ring));

	--color-sidebar: hsl(var(--sidebar-background));
	--color-sidebar-foreground: hsl(var(--sidebar-foreground));
	--color-sidebar-primary: hsl(var(--sidebar-primary));
	--color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
	--color-sidebar-accent: hsl(var(--sidebar-accent));
	--color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
	--color-sidebar-border: hsl(var(--sidebar-border));
	--color-sidebar-ring: hsl(var(--sidebar-ring));
}

/* Font size scaling - set dynamically via JavaScript */
html {
	font-size: calc(16px * var(--font-size-scale, 1));
}

/* Grid/table font size scaling - uses px to be independent of global font size */
.data-grid,
.data-grid th,
.data-grid td,
.data-grid span,
.data-grid div,
.data-grid p,
.data-grid button,
.data-grid code {
	font-size: calc(12px * var(--grid-font-size-scale, 1)) !important;
}

/* State badge - width scales with grid font size to stay consistent */
.state-badge {
	width: calc(70px * var(--grid-font-size-scale, 1));
	min-width: calc(70px * var(--grid-font-size-scale, 1));
	max-width: calc(70px * var(--grid-font-size-scale, 1));
	text-align: center;
}

/* State column - width scales with grid font size */
.data-grid th.state-col,
.data-grid td.state-col {
	width: calc(90px * var(--grid-font-size-scale, 1)) !important;
	min-width: calc(90px * var(--grid-font-size-scale, 1)) !important;
	max-width: calc(90px * var(--grid-font-size-scale, 1)) !important;
}

:root {
	--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--popover: 0 0% 100%;
	--popover-foreground: 222.2 84% 4.9%;
	--primary: 221.2 83.2% 53.3%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96.1%;
	--secondary-foreground: 222.2 47.4% 11.2%;
	--muted: 210 40% 96.1%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96.1%;
	--accent-foreground: 222.2 47.4% 11.2%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--input: 214.3 31.8% 91.4%;
	--ring: 221.2 83.2% 53.3%;

	--sidebar-background: 0 0% 98%;
	--sidebar-foreground: 240 5.3% 26.1%;
	--sidebar-primary: 240 5.9% 10%;
	--sidebar-primary-foreground: 0 0% 98%;
	--sidebar-accent: 240 4.8% 95.9%;
	--sidebar-accent-foreground: 240 5.9% 10%;
	--sidebar-border: 220 13% 91%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
	--background: 214.4 61.4% 17.3%;
	--foreground: 210 40% 98%;
	--card: 214.4 61.4% 17.3%;
	--card-foreground: 210 40% 98%;
	--popover: 214.4 61.4% 17.3%;
	--popover-foreground: 210 40% 98%;
	--primary: 217.2 91.2% 59.8%;
	--primary-foreground: 222.2 47.4% 11.2%;
	--secondary: 214 50% 23%;
	--secondary-foreground: 210 40% 98%;
	--muted: 214 50% 23%;
	--muted-foreground: 215 20.2% 65.1%;
	--accent: 214 50% 23%;
	--accent-foreground: 210 40% 98%;
	--destructive: 0 91% 71%;
	--destructive-foreground: 210 40% 98%;
	--border: 214 50% 25%;
	--input: 214 50% 25%;
	--ring: 224.3 76.3% 48%;

	--sidebar-background: 214.4 50% 18%;
	--sidebar-foreground: 210 40% 98%;
	--sidebar-primary: 217.2 91.2% 59.8%;
	--sidebar-primary-foreground: 222.2 47.4% 11.2%;
	--sidebar-accent: 214 50% 20%;
	--sidebar-accent-foreground: 210 40% 98%;
	--sidebar-border: 214 50% 22%;
	--sidebar-ring: 217.2 91.2% 59.8%;
}

/* =============================================================================
   LIGHT THEMES - Official color palettes from theme specifications
   ============================================================================= */

/* Catppuccin Latte - https://catppuccin.com/palette/ */
.theme-light-catppuccin {
	--background: 220 23% 95%; /* #eff1f5 Base */
	--foreground: 234 16% 35%; /* #4c4f69 Text */
	--card: 220 21% 98%; /* #fffaf3 Surface */
	--card-foreground: 234 16% 35%;
	--popover: 220 21% 98%;
	--popover-foreground: 234 16% 35%;
	--primary: 266 85% 58%; /* #8839ef Mauve */
	--primary-foreground: 220 23% 98%;
	--secondary: 223 16% 84%; /* #ccd0da Surface0 */
	--secondary-foreground: 234 16% 35%;
	--muted: 223 16% 84%;
	--muted-foreground: 233 10% 47%; /* #6c6f85 Subtext0 */
	--accent: 220 22% 87%;
	--accent-foreground: 234 16% 35%;
	--destructive: 347 87% 44%; /* #d20f39 Red */
	--destructive-foreground: 220 23% 98%;
	--border: 223 16% 83%;
	--input: 223 16% 83%;
	--ring: 266 85% 58%;
	--sidebar-background: 227 15% 90%; /* #e6e9ef Mantle */
	--sidebar-foreground: 234 16% 35%;
	--sidebar-primary: 266 85% 58%;
	--sidebar-primary-foreground: 220 23% 98%;
	--sidebar-accent: 220 22% 85%;
	--sidebar-accent-foreground: 234 16% 35%;
	--sidebar-border: 223 16% 80%;
	--sidebar-ring: 266 85% 58%;
}

/* Rose Pine Dawn - https://rosepinetheme.com/palette/ */
.theme-light-rose-pine {
	--background: 32 57% 95%; /* #faf4ed Base */
	--foreground: 248 19% 40%; /* #575279 Text */
	--card: 39 100% 98%; /* #fffaf3 Surface */
	--card-foreground: 248 19% 40%;
	--popover: 39 100% 98%;
	--popover-foreground: 248 19% 40%;
	--primary: 267 22% 57%; /* #907aa9 Iris */
	--primary-foreground: 32 57% 95%;
	--secondary: 35 32% 92%; /* #f2e9e1 Overlay */
	--secondary-foreground: 248 19% 40%;
	--muted: 35 32% 92%;
	--muted-foreground: 250 12% 49%; /* #797593 Subtle */
	--accent: 33 35% 89%;
	--accent-foreground: 248 19% 40%;
	--destructive: 343 35% 55%; /* #b4637a Love */
	--destructive-foreground: 32 57% 95%;
	--border: 33 24% 86%;
	--input: 33 24% 86%;
	--ring: 267 22% 57%;
	--sidebar-background: 30 27% 94%; /* #f4ede8 Highlight Low */
	--sidebar-foreground: 248 19% 40%;
	--sidebar-primary: 267 22% 57%;
	--sidebar-primary-foreground: 32 57% 95%;
	--sidebar-accent: 33 24% 88%;
	--sidebar-accent-foreground: 248 19% 40%;
	--sidebar-border: 33 24% 84%;
	--sidebar-ring: 267 22% 57%;
}

/* Nord Light - https://www.nordtheme.com/ */
.theme-light-nord {
	--background: 219 28% 96%; /* #eceff4 Nord6 */
	--foreground: 220 16% 22%; /* #2e3440 Nord0 */
	--card: 218 27% 94%; /* #e5e9f0 Nord5 */
	--card-foreground: 220 16% 22%;
	--popover: 218 27% 94%;
	--popover-foreground: 220 16% 22%;
	--primary: 213 32% 52%; /* #5e81ac Nord10 */
	--primary-foreground: 219 28% 96%;
	--secondary: 218 27% 88%; /* #d8dee9 Nord4 */
	--secondary-foreground: 220 16% 22%;
	--muted: 218 27% 88%;
	--muted-foreground: 220 17% 32%; /* #434c5e Nord2 */
	--accent: 218 27% 84%;
	--accent-foreground: 220 16% 22%;
	--destructive: 354 42% 56%; /* #bf616a Nord11 */
	--destructive-foreground: 219 28% 96%;
	--border: 218 27% 85%;
	--input: 218 27% 85%;
	--ring: 213 32% 52%;
	--sidebar-background: 218 27% 92%;
	--sidebar-foreground: 220 16% 22%;
	--sidebar-primary: 213 32% 52%;
	--sidebar-primary-foreground: 219 28% 96%;
	--sidebar-accent: 218 27% 86%;
	--sidebar-accent-foreground: 220 16% 22%;
	--sidebar-border: 218 27% 83%;
	--sidebar-ring: 213 32% 52%;
}

/* Solarized Light - https://ethanschoonover.com/solarized/ */
.theme-light-solarized {
	--background: 44 87% 94%; /* #fdf6e3 Base3 */
	--foreground: 192 81% 14%; /* #073642 Base02 */
	--card: 44 87% 97%;
	--card-foreground: 192 81% 14%;
	--popover: 44 87% 97%;
	--popover-foreground: 192 81% 14%;
	--primary: 205 69% 49%; /* #268bd2 Blue */
	--primary-foreground: 44 87% 97%;
	--secondary: 46 42% 88%; /* #eee8d5 Base2 */
	--secondary-foreground: 192 81% 14%;
	--muted: 46 42% 88%;
	--muted-foreground: 194 14% 40%; /* #657b83 Base00 */
	--accent: 46 42% 84%;
	--accent-foreground: 192 81% 14%;
	--destructive: 1 71% 52%; /* #dc322f Red */
	--destructive-foreground: 44 87% 97%;
	--border: 46 42% 84%;
	--input: 46 42% 84%;
	--ring: 205 69% 49%;
	--sidebar-background: 46 42% 90%;
	--sidebar-foreground: 192 81% 14%;
	--sidebar-primary: 205 69% 49%;
	--sidebar-primary-foreground: 44 87% 97%;
	--sidebar-accent: 46 42% 82%;
	--sidebar-accent-foreground: 192 81% 14%;
	--sidebar-border: 46 42% 80%;
	--sidebar-ring: 205 69% 49%;
}

/* Gruvbox Light - https://github.com/morhetz/gruvbox */
.theme-light-gruvbox {
	--background: 48 87% 94%; /* #fbf1c7 bg0 */
	--foreground: 0 0% 16%; /* #282828 fg0 */
	--card: 49 87% 96%;
	--card-foreground: 0 0% 16%;
	--popover: 49 87% 96%;
	--popover-foreground: 0 0% 16%;
	--primary: 189 48% 40%; /* #458588 Aqua */
	--primary-foreground: 48 87% 94%;
	--secondary: 48 45% 85%; /* #ebdbb2 bg1 */
	--secondary-foreground: 0 0% 16%;
	--muted: 48 45% 85%;
	--muted-foreground: 0 0% 36%;
	--accent: 48 45% 80%;
	--accent-foreground: 0 0% 16%;
	--destructive: 6 96% 40%; /* #cc241d Red */
	--destructive-foreground: 48 87% 94%;
	--border: 48 45% 80%;
	--input: 48 45% 80%;
	--ring: 189 48% 40%;
	--sidebar-background: 48 45% 90%;
	--sidebar-foreground: 0 0% 16%;
	--sidebar-primary: 189 48% 40%;
	--sidebar-primary-foreground: 48 87% 94%;
	--sidebar-accent: 48 45% 82%;
	--sidebar-accent-foreground: 0 0% 16%;
	--sidebar-border: 48 45% 78%;
	--sidebar-ring: 189 48% 40%;
}

/* Alucard (Dracula Light) - https://draculatheme.com/spec */
.theme-light-alucard {
	--background: 47 100% 96%; /* #fffbeb Background */
	--foreground: 0 0% 12%; /* #1f1f1f Foreground */
	--card: 47 100% 98%;
	--card-foreground: 0 0% 12%;
	--popover: 47 100% 98%;
	--popover-foreground: 0 0% 12%;
	--primary: 253 63% 54%; /* #644ac9 Purple */
	--primary-foreground: 47 100% 96%;
	--secondary: 240 13% 87%; /* #cfcfde Selection */
	--secondary-foreground: 0 0% 12%;
	--muted: 240 13% 87%;
	--muted-foreground: 45 17% 36%; /* #6c664b Comment */
	--accent: 240 13% 82%;
	--accent-foreground: 0 0% 12%;
	--destructive: 8 71% 48%; /* #cb3a2a Red */
	--destructive-foreground: 47 100% 96%;
	--border: 240 13% 82%;
	--input: 240 13% 82%;
	--ring: 253 63% 54%;
	--sidebar-background: 47 100% 93%;
	--sidebar-foreground: 0 0% 12%;
	--sidebar-primary: 253 63% 54%;
	--sidebar-primary-foreground: 47 100% 96%;
	--sidebar-accent: 240 13% 85%;
	--sidebar-accent-foreground: 0 0% 12%;
	--sidebar-border: 240 13% 80%;
	--sidebar-ring: 253 63% 54%;
}

/* GitHub Light - https://primer.style/primitives/colors */
.theme-light-github {
	--background: 210 17% 98%; /* #f6f8fa */
	--foreground: 210 12% 16%; /* #24292f */
	--card: 0 0% 100%; /* #ffffff */
	--card-foreground: 210 12% 16%;
	--popover: 0 0% 100%;
	--popover-foreground: 210 12% 16%;
	--primary: 212 92% 45%; /* #0969da */
	--primary-foreground: 0 0% 100%;
	--secondary: 210 14% 93%; /* #eaeef2 */
	--secondary-foreground: 210 12% 16%;
	--muted: 210 14% 93%;
	--muted-foreground: 210 9% 40%; /* #57606a */
	--accent: 210 14% 89%;
	--accent-foreground: 210 12% 16%;
	--destructive: 354 70% 44%; /* #cf222e */
	--destructive-foreground: 0 0% 100%;
	--border: 210 14% 89%;
	--input: 210 14% 89%;
	--ring: 212 92% 45%;
	--sidebar-background: 210 17% 95%;
	--sidebar-foreground: 210 12% 16%;
	--sidebar-primary: 212 92% 45%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 210 14% 91%;
	--sidebar-accent-foreground: 210 12% 16%;
	--sidebar-border: 210 14% 87%;
	--sidebar-ring: 212 92% 45%;
}

/* Material Light - https://material.io/design/color */
.theme-light-material {
	--background: 0 0% 98%; /* #fafafa */
	--foreground: 0 0% 13%; /* #212121 */
	--card: 0 0% 100%; /* #ffffff */
	--card-foreground: 0 0% 13%;
	--popover: 0 0% 100%;
	--popover-foreground: 0 0% 13%;
	--primary: 187 100% 42%; /* #00acc1 Cyan 600 */
	--primary-foreground: 0 0% 100%;
	--secondary: 0 0% 93%; /* #eeeeee */
	--secondary-foreground: 0 0% 13%;
	--muted: 0 0% 93%;
	--muted-foreground: 0 0% 46%; /* #757575 */
	--accent: 0 0% 88%;
	--accent-foreground: 0 0% 13%;
	--destructive: 4 90% 58%; /* #f44336 Red 500 */
	--destructive-foreground: 0 0% 100%;
	--border: 0 0% 88%;
	--input: 0 0% 88%;
	--ring: 187 100% 42%;
	--sidebar-background: 0 0% 96%;
	--sidebar-foreground: 0 0% 13%;
	--sidebar-primary: 187 100% 42%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 0 0% 90%;
	--sidebar-accent-foreground: 0 0% 13%;
	--sidebar-border: 0 0% 85%;
	--sidebar-ring: 187 100% 42%;
}

/* Atom One Light - https://github.com/atom/atom/tree/master/packages/one-light-syntax */
.theme-light-atom-one {
	--background: 230 8% 98%; /* #fafafa */
	--foreground: 230 8% 24%; /* #383a42 */
	--card: 0 0% 100%;
	--card-foreground: 230 8% 24%;
	--popover: 0 0% 100%;
	--popover-foreground: 230 8% 24%;
	--primary: 230 100% 66%; /* #4078f2 */
	--primary-foreground: 0 0% 100%;
	--secondary: 230 8% 93%; /* #e5e5e6 */
	--secondary-foreground: 230 8% 24%;
	--muted: 230 8% 93%;
	--muted-foreground: 230 4% 50%; /* #a0a1a7 */
	--accent: 230 8% 88%;
	--accent-foreground: 230 8% 24%;
	--destructive: 5 74% 59%; /* #e45649 */
	--destructive-foreground: 0 0% 100%;
	--border: 230 8% 88%;
	--input: 230 8% 88%;
	--ring: 230 100% 66%;
	--sidebar-background: 230 8% 95%;
	--sidebar-foreground: 230 8% 24%;
	--sidebar-primary: 230 100% 66%;
	--sidebar-primary-foreground: 0 0% 100%;
	--sidebar-accent: 230 8% 90%;
	--sidebar-accent-foreground: 230 8% 24%;
	--sidebar-border: 230 8% 85%;
	--sidebar-ring: 230 100% 66%;
}

/* =============================================================================
   DARK THEMES - Official color palettes from theme specifications
   ============================================================================= */

/* Catppuccin Mocha - https://catppuccin.com/palette/ */
.dark.theme-dark-catppuccin {
	--background: 240 21% 15%; /* #1e1e2e Base */
	--foreground: 226 64% 88%; /* #cdd6f4 Text */
	--card: 240 21% 17%; /* #313244 Surface0 */
	--card-foreground: 226 64% 88%;
	--popover: 240 21% 17%;
	--popover-foreground: 226 64% 88%;
	--primary: 267 84% 81%; /* #cba6f7 Mauve */
	--primary-foreground: 240 21% 15%;
	--secondary: 237 16% 23%; /* #313244 Surface0 */
	--secondary-foreground: 226 64% 88%;
	--muted: 237 16% 23%;
	--muted-foreground: 228 24% 72%; /* #a6adc8 Subtext0 */
	--accent: 240 21% 24%;
	--accent-foreground: 226 64% 88%;
	--destructive: 343 81% 75%; /* #f38ba8 Red */
	--destructive-foreground: 226 64% 88%;
	--border: 237 16% 25%;
	--input: 237 16% 25%;
	--ring: 267 84% 81%;
	--sidebar-background: 240 23% 9%; /* #11111b Crust */
	--sidebar-foreground: 226 64% 88%;
	--sidebar-primary: 267 84% 81%;
	--sidebar-primary-foreground: 240 21% 15%;
	--sidebar-accent: 240 21% 16%;
	--sidebar-accent-foreground: 226 64% 88%;
	--sidebar-border: 237 16% 20%;
	--sidebar-ring: 267 84% 81%;
}

/* Dracula - https://draculatheme.com/spec */
.dark.theme-dark-dracula {
	--background: 231 15% 18%; /* #282a36 Background */
	--foreground: 60 30% 96%; /* #f8f8f2 Foreground */
	--card: 232 14% 21%; /* #343746 Floating */
	--card-foreground: 60 30% 96%;
	--popover: 232 14% 21%;
	--popover-foreground: 60 30% 96%;
	--primary: 265 89% 78%; /* #bd93f9 Purple */
	--primary-foreground: 231 15% 18%;
	--secondary: 232 14% 31%; /* #44475a Current Line */
	--secondary-foreground: 60 30% 96%;
	--muted: 232 14% 31%;
	--muted-foreground: 225 14% 51%; /* #6272a4 Comment */
	--accent: 232 14% 28%;
	--accent-foreground: 60 30% 96%;
	--destructive: 0 100% 67%; /* #ff5555 Red */
	--destructive-foreground: 60 30% 96%;
	--border: 232 14% 28%;
	--input: 232 14% 28%;
	--ring: 265 89% 78%;
	--sidebar-background: 231 15% 14%; /* #191a21 Background Darker */
	--sidebar-foreground: 60 30% 96%;
	--sidebar-primary: 265 89% 78%;
	--sidebar-primary-foreground: 231 15% 18%;
	--sidebar-accent: 232 14% 22%;
	--sidebar-accent-foreground: 60 30% 96%;
	--sidebar-border: 232 14% 24%;
	--sidebar-ring: 265 89% 78%;
}

/* Rose Pine - https://rosepinetheme.com/palette/ */
.dark.theme-dark-rose-pine {
	--background: 249 22% 12%; /* #191724 Base */
	--foreground: 245 50% 91%; /* #e0def4 Text */
	--card: 247 23% 15%; /* #1f1d2e Surface */
	--card-foreground: 245 50% 91%;
	--popover: 247 23% 15%;
	--popover-foreground: 245 50% 91%;
	--primary: 267 57% 78%; /* #c4a7e7 Iris */
	--primary-foreground: 249 22% 12%;
	--secondary: 248 25% 18%; /* #26233a Overlay */
	--secondary-foreground: 245 50% 91%;
	--muted: 248 25% 18%;
	--muted-foreground: 249 12% 52%; /* #6e6a86 Muted */
	--accent: 248 25% 22%;
	--accent-foreground: 245 50% 91%;
	--destructive: 343 76% 68%; /* #eb6f92 Love */
	--destructive-foreground: 245 50% 91%;
	--border: 248 25% 22%;
	--input: 248 25% 22%;
	--ring: 267 57% 78%;
	--sidebar-background: 249 22% 10%;
	--sidebar-foreground: 245 50% 91%;
	--sidebar-primary: 267 57% 78%;
	--sidebar-primary-foreground: 249 22% 12%;
	--sidebar-accent: 247 23% 16%;
	--sidebar-accent-foreground: 245 50% 91%;
	--sidebar-border: 248 25% 18%;
	--sidebar-ring: 267 57% 78%;
}

/* Rose Pine Moon - https://rosepinetheme.com/palette/ */
.dark.theme-dark-rose-pine-moon {
	--background: 246 24% 17%; /* #232136 Base */
	--foreground: 245 50% 91%; /* #e0def4 Text */
	--card: 248 24% 20%; /* #2a273f Surface */
	--card-foreground: 245 50% 91%;
	--popover: 248 24% 20%;
	--popover-foreground: 245 50% 91%;
	--primary: 267 57% 78%; /* #c4a7e7 Iris */
	--primary-foreground: 246 24% 17%;
	--secondary: 249 22% 26%; /* #393552 Overlay */
	--secondary-foreground: 245 50% 91%;
	--muted: 249 22% 26%;
	--muted-foreground: 249 12% 52%; /* #6e6a86 Muted */
	--accent: 249 22% 30%;
	--accent-foreground: 245 50% 91%;
	--destructive: 343 76% 68%; /* #eb6f92 Love */
	--destructive-foreground: 245 50% 91%;
	--border: 249 22% 28%;
	--input: 249 22% 28%;
	--ring: 267 57% 78%;
	--sidebar-background: 246 24% 14%;
	--sidebar-foreground: 245 50% 91%;
	--sidebar-primary: 267 57% 78%;
	--sidebar-primary-foreground: 246 24% 17%;
	--sidebar-accent: 248 24% 21%;
	--sidebar-accent-foreground: 245 50% 91%;
	--sidebar-border: 249 22% 24%;
	--sidebar-ring: 267 57% 78%;
}

/* Tokyo Night - https://github.com/tokyo-night/tokyo-night-vscode-theme */
.dark.theme-dark-tokyo-night {
	--background: 235 21% 14%; /* #1a1b26 Background */
	--foreground: 227 16% 73%; /* #a9b1d6 Foreground */
	--card: 234 22% 17%; /* #24283b Storm Background */
	--card-foreground: 227 16% 73%;
	--popover: 234 22% 17%;
	--popover-foreground: 227 16% 73%;
	--primary: 220 91% 72%; /* #7aa2f7 Blue */
	--primary-foreground: 235 21% 14%;
	--secondary: 234 22% 22%;
	--secondary-foreground: 227 16% 73%;
	--muted: 234 22% 22%;
	--muted-foreground: 221 17% 52%; /* #565f89 Comment */
	--accent: 234 22% 26%;
	--accent-foreground: 227 16% 73%;
	--destructive: 348 86% 70%; /* #f7768e Red */
	--destructive-foreground: 227 16% 73%;
	--border: 234 22% 26%;
	--input: 234 22% 26%;
	--ring: 220 91% 72%;
	--sidebar-background: 235 21% 11%;
	--sidebar-foreground: 227 16% 73%;
	--sidebar-primary: 220 91% 72%;
	--sidebar-primary-foreground: 235 21% 14%;
	--sidebar-accent: 234 22% 18%;
	--sidebar-accent-foreground: 227 16% 73%;
	--sidebar-border: 234 22% 20%;
	--sidebar-ring: 220 91% 72%;
}

/* Nord Dark - https://www.nordtheme.com/ */
.dark.theme-dark-nord {
	--background: 220 16% 22%; /* #2e3440 Nord0 */
	--foreground: 219 28% 88%; /* #d8dee9 Nord4 */
	--card: 222 16% 26%; /* #3b4252 Nord1 */
	--card-foreground: 219 28% 88%;
	--popover: 222 16% 26%;
	--popover-foreground: 219 28% 88%;
	--primary: 210 34% 63%; /* #81a1c1 Nord9 */
	--primary-foreground: 220 16% 22%;
	--secondary: 220 17% 32%; /* #434c5e Nord2 */
	--secondary-foreground: 219 28% 88%;
	--muted: 220 17% 32%;
	--muted-foreground: 219 14% 64%; /* #8fbcbb Nord7 */
	--accent: 220 16% 36%;
	--accent-foreground: 219 28% 88%;
	--destructive: 354 42% 56%; /* #bf616a Nord11 */
	--destructive-foreground: 219 28% 88%;
	--border: 220 16% 30%;
	--input: 220 16% 30%;
	--ring: 210 34% 63%;
	--sidebar-background: 220 16% 18%;
	--sidebar-foreground: 219 28% 88%;
	--sidebar-primary: 210 34% 63%;
	--sidebar-primary-foreground: 220 16% 22%;
	--sidebar-accent: 222 16% 24%;
	--sidebar-accent-foreground: 219 28% 88%;
	--sidebar-border: 220 16% 26%;
	--sidebar-ring: 210 34% 63%;
}

/* One Dark - https://github.com/atom/one-dark-syntax */
.dark.theme-dark-one-dark {
	--background: 220 13% 18%; /* #282c34 Background */
	--foreground: 220 14% 71%; /* #abb2bf Foreground */
	--card: 220 13% 21%;
	--card-foreground: 220 14% 71%;
	--popover: 220 13% 21%;
	--popover-foreground: 220 14% 71%;
	--primary: 207 82% 66%; /* #61afef Blue */
	--primary-foreground: 220 13% 18%;
	--secondary: 220 13% 25%;
	--secondary-foreground: 220 14% 71%;
	--muted: 220 13% 25%;
	--muted-foreground: 220 9% 46%; /* #5c6370 Comment */
	--accent: 220 13% 28%;
	--accent-foreground: 220 14% 71%;
	--destructive: 355 65% 65%; /* #e06c75 Red */
	--destructive-foreground: 220 14% 71%;
	--border: 220 13% 28%;
	--input: 220 13% 28%;
	--ring: 207 82% 66%;
	--sidebar-background: 220 13% 15%;
	--sidebar-foreground: 220 14% 71%;
	--sidebar-primary: 207 82% 66%;
	--sidebar-primary-foreground: 220 13% 18%;
	--sidebar-accent: 220 13% 22%;
	--sidebar-accent-foreground: 220 14% 71%;
	--sidebar-border: 220 13% 24%;
	--sidebar-ring: 207 82% 66%;
}

/* Gruvbox Dark - https://github.com/morhetz/gruvbox */
.dark.theme-dark-gruvbox {
	--background: 0 0% 16%; /* #282828 bg0 */
	--foreground: 47 73% 85%; /* #ebdbb2 fg1 */
	--card: 10 6% 18%; /* #3c3836 bg1 */
	--card-foreground: 47 73% 85%;
	--popover: 10 6% 18%;
	--popover-foreground: 47 73% 85%;
	--primary: 61 66% 44%; /* #b8bb26 Green */
	--primary-foreground: 0 0% 16%;
	--secondary: 10 6% 22%; /* #504945 bg2 */
	--secondary-foreground: 47 73% 85%;
	--muted: 10 6% 22%;
	--muted-foreground: 36 33% 64%; /* #a89984 fg4 */
	--accent: 10 6% 26%;
	--accent-foreground: 47 73% 85%;
	--destructive: 0 73% 59%; /* #fb4934 Red */
	--destructive-foreground: 47 73% 85%;
	--border: 10 6% 26%;
	--input: 10 6% 26%;
	--ring: 61 66% 44%;
	--sidebar-background: 0 0% 13%; /* #1d2021 bg0_h */
	--sidebar-foreground: 47 73% 85%;
	--sidebar-primary: 61 66% 44%;
	--sidebar-primary-foreground: 0 0% 16%;
	--sidebar-accent: 10 6% 20%;
	--sidebar-accent-foreground: 47 73% 85%;
	--sidebar-border: 10 6% 22%;
	--sidebar-ring: 61 66% 44%;
}

/* Solarized Dark - https://ethanschoonover.com/solarized/ */
.dark.theme-dark-solarized {
	--background: 192 100% 11%; /* #002b36 Base03 */
	--foreground: 186 8% 55%; /* #839496 Base0 */
	--card: 192 81% 14%; /* #073642 Base02 */
	--card-foreground: 186 8% 55%;
	--popover: 192 81% 14%;
	--popover-foreground: 186 8% 55%;
	--primary: 205 69% 49%; /* #268bd2 Blue */
	--primary-foreground: 192 100% 11%;
	--secondary: 192 81% 18%;
	--secondary-foreground: 186 8% 55%;
	--muted: 192 81% 18%;
	--muted-foreground: 186 13% 40%; /* #657b83 Base00 */
	--accent: 192 81% 22%;
	--accent-foreground: 186 8% 55%;
	--destructive: 1 71% 52%; /* #dc322f Red */
	--destructive-foreground: 186 8% 55%;
	--border: 192 81% 22%;
	--input: 192 81% 22%;
	--ring: 205 69% 49%;
	--sidebar-background: 192 100% 9%;
	--sidebar-foreground: 186 8% 55%;
	--sidebar-primary: 205 69% 49%;
	--sidebar-primary-foreground: 192 100% 11%;
	--sidebar-accent: 192 81% 16%;
	--sidebar-accent-foreground: 186 8% 55%;
	--sidebar-border: 192 81% 18%;
	--sidebar-ring: 205 69% 49%;
}

/* Everforest Dark - https://github.com/sainnhe/everforest */
.dark.theme-dark-everforest {
	--background: 150 10% 16%; /* #2d353b bg0 */
	--foreground: 75 11% 77%; /* #d3c6aa fg */
	--card: 150 9% 18%; /* #343f44 bg1 */
	--card-foreground: 75 11% 77%;
	--popover: 150 9% 18%;
	--popover-foreground: 75 11% 77%;
	--primary: 93 37% 63%; /* #a7c080 Green */
	--primary-foreground: 150 10% 16%;
	--secondary: 150 9% 22%; /* #3d484d bg2 */
	--secondary-foreground: 75 11% 77%;
	--muted: 150 9% 22%;
	--muted-foreground: 75 6% 60%; /* #9da9a0 Grey1 */
	--accent: 150 9% 26%;
	--accent-foreground: 75 11% 77%;
	--destructive: 0 43% 63%; /* #e67e80 Red */
	--destructive-foreground: 75 11% 77%;
	--border: 150 9% 26%;
	--input: 150 9% 26%;
	--ring: 93 37% 63%;
	--sidebar-background: 150 10% 13%;
	--sidebar-foreground: 75 11% 77%;
	--sidebar-primary: 93 37% 63%;
	--sidebar-primary-foreground: 150 10% 16%;
	--sidebar-accent: 150 9% 19%;
	--sidebar-accent-foreground: 75 11% 77%;
	--sidebar-border: 150 9% 22%;
	--sidebar-ring: 93 37% 63%;
}

/* Kanagawa - https://github.com/rebelot/kanagawa.nvim */
.dark.theme-dark-kanagawa {
	--background: 225 17% 14%; /* #1f1f28 sumiInk1 */
	--foreground: 39 9% 80%; /* #dcd7ba fujiWhite */
	--card: 225 15% 17%; /* #2a2a37 sumiInk3 */
	--card-foreground: 39 9% 80%;
	--popover: 225 15% 17%;
	--popover-foreground: 39 9% 80%;
	--primary: 223 47% 67%; /* #7e9cd8 crystalBlue */
	--primary-foreground: 225 17% 14%;
	--secondary: 225 14% 21%; /* #363646 sumiInk4 */
	--secondary-foreground: 39 9% 80%;
	--muted: 225 14% 21%;
	--muted-foreground: 225 7% 52%; /* #727169 fujiGray */
	--accent: 225 14% 26%;
	--accent-foreground: 39 9% 80%;
	--destructive: 7 73% 66%; /* #e82424 samuraiRed */
	--destructive-foreground: 39 9% 80%;
	--border: 225 14% 26%;
	--input: 225 14% 26%;
	--ring: 223 47% 67%;
	--sidebar-background: 225 17% 11%;
	--sidebar-foreground: 39 9% 80%;
	--sidebar-primary: 223 47% 67%;
	--sidebar-primary-foreground: 225 17% 14%;
	--sidebar-accent: 225 15% 18%;
	--sidebar-accent-foreground: 39 9% 80%;
	--sidebar-border: 225 14% 22%;
	--sidebar-ring: 223 47% 67%;
}

/* Monokai - https://monokai.pro/spec */
.dark.theme-dark-monokai {
	--background: 70 8% 15%; /* #272822 */
	--foreground: 60 36% 96%; /* #f8f8f2 */
	--card: 70 8% 18%;
	--card-foreground: 60 36% 96%;
	--popover: 70 8% 18%;
	--popover-foreground: 60 36% 96%;
	--primary: 338 95% 56%; /* #f92672 Pink */
	--primary-foreground: 60 36% 96%;
	--secondary: 70 8% 22%;
	--secondary-foreground: 60 36% 96%;
	--muted: 70 8% 22%;
	--muted-foreground: 50 11% 53%; /* #75715e Comment */
	--accent: 70 8% 28%;
	--accent-foreground: 60 36% 96%;
	--destructive: 338 95% 56%;
	--destructive-foreground: 60 36% 96%;
	--border: 70 8% 25%;
	--input: 70 8% 25%;
	--ring: 338 95% 56%;
	--sidebar-background: 70 8% 11%;
	--sidebar-foreground: 60 36% 96%;
	--sidebar-primary: 338 95% 56%;
	--sidebar-primary-foreground: 60 36% 96%;
	--sidebar-accent: 70 8% 18%;
	--sidebar-accent-foreground: 60 36% 96%;
	--sidebar-border: 70 8% 20%;
	--sidebar-ring: 338 95% 56%;
}

/* Monokai Pro - https://monokai.pro/ */
.dark.theme-dark-monokai-pro {
	--background: 220 10% 18%; /* #2d2a2e */
	--foreground: 20 5% 90%; /* #fcfcfa */
	--card: 220 10% 21%;
	--card-foreground: 20 5% 90%;
	--popover: 220 10% 21%;
	--popover-foreground: 20 5% 90%;
	--primary: 349 100% 73%; /* #ff6188 */
	--primary-foreground: 220 10% 18%;
	--secondary: 220 10% 26%;
	--secondary-foreground: 20 5% 90%;
	--muted: 220 10% 26%;
	--muted-foreground: 220 6% 50%; /* #727072 */
	--accent: 220 10% 32%;
	--accent-foreground: 20 5% 90%;
	--destructive: 349 100% 73%;
	--destructive-foreground: 220 10% 18%;
	--border: 220 10% 28%;
	--input: 220 10% 28%;
	--ring: 349 100% 73%;
	--sidebar-background: 220 10% 14%;
	--sidebar-foreground: 20 5% 90%;
	--sidebar-primary: 349 100% 73%;
	--sidebar-primary-foreground: 220 10% 18%;
	--sidebar-accent: 220 10% 22%;
	--sidebar-accent-foreground: 20 5% 90%;
	--sidebar-border: 220 10% 24%;
	--sidebar-ring: 349 100% 73%;
}

/* Material Dark - https://material-theme.com/ */
.dark.theme-dark-material {
	--background: 200 19% 18%; /* #263238 Blue Grey 900 */
	--foreground: 0 0% 93%; /* #eeffff */
	--card: 200 18% 21%;
	--card-foreground: 0 0% 93%;
	--popover: 200 18% 21%;
	--popover-foreground: 0 0% 93%;
	--primary: 174 42% 65%; /* #80cbc4 Teal 200 */
	--primary-foreground: 200 19% 18%;
	--secondary: 200 18% 26%;
	--secondary-foreground: 0 0% 93%;
	--muted: 200 18% 26%;
	--muted-foreground: 199 18% 49%; /* #546e7a Blue Grey 500 */
	--accent: 200 18% 30%;
	--accent-foreground: 0 0% 93%;
	--destructive: 1 77% 55%; /* #f07178 */
	--destructive-foreground: 0 0% 93%;
	--border: 200 18% 28%;
	--input: 200 18% 28%;
	--ring: 174 42% 65%;
	--sidebar-background: 200 19% 14%;
	--sidebar-foreground: 0 0% 93%;
	--sidebar-primary: 174 42% 65%;
	--sidebar-primary-foreground: 200 19% 18%;
	--sidebar-accent: 200 18% 22%;
	--sidebar-accent-foreground: 0 0% 93%;
	--sidebar-border: 200 18% 24%;
	--sidebar-ring: 174 42% 65%;
}

/* Palenight - https://github.com/whizkydee/vscode-palenight-theme */
.dark.theme-dark-palenight {
	--background: 229 27% 20%; /* #292d3e */
	--foreground: 229 35% 88%; /* #bfc7d5 */
	--card: 229 26% 24%;
	--card-foreground: 229 35% 88%;
	--popover: 229 26% 24%;
	--popover-foreground: 229 35% 88%;
	--primary: 286 60% 67%; /* #c792ea Purple */
	--primary-foreground: 229 27% 20%;
	--secondary: 229 24% 30%;
	--secondary-foreground: 229 35% 88%;
	--muted: 229 24% 30%;
	--muted-foreground: 229 20% 50%; /* #676e95 */
	--accent: 229 24% 35%;
	--accent-foreground: 229 35% 88%;
	--destructive: 355 65% 65%; /* #f07178 */
	--destructive-foreground: 229 35% 88%;
	--border: 229 24% 32%;
	--input: 229 24% 32%;
	--ring: 286 60% 67%;
	--sidebar-background: 229 27% 16%;
	--sidebar-foreground: 229 35% 88%;
	--sidebar-primary: 286 60% 67%;
	--sidebar-primary-foreground: 229 27% 20%;
	--sidebar-accent: 229 26% 26%;
	--sidebar-accent-foreground: 229 35% 88%;
	--sidebar-border: 229 24% 28%;
	--sidebar-ring: 286 60% 67%;
}

/* GitHub Dark - https://primer.style/primitives/colors */
.dark.theme-dark-github {
	--background: 215 21% 11%; /* #0d1117 */
	--foreground: 210 17% 82%; /* #c9d1d9 */
	--card: 215 19% 14%; /* #161b22 */
	--card-foreground: 210 17% 82%;
	--popover: 215 19% 14%;
	--popover-foreground: 210 17% 82%;
	--primary: 212 100% 67%; /* #58a6ff */
	--primary-foreground: 215 21% 11%;
	--secondary: 215 18% 18%;
	--secondary-foreground: 210 17% 82%;
	--muted: 215 18% 18%;
	--muted-foreground: 215 13% 47%; /* #8b949e */
	--accent: 215 18% 22%;
	--accent-foreground: 210 17% 82%;
	--destructive: 356 72% 65%; /* #f85149 */
	--destructive-foreground: 210 17% 82%;
	--border: 215 18% 20%;
	--input: 215 18% 20%;
	--ring: 212 100% 67%;
	--sidebar-background: 215 21% 8%;
	--sidebar-foreground: 210 17% 82%;
	--sidebar-primary: 212 100% 67%;
	--sidebar-primary-foreground: 215 21% 11%;
	--sidebar-accent: 215 19% 15%;
	--sidebar-accent-foreground: 210 17% 82%;
	--sidebar-border: 215 18% 16%;
	--sidebar-ring: 212 100% 67%;
}

@layer base {
	* {
		@apply border-border;
	}
	body {
		@apply bg-background text-foreground;
		font-family: var(--font-sans);
	}
	button {
		cursor: pointer;
	}
}

/* Custom animations */
@keyframes speedy-entrance {
	0% {
		opacity: 0.3;
		transform: scale(0.9) translateY(-10px);
	}
	40% {
		opacity: 1;
		transform: scale(1.03) translateY(0);
	}
	70% {
		transform: scale(0.99);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes subtle-pulse {
	0%, 100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.02);
	}
}

@keyframes sparkle-slide {
	0% {
		opacity: 0;
		transform: translateX(-20px) scale(0);
	}
	20% {
		opacity: 1;
		transform: translateX(0) scale(1.2);
	}
	40% {
		transform: translateX(0) scale(1);
	}
	60% {
		opacity: 1;
		transform: translateX(0) scale(1);
	}
	80%, 100% {
		opacity: 0;
		transform: translateX(0) scale(0);
	}
}

.animate-speedy {
	animation: speedy-entrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards,
	           subtle-pulse 2s ease-in-out 0.8s infinite;
	position: relative;
}

/* Sparkle base styles */
.sparkle {
	position: absolute;
	color: rgba(251, 191, 36, 0.9);
	text-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
	animation: sparkle-slide 3s ease-out infinite;
	pointer-events: none;
	font-size: 12px;
	opacity: 0;
}

/* Position sparkles around the DOCKHAND text (bottom half of logo) - sequentially from left to right */
.sparkle-1 {
	bottom: 10px;
	left: 5%;
	font-size: 8px;
	animation-delay: 1s;
}

.sparkle-2 {
	bottom: 4px;
	left: 18%;
	font-size: 10px;
	animation-delay: 1.2s;
}

.sparkle-3 {
	bottom: 14px;
	left: 30%;
	font-size: 7px;
	animation-delay: 1.4s;
}

.sparkle-4 {
	bottom: 2px;
	left: 42%;
	font-size: 11px;
	animation-delay: 1.6s;
}

.sparkle-5 {
	bottom: 8px;
	left: 52%;
	font-size: 9px;
	animation-delay: 1.8s;
}

.sparkle-6 {
	bottom: 16px;
	left: 65%;
	font-size: 6px;
	animation-delay: 2s;
}

.sparkle-7 {
	bottom: 6px;
	left: 78%;
	font-size: 10px;
	animation-delay: 2.2s;
}

.sparkle-8 {
	bottom: 12px;
	left: 90%;
	font-size: 8px;
	animation-delay: 2.4s;
}

/* Click to jump animations - 3 levels */
@keyframes jump-small {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	30% {
		transform: translateY(-10px) rotate(-2deg);
	}
	60% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes jump-medium {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	20% {
		transform: translateY(-20px) rotate(-3deg);
	}
	40% {
		transform: translateY(0) rotate(0deg);
	}
	60% {
		transform: translateY(-10px) rotate(2deg);
	}
	80% {
		transform: translateY(0) rotate(0deg);
	}
}

@keyframes jump-big {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
	}
	10% {
		transform: translateY(-30px) rotate(-5deg);
	}
	20% {
		transform: translateY(0) rotate(0deg);
	}
	30% {
		transform: translateY(-20px) rotate(5deg);
	}
	40% {
		transform: translateY(0) rotate(0deg);
	}
	50% {
		transform: translateY(-10px) rotate(-3deg);
	}
	60% {
		transform: translateY(0) rotate(0deg);
	}
}

.animate-speedy.jumping-0 {
	animation: jump-small 0.5s ease-out !important;
	cursor: pointer;
}

.animate-speedy.jumping-1 {
	animation: jump-medium 0.6s ease-out !important;
	cursor: pointer;
}

.animate-speedy.jumping-2 {
	animation: jump-big 0.8s ease-out !important;
	cursor: pointer;
}

@keyframes crazy-jump {
	0%, 100% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
	5% {
		transform: translateY(-50px) rotate(-15deg) scale(1.1);
	}
	10% {
		transform: translateY(0) rotate(10deg) scale(0.9);
	}
	15% {
		transform: translateY(-40px) rotate(20deg) scale(1.15);
	}
	20% {
		transform: translateY(0) rotate(-15deg) scale(0.85);
	}
	25% {
		transform: translateY(-35px) rotate(-25deg) scale(1.1);
	}
	30% {
		transform: translateY(0) rotate(15deg) scale(0.9);
	}
	40% {
		transform: translateY(-25px) rotate(10deg) scale(1.05);
	}
	50% {
		transform: translateY(0) rotate(-5deg) scale(0.95);
	}
	60% {
		transform: translateY(-15px) rotate(5deg) scale(1);
	}
	70% {
		transform: translateY(0) rotate(0deg) scale(1);
	}
}

.animate-speedy.crazy-jumping {
	animation: crazy-jump 1.2s ease-out !important;
	cursor: pointer;
}

.animate-speedy.clicked {
	animation: none;
}

.animate-speedy {
	cursor: pointer;
}

/* Easter egg popup */
.easter-egg-popup {
	position: absolute;
	top: calc(100% + 20px);
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(135deg, rgba(251, 191, 36, 0.95), rgba(245, 158, 11, 0.95));
	color: #1a1a1a;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	font-weight: 600;
	font-size: 0.85rem;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 20px rgba(251, 191, 36, 0.3);
	z-index: 9999;
	animation: popup-jump 0.5s ease-out;
}

.easter-egg-popup::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(251, 191, 36, 0.95);
}

@keyframes popup-jump {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(-20px) scale(0.5);
	}
	50% {
		transform: translateX(-50%) translateY(10px) scale(1.1);
	}
	70% {
		transform: translateX(-50%) translateY(-5px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0) scale(1);
	}
}

/* Tagline text styling */
.tagline-text {
	min-height: 1.5em;
}

@keyframes tagline-zoom-in {
	0% {
		opacity: 0;
		transform: scale(1.8);
		filter: blur(4px);
	}
	30% {
		opacity: 1;
		transform: scale(1.3);
		filter: blur(1px);
	}
	60% {
		transform: scale(0.95);
		filter: blur(0);
	}
	80% {
		transform: scale(1.02);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}

.tagline-zoom {
	animation: tagline-zoom-in 0.5s ease-out;
}

/* Stat box styling for About page */
.stat-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.75rem 0.5rem;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, hsl(var(--muted) / 0.3), hsl(var(--muted) / 0.5));
	transition: all 0.2s ease;
}

.stat-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}

.stat-icon-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
	margin-bottom: 0.5rem;
}

.stat-box-blue:hover {
	background: linear-gradient(135deg, rgb(59 130 246 / 0.08), rgb(59 130 246 / 0.15));
}

.stat-box-cyan:hover {
	background: linear-gradient(135deg, rgb(6 182 212 / 0.08), rgb(6 182 212 / 0.15));
}

.stat-box-purple:hover {
	background: linear-gradient(135deg, rgb(168 85 247 / 0.08), rgb(168 85 247 / 0.15));
}

.stat-box-green:hover {
	background: linear-gradient(135deg, rgb(34 197 94 / 0.08), rgb(34 197 94 / 0.15));
}

.stat-box-orange:hover {
	background: linear-gradient(135deg, rgb(249 115 22 / 0.08), rgb(249 115 22 / 0.15));
}

.stat-box-amber:hover {
	background: linear-gradient(135deg, rgb(245 158 11 / 0.08), rgb(245 158 11 / 0.15));
}

/* Custom text size for very small labels (10px) */
@layer utilities {
	.text-2xs {
		font-size: 10px;
		line-height: 14px;
	}

	/* Icon glow utilities - standard size (4px blur, 0.6 opacity) */
	.glow-green { filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.6)); }
	.glow-green-sm { filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5)); }
	.glow-amber { filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6)); }
	.glow-amber-sm { filter: drop-shadow(0 0 3px rgba(245, 158, 11, 0.5)); }
	.glow-blue { filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6)); }
	.glow-purple { filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.6)); }
	.glow-cyan { filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.6)); }
	.glow-sky { filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.6)); }
}

/* Improved warning colors for dark mode readability */
@layer utilities {
	/* Yellow warning text - brighter in dark mode */
	.dark .text-yellow-500 {
		color: rgb(253 224 71) !important; /* yellow-300 */
	}
	.dark .text-yellow-600 {
		color: rgb(250 204 21) !important; /* yellow-400 */
	}

	/* Amber warning text - brighter in dark mode */
	.dark .text-amber-500 {
		color: rgb(252 211 77) !important; /* amber-300 */
	}
	.dark .text-amber-600 {
		color: rgb(251 191 36) !important; /* amber-400 */
	}

	/* Orange warning text - brighter in dark mode */
	.dark .text-orange-500 {
		color: rgb(253 186 116) !important; /* orange-300 */
	}
	.dark .text-orange-600 {
		color: rgb(251 146 60) !important; /* orange-400 */
	}

	/* Red error text - brighter in dark mode */
	.dark .text-red-500 {
		color: rgb(254 202 202) !important; /* red-200 */
	}
	.dark .text-red-600 {
		color: rgb(252 165 165) !important; /* red-300 */
	}
}

/* Update available icon animation */
@keyframes bounce-once {
	0%, 100% {
		transform: scale(1);
	}
	25% {
		transform: scale(1.4);
	}
	50% {
		transform: scale(0.9);
	}
	75% {
		transform: scale(1.15);
	}
}

.animate-bounce-once {
	animation: bounce-once 0.6s ease-out;
}

/* CodeMirror selection - override theme defaults for dark mode */
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground,
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
	background-color: #3d4654 !important;
}

/* ============================================
   Data Grid - Sticky Columns & Column Resize
   ============================================ */

/* Container must have horizontal scroll */
.data-grid-wrapper {
	overflow-x: auto;
	position: relative;
}

/* Table uses fixed layout for resize to work */
/* min-width ensures table fills container; inline style overrides when calculated */
.data-grid {
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 100%;
}

/* Allow content to truncate with ellipsis when column is shrunk */
.data-grid td,
.data-grid th {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Columns marked with noTruncate should not be truncated */
.data-grid td.no-truncate,
.data-grid th.no-truncate {
	overflow: visible;
	text-overflow: clip;
}

/* Allow flex containers inside cells to shrink below content width */
.data-grid td .flex,
.data-grid th .flex {
	min-width: 0;
	overflow: hidden;
}

/* Select column (checkbox) - fixed width, don't grow, centered */
.data-grid th.select-col,
.data-grid td.select-col {
	width: 32px !important;
	min-width: 32px;
	max-width: 32px;
	text-align: center;
}

.data-grid th.select-col > *,
.data-grid td.select-col > * {
	margin: 0 auto;
}

/* Expand column - fixed width, no border, centered */
.data-grid th.expand-col,
.data-grid td.expand-col {
	width: 24px !important;
	min-width: 24px;
	max-width: 24px;
	border-right: none !important;
	text-align: center;
}

.data-grid th.expand-col > *,
.data-grid td.expand-col > * {
	margin: 0 auto;
}

/* Actions column - width controlled by DataGrid component */
.data-grid .actions-col {
	min-width: 150px;
}

/* Subtle cell borders */
.data-grid td {
	border-right: 1px solid hsl(var(--border) / 0.3);
	border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.data-grid th {
	border-right: 1px solid hsl(var(--border) / 0.3);
	border-bottom: 1px solid hsl(var(--border) / 0.5);
}

/* Remove right border from actions column */
.data-grid td.actions-col,
.data-grid th.actions-col {
	border-right: none;
}

/* Header cells need relative positioning for resize handles */
.data-grid th {
	position: relative;
}

/* Ensure non-sticky cells don't create stacking context */
.data-grid tbody td:not(.select-col):not(.actions-col) {
	position: static;
	z-index: auto;
}

/* Sticky select column (checkbox) - body cells */
.data-grid td.select-col {
	position: sticky;
	left: 0;
	z-index: 2;
}

/* Sticky actions column - body cells */
.data-grid td.actions-col {
	position: sticky;
	right: 0;
	z-index: 2;
}

/* Sticky header cells need higher z-index than body */
.data-grid th.select-col,
.data-grid th.actions-col {
	position: sticky;
	z-index: 12;
}

.data-grid th.select-col {
	left: 0;
}

.data-grid th.actions-col {
	right: 0;
}

/* Actions header extension - covers content on both sides */
.data-grid thead th.actions-col {
	/* Extend the cell visually to cover scrolling content */
	position: sticky;
	right: 0;
	z-index: 12;
	background: hsl(var(--muted));
	/* Use box-shadow to extend background in both directions */
	box-shadow:
		-20px 0 0 0 hsl(var(--muted)),  /* Left - covers scrolling headers */
		20px 0 0 0 hsl(var(--muted));   /* Right - covers gap to edge */
	border-top-right-radius: 0.5rem;
	/* Clip path allows shadows but keeps rounded corner */
	clip-path: inset(-1px -20px -1px -20px round 0 0.5rem 0 0);
}

/* Body cell backgrounds for sticky columns */
.data-grid td.select-col,
.data-grid td.actions-col {
	background: hsl(var(--background));
}

/* Header cell backgrounds for sticky columns (match header bg-muted) */
.data-grid thead th.select-col,
.data-grid thead th.actions-col {
	background: hsl(var(--muted));
}

/* Header row stays on top of everything */
.data-grid thead {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Header sticky columns need higher z-index */
.data-grid thead th.select-col,
.data-grid thead th.actions-col {
	z-index: 11;
}


/* Row hover - all cells same color (including sticky columns) */
.data-grid tbody tr:hover td,
.data-grid tbody tr:hover td.select-col,
.data-grid tbody tr:hover td.actions-col {
	background: hsl(var(--muted));
}

/* Selected row background - solid color using color-mix for sticky column compatibility */
.data-grid tbody tr.selected td,
.data-grid tbody tr.selected td.select-col,
.data-grid tbody tr.selected td.actions-col {
	background: color-mix(in srgb, hsl(var(--primary)) 10%, hsl(var(--background)));
}

/* Selected row hover - slightly stronger tint */
.data-grid tbody tr.selected:hover td,
.data-grid tbody tr.selected:hover td.select-col,
.data-grid tbody tr.selected:hover td.actions-col {
	background: color-mix(in srgb, hsl(var(--primary)) 15%, hsl(var(--background)));
}

/* Checkbox-selected row background - amber tint */
.data-grid tbody tr.checkbox-selected td,
.data-grid tbody tr.checkbox-selected td.select-col,
.data-grid tbody tr.checkbox-selected td.actions-col {
	background: color-mix(in srgb, #f59e0b 8%, hsl(var(--background)));
}

/* Checkbox-selected row hover */
.data-grid tbody tr.checkbox-selected:hover td,
.data-grid tbody tr.checkbox-selected:hover td.select-col,
.data-grid tbody tr.checkbox-selected:hover td.actions-col {
	background: color-mix(in srgb, #f59e0b 12%, hsl(var(--background)));
}

/* Row with expanded content below - subtle indicator */
.data-grid tbody tr.row-expanded td,
.data-grid tbody tr.row-expanded td.select-col,
.data-grid tbody tr.row-expanded td.actions-col {
	background: color-mix(in srgb, hsl(var(--muted)) 50%, hsl(var(--background)));
	border-bottom: none;
}

.data-grid tbody tr.row-expanded:hover td,
.data-grid tbody tr.row-expanded:hover td.select-col,
.data-grid tbody tr.row-expanded:hover td.actions-col {
	background: color-mix(in srgb, hsl(var(--muted)) 70%, hsl(var(--background)));
}

/* Expanded row - no background on td, let content control it */
.data-grid tbody tr.expanded-row td,
.data-grid tbody tr.expanded-row td.select-col,
.data-grid tbody tr.expanded-row td.actions-col {
	padding: 0;
	background: transparent;
	border-bottom: 1px solid hsl(var(--border));
	overflow: hidden;
}

.data-grid tbody tr.expanded-row:hover td,
.data-grid tbody tr.expanded-row:hover td.select-col,
.data-grid tbody tr.expanded-row:hover td.actions-col {
	background: transparent;
}

/* Nested grid styling (inside expanded rows) */
.data-grid.nested-grid {
	border: none;
	min-width: 0;
	width: auto;
}

.data-grid.nested-grid thead th {
	background: transparent !important;
	border-bottom: 1px solid hsl(var(--border) / 0.5);
	padding-top: 0.25rem !important;
	padding-bottom: 0.25rem !important;
}

.data-grid.nested-grid thead {
	background: transparent !important;
}

.data-grid.nested-grid thead th:first-child,
.data-grid.nested-grid thead th:last-child,
.data-grid.nested-grid thead th.actions-col {
	background: transparent !important;
	box-shadow: none !important;
	clip-path: none !important;
}

/* Nested grid first/last columns are NOT sticky - disable fixed sizing */
.data-grid.nested-grid td:first-child {
	width: unset !important;
	min-width: 0 !important;
	max-width: none !important;
	position: static !important;
}

/* Header cells still need relative for resize handles */
.data-grid.nested-grid th:first-child {
	width: unset !important;
	min-width: 0 !important;
	max-width: none !important;
}

.data-grid.nested-grid td:last-child {
	position: static !important;
}

.data-grid.nested-grid tbody td {
	background: transparent;
	border-right: none;
	border-bottom: 1px solid hsl(var(--border) / 0.3);
}

.data-grid.nested-grid tbody td:first-child,
.data-grid.nested-grid tbody td:last-child,
.data-grid.nested-grid tbody td.actions-col {
	background: transparent;
}

.data-grid.nested-grid tbody tr:hover td,
.data-grid.nested-grid tbody tr:hover td:first-child,
.data-grid.nested-grid tbody tr:hover td:last-child,
.data-grid.nested-grid tbody tr:hover td.actions-col {
	background: hsl(var(--muted) / 0.3);
}

/* Resize handle styling */
.resize-handle {
	position: absolute;
	top: 0;
	right: -2px;
	width: 5px;
	height: 100%;
	cursor: col-resize;
	background: transparent;
	z-index: 5;
}

.resize-handle:hover,
.resize-handle:active {
	background: hsl(var(--primary) / 0.4);
}

/* Left-side resize handle for fixed end columns */
.resize-handle-left {
	right: auto;
	left: -2px;
	z-index: 15;
}