.fi-logo a {
    display: flex;
    height: 100%;
    align-items: center;
}

.fi-logo .wf-logo {
    display: block;
    height: 100%;
    width: auto;
    overflow: visible;
}

@media (prefers-reduced-motion: no-preference) {
    .fi-simple-layout {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .fi-simple-layout::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 42%;
        z-index: 0;
        width: min(44rem, 92vw);
        height: 28rem;
        pointer-events: none;
        background: radial-gradient(
            ellipse at center,
            rgba(226, 7, 20, 0.28),
            rgba(226, 7, 20, 0.08) 42%,
            transparent 70%
        );
        filter: blur(18px);
        animation: wf-heat-bloom 1.6s ease-out both;
    }

    .fi-simple-layout .fi-simple-main-ctn {
        position: relative;
        z-index: 1;
    }

    .fi-simple-layout .fi-simple-main {
        animation: wf-card-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .fi-simple-layout .wf-logo-wordmark {
        animation: wf-fade-slide 0.55s ease-out 0.42s both;
    }

    .fi-simple-layout .wf-logo-rule {
        transform-box: fill-box;
        transform-origin: left center;
        animation: wf-draw-rule 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both;
    }

    .fi-simple-layout .wf-logo-tagline {
        animation: wf-fade-up 0.45s ease-out 0.72s both;
    }

    .fi-simple-layout .fi-simple-header-heading {
        animation: wf-fade-up 0.5s ease-out 0.5s both;
    }

    .fi-simple-layout .fi-sc-form {
        animation: wf-fade-up 0.55s ease-out 0.62s both;
    }
}

@keyframes wf-heat-bloom {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62);
    }

    55% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }

    to {
        opacity: 0.82;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes wf-card-enter {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wf-fade-slide {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wf-draw-rule {
    from {
        transform: scaleX(0);
        opacity: 0.4;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes wf-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Version history table (the History action's modal on a building file).
 *
 * Written as plain CSS rather than Tailwind utilities on purpose: the admin
 * panel loads Filament's precompiled stylesheet plus this file, and has no
 * Vite theme of its own, so utility classes used in a panel Blade view do not
 * exist in the CSS that is actually served. Colours are derived from
 * currentColor so the table still reads correctly if the forced dark mode is
 * ever turned off.
 */
.wf-version-history {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.wf-version-history table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.25rem;
    text-align: start;
}

.wf-version-history thead {
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.wf-version-history thead tr {
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.wf-version-history th {
    padding: 0.75rem 1rem;
    text-align: start;
    font-weight: 600;
    white-space: nowrap;
}

.wf-version-history tbody tr + tr {
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.wf-version-history tbody tr:hover {
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.wf-version-history td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.wf-version-history .wf-vh-version {
    font-weight: 500;
    white-space: nowrap;
}

.wf-version-history .wf-vh-muted {
    opacity: 0.65;
}

.wf-version-history .wf-vh-nowrap {
    white-space: nowrap;
}

.wf-version-history .wf-vh-actions {
    text-align: end;
    white-space: nowrap;
}

.wf-version-history .wf-vh-download {
    font-weight: 500;
    /* The brand red lightened, so it stays legible against the forced dark
       background. Filament's own colour custom properties are not used here
       because their value format is an implementation detail of the panel. */
    color: color-mix(in srgb, #e20714 68%, white);
    text-decoration: none;
}

.wf-version-history .wf-vh-download:hover {
    text-decoration: underline;
}

.wf-version-history .wf-vh-empty {
    opacity: 0.65;
}