/* ==========================================================================
   Workspace do curso do aluno — Plano 11, Fases 3.2/3.3
   Rota: /aluno/curso/{usuarioCursoId:guid}

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

   A mesma página responde por /aluno/curso/{id}/etapa/{etapaId}. Quando a rota
   traz a etapa, o markup ganha .curso-workspace-com-etapa e:
     Desktop: o painel da direita passa a hospedar o EtapaConteudoCorpo inteiro.
     Mobile:  cabeçalho e índice somem e o conteúdo ocupa a tela — a mesma tela
              cheia que a rota separada (EtapaConteudo.razor) entregava antes.
   Nada do mobile mudou; o que mudou é quem desenha.

   A alternância é por media query, igual a LayoutAluno.css 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-workspace {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

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

.curso-workspace-cabecalho {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

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

.curso-workspace-progresso-rotulo {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    flex: 0 0 auto;
}

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

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

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

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

.curso-workspace-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-workspace-detalhe-vazio {
    color: var(--mud-palette-text-secondary);
}

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

.curso-workspace-detalhe-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mud-palette-text-secondary);
}

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

.curso-workspace-trilha-titulo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.curso-workspace-trilha-nome {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.curso-workspace-trilha-bloqueio {
    color: var(--mud-palette-text-secondary);
}

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

.curso-workspace-etapas {
    padding-top: 0;
    padding-bottom: 0;
}

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

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

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

/* Em andamento: é a etapa que a retomada automática foca. Precisa saltar aos olhos
   sem depender de cor sozinha (borda + peso), para funcionar em claro e escuro. */
.curso-workspace-etapa-atual {
    border-left: 3px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-action-default-hover);
}

.curso-workspace-etapa-selecionada {
    background-color: var(--mud-palette-action-default-hover);
}

.curso-workspace-etapa-bloqueada {
    opacity: 0.55;
}

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

    .curso-workspace {
        padding: 12px;
    }

    /* ⚠️ align-items:stretch é obrigatório aqui, não enfeite. A regra base tem
       align-items:flex-start para alinhar os dois painéis pelo topo no desktop
       (eixo vertical, onde é o que se quer). Ao virar column no mobile o eixo
       cruzado passa a ser o HORIZONTAL, e flex-start deixa cada painel com a
       largura do próprio conteúdo em vez da largura da tela.
       Era isso que fazia Pergunta e Avaliação aparecerem estreitas no celular
       enquanto Aula ocupava tudo: o vídeo tem largura intrínseca grande e
       "empurrava" o cartão até a borda; texto e alternativas, não.
       (O width:100% do índice abaixo é o contorno antigo do mesmo problema,
       de quando só ele aparecia no mobile — mantido por segurança.) */
    .curso-workspace-corpo {
        flex-direction: column;
        align-items: stretch;
    }

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

    .curso-workspace-detalhe {
        width: 100%;
    }

    /* Sem os dois painéis no mobile: o toque na etapa já abre o conteúdo.
       O :not() é o que permite a mesma página servir as duas rotas — sem etapa
       na URL o painel da direita não existe no mobile, como sempre foi. */
    .curso-workspace:not(.curso-workspace-com-etapa) .curso-workspace-detalhe,
    .curso-workspace-so-desktop {
        display: none !important;
    }

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

    /* Com etapa na rota: tela cheia para o conteúdo. O padding some porque quem
       espaça passa a ser o .etapa-conteudo (12px no mobile) — somar os dois
       deixaria a etapa mais estreita do que era na rota separada. */
    .curso-workspace.curso-workspace-com-etapa {
        padding: 0;
        gap: 0;
    }

    .curso-workspace-com-etapa .curso-workspace-cabecalho,
    .curso-workspace-com-etapa .curso-workspace-indice {
        display: none;
    }
}

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

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

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

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

    /* A linha de mobile fica fora do fluxo E fora do alcance do getElementById útil:
       scrollIntoView em elemento com display:none não faz nada, que é o desejado aqui. */
    .curso-workspace-so-mobile {
        display: none !important;
    }

    /* Índice recolhido (o "hambúrguer" local desta tela, no cabeçalho): o conteúdo
       da etapa fica com a largura toda para leitura. É estado só de desktop — no
       mobile os dois painéis nunca dividem a tela, então não há o que recolher, e
       por isso esta regra mora dentro da media query de desktop. */
    .curso-workspace-indice-recolhido .curso-workspace-indice {
        display: none;
    }

    /* Com o índice recolhido sobra a largura dele. O .etapa-conteudo se limita a
       960px para não esticar a linha de texto além do confortável de leitura, mas
       em tablet (~1024px) esse limite sobrava justamente quando o aluno recolheu o
       painel PARA ganhar espaço — dava a impressão de conteúdo espremido no meio.
       Com o painel aberto o limite nem chega a valer (sobram menos de 960px). */
    .curso-workspace-indice-recolhido .curso-workspace-detalhe .etapa-conteudo {
        max-width: 1200px;
    }

    /* A faixa que sobra no lugar do painel: só o botão de reabrir, sem esticar. */
    .curso-workspace-alternar-indice {
        flex: 0 0 auto;
        align-self: flex-start;
    }
}