@import 'tailwindcss';

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

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

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

     --color-brand: #0D203B;
     --color-brand-fg: #0D203B;
     --color-accent: #FF3131;

     --color-base: #F8FAFC;
     --color-surface: #FFFFFF;
     --color-border: #E2E8F0;
     --color-foreground: #1E293B;
     --color-muted: #64748B;

     --shadow-panel: 0 4px 6px -1px rgba(13, 32, 59, 0.05), 0 2px 4px -2px rgba(13, 32, 59, 0.05);
     --radius-panel: 0.75rem;
}

 @layer base {
     html {
         height: 100%;
     }

     body {
         min-height: 100%;
         background-color: var(--color-base);
         color: var(--color-foreground);
         font-family: var(--font-sans);
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.5rem;
     }

     .dark {
         --color-base: #0D1117;
         --color-surface: #161B22;
         --color-border: #243246;
         --color-foreground: #E6EDF3;
         --color-muted: #A7B4C6;
         --color-brand-fg: #9CC2FF;
         --shadow-panel: 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 28px rgba(0, 0, 0, 0.35);
         color-scheme: dark;
     }
 }

 @layer components {
     .ui-card {
         @apply bg-surface border border-border text-foreground shadow-panel rounded-panel;
     }

     .ui-btn {
         @apply inline-flex items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors;
         @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-fg/45 focus-visible:ring-offset-2 focus-visible:ring-offset-surface;
         @apply disabled:pointer-events-none disabled:opacity-50;
     }

     .ui-btn-primary {
         @apply bg-brand text-white hover:bg-brand/90 shadow-sm ring-1 ring-inset ring-white/10;
     }

     .ui-btn-secondary {
         @apply bg-surface text-foreground ring-1 ring-inset ring-border hover:bg-base;
     }

     .ui-btn-danger {
         @apply bg-accent text-white hover:bg-accent/90;
     }

     .ui-btn-ghost {
         @apply bg-transparent text-muted hover:text-foreground hover:bg-base;
     }

     .ui-input {
         @apply block w-full rounded-lg border border-border bg-surface px-3 py-2 text-sm text-foreground shadow-sm;
         @apply placeholder:text-muted focus:border-brand-fg focus:ring-2 focus:ring-brand-fg/45;
     }

     .ui-nav-link {
         @apply flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium text-white/80 hover:bg-white/10 hover:text-white transition-colors;
     }

     .ui-nav-link-active {
         @apply bg-white/10 text-white;
     }

     .ui-nav-section-title {
         @apply px-3 text-[11px] font-medium tracking-wider uppercase text-white/40;
     }

     .ui-link {
         @apply text-brand-fg hover:underline underline-offset-4;
     }

     .ui-icon-brand {
         @apply text-brand-fg;
     }
 }

 @layer utilities {
     .ui-shell .bg-white {
         background-color: var(--color-surface);
     }

     .ui-shell .bg-white.bg-opacity-75 {
         background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
     }

     .dark .ui-shell .bg-gray-50,
     .dark .ui-shell .bg-gray-100 {
         background-color: var(--color-base);
     }

     .ui-shell .bg-gray-200 {
         background-color: var(--color-border);
     }

     .dark .ui-shell .bg-gray-300 {
         background-color: color-mix(in srgb, var(--color-border) 70%, var(--color-muted));
     }

     .dark .ui-shell .bg-blue-50,
     .dark .ui-shell .bg-green-50,
     .dark .ui-shell .bg-red-50,
     .dark .ui-shell .bg-yellow-50 {
         background-color: var(--color-base);
     }

     .dark .ui-shell .hover\:bg-gray-50:hover,
     .dark .ui-shell .hover\:bg-gray-100:hover {
         background-color: var(--color-base);
     }

     .ui-shell .hover\:bg-white:hover {
         background-color: var(--color-surface);
     }

     .ui-shell .text-gray-900,
     .ui-shell .text-gray-800,
     .ui-shell .text-gray-700,
     .ui-shell .text-gray-600 {
         color: var(--color-foreground);
     }

     .ui-shell .text-gray-500,
     .ui-shell .text-gray-400 {
         color: var(--color-muted);
     }

     .ui-shell .text-gray-300,
     .ui-shell .text-gray-200 {
         color: color-mix(in srgb, var(--color-muted) 70%, var(--color-foreground));
     }

     .dark .ui-shell :where(input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color'])) {
         background-color: var(--color-surface);
         color: var(--color-foreground);
         border-color: var(--color-border);
     }

     .dark .ui-shell select,
     .dark .ui-shell textarea {
         background-color: var(--color-surface);
         color: var(--color-foreground);
         border-color: var(--color-border);
     }

     .dark .ui-shell option {
         background-color: var(--color-surface);
         color: var(--color-foreground);
     }

     .ui-shell .placeholder\:text-gray-500::placeholder,
     .ui-shell .placeholder-gray-500::placeholder,
     .ui-shell .placeholder\:text-gray-400::placeholder,
     .ui-shell .placeholder-gray-400::placeholder {
         color: var(--color-muted);
     }

     .ui-shell .border-gray-100,
     .ui-shell .border-gray-200,
     .ui-shell .border-gray-300 {
         border-color: var(--color-border);
     }

     .ui-shell .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
     .ui-shell .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
         border-color: var(--color-border);
     }

     .ui-shell .ring-gray-200,
     .ui-shell .ring-gray-300 {
         --tw-ring-color: var(--color-border);
     }

     .ui-shell .shadow,
     .ui-shell .shadow-sm,
     .ui-shell .shadow-md,
     .ui-shell .shadow-lg,
     .ui-shell .shadow-xl {
         box-shadow: var(--shadow-panel);
     }

     .ui-shell .bg-gray-500 {
         background-color: rgb(0 0 0 / 0.6);
     }
 }