@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');
@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:
        'Cairo', 'Plus Jakarta 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);

    /* Primary tint scale */
    --color-primary-50: var(--primary-50);
    --color-primary-100: var(--primary-100);
    --color-primary-200: var(--primary-200);
    --color-primary-300: var(--primary-300);
    --color-primary-400: var(--primary-400);
    --color-primary-500: var(--primary-500);
    --color-primary-600: var(--primary-600);
    --color-primary-700: var(--primary-700);
    --color-primary-800: var(--primary-800);
    --color-primary-900: var(--primary-900);
    --color-primary-950: var(--primary-950);

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

:root {
    --background: hsl(210 40% 98%);
    --foreground: hsl(222.2 84% 4.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 84% 4.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(222.2 84% 4.9%);

    /* Default Signature Teal */
    --primary: hsl(173 80% 36%);
    --primary-foreground: hsl(0 0% 100%);

    --secondary: hsl(210 40% 96.1%);
    --secondary-foreground: hsl(222.2 47.4% 11.2%);
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);
    --accent: hsl(210 40% 96.1%);
    --accent-foreground: hsl(222.2 47.4% 11.2%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);
    --ring: hsl(173 80% 36%);
    --radius: 0.85rem;

    --sidebar-background: hsl(0 0% 100%);
    --sidebar-foreground: hsl(222.2 47.4% 20%);
    --sidebar-primary: hsl(173 80% 36%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(173 80% 95%);
    --sidebar-accent-foreground: hsl(173 80% 25%);
    --sidebar-border: hsl(220 13% 91%);
    --sidebar-ring: hsl(173 80% 36%);
    --accent-color: hsl(173 80% 36%);

    --primary-50: color-mix(in oklab, var(--primary) 8%, white);
    --primary-100: color-mix(in oklab, var(--primary) 15%, white);
    --primary-200: color-mix(in oklab, var(--primary) 30%, white);
    --primary-300: color-mix(in oklab, var(--primary) 50%, white);
    --primary-400: color-mix(in oklab, var(--primary) 70%, white);
    --primary-500: var(--primary);
    --primary-600: var(--primary);
    --primary-700: color-mix(in oklab, var(--primary) 75%, black);
    --primary-800: color-mix(in oklab, var(--primary) 50%, black);
    --primary-900: color-mix(in oklab, var(--primary) 30%, black);
    --primary-950: color-mix(in oklab, var(--primary) 15%, black);
}

.dark {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --card: hsl(222.2 84% 6.8%);
    --card-foreground: hsl(210 40% 98%);
    --popover: hsl(222.2 84% 6.8%);
    --popover-foreground: hsl(210 40% 98%);

    /* Vibrant clinical teal for dark mode */
    --primary: hsl(173 78% 48%);
    --primary-foreground: hsl(0 0% 100%);

    --secondary: hsl(217.2 32.6% 17.5%);
    --secondary-foreground: hsl(210 40% 98%);
    --muted: hsl(217.2 32.6% 17.5%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --accent: hsl(217.2 32.6% 17.5%);
    --accent-foreground: hsl(210 40% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --destructive-foreground: hsl(210 40% 98%);
    --border: hsl(217.2 32.6% 17.5%);
    --input: hsl(217.2 32.6% 17.5%);
    --ring: hsl(173 78% 48%);

    --sidebar-background: hsl(222.2 84% 6.2%);
    --sidebar-foreground: hsl(210 40% 98%);
    --sidebar-primary: hsl(173 78% 48%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(217.2 32.6% 17.5%);
    --sidebar-accent-foreground: hsl(210 40% 98%);
    --sidebar-border: hsl(217.2 32.6% 17.5%);
    --sidebar-ring: hsl(173 78% 48%);
    --accent-color: hsl(173 78% 48%);
}

/* 1. Teal Accent */
html[data-accent="teal"] {
    --primary: hsl(176 72% 35%);
    --ring: hsl(176 72% 35%);
    --sidebar-primary: hsl(176 72% 35%);
    --sidebar-accent: hsl(176 72% 95%);
    --sidebar-accent-foreground: hsl(176 72% 25%);
    --accent-color: hsl(176 72% 35%);
}
html.dark[data-accent="teal"] {
    --primary: hsl(176 72% 45%);
    --ring: hsl(176 72% 45%);
    --sidebar-primary: hsl(176 72% 45%);
    --sidebar-accent: hsl(176 40% 18%);
    --sidebar-accent-foreground: hsl(176 72% 80%);
    --accent-color: hsl(176 72% 45%);
}

/* 2. Medical Green Accent */
html[data-accent="medical"] {
    --primary: hsl(155 65% 45%);
    --ring: hsl(155 65% 45%);
    --sidebar-primary: hsl(155 65% 45%);
    --sidebar-accent: hsl(155 65% 95%);
    --sidebar-accent-foreground: hsl(155 65% 30%);
    --accent-color: hsl(155 65% 45%);
}
html.dark[data-accent="medical"] {
    --primary: hsl(155 65% 55%);
    --ring: hsl(155 65% 55%);
    --sidebar-primary: hsl(155 65% 55%);
    --sidebar-accent: hsl(155 40% 18%);
    --sidebar-accent-foreground: hsl(155 65% 80%);
    --accent-color: hsl(155 65% 55%);
}

/* 3. Emerald Accent */
html[data-accent="emerald"] {
    --primary: hsl(142 71% 45%);
    --ring: hsl(142 71% 45%);
    --sidebar-primary: hsl(142 71% 45%);
    --sidebar-accent: hsl(142 71% 95%);
    --sidebar-accent-foreground: hsl(142 71% 25%);
    --accent-color: hsl(142 71% 45%);
}
html.dark[data-accent="emerald"] {
    --primary: hsl(142 71% 55%);
    --ring: hsl(142 71% 55%);
    --sidebar-primary: hsl(142 71% 55%);
    --sidebar-accent: hsl(142 40% 18%);
    --sidebar-accent-foreground: hsl(142 71% 80%);
    --accent-color: hsl(142 71% 55%);
}

/* 4. Indigo Accent */
html[data-accent="indigo"] {
    --primary: hsl(226 70% 55%);
    --ring: hsl(226 70% 55%);
    --sidebar-primary: hsl(226 70% 55%);
    --sidebar-accent: hsl(226 70% 95%);
    --sidebar-accent-foreground: hsl(226 70% 30%);
    --accent-color: hsl(226 70% 55%);
}
html.dark[data-accent="indigo"] {
    --primary: hsl(226 70% 65%);
    --ring: hsl(226 70% 65%);
    --sidebar-primary: hsl(226 70% 65%);
    --sidebar-accent: hsl(226 40% 20%);
    --sidebar-accent-foreground: hsl(226 70% 85%);
    --accent-color: hsl(226 70% 65%);
}

/* 5. Violet Accent */
html[data-accent="violet"] {
    --primary: hsl(263 70% 50%);
    --ring: hsl(263 70% 50%);
    --sidebar-primary: hsl(263 70% 50%);
    --sidebar-accent: hsl(263 70% 95%);
    --sidebar-accent-foreground: hsl(263 70% 30%);
    --accent-color: hsl(263 70% 50%);
}
html.dark[data-accent="violet"] {
    --primary: hsl(263 70% 65%);
    --ring: hsl(263 70% 65%);
    --sidebar-primary: hsl(263 70% 65%);
    --sidebar-accent: hsl(263 40% 20%);
    --sidebar-accent-foreground: hsl(263 70% 85%);
    --accent-color: hsl(263 70% 65%);
}

/* 6. Rose Accent */
html[data-accent="rose"] {
    --primary: hsl(346 77% 49%);
    --ring: hsl(346 77% 49%);
    --sidebar-primary: hsl(346 77% 49%);
    --sidebar-accent: hsl(346 77% 96%);
    --sidebar-accent-foreground: hsl(346 77% 35%);
    --accent-color: hsl(346 77% 49%);
}
html.dark[data-accent="rose"] {
    --primary: hsl(346 77% 62%);
    --ring: hsl(346 77% 62%);
    --sidebar-primary: hsl(346 77% 62%);
    --sidebar-accent: hsl(346 40% 20%);
    --sidebar-accent-foreground: hsl(346 77% 85%);
    --accent-color: hsl(346 77% 62%);
}

/* 7. Amber Accent */
html[data-accent="amber"] {
    --primary: hsl(38 92% 50%);
    --ring: hsl(38 92% 50%);
    --sidebar-primary: hsl(38 92% 50%);
    --sidebar-accent: hsl(38 92% 95%);
    --sidebar-accent-foreground: hsl(38 92% 30%);
    --accent-color: hsl(38 92% 50%);
}
html.dark[data-accent="amber"] {
    --primary: hsl(38 92% 55%);
    --ring: hsl(38 92% 55%);
    --sidebar-primary: hsl(38 92% 55%);
    --sidebar-accent: hsl(38 40% 18%);
    --sidebar-accent-foreground: hsl(38 92% 80%);
    --accent-color: hsl(38 92% 55%);
}

/* 8. Neutral Accent */
html[data-accent="neutral"] {
    --primary: hsl(222.2 47.4% 25%);
    --ring: hsl(222.2 47.4% 25%);
    --sidebar-primary: hsl(222.2 47.4% 25%);
    --sidebar-accent: hsl(210 40% 95%);
    --sidebar-accent-foreground: hsl(222.2 47.4% 20%);
    --accent-color: hsl(222.2 47.4% 25%);
}
html.dark[data-accent="neutral"] {
    --primary: hsl(210 40% 85%);
    --ring: hsl(210 40% 85%);
    --sidebar-primary: hsl(210 40% 85%);
    --sidebar-accent: hsl(217.2 32.6% 22%);
    --sidebar-accent-foreground: hsl(210 40% 95%);
    --accent-color: hsl(210 40% 85%);
}

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

    body {
        @apply bg-background text-foreground antialiased selection:bg-primary/20 selection:text-primary;
    }
}

/* Universal Unified Typography Rules */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] p,
html[dir="rtl"] span,
html[dir="rtl"] a,
html[dir="rtl"] table,
html[dir="rtl"] [class*="font-"] {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

html[dir="ltr"],
html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] button,
html[dir="ltr"] select,
html[dir="ltr"] textarea,
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6,
html[dir="ltr"] p,
html[dir="ltr"] span,
html[dir="ltr"] a,
html[dir="ltr"] table,
html[dir="ltr"] [class*="font-"] {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.font-mono,
code,
kbd,
samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* Custom subtle scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
}