@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 - Primary (configurable via env) */
    --color-blue-50: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 95%);
    --color-blue-100: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 90%);
    --color-blue-200: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 80%);
    --color-blue-300: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 70%);
    --color-blue-400: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 60%);
    --color-blue-500: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 50%);
    --color-blue-600: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) var(--theme-primary-lightness));
    --color-blue-700: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 35%);
    --color-blue-800: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 30%);
    --color-blue-900: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 25%);
    --color-blue-950: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) 15%);

    /* Brand Colors - Secondary (configurable via env) */
    --color-teal-50: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 95%);
    --color-teal-100: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 90%);
    --color-teal-200: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 80%);
    --color-teal-300: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 70%);
    --color-teal-400: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 60%);
    --color-teal-500: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) var(--theme-secondary-lightness));
    --color-teal-600: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 40%);
    --color-teal-700: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 35%);
    --color-teal-800: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 30%);
    --color-teal-900: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 25%);
    --color-teal-950: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) 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: Configurable via env (for black/dark themes) */
    --background: hsl(0 0% var(--theme-background-light-mode-lightness));
    --foreground: hsl(0 0% 5%);
    --card: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 5%));
    --card-foreground: hsl(0 0% 5%);
    --popover: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 5%));
    --popover-foreground: hsl(0 0% 5%);
    /* Primary: Configurable via env */
    --primary: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) var(--theme-primary-lightness));
    --primary-foreground: hsl(0 0% 5%);
    /* Secondary: Configurable via env */
    --secondary: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) var(--theme-secondary-lightness));
    --secondary-foreground: hsl(0 0% 5%);
    --muted: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 15%));
    --muted-foreground: hsl(0 0% 40%);
    /* Accent: Configurable via env */
    --accent: hsl(var(--theme-accent-hue) var(--theme-accent-saturation) var(--theme-accent-lightness));
    --accent-foreground: hsl(0 0% 5%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 20%));
    --input: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 25%));
    /* Ring: Primary color for focus states */
    --ring: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) var(--theme-primary-lightness));
    /* Chart colors using brand colors (configurable via env) */
    --chart-1: hsl(var(--theme-chart-1-hue) var(--theme-chart-1-saturation) var(--theme-chart-1-lightness));
    --chart-2: hsl(var(--theme-chart-2-hue) var(--theme-chart-2-saturation) var(--theme-chart-2-lightness));
    --chart-3: hsl(var(--theme-chart-3-hue) var(--theme-chart-3-saturation) var(--theme-chart-3-lightness));
    --chart-4: hsl(var(--theme-chart-4-hue) var(--theme-chart-4-saturation) var(--theme-chart-4-lightness));
    --chart-5: hsl(var(--theme-chart-5-hue) var(--theme-chart-5-saturation) var(--theme-chart-5-lightness));
    --radius: var(--theme-layout-border-radius, 0.5rem);
    --sidebar-background: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 10%));
    --sidebar-foreground: hsl(0 0% 10%);
    /* Sidebar primary: Configurable via env */
    --sidebar-primary: hsl(var(--theme-sidebar-primary-hue) var(--theme-sidebar-primary-saturation) var(--theme-sidebar-primary-lightness));
    --sidebar-primary-foreground: hsl(0 0% 5%);
    --sidebar-accent: hsl(var(--theme-sidebar-accent-hue) var(--theme-sidebar-accent-saturation) var(--theme-sidebar-accent-lightness));
    --sidebar-accent-foreground: hsl(var(--theme-sidebar-primary-hue) var(--theme-sidebar-primary-saturation) var(--theme-sidebar-primary-lightness));
    --sidebar-border: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 15%));
    --sidebar-ring: hsl(var(--theme-sidebar-primary-hue) var(--theme-sidebar-primary-saturation) var(--theme-sidebar-primary-lightness));
    --sidebar: hsl(0 0% calc(var(--theme-background-light-mode-lightness) + 10%));
}

.dark {
    /* Background: Configurable via env (for black/dark themes) */
    --background: hsl(0 0% var(--theme-background-dark-mode-lightness));
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 2%));
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 2%));
    --popover-foreground: hsl(0 0% 98%);
    /* Primary: Lighter version for dark mode (configurable via env) */
    --primary: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) var(--theme-primary-dark-mode-lightness));
    --primary-foreground: hsl(0 0% 5%);
    /* Secondary: Lighter version for dark mode (configurable via env) */
    --secondary: hsl(var(--theme-secondary-hue) var(--theme-secondary-saturation) var(--theme-secondary-dark-mode-lightness));
    --secondary-foreground: hsl(0 0% 5%);
    --muted: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 10%));
    --muted-foreground: hsl(0 0% 70%);
    /* Accent: Lighter version for dark mode (configurable via env) */
    --accent: hsl(var(--theme-accent-hue) var(--theme-accent-saturation) var(--theme-accent-dark-mode-lightness));
    --accent-foreground: hsl(0 0% 5%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 15%));
    --input: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 15%));
    /* Ring: Lighter primary for dark mode */
    --ring: hsl(var(--theme-primary-hue) var(--theme-primary-saturation) var(--theme-primary-dark-mode-lightness));
    /* Chart colors using brand colors (lighter for dark mode) */
    --chart-1: hsl(var(--theme-chart-1-hue) var(--theme-chart-1-saturation) 55%);
    --chart-2: hsl(var(--theme-chart-2-hue) var(--theme-chart-2-saturation) 55%);
    --chart-3: hsl(var(--theme-chart-3-hue) var(--theme-chart-3-saturation) 60%);
    --chart-4: hsl(var(--theme-chart-4-hue) var(--theme-chart-4-saturation) 60%);
    --chart-5: hsl(var(--theme-chart-5-hue) var(--theme-chart-5-saturation) 65%);
    --sidebar-background: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 5%));
    --sidebar-foreground: hsl(0 0% 95%);
    /* Sidebar primary: Lighter version for dark mode (configurable via env) */
    --sidebar-primary: hsl(var(--theme-sidebar-primary-hue) var(--theme-sidebar-primary-saturation) var(--theme-sidebar-primary-dark-mode-lightness));
    --sidebar-primary-foreground: hsl(0 0% 5%);
    --sidebar-accent: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 10%));
    --sidebar-accent-foreground: hsl(240 4.8% 95%);
    --sidebar-border: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 10%));
    --sidebar-ring: hsl(var(--theme-sidebar-primary-hue) var(--theme-sidebar-primary-saturation) var(--theme-sidebar-primary-dark-mode-lightness));
    --sidebar: hsl(0 0% calc(var(--theme-background-dark-mode-lightness) + 5%));
}

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

    input[type='checkbox'] {
        appearance: none;
        display: inline-block;
        flex-shrink: 0;
        width: 2.5rem !important;
        height: 1.5rem !important;
        min-width: 2.5rem !important;
        border-radius: 9999px !important;
        border: 1px solid hsl(0 0% 80%);
        background-color: hsl(0 0% 88%);
        position: relative;
        vertical-align: middle;
        margin: 0;
        cursor: pointer;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            box-shadow 0.2s ease;
    }

    input[type='checkbox']::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 3px;
        width: 1rem;
        height: 1rem;
        border-radius: 9999px;
        background-color: hsl(0 0% 100%);
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
        transition: transform 0.2s ease;
        transform: translateY(-50%);
    }

    input[type='checkbox']:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    input[type='checkbox']:checked::before {
        transform: translate(1rem, -50%);
    }

    input[type='checkbox']:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

    input[type='checkbox']:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .dark input[type='checkbox'] {
        border-color: hsl(0 0% 34%);
        background-color: hsl(0 0% 24%);
    }
}

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

    /*
     * Legacy page compatibility:
     * Many older Inertia pages use fixed light utility classes.
     * These overrides provide dark-mode parity without rewriting every page.
     */
    .dark .bg-white {
        background-color: hsl(0 0% 8%);
    }

    .dark .bg-gray-50 {
        background-color: hsl(0 0% 11%);
    }

    .dark .bg-gray-100 {
        background-color: hsl(0 0% 14%);
    }

    .dark .bg-gray-200 {
        background-color: hsl(0 0% 18%);
    }

    .dark .bg-blue-50 {
        background-color: hsl(215 35% 14%);
    }

    .dark .bg-blue-100 {
        background-color: hsl(215 35% 18%);
    }

    .dark .text-gray-900 {
        color: hsl(0 0% 95%);
    }

    .dark .text-gray-700 {
        color: hsl(0 0% 82%);
    }

    .dark .text-gray-600,
    .dark .text-gray-500 {
        color: hsl(0 0% 70%);
    }

    .dark .text-gray-400 {
        color: hsl(0 0% 58%);
    }

    .dark .text-blue-800,
    .dark .text-blue-700 {
        color: hsl(215 85% 78%);
    }

    .dark .text-blue-600 {
        color: hsl(215 85% 72%);
    }

    .dark .border-gray-200,
    .dark .border-gray-300 {
        border-color: hsl(0 0% 24%);
    }

    .dark .border-blue-200 {
        border-color: hsl(215 45% 38%);
    }

    .dark .border-blue-500 {
        border-color: hsl(215 70% 58%);
    }

    .dark .hover\:bg-gray-50:hover {
        background-color: hsl(0 0% 14%);
    }

    .dark .hover\:bg-gray-100:hover {
        background-color: hsl(0 0% 18%);
    }

    .dark .hover\:bg-gray-200:hover {
        background-color: hsl(0 0% 22%);
    }

    .dark .hover\:bg-blue-50:hover {
        background-color: hsl(215 35% 20%);
    }

    .dark .hover\:bg-blue-100:hover {
        background-color: hsl(215 35% 24%);
    }

    /*
     * Pagination controls in list views (Laravel + manual pagers).
     */
    .dark nav[role='navigation'] .bg-white {
        background-color: hsl(0 0% 10%);
    }

    .dark nav[role='navigation'] .bg-blue-50 {
        background-color: hsl(215 35% 20%);
    }

    .dark nav[role='navigation'] .text-gray-500,
    .dark nav[role='navigation'] .text-gray-400 {
        color: hsl(0 0% 72%);
    }

    .dark nav[role='navigation'] .text-blue-600 {
        color: hsl(215 85% 75%);
    }

    /*
     * Dropdown/popover/menu panels and modal surfaces.
     * Many pages use these utility combinations without dark variants.
     */
    .dark .shadow-lg.bg-white,
    .dark .shadow-xl.bg-white,
    .dark .ring-1.bg-white {
        background-color: hsl(0 0% 10%);
        border-color: hsl(0 0% 24%);
    }

    .dark .bg-black\/50,
    .dark .bg-black.bg-opacity-50,
    .dark .bg-gray-600.bg-opacity-50 {
        background-color: rgb(0 0 0 / 0.7);
    }

    .dark [role='dialog'].bg-white,
    .dark .fixed .bg-white {
        background-color: hsl(0 0% 10%);
        color: hsl(0 0% 95%);
        border-color: hsl(0 0% 24%);
    }

    .dark input,
    .dark select,
    .dark textarea {
        background-color: hsl(0 0% 10%);
        color: hsl(0 0% 95%);
        border-color: hsl(0 0% 26%);
    }

    .dark input::placeholder,
    .dark textarea::placeholder {
        color: hsl(0 0% 55%);
    }
}