@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 - violet. 600 is the primary (#7C3AED) and 500 the hover
       (#8B5CF6), so every existing `brand-600 -> brand-700` hover in the app
       keeps working while the accent moves to the house purple. */
    --color-brand-50:  #f5f3ff;
    --color-brand-100: #ede9fe;
    --color-brand-200: #ddd6fe;
    --color-brand-300: #c4b5fd;
    --color-brand-400: #a78bfa;
    --color-brand-500: #8b5cf6;
    --color-brand-600: #7c3aed;
    --color-brand-700: #6d28d9;
    --color-brand-800: #5b21b6;
    --color-brand-900: #4c1d95;

    /* Dark-theme shell. Named rather than sprinkled as arbitrary values so the
       page, the sidebar and every card share one definition of "the dark". */
    --color-shell-bg:     #070b18;   /* page background            */
    --color-shell-nav:    #0f172a;   /* sidebar                    */
    --color-shell-card:   #111827;   /* cards, panels, table shell */
    --color-shell-raised: #1a2335;   /* hover / active row         */
}

@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;
    }

    /* Alpine sets x-cloak on anything that must not be visible before it takes
       over. Without this rule the attribute is decorative and every dropdown,
       drawer and toast paints once on load before disappearing. */
    [x-cloak] {
        display: none !important;
    }

    /* 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-white/[0.06] dark:bg-shell-card dark:shadow-black/30;
    }

    .surface-hover {
        @apply transition duration-200 hover:-translate-y-0.5 hover:shadow-lg
               hover:border-slate-300 dark:hover:border-white/10 dark:hover:bg-shell-raised;
    }

    .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;
    }

    /* Licences grid furniture -------------------------------------------
       The toolbar mixes links (server filters) with buttons (view-only
       refinements). They must look identical, so the shape is defined once
       here rather than per element. */
    .tool-btn {
        @apply inline-flex items-center gap-1.5 rounded-xl border border-slate-200 bg-white px-3 py-2
               text-sm font-medium text-slate-600 transition
               hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900
               dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-slate-300
               dark:hover:border-white/15 dark:hover:bg-white/[0.07] dark:hover:text-white;
    }

    .chip {
        @apply inline-flex items-center gap-1.5 whitespace-nowrap rounded-full border border-slate-200
               bg-white px-3 py-1.5 text-xs font-semibold text-slate-600 transition
               hover:border-brand-300 hover:text-brand-700
               dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-slate-300
               dark:hover:border-brand-500/40 dark:hover:text-white;
    }

    .chip-active {
        @apply border-transparent bg-gradient-to-r from-brand-600 to-brand-500 text-white
               shadow-[0_4px_14px_-4px_rgb(124_58_237/0.7)]
               hover:text-white dark:border-transparent dark:text-white;
    }

    /* The primary action. Gradient + glow, and the glow tightens on hover so
       the lift reads as depth rather than as a colour change. */
    .btn-primary {
        @apply inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-600 to-brand-500
               px-4 py-2 text-sm font-semibold text-white
               shadow-[0_8px_24px_-8px_rgb(124_58_237/0.9)] transition duration-200
               hover:-translate-y-0.5 hover:from-brand-500 hover:to-brand-400
               hover:shadow-[0_12px_28px_-8px_rgb(139_92_246/0.95)]
               active:translate-y-0 active:shadow-[0_4px_12px_-6px_rgb(124_58_237/0.9)];
    }

    /* Loading placeholder. Used for the table skeleton while a filtered page
       is being fetched, so the grid never blanks out mid-navigation. */
    .skeleton {
        @apply animate-pulse rounded-md bg-slate-200/80 dark:bg-white/[0.06];
    }

    /* Table rows. The stripe is a class rather than an :nth-child rule because
       rows are filtered client-side: with nth-child, hiding a row leaves two
       shaded rows side by side and the banding reads as a rendering fault. */
    .grid-row {
        @apply transition-colors duration-150 hover:bg-brand-50/50 dark:hover:bg-brand-500/[0.07];
    }

    .grid-row-alt {
        @apply bg-slate-50/60 dark:bg-white/[0.02];
    }

    /* Release notes -------------------------------------------------------
       The notes are author-written Markdown rendered by a whitelist in
       resources/js/versions.js. Only the structures that renderer can emit are
       styled here, so nothing in this block implies support for markup the
       renderer will not produce. */
    .release-notes {
        @apply text-sm leading-relaxed text-slate-600 dark:text-slate-300;
    }

    .release-notes h3,
    .release-notes h4,
    .release-notes h5,
    .release-notes h6 {
        @apply mb-1.5 mt-4 text-[13px] font-semibold uppercase tracking-wide
               text-slate-900 first:mt-0 dark:text-white;
    }

    .release-notes p {
        @apply my-2;
    }

    .release-notes ul {
        @apply my-2 list-disc space-y-1 pl-5 marker:text-brand-500;
    }

    .release-notes ol {
        @apply my-2 list-decimal space-y-1 pl-5 marker:text-brand-500;
    }

    .release-notes code {
        @apply rounded bg-slate-100 px-1 py-0.5 font-mono text-[12px] text-slate-800
               dark:bg-white/10 dark:text-slate-100;
    }

    .release-notes .notes-code {
        @apply my-3 overflow-x-auto rounded-xl bg-slate-900 p-3 text-[12px] leading-relaxed text-slate-100
               dark:bg-black/40;
    }

    .release-notes .notes-code code {
        @apply bg-transparent p-0 text-inherit;
    }

    .release-notes strong {
        @apply font-semibold text-slate-900 dark:text-white;
    }

    .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;
}