@import "./web/fonts.css";
@import "tailwindcss";
@import "../../vendor/livewire/flux/dist/flux.css";

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

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

@theme {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    --background: 32 20% 97%; /* #f5f4f2 - Light Beige */
    /* Custom accent color palette based on HSL(199, 74%, 49%) */
    --color-accent-50: hsl(199 74% 97%);
    --color-accent-100: hsl(199 74% 92%);
    --color-accent-200: hsl(199 74% 82%);
    --color-accent-300: hsl(199 74% 70%);
    --color-accent-400: hsl(199 74% 59%);
    --color-accent-500: hsl(199 74% 49%);
    --color-accent-600: hsl(199 74% 39%);
    --color-accent-700: hsl(199 74% 29%);
    --color-accent-800: hsl(199 74% 19%);
    --color-accent-900: hsl(199 74% 12%);
    --color-accent-950: hsl(199 74% 7%);

    /* FluxUI accent variables */
    --color-accent: hsl(199 74% 49%);
    --color-accent-content: hsl(199 74% 39%);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: hsl(199 74% 59%);
        --color-accent-content: hsl(199 74% 49%);
        --color-accent-foreground: var(--color-white);
    }
}

@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}

/* Verbesserte Kontraste für Input-Werte */
input[data-flux-control],
textarea[data-flux-control],
select[data-flux-control] {
    @apply text-zinc-900 dark:text-zinc-50;
}

/* Placeholder-Farbe (light mode) */
input[data-flux-control]::placeholder,
textarea[data-flux-control]::placeholder {
    color: var(--color-zinc-400);
}

/* Placeholder-Farbe (dark mode) – @apply dark: funktioniert nicht in ::placeholder */
:where(.dark, .dark *) input[data-flux-control]::placeholder,
:where(.dark, .dark *) textarea[data-flux-control]::placeholder {
    color: var(--color-zinc-500);
}

.shadow-elegant {
    box-shadow: 0 4px 12px -8px rgba(0, 136, 204, 0.4);
}

& button,
  & .btn,
  & .btn-secondary,
  & a[class*="btn"],
  & [role="button"] {
    transition:
      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      filter 0.2s ease;
      cursor: pointer;
  }

  & button:hover,
  & .btn:hover,
  & .btn-secondary:hover,
  & a[class*="btn"]:hover,
  & [role="button"]:hover {
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.06),
      0 2px 4px rgba(0, 0, 0, 0.08),
      0 4px 8px rgba(0, 0, 0, 0.1),
      0 8px 16px rgba(0, 0, 0, 0.08),
      0 0 10px hsla(199, 74%, 49%, 0.2);
    transform: translateY(-2px);
  }

   /* Scroll-Optimierung für sanftere Animationen */
   & {
    scroll-behavior: smooth;
  }

/* Theme-specific button styles for Backend Portal */