@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    [x-cloak] {
        display: none !important;
    }

    body {
        @apply font-sans;
    }
}

@layer components {
    .glass-panel {
        @apply bg-white/85 backdrop-blur-xl dark:bg-slate-950/85;
    }

    .panel {
        @apply rounded-[1.75rem] border border-white/70 bg-white/90 p-6 shadow-xl shadow-slate-200/50 backdrop-blur dark:border-slate-800 dark:bg-slate-950/80 dark:shadow-none;
    }

    .nav-item {
        @apply flex items-center gap-3 rounded-2xl px-4 py-3 text-sm text-slate-600 transition hover:bg-emerald-50 hover:text-[#29A76A] dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-[#6BE3A8];
    }

    .nav-item-active {
        @apply bg-[#29A76A] text-white shadow-lg shadow-emerald-100 dark:bg-[#29A76A] dark:text-white dark:shadow-none;
    }

    .nav-icon {
        @apply inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-stone-100 dark:bg-slate-900;
    }

    .nav-item-active .nav-icon {
        @apply bg-white/10 dark:bg-slate-950/15;
    }

    .section-label {
        @apply text-xs font-semibold uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400;
    }

    .section-title {
        @apply mt-2 text-2xl font-semibold;
    }

    .section-copy {
        @apply mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400;
    }

    .file-input {
        @apply block w-full rounded-2xl border border-dashed border-slate-300 bg-stone-50 px-4 py-3 text-sm text-slate-500 file:mr-4 file:rounded-xl file:border-0 file:bg-[#29A76A] file:px-4 file:py-2 file:text-sm file:font-medium file:text-white hover:file:bg-[#248F5B] dark:border-slate-700 dark:bg-slate-900 dark:text-slate-300 dark:file:bg-[#29A76A] dark:file:text-white;
    }
}