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

@layer base {
    html { font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
    body { @apply antialiased bg-slate-50 text-slate-800; }
}

@layer components {
    .portal-page { @apply mx-auto max-w-7xl px-4 py-7 sm:px-6 lg:px-8 lg:py-9; }
    .portal-card { @apply rounded-[1.4rem] border border-slate-200/80 bg-white shadow-[0_12px_40px_rgba(15,23,42,.06)]; }
    .portal-button { @apply inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-sky-600 to-cyan-600 px-4 py-2.5 text-sm font-extrabold text-white shadow-sm transition hover:-translate-y-0.5 hover:from-sky-700 hover:to-cyan-700 hover:shadow-md; }
    .portal-button-secondary { @apply inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-extrabold text-slate-700 transition hover:border-sky-200 hover:bg-sky-50 hover:text-sky-800; }
    .portal-danger-button { @apply inline-flex items-center justify-center rounded-xl border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm font-extrabold text-rose-700 transition hover:bg-rose-100; }
    .portal-label, .portal-eyebrow { @apply text-[10px] font-black uppercase tracking-[.16em] text-sky-700; }
    .portal-title { @apply mt-0.5 text-xl font-black tracking-tight text-slate-950 sm:text-2xl; }
    .portal-field-label { @apply mb-1.5 block text-xs font-extrabold text-slate-700; }
    .portal-input { @apply mt-1 block w-full rounded-xl border-slate-300 bg-white text-sm text-slate-800 shadow-sm focus:border-sky-500 focus:ring-sky-500; }
    .portal-chip { @apply inline-flex rounded-full bg-sky-50 px-2.5 py-1 text-[10px] font-extrabold uppercase tracking-wide text-sky-700 ring-1 ring-inset ring-sky-100; }
    .portal-count { @apply grid h-9 min-w-9 place-items-center rounded-xl bg-sky-50 px-2 text-sm font-black text-sky-700; }
    .portal-upload-zone { @apply flex cursor-pointer flex-col items-center justify-center rounded-2xl border-2 border-dashed border-sky-200 bg-gradient-to-br from-sky-50 to-cyan-50/60 px-5 py-7 text-center transition hover:border-sky-400 hover:bg-sky-50; }
    .portal-upload-zone strong { @apply mt-2 max-w-full truncate text-sm text-slate-800; }
    .portal-upload-zone small { @apply mt-1 text-xs text-slate-500; }
    .portal-hero { @apply mb-6 flex flex-col justify-between gap-5 overflow-hidden rounded-[1.6rem] border border-sky-100 bg-gradient-to-br from-sky-600 via-cyan-600 to-teal-500 p-6 text-white shadow-[0_18px_50px_rgba(2,132,199,.18)] sm:flex-row sm:items-center lg:p-8; }
    .portal-hero h1 { @apply mt-2 max-w-2xl text-2xl font-black tracking-tight sm:text-3xl; }
    .portal-hero p { @apply mt-2 max-w-2xl text-sm leading-6 text-white/80; }
    .portal-hero-badge { @apply inline-flex rounded-full bg-white/15 px-3 py-1 text-[10px] font-black uppercase tracking-[.15em] text-white ring-1 ring-white/20; }
    .portal-hero-stat { @apply min-w-32 rounded-2xl bg-white/15 px-5 py-4 text-center ring-1 ring-white/20 backdrop-blur; }
    .portal-hero-stat strong { @apply block text-3xl font-black; }
    .portal-hero-stat span { @apply mt-1 block text-[10px] font-bold uppercase tracking-wider text-white/70; }
    .portal-table-wrap { @apply overflow-hidden rounded-[1.4rem] border border-slate-200 bg-white shadow-[0_12px_40px_rgba(15,23,42,.05)]; }
}