@import 'tailwindcss';

@plugin 'tailwindcss-animate';

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

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

@theme {
    --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);

    --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);
    --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);

    /* Override gray with neutral to remove blue tint */
    --color-gray-50: var(--color-neutral-50);
    --color-gray-100: var(--color-neutral-100);
    --color-gray-200: var(--color-neutral-200);
    --color-gray-300: var(--color-neutral-300);
    --color-gray-400: var(--color-neutral-400);
    --color-gray-500: var(--color-neutral-500);
    --color-gray-600: var(--color-neutral-600);
    --color-gray-700: var(--color-neutral-700);
    --color-gray-800: var(--color-neutral-800);
    --color-gray-900: var(--color-neutral-900);
    --color-gray-950: var(--color-neutral-950);
}

/*
  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: transparent;
    }

    /* Remove border from body and html */
    html,
    body {
        border: none;
        border-top: none;
    }
}

:root {
    --background: oklch(100% 0.00011 271.152);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: #FF029A;
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.577 0.245 27.325);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.87 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 0.625rem;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);
    --sidebar-active: oklch(0.87 0 0);
    --sidebar-active-foreground: oklch(0.145 0 0);
    --applegreen: #34c759;
    --mintgreen: #e6f7e6;
}

.dark {
    --background: oklch(0 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.12 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
    --sidebar-active: oklch(0.269 0 0);
    --sidebar-active-foreground: oklch(0.985 0 0);
    --applegreen: #28a745;
    --mintgreen: #cceacc;
}

/* Light mode - default light colors */
html[data-appearance='light'] {
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.87 0 0);
    --sidebar-active: oklch(0.87 0 0);
    --sidebar-active-foreground: oklch(0.145 0 0);
}

/* Dark mode - default dark colors */
html[data-appearance='dark'] {
    --sidebar: oklch(0 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
    --sidebar-active: oklch(0.269 0 0);
    --sidebar-active-foreground: oklch(0.985 0 0);
}

/* System appearance with role-based theming for STUDENT - Green theme */
html[data-appearance='system'][data-role='student'] {
    --sidebar: #E6F7E6;
    /* mint green background */
    --sidebar-foreground: #052e16;
    /* dark green text */
    --sidebar-primary: #16A34A;
    /* green primary */
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #f0fdf4;
    /* lighter green for hover */
    --sidebar-accent-foreground: #052e16;
    --sidebar-border: oklch(0.922 0 0);
    /* green border */
    --sidebar-ring: #16A34A;
    --sidebar-active: #16A34A;
    /* green for active state */
    --sidebar-active-foreground: #ffffff;
    /* white text on green */
}

/* System appearance with role-based theming for STAFF - Pink theme */
html[data-appearance='system'][data-role='staff'] {
    --sidebar: #FFE4FA;
    /* pink background */
    --sidebar-foreground: #1f2937;
    /* dark gray text */
    --sidebar-primary: #FF029A;
    /* magenta primary */
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #fff0fd;
    /* lighter pink for hover */
    --sidebar-accent-foreground: #1f2937;
    --sidebar-border: oklch(0.922 0 0);
    /* magenta border */
    --sidebar-ring: #FF029A;
    --sidebar-active: #FF029A;
    /* magenta for active state */
    --sidebar-active-foreground: #ffffff;
    /* white text on magenta */
}

/* Apply background colors to sidebar elements */
.sidebar[data-sidebar='sidebar'],
[data-slot='sidebar'],
[data-sidebar='sidebar'] {
    background-color: var(--sidebar) !important;
    color: var(--sidebar-foreground) !important;
    border: none;
}

/* Sidebar hover states */
.sidebar [data-sidebar='menu-button']:hover,
[data-sidebar='menu-button']:hover {
    background-color: var(--sidebar-accent) !important;
    color: var(--sidebar-accent-foreground) !important;
}

/* Active sidebar menu item - use light background with colored left border */
.sidebar [data-sidebar='menu-button'][data-active='true'],
[data-sidebar='menu-button'][data-active='true'] {
    background-color: var(--sidebar) !important;
    color: var(--sidebar-primary) !important;
    font-weight: 500;
    position: relative;
    border-left: 3px solid var(--sidebar-primary) !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
}

/* Keep active colors on hover when active */
.sidebar [data-sidebar='menu-button'][data-active='true']:hover,
[data-sidebar='menu-button'][data-active='true']:hover {
    background-color: var(--sidebar) !important;
    color: var(--sidebar-primary) !important;
}

/* Role-colored sidebar rail */
[data-slot='sidebar-rail']::after {
    background-color: var(--sidebar-primary) !important;
}

/* Sidebar wrapper for system appearance with roles */
html[data-appearance='system'][data-role='student'] [data-slot='sidebar-wrapper'],
html[data-appearance='system'][data-role='student'] .sidebar {
    --sidebar: #E6F7E6;
    --sidebar-foreground: #5f605f;
    --sidebar-primary: #16A34A;
    --sidebar-border: #16A34A;
    --sidebar-active: #16A34A;
    --sidebar-active-foreground: #ffffff;
}

html[data-appearance='system'][data-role='staff'] [data-slot='sidebar-wrapper'],
html[data-appearance='system'][data-role='staff'] .sidebar {
    --sidebar: #FFE4FA;
    --sidebar-foreground: #5f605f;
    --sidebar-primary: #FF029A;
    --sidebar-border: #FF029A;
    --sidebar-active: #FF029A;
    --sidebar-active-foreground: #ffffff;
}

@layer base {
    body {
        @apply bg-background text-foreground;
        border: none !important;
        border-top: none !important;
    }

    /* Remove any top border from common elements */
    header,
    main,
    nav,
    .sidebar {
        border-top: none !important;
    }
}

@layer utilities {

    /* Custom animations for welcome page */
    @keyframes slide-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-slide-down {
        animation: slide-down 0.6s ease-out forwards;
    }

    /* Floating animation */
    @keyframes float {

        0%,
        100% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }
    }

    .animate-float {
        animation: float 3s ease-in-out infinite;
    }

    /* Gradient animation */
    @keyframes gradient-shift {

        0%,
        100% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }
    }

    .animate-gradient {
        background-size: 200% 200%;
        animation: gradient-shift 3s ease infinite;
    }

    /* Hide scrollbar but keep functionality */
    .scrollbar-hide {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }

    /* Wave animation */
    @keyframes wave {
        0% {
            transform: rotate(0deg);
        }

        10% {
            transform: rotate(14deg);
        }

        20% {
            transform: rotate(-8deg);
        }

        30% {
            transform: rotate(14deg);
        }

        40% {
            transform: rotate(-4deg);
        }

        50% {
            transform: rotate(10deg);
        }

        60% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(0deg);
        }
    }

    .animate-wave {
        animation: wave 2s infinite;
        transform-origin: 70% 70%;
    }
}