/* =========================================================
   AULA 01 — LABORATÓRIO MESTRE PRO
   Correção final de largura/layout PC + responsivo
   Objetivo: impedir laboratório estreito/comprimido
   ========================================================= */

/* A página da aula com laboratório precisa ter área útil maior */
body:has(#laboratorio) .page {
  width: min(100% - 24px, 1280px) !important;
  max-width: 1280px !important;
}

body:has(#laboratorio) .layout {
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
}

body:has(#laboratorio) .content {
  width: 100% !important;
  max-width: 1040px !important;
  min-width: 0 !important;
}

/* Bloco principal do laboratório */
#laboratorio {
  width: 100% !important;
  max-width: 1040px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#laboratorio *,
#laboratorio *::before,
#laboratorio *::after {
  box-sizing: border-box !important;
}

/* Impede que qualquer container interno limite largura demais */
#laboratorio .lab-pro,
#laboratorio .laboratorio-mestre-pro,
#laboratorio [class*="lab"],
#laboratorio [class*="laboratorio"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Cards e grades internas com largura real */
#laboratorio [class*="grid"],
#laboratorio [class*="cards"],
#laboratorio [class*="kpi"],
#laboratorio [class*="stats"],
#laboratorio [class*="mission"],
#laboratorio [class*="summary"] {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Área editor + preview: desktop lado a lado, mas sem estreitar */
#laboratorio .lab-pro-editor-wrap,
#laboratorio [class*="editor-wrap"],
#laboratorio [class*="workspace"],
#laboratorio [class*="editor-preview"],
#laboratorio [class*="code-preview"] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Editor confortável */
#laboratorio textarea,
#laboratorio [class*="editor"] textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 420px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Preview confortável */
#laboratorio iframe,
#laboratorio [class*="preview"] iframe {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 420px !important;
}

/* Passos interativos não podem virar coluna lateral gigante */
#laboratorio [class*="passos"],
#laboratorio [class*="steps"],
#laboratorio .lab-pro-steps {
  width: 100% !important;
  max-width: 100% !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

/* Botões com mais presença */
#laboratorio [class*="actions"],
#laboratorio .lab-pro-actions {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

#laboratorio button,
#laboratorio .btn {
  min-height: 44px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  white-space: normal !important;
}

/* Avaliação e entrega com respiro */
#laboratorio [class*="avaliacao"],
#laboratorio [class*="progresso"],
#laboratorio [class*="entrega"],
#laboratorio [class*="evidence"],
#laboratorio [class*="delivery"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* PC estreito / tablet */
@media (max-width: 1100px) {
  body:has(#laboratorio) .layout {
    grid-template-columns: 1fr !important;
  }

  body:has(#laboratorio) .layout > aside,
  body:has(#laboratorio) .layout > nav,
  body:has(#laboratorio) .lesson-sidebar,
  body:has(#laboratorio) .aula-sidebar,
  body:has(#laboratorio) .roteiro,
  body:has(#laboratorio) .nav-aula {
    display: none !important;
  }

  body:has(#laboratorio) .content,
  #laboratorio {
    max-width: 100% !important;
  }
}

/* Mobile real: tudo em uma coluna */
@media (max-width: 780px) {
  body:has(#laboratorio) .page {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
  }

  #laboratorio {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #laboratorio .lab-pro-editor-wrap,
  #laboratorio [class*="editor-wrap"],
  #laboratorio [class*="workspace"],
  #laboratorio [class*="editor-preview"],
  #laboratorio [class*="code-preview"],
  #laboratorio [class*="grid"],
  #laboratorio [class*="cards"],
  #laboratorio [class*="kpi"],
  #laboratorio [class*="stats"],
  #laboratorio [class*="actions"],
  #laboratorio [class*="avaliacao"],
  #laboratorio [class*="progresso"],
  #laboratorio [class*="entrega"],
  #laboratorio [class*="evidence"],
  #laboratorio [class*="delivery"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  #laboratorio textarea,
  #laboratorio [class*="editor"] textarea {
    min-height: 380px !important;
  }

  #laboratorio iframe,
  #laboratorio [class*="preview"] iframe {
    min-height: 360px !important;
  }

  #laboratorio button,
  #laboratorio .btn {
    width: 100% !important;
    min-height: 46px !important;
  }
}