/**
 * Styles custom de l'application
 *
 * En dev : chargé EN PLUS du CDN Tailwind
 * En prod : utilisé comme input pour Tailwind CLI standalone
 *           Commande de compilation : voir CLAUDE.md du projet
 */

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

/* ===== Custom Base ===== */
@layer base {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    ::selection {
        background-color: #0071bb;
        color: white;
    }
}

/* ===== Custom Components ===== */
@layer components {
    .btn-primary {
        @apply inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-medium text-white hover:bg-primary-dark transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
    }
    .btn-secondary {
        @apply inline-flex items-center gap-2 rounded-lg bg-white px-4 py-2.5 text-sm font-medium text-gray-700 ring-1 ring-gray-300 hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2;
    }
    .btn-danger {
        @apply inline-flex items-center gap-2 rounded-lg bg-red-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-red-700 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:ring-offset-2;
    }

    .form-input {
        @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20 transition-colors;
    }
    .form-label { @apply block text-sm font-medium text-gray-700 mb-1; }
    .form-error { @apply text-sm text-red-600 mt-1; }

    .card { @apply rounded-xl bg-white p-6 shadow-sm ring-1 ring-gray-100; }
    .card-header { @apply flex items-center justify-between pb-4 border-b border-gray-100 mb-4; }

    .table-container { @apply overflow-x-auto rounded-xl bg-white shadow-sm ring-1 ring-gray-100; }
    .table-container table { @apply w-full text-sm text-left; }
    .table-container thead { @apply bg-gray-50 text-xs uppercase text-gray-500; }
    .table-container th { @apply px-4 py-3 font-medium; }
    .table-container td { @apply px-4 py-3 text-gray-700; }
    .table-container tbody tr { @apply border-t border-gray-100 hover:bg-gray-50 transition-colors; }

    .badge { @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium; }
    .badge-success { @apply bg-green-50 text-green-700 ring-1 ring-green-200; }
    .badge-danger  { @apply bg-red-50 text-red-700 ring-1 ring-red-200; }
    .badge-warning { @apply bg-yellow-50 text-yellow-700 ring-1 ring-yellow-200; }
    .badge-info    { @apply bg-blue-50 text-blue-700 ring-1 ring-blue-200; }
}