/**
 * SHARA Builder — Modal Mobile Fullscreen  v1.0
 *
 * Regra principal: em mobile (≤ 767px) TODOS os modais ocupam
 * 100% da tela (fullscreen), sem bordas arredondadas no topo/lateral,
 * com scroll interno e footer fixo na base (safe-area aware).
 *
 * Desktop: completamente inalterado.
 *
 * Modais cobertos:
 *   ① Sistema  → .modal / .modal-content  (courses, units, delete, section-picker)
 *   ② AudioChoiceGameEditor  → #audioChoiceGameModal .acg-container
 *   ③ ExplanationEditor      → #explanationModal .em-container
 *   ④ IntroEditor            → #introModal .im-container
 *   ⑤ SpeakerEditor          → #speakerModal .modal-container
 *   ⑥ VideoMediaEditor       → #vme-modal .vme-box
 *   ⑦ VocabularyEditor       → #vocabularyModal .vc-container
 *   ⑧ DangerousDeleteModal   → .modal-overlay (gerado por JS)
 *   ⑨ ConfirmDeleteModal     → .modal-overlay (gerado por JS)
 *   ⑩ MediaPickerModal       → modal genérico injetado
 */

/* ════════════════════════════════════════════════════
   MIXIN utilitário — reutilizado em todos os blocos
   ════════════════════════════════════════════════════
   Não existe mixin em CSS puro, então definimos as
   regras diretamente em cada bloco com comentário.
*/

@media (max-width: 767px) {

  /* ══════════════════════════════════════════════
     ① SISTEMA: .modal / .modal-content
     Cobre: cursos, units, seção-picker, delete, warning
     ══════════════════════════════════════════════ */

  .modal {
    padding: 0 !important;
    align-items: flex-end !important;  /* bottom-sheet approach no mobile */
  }

  /* Modais de confirmação/delete: bottom-sheet (max 92vh) */
  .modal-danger .modal-content,
  .modal-warning .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
  }

  /* Modais de conteúdo (criação/edição): fullscreen */
  .modal:not(.modal-danger):not(.modal-warning) .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Padding interno reduzido para aproveitar espaço */
  .modal-header {
    padding: 14px 16px !important;
  }
  .modal-body {
    padding: 16px !important;
  }
  .modal-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    flex-direction: row !important;     /* mantém botões na horizontal */
    flex-wrap: wrap !important;
  }
  .modal-footer .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Section picker: oculta painel helper (já estava; garantimos) */
  .modal-wide .section-helper-panel { display: none !important; }

  /* Form grid → coluna única */
  .form-row { grid-template-columns: 1fr !important; }

  /* Delete modal — header compacto */
  .modal-danger .modal-header,
  .modal-warning .modal-header {
    padding: 20px 20px 16px !important;
  }
  .modal-danger .modal-body,
  .modal-warning .modal-body {
    padding: 20px !important;
  }
  .modal-danger .modal-footer,
  .modal-warning .modal-footer {
    padding: 16px 20px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Alinha o overlay ao fundo para bottom-sheet */
  .modal.modal-danger,
  .modal.modal-warning {
    align-items: flex-end !important;
  }

  /* ══════════════════════════════════════════════
     ② AudioChoiceGameEditor
     ══════════════════════════════════════════════ */

  #audioChoiceGameModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #audioChoiceGameModal .acg-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  #audioChoiceGameModal .acg-body {
    padding: 16px !important;
  }
  #audioChoiceGameModal .acg-header {
    padding: 14px 16px 12px !important;
  }
  #audioChoiceGameModal .acg-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Opções de questão: stack vertical no mobile */
  #audioChoiceGameModal .acg-options-grid {
    grid-template-columns: 1fr !important;
  }
  /* Explicações: stack vertical */
  #audioChoiceGameModal .acg-explanations {
    grid-template-columns: 1fr !important;
  }
  /* Row ícone + desc: stack */
  #audioChoiceGameModal .acg-row {
    grid-template-columns: 1fr !important;
  }

  /* ══════════════════════════════════════════════
     ③ ExplanationEditor (microbook)
     ══════════════════════════════════════════════ */

  #explanationModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #explanationModal .em-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  /* Header compacto */
  #explanationModal .em-header {
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #explanationModal .em-title-input {
    font-size: 14px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Toolbar: scroll horizontal, não quebra */
  #explanationModal .em-toolbar {
    padding: 4px 8px !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 1px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #explanationModal .em-toolbar::-webkit-scrollbar { display: none !important; }
  /* Split: em mobile fica em coluna (editor em cima, preview escondido) */
  #explanationModal .em-split {
    flex-direction: column !important;
  }
  /* Preview oculto por padrão no mobile — user pode ligar com o botão 👁 */
  #explanationModal .em-preview-pane {
    display: none !important;
  }
  #explanationModal .em-preview-pane.em-visible-mobile {
    display: flex !important;
    height: 50dvh !important;
    border-top: 1px solid #E5E7EB !important;
    border-left: none !important;
  }
  /* Editor ocupa o espaço completo */
  #explanationModal .em-editor-pane {
    border-right: none !important;
    height: 100% !important;
  }
  #explanationModal .em-content-textarea {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }
  /* Footer */
  #explanationModal .em-footer {
    padding: 10px 14px !important;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════════════
     ④ IntroEditor
     ══════════════════════════════════════════════ */

  #introModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #introModal .im-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  #introModal .im-header {
    padding: 14px 16px 12px !important;
  }
  #introModal .im-body {
    padding: 16px !important;
  }
  #introModal .im-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Linha de objetivo: botões de reorder menores */
  #introModal .im-icon-btn {
    width: 36px !important;
    height: 36px !important;
  }

  /* ══════════════════════════════════════════════
     ⑤ SpeakerEditor
     ══════════════════════════════════════════════ */

  #speakerModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #speakerModal .modal-container,
  #speakerModal .modal-container--large {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  #speakerModal .modal-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════════════
     ⑥ VideoMediaEditor
     ══════════════════════════════════════════════ */

  #vme-modal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #vme-modal .vme-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  /* Body: stack vertical — preview em cima, form embaixo */
  #vme-modal .vme-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: 200px 1fr !important;
    overflow: hidden !important;
  }
  #vme-modal .vme-preview-pane {
    height: 200px !important;
    border-bottom: 1px solid #F3F4F6 !important;
    border-right: none !important;
  }
  #vme-modal .vme-form-pane {
    border-left: none !important;
    overflow-y: auto !important;
  }
  #vme-modal #vme-form {
    padding: 16px !important;
  }
  #vme-modal .vme-header {
    padding: 12px 16px !important;
  }
  #vme-modal .vme-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════════════
     ⑦ VocabularyEditor
     ══════════════════════════════════════════════ */

  #vocabularyModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #vocabularyModal .vc-container {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    animation: none !important;
  }
  #vocabularyModal .vc-header {
    padding: 14px 16px 12px !important;
  }
  #vocabularyModal .vc-body {
    padding: 16px !important;
  }
  #vocabularyModal .vc-footer {
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Grid de item: coluna única */
  #vocabularyModal .vc-item-grid,
  #vocabularyModal .vc-item-grid-3 {
    grid-template-columns: 1fr !important;
  }
  /* Add options header: stack */
  #vocabularyModal .vc-add-options-header {
    flex-direction: column !important;
    gap: 10px !important;
  }
  #vocabularyModal .vc-add-option-divider {
    text-align: center !important;
  }

  /* ══════════════════════════════════════════════
     ⑧⑨ DangerousDeleteModal / ConfirmDeleteModal
     (.modal-overlay gerado dinamicamente por JS)
     Bottom-sheet approach: mais natural no mobile
     ══════════════════════════════════════════════ */

  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Container interno do delete modal */
  .modal-overlay .modal-container,
  .modal-overlay > div > .modal-content,
  .modal-overlay > .modal-container {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    height: auto !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    /* Animação de entrada vindo de baixo */
    animation: _mfs_sheet_up .28s cubic-bezier(.16,1,.3,1) both !important;
  }

  @keyframes _mfs_sheet_up {
    from { transform: translateY(100%); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1;  }
  }

  /* Reforça footer safe-area nos overlays dinâmicos */
  .modal-overlay .modal-footer,
  .modal-overlay .ddm-footer,
  .modal-overlay [class*="footer"] {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ══════════════════════════════════════════════
     ⑩ MediaPickerModal (injetado dinamicamente)
     ══════════════════════════════════════════════ */

  #mediaPickerModal,
  #sectionPickerModal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  #mediaPickerModal .modal-content,
  #sectionPickerModal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* ══════════════════════════════════════════════
     EXTRAS GLOBAIS MOBILE
     ══════════════════════════════════════════════ */

  /* Touch targets mínimos em botões de modal */
  .modal-close,
  .acg-close,
  .em-close,
  .im-close,
  .vc-close,
  .vme-header__close {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    touch-action: manipulation !important;
  }

  /* Inputs: font-size 16px evita zoom automático no iOS */
  .modal input[type="text"],
  .modal input[type="email"],
  .modal input[type="url"],
  .modal input[type="number"],
  .modal textarea,
  .modal select,
  .acg-input,
  .acg-textarea,
  .em-title-input,
  .im-input,
  .im-textarea,
  .vc-input,
  .vc-textarea,
  .vme-input,
  .vme-textarea {
    font-size: 16px !important;
  }

  /* Scrollbars invisíveis no mobile (já scrollável por touch) */
  .modal-body::-webkit-scrollbar,
  .acg-body::-webkit-scrollbar,
  .im-body::-webkit-scrollbar,
  .vc-body::-webkit-scrollbar,
  .vme-form-pane::-webkit-scrollbar {
    display: none !important;
  }

} /* end @media (max-width: 767px) */