@import '../../../../vendor/filament/filament/resources/css/theme.css';

@source '../../../../app/Filament/**/*';
@source '../../../../resources/views/filament/**/*';

/*
|--------------------------------------------------------------------------
| Dashboard theme
|--------------------------------------------------------------------------
|
| The panel's colours come from AdminPanelProvider::colors() — primary is
| Blue, warning is Amber, gray is a warm Stone — and Filament's own CSS
| variables already carry those into every `bg-gray-*` / `bg-primary-*` /
| `bg-warning-*` utility class used across the vendor CSS. What is left here
| is shape (a warmer canvas, pill buttons, softer card corners) plus a few
| spots where the amber accent is layered on top of the blue primary — the
| active nav item and a button's hover state — so the panel reads as a
| blue-and-gold pair rather than blue alone. Dark mode is left on Filament's
| own defaults throughout.
|
*/

.fi-body {
    @apply bg-[oklch(0.97_0.006_95)] dark:bg-gray-950;
}

.fi-sidebar {
    /* Filament turns the sidebar transparent at desktop width, letting the
       body colour show through it; pin it to a solid surface instead so it
       stays white against the cream canvas at every breakpoint. */
    @apply bg-white lg:bg-white dark:bg-gray-900 dark:lg:bg-gray-900;
}

.fi-header-heading {
    @apply font-bold tracking-tight;
}

.fi-topbar > nav {
    /* A hairline + shadow separates the topbar from scrolled-under content,
       instead of it blending flush into the cream body. */
    @apply border-b border-gray-950/5 shadow-xs dark:border-white/10;
}

.fi-btn {
    @apply rounded-full shadow-xs transition-[transform,box-shadow] duration-75;

    &:not(:disabled):hover {
        @apply -translate-y-px shadow-sm ring-2 ring-warning-400/60;
    }
}

.fi-sidebar-item-btn {
    @apply rounded-full;
}

.fi-sidebar-nav {
    /* Filament's default gap-y-7 (1.75rem) between the nav and its groups
       reads as too much air with only a handful of short groups; tighten
       both to a single consistent rhythm. */
    @apply gap-y-4;
}

.fi-sidebar-nav-groups {
    @apply gap-y-4;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    @apply rounded-full bg-primary-600 ring-2 ring-warning-400 dark:rounded-lg dark:bg-white/5 dark:ring-warning-400/60;

    & > .fi-icon,
    & > .fi-sidebar-item-label {
        @apply text-white dark:text-primary-400;
    }
}

.fi-section:not(.fi-aside) {
    @apply rounded-2xl border border-gray-950/5 shadow-xs dark:border-white/10;
}

.fi-section.fi-aside > .fi-section-content-ctn {
    @apply rounded-2xl border border-gray-950/5 shadow-xs dark:border-white/10;
}

.fi-section-header {
    @apply border-b border-gray-950/5 dark:border-white/10;
}

.fi-input-wrp {
    @apply shadow-xs transition-shadow duration-75;
}

.fi-fo-file-upload-avatar .filepond--root {
    /* A white ring lifts the circular avatar preview off the section card
       behind it instead of the two flattening together. */
    @apply shadow-md ring-4 ring-white dark:ring-gray-900;
}

.fi-ta-ctn {
    @apply rounded-2xl border border-gray-950/5 shadow-xs dark:border-white/10;
}

.fi-ta-row {
    @apply transition-colors duration-75;
}

.fi-wi-widget {
    /* CSS Grid stretches every widget in a row to match the tallest one by
       default. The portfolio card (chart + gauge + two figures) is much
       taller than the two-number collections card beside it, so without
       this the shorter card was stretched into a mostly empty box. Each
       widget now only ever takes the height its own content needs. */
    @apply self-start;
}