.panel-container {
    grid-area: cards;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "nav content"
        "nav actions";
    gap: var(--gap-lg);
    padding: var(--spacing-6);
    overflow: hidden;
    height: 100%;

    &.no-actions {
        grid-template-rows: 1fr;
        grid-template-areas: "nav content";
    }

    &.single {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "content";
    }
}

.panel-nav {
    grid-area: nav;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    overflow-x: hidden;
    overflow-y: auto;
    width: auto;
    min-width: var(--spacing-48);
    -webkit-overflow-scrolling: touch;

    .btn-action {
        flex-shrink: 0;
        justify-content: flex-start;
    }
}

.panel-content {
    grid-area: content;
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    overflow: hidden;
    min-height: 0;
}

.panel-info {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    padding: var(--spacing-4);
    background: var(--surface);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    overflow: hidden;

    .progress {
        order: -1;
    }
}

.panel-sections {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;

    .panel-section {
        display: none;
        animation: fadeIn 300ms var(--ease-out);
        flex: 1;
    }
}

.panel-container .panel-section.is-active,
.panel-container.single .panel-section {
    display: flex;
    flex-direction: column;
}

.panel-group {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
}

.panel-result {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    flex: 1;
    min-height: 0;
}

.panel-actions {
    grid-area: actions;
    display: flex;
    justify-content: flex-end;
    gap: var(--gap-lg);
    padding: var(--spacing-4);
    background: var(--surface);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-sm);

    &:empty,
    &[hidden] {
        display: none;
    }

    .btn {
        width: auto;
        min-width: 150px;
    }
}

.panel-tabs {
    grid-area: tabs;
    display: flex;
    justify-content: flex-start;
    gap: var(--spacing-2);
    padding: var(--spacing-3);
    background: var(--surface);
    border-radius: var(--rounded-xl);
    box-shadow: var(--shadow-sm);

    .btn {
        min-width: var(--spacing-20);
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--text-sm);
    }

    &:empty {
        display: none;
    }
}

@media (max-width: 639px) {
    .panel-container,
    .panel-container.no-actions {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "nav"
            "content"
            "actions";
        gap: var(--spacing-4);
        padding: var(--spacing-4);
    }

    .panel-container.single {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "content";
        padding: var(--spacing-4);
    }

    .panel-nav {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--spacing-2);
        gap: var(--spacing-2);
        min-width: 0;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;

        .btn-action {
            justify-content: center;
            scroll-snap-align: start;
        }
    }

    .panel-actions {
        justify-content: space-between;
    }

    .panel-tabs {
        justify-content: center;
        padding: var(--spacing-2);
    }
}

@media (min-width: 1920px) {
    .panel-container {
        gap: var(--spacing-6);
        padding: var(--spacing-8);
    }

    .panel-nav {
        min-width: var(--spacing-64);
        padding: var(--spacing-4);
        gap: var(--spacing-3);
    }

    .panel-info,
    .panel-actions {
        padding: var(--spacing-6);
    }

    .panel-tabs {
        padding: var(--spacing-4);
    }
}