@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;
        /* Prevents decorative elements (rotated/translated credit cards,
         * blurred blobs, gooey filters) from leaking past the viewport
         * edge and forcing a horizontal scrollbar on narrow screens. */
        overflow-x: clip;
        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 — supports two states:
     *   • Expanded (default): wider rail with icon + label.
     *   • Collapsed (`body.dash-sidebar-collapsed`): icon-only narrow strip.
     * Active item is a dark filled pill (foreground-colored), white icon.
     * ---------------------------------------------------------------- */
    .dash-sidebar {
        @apply fixed top-4 bottom-4 start-4 z-30 flex w-56 flex-col overflow-hidden rounded-[2rem] py-4;
        background-color: var(--surface);
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        box-shadow:
            0 22px 55px -22px color-mix(in oklch, var(--foreground) 14%, transparent),
            0 8px 20px -12px color-mix(in oklch, var(--foreground) 8%, transparent);
        transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    body.dash-sidebar-collapsed .dash-sidebar {
        @apply w-16 items-center;
    }

    /* Content wrapper offset — accounts for sidebar width + gap.
     * min-w-0 lets the column shrink inside the flex shell so its
     * children's text/grid contents truncate instead of pushing wider. */
    .dash-shell-main {
        @apply min-w-0;
        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-4 (1rem) + w-56 (14rem) + breathing room (0.75rem) */
            padding-inline-start: 15.75rem;
        }

        body.dash-sidebar-collapsed .dash-shell-main {
            /* start-4 (1rem) + w-16 (4rem) + breathing room (0.75rem) */
            padding-inline-start: 5.75rem;
        }
    }

    .dash-sidebar-brand {
        @apply flex shrink-0 items-center justify-between gap-2 px-3 pb-3;
    }

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

    .dash-sidebar-footer {
        @apply flex flex-col gap-1 px-3 pt-3;
    }

    body.dash-sidebar-collapsed .dash-sidebar-footer {
        @apply items-center px-0;
    }

    /* Label inline next to nav icons — hidden when collapsed */
    body.dash-sidebar-collapsed .dash-sidebar-label,
    body.dash-sidebar-collapsed .dash-nav-group-label {
        @apply pointer-events-none hidden;
    }

    /* Sidebar collapse toggle — small ghost button at the brand area */
    .dash-sidebar-toggle {
        @apply inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition;
        color: var(--muted-foreground);
        background-color: transparent;
    }

    .dash-sidebar-toggle:hover {
        color: var(--foreground);
        background-color: color-mix(in oklch, var(--foreground) 6%, transparent);
    }

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

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

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

    /* ----------------------------------------------------------------
     * Nav item — expanded: full-width row with icon + label.
     *            collapsed: 40px square (icon only).
     * Active state inverts to foreground-colored fill in both modes.
     * ---------------------------------------------------------------- */
    .dash-nav-item {
        @apply relative flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition;
        color: var(--muted-foreground);
    }

    body.dash-sidebar-collapsed .dash-nav-item {
        @apply size-10 justify-center gap-0 p-0;
    }

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

    .dash-nav-item[aria-current='page'] {
        color: var(--surface);
        background-color: var(--foreground);
        box-shadow:
            0 6px 16px -6px color-mix(in oklch, var(--foreground) 40%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
    }

    .dash-nav-item[aria-current='page']:hover {
        color: var(--surface);
        background-color: var(--foreground);
    }

    /* Avatar at the very bottom of the sidebar — small circle, no chrome */
    .dash-sidebar-avatar {
        @apply relative flex shrink-0 items-center gap-3 rounded-xl p-1.5 transition;
    }

    .dash-sidebar-avatar:hover {
        background-color: color-mix(in oklch, var(--foreground) 6%, transparent);
    }

    body.dash-sidebar-collapsed .dash-sidebar-avatar {
        @apply size-10 justify-center p-0;
    }

    .dash-sidebar-avatar-img {
        @apply relative flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full;
        background-color: color-mix(in oklch, var(--accent) 14%, var(--surface));
        box-shadow: 0 0 0 1px color-mix(in oklch, var(--border) 60%, transparent);
    }

    .dash-sidebar-avatar-img img {
        @apply size-full object-cover;
    }

    .dash-sidebar-avatar-meta {
        @apply flex min-w-0 flex-1 flex-col leading-tight;
    }

    .dash-sidebar-avatar-name {
        @apply truncate text-sm font-medium;
        color: var(--foreground);
    }

    .dash-sidebar-avatar-role {
        @apply truncate text-xs;
        color: var(--muted-foreground);
    }

    /* ----------------------------------------------------------------
     * Topbar — flex row with wrap. Heading on the start, action cluster
     * (search + icons) on the end. Wraps naturally on narrow viewports.
     * No surface chrome on the bar itself — search and icon clusters
     * each carry their own.
     * ---------------------------------------------------------------- */
    .dash-topbar {
        @apply mx-auto w-full max-w-7xl px-4 py-5 lg:px-8;
        @apply flex flex-wrap items-center justify-between gap-3;
        background-color: transparent;
    }

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

    /* Search pill — white rounded input, dark circular submit button on
     * the end side. Width is generous on lg+ to anchor the right cluster. */
    .dash-topbar-search {
        @apply relative flex h-12 w-full max-w-md items-center rounded-full ps-5 pe-1.5;
        background-color: var(--surface);
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        box-shadow: 0 6px 16px -10px color-mix(in oklch, var(--foreground) 14%, transparent);
    }

    .dash-topbar-search input {
        @apply w-full bg-transparent text-sm outline-none placeholder:font-medium;
        color: var(--surface-foreground);
    }

    .dash-topbar-search input::placeholder {
        color: var(--muted-foreground);
    }

    .dash-topbar-search-btn {
        @apply ms-2 inline-flex size-9 shrink-0 items-center justify-center rounded-full transition;
        color: var(--surface);
        background-color: var(--foreground);
    }

    .dash-topbar-search-btn:hover {
        filter: brightness(1.1);
    }

    /* Circular icon button (chat / bell) — white surface with red dot
     * indicator when needed. Replaces the previous `.dash-topbar-chip`
     * cluster but keeps it backwards-compatible. */
    .dash-topbar-icon {
        @apply relative inline-flex size-12 shrink-0 items-center justify-center rounded-full transition;
        color: var(--surface-foreground);
        background-color: var(--surface);
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        box-shadow: 0 6px 16px -10px color-mix(in oklch, var(--foreground) 14%, transparent);
    }

    .dash-topbar-icon:hover {
        color: var(--accent);
        border-color: color-mix(in oklch, var(--accent) 30%, transparent);
        transform: translateY(-1px);
    }

    .dash-topbar-icon.is-peeking {
        color: var(--accent-foreground);
        background-color: var(--accent);
        border-color: var(--accent);
    }

    .dash-topbar-icon-dot {
        @apply pointer-events-none absolute end-2.5 top-2.5 size-2 rounded-full;
        background-color: oklch(0.6 0.22 25);
        box-shadow:
            0 0 0 2px var(--surface),
            0 0 8px oklch(0.6 0.22 25 / 0.5);
    }

    /* Right-side action cluster — gap between search and icons */
    .dash-topbar-actions {
        @apply flex flex-1 items-center justify-end gap-2;
    }

    /* ----------------------------------------------------------------
     * Topbar toolkit — "Liquid mercury" pill.
     *
     * Two visually-aligned layers:
     *   1. `.dash-toolkit-liquid` — the SURFACE. A row of blobs filtered
     *      through `url(#dash-toolkit-goo)` so when collapsed they merge
     *      into one organic pill. As they grow and separate they "tear"
     *      apart like mercury.
     *   2. `.dash-toolkit-grid` — the CONTROLS. Sharp, unfiltered icons
     *      stacked on top of the blobs. Each slot reveals with a stagger.
     *
     * Cursor-tracking spotlight (::before) follows the mouse via
     * Alpine-set --mx / --my custom properties. A diagonal sheen (::after)
     * sweeps across the pill the first time the cursor enters.
     *
     * Set `data-active="true"` on a slot OR a blob to keep the dot
     * accent-colored & pulsing even while collapsed.
     * ---------------------------------------------------------------- */
    .dash-topbar-toolkit {
        @apply relative inline-flex items-center rounded-full p-1.5;
        isolation: isolate;
        --mx: 50%;
        --my: 50%;
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Cursor spotlight — soft accent glow tracking the mouse */
    .dash-topbar-toolkit::before {
        content: '';
        @apply pointer-events-none absolute inset-0 rounded-full opacity-0;
        background: radial-gradient(
            70px circle at var(--mx) var(--my),
            color-mix(in oklch, var(--accent) 32%, transparent) 0%,
            color-mix(in oklch, var(--accent) 12%, transparent) 40%,
            transparent 80%
        );
        transition: opacity 320ms ease;
        z-index: 2;
        mix-blend-mode: plus-lighter;
    }

    /* Sheen sweep — diagonal highlight that travels across on hover */
    .dash-topbar-toolkit::after {
        content: '';
        @apply pointer-events-none absolute inset-0 rounded-full overflow-hidden;
        background: linear-gradient(
            115deg,
            transparent 30%,
            color-mix(in oklch, white 40%, transparent) 50%,
            transparent 70%
        );
        transform: translateX(-120%);
        opacity: 0;
        transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
        z-index: 3;
        mix-blend-mode: overlay;
    }

    .dash-topbar-toolkit:hover,
    .dash-topbar-toolkit:focus-within {
        transform: translateY(-1px);
    }

    .dash-topbar-toolkit:hover::before,
    .dash-topbar-toolkit:focus-within::before {
        opacity: 1;
    }

    .dash-topbar-toolkit:hover::after {
        opacity: 1;
        transform: translateX(120%);
    }

    /* ----------------------------------------------------------------
     * Layer 1: liquid backdrop — flexbox row of blobs under the goo
     * filter. The filter blurs + thresholds the alpha channel so close
     * blobs visually merge.
     * ---------------------------------------------------------------- */
    .dash-toolkit-liquid {
        @apply pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 p-1.5;
        filter: url(#dash-toolkit-goo)
                drop-shadow(0 6px 16px color-mix(in oklch, var(--foreground) 14%, transparent));
        z-index: 0;
    }

    /* Each blob — collapsed = tall narrow strip; expanded = circle.
     * Closely packed when collapsed so goo merges them into one pill. */
    .dash-toolkit-blob {
        @apply block shrink-0 rounded-full;
        width: 0.875rem;
        height: 1.5rem;
        background-color: var(--surface);
        transition:
            width 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
            height 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
            background-color 240ms ease,
            box-shadow 240ms ease;
        transition-delay: calc((var(--total, 4) - var(--idx, 0)) * 35ms);
    }

    .dash-topbar-toolkit:hover .dash-toolkit-blob,
    .dash-topbar-toolkit:focus-within .dash-toolkit-blob {
        width: 2.5rem;
        height: 2.5rem;
        transition-delay: calc(var(--idx, 0) * 60ms);
    }

    /* Active blob — accent-tinted so the pill carries the status hint
     * even when collapsed. */
    .dash-toolkit-blob[data-active='true'] {
        background-color: color-mix(in oklch, var(--accent) 35%, var(--surface));
        box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 55%, transparent);
    }

    /* ----------------------------------------------------------------
     * Layer 2: sharp icons + click targets. Sits on top of the liquid,
     * with no filter, so text and icons stay crisp.
     * ---------------------------------------------------------------- */
    .dash-toolkit-grid {
        @apply relative flex items-center gap-1.5;
        z-index: 1;
    }

    /* Each slot mirrors its corresponding blob's footprint */
    .dash-toolkit-slot {
        @apply relative flex h-10 shrink-0 items-center justify-center rounded-full;
        width: 0.875rem;
        transition: width 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
        transition-delay: calc((var(--total, 4) - var(--idx, 0)) * 35ms);
    }

    .dash-topbar-toolkit:hover .dash-toolkit-slot,
    .dash-topbar-toolkit:focus-within .dash-toolkit-slot {
        width: 2.5rem;
        transition-delay: calc(var(--idx, 0) * 60ms);
    }

    /* Pulsing dot for active state — visible while collapsed only */
    .dash-toolkit-slot[data-active='true']::before {
        content: '';
        @apply pointer-events-none absolute left-1/2 top-1/2 size-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full;
        background-color: var(--accent);
        box-shadow: 0 0 10px color-mix(in oklch, var(--accent) 70%, transparent);
        animation: dash-toolkit-pulse 2.4s ease-in-out infinite;
        opacity: 1;
        transition: opacity 220ms ease;
    }

    .dash-topbar-toolkit:hover .dash-toolkit-slot[data-active='true']::before,
    .dash-topbar-toolkit:focus-within .dash-toolkit-slot[data-active='true']::before {
        opacity: 0;
    }

    @keyframes dash-toolkit-pulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
        50%      { transform: translate(-50%, -50%) scale(1.45); opacity: 0.7; }
    }

    /* The actual control button/anchor — scales in from 0.4 */
    .dash-toolkit-content {
        @apply absolute inset-0 m-auto flex items-center justify-center rounded-full;
        color: var(--surface-foreground);
        background-color: transparent;
        opacity: 0;
        transform: scale(0.4);
        transition:
            opacity 320ms ease,
            transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
            color 180ms ease,
            background-color 180ms ease;
        transition-delay: 0ms;
    }

    .dash-topbar-toolkit:hover .dash-toolkit-content,
    .dash-topbar-toolkit:focus-within .dash-toolkit-content {
        opacity: 1;
        transform: scale(1);
        transition-delay: calc(var(--idx, 0) * 60ms);
    }

    /* Magnetic per-icon hover — the directly-hovered slot lifts */
    .dash-topbar-toolkit:hover .dash-toolkit-slot:hover .dash-toolkit-content {
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 16%, transparent);
        transform: scale(1.18);
    }

    /* Active fill — for the peek-blur "on" state etc. */
    .dash-toolkit-content.is-peeking {
        color: var(--accent-foreground);
        background-color: var(--accent);
    }

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

    /* Optional notification badge for any slot */
    .dash-toolkit-badge {
        @apply pointer-events-none absolute end-1 top-1 size-2 rounded-full;
        background-color: oklch(0.6 0.22 25);
        box-shadow:
            0 0 0 2px var(--surface),
            0 0 8px oklch(0.6 0.22 25 / 0.5);
        opacity: 0;
        transform: scale(0.4);
        transition:
            opacity 240ms ease,
            transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
        transition-delay: 0ms;
        z-index: 2;
    }

    .dash-topbar-toolkit:hover .dash-toolkit-badge,
    .dash-topbar-toolkit:focus-within .dash-toolkit-badge {
        opacity: 1;
        transform: scale(1);
        transition-delay: calc(var(--idx, 0) * 60ms + 140ms);
    }

    @media (prefers-reduced-motion: reduce) {
        .dash-toolkit-blob,
        .dash-toolkit-slot,
        .dash-toolkit-content,
        .dash-topbar-toolkit::after {
            transition-duration: 60ms !important;
        }

        .dash-toolkit-slot[data-active='true']::before {
            animation: none !important;
        }
    }

    /* ----------------------------------------------------------------
     * Global search dropdown — sits below the .dash-topbar-search input
     * (the parent of both is `.dash-search`). Width matches the input,
     * with a glassy surface and grouped sections.
     * ---------------------------------------------------------------- */
    .dash-search {
        @apply hidden sm:block;
    }

    .dash-search-panel {
        @apply absolute end-0 start-0 top-[calc(100%+0.5rem)] z-30 max-h-[28rem] overflow-y-auto rounded-2xl py-2;
        background-color: var(--surface);
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
        box-shadow:
            0 24px 55px -22px color-mix(in oklch, var(--foreground) 22%, transparent),
            0 8px 18px -10px color-mix(in oklch, var(--foreground) 12%, transparent);
    }

    .dash-search-section + .dash-search-section {
        @apply mt-1 border-t pt-1;
        border-color: color-mix(in oklch, var(--border) 50%, transparent);
    }

    .dash-search-section-title {
        @apply px-4 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-[0.12em];
        color: var(--muted-foreground);
    }

    .dash-search-item {
        @apply flex items-center gap-3 px-3 py-2 transition;
        color: var(--surface-foreground);
    }

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

    .dash-search-item-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) 12%, transparent);
    }

    .dash-search-item-avatar {
        @apply size-9 shrink-0 rounded-full object-cover;
        box-shadow: 0 0 0 1px color-mix(in oklch, var(--border) 70%, transparent);
    }

    .dash-search-item-title {
        @apply block truncate text-sm font-medium;
    }

    .dash-search-item-meta {
        @apply block truncate text-xs;
        color: var(--muted-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;
    }

    /* Avatar variant — same outer footprint as icon chips, but the avatar
     * is the entire face of the button (no inner icon size mismatch). The
     * chip background goes transparent — the photo carries the visual. */
    .dash-topbar-chip--avatar {
        @apply size-9 min-w-0 overflow-hidden p-0;
        background-color: transparent !important;
        box-shadow:
            0 0 0 1px color-mix(in oklch, var(--border) 70%, transparent),
            0 4px 14px -8px color-mix(in oklch, var(--accent) 28%, transparent) !important;
    }

    .dash-topbar-chip--avatar:hover {
        background-color: transparent !important;
        box-shadow:
            0 0 0 2px color-mix(in oklch, var(--accent) 55%, transparent),
            0 10px 24px -10px color-mix(in oklch, var(--accent) 42%, transparent) !important;
    }

    .dash-topbar-chip--avatar > img {
        @apply size-full object-cover;
    }

    /* 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 pb-8 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);
    }

    /* ============================================================
     * Home overview — premium widgets
     * Variants extending .dash-card with focused visual treatments
     * for the post-login landing: featured KPI, balance chart,
     * gauge, profile, credit cards, transfers, security CTA.
     * ============================================================ */

    /* Highlighted KPI variant — accent-filled, foreground inverts */
    .dash-stat-card--featured {
        color: var(--accent-foreground);
        background:
            radial-gradient(ellipse at 100% 0%, color-mix(in oklch, white 18%, transparent) 0%, transparent 55%),
            linear-gradient(
                135deg,
                color-mix(in oklch, var(--accent) 92%, transparent) 0%,
                var(--accent) 100%
            );
        border-color: color-mix(in oklch, var(--accent) 60%, transparent);
        box-shadow:
            0 18px 45px -22px color-mix(in oklch, var(--accent) 55%, transparent),
            0 6px 16px -10px color-mix(in oklch, var(--accent) 30%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 24%, transparent);
    }

    .dash-stat-card--featured::before { display: none; }

    .dash-stat-card--featured .dash-stat-icon {
        color: var(--accent-foreground);
        background: color-mix(in oklch, white 20%, transparent);
        box-shadow: inset 0 1px 0 color-mix(in oklch, white 25%, transparent);
    }

    .dash-stat-card--featured .dash-stat-label,
    .dash-stat-card--featured .dash-stat-value {
        color: var(--accent-foreground);
    }

    .dash-stat-card--featured .dash-stat-delta {
        color: var(--accent-foreground);
        background-color: color-mix(in oklch, white 22%, transparent);
    }

    .dash-stat-card--featured .dash-stat-sparkline {
        color: color-mix(in oklch, white 90%, transparent);
        opacity: 0.85;
    }

    /* Compact KPI layout — icon + label/value inline, sparkline at end */
    .dash-stat-card--compact {
        @apply flex items-center gap-4;
        padding: 1.25rem 1.5rem;
    }

    .dash-stat-card--compact .dash-stat-label {
        @apply mt-0 normal-case tracking-normal text-xs font-medium;
    }

    .dash-stat-card--compact .dash-stat-value {
        @apply mt-0 text-2xl;
    }

    .dash-stat-card--compact .dash-stat-sparkline {
        @apply mt-0 ms-auto h-12 w-24 shrink-0;
    }

    /* ----------------------------------------------------------------
     * Card heading — sub-heading inside any .dash-card
     * ---------------------------------------------------------------- */
    .dash-card-title {
        @apply text-base font-semibold tracking-tight;
        color: var(--foreground);
    }

    .dash-card-subtitle {
        @apply mt-1 text-xs;
        color: var(--muted-foreground);
    }

    /* Tiny chip used for "On track" / period selectors etc. */
    .dash-pill {
        @apply inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold;
        color: var(--accent);
        background-color: color-mix(in oklch, var(--accent) 12%, transparent);
        border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
    }

    .dash-pill--muted {
        color: var(--muted-foreground);
        background-color: color-mix(in oklch, var(--muted-foreground) 10%, transparent);
        border-color: color-mix(in oklch, var(--border) 60%, transparent);
    }

    .dash-pill--danger {
        color: oklch(0.62 0.18 25);
        background-color: oklch(0.62 0.18 25 / 0.12);
        border-color: oklch(0.62 0.18 25 / 0.22);
    }

    /* ----------------------------------------------------------------
     * Balance card — twin metric tiles + soft wave chart
     * ---------------------------------------------------------------- */
    .dash-metric-tile {
        @apply relative flex flex-col gap-1 rounded-2xl p-4;
        background-color: color-mix(in oklch, var(--accent) 5%, var(--surface));
        border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    }

    .dash-metric-label {
        @apply text-xs font-medium;
        color: var(--muted-foreground);
    }

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

    .dash-balance-chart {
        @apply mt-4 h-32 w-full;
        color: var(--accent);
    }

    /* ----------------------------------------------------------------
     * Gauge / radial — used for the earnings progress
     * ---------------------------------------------------------------- */
    .dash-gauge {
        @apply relative mx-auto;
        width: 11rem;
        height: 6rem;
    }

    .dash-gauge svg {
        @apply block w-full h-full;
    }

    .dash-gauge-track {
        stroke: color-mix(in oklch, var(--accent) 12%, transparent);
    }

    .dash-gauge-fill {
        stroke: var(--accent);
        filter: drop-shadow(0 4px 8px color-mix(in oklch, var(--accent) 35%, transparent));
    }

    .dash-gauge-value {
        @apply absolute bottom-0 start-1/2 -translate-x-1/2 text-2xl font-semibold tabular-nums;
        color: var(--foreground);
    }

    [dir='rtl'] .dash-gauge-value {
        transform: translateX(50%);
    }

    /* ----------------------------------------------------------------
     * Profile mini-card — avatar + name + social stats
     * ---------------------------------------------------------------- */
    .dash-profile-card {
        @apply text-center;
    }

    .dash-profile-avatar {
        @apply mx-auto flex size-20 items-center justify-center rounded-full overflow-hidden;
        background-color: color-mix(in oklch, var(--accent) 14%, var(--surface));
        border: 3px solid var(--surface);
        box-shadow:
            0 0 0 2px color-mix(in oklch, var(--accent) 35%, transparent),
            0 10px 24px -10px color-mix(in oklch, var(--accent) 35%, transparent);
        color: var(--accent);
    }

    .dash-profile-avatar img {
        @apply size-full object-cover;
    }

    .dash-profile-name {
        @apply mt-3 text-base font-semibold tracking-tight;
        color: var(--foreground);
    }

    .dash-profile-email {
        @apply mt-0.5 text-xs;
        color: var(--muted-foreground);
    }

    .dash-profile-stats {
        @apply mt-4 grid grid-cols-3 gap-2 border-t pt-3;
        border-color: color-mix(in oklch, var(--border) 50%, transparent);
    }

    .dash-profile-stat-label {
        @apply text-[10px] font-medium uppercase tracking-wider;
        color: var(--muted-foreground);
    }

    .dash-profile-stat-value {
        @apply mt-0.5 text-base font-semibold tabular-nums;
        color: var(--foreground);
    }

    /* ----------------------------------------------------------------
     * Stacked credit cards — small visual deck
     * ---------------------------------------------------------------- */
    .dash-card-stack {
        @apply relative mx-auto;
        width: 100%;
        max-width: 18rem;
        aspect-ratio: 1.65 / 1;
        perspective: 800px;
    }

    .dash-credit-card {
        @apply absolute inset-0 flex flex-col justify-between rounded-2xl p-4 text-xs;
        border: 1px solid color-mix(in oklch, white 18%, transparent);
        box-shadow:
            0 16px 30px -16px color-mix(in oklch, var(--foreground) 30%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 18%, transparent);
        backdrop-filter: blur(6px);
        transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .dash-credit-card--1 {
        background: linear-gradient(
            135deg,
            color-mix(in oklch, var(--accent) 18%, var(--surface)) 0%,
            color-mix(in oklch, var(--accent) 8%, var(--surface)) 100%
        );
        color: var(--surface-foreground);
        transform: translate(-12%, -18%) rotate(-6deg);
        z-index: 1;
    }

    .dash-credit-card--2 {
        background: linear-gradient(
            135deg,
            color-mix(in oklch, var(--accent) 65%, var(--foreground)) 0%,
            color-mix(in oklch, var(--accent) 88%, transparent) 100%
        );
        color: var(--accent-foreground);
        transform: translate(0, 0) rotate(2deg);
        z-index: 2;
    }

    .dash-credit-card--3 {
        background: linear-gradient(
            135deg,
            color-mix(in oklch, var(--foreground) 92%, transparent) 0%,
            color-mix(in oklch, var(--foreground) 70%, var(--accent)) 100%
        );
        color: oklch(0.97 0.01 280);
        transform: translate(12%, 18%) rotate(8deg);
        z-index: 3;
    }

    .dash-card-stack:hover .dash-credit-card--1 { transform: translate(-18%, -22%) rotate(-9deg); }
    .dash-card-stack:hover .dash-credit-card--2 { transform: translate(0, 0) rotate(2deg) translateY(-4px); }
    .dash-card-stack:hover .dash-credit-card--3 { transform: translate(18%, 22%) rotate(11deg); }

    /* Tighter offsets on narrow viewports so the rotated cards don't
     * peek past the container's rounded edges as harshly. */
    @media (max-width: 640px) {
        .dash-credit-card--1 { transform: translate(-7%, -12%) rotate(-4deg); }
        .dash-credit-card--3 { transform: translate(7%, 12%) rotate(5deg); }
        .dash-card-stack:hover .dash-credit-card--1 { transform: translate(-11%, -16%) rotate(-6deg); }
        .dash-card-stack:hover .dash-credit-card--3 { transform: translate(11%, 16%) rotate(7deg); }
    }

    .dash-credit-card-label {
        @apply text-[9px] font-semibold uppercase tracking-wider opacity-80;
    }

    .dash-credit-card-number {
        @apply font-mono text-sm tracking-[0.15em];
    }

    .dash-credit-card-brand {
        @apply ms-auto inline-flex items-center gap-0.5;
    }

    .dash-credit-card-brand span {
        @apply block size-4 rounded-full;
    }

    .dash-credit-card-brand span:first-child { background-color: oklch(0.78 0.18 35); }
    .dash-credit-card-brand span:last-child  { background-color: oklch(0.62 0.18 18); margin-inline-start: -0.5rem; }

    /* Accent CTA button — pill, gradient, premium */
    .dash-btn-accent {
        @apply inline-flex items-center justify-center gap-2 rounded-full px-5 py-2 text-sm font-semibold transition;
        color: var(--accent-foreground);
        background: linear-gradient(
            135deg,
            var(--accent) 0%,
            color-mix(in oklch, var(--accent) 80%, transparent) 100%
        );
        box-shadow:
            0 8px 20px -8px color-mix(in oklch, var(--accent) 45%, transparent),
            inset 0 1px 0 color-mix(in oklch, white 22%, transparent);
    }

    .dash-btn-accent:hover {
        filter: brightness(1.05);
        transform: translateY(-1px);
    }

    /* ----------------------------------------------------------------
     * Transfers list — left accent bar per item
     * ---------------------------------------------------------------- */
    .dash-transfer-list {
        @apply mt-2 flex flex-col gap-3;
    }

    .dash-transfer-item {
        @apply relative flex items-center gap-3 ps-3;
    }

    .dash-transfer-item::before {
        content: '';
        @apply absolute start-0 top-1 bottom-1 w-0.5 rounded-full;
        background: linear-gradient(
            180deg,
            var(--accent) 0%,
            color-mix(in oklch, var(--accent) 50%, transparent) 100%
        );
    }

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

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

    /* ----------------------------------------------------------------
     * Security CTA card — centered, fingerprint hero
     * ---------------------------------------------------------------- */
    .dash-security-card {
        @apply flex flex-col items-center text-center;
    }

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