@layer components {
    .app-shell {
            background: var(--dashboard-color-surface);
            color: var(--dashboard-color-text);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            min-width: 0;
            width: 100%;
        }

    .app-shell__header {
            background: var(--dashboard-color-surface);
            border-bottom: 1px solid var(--dashboard-color-border);
            flex: 0 0 auto;
        }

    .app-shell__footer {
            background: var(--dashboard-color-surface);
            border-top: 1px solid var(--dashboard-color-border);
            flex: 0 0 auto;
            min-height: 4rem;
        }

    .app-shell__frame {
            margin-left: auto;
            margin-right: auto;
            max-width: var(--dashboard-shell-max-width);
            width: 100%;
        }

    .app-shell__frame--full {
            max-width: none;
        }

    .app-shell__frame--narrow {
            max-width: var(--dashboard-shell-narrow-max-width);
        }

    .app-shell__frame--padded {
            padding-left: var(--dashboard-section-padding-x);
            padding-right: var(--dashboard-section-padding-x);
        }

    .app-shell__main {
            background: var(--dashboard-color-surface);
            display: flex;
            flex: 1 0 auto;
            min-height: 0;
            min-width: 0;
            width: 100%;
        }

    .app-shell__content-frame {
            display: flow-root;
            flex: 1 1 auto;
            min-height: 100%;
            min-width: 0;
        }

    .app-shell__footer .app-shell__frame {
            min-height: 4rem;
        }

    .app-shell__header-inner {
            align-items: stretch;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding-bottom: 0.75rem;
            padding-top: 0.75rem;
        }

    .app-shell__brand-row {
            align-items: center;
            display: flex;
            justify-content: space-between;
            min-width: 0;
        }

    .app-shell__brand {
            align-items: center;
            color: var(--dashboard-color-text);
            display: inline-flex;
            gap: 0.5rem;
            min-width: 0;
            text-decoration: none;
        }

    .app-shell__brand-icon {
            flex: 0 0 auto;
            height: 1.5rem;
            width: 1.5rem;
        }

    .app-shell__brand-icon-mark {
            fill: #93c5fd;
        }

    .app-shell__brand-icon-arrow {
            fill: var(--dashboard-color-brand);
        }

    .app-shell__brand-label {
            color: var(--dashboard-color-text);
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.5rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .app-shell__menu-button {
            align-items: center;
            color: var(--dashboard-color-text);
            display: inline-flex;
            justify-content: center;
            min-height: 2.5rem;
            min-width: 2.5rem;
        }

    .app-shell__menu-icon {
            height: 1.5rem;
            width: 1.5rem;
        }

    .app-shell__menu {
            min-width: 0;
            width: 100%;
        }

    .app-shell__menu--collapsed {
            display: none;
        }

    .app-shell__nav-list {
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            min-width: 0;
        }

    .app-shell__nav-link {
            color: var(--dashboard-color-text-muted);
            font-size: 1rem;
            font-weight: 650;
            line-height: 1.5rem;
            text-decoration: none;
        }

    .app-shell__nav-link:hover {
            color: var(--dashboard-color-text);
        }

    .app-shell__account-menu {
            align-items: center;
            display: flex;
            position: relative;
        }

    .app-shell__avatar-button {
            align-items: center;
            display: inline-flex;
            flex-shrink: 0;
            justify-content: center;
        }

    .app-shell__avatar {
            border-radius: var(--dashboard-radius-pill);
            display: block;
            height: calc(2.5rem + 2px);
            width: calc(2.5rem + 2px);
        }

    .app-shell__account-dropdown {
            background: var(--dashboard-color-surface);
            border: 1px solid var(--dashboard-color-border);
            border-radius: 0.75rem;
            box-shadow: none;
            display: block;
            min-width: 12rem;
            padding: 0.375rem;
        }

    .app-shell__account-dropdown[hidden] {
            display: none;
        }

    .app-shell__dropdown-item {
            border-radius: 0.5rem;
            color: var(--dashboard-color-text-muted);
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.25rem;
            padding: 0.625rem 0.75rem;
            text-decoration: none;
        }

    .app-shell__dropdown-item:hover {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text);
        }

    .app-shell--narrow .app-page--narrow,
        .app-shell--narrow .app-page--medium,
        .app-shell--narrow .app-page--wide {
            max-width: none;
        }

    .app-shell--narrow .app-page {
            padding-bottom: 0;
            padding-top: 0;
        }

    .app-shell--narrow .app-page > :first-child {
            border-top: 0;
        }

    .app-shell--narrow .app-page > :last-child {
            border-bottom: 0;
        }

    .app-shell--narrow .app-page.app-stack {
            gap: 0;
        }

    .app-shell--narrow .app-card {
            border-bottom: 1px solid var(--dashboard-color-border);
            border-left: 0;
            border-right: 0;
            border-top: 0;
        }

    .app-shell--narrow .app-card + .app-card,
        .app-shell--narrow .app-utility-row + .app-card,
        .app-shell--narrow .app-card + .app-utility-row {
            margin-top: 0;
        }

    @media (min-width: 48.0625rem) {
        .app-shell__frame--narrow {
                    border-left: 1px solid var(--dashboard-color-border);
                    border-right: 1px solid var(--dashboard-color-border);
                }
    }

    @media (min-width: 72.0625rem) {
        .app-shell__frame {
                    border-left: 1px solid var(--dashboard-color-border);
                    border-right: 1px solid var(--dashboard-color-border);
                }
    }

    @media (min-width: 72.0625rem) {
        .app-shell__frame--full {
                    border-left: 0;
                    border-right: 0;
                }
    }

    @media (min-width: 72.0625rem) {
        .app-shell__content-frame {
                    border-top: 0;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__header-inner {
                    align-items: center;
                    flex-direction: row;
                    justify-content: space-between;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__frame--padded {
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .app-shell__menu-button {
                    display: none;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__menu {
                    width: auto;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__menu.app-shell__menu--collapsed {
                    display: block !important;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__nav-list {
                    align-items: center;
                    flex-direction: row;
                    gap: 1.25rem;
                }
    }

    @media (min-width: 48rem) {
        .app-shell__account-dropdown {
                    position: absolute;
                    right: 0;
                    top: calc(100% + 0.5rem);
                    z-index: 50;
                }
    }
}