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

@layer base {
    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-neutral-50 text-neutral-900;
    }
}

@layer components {
    .btn-primary {
        @apply inline-flex items-center justify-center rounded-md bg-verde-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-verde-700 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60;
    }

    .btn-ghost {
        @apply inline-flex items-center justify-center rounded-md border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-700 shadow-sm transition hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-verde-500 focus:ring-offset-2;
    }

    .btn-danger {
        @apply inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
    }

    .form-input,
    .form-select,
    .form-textarea {
        @apply block w-full rounded-md border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 shadow-sm transition placeholder:text-neutral-400 focus:border-verde-500 focus:outline-none focus:ring-1 focus:ring-verde-500;
    }

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

    .card {
        @apply rounded-lg border border-neutral-200 bg-white;
    }

    .card-padded {
        @apply card p-6;
    }

    .table-wrap {
        @apply overflow-hidden rounded-lg border border-neutral-200 bg-white;
    }

    .table {
        @apply min-w-full divide-y divide-neutral-200 text-sm;
    }

    .table thead th {
        @apply bg-neutral-50 px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-neutral-500;
    }

    .table tbody td {
        @apply px-4 py-3 text-neutral-800;
    }

    .table tbody tr {
        @apply border-t border-neutral-100;
    }

    .table tbody tr:hover {
        @apply bg-neutral-50;
    }

    .badge {
        @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium;
    }
    .badge-active   { @apply bg-verde-100 text-verde-800; }
    .badge-pending  { @apply bg-amber-100 text-amber-800; }
    .badge-rejected { @apply bg-red-100 text-red-800; }
    .badge-inactive { @apply bg-neutral-100 text-neutral-600; }
    .badge-info     { @apply bg-sky-100 text-sky-800; }

    .nav-group-label {
        @apply px-3 pt-5 pb-1.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-neutral-400;
    }

    .nav-link {
        @apply flex items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900;
    }

    .nav-link.is-active {
        @apply bg-verde-50 text-verde-800;
    }

    .nav-link svg {
        @apply h-4 w-4 text-neutral-400 transition;
    }

    .nav-link:hover svg {
        @apply text-neutral-700;
    }

    .nav-link.is-active svg {
        @apply text-verde-700;
    }

    .nav-link.is-disabled {
        @apply cursor-not-allowed text-neutral-400 hover:bg-transparent hover:text-neutral-400;
    }

    .nav-link.is-disabled svg {
        @apply text-neutral-300;
    }

    .slide-over-mask {
        @apply fixed inset-0 z-40 bg-neutral-900/30 transition-opacity;
    }

    .slide-over-panel {
        @apply fixed inset-y-0 right-0 z-50 flex w-full max-w-md flex-col bg-white shadow-xl transition-transform;
    }
}