/*
 * A shadcn-flavoured skin for the Filament admin panel.
 *
 * This only retunes the design tokens Filament already uses — radii, hairline
 * borders, shadows and surface colours. No component markup or Blade view is
 * overridden, so Filament upgrades stay drop-in. The rules are deliberately
 * unlayered: Filament ships its own inside @layer components, and unlayered
 * CSS outranks layered CSS no matter which stylesheet loads first.
 *
 * Republish after editing: php artisan filament:assets
 */

:root {
    /* shadcn's radius scale (--radius: 0.625rem) instead of Tailwind's default. */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;

    /*
     * shadcn draws one clearly visible hairline and skips the drop shadow;
     * Filament floats its surfaces on a 5% ring plus a soft shadow.
     */
    --shadcn-border: color-mix(in oklab, var(--gray-950) 13%, transparent);
    --shadcn-flat: 0 0 #0000;
}

/*
 * The most visible difference: Filament floats white cards on a grey page,
 * shadcn puts bordered cards on a white canvas.
 */
.fi-body {
    background-color: var(--color-white);
}

/* Every raised surface: card border in, drop shadow out. */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-input-wrp,
.fi-dropdown-panel,
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    --tw-ring-color: var(--shadcn-border);
    --tw-shadow: var(--shadcn-flat);
}

/* Modals keep some lift — they genuinely float over the page. */
.fi-modal > .fi-modal-window-ctn > .fi-modal-window {
    --tw-shadow: 0 8px 24px -6px color-mix(in oklab, var(--gray-950) 14%, transparent);
}

.fi-dropdown-panel {
    --tw-shadow: 0 4px 12px -4px color-mix(in oklab, var(--gray-950) 12%, transparent);
}

/* Chrome sits flat against the page, separated only by a hairline. */
.fi-topbar {
    --tw-ring-color: var(--shadcn-border);
    --tw-shadow: var(--shadcn-flat);
}

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--gray-50);
}

.fi-sidebar {
    border-inline-end: 1px solid var(--shadcn-border);
}

.fi-sidebar-header {
    --tw-ring-color: var(--shadcn-border);
    --tw-shadow: var(--shadcn-flat);
}

/*
 * shadcn's sidebar highlights the active item with a neutral accent and
 * foreground text, rather than tinting it with the brand colour.
 */
.fi-sidebar-item-btn {
    border-radius: var(--radius-md);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--gray-200);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label {
    color: var(--gray-950);
}

.fi-sidebar-group-label {
    color: var(--gray-500);
}

/* shadcn's focus treatment: solid ring plus a soft halo. */
.fi-input-wrp:not(.fi-disabled):focus-within {
    --tw-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-500) 22%, transparent);
}

/* Muted secondary text rather than near-black, as in shadcn tables. */
.fi-ta-header-cell {
    font-weight: 500;
    color: var(--gray-500);
}