@import 'tailwindcss';

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

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

    /* Azul-petróleo institucional: tom fiscal, sério, sem cair no azul
       corporativo genérico. Usado na navegação e nas ações primárias. */
    --color-brand-50: #eef6f7;
    --color-brand-100: #d3e7ea;
    --color-brand-200: #a9d0d6;
    --color-brand-300: #74b1bb;
    --color-brand-400: #458c99;
    --color-brand-500: #2b707e;
    --color-brand-600: #215a68;
    --color-brand-700: #1c4854;
    --color-brand-800: #173a44;
    --color-brand-900: #112b33;
    --color-brand-950: #0a1a20;
}

@layer base {
    body {
        @apply bg-slate-100 text-slate-800 antialiased;
    }

    /* Evita o "flash" de conteúdo Alpine antes da hidratação. */
    [x-cloak] {
        display: none !important;
    }
}

@utility tabular {
    /* Colunas de valor e chave de acesso alinhadas verticalmente. */
    font-variant-numeric: tabular-nums;
}

@layer components {
    .card {
        @apply rounded-xl border border-slate-200 bg-white shadow-sm;
    }

    .card-pad {
        @apply p-5 sm:p-6;
    }

    .label {
        @apply mb-1.5 block text-sm font-medium text-slate-700;
    }

    .input {
        @apply block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900
               shadow-xs transition placeholder:text-slate-400
               focus:border-brand-500 focus:ring-2 focus:ring-brand-500/20 focus:outline-none
               disabled:bg-slate-50 disabled:text-slate-500;
    }

    .input-error {
        @apply border-rose-400 focus:border-rose-500 focus:ring-rose-500/20;
    }

    /* O Tailwind 4 não resolve `@apply` de uma classe declarada na mesma
       camada, então cada variante repete a base em vez de estender `.btn`. */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-danger {
        @apply inline-flex cursor-pointer items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm
               font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
               disabled:cursor-not-allowed disabled:opacity-60;
    }

    .btn-primary {
        @apply bg-brand-700 text-white hover:bg-brand-800 focus-visible:ring-brand-600;
    }

    .btn-secondary {
        @apply border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 focus-visible:ring-slate-400;
    }

    .btn-danger {
        @apply border border-rose-200 bg-rose-50 text-rose-700 hover:bg-rose-100 focus-visible:ring-rose-400;
    }

    .btn-sm {
        @apply px-3 py-1.5 text-xs;
    }

    .badge {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium;
    }

    .th {
        @apply px-4 py-3 text-left text-xs font-semibold tracking-wide text-slate-500 uppercase;
    }

    .td {
        @apply px-4 py-3 text-sm text-slate-700;
    }
}