/* ==========================================================================
   Estrutura do curso (admin) — Plano 11, Fase 6a
   Rota: /curso/{cursoId:guid}/estrutura

   Master-detail responsivo:
     Desktop (>= 960px / breakpoint md): índice à esquerda + detalhe à direita.
     Mobile  (<  960px):                 só o índice, ocupando a tela.

   A alternância é por media query, igual a CursoWorkspace.css (lado do aluno) e
   pelo mesmo motivo: MudHidden e a detecção por breakpoint do MudBlazor dependem
   de JS interop e, no Blazor Server, chegam a pintar a forma errada no primeiro
   render.

   Cor sempre por token do tema (var(--mud-palette-*)) — nunca hex literal.
   ========================================================================== */

.curso-estrutura {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

/* -------------------------------- Cabeçalho ------------------------------ */

.curso-estrutura-cabecalho {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.curso-estrutura-titulo {
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ---------------------------------- Corpo -------------------------------- */

.curso-estrutura-corpo {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.curso-estrutura-indice {
    min-width: 0;
}

.curso-estrutura-detalhe {
    min-width: 0;
}

.curso-estrutura-detalhe-cartao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
}

.curso-estrutura-detalhe-vazio,
.curso-estrutura-detalhe-legenda {
    color: var(--mud-palette-text-secondary);
}

.curso-estrutura-detalhe-titulo {
    color: var(--mud-palette-text-primary);
}

.curso-estrutura-detalhe-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* --------------------------------- Trilha -------------------------------- */

.curso-estrutura-trilha-titulo {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.curso-estrutura-trilha-ordem {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.curso-estrutura-trilha-nome {
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* --------------------------------- Etapas -------------------------------- */

.curso-estrutura-etapas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.curso-estrutura-etapas-carregando {
    display: flex;
    justify-content: center;
    padding: 16px;
}

.curso-estrutura-etapas-vazio {
    color: var(--mud-palette-text-secondary);
    padding: 8px 0;
}

.curso-estrutura-etapas-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 8px;
}

.curso-estrutura-etapa-linha {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.curso-estrutura-etapa-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.curso-estrutura-etapa-legenda {
    color: var(--mud-palette-text-secondary);
}

.curso-estrutura-etapa-selecionada {
    border-left: 3px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

/* ------------------------------ Reordenação ------------------------------ */

.curso-estrutura-item-arrastavel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: grab;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

/* -------------------------------- Mobile --------------------------------- */
@media (max-width: 959.98px) {

    .curso-estrutura {
        padding: 12px;
    }

    .curso-estrutura-corpo {
        flex-direction: column;
    }

    .curso-estrutura-indice {
        width: 100%;
        flex: 1 1 auto;
    }

    /* Sem os dois painéis no mobile: o toque na etapa já abre o formulário. */
    .curso-estrutura-detalhe,
    .curso-estrutura-so-desktop {
        display: none !important;
    }

    .curso-estrutura-so-mobile {
        display: flex;
    }
}

/* -------------------------------- Desktop -------------------------------- */
@media (min-width: 960px) {

    .curso-estrutura-indice {
        flex: 0 0 420px;
        max-width: 420px;
        position: sticky;
        top: 16px;
    }

    .curso-estrutura-detalhe {
        flex: 1 1 auto;
    }

    .curso-estrutura-detalhe-cartao {
        width: 100%;
        min-height: 240px;
    }

    .curso-estrutura-so-mobile {
        display: none !important;
    }
}