html {
    font-size: 100%;
}

:root {
    --text-xs: 0.8125rem;
    --text-xs--line-height: 1.25rem;
    --shadow-panel: 0 0.75rem 2rem -1.5rem rgb(15 23 42 / 0.55);
    --field-soft: #f3f3f3;
    --field-hover: #e9e9e9;
    --field-stripe: #f9f9f9;
}

.dark {
    --shadow-panel: 0 0.75rem 2rem -1.5rem rgb(0 0 0 / 0.75);
}

/* Page shell: grey page, floating topbar and a white sidebar card. */
.fi-body {
    --topbar-height: 6.5rem;

    background-color: var(--field-soft);
}

.dark .fi-body {
    background-color: var(--gray-950);
}

.fi-topbar-ctn {
    padding: 1.5rem 2.5rem 0;
    background: transparent;
}

.fi-topbar {
    min-height: 5rem;
    padding-inline: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-topbar {
    background: var(--gray-900);
}

.fi-main {
    padding-inline: 2.5rem;
}

.fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-main {
    padding-inline-start: 3.125rem;
}

.fi-sidebar {
    margin: 1.25rem 0 2.5rem 2.5rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    background: white;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    transition:
        width 300ms ease-in-out,
        transform 300ms ease-in-out;
}

.fi-body-has-topbar .fi-sidebar {
    top: calc(var(--topbar-height) + 1.25rem);
    height: calc(100dvh - var(--topbar-height) - 3.75rem);
}

.dark .fi-sidebar {
    background: var(--gray-900);
}

.fi-sidebar-nav {
    min-height: 0;
    padding: 0;
}

.fi-sidebar-nav-groups,
.fi-sidebar-nav-groups .fi-sidebar-group-items {
    gap: 0.5rem;
    margin: 0;
}

/* Group chevron: animate the flip when a group toggles (Filament switches the rotation instantly). */
.fi-sidebar-group-collapse-button,
.fi-sidebar-group-collapse-button .fi-icon,
.fi-sidebar-group-btn > .fi-icon {
    transition:
        rotate 0.3s ease,
        transform 0.3s ease;
}

/* Sub-item guide line: Filament sizes it for 2rem rows; ours are 3rem pills with a 0.5rem gap,
   so stretch each half to the pill edge plus half the gap to keep the line unbroken. */
.fi-sidebar-item-grouped-border-part-not-first {
    top: auto;
    bottom: 50%;
    height: 1.75rem;
}

.fi-sidebar-item-grouped-border-part-not-last {
    top: 50%;
    bottom: auto;
    height: 1.75rem;
}

/* Collapsed sidebar: fixed width, content only as wide as the icon buttons. */
.fi-body-has-sidebar-collapsible-on-desktop .fi-sidebar:not(.fi-sidebar-open) {
    width: var(--collapsed-sidebar-width);

    & .fi-sidebar-nav {
        padding-inline-end: 0;
    }

    & .fi-sidebar-nav-groups {
        width: max-content;
    }
}

/* Sidebar toggle lives in the sidebar footer (a "panel" icon, not a chevron, so it never reads
   as a back button) — hide Filament's default topbar chevrons. */
.fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

/* Nav items are 3rem pills; the toggle mirrors them so it reads as a regular item pinned to the bottom. */
.fi-sidebar-item-btn,
.m-sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    height: 3rem;
    padding: 0.25rem 1rem;
    border-radius: 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: black;
    transition: background-color 150ms ease-out;
}

.fi-sidebar-group-dropdown-trigger-btn {
    justify-content: flex-start;
}

.m-sidebar-toggle {
    width: 100%;
}

.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item-label {
    font-size: 1rem;
    color: inherit;
}

.fi-sidebar-item-btn > .fi-icon,
.m-sidebar-toggle__icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.m-sidebar-toggle:hover {
    background: var(--field-soft);
}

.dark .fi-sidebar-item-btn,
.dark .m-sidebar-toggle {
    color: white;
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover,
.dark .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:focus-visible,
.dark .m-sidebar-toggle:hover {
    background: var(--gray-950);
}

.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-btn,
.fi-sidebar:not(.fi-sidebar-open) .m-sidebar-toggle {
    justify-content: center;
    width: 3rem;
    padding-inline: 0.25rem;
}

.m-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.m-sidebar-credit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3125rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--field-soft);
    line-height: 1.5rem;
    white-space: nowrap;
    color: rgb(0 0 0 / 50%);
}

.dark .m-sidebar-credit {
    border-top-color: rgb(255 255 255 / 15%);
    color: rgb(255 255 255 / 50%);
}

.m-sidebar-credit__mark {
    flex: none;
}

/* The "2" is a separate shape that must match the card behind the bubble. */
.m-sidebar-credit__glyph {
    fill: white;
}

.dark .m-sidebar-credit__mark {
    color: white;
}

.dark .m-sidebar-credit__glyph {
    fill: var(--gray-900);
}

/* Collapsing is a desktop feature; below it the sidebar is an overlay and the shell loses its inset. */
@media screen and (max-width: 63.999rem) {
    .m-sidebar-toggle {
        display: none;
    }

    .fi-body {
        --topbar-height: 4.75rem;
    }

    .fi-topbar-ctn {
        padding: 0.75rem 1rem 0;
    }

    .fi-topbar {
        min-height: 4rem;
        padding-inline: 1rem;
    }

    .fi-main,
    .fi-body-has-navigation:not(.fi-body-has-top-navigation) .fi-main {
        padding-inline: 1rem;
    }

    .fi-sidebar,
    .fi-body-has-topbar .fi-sidebar {
        top: 0;
        height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}

/* Brand: icon plus Avenir wordmark, "VITAMIN 2" in Heavy above the product name in Book. */
.fi-logo:has(.m-brand) {
    height: auto !important;
}

.fi-logo,
.fi-logo *,
.m-brand,
.m-brand * {
    font-family: 'Avenir', sans-serif;
    text-transform: uppercase;
}

.m-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.m-brand__icon {
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.m-brand__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    font-family: 'Avenir', sans-serif;
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 350;
    line-height: 100%;
    letter-spacing: 0.01375rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: black;
}

.dark .m-brand__text {
    color: white;
}

.m-brand__text-first {
    font-weight: 800;
}

/* Login: same grey page and white 8px card as the panels, large icon stacked above the name. */
.fi-simple-layout {
    background: var(--field-soft);
}

.dark .fi-simple-layout {
    background: var(--gray-950);
}

.fi-simple-main {
    border-radius: 0.5rem;
    box-shadow: none;
}

.fi-simple-layout .m-brand {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.fi-simple-layout .m-brand__icon {
    width: 8rem;
    height: 8rem;
}

.fi-simple-layout .m-brand__text {
    align-items: center;
    font-size: 1.75rem;
    text-align: center;
}

/* Topbar user menu: pill with avatar, uppercase name on two lines and chevron. */
.m-user-pill {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 12.5rem;
    padding: 0.25rem 1rem 0.25rem 0.25rem;
    border-radius: 2.5rem;
    color: black;
    background: var(--field-soft);
    transition: background-color 150ms ease-out;

    &:hover {
        background: var(--field-hover);
    }

    &:hover .m-user-pill__chevron {
        transform: translateY(0.125rem);
    }
}

.dark .m-user-pill {
    color: white;
    background: var(--gray-950);

    &:hover {
        background: var(--gray-800);
    }
}

.m-user-pill .fi-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
}

.m-user-pill__name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    line-height: 1;
    text-align: left;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.m-user-pill__chevron {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 200ms ease-out;
}

/* Dropdowns (user menu, tenant switcher): 8px card with pill items like the sidebar. */
.fi-dropdown-panel {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 15%);
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-dropdown-panel {
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 60%);
}

.fi-dropdown-list {
    gap: 0.25rem;
    padding: 0.5rem;
}

.fi-dropdown-list-item,
.fi-dropdown-header {
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 1rem;
    border-radius: 2.5rem;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.fi-dropdown-list-item:not(.fi-color) {
    color: black;

    & > .fi-icon,
    & .fi-dropdown-list-item-label {
        color: inherit;
    }

    &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible, .fi-selected, [aria-current]) {
        background: var(--field-soft);
    }
}

.fi-dropdown-list-item > .fi-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.dark .fi-dropdown-list-item:not(.fi-color) {
    color: white;

    &:not(.fi-disabled):not([disabled]):is(:hover, :focus-visible, .fi-selected, [aria-current]) {
        background: var(--gray-950);
    }
}

/* Headings: big tight Apercu. */
.fi-header {
    padding-top: 1.75rem;
}

.fi-header-heading {
    font-size: clamp(2rem, 3.2vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

/* Cards: flat white / #2c2c2c with 0.5rem corners. */
.fi-section,
.fi-ta-ctn {
    border-radius: 0.5rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) {
    background: white;
}

.fi-ta-ctn {
    padding: 1.25rem;
    background: white;
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-ta-ctn {
    background: var(--gray-900);
}

.fi-section-header-heading,
.fi-ta-header-heading {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
}

/* The table card already has 1.25rem of padding; keep header and toolbar flush with the content edge. */
.fi-ta-ctn .fi-ta-header,
.fi-ta-ctn .fi-ta-header-toolbar,
.fi-ta-ctn .fi-pagination {
    padding-inline: 0;
}

/* Buttons: 3rem pills. Primary is black (white in dark mode), gray is the soft grey field.
   Danger and other semantic colors keep their hue. */
.fi-btn:not(.fi-size-xs, .fi-size-sm, .fi-dropdown-panel *) {
    min-height: 3rem;
    padding-inline: 1.5rem;
    border-radius: 2.5rem;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.fi-btn:is(.fi-size-xs, .fi-size-sm):not(.fi-dropdown-panel *) {
    border-radius: 2.5rem;
}

.fi-btn:not(.fi-outlined) {
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-btn.fi-color-primary:not(.fi-outlined),
.fi-simple-main .fi-btn[type='submit'] {
    color: white;
    background: black;

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--gray-800);
    }

    & > .fi-icon {
        color: inherit;
    }
}

.dark .fi-btn.fi-color-primary:not(.fi-outlined),
.dark .fi-simple-main .fi-btn[type='submit'] {
    color: var(--gray-900);
    background: white;

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--gray-200);
    }
}

.fi-btn.fi-color-gray:not(.fi-outlined),
.fi-btn:not(.fi-color):not(.fi-outlined) {
    color: black;
    background: var(--field-soft);

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--field-hover);
    }

    & > .fi-icon {
        color: inherit;
    }
}

.dark .fi-btn.fi-color-gray:not(.fi-outlined),
.dark .fi-btn:not(.fi-color):not(.fi-outlined) {
    color: white;
    background: var(--gray-950);

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--gray-800);
    }
}

/* Form fields: borderless soft fields with 0.5rem corners; focus swaps to a black (white in dark) 2px ring. */
.fi-input-wrp {
    min-height: 3rem;
    align-items: center;
    border-radius: 0.5rem;
    background: var(--field-soft);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    transition: background-color 150ms ease-out;

    &:not(.fi-disabled):not(.fi-invalid):hover {
        background: #ececec;
    }

    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
        background: white;
        --tw-ring-shadow: 0 0 0 2px black;
        box-shadow: var(--tw-ring-shadow);
    }

    &.fi-invalid {
        --tw-ring-shadow: 0 0 0 2px var(--danger-600);
        box-shadow: var(--tw-ring-shadow);
    }

    &.fi-disabled {
        background: var(--field-stripe);
    }

    & input.fi-input,
    & textarea.fi-input,
    & select.fi-input {
        padding-block: 0.75rem;
        font-size: 1rem;
        color: black;

        &::placeholder {
            color: rgb(0 0 0 / 50%);
        }
    }

    & .fi-input-wrp-prefix:not(.fi-inline),
    & .fi-input-wrp-suffix:not(.fi-inline) {
        align-self: stretch;
        border-color: rgb(0 0 0 / 10%);
    }

    & .fi-input-wrp-label {
        color: rgb(0 0 0 / 50%);
    }
}

.dark .fi-input-wrp {
    background: var(--gray-950);

    &:not(.fi-disabled):not(.fi-invalid):hover {
        background: var(--gray-800);
    }

    &:not(.fi-disabled):not(:has(.fi-ac-action:focus)):focus-within {
        background: var(--gray-900);
        --tw-ring-shadow: 0 0 0 2px white;
    }

    &.fi-invalid {
        --tw-ring-shadow: 0 0 0 2px var(--danger-500);
    }

    &.fi-disabled {
        background: rgb(255 255 255 / 4%);
    }

    & input.fi-input,
    & textarea.fi-input,
    & select.fi-input {
        color: white;

        &::placeholder {
            color: rgb(255 255 255 / 50%);
        }
    }

    & .fi-input-wrp-prefix:not(.fi-inline),
    & .fi-input-wrp-suffix:not(.fi-inline) {
        border-color: rgb(255 255 255 / 10%);
    }

    & .fi-input-wrp-label {
        color: rgb(255 255 255 / 50%);
    }
}

.fi-fo-field-label-content {
    font-weight: 500;
    color: black;
}

.dark .fi-fo-field-label-content {
    color: white;
}

/* Table rows: borderless, every second row a soft field with 0.5rem corners. */
.fi-ta-table {
    border-collapse: separate;
    border-spacing: 0 0.25rem;
}

.fi-ta-table > tbody > .fi-ta-row {
    --tw-divide-y-reverse: 0;
    border: 0;

    & > td:first-child {
        border-start-start-radius: 0.5rem;
        border-end-start-radius: 0.5rem;
    }

    & > td:last-child {
        border-start-end-radius: 0.5rem;
        border-end-end-radius: 0.5rem;
    }

    &:nth-child(even) > td {
        background: var(--field-stripe);
    }

    &:hover > td {
        background: var(--field-soft);
    }
}

.dark .fi-ta-table > tbody > .fi-ta-row {
    &:nth-child(even) > td {
        background: var(--gray-950);
    }

    &:hover > td {
        background: rgb(255 255 255 / 8%);
    }
}

/* Table head: muted, medium weight labels without a divider so the striped rows carry the structure. */
.fi-ta-header-cell {
    font-weight: 500;
    color: rgb(0 0 0 / 50%);
    background: transparent;
}

.dark .fi-ta-header-cell {
    color: rgb(255 255 255 / 50%);
}

.fi-ta-header-ctn,
.fi-ta-header-toolbar {
    border: 0;
}

/* Badges: soft pills. The semantic hue stays as a tinted fill, the ring goes. */
.fi-badge {
    min-height: 1.75rem;
    padding: 0.125rem 0.75rem;
    border-radius: 2.5rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: black;
    background: var(--field-soft);
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: none;
    align-items: center;

    /* With the label centred, the icon badge's baseline differs from plain ones, so align the pills themselves by their middle. */
    vertical-align: middle;
    align-self: center;

    /* Filament baseline-aligns the label, which pins it to the top of the taller pill. */
    .fi-badge-label-ctn {
        align-self: center;
    }

    &.fi-size-xs,
    &.fi-size-sm {
        min-height: 0;
        padding-inline: 0.5rem;
    }

    &.fi-color {
        color: var(--text);
        background: color-mix(in oklab, var(--color-500) 14%, white);
    }
}

.dark .fi-badge {
    color: white;
    background: var(--gray-950);

    &.fi-color {
        color: var(--dark-text);
        background: color-mix(in oklab, var(--color-400) 20%, transparent);
    }
}

/* Button badge: Filament puts a square white backing behind the badge, which shows as white corners around the pill. */
.fi-btn.fi-btn .fi-btn-badge-ctn {
    background: transparent;
}

/* Tabs: same pill as the sidebar nav items — active is the soft grey field, no ring, no underline. */
.fi-tabs {
    gap: 0.5rem;

    &:not(.fi-contained) {
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        --tw-ring-shadow: 0 0 #0000;
    }
}

.fi-tabs-item {
    min-height: 3rem;
    padding: 0.25rem 1rem;
    border-radius: 2.5rem;
    font-size: 1rem;
    letter-spacing: 0.01em;

    & .fi-tabs-item-label,
    & > .fi-icon,
    &.fi-active .fi-tabs-item-label,
    &.fi-active > .fi-icon {
        color: black;
    }

    &:hover,
    &:focus-visible,
    &.fi-active {
        background: var(--field-soft);
    }

    & > .fi-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.dark .fi-tabs-item {
    & .fi-tabs-item-label,
    & > .fi-icon,
    &.fi-active .fi-tabs-item-label,
    &.fi-active > .fi-icon {
        color: white;
    }

    &:hover,
    &:focus-visible,
    &.fi-active {
        background: var(--gray-950);
    }
}

/* Pagination: borderless pill group, active page is the soft grey field. */
.fi-pagination-items {
    gap: 0.25rem;
    background: transparent;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-pagination-item {
    border: 0;

    & .fi-pagination-item-btn {
        min-width: 2.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 2.5rem;
    }

    &.fi-active .fi-pagination-item-btn,
    & .fi-pagination-item-btn:enabled:hover {
        background: var(--field-soft);
    }

    &.fi-active .fi-pagination-item-label {
        color: black;
    }
}

.dark .fi-pagination-item {
    &.fi-active .fi-pagination-item-btn,
    & .fi-pagination-item-btn:enabled:hover {
        background: var(--gray-950);
    }

    &.fi-active .fi-pagination-item-label {
        color: white;
    }
}

/* Links, modals and notifications: medium weight links, flat 0.5rem cards. */
.fi-link {
    font-weight: 500;
}

.fi-modal-window,
.fi-no-notification {
    border-radius: 0.5rem;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal-window {
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 15%);
}

.dark .fi-modal-window {
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 60%);
}

/* Slide-overs touch the top, bottom and trailing screen edges: only the inner (leading) corners stay rounded. */
.fi-modal.fi-modal-slide-over .fi-modal-window {
    border-radius: 0;
    border-start-start-radius: 0.5rem;
    border-end-start-radius: 0.5rem;
}

/* Avatars and logos are rounded squares, not circles; a white backdrop keeps transparent logos visible. */
.fi-avatar.fi-circular,
.fi-ta-image.fi-circular img,
.fi-in-image.fi-circular img {
    border-radius: 0.5rem;
}

.fi-avatar,
.fi-ta-image.fi-circular img,
.fi-in-image.fi-circular img {
    background-color: white;
}

.m-user-pill .fi-avatar {
    border-radius: 9999px;
}

/* Stat tiles: flat cards like sections. */
.fi-wi-stats-overview-stat {
    overflow: hidden;
    border-radius: 0.5rem;
    background: white;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-wi-stats-overview-stat {
    background: var(--gray-900);
}

/* Table: no grey header band, body text matches the 1rem used by the nav and fields. */
.fi-ta-table > thead > tr {
    background: transparent;
}

.fi-ta-cell,
.fi-ta-text-item,
.fi-ta-text-item-label,
.fi-ta-actions .fi-link,
.fi-ta-header-cell,
.fi-pagination-overview {
    font-size: 1rem;
}

/* Section headings: icon matches the 1.5rem heading line, takes the title colour and is centred with it. */
.fi-section-header {
    align-items: center;
}

.fi-section-header > .fi-icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: 0;
    color: inherit;
}

/* Collapsible sections: chevron centred in the header and rotating, body animating open/closed.
   Filament hides the collapsed body with display: none, so keep it displayed and animate grid rows. */
.fi-section-header > .fi-section-collapse-btn {
    align-self: center;
    margin-block: 0;
    transition: rotate 0.3s ease;
}

.fi-section.fi-collapsible > .fi-section-content-ctn {
    display: grid !important;
    grid-template-rows: 1fr;
    transition:
        grid-template-rows 0.3s ease,
        opacity 0.3s ease;

    & > * {
        min-height: 0;
        overflow: hidden;
        transition: padding-block 0.3s ease;
    }
}

.fi-section.fi-collapsible.fi-collapsed > .fi-section-content-ctn {
    grid-template-rows: 0fr;
    border-top-width: 0;
    opacity: 0;

    & > * {
        padding-block: 0 !important;
        border-top-width: 0;
    }
}

/* Page-level tabs sit on the grey page, so the active/hover pill is white instead of grey. */
.fi-tabs:not(.fi-contained) .fi-tabs-item {
    &:hover,
    &:focus-visible,
    &.fi-active {
        background: white;
    }
}

.dark .fi-tabs:not(.fi-contained) .fi-tabs-item {
    &:hover,
    &:focus-visible,
    &.fi-active {
        background: var(--gray-900);
    }
}

/* Outlined grey buttons lose their ring and become soft pills like the other grey buttons. */
.fi-btn.fi-outlined.fi-color-gray {
    color: black;
    background: var(--field-soft);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--field-hover);
    }
}

.dark .fi-btn.fi-outlined.fi-color-gray {
    color: white;
    background: var(--gray-950);

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--gray-800);
    }
}

/* Header actions sit on the grey page: white pills instead of grey ones. */
.fi-header .fi-btn:is(.fi-color-gray, :not(.fi-color)):not(.fi-color-primary),
.fi-header .fi-btn.fi-outlined.fi-color-gray {
    background: white;

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--field-hover);
    }
}

.dark .fi-header .fi-btn:is(.fi-color-gray, :not(.fi-color)):not(.fi-color-primary),
.dark .fi-header .fi-btn.fi-outlined.fi-color-gray {
    background: var(--gray-900);

    &:not(.fi-disabled):not([disabled]):hover {
        background: var(--gray-800);
    }
}

/* Sidebar scrolls when the viewport is short: keep the scrollbar slim and unobtrusive. */
.fi-sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) transparent;
}

/* Tenant menu in the topbar matches the 1rem medium labels of the rest of the shell. */
.fi-tenant-menu-trigger {
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
}

/* Placeholder tenant avatars (initials) get no white backdrop; only real logos need it. */
.fi-tenant-avatar {
    background-color: transparent;
}

/* Theme switcher: segmented pill (soft field), active segment is a flat white / dark card. */
.fi-theme-switcher {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 2.5rem;
    background: var(--field-soft);
}

.dark .fi-theme-switcher {
    background: var(--gray-950);
}

.fi-theme-switcher-btn {
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 2.5rem;
    color: rgb(0 0 0 / 50%);
    transition:
        background-color 150ms ease-out,
        color 150ms ease-out;
}

.fi-theme-switcher-btn .fi-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.fi-theme-switcher-btn:not(.fi-active):hover,
.fi-theme-switcher-btn:not(.fi-active):focus-visible {
    background: var(--field-hover);
    color: black;
}

.fi-theme-switcher-btn.fi-active {
    background: white;
    color: black;
}

.dark .fi-theme-switcher-btn {
    color: rgb(255 255 255 / 50%);
}

.dark .fi-theme-switcher-btn:not(.fi-active):hover,
.dark .fi-theme-switcher-btn:not(.fi-active):focus-visible {
    background: rgb(255 255 255 / 5%);
    color: white;
}

.dark .fi-theme-switcher-btn.fi-active {
    background: var(--gray-900);
    color: white;
}

/* Primary is amber in the demo panel, but the theme is monochrome: every "on" state is black (white in dark). */

/* Sidebar sub-item dot: grey, black when active. */
.fi-sidebar-item-grouped-border-part {
    background: rgb(0 0 0 / 30%);
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background: black;
}

.fi-sidebar-item-grouped-border-part-not-first,
.fi-sidebar-item-grouped-border-part-not-last {
    background: var(--field-hover);
}

.dark .fi-sidebar-item-grouped-border-part {
    background: rgb(255 255 255 / 30%);
}

.dark .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-grouped-border > .fi-sidebar-item-grouped-border-part {
    background: white;
}

.dark .fi-sidebar-item-grouped-border-part-not-first,
.dark .fi-sidebar-item-grouped-border-part-not-last {
    background: rgb(255 255 255 / 15%);
}

/* Toggle: grey track, black when on. */
.fi-toggle {
    background: var(--field-hover);
    --tw-ring-color: black;

    &.fi-toggle-on {
        background: black;
    }

    & .fi-icon {
        color: rgb(0 0 0 / 40%);
    }

    &.fi-toggle-on .fi-icon {
        color: black;
    }
}

.dark .fi-toggle {
    background: var(--gray-800);
    --tw-ring-color: white;

    &.fi-toggle-on {
        background: white;
    }

    & .fi-icon {
        color: rgb(255 255 255 / 40%);
    }

    &.fi-toggle-on .fi-icon {
        color: var(--gray-900);
    }
}

/* Centre the box on the label's first line (Filament's mt-1/mt-0.5 assume a 1rem box). */
.fi-fo-field .fi-fo-field-label > .fi-checkbox-input {
    margin-top: 0;
}

.fi-fo-checkbox-list .fi-fo-checkbox-list-option .fi-checkbox-input,
.fi-fo-radio > .fi-fo-radio-label > .fi-radio-input {
    margin-top: 0.125rem;
}

/* Checkbox and radio: soft field box, black fill when checked. */
input[type='checkbox'].fi-checkbox-input,
input[type='radio'].fi-radio-input {
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--field-hover);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
    transition: background-color 150ms ease-out;

    &:not(:disabled):not(:checked):hover {
        background-color: #dcdcdc;
    }

    &:checked {
        background-color: black;
        color: black;
    }

    &:focus-visible {
        --tw-ring-shadow: 0 0 0 2px black;
        box-shadow: 0 0 0 2px white, 0 0 0 4px black;
    }
}

input[type='checkbox'].fi-checkbox-input {
    border-radius: 0.5rem;
    background-position: center;
    background-size: 100% 100%;

    &:checked {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E");
    }

    &:indeterminate {
        background-color: black;
    }
}

.dark input[type='checkbox'].fi-checkbox-input:indeterminate {
    background-color: white;
}

.dark input[type='checkbox'].fi-checkbox-input,
.dark input[type='radio'].fi-radio-input {
    background-color: var(--gray-950);

    &:not(:disabled):not(:checked):hover {
        background-color: var(--gray-800);
    }

    &:checked {
        background-color: white;
        color: white;
    }

    &:focus-visible {
        box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px white;
    }
}

/* Checked glyph flips to dark on the white dark-mode fill. */
.dark input[type='checkbox'].fi-checkbox-input:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23171717' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 10.5l3.5 3.5L15 6.5'/%3E%3C/svg%3E");
}

.dark input[type='radio'].fi-radio-input:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23171717' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}

/* Checkbox / radio variations: indeterminate glyph, disabled, invalid. */
input[type='checkbox'].fi-checkbox-input:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 10h9'/%3E%3C/svg%3E");
    background-position: center;
    background-size: 100% 100%;
}

.dark input[type='checkbox'].fi-checkbox-input:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23171717' stroke-width='2.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5 10h9'/%3E%3C/svg%3E");
}

input[type='checkbox'].fi-checkbox-input:disabled,
input[type='radio'].fi-radio-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background-color: var(--field-soft);

    &:checked,
    &:indeterminate {
        background-color: black;
        color: black;
    }
}

.dark input[type='checkbox'].fi-checkbox-input:disabled,
.dark input[type='radio'].fi-radio-input:disabled {
    background-color: var(--gray-950);

    &:checked,
    &:indeterminate {
        background-color: white;
        color: white;
    }
}

/* Invalid: soft box with a danger ring; checked stays black so the state still reads as "on". */
input[type='checkbox'].fi-checkbox-input.fi-invalid,
input[type='radio'].fi-radio-input.fi-invalid {
    box-shadow: 0 0 0 1px var(--danger-600);
    --tw-ring-shadow: 0 0 #0000;

    &:focus-visible {
        box-shadow: 0 0 0 2px white, 0 0 0 4px var(--danger-600);
    }

    &:checked,
    &:indeterminate {
        background-color: black;
        color: black;
    }
}

.dark input[type='checkbox'].fi-checkbox-input.fi-invalid,
.dark input[type='radio'].fi-radio-input.fi-invalid {
    box-shadow: 0 0 0 1px var(--danger-500);

    &:focus-visible {
        box-shadow: 0 0 0 2px var(--gray-900), 0 0 0 4px var(--danger-500);
    }

    &:checked,
    &:indeterminate {
        background-color: white;
        color: white;
    }
}

/* Same box size in the table (select-all, group, record) and column manager. */
.fi-ta-page-checkbox,
.fi-ta-group-checkbox,
.fi-ta-record-checkbox,
.fi-ta-col-manager-label > .fi-checkbox-input {
    flex-shrink: 0;
    vertical-align: middle;
}

/* Slider: soft track, black range, flat white handle. */
.fi-fo-slider {
    border-radius: 2.5rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;

    & .noUi-connects {
        border-radius: 2.5rem;
        background: var(--field-soft);
    }

    & .noUi-connect {
        background: black;
    }

    & .noUi-handle {
        border-radius: 2.5rem;
        border-color: var(--field-hover);

        &:focus {
            outline-color: black;
        }
    }

    & .noUi-tooltip {
        border-radius: 0.5rem;
        --tw-ring-shadow: 0 0 #0000;
        box-shadow: none;
        background: var(--field-soft);
    }
}

.dark .fi-fo-slider {
    & .noUi-connects {
        background: var(--gray-950);
    }

    & .noUi-connect {
        background: white;
    }

    & .noUi-handle {
        border-color: var(--gray-800);

        &:focus {
            outline-color: white;
        }
    }

    & .noUi-tooltip {
        background: var(--gray-950);
    }
}

/* Toggle buttons and button groups: same soft pills as the other buttons. */
.fi-btn-group {
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 2.5rem;
    background: var(--field-soft);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;

    & > .fi-btn,
    & > .fi-ac-btn-action {
        border-radius: 2.5rem;
        box-shadow: none;
    }
}

.dark .fi-btn-group {
    background: var(--gray-950);
}

.fi-fo-toggle-buttons-btn-ctn .fi-btn {
    border-radius: 2.5rem;
}

.fi-fo-toggle-buttons:not(.fi-btn-group) .fi-fo-toggle-buttons-input:checked + .fi-btn,
.fi-fo-toggle-buttons-input:checked + .fi-btn {
    color: white;
    background: black;
}

.dark .fi-fo-toggle-buttons-input:checked + .fi-btn {
    color: var(--gray-900);
    background: white;
}

/* Wizard: flat card, black step markers instead of primary. */
.fi-sc-wizard {
    border-radius: 0.5rem;
    background: var(--field-stripe);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-sc-wizard {
    background: var(--gray-950);
}

.fi-sc-wizard-header {
    border-bottom: 0;
}

.fi-sc-wizard-header-step-separator {
    color: var(--field-hover);
}

.dark .fi-sc-wizard-header-step-separator {
    color: rgb(255 255 255 / 10%);
}

.fi-sc-wizard:not(.fi-contained) .fi-sc-wizard-header {
    border-radius: 0.5rem;
    background: var(--field-stripe);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-sc-wizard:not(.fi-contained) .fi-sc-wizard-header {
    background: var(--gray-950);
}

.fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--field-hover);
    background: var(--field-soft);
}

.fi-sc-wizard-header-step-description {
    color: var(--gray-500);
}

.fi-sc-wizard-header-step.fi-active:not(.fi-completed) .fi-sc-wizard-header-step-icon-ctn,
.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: black;
    background: white;

    & .fi-icon,
    & .fi-sc-wizard-header-step-number {
        color: black;
    }
}

.fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
    color: black;
}

.fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    background: black;
    border-color: black;
}

.dark .fi-sc-wizard-header-step-icon-ctn {
    border-color: var(--gray-800);
    background: var(--gray-900);
}

.dark .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-icon-ctn {
    border-color: white;
    background: var(--gray-950);

    & .fi-icon,
    & .fi-sc-wizard-header-step-number {
        color: white;
    }
}

.dark .fi-sc-wizard-header-step.fi-active .fi-sc-wizard-header-step-label {
    color: white;
}

.dark .fi-sc-wizard-header-step.fi-completed .fi-sc-wizard-header-step-icon-ctn {
    background: white;
    border-color: white;

    & .fi-icon {
        color: var(--gray-900);
    }
}

/* Contained schema tabs and fieldsets: flat 0.5rem cards. */
.fi-sc-tabs.fi-contained {
    border-radius: 0.5rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-fieldset:not(.fi-fieldset-not-contained) {
    border: 0;
    border-radius: 0.5rem;
    background: var(--field-stripe);
}

.dark .fi-fieldset:not(.fi-fieldset-not-contained) {
    background: var(--gray-950);
}

.fi-fieldset > legend {
    font-size: 1rem;
    font-weight: 500;
}

/* Breadcrumbs: muted 1rem trail, black on hover. */
.fi-breadcrumbs ol li {
    font-size: 1rem;
    color: rgb(0 0 0 / 50%);

    & a:hover {
        color: black;
    }
}

.dark .fi-breadcrumbs ol li {
    color: rgb(255 255 255 / 50%);

    & a:hover {
        color: white;
    }
}

/* Rich editor and key-value / repeater inputs: soft field instead of a ringed box. */
.fi-fo-rich-editor,
.fi-fo-key-value-table-ctn,
.fi-fo-code-editor,
.fi-fo-markdown-editor {
    border-radius: 0.5rem;
    background: var(--field-soft);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-fo-rich-editor,
.dark .fi-fo-key-value-table-ctn,
.dark .fi-fo-code-editor,
.dark .fi-fo-markdown-editor {
    background: var(--gray-950);
}

.fi-fo-rich-editor-toolbar {
    border-color: rgb(0 0 0 / 10%);
    background: transparent;
}

.dark .fi-fo-rich-editor-toolbar {
    border-color: rgb(255 255 255 / 10%);
}

.fi-fo-rich-editor-tool {
    border-radius: 0.5rem;
}

.fi-fo-rich-editor-tool:hover,
.fi-fo-rich-editor-tool.fi-active {
    background: var(--field-hover);
}

.dark .fi-fo-rich-editor-tool:hover,
.dark .fi-fo-rich-editor-tool.fi-active {
    background: var(--gray-800);
}

/* Modals: pill-free flat card with a soft footer band; headings match the 1.5rem section headings. */
.fi-modal-heading {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0;
}

.fi-modal-description {
    font-size: 1rem;
}

.fi-modal-close-btn {
    border-radius: 2.5rem;

    &:hover {
        background: var(--field-soft);
    }
}

.dark .fi-modal-close-btn:hover {
    background: var(--gray-950);
}

.fi-modal-icon-bg {
    border-radius: 0.5rem;
}

/* Callouts, empty states and the dashboard widgets: flat cards without rings. */
.fi-callout,
.fi-empty-state:not(.fi-empty-state-not-contained),
.fi-account-widget,
.fi-filament-info-widget {
    border-radius: 0.5rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-callout:not(.fi-color),
.fi-empty-state:not(.fi-empty-state-not-contained) {
    background: white;
}

.dark .fi-callout:not(.fi-color),
.dark .fi-empty-state:not(.fi-empty-state-not-contained) {
    background: var(--gray-900);
}

/* Icon box matches the heading line box so the title centers on the icon. */
.fi-callout-icon {
    align-self: flex-start;
    height: 1.5rem;
    width: 1.5rem;
}

.fi-callout-main {
    margin-top: 0;
}

.fi-callout-heading {
    line-height: 1.5rem;
}

.fi-callout-heading,
.fi-empty-state-heading {
    font-size: 1rem;
    font-weight: 500;
}

.fi-callout-description,
.fi-empty-state-description {
    font-size: 1rem;
}

.fi-empty-state-icon-bg {
    border-radius: 0.5rem;
    background: var(--field-soft);
}

.dark .fi-empty-state-icon-bg {
    background: var(--gray-950);
}

/* Icon buttons (topbar bell, table actions): round soft hover, black focus ring. */
.fi-icon-btn {
    border-radius: 2.5rem;
    transition: background-color 150ms ease-out;

    &:not(.fi-disabled):not([disabled]):hover {
        color: black;
        background: var(--field-soft);
    }

    &:not(.fi-disabled):not([disabled]):focus-visible {
        --tw-ring-color: black;
    }
}

.dark .fi-icon-btn {
    &:not(.fi-disabled):not([disabled]):hover {
        color: white;
        background: var(--gray-950);
    }

    &:not(.fi-disabled):not([disabled]):focus-visible {
        --tw-ring-color: white;
    }
}

/* Global search results: dropdown card like the other menus. */
.fi-global-search-results-ctn {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 15%);
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-global-search-results-ctn {
    box-shadow: 0 0.5rem 2rem -0.5rem rgb(0 0 0 / 60%);
}

/* Section collapse button and descriptions. */
.fi-section-collapse-btn {
    border-radius: 2.5rem;
}

.fi-section-header-description {
    font-size: 1rem;
    color: rgb(0 0 0 / 50%);
}

.dark .fi-section-header-description {
    color: rgb(255 255 255 / 50%);
}

/* Table records-per-page select and header toolbar controls share the field look. */
.fi-pagination-records-per-page-select-ctn .fi-input-wrp {
    min-height: 2.5rem;
}

/* Infolists: labels muted like table heads, values at 1rem; key-value and repeatable rows are soft fields. */
.fi-in-entry-label {
    font-weight: 500;
    color: rgb(0 0 0 / 50%);
}

.dark .fi-in-entry-label {
    color: rgb(255 255 255 / 50%);
}

.fi-in-text-item,
.fi-in-text {
    font-size: 1rem;
}

.fi-in-key-value,
.fi-in-repeatable-item {
    border-radius: 0.5rem;
    background: var(--field-stripe);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-in-key-value,
.dark .fi-in-repeatable-item {
    background: var(--gray-950);
}

.fi-in-color-item {
    border-radius: 0.5rem;
}

/* One-time-code digits match the fields. */
.fi-one-time-code-input-digit {
    border-radius: 0.5rem;
    background: var(--field-soft);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.dark .fi-one-time-code-input-digit {
    background: var(--gray-950);
}

/* Loading spinners follow the text color instead of primary. */
.fi-loading-indicator {
    color: currentColor;
}