/*
 * Sneat-style look for the Filament panel (after ThemeSelection's free Sneat admin template, MIT):
 * soft grey canvas, white floating cards, a white sidebar with tinted active pills, a detached
 * blurred top bar, Public Sans. Colours and font are set on the panel (AdminPanelProvider);
 * this file restyles Filament's own fi-* classes, so there is no build step.
 */

:root {
    --sn-body: #f5f5f9;
    --sn-card: #fff;
    --sn-text: #697a8d;
    --sn-heading: #566a7f;
    --sn-muted: #a1acb8;
    --sn-border: #d9dee3;
    --sn-primary: #696cff;
    --sn-primary-soft: rgba(105, 108, 255, 0.16);
    --sn-hover: rgba(67, 89, 113, 0.04);
    --sn-shadow: 0 2px 6px 0 rgba(67, 89, 113, 0.12);
    --sn-shadow-lg: 0 0.25rem 1rem rgba(161, 172, 184, 0.45);
    --sn-radius: 0.5rem;
    --sn-radius-sm: 0.375rem;
}

.dark {
    --sn-body: #232333;
    --sn-card: #2b2c40;
    --sn-text: #a3a4cc;
    --sn-heading: #cbcbe2;
    --sn-muted: #7071a4;
    --sn-border: #444564;
    --sn-hover: rgba(163, 164, 204, 0.06);
    --sn-shadow: 0 2px 6px 0 rgba(20, 21, 33, 0.3);
    --sn-shadow-lg: 0 0.25rem 1rem rgba(20, 21, 33, 0.5);
}

/* ---- Canvas & type ------------------------------------------------------- */

.fi-body,
.fi-simple-layout {
    background-color: var(--sn-body) !important;
    color: var(--sn-text);
}

.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-simple-header-heading {
    color: var(--sn-heading);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-header-heading {
    font-size: 1.375rem;
}

.fi-header-subheading,
.fi-section-header-description,
.fi-breadcrumbs {
    color: var(--sn-muted);
}

/* ---- Sidebar ------------------------------------------------------------- */

.fi-sidebar {
    background-color: var(--sn-card) !important;
}

/* Shadow only when the menu is on screen; off-canvas on phones it would show as a strip. */
@media (min-width: 64rem) {
    .fi-sidebar {
        box-shadow: 0 0.125rem 0.375rem 0 rgba(161, 172, 184, 0.12);
    }

    .dark .fi-sidebar {
        box-shadow: 0 0.125rem 0.375rem 0 rgba(20, 21, 33, 0.25);
    }
}

.fi-sidebar.fi-sidebar-open {
    box-shadow: var(--sn-shadow-lg);
}

.fi-sidebar-header {
    background-color: var(--sn-card) !important;
    box-shadow: none !important;
    border: 0 !important;
}

.fi-sidebar-header .fi-logo {
    color: var(--sn-heading);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
}

.fi-sidebar-nav {
    padding-inline: 0.875rem;
}

/* Section headings: small caps with a short rule from the menu's edge, like Sneat's menu headers. */
.fi-sidebar-group-btn {
    position: relative;
    margin-top: 0.5rem;
}

.fi-sidebar-group-btn::before {
    content: "";
    position: absolute;
    left: -0.875rem;
    top: 50%;
    width: 1rem;
    height: 1px;
    background-color: var(--sn-muted);
}

.fi-sidebar-group-label {
    color: #8f9baa !important;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-inline-start: 0.375rem;
}

.dark .fi-sidebar-group-label {
    color: var(--sn-muted) !important;
}

/* Active item: tinted pill plus a bar on the menu's right edge. */
.fi-sidebar-item {
    position: relative;
}

.fi-sidebar-item.fi-active::after {
    content: "";
    position: absolute;
    right: -0.875rem;
    top: 0;
    width: 0.25rem;
    height: 2.5rem;
    border-radius: 0.375rem 0 0 0.375rem;
    background-color: var(--sn-primary);
}

.fi-sidebar-item-label {
    font-size: 0.9375rem;
}

.fi-sidebar-item-btn {
    border-radius: var(--sn-radius-sm);
    padding-block: 0.55rem;
    color: var(--sn-text);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.fi-sidebar-item-btn:hover {
    background-color: var(--sn-hover) !important;
}

.fi-sidebar-item-label {
    color: inherit !important;
    font-weight: 400;
}

.fi-sidebar-item-btn > svg {
    color: inherit !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn:where(.dark, .dark *) {
    background-color: var(--sn-primary-soft) !important;
    color: var(--sn-primary) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    font-weight: 600;
}

/* ---- Desktop layout: full-height menu, navbar floats over the content only --
 * Filament puts a full-width top bar above the sidebar and hides the sidebar's own
 * header on desktop. Sneat has the menu running the full height (logo at its top) and
 * a detached navbar to its right, so: pull the sidebar up under the top bar's slot,
 * show its header, shift the top bar right, and drop the top bar's copy of the logo.
 */
@media (min-width: 64rem) {
    .fi-topbar-ctn {
        margin-inline-start: var(--sidebar-width, 16.25rem);
    }

    .fi-topbar-start {
        display: none !important;
    }

    .fi-body-has-topbar .fi-sidebar {
        top: 0 !important;
        height: 100dvh !important;
        margin-top: calc(-1 * (var(--topbar-height) + 0.75rem));
        z-index: 31;
    }

    .fi-body-has-topbar .fi-sidebar-header {
        display: flex !important;
        justify-content: flex-start;
        padding-inline: 2rem;
        height: 4rem;
    }
}

/* ---- Top bar: detached, rounded, blurred --------------------------------- */

/* The strip above the navbar hides content scrolling under it, as Sneat's blurred band. */
.fi-topbar-ctn {
    padding: 0.75rem 1.625rem 0;
    background: linear-gradient(var(--sn-body) 0.75rem, transparent 0.75rem) !important;
}

.fi-topbar {
    border-radius: var(--sn-radius-sm);
    background-color: color-mix(in srgb, var(--sn-card) 95%, transparent) !important;
    backdrop-filter: saturate(200%) blur(6px);
    box-shadow: 0 0 0.375rem 0.25rem rgba(161, 172, 184, 0.15) !important;
    border: 0 !important;
}

.dark .fi-topbar {
    box-shadow: 0 0 0.375rem 0.25rem rgba(20, 21, 33, 0.3) !important;
}

/* ---- Cards ----------------------------------------------------------------- */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-wi-widget > .fi-section,
.fi-in-repeatable,
.fi-fo-repeater-item,
.fi-simple-main {
    background-color: var(--sn-card) !important;
    border-radius: var(--sn-radius) !important;
    box-shadow: var(--sn-shadow) !important;
    border: 0 !important;
}

.fi-section-header {
    padding-block: 1.25rem;
}

.fi-section-header-heading {
    font-size: 1.125rem;
}

.fi-simple-main {
    box-shadow: var(--sn-shadow-lg) !important;
}

.fi-modal-window,
.fi-dropdown-panel {
    background-color: var(--sn-card) !important;
    border-radius: var(--sn-radius) !important;
    box-shadow: var(--sn-shadow-lg) !important;
    border: 0 !important;
}

/* Stat tiles: Sneat's large value under a muted label. */
.fi-wi-stats-overview-stat-label {
    color: var(--sn-text);
}

.fi-wi-stats-overview-stat-value {
    color: var(--sn-heading);
    font-weight: 600;
}

/* ---- Tables ---------------------------------------------------------------- */

.fi-ta-header-cell {
    color: var(--sn-heading) !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.fi-ta-row {
    transition: background-color 0.1s ease;
}

.fi-ta-row:hover {
    background-color: var(--sn-hover);
}

/* ---- Buttons, inputs, badges -------------------------------------------- */

.fi-btn {
    border-radius: var(--sn-radius-sm) !important;
    font-weight: 500;
    letter-spacing: 0.0125em;
}

/* Solid primary with white text, as Sneat (Filament would pick a pale shade with dark text). */
.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) {
    background-color: var(--sn-primary) !important;
    color: #fff !important;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link) svg {
    color: #fff !important;
}

.fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-link):hover {
    background-color: #5f61e6 !important;
    transform: translateY(-1px);
}

.fi-input-wrp {
    border-radius: var(--sn-radius-sm) !important;
}

.fi-input-wrp:not(:focus-within) {
    box-shadow: 0 0 0 1px var(--sn-border) !important;
}

.fi-input-wrp:focus-within {
    box-shadow: 0 0 0.25rem 0.05rem rgba(105, 108, 255, 0.1), 0 0 0 1px var(--sn-primary) !important;
}

.fi-fo-field-label,
.fi-in-entry-label {
    color: var(--sn-heading);
    font-size: 0.8125rem;
    font-weight: 500;
}

.fi-badge {
    border-radius: 0.25rem !important;
    font-weight: 500;
}

.fi-tabs {
    border-radius: var(--sn-radius) !important;
    box-shadow: var(--sn-shadow) !important;
    background-color: var(--sn-card) !important;
}

.fi-pagination-item-btn {
    border-radius: var(--sn-radius-sm);
}