/* Establish Tailwind's cascade-layer order BEFORE any layer name is first used.
   This stylesheet loads before the consumer's Tailwind bundle, and CSS fixes layer
   precedence by FIRST APPEARANCE — without this statement, the imported file's
   `@layer components` would register "components" as the lowest-priority layer and
   Tailwind's base/preflight would override every cn-* rule (unstyled components). */
@layer theme, base, components, utilities;

@import "blazorcn-components.css";

/* BlazorCN Theme Variables — matches shadcn-ui */

:root {
    /* Makes native UI (the <select> dropdown popup, scrollbars, date/time pickers,
       form controls) follow the app theme. Without it the OS renders them in its
       default light appearance — a white dropdown on a dark page looks "unthemed". */
    color-scheme: light;
    --radius: 0.625rem;
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.97 0.01 17);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
}

.dark {
    color-scheme: dark;
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.922 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.371 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --destructive-foreground: oklch(0.58 0.22 27);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.556 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.439 0 0);
}

/* Base reset for BlazorCN components. Lives in @layer base so component rules
   (@layer components) and consumer utilities still override it — an unlayered
   rule would beat every layer and e.g. repaint transparent borders. */
@layer base {
    *, *::before, *::after {
        border-color: var(--border);
    }

    /* Tailwind v4 dropped the default `cursor: pointer` on native buttons. Restore the
       pointer cursor for interactive elements (matches shadcn-ui intent). Disabled
       controls keep the default cursor; menu/select items keep nova's cursor-default
       from their cn-* rules (components layer outranks base). */
    button:not(:disabled),
    [role="button"]:not([aria-disabled="true"]),
    [role="menuitem"]:not([aria-disabled="true"]),
    [role="menuitemcheckbox"]:not([aria-disabled="true"]),
    [role="menuitemradio"]:not([aria-disabled="true"]),
    [role="tab"]:not([aria-disabled="true"]),
    [role="option"]:not([aria-disabled="true"]),
    [role="switch"]:not([aria-disabled="true"]),
    summary,
    label[for] {
        cursor: pointer;
    }

    /* OS "reduce motion" setting: decorative enter/exit animations and transitions
       collapse to instant. Safe because no component waits on animationend — open
       state is driven by Blazor, not by animation completion. Spinner, skeleton
       pulse and the OTP caret keep animating: they report status, not decoration.
       Restated durations (not `revert`) because reverting would stop them. */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-delay: 0ms !important;
            transition-duration: 0.01ms !important;
            transition-delay: 0ms !important;
            scroll-behavior: auto !important;
        }

        .animate-spin { animation-duration: 1s !important; }
        .animate-pulse { animation-duration: 2s !important; }
        .animate-caret-blink { animation-duration: 1.25s !important; }
    }

    /* Windows High Contrast / forced-colors: the OS replaces author colors, which
       drops box-shadow-based focus rings and background-only state indication.
       Re-assert a system-colored outline so focus stays visible, and keep
       selected/checked state perceivable via the forced palette. */
    @media (forced-colors: active) {
        :focus-visible {
            outline: 2px solid CanvasText !important;
            outline-offset: 2px;
        }

        [data-state="checked"],
        [data-state="on"],
        [aria-selected="true"],
        [aria-checked="true"] {
            forced-color-adjust: none;
            background-color: Highlight;
            color: HighlightText;
        }
    }
}

/* Multi-thumb slider hit zones. SliderCn computes each input's clip window in
   LOGICAL value space and emits it as --clip-is/--clip-ie (inset from
   inline-start/inline-end), because inset() only takes physical edges: under
   dir="rtl" the physical order flips. Without this split, every RTL thumb sat
   inside the OTHER input's clip zone, so grabbing a thumb dragged the wrong
   value. Single-thumb sliders emit no vars — the 0% fallbacks are a no-op —
   and vertical sliders keep their inline clip-path, which wins over these. */
@layer components {
    [data-slot="slider"] > input[type="range"] {
        clip-path: inset(0 var(--clip-ie, 0%) 0 var(--clip-is, 0%));
    }

    [data-slot="slider"]:dir(rtl) > input[type="range"] {
        clip-path: inset(0 var(--clip-is, 0%) 0 var(--clip-ie, 0%));
    }
}