@import 'tailwindcss';
@import '@fontsource-variable/inter';

@plugin '@tailwindcss/forms';

@source '../views/**/*.blade.php';
@source '../js/**/*.js';
@source '../../app/**/*.php';
@source '../../storage/framework/views/*.php';

/* Desktop sidebar collapsed: <html class="sidebar-collapsed"> is rendered by the
   server from the portal_sidebar cookie, so the layout never depends on JS. */
@custom-variant sidebar-collapsed (.sidebar-collapsed &);

@theme {
    --font-sans: 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --color-brand-50: #eef5ff;
    --color-brand-100: #d9e8ff;
    --color-brand-200: #bcd6ff;
    --color-brand-300: #8ebdff;
    --color-brand-400: #5998ff;
    --color-brand-500: #3374fb;
    --color-brand-600: #1d56f0;
    --color-brand-700: #1642dc;
    --color-brand-800: #1936b2;
    --color-brand-900: #1a338c;
    --color-brand-950: #152155;

    --color-ink-900: #0b1324;
    --color-ink-800: #111c33;
    --color-ink-700: #1b2a47;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
@layer base {
    html {
        -webkit-text-size-adjust: 100%;
        font-feature-settings: 'cv11', 'ss01';
    }

    [x-cloak] {
        display: none !important;
    }

    :focus-visible {
        outline: 2px solid var(--color-brand-500);
        outline-offset: 2px;
    }

    input[type='date']::-webkit-calendar-picker-indicator {
        cursor: pointer;
        opacity: 0.6;
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
        }
    }
}

/* ------------------------------------------------------------------ */
/* Components                                                          */
/* ------------------------------------------------------------------ */
@layer components {
    .skip-link {
        @apply sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-brand-700 focus:shadow-lg;
    }

    /* Buttons */
    .btn {
        @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg px-3.5 py-2 text-sm font-semibold transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-60 cursor-pointer;
    }
    .btn-sm { @apply gap-1.5 px-2.5 py-1.5 text-xs; }
    .btn-primary { @apply bg-brand-600 text-white shadow-sm hover:bg-brand-700 focus-visible:outline-brand-600; }
    .btn-secondary { @apply bg-white text-slate-700 shadow-sm ring-1 ring-inset ring-slate-300 hover:bg-slate-50 hover:text-slate-900; }
    .btn-danger { @apply bg-rose-600 text-white shadow-sm hover:bg-rose-700 focus-visible:outline-rose-600; }
    .btn-success { @apply bg-emerald-600 text-white shadow-sm hover:bg-emerald-700 focus-visible:outline-emerald-600; }
    .btn-ghost { @apply text-slate-600 hover:bg-slate-100 hover:text-slate-900; }
    .btn-link { @apply px-0 py-0 text-brand-700 hover:text-brand-800 hover:underline; }
    .btn-icon { @apply inline-flex size-9 items-center justify-center rounded-lg text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-800 cursor-pointer; }

    /* Form controls */
    .form-label { @apply block text-sm font-medium text-slate-700; }
    .form-control {
        @apply block w-full rounded-lg border-0 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-brand-600 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-500;
    }
    .form-control[aria-invalid='true'] { @apply ring-rose-400 focus:ring-rose-500; }
    select.form-control { @apply pr-9; }
    .form-checkbox { @apply size-4 rounded border-slate-300 text-brand-600 focus:ring-brand-600; }
    .form-radio { @apply size-4 border-slate-300 text-brand-600 focus:ring-brand-600; }
    .form-hint { @apply mt-1.5 text-xs text-slate-500; }
    .form-error { @apply mt-1.5 flex items-start gap-1 text-xs font-medium text-rose-600; }

    /* Surfaces */
    .card { @apply rounded-xl bg-white shadow-sm ring-1 ring-slate-900/5; }
    .card-header { @apply flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4; }
    .card-title { @apply text-base font-semibold text-slate-900; }
    .card-body { @apply px-5 py-5; }

    /* Badges & tones (always paired with text + icon, never colour alone) */
    .badge { @apply inline-flex items-center gap-1 whitespace-nowrap rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset; }
    .tone-neutral { @apply bg-slate-100 text-slate-700 ring-slate-500/20; }
    .tone-brand { @apply bg-brand-50 text-brand-700 ring-brand-600/20; }
    .tone-info { @apply bg-sky-50 text-sky-700 ring-sky-600/20; }
    .tone-success { @apply bg-emerald-50 text-emerald-700 ring-emerald-600/20; }
    .tone-warning { @apply bg-amber-50 text-amber-800 ring-amber-600/25; }
    .tone-warning-strong { @apply bg-orange-100 text-orange-800 ring-orange-600/30; }
    .tone-danger { @apply bg-rose-50 text-rose-700 ring-rose-600/20; }
    .tone-danger-soft { @apply bg-rose-50 text-rose-600 ring-rose-400/20; }
    .tone-neutral-warning { @apply bg-stone-100 text-stone-700 ring-stone-500/25; }
    .tone-violet { @apply bg-violet-50 text-violet-700 ring-violet-600/20; }

    .icon-tile { @apply inline-flex size-10 shrink-0 items-center justify-center rounded-lg; }
    .icon-tile.tone-neutral, .icon-tile.tone-brand, .icon-tile.tone-info, .icon-tile.tone-success,
    .icon-tile.tone-warning, .icon-tile.tone-danger, .icon-tile.tone-violet { @apply ring-0; }

    /* Tables */
    /* The scroll box is also a size container: lists hide lower-priority columns when the card is
       narrow (class="hidden @5xl:table-cell"), measured on the card rather than the viewport.
       relative: absolutely positioned descendants (e.g. .sr-only labels in row actions) must be
       contained by the scroll box, otherwise they widen the whole page. */
    .table-wrap { @apply relative overflow-x-auto; container-type: inline-size; }
    .table { @apply min-w-full divide-y divide-slate-200 text-left text-sm; }
    .table thead th { @apply whitespace-nowrap bg-slate-50 px-3 py-3 text-xs font-semibold uppercase tracking-wide text-slate-500 first:pl-4 last:pr-4; }
    .table tbody { @apply divide-y divide-slate-100 bg-white; }
    .table tbody td { @apply px-3 py-3 align-top text-slate-700 first:pl-4 last:pr-4; }
    .table tbody tr { @apply transition-colors hover:bg-slate-50; }

    /* List toolbars. Short toolbars: the search grows, filters keep a comfortable width and the
       row wraps instead of overflowing. Long filter sets use .filter-grid below the search. */
    .table-toolbar { @apply flex flex-wrap items-center gap-3 border-b border-slate-100 p-4; }
    .table-toolbar > .toolbar-search { @apply min-w-0 flex-[1_1_18rem]; }
    .table-toolbar > .toolbar-filter { @apply w-auto min-w-0 flex-[1_1_11rem] sm:max-w-60; }
    .table-toolbar > .toolbar-end { @apply flex-none; }
    .filter-grid { @apply grid grid-cols-[repeat(auto-fill,minmax(11rem,1fr))] gap-3; }

    /* Row actions stay visible while a wide table scrolls horizontally (phones, tablets). */
    .table-sticky-actions > :is(thead, tbody) > tr > :last-child {
        @apply sticky right-0 z-[1] shadow-[inset_1px_0_0_var(--color-slate-100)];
    }
    .table-sticky-actions > tbody > tr > :last-child { @apply bg-white; }
    .table-sticky-actions > tbody > tr:hover > :last-child { @apply bg-slate-50; }
    .table-link { @apply font-semibold text-brand-700 hover:text-brand-800 hover:underline; }

    /* Description lists on detail pages */
    .detail-list { @apply grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2; }
    .detail-label { @apply text-xs font-medium uppercase tracking-wide text-slate-500; }
    .detail-value { @apply mt-1 text-sm text-slate-900 break-words; }

    /* Sidebar navigation */
    .nav-link {
        @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-slate-300 transition-colors hover:bg-white/5 hover:text-white;
    }
    .nav-link[aria-current='page'] { @apply bg-brand-600/90 text-white shadow-sm; }
    .nav-link svg { @apply size-5 shrink-0 opacity-80; }
    .nav-link[aria-current='page'] svg { @apply opacity-100; }
    .nav-sublink {
        @apply flex items-center gap-2 rounded-md py-1.5 pl-11 pr-3 text-[13px] text-slate-400 transition-colors hover:bg-white/5 hover:text-white;
    }
    .nav-sublink[aria-current='page'] { @apply bg-white/10 font-medium text-white; }
    .nav-section { @apply px-3 pb-1 pt-5 text-[11px] font-semibold uppercase tracking-wider text-slate-500; }

    /* Skeleton loading */
    .skeleton { @apply animate-pulse rounded-md bg-slate-200/80; }
}

/* ------------------------------------------------------------------ */
/* Print                                                               */
/* ------------------------------------------------------------------ */
@media print {
    @page { margin: 14mm; }
    body { background: #fff !important; }
    .no-print { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #e2e8f0; break-inside: avoid; }
    a { text-decoration: none !important; color: inherit !important; }
}