/*
 * The Digital iQ dashboard in the look of the Devinity dashboard (Coding/Devinity/frontend/src/admin, a port of
 * shadcn-admin): ink with a blue cast, the sidebar on a dark frame, the page in an inset panel lit from the top, one
 * blue accent, Inter, quiet hairlines and compact controls.
 *
 * Plain CSS on top of Filament's own theme (registered in AdminPanelProvider, published by `php artisan
 * filament:assets`). Filament's rules live in cascade layers, so these unlayered rules win without !important.
 *
 * 1. Tokens     light, dark (the default)
 * 2. Base       page, type, scrollbars
 * 3. Shell      sidebar, content panel and its bar, page header
 * 4. Surfaces   sections, tabs, tables, dropdowns, modals, notifications, widgets
 * 5. Controls   fields, buttons, badges
 * 6. Sign-in    the simple pages
 */

/* ------------------------------------------------------------------ 1. Tokens */

:root {
    --dq-frame: #f3f6fa;
    --dq-bg: #ffffff;
    --dq-card: #ffffff;
    --dq-popover: #ffffff;

    --dq-fg: #0b1726;
    --dq-muted-fg: #5c6a7d;
    --dq-subtle: #7a8798;

    --dq-primary: #2563eb;
    --dq-primary-fg: #ffffff;
    --dq-muted: #f0f4f9;
    --dq-accent: #eaf0f7;
    --dq-destructive: #dc2626;
    --dq-destructive-solid: #dc2626;

    --dq-border: #dde4ec;
    --dq-input: #cad4e0;
    --dq-ring: #3b82f6;

    --dq-sidebar-fg: #3c4a5e;
    --dq-sidebar-accent: #e4ebf4;

    --dq-panel-shadow: 0 8px 24px -12px rgb(15 23 42 / 0.12);
    --dq-popover-shadow: 0 12px 32px -12px rgb(15 23 42 / 0.18);
    --dq-glow:
        radial-gradient(60rem 22rem at 12% -9rem, rgb(56 189 248 / 0.09), transparent 70%),
        radial-gradient(52rem 20rem at 88% -10rem, rgb(37 99 235 / 0.07), transparent 70%);
}

.dark {
    --dq-frame: #05080e;
    --dq-bg: #090d14;
    --dq-card: #0e131b;
    --dq-popover: #111720;

    --dq-fg: #f0f4f9;
    --dq-muted-fg: #93a1b6;
    --dq-subtle: #6f7d91;

    --dq-primary: #2f6fed;
    --dq-muted: #181e29;
    --dq-accent: #1b232f;
    --dq-destructive: #f87171;

    --dq-border: #202835;
    --dq-input: #2b3544;
    --dq-ring: #60a5fa;

    --dq-sidebar-fg: #b0bccd;
    --dq-sidebar-accent: #141b26;

    --dq-panel-shadow: 0 8px 24px -12px rgb(0 0 0 / 0.5);
    --dq-popover-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.6);
    --dq-glow:
        radial-gradient(60rem 22rem at 12% -9rem, rgb(56 189 248 / 0.1), transparent 70%),
        radial-gradient(52rem 20rem at 88% -10rem, rgb(37 99 235 / 0.16), transparent 70%);
}

/* ------------------------------------------------------------------ 2. Base */

.fi-body {
    background: var(--dq-frame);
    color: var(--dq-fg);
    font-feature-settings: 'cv11', 'ss03';
    text-rendering: optimizeLegibility;
}

.fi-body ::selection {
    background: color-mix(in srgb, var(--dq-primary) 28%, transparent);
}

.fi-body * {
    scrollbar-width: thin;
    scrollbar-color: var(--dq-input) transparent;
}

/* The light logo is drawn for a dark ground; on the light theme it is darkened to ink */
html:not(.dark) .fi-logo {
    filter: brightness(0.25) contrast(1.25);
}

/* ------------------------------------------------------------------ 3. Shell */

/* Sidebar: on the frame, full height (there is no bar across the top) */
.fi-sidebar {
    background: var(--dq-frame);
}

.fi-sidebar.fi-sidebar-open {
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

@media (max-width: 63.999rem) {
    .fi-sidebar.fi-sidebar-open {
        border-inline-end: 1px solid var(--dq-border);
    }
}

.fi-sidebar-header {
    height: 3.5rem;
    padding-inline: 0.75rem;
}

.fi-sidebar-header .fi-logo {
    margin-inline-start: 0.5rem;
}

/* The bar in the content panel toggles the sidebar */
.fi-sidebar-open-collapse-sidebar-btn,
.fi-sidebar-close-collapse-sidebar-btn,
.fi-layout-sidebar-toggle-btn-ctn {
    display: none !important;
}

.fi-sidebar-nav {
    gap: 1rem;
    padding: 0.25rem 0.5rem 0.5rem;
}

.fi-sidebar-nav-groups {
    margin-inline: 0;
    gap: 0.75rem;
}

.fi-sidebar-group,
.fi-sidebar-group-items {
    gap: 0.125rem;
}

.fi-sidebar-group-btn {
    height: 1.75rem;
    padding: 0 0.5rem;
}

.fi-sidebar-group-label {
    color: var(--dq-subtle);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.75rem;
    text-transform: uppercase;
}

.fi-sidebar-group-btn .fi-icon,
.fi-sidebar-group-collapse-btn .fi-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--dq-subtle);
}

.fi-sidebar-group-collapse-btn {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.25rem;
}

.fi-sidebar-item-btn {
    justify-content: flex-start;
    gap: 0.625rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    transition:
        background-color 150ms ease-out,
        color 150ms ease-out;
}

.fi-sidebar-item-btn > .fi-icon {
    width: 1rem;
    height: 1rem;
    color: var(--dq-subtle);
    transition: color 150ms ease-out;
}

.fi-sidebar-item-label {
    color: var(--dq-sidebar-fg);
    font-weight: 400;
}

.fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:is(:hover, :focus-visible) {
    background: var(--dq-sidebar-accent);

    & > .fi-sidebar-item-label,
    & > .fi-icon {
        color: var(--dq-fg);
    }
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--dq-sidebar-accent);

    & > .fi-sidebar-item-label {
        color: var(--dq-fg);
        font-weight: 500;
    }

    & > .fi-icon {
        color: var(--dq-primary);
    }
}

.fi-sidebar-item-badge-ctn .fi-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--dq-muted);
    color: var(--dq-muted-fg);
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    --tw-ring-shadow: 0 0 #0000;
    box-shadow: none;
}

/* The account at the foot of the sidebar */
.fi-sidebar-footer {
    margin: 0 0.5rem 0.5rem;
    padding-top: 0.5rem;
    border-top: 0;
}

.fi-sidebar .fi-user-menu-trigger {
    justify-content: flex-start;
    gap: 0.625rem;
    height: 3rem;
    padding: 0.5rem;
    border-radius: 0.375rem;

    &:is(:hover, :focus-visible) {
        background: var(--dq-sidebar-accent);
    }

    & .fi-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 0.375rem;
    }

    & .fi-icon {
        width: 1rem;
        height: 1rem;
        color: var(--dq-subtle);
    }
}

/* The content panel: inset from the frame, with a hairline, and lit from the top */
.fi-main-ctn {
    position: relative;
    isolation: isolate;
    background: var(--dq-bg);
}

.fi-main-ctn::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 22rem;
    border-radius: inherit;
    background: var(--dq-glow);
    pointer-events: none;
}

@media (min-width: 64rem) {
    .fi-body .fi-main-ctn {
        min-height: calc(100dvh - 1rem);
        margin: 0.5rem 0.5rem 0.5rem 0;
        border: 1px solid var(--dq-border);
        border-radius: 0.75rem;
        box-shadow: var(--dq-panel-shadow);
    }
}

/* The bar at the top of the panel (resources/views/filament/admin/content-header.blade.php) */
.dq-content-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 3.5rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid transparent;
    border-radius: 0.75rem 0.75rem 0 0;
    transition:
        border-color 200ms,
        background-color 200ms;

    &.dq-scrolled {
        border-color: var(--dq-border);
        border-radius: 0;
        background: color-mix(in srgb, var(--dq-bg) 85%, transparent);
        backdrop-filter: blur(12px);
    }
}

@media (min-width: 40rem) {
    .dq-content-header {
        padding: 0 1rem;
    }
}

.dq-content-header-sep {
    width: 1px;
    height: 1rem;
    margin: 0 0.25rem;
    background: var(--dq-border);
}

.dq-content-header-end {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-start: auto;
}

.dq-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.375rem;
    color: var(--dq-muted-fg);
    outline: none;
    transition:
        background-color 150ms ease-out,
        color 150ms ease-out;

    & svg {
        width: 1rem;
        height: 1rem;
    }

    &:hover {
        background: var(--dq-accent);
        color: var(--dq-fg);
    }

    &:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--dq-ring) 40%, transparent);
    }
}

/* Search in the bar: a quiet field with the shortcut in it */
.dq-content-header .fi-global-search-field {
    width: min(18rem, 50vw);

    & .fi-input-wrp {
        position: relative;
        background: color-mix(in srgb, var(--dq-muted) 60%, transparent);
    }

    & .fi-input-wrp::after {
        content: '⌘K';
        position: absolute;
        inset-block: 0;
        inset-inline-end: 0.5rem;
        display: flex;
        align-items: center;
        color: var(--dq-subtle);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        pointer-events: none;
    }

    & .fi-input-wrp:focus-within::after {
        display: none;
    }

    & .fi-input {
        padding-block: 0.375rem;
    }
}

.dq-content-header .fi-global-search-results-ctn {
    inset-inline: 0.75rem;
    max-width: 28rem;
}

@media (min-width: 40rem) {
    .dq-content-header .fi-global-search-results-ctn {
        inset-inline: auto 0;
        width: 100vw;
        max-width: 26rem;
    }
}

@media (max-width: 39.999rem) {
    .dq-content-header .fi-global-search-field {
        width: 10rem;
    }

    .dq-content-header .fi-global-search-field .fi-input-wrp::after {
        display: none;
    }
}

/* The page under the bar */
.fi-main {
    padding: 0.25rem 1rem 2rem;
}

@media (min-width: 40rem) {
    .fi-main {
        padding-inline: 1.5rem;
    }
}

.fi-page-header-main-ctn {
    gap: 1.5rem;
    padding-block: 0.5rem 2rem;
}

.fi-header {
    gap: 1rem;
}

.fi-header-heading {
    color: var(--dq-fg);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.fi-header-subheading {
    margin-top: 0.25rem;
    color: var(--dq-muted-fg);
    font-size: 0.875rem;
}

.fi-breadcrumbs {
    margin-bottom: 0.5rem;

    /* One line: a long record name is cut short */
    & .fi-breadcrumbs-list {
        flex-wrap: nowrap;
        min-width: 0;
    }

    & .fi-breadcrumbs-item {
        min-width: 0;
    }

    & .fi-breadcrumbs-item-label {
        display: block;
        max-width: 32rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & :is(a, span) {
        color: var(--dq-muted-fg);
        font-size: 0.8125rem;
        font-weight: 400;
    }

    & a:hover {
        color: var(--dq-fg);
    }

    & .fi-icon {
        width: 0.875rem;
        height: 0.875rem;
        color: var(--dq-subtle);
    }
}

/* ------------------------------------------------------------------ 4. Surfaces */

/* Cards: a hairline and the card ink, no shadow */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-section:not(.fi-section-not-contained).fi-aside > .fi-section-content-ctn,
.fi-sc-wizard.fi-contained,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item,
.fi-fo-builder-item {
    background: var(--dq-card);
    border: 1px solid var(--dq-border);
    border-radius: 0.75rem;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-section:not(.fi-section-not-contained):not(.fi-aside) > .fi-section-header {
    padding: 1rem 1.25rem;
}

.fi-section:not(.fi-section-not-contained).fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn {
    border-color: var(--dq-border);
}

.fi-section:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.25rem;
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer {
    padding: 0.875rem 1.25rem;
    border-color: var(--dq-border);
}

.fi-section-header-heading {
    color: var(--dq-fg);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.fi-section-header-description {
    color: var(--dq-muted-fg);
    font-size: 0.875rem;
}

/* Tabs: a segmented control (a muted track, the current tab raised on it) */
.fi-tabs {
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    margin-inline: 0;
    padding: 3px;
    border: 0;
    border-radius: 0.5rem;
    background: var(--dq-muted);
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

/* Tabs over a form: the control above the sections, not another card around them */
.fi-sc-tabs.fi-contained {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    --tw-ring-shadow: 0 0 #0000;
}

.fi-tabs.fi-contained {
    margin: 0;
    padding: 3px;
    border: 0;
}

.fi-tabs.fi-vertical {
    width: auto;
}

.fi-tabs-item {
    height: 1.875rem;
    padding: 0 0.75rem;
    gap: 0.375rem;
    border-radius: 0.375rem;

    &:is(:hover, :focus-visible) {
        background: transparent;
    }

    & .fi-tabs-item-label {
        color: var(--dq-muted-fg);
    }

    & > .fi-icon {
        width: 1rem;
        height: 1rem;
        color: var(--dq-subtle);
    }

    &:hover .fi-tabs-item-label {
        color: var(--dq-fg);
    }

    &.fi-active {
        background: var(--dq-bg);
        box-shadow:
            0 1px 2px 0 rgb(0 0 0 / 0.12),
            0 0 0 1px var(--dq-border);

        & .fi-tabs-item-label {
            color: var(--dq-fg);
        }

        & > .fi-icon {
            color: var(--dq-primary);
        }
    }
}

.fi-sc-tabs.fi-contained > .fi-sc-tabs-tab {
    padding: 1rem 0 0;
}

/* Tables */
.fi-ta-ctn {
    overflow: hidden;
}

.fi-ta-header,
.fi-ta-header-toolbar {
    border-color: var(--dq-border);
}

.fi-ta-header-toolbar {
    padding: 0.75rem 1rem;
}

.fi-ta-table {
    font-variant-numeric: tabular-nums;
}

.fi-ta-table > thead {
    background: transparent;
}

.fi-ta-table > thead > tr,
.fi-ta-table > tbody > tr,
.fi-ta-table > tbody,
.fi-ta-content,
.fi-ta-footer,
.fi-ta-filter-indicators,
.fi-ta-selection-indicator,
.fi-pagination {
    border-color: var(--dq-border);
}

.fi-ta-header-cell {
    color: var(--dq-muted-fg);
    font-size: 0.75rem;
    font-weight: 500;
    background: color-mix(in srgb, var(--dq-muted) 40%, transparent);
}

.fi-ta-row {
    transition: background-color 100ms;

    &:hover,
    &.fi-selected {
        background: color-mix(in srgb, var(--dq-muted) 55%, transparent);
    }
}

.fi-ta-text-item-label,
.fi-ta-cell {
    font-size: 0.875rem;
}

/* Menus, dialogs, toasts */
.fi-dropdown-panel {
    background: var(--dq-popover);
    border: 1px solid var(--dq-border);
    border-radius: 0.5rem;
    box-shadow: var(--dq-popover-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

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

.fi-dropdown-list-item {
    border-radius: 0.25rem;
    font-size: 0.875rem;

    &:is(:hover, :focus-visible) {
        background: var(--dq-accent);
    }
}

.fi-dropdown-header {
    border-color: var(--dq-border);
}

.fi-modal-window {
    background: var(--dq-card);
    border: 1px solid var(--dq-border);
    border-radius: 0.75rem;
    box-shadow: var(--dq-popover-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal-close-overlay {
    background: rgb(0 0 0 / 0.55);
    backdrop-filter: blur(2px);
}

.fi-no-notification {
    background: var(--dq-popover);
    border: 1px solid var(--dq-border);
    border-radius: 0.75rem;
    box-shadow: var(--dq-popover-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-global-search-results-ctn {
    background: var(--dq-popover);
    border: 1px solid var(--dq-border);
    border-radius: 0.5rem;
    box-shadow: var(--dq-popover-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

/* ------------------------------------------------------------------ 5. Controls */

.fi-fo-field-label-content {
    color: var(--dq-fg);
    font-size: 0.8125rem;
    font-weight: 500;
}

.fi-fo-field-label-required-mark {
    color: var(--dq-destructive);
}

.fi-fo-field-wrp-helper-text,
.fi-fo-field-wrp-hint {
    color: var(--dq-muted-fg);
    font-size: 0.8125rem;
}

.fi-fo-field-wrp-error-message {
    color: var(--dq-destructive);
    font-size: 0.8125rem;
}

/* The field frame: a hairline that brightens on hover and takes a soft ring on focus */
.fi-input-wrp {
    border-radius: 0.375rem;
    background: transparent;
    box-shadow:
        inset 0 0 0 1px var(--dq-input),
        0 1px 0 0 rgb(0 0 0 / 0.04);
    --tw-ring-shadow: 0 0 #0000;
    transition:
        box-shadow 150ms ease-out,
        background-color 150ms ease-out;

    &:not(.fi-disabled):hover {
        box-shadow: inset 0 0 0 1px var(--dq-subtle);
    }

    &:not(.fi-disabled):focus-within {
        box-shadow:
            inset 0 0 0 1px var(--dq-ring),
            0 0 0 3px color-mix(in srgb, var(--dq-ring) 25%, transparent);
    }

    &.fi-invalid {
        box-shadow: inset 0 0 0 1px var(--dq-destructive);

        &:focus-within {
            box-shadow:
                inset 0 0 0 1px var(--dq-destructive),
                0 0 0 3px color-mix(in srgb, var(--dq-destructive) 25%, transparent);
        }
    }

    &.fi-disabled {
        background: color-mix(in srgb, var(--dq-muted) 50%, transparent);
        opacity: 0.7;
    }

    /* Prefix and suffix (€, kg) sit in the field, without a divider */
    & .fi-input-wrp-prefix:not(.fi-inline),
    & .fi-input-wrp-suffix:not(.fi-inline) {
        border: 0;
    }

    & .fi-input-wrp-label,
    & .fi-input-wrp-prefix .fi-icon,
    & .fi-input-wrp-suffix .fi-icon {
        color: var(--dq-subtle);
        font-size: 0.875rem;
    }
}

.fi-input,
.fi-select-input {
    color: var(--dq-fg);
    font-size: 0.875rem;

    &::placeholder {
        color: var(--dq-subtle);
    }
}

.fi-checkbox-input,
.fi-radio-input {
    border-radius: 0.25rem;
    --tw-ring-color: var(--dq-input);
}

.fi-radio-input {
    border-radius: 999px;
}

/* Buttons: filled primary, outlined secondary, solid destructive; one height */
.fi-btn {
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition:
        background-color 150ms ease-out,
        box-shadow 150ms ease-out,
        color 150ms ease-out,
        transform 150ms ease-out;

    &:not([disabled]):not(.fi-disabled):active {
        transform: scale(0.97);
    }

    &.fi-size-xs {
        min-height: 1.75rem;
        padding: 0.25rem 0.5rem;
    }

    &.fi-size-sm {
        min-height: 2rem;
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    &.fi-size-lg,
    &.fi-size-xl {
        min-height: 2.5rem;
        padding-inline: 1.25rem;
    }

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

.fi-btn.fi-color-primary:not(.fi-outlined) {
    background: var(--dq-primary);
    color: var(--dq-primary-fg);
    box-shadow:
        inset 0 1px 0 0 rgb(255 255 255 / 0.14),
        0 1px 2px 0 rgb(0 0 0 / 0.25);

    &:not([disabled]):not(.fi-disabled):hover {
        background: color-mix(in srgb, var(--dq-primary) 90%, black);
    }

    & > .fi-icon {
        color: var(--dq-primary-fg);
    }
}

.fi-btn.fi-color-danger:not(.fi-outlined) {
    background: var(--dq-destructive-solid);
    color: #ffffff;
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.12);

    &:not([disabled]):not(.fi-disabled):hover {
        background: color-mix(in srgb, var(--dq-destructive-solid) 90%, black);
    }

    & > .fi-icon {
        color: #ffffff;
    }
}

/* Delete in a page's header: outlined, so the page's own action stays the strongest */
.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined) {
    background: transparent;
    color: var(--dq-destructive);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dq-destructive) 40%, transparent);

    &:not([disabled]):not(.fi-disabled):hover {
        background: color-mix(in srgb, var(--dq-destructive) 10%, transparent);
    }

    & > .fi-icon {
        color: var(--dq-destructive);
    }
}

/* Gray buttons (Cancel, filters): outlined */
.fi-btn:not(.fi-color):not(.fi-outlined),
.fi-btn.fi-color-gray:not(.fi-outlined) {
    background: transparent;
    color: var(--dq-fg);
    box-shadow: inset 0 0 0 1px var(--dq-input);

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

.fi-btn.fi-outlined {
    box-shadow: inset 0 0 0 1px var(--dq-input);
}

.fi-icon-btn {
    border-radius: 0.375rem;

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

.fi-badge {
    border-radius: 0.375rem;
    font-weight: 500;
}

.fi-pagination-item-btn,
.fi-pagination-items {
    border-radius: 0.375rem;
}

/* ------------------------------------------------------------------ 6. Sign-in */

.fi-simple-layout {
    position: relative;
    isolation: isolate;
    background: var(--dq-frame);
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 26rem;
    background: var(--dq-glow);
    pointer-events: none;
}

.fi-simple-main {
    background: var(--dq-card);
    border: 1px solid var(--dq-border);
    border-radius: 0.75rem;
    box-shadow: var(--dq-panel-shadow);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-simple-header-heading {
    color: var(--dq-fg);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.fi-simple-header-subheading {
    color: var(--dq-muted-fg);
}