@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../views/**/*.blade.php';

/*
| Dark mode is driven by a `class` on <html>, not the OS preference alone, so
| the header toggle can override it and the choice can persist across visits.
*/
@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';

    /* Brand ramp - indigo/violet, matching the existing sidebar accent. */
    --color-brand-50:  #eef2ff;
    --color-brand-100: #e0e7ff;
    --color-brand-200: #c7d2fe;
    --color-brand-300: #a5b4fc;
    --color-brand-400: #818cf8;
    --color-brand-500: #6366f1;
    --color-brand-600: #4f46e5;
    --color-brand-700: #4338ca;
    --color-brand-800: #3730a3;
    --color-brand-900: #312e81;
}

@layer base {
    /* Visible focus for keyboard users everywhere, without a ring on mouse
       clicks. Accessibility requirement, defined once rather than per widget. */
    :focus-visible {
        outline: 2px solid var(--color-brand-500);
        outline-offset: 2px;
        border-radius: 0.375rem;
    }

    body {
        -webkit-font-smoothing: antialiased;
    }

    /* Scrollbar colours are resolved per surface rather than per element, so a
       scroll region only has to say it is slim and inherits the right palette.
       Literal values rather than theme vars: these must survive whatever the
       build decides to tree-shake out of the default palette. */
    :root {
        --scrollbar-thumb: #cbd5e1;         /* slate-300 */
        --scrollbar-thumb-hover: #94a3b8;   /* slate-400 */
    }

    .dark {
        --scrollbar-thumb: #334155;         /* slate-700 */
        --scrollbar-thumb-hover: #475569;   /* slate-600 */
    }
}

@layer components {
    /* One surface definition reused by every card, so radius/shadow/border stay
       consistent instead of being retyped (and subtly varied) per widget. */
    .surface {
        @apply rounded-2xl border border-slate-200/80 bg-white shadow-sm
               dark:border-slate-700/60 dark:bg-slate-800/60;
    }

    .surface-hover {
        @apply transition duration-200 hover:-translate-y-0.5 hover:shadow-lg
               hover:border-slate-300 dark:hover:border-slate-600;
    }

    .nav-link {
        @apply flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium
               text-slate-300 transition hover:bg-white/5 hover:text-white;
    }

    .nav-link-active {
        @apply bg-gradient-to-r from-brand-600 to-brand-500 text-white shadow-lg;
    }

    .nav-link-disabled {
        @apply cursor-not-allowed text-slate-500 opacity-50 hover:bg-transparent hover:text-slate-500;
    }

    /* Data-grid furniture -------------------------------------------------
       Defined once so the customers page (and the pages that follow it) share
       one set of controls rather than each retyping a slightly different one. */
    .filter-select {
        @apply rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700
               focus:border-brand-400 focus:outline-none
               dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200;
    }

    .filter-input {
        @apply mt-1 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm
               placeholder:text-slate-400 focus:border-brand-400 focus:outline-none
               dark:border-slate-700 dark:bg-slate-900 dark:text-white;
    }

    .filter-label {
        @apply text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400;
    }

    .bulk-btn {
        @apply inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-1.5
               text-xs font-semibold text-slate-700 transition hover:bg-slate-50
               dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700;
    }

    .page-btn {
        @apply grid size-8 place-items-center rounded-lg border border-slate-200 text-slate-500
               transition hover:bg-slate-50 hover:text-slate-700
               dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white;
    }

    .checkbox {
        @apply size-4 cursor-pointer rounded border-slate-300 text-brand-600
               focus:ring-brand-500 dark:border-slate-600 dark:bg-slate-800;
    }

    .profile-heading {
        @apply mb-2 text-[11px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400;
    }

    .profile-empty {
        @apply rounded-xl border border-dashed border-slate-200 p-3 text-center text-xs text-slate-400
               dark:border-slate-700 dark:text-slate-500;
    }

    /* A scrollbar that belongs to the surface it sits on. The default OS one is
       a wide light stripe, which reads as a seam cut through the dark sidebar
       rather than as part of it.

       Both syntaxes are set on purpose: Firefox honours scrollbar-width/color,
       while Chromium and Safari only respond to the -webkit pseudo-elements. */
    .scroll-slim {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb) transparent;
    }

    .scroll-slim::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scroll-slim::-webkit-scrollbar-track,
    .scroll-slim::-webkit-scrollbar-corner {
        background: transparent;
    }

    .scroll-slim::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        /* A transparent border plus content-box clipping makes the thumb look
           slimmer than it is, so it stays easy to grab while reading as a hint
           rather than a bar. */
        border: 2px solid transparent;
        background-clip: content-box;
        border-radius: 9999px;
    }

    .scroll-slim::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover);
    }

    /* The sidebar is dark in BOTH themes, so it opts out of the light palette
       instead of following the root theme. */
    .scroll-on-dark {
        --scrollbar-thumb: #334155;         /* slate-700 */
        --scrollbar-thumb-hover: #475569;   /* slate-600 */
    }
}

/* Keep ApexCharts tooltips legible in dark mode without overriding the library
   wholesale. */
.apexcharts-tooltip {
    @apply !rounded-lg !border-slate-200 !shadow-lg dark:!border-slate-700 dark:!bg-slate-800;
}

.apexcharts-tooltip-title {
    @apply !border-slate-200 !bg-slate-50 !font-semibold dark:!border-slate-700 dark:!bg-slate-900;
}

.dark .apexcharts-tooltip-text-y-label,
.dark .apexcharts-tooltip-text-y-value {
    @apply !text-slate-100;
}