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

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

@import '../../vendor/livewire/flux/dist/flux.css';

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

/* Expose --accent/--surface/etc. as Tailwind color utilities. `inline`
 * keeps the var() reference at usage time so `.dark { --accent: … }` can
 * swap themes via the same utility (`bg-accent`, `text-foreground`, …). */
@theme inline {
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-surface: var(--surface);
    --color-surface-foreground: var(--surface-foreground);
    --color-surface-secondary: var(--surface-secondary);
    --color-surface-tertiary: var(--surface-tertiary);
    --color-foreground: var(--foreground);
    --color-muted-foreground: var(--muted-foreground);
    --color-background: var(--background);
    --color-border: var(--border);
}

/* ============================================================
 * Dashboard design tokens
 * The auth pages (and any premium surface) read from these
 * variables so a project can re-skin everything by swapping
 * --accent / --surface without touching styles.
 * ============================================================ */
:root {
    --accent: oklch(0.585 0.22 282);
    --accent-foreground: oklch(0.99 0 0);

    --surface: oklch(0.995 0.004 280);
    --surface-secondary: oklch(0.97 0.012 280);
    --surface-tertiary: oklch(0.955 0.015 280);
    --surface-foreground: oklch(0.22 0.02 280);
    --surface-secondary-foreground: oklch(0.3 0.02 280);

    --background: oklch(0.98 0.006 280);
    --foreground: oklch(0.185 0.02 270);
    --muted-foreground: oklch(0.5 0.025 270);
    --border: oklch(0.88 0.012 280);
}

.dark {
    --accent: oklch(0.72 0.18 282);
    --accent-foreground: oklch(0.99 0 0);

    --surface: oklch(0.155 0.022 280);
    --surface-secondary: oklch(0.13 0.022 280);
    --surface-tertiary: oklch(0.11 0.022 280);
    --surface-foreground: oklch(0.95 0.01 280);
    --surface-secondary-foreground: oklch(0.86 0.01 280);

    --background: oklch(0.09 0.018 280);
    --foreground: oklch(0.95 0.01 280);
    --muted-foreground: oklch(0.66 0.022 270);
    --border: oklch(0.27 0.022 280);
}

/* ============================================================
 * Auth pages — full-bleed gradient + glass card
 * All colors derive from --accent / --surface / --foreground so
 * swapping the accent reskins the entire auth flow.
 * ============================================================ */
@layer components {
    .dash-auth-body {
        background:
            radial-gradient(ellipse at 18% 18%, color-mix(in oklch, var(--accent) 22%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at 82% 88%, color-mix(in oklch, var(--accent) 14%, transparent) 0%, transparent 55%),
            linear-gradient(
                135deg,
                color-mix(in oklch, var(--accent) 5%, var(--background)) 0%,
                var(--background) 50%,
                color-mix(in oklch, var(--accent) 4%, var(--background)) 100%
            );
        color: var(--foreground);
    }

    .dash-auth-shell {
        background-color: var(--surface);
        border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
        box-shadow:
            0 30px 80px -20px color-mix(in oklch, var(--accent) 18%, transparent),
            0 10px 30px -10px color-mix(in oklch, var(--foreground) 12%, transparent);
    }

    .dash-auth-form-panel {
        background:
            radial-gradient(ellipse at 100% 0%, color-mix(in oklch, var(--accent) 9%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at 0% 100%, color-mix(in oklch, var(--accent) 7%, transparent) 0%, transparent 50%),
            radial-gradient(ellipse at 50% 50%, color-mix(in oklch, var(--accent) 4%, transparent) 0%, transparent 70%),
            var(--surface);
        color: var(--surface-foreground);
    }

    .dash-auth-hero-panel {
        background:
            radial-gradient(ellipse at 25% 15%, color-mix(in oklch, var(--accent) 18%, transparent) 0%, transparent 55%),
            radial-gradient(ellipse at 80% 85%, color-mix(in oklch, var(--accent) 12%, transparent) 0%, transparent 55%),
            linear-gradient(
                160deg,
                color-mix(in oklch, var(--accent) 6%, var(--surface-secondary)) 0%,
                var(--surface-secondary) 50%,
                color-mix(in oklch, var(--accent) 4%, var(--surface-tertiary)) 100%
            );
        color: var(--surface-secondary-foreground);
    }

    .dash-auth-control {
        @apply inline-flex items-center gap-1 rounded-full backdrop-blur-xl;
        color: var(--surface-foreground);
        background-color: color-mix(in oklch, var(--surface) 78%, transparent);
        border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
        box-shadow: 0 18px 45px -30px color-mix(in oklch, var(--accent) 35%, transparent);
    }

    /* ----------------------------------------------------------------
     * Brand chip — small uppercase pill with sparkles icon
     * ---------------------------------------------------------------- */
    .dash-auth-chip {
        @apply inline-flex w-fit items-center gap-1.5 rounded-full px-3 py-1
               text-[11px] font-semibold uppercase tracking-[0.14em]
               ring-1 ring-inset transition-colors;
        color: var(--accent);
        background: linear-gradient(
            90deg,
            color-mix(in oklch, var(--accent) 12%, transparent) 0%,
            color-mix(in oklch, var(--accent) 10%, transparent) 100%
        );
        border-color: color-mix(in oklch, var(--accent) 18%, transparent);
        box-shadow:
            inset 0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent),
            0 1px 0 0 color-mix(in oklch, var(--accent) 8%, transparent);
    }

    /* ----------------------------------------------------------------
     * Gradient heading — bg-clip-text gradient (foreground → accent)
     * ---------------------------------------------------------------- */
    .dash-auth-heading {
        background-image: linear-gradient(
            135deg,
            var(--foreground) 0%,
            color-mix(in oklch, var(--foreground) 80%, var(--accent)) 100%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

    /* ----------------------------------------------------------------
     * Animated divider — short accent bar + fading hairline
     * ---------------------------------------------------------------- */
    .dash-auth-divider-bar {
        @apply h-1 w-12 rounded-full;
        background: linear-gradient(
            90deg,
            var(--accent) 0%,
            color-mix(in oklch, var(--accent) 70%, transparent) 100%
        );
        box-shadow: 0 0 12px color-mix(in oklch, var(--accent) 35%, transparent);
    }

    .dash-auth-divider-line {
        @apply h-px flex-1;
        background: linear-gradient(
            90deg,
            color-mix(in oklch, var(--border) 60%, transparent) 0%,
            transparent 100%
        );
    }

    /* ----------------------------------------------------------------
     * Premium soft input — pill shape with accent focus ring
     * ---------------------------------------------------------------- */
    .dash-auth-input {
        @apply block w-full appearance-none rounded-full px-5 py-2 text-[0.9375rem] font-medium
               outline-none transition;
        color: var(--surface-foreground);
        background-color: color-mix(in oklch, var(--accent) 6%, var(--surface));
        border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
        box-shadow:
            inset 0 1px 0 color-mix(in oklch, white 12%, transparent),
            0 16px 30px -28px color-mix(in oklch, var(--accent) 30%, transparent);
    }

    .dash-auth-input::placeholder {
        color: var(--muted-foreground);
        font-weight: 500;
    }

    .dash-auth-input:hover {
        background-color: color-mix(in oklch, var(--accent) 4%, var(--surface));
    }

    .dash-auth-input:focus {
        border-color: color-mix(in oklch, var(--accent) 42%, transparent);
        background-color: var(--surface);
        box-shadow:
            inset 0 1px 0 color-mix(in oklch, white 14%, transparent),
            0 0 0 4px color-mix(in oklch, var(--accent) 18%, transparent),
            0 18px 30px -28px color-mix(in oklch, var(--accent) 32%, transparent);
    }

    /* ----------------------------------------------------------------
     * Accent submit button — gradient + shine sweep + inner glow
     * ---------------------------------------------------------------- */
    .dash-auth-submit {
        @apply relative flex h-11 w-full items-center justify-center gap-2 overflow-hidden rounded-full
               text-sm font-semibold tracking-wide transition-all
               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
               disabled:cursor-not-allowed disabled:opacity-60 hover:brightness-105;
        color: var(--accent-foreground);
        background: linear-gradient(
            135deg,
            var(--accent) 0%,
            color-mix(in oklch, var(--accent) 80%, transparent) 100%
        );
        --tw-ring-color: color-mix(in oklch, var(--accent) 40%, transparent);
        --tw-ring-offset-color: var(--surface);
        box-shadow:
            0 8px 20px -4px color-mix(in oklch, var(--accent) 45%, transparent),
            0 4px 8px -2px color-mix(in oklch, var(--accent) 20%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 25%, transparent);
    }

    .dash-auth-submit::before {
        content: '';
        @apply pointer-events-none absolute inset-0 -translate-x-full transition-transform duration-700 ease-out;
        background: linear-gradient(90deg, transparent, color-mix(in oklch, white 30%, transparent), transparent);
    }

    .dash-auth-submit:hover::before {
        @apply translate-x-full;
    }

    .dash-auth-submit::after {
        content: '';
        @apply pointer-events-none absolute inset-0 opacity-0 transition-opacity;
        background: radial-gradient(
            circle at 50% 120%,
            color-mix(in oklch, white 28%, transparent) 0%,
            transparent 60%
        );
    }

    .dash-auth-submit:hover::after {
        @apply opacity-100;
    }

    /* ----------------------------------------------------------------
     * Custom checkbox — round, accent-filled when checked
     * ---------------------------------------------------------------- */
    .dash-auth-checkbox {
        @apply size-5 shrink-0 cursor-pointer appearance-none rounded-md transition;
        background-color: var(--surface);
        border: 1px solid var(--border);
        box-shadow: 0 1px 2px color-mix(in oklch, var(--foreground) 6%, transparent);
    }

    .dash-auth-checkbox:hover {
        border-color: color-mix(in oklch, var(--accent) 60%, var(--border));
    }

    .dash-auth-checkbox:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
    }

    .dash-auth-checkbox:checked {
        background-color: var(--accent);
        border-color: var(--accent);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5'/%3E%3C/svg%3E");
        background-size: 14px 14px;
        background-position: center;
        background-repeat: no-repeat;
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
    }

    /* ----------------------------------------------------------------
     * Forgot/back link — accent text with sliding underline
     * Add the `group` utility on the anchor in markup to enable the
     * sliding underline on hover.
     * ---------------------------------------------------------------- */
    .dash-auth-link {
        @apply inline-flex items-center gap-1 text-sm font-medium transition-colors hover:gap-1.5;
        color: var(--accent);
    }

    .dash-auth-link-underline {
        @apply relative;
    }

    .dash-auth-link-underline::after {
        content: '';
        @apply absolute -bottom-0.5 left-0 right-0 h-px origin-left scale-x-0 transition-transform;
        background-color: var(--accent);
    }

    .dash-auth-link:hover .dash-auth-link-underline::after {
        @apply scale-x-100;
    }

    /* Kill autofill yellow + match the soft input bg */
    .dash-auth-stage input:-webkit-autofill,
    .dash-auth-stage input:-webkit-autofill:hover,
    .dash-auth-stage input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--surface-foreground);
        -webkit-box-shadow: 0 0 0 1000px color-mix(in oklch, var(--accent) 6%, var(--surface)) inset;
        caret-color: var(--surface-foreground);
        transition: background-color 9999s ease-in-out 0s;
    }

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

    /* ----------------------------------------------------------------
     * Floating accent blob — used for the decorative orbs behind the
     * auth card. Each instance just sets size/position via utilities.
     * ---------------------------------------------------------------- */
    .dash-auth-blob {
        @apply pointer-events-none absolute rounded-full blur-3xl;
        background-color: color-mix(in oklch, var(--accent) 22%, transparent);
    }

    /* ============================================================
     * Dashboard shell (post-login)
     * Mirrors the auth surface language: token-driven gradients,
     * glass surfaces, accent borders, and accent-tinted shadows.
     * ============================================================ */
    .dash-shell {
        @apply min-h-screen;
        background:
            radial-gradient(ellipse at 0% 0%, color-mix(in oklch, var(--accent) 9%, transparent) 0%, transparent 50%),
            radial-gradient(ellipse at 100% 100%, color-mix(in oklch, var(--accent) 6%, transparent) 0%, transparent 55%),
            linear-gradient(
                160deg,
                color-mix(in oklch, var(--accent) 3%, var(--background)) 0%,
                var(--background) 60%,
                color-mix(in oklch, var(--accent) 2%, var(--background)) 100%
            );
        color: var(--foreground);
    }

    /* ----------------------------------------------------------------
     * Floating sidebar — detached from edges, rounded, glass. Same
     * visual language as the topbar so the shell reads as a set of
     * floating surfaces rather than a flat chrome.
     * ---------------------------------------------------------------- */
    .dash-sidebar {
        @apply fixed top-3 bottom-3 start-3 z-30 flex w-60 flex-col overflow-hidden rounded-3xl backdrop-blur-2xl;
        background-color: color-mix(in oklch, var(--surface) 60%, transparent);
        border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border));
        box-shadow:
            0 22px 55px -22px color-mix(in oklch, var(--accent) 32%, transparent),
            0 8px 20px -12px color-mix(in oklch, var(--foreground) 10%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
        transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1),
                    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.dash-sidebar-collapsed .dash-sidebar {
        @apply w-[4.5rem];
    }

    /* Content wrapper offset — matches start-3 (12px) + w-60 (240px) + gap.
     * Swaps to a tighter offset when the sidebar is collapsed. */
    .dash-shell-main {
        padding-inline-start: 0;
        transition: padding-inline-start 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (min-width: 1024px) {
        .dash-shell-main {
            /* start-3 (0.75) + w-60 (15) + breathing room (0.5) */
            padding-inline-start: 16.25rem;
        }

        body.dash-sidebar-collapsed .dash-shell-main {
            /* start-3 (0.75) + w-[4.5rem] + breathing room (0.5) */
            padding-inline-start: 5.75rem;
        }
    }

    .dash-sidebar-brand {
        @apply flex h-16 shrink-0 items-center gap-2 px-4;
        border-bottom: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
    }

    body.dash-sidebar-collapsed .dash-sidebar-brand {
        @apply justify-center px-2;
    }

    .dash-sidebar-footer {
        @apply p-3;
        border-top: 1px solid color-mix(in oklch, var(--accent) 14%, var(--border));
    }

    /* Anything wearing this class collapses out of view when the
     * sidebar is collapsed — brand text, nav labels, footer text,
     * group headers. Items keep their icon only. */
    body.dash-sidebar-collapsed .dash-sidebar-label,
    body.dash-sidebar-collapsed .dash-nav-group-label {
        @apply pointer-events-none hidden;
    }

    body.dash-sidebar-collapsed .dash-nav-item {
        @apply justify-center px-0;
    }

    /* The active accent bar would land flush with the rounded edge in
     * collapsed mode — pull it in so it stays visible as a slim accent. */
    body.dash-sidebar-collapsed .dash-nav-item[aria-current='page']::before {
        @apply inset-y-2 start-1 w-0.5;
    }

    /* Sidebar collapse toggle — sits in the brand area, mirrors chip
     * language but ghost-ier so it doesn't compete with the logo. */
    .dash-sidebar-toggle {
        @apply inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full transition;
        color: var(--muted-foreground);
        background-color: color-mix(in oklch, var(--surface) 70%, transparent);
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    }

    .dash-sidebar-toggle:hover {
        color: var(--accent);
        border-color: color-mix(in oklch, var(--accent) 32%, transparent);
        background-color: color-mix(in oklch, var(--accent) 10%, var(--surface));
    }

    .dash-sidebar-toggle svg {
        @apply transition-transform duration-200;
    }

    body.dash-sidebar-collapsed .dash-sidebar-toggle svg {
        @apply rotate-180;
    }

    /* Footer logout button keeps `w-full justify-start` when expanded;
     * centre its icon when the sidebar collapses to a strip. */
    body.dash-sidebar-collapsed .dash-sidebar-footer button {
        justify-content: center;
    }

    .dash-nav-group-label {
        @apply px-3 pb-1 pt-3 text-[0.6875rem] font-semibold uppercase tracking-[0.08em];
        color: color-mix(in oklch, var(--muted-foreground) 90%, transparent);
    }

    .dash-nav-item {
        @apply relative flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition;
        color: var(--surface-foreground);
    }

    .dash-nav-item:hover {
        background-color: color-mix(in oklch, var(--accent) 8%, transparent);
        color: var(--accent);
    }

    .dash-nav-item[aria-current='page'] {
        color: var(--accent);
        background: linear-gradient(
            90deg,
            color-mix(in oklch, var(--accent) 16%, transparent) 0%,
            color-mix(in oklch, var(--accent) 8%, transparent) 100%
        );
        box-shadow:
            inset 0 0 0 1px color-mix(in oklch, var(--accent) 22%, transparent),
            0 4px 12px -6px color-mix(in oklch, var(--accent) 28%, transparent);
    }

    .dash-nav-item[aria-current='page']::before {
        content: '';
        @apply pointer-events-none absolute inset-y-1.5 start-0 w-1 rounded-full;
        background: linear-gradient(
            180deg,
            var(--accent) 0%,
            color-mix(in oklch, var(--accent) 60%, transparent) 100%
        );
        box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 50%, transparent);
    }

    /* ----------------------------------------------------------------
     * Floating topbar — rounded, blurred, detached from edges. Each
     * action sits in its own circular chip so they read as separate
     * controls (auth uses the same chip language for its switcher).
     * ---------------------------------------------------------------- */
    .dash-topbar {
        @apply sticky top-3 z-20 mx-3 mt-3 flex h-14 items-center justify-between gap-2 rounded-full px-3 backdrop-blur-2xl lg:mx-5;
        background-color: color-mix(in oklch, var(--surface) 60%, transparent);
        border: 1px solid color-mix(in oklch, var(--accent) 18%, var(--border));
        box-shadow:
            0 22px 55px -22px color-mix(in oklch, var(--accent) 32%, transparent),
            0 8px 20px -12px color-mix(in oklch, var(--foreground) 10%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
    }

    .dash-topbar-title {
        @apply truncate ps-2 pe-1 text-sm font-semibold tracking-tight;
        color: var(--surface-foreground);
    }

    .dash-topbar-chip {
        @apply relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 h-9 min-w-9 rounded-full px-2.5 text-xs font-semibold uppercase tracking-wider;
        color: var(--surface-foreground);
        background-color: color-mix(in oklch, var(--surface) 78%, transparent);
        box-shadow:
            0 4px 14px -8px color-mix(in oklch, var(--accent) 28%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 12%, transparent);
        backdrop-filter: blur(12px);
        transition:
            transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
            color 180ms ease,
            background-color 180ms ease,
            box-shadow 200ms ease;
    }

    .dash-topbar-chip:hover {
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 10%, var(--surface));
        box-shadow:
            0 10px 24px -10px color-mix(in oklch, var(--accent) 42%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 16%, transparent);
        transform: translateY(-1px) scale(1.06);
    }

    .dash-topbar-chip:active {
        transform: translateY(0) scale(0.98);
        transition-duration: 90ms;
    }

    /* Icon-only variant — perfect circle, no inner padding */
    .dash-topbar-chip--icon {
        @apply size-9 min-w-0 px-0;
    }

    /* Active/pressed state for a topbar chip (e.g. peek-blur on) — fills
     * with the accent so the user knows the toggle is currently engaged. */
    .dash-topbar-chip.is-peeking {
        color: var(--accent-foreground);
        background-color: var(--accent);
        box-shadow:
            0 10px 24px -10px color-mix(in oklch, var(--accent) 55%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
    }

    .dash-topbar-chip.is-peeking:hover {
        color: var(--accent-foreground);
        background-color: color-mix(in oklch, var(--accent) 88%, transparent);
    }

    /* ----------------------------------------------------------------
     * Topbar cluster — a single glass pill that hosts every end-side
     * action as a unified control deck. Chips inside go flat (the
     * cluster provides the surface) and gain a magnetic hover lift.
     * A spotlight (::before, driven by Alpine mousemove → --mx/--my)
     * follows the cursor across the deck for a premium feel.
     * ---------------------------------------------------------------- */
    .dash-topbar-cluster {
        @apply relative inline-flex items-center gap-1 rounded-full p-1 backdrop-blur-xl;
        background-color: color-mix(in oklch, var(--surface) 55%, transparent);
        box-shadow:
            0 14px 32px -16px color-mix(in oklch, var(--accent) 30%, transparent),
            0 4px 12px -8px color-mix(in oklch, var(--foreground) 10%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
        isolation: isolate;
    }

    .dash-topbar-cluster::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
            circle 90px at var(--mx, 50%) var(--my, 50%),
            color-mix(in oklch, var(--accent) 22%, transparent) 0%,
            transparent 70%
        );
        opacity: 0;
        transition: opacity 220ms ease;
        pointer-events: none;
        z-index: 0;
    }

    .dash-topbar-cluster:hover::before {
        opacity: 1;
    }

    .dash-topbar-cluster > * {
        position: relative;
        z-index: 1;
    }

    /* Chips inside the cluster shed their own surface — the cluster
     * carries it. They keep the hover lift and the active fill. */
    .dash-topbar-cluster > .dash-topbar-chip {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .dash-topbar-cluster > .dash-topbar-chip:hover {
        background-color: color-mix(in oklch, var(--accent) 16%, transparent);
        box-shadow: 0 8px 20px -8px color-mix(in oklch, var(--accent) 40%, transparent);
    }

    .dash-topbar-cluster > .dash-topbar-chip.is-peeking {
        background-color: var(--accent);
        color: var(--accent-foreground);
        box-shadow:
            0 10px 24px -10px color-mix(in oklch, var(--accent) 55%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
    }

    /* Hairline divider between logical chip groups (preferences | actions
     * | user). Kept thin so it reads as a separator, not a hard edge. */
    .dash-topbar-cluster-divider {
        @apply mx-0.5 h-5 w-px shrink-0 self-center;
        background: linear-gradient(
            180deg,
            transparent 0%,
            color-mix(in oklch, var(--border) 75%, transparent) 25%,
            color-mix(in oklch, var(--border) 75%, transparent) 75%,
            transparent 100%
        );
    }

    /* Notification dot (accent pulse on the chip's outer ring) */
    .dash-topbar-dot {
        @apply pointer-events-none absolute end-1 top-1 size-2 rounded-full;
        background-color: var(--accent);
        box-shadow:
            0 0 0 2px var(--surface),
            0 0 10px color-mix(in oklch, var(--accent) 60%, transparent);
    }

    .dash-main {
        @apply mx-auto w-full max-w-7xl px-4 py-6 lg:px-8;
        transition: filter 260ms ease, opacity 260ms ease;
    }

    /* Toggled by the topbar peek-blur chip on hover/focus — gives the
     * user a quick "is anyone looking?" glance without leaving the page.
     * pointer-events guard prevents accidental clicks while blurred. */
    body.dash-main-blurred .dash-main {
        filter: blur(10px) saturate(115%);
        opacity: 0.55;
        pointer-events: none;
        user-select: none;
    }

    .dash-page-heading {
        @apply text-2xl font-semibold tracking-tight;
        color: var(--foreground);
    }

    .dash-page-subheading {
        @apply mt-1 text-sm;
        color: var(--muted-foreground);
    }

    .dash-card {
        @apply rounded-2xl p-6;
        background-color: color-mix(in oklch, var(--surface) 92%, transparent);
        border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
        box-shadow:
            0 1px 0 0 color-mix(in oklch, white 6%, transparent) inset,
            0 14px 40px -28px color-mix(in oklch, var(--accent) 22%, transparent),
            0 4px 12px -8px color-mix(in oklch, var(--foreground) 8%, transparent);
    }

    .dash-card-divider {
        border-color: color-mix(in oklch, var(--border) 70%, transparent);
    }

    .dash-stat-label {
        @apply text-xs font-semibold uppercase tracking-[0.12em];
        color: var(--muted-foreground);
    }

    .dash-stat-value {
        @apply mt-1 text-3xl font-semibold tabular-nums;
        color: var(--foreground);
    }

    /* ----------------------------------------------------------------
     * KPI stat card — extends .dash-card with an ambient accent blob,
     * lift on hover, accent-tinted icon tile, delta pill, and a
     * sparkline filling the card width.
     * ---------------------------------------------------------------- */
    .dash-stat-card {
        @apply relative overflow-hidden;
        isolation: isolate;
        transition:
            transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 220ms ease;
    }

    .dash-stat-card::before {
        content: '';
        @apply pointer-events-none absolute -end-12 -top-12 size-40 rounded-full;
        background: radial-gradient(
            circle at center,
            color-mix(in oklch, var(--accent) 22%, transparent) 0%,
            transparent 65%
        );
        transition: transform 320ms ease, opacity 220ms ease;
        z-index: 0;
    }

    .dash-stat-card > * {
        position: relative;
        z-index: 1;
    }

    .dash-stat-card:hover {
        transform: translateY(-2px);
        box-shadow:
            0 1px 0 0 color-mix(in oklch, white 8%, transparent) inset,
            0 24px 55px -26px color-mix(in oklch, var(--accent) 38%, transparent),
            0 6px 16px -10px color-mix(in oklch, var(--foreground) 12%, transparent);
    }

    .dash-stat-card:hover::before {
        transform: translate(-6px, 6px) scale(1.15);
    }

    .dash-stat-icon {
        @apply inline-flex size-11 items-center justify-center rounded-2xl;
        color: var(--accent);
        background: linear-gradient(
            135deg,
            color-mix(in oklch, var(--accent) 24%, transparent) 0%,
            color-mix(in oklch, var(--accent) 8%, transparent) 100%
        );
        box-shadow:
            0 8px 18px -10px color-mix(in oklch, var(--accent) 42%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
    }

    .dash-stat-delta {
        @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold tabular-nums;
    }

    .dash-stat-delta--up {
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 12%, transparent);
    }

    .dash-stat-delta--down {
        color: var(--muted-foreground);
        background-color: color-mix(in oklch, var(--muted-foreground) 10%, transparent);
    }

    .dash-stat-sparkline {
        @apply mt-4 h-10 w-full;
        color: var(--accent);
    }

    /* ----------------------------------------------------------------
     * Activity feed — used on the home overview. Hairlines between
     * items derived from --border so it adapts to themes.
     * ---------------------------------------------------------------- */
    .dash-activity-list > * + * {
        border-top: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
    }

    .dash-activity-item {
        @apply flex items-start gap-3 py-3;
    }

    .dash-activity-icon {
        @apply inline-flex size-9 shrink-0 items-center justify-center rounded-xl;
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 10%, transparent);
    }

    .dash-activity-message {
        @apply text-sm font-medium;
        color: var(--surface-foreground);
    }

    .dash-activity-time {
        @apply text-xs;
        color: var(--muted-foreground);
    }

    .dash-table {
        @apply w-full text-sm;
        color: var(--surface-foreground);
    }

    .dash-table thead th {
        @apply px-4 py-3 text-start text-[0.6875rem] font-semibold uppercase tracking-[0.08em];
        color: var(--muted-foreground);
        background-color: color-mix(in oklch, var(--accent) 5%, transparent);
        border-bottom: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
    }

    .dash-table tbody td {
        @apply px-4 py-3 align-middle;
        border-bottom: 1px solid color-mix(in oklch, var(--border) 45%, transparent);
    }

    .dash-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .dash-table tbody tr {
        @apply transition;
    }

    .dash-table tbody tr:hover {
        background-color: color-mix(in oklch, var(--accent) 6%, transparent);
    }

    /* Soft muted text helper for use inside .dash-card / .dash-table cells */
    .dash-muted {
        color: var(--muted-foreground);
    }

    /* Bulk-actions bar — accent tinted, replaces hardcoded emerald usage */
    .dash-bulk-bar {
        @apply flex items-center justify-between px-4 py-2 text-sm;
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 8%, transparent);
        border-bottom: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
    }

    /* Toolbar separator above the table (filters + actions row) */
    .dash-toolbar {
        @apply flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between;
        border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        background-color: color-mix(in oklch, var(--surface) 60%, transparent);
    }

    .dash-pagination {
        @apply p-3;
        border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        background-color: color-mix(in oklch, var(--surface) 60%, transparent);
    }
}