@import 'tailwindcss';
@import '@fontsource/poppins/latin-400.css';
@import '@fontsource/poppins/latin-500.css';
@import '@fontsource/poppins/latin-600.css';
@import '@fontsource/poppins/latin-700.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/livewire/src/Features/SupportPagination/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';
@source '../../app/**/*.php';
@source '../../modules/**/*.php';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;

    /* Orange ISND (campus.isnd.be : #ff9600) */
    --color-primaire-50: #fff8eb;
    --color-primaire-100: #ffebc6;
    --color-primaire-200: #ffd588;
    --color-primaire-300: #ffb94a;
    --color-primaire-400: #ffa320;
    --color-primaire-500: #ff9600;
    --color-primaire-600: #e26d00;
    --color-primaire-700: #bb4b02;
    --color-primaire-800: #983a08;
    --color-primaire-900: #7c310b;
}

@layer base {
    html { -webkit-tap-highlight-color: transparent; }
    body { @apply bg-slate-100 text-slate-800 antialiased; }
    [x-cloak] { display: none !important; }
    :focus-visible { @apply outline-2 outline-offset-2 outline-primaire-500; }
}

@layer components {
    .carte { @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-200; }
    .carte-entete { @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-4 py-3 sm:px-5; }
    .carte-titre { @apply text-base font-semibold text-slate-800; }
    .carte-corps { @apply p-4 sm:p-5; }

    .btn { @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition
        disabled:cursor-not-allowed disabled:opacity-50; }
    .btn-primaire { @apply bg-primaire-500 text-white shadow-sm hover:bg-primaire-600; }
    .btn-secondaire { @apply bg-white text-slate-700 ring-1 ring-slate-300 hover:bg-slate-50; }
    .btn-danger { @apply bg-red-600 text-white hover:bg-red-700; }
    .btn-lien { @apply px-2 text-primaire-600 hover:bg-primaire-50; }
    .btn-sm { @apply px-3 py-1.5 text-xs; }

    .champ-label { @apply mb-1 block text-sm font-medium text-slate-700; }
    .champ { @apply block w-full rounded-lg border-0 bg-white px-3 py-2 text-sm text-slate-800 shadow-sm ring-1 ring-slate-300
        placeholder:text-slate-400 focus:ring-2 focus:ring-primaire-500 focus:outline-none; }
    .champ-erreur { @apply mt-1 text-sm text-red-600; }
    .case { @apply size-4 rounded border-slate-300 text-primaire-500 accent-primaire-500 focus:ring-primaire-500; }

    .tableau { @apply min-w-full divide-y divide-slate-200 text-sm; }
    .tableau thead th { @apply bg-slate-50 px-3 py-2.5 text-left text-xs font-semibold tracking-wide text-slate-500 uppercase; }
    .tableau tbody td { @apply px-3 py-2.5 align-middle text-slate-700; }
    .tableau tbody tr { @apply hover:bg-primaire-50/40; }

    .badge { @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium; }
    .badge-gris { @apply bg-slate-100 text-slate-700; }
    .badge-orange { @apply bg-primaire-100 text-primaire-800; }
    .badge-vert { @apply bg-emerald-100 text-emerald-800; }
    .badge-rouge { @apply bg-red-100 text-red-800; }
    .badge-bleu { @apply bg-sky-100 text-sky-800; }
}