@import 'tailwindcss';

@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

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

@theme inline {
    --font-sans:
        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    /* Brand Colors - Dark Blue #2B5DA7 */
    --color-blue-50: hsl(215 59% 95%);
    --color-blue-100: hsl(215 59% 90%);
    --color-blue-200: hsl(215 59% 80%);
    --color-blue-300: hsl(215 59% 70%);
    --color-blue-400: hsl(215 59% 60%);
    --color-blue-500: hsl(215 59% 50%);
    --color-blue-600: hsl(215 59% 41%);
    --color-blue-700: hsl(215 59% 35%);
    --color-blue-800: hsl(215 59% 30%);
    --color-blue-900: hsl(215 59% 25%);
    --color-blue-950: hsl(215 59% 15%);

    /* Brand Colors - Teal/Turquoise #2CBDB9 */
    --color-teal-50: hsl(178 62% 95%);
    --color-teal-100: hsl(178 62% 90%);
    --color-teal-200: hsl(178 62% 80%);
    --color-teal-300: hsl(178 62% 70%);
    --color-teal-400: hsl(178 62% 60%);
    --color-teal-500: hsl(178 62% 46%);
    --color-teal-600: hsl(178 62% 40%);
    --color-teal-700: hsl(178 62% 35%);
    --color-teal-800: hsl(178 62% 30%);
    --color-teal-900: hsl(178 62% 25%);
    --color-teal-950: hsl(178 62% 15%);

    --color-background: var(--background);
    --color-foreground: var(--foreground);

    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);

    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

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

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

@layer utilities {
    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
    }
}

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    /* Primary: Dark Blue #2B5DA7 */
    --primary: hsl(215 59% 41%);
    --primary-foreground: hsl(0 0% 98%);
    /* Secondary: Teal/Turquoise #2CBDB9 */
    --secondary: hsl(178 62% 46%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    /* Accent: Lighter Blue #3F72B5 */
    --accent: hsl(215 48% 48%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    /* Ring: Primary Dark Blue for focus states */
    --ring: hsl(215 59% 41%);
    /* Chart colors using brand colors */
    --chart-1: hsl(215 59% 41%);
    --chart-2: hsl(178 62% 46%);
    --chart-3: hsl(215 48% 48%);
    --chart-4: hsl(178 50% 55%);
    --chart-5: hsl(215 55% 55%);
    --radius: 0.5rem;
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    /* Sidebar primary: Dark Blue */
    --sidebar-primary: hsl(215 59% 41%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(215 59% 95%);
    --sidebar-accent-foreground: hsl(215 59% 41%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(215 59% 41%);
    --sidebar: hsl(0 0% 98%);
}

.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    /* Primary: Lighter version of Dark Blue for dark mode */
    --primary: hsl(215 59% 55%);
    --primary-foreground: hsl(0 0% 98%);
    /* Secondary: Lighter Teal for dark mode */
    --secondary: hsl(178 62% 55%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    /* Accent: Lighter Blue for dark mode */
    --accent: hsl(215 48% 60%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    /* Ring: Lighter Dark Blue for dark mode */
    --ring: hsl(215 59% 55%);
    /* Chart colors using brand colors (lighter for dark mode) */
    --chart-1: hsl(215 59% 55%);
    --chart-2: hsl(178 62% 55%);
    --chart-3: hsl(215 48% 60%);
    --chart-4: hsl(178 50% 60%);
    --chart-5: hsl(215 55% 65%);
    --sidebar-background: hsl(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    /* Sidebar primary: Lighter Dark Blue for dark mode */
    --sidebar-primary: hsl(215 59% 55%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(215 59% 55%);
    --sidebar: hsl(240 5.9% 10%);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }
    body {
        @apply bg-background text-foreground;
    }
}

@layer utilities {
    @keyframes shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    
    .animate-shimmer {
        animation: shimmer 2s infinite;
    }
}