/* ═══════════════════════════════════════════════════════════════════════
   Mentor Platform Integration — mpi-course-builder.css
   Casca visual do [mpi_course_builder]. Depende de mpi-public.css (usa
   as variáveis --mpi-*) e do lp-course-builder.css nativo do LP (o
   conteúdo interno — listas/formulários de quiz e questão — continua
   estilizado por ele; aqui só neutralizamos o que ele assume sobre uma
   sidebar/header de 260px/60px que não renderizamos mais).
   ═══════════════════════════════════════════════════════════════════════ */

.mpi-course-builder {
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.mpi-cb-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.mpi-cb-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--mpi-text);
    margin: 4px 0 4px;
}

.mpi-cb-subtitle {
    font-size: 14px;
    color: var(--mpi-muted);
    margin: 0;
}

.mpi-cb-tabs {
    display: flex;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--mpi-border);
    border-radius: 12px;
    padding: 4px;
}

.mpi-cb-tab {
    padding: 8px 18px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--mpi-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mpi-cb-tab:hover { color: var(--mpi-text); }

.mpi-cb-tab.is-active {
    background: var(--mpi-dark);
    color: #fff;
}

/* #lp-course-builder é o ID que reintroduzimos como wrapper (ver
   CourseBuilderShortcode) só pra ativar as ~729 regras do CSS nativo
   do LP que dependem dele (ícones, botões, tabelas). Mas a regra base
   dele força min-height:100vh — correto numa página isolada de tela
   cheia, errado aqui dentro de um card. Neutralizamos só essa parte. */
.mpi-wrap #lp-course-builder {
    min-height: 0 !important;
    background: transparent !important;
}

.mpi-wrap .mpi-cb-content {
    overflow: hidden;
}

/* ── Neutraliza o layout de sidebar fixa que o CSS nativo do LP assume
   (#lp-course-builder-content.lp-cb-main tem margin-left/margin-top
   fixos em !important, calculados pra uma sidebar de 260px e um header
   de 60px que aqui não existem). ── */
.mpi-cb-content #lp-course-builder-content.lp-cb-main {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 0 !important;
    background: transparent !important;
}

/* Cabeçalho de aba interno do LP (título "Quizzes"/"Questions" + botão
   "Add New") já é redundante com o nosso próprio header — escondemos
   só o título duplicado, mantendo o botão de ação. */
.mpi-cb-content .cb-tab-header .lp-cb-tab__title {
    display: none;
}

.mpi-cb-content .cb-tab-header {
    padding-top: 0;
}

/* Tabela de listagem (quizzes/questões) — ajusta ao card branco em vez
   do fundo cinza que o LP usa na página isolada dele. */
.mpi-cb-content .cb-list-table-header,
.mpi-cb-content .courses-builder__quiz-tab,
.mpi-cb-content .courses-builder__question-tab {
    background: transparent;
}

/* ── Paleta: troca o roxo padrão do LP (#7067ED, hardcoded em ~350
   seletores !important no course-builder.css nativo) pela cor de
   destaque do Elementor. Cobre os elementos mais visíveis (botões
   primários, "Add New", abas internas do editor de quiz/questão e o
   item ativo da sidebar) — como o LP não usa variável CSS pra essa
   cor, não dá pra sobrescrever tudo de uma vez; se sobrar algum roxo
   em outro canto (hover de item secundário, por ex.), me manda um
   print que eu complemento aqui. */
.mpi-wrap #lp-course-builder .lp-button-primary,
.mpi-wrap #lp-course-builder .cb-btn-add-new,
.mpi-wrap #lp-course-builder .lp-cb-header .lp-cb-header__actions .cb-btn-update,
.mpi-wrap #lp-course-builder .lp-cb-header .lp-cb-header__actions .cb-btn-update.cb-btn-primary,
.mpi-wrap #lp-course-builder .lp-cb-header .lp-cb-header__actions .lp-cb-save-btn {
    background: var(--e-global-color-accent, #F9B400) !important;
    color: var(--e-global-color-primary, #2D241F) !important;
    border-color: var(--e-global-color-accent, #F9B400) !important;
}

.mpi-wrap #lp-course-builder .lp-button-primary:hover,
.mpi-wrap #lp-course-builder .cb-btn-add-new:hover,
.mpi-wrap #lp-course-builder .lp-cb-header .lp-cb-header__actions .cb-btn-update:hover {
    filter: brightness(0.92);
}

.mpi-wrap #lp-course-builder .lp-cb-tabs .lp-cb-tabs__item.is-active {
    background: var(--e-global-color-accent, #F9B400) !important;
    color: var(--e-global-color-primary, #2D241F) !important;
    border-color: var(--e-global-color-accent, #F9B400) !important;
}

/* Abas internas do editor de quiz/questão (Overview/Question/
   Settings/Especialidade) — sem essa margem elas ficam coladas por
   baixo do bloco de título/status, meio escondidas ali embaixo. */
.mpi-wrap #lp-course-builder .lp-cb-tabs .lp-cb-tabs__item {
    margin-top: 35px;
}

/* Link "Edit with WordPress" — leva pro admin nativo do WP, não faz
   sentido dentro da identidade visual do MPI. */
.mpi-wrap #lp-course-builder .lp-cb-admin-link {
    display: none !important;
}

/* Ajuste de espaçamento do cabeçalho de título (quiz/questão) — sem
   isso ficava um vão grande acima do título dentro do card. */
.mpi-wrap #lp-course-builder .lp-cb-header .lp-cb-header__title {
    margin-top: -20px !important;
}

.mpi-wrap #lp-course-builder .lp-cb-header {
    top: 0 !important;
    margin-top: -30px;
    padding: 10px;
}

@media (max-width: 782px) {
    .mpi-course-builder {
        padding: 20px 14px 40px;
    }

    .mpi-cb-header {
        align-items: flex-start;
    }

    .mpi-wrap .mpi-cb-content.mpi-panel {
        padding: 16px;
    }
}