/* ==========================================================================
   Tailwind CSS Directives & Custom Component Layers
   File: assets/css/style.css
   ========================================================================== */

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

@layer components {
    /* Base Body & Layout */
    body {
        @apply bg-slate-50 text-slate-700 font-sans antialiased min-h-screen m-0 p-0;
    }

    .container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6;
    }

    /* Cards / Containers */
    .card {
        @apply bg-white rounded-xl border border-slate-200 shadow-sm p-6 mb-6 transition-all;
    }

    /* Form Controls */
    .form-group {
        @apply mb-4;
    }

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

    .form-control {
        @apply w-full px-3.5 py-2 bg-white border border-slate-300 rounded-lg text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all placeholder-slate-400;
    }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center font-semibold rounded-lg px-4 py-2 text-sm transition-all duration-150 cursor-pointer border border-transparent disabled:opacity-50 disabled:cursor-not-allowed;
    }

    .btn-primary {
        @apply bg-blue-600 hover:bg-blue-700 text-white shadow-sm active:bg-blue-800;
    }

    .btn-success {
        @apply bg-emerald-600 hover:bg-emerald-700 text-white shadow-sm active:bg-emerald-800;
    }

    .btn-danger {
        @apply bg-red-600 hover:bg-red-700 text-white shadow-sm active:bg-red-800;
    }

    .btn-block {
        @apply w-full;
    }

    /* Alerts */
    .alert-success {
        @apply bg-emerald-50 border border-emerald-200 text-emerald-800 px-4 py-3 rounded-lg text-sm mb-5 flex items-center gap-2 font-medium;
    }

    .alert-error {
        @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg text-sm mb-5 flex items-center gap-2 font-medium;
    }

    /* Status Badges */
    .status-badge {
        @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
    }

    .badge-pending {
        @apply bg-amber-100 text-amber-800 border border-amber-200;
    }

    .badge-approved {
        @apply bg-emerald-100 text-emerald-800 border border-emerald-200;
    }

    .badge-rejected {
        @apply bg-red-100 text-red-800 border border-red-200;
    }
}