.admin-layout {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    min-height: calc(100vh - var(--footer-height, 4rem));
    background: var(--bg-base);

    h1, h2, h3, p {
        margin: 0;
    }
    h3 {
        font-size: var(--font-size-xl);
        font-weight: 600;
    }
}

.admin-main {
    flex: 1;
    min-width: 0;
    max-width: 1600px;
    margin: 0 auto;
    height: min-content;
    display: flex;
    flex-direction: column;
    gap: var(--padding-md);
    padding: var(--padding-lg) var(--padding-lg) 5rem;

    .admin-header {
        display: flex;
        align-items: end;
        min-height: 3rem;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: var(--padding-md);

        h1 {
            margin: 0;
        }

        .admin-header__actions {
            display: flex;
            gap: var(--padding-sm);
            align-items: center;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
        }
    }

    @media (max-width: 1000px) {
        padding: var(--padding-xl) var(--padding-md);
    }
}

.admin-nav-toggle {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    align-items: center;
    gap: var(--padding-sm);
    background: var(--bg-base);
    border: none;
    border-bottom: var(--bd-primary);
    border-radius: 0;
    padding: var(--padding-sm) var(--padding-md);
    cursor: pointer;
    text-align: left;
    color: var(--text);

    .ti { font-size: var(--font-size-xl); }

    @media (max-width: 1000px) {
        display: flex;
    }
}

.admin-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 101;

    &.is-open { display: block; }
}

.admin-nav {
    flex: none;
    width: 16rem;
    align-self: flex-start;
    height: 100vh;
    max-height: 100vh;
    position: sticky;
    overflow-y: auto;
    top: 0;
    border-right: var(--bd-primary);
    padding: var(--padding-lg) var(--padding-md);
    box-sizing: border-box;
    background: var(--bg-base);

    @media (max-width: 1000px) {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 18rem;
        max-width: 85vw;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 102;
        margin-top: 0;
        border-radius: 0;
        min-height: 100%;

        &.is-open { transform: translateX(0); }
    }

    nav {
        display: flex;
        flex-direction: column;
        gap: var(--padding-xs);
    }

    .menu-item,
    .inactive-menu-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--padding-sm);
        padding: var(--padding-sm);
        text-decoration: none;
        font-weight: 500;
        font-size: var(--font-size-sm);
        color: var(--text);
        border-radius: var(--border-radius-md);
    }

    .menu-item {
        &:hover {
            background: var(--bg-sunken);
            text-decoration: none;
        }
        &.current {
            background: var(--bg-brand-transparent);
            color: var(--text-brand);
            font-weight: 600;
        }
        .ti {
            font-size: var(--font-size-xl);
            width: 1.375rem;
            text-align: center;
            color: currentColor;
            flex-shrink: 0;
        }
    }

    .menu-label { flex: 1; }

    .inactive-menu-item { color: var(--text-muted); }

    .nav-section-header {
        font-size: var(--font-size-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03125rem;
        color: var(--text-tertiary);
        padding: var(--padding-md) var(--padding-sm) var(--padding-xs);
    }

    .resources {
        background: var(--bg-sunken);
        border-radius: var(--border-radius-md);
        padding: var(--padding-xs) var(--padding-md) var(--padding-md);
        margin-top: var(--padding-md);

        .nav-section-header { padding: var(--padding-sm) 0 var(--padding-xs); }

        ul {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: var(--padding-xs);
            list-style: none;
        }

        a {
            font-size: var(--font-size-sm);
            font-weight: 500;
            display: inline-block;
        }
    }

    .trial-notification-box {
        margin-top: var(--padding-md);
        padding: var(--padding-md);
        background: var(--bg-sunken);
        border-radius: var(--border-radius-md);
        font-size: var(--font-size-sm);
    }
}