/*
 * Style overrides for the admin panel.
 *
 * Filament's own styles live in cascade layers, so these unlayered rules take precedence.
 * Edit this file, then run `php artisan filament:assets` to publish it.
 */

/*
 * Centre the modal close button vertically within the header. Modal headers are sticky
 * (see AppServiceProvider), so they are the button's positioning context. This includes
 * slide-over panels such as table filters. Centred modals, such as delete confirmations,
 * keep the button in the top corner beside their icon.
 */
.fi-modal.fi-modal-has-sticky-header
    > .fi-modal-window-ctn
    > .fi-modal-window:not(.fi-align-center)
    > .fi-modal-header
    > .fi-modal-close-btn {
    top: 50%;
    translate: 0 -50%;
    /* Icon buttons carry a negative margin for inline alignment, which would pull the button off-centre here. */
    margin-block: 0;
}

/*
 * Compact modal header and footer. Filament pads them by 1.5rem and 1.25rem, which
 * looks tall once they are separated from the content by divider lines.
 */
.fi-modal.fi-modal-has-sticky-header > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-header {
    padding-block: 1rem;
}

.fi-modal.fi-modal-has-sticky-footer > .fi-modal-window-ctn > .fi-modal-window > .fi-modal-footer {
    padding-block: 0.75rem;
}

/*
 * The "maximise" button added beside the close button by resources/js/filament/modal-maximize.js.
 * It mirrors the close button's position, one button-width further from the edge.
 */
.fi-modal .fi-modal-window > .fi-modal-header > .app-modal-maximize-btn {
    position: absolute;
    inset-inline-end: 3.5rem;
    top: 50%;
    translate: 0 -50%;
    margin-block: 0;
}

.fi-modal .fi-modal-window:has(> .fi-modal-header > .app-modal-maximize-btn) .fi-modal-heading {
    margin-inline-end: 4.5rem;
}

/* The maximised modal's own styles are added by resources/js/filament/modal-maximize.js, keyed by the modal's id. */

/*
 * Underlined tabs instead of Filament's button-group style, for every horizontal tab
 * bar: list page tabs and tabs inside forms. Vertical tabs keep Filament's style.
 */
.fi-tabs:not(.fi-vertical) {
    gap: 0.25rem;
    margin-inline: 0;
    padding-block: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid var(--gray-200);

    &:not(.fi-contained) {
        padding-inline: 0;
    }

    & .fi-tabs-item {
        margin-bottom: -1px;
        padding-block: 0.75rem;
        padding-inline: 1rem;
        border-radius: 0;
        font-size: 1rem;
        line-height: 1.5rem;
        border-bottom: 2px solid transparent;

        &,
        &:hover,
        &:focus-visible,
        &.fi-active {
            background: transparent;
        }

        &:hover,
        &:focus-visible {
            border-bottom-color: var(--gray-300);
        }

        &.fi-active {
            border-bottom-color: var(--primary-600);
            font-weight: 700;
        }
    }
}

.dark .fi-tabs:not(.fi-vertical) {
    border-bottom-color: color-mix(in oklab, white 10%, transparent);

    & .fi-tabs-item {
        &:hover,
        &:focus-visible {
            border-bottom-color: var(--gray-600);
        }

        &.fi-active {
            border-bottom-color: var(--primary-400);
        }
    }
}

/*
 * Navy dark theme, matching molhamteam.com's dark mode. Filament draws dark mode surfaces from the
 * gray palette (page background gray-950, sidebar, topbar, sections and modals gray-900, borders,
 * inputs and hovers gray-800/700, secondary text gray-400/500), so the site's colours are mapped
 * onto that scale. Light mode is untouched.
 * `:root.dark` outranks the `:root` variables Filament prints after this stylesheet.
 */
:root.dark {
    --gray-50: #f7f9fa;
    --gray-100: #e4ecf0;
    --gray-200: #e4e6eb;
    --gray-300: #cfd5db;
    --gray-400: #b0b3b8;
    --gray-500: #8b98a5;
    --gray-600: #56636f;
    --gray-700: #38444d;
    --gray-800: #22303c;
    --gray-900: #1b2733;
    --gray-950: #15202b;
}

/*
 * Fade between pages (see page-transitions.js): the new content fades in once it is swapped in.
 */
.fi-main.app-page-entering {
    animation: app-page-fade-in 220ms ease-out;
}

@keyframes app-page-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-main.app-page-entering {
        animation: none;
    }
}