/* =========================================================
   MODAL 1 (Desempenho Técnico) - MOBILE ONLY
   Arquivo: assets/z_modal1_fix.css

   Escopo:
   - Só afeta o Modal 1 (#modal-1) em telas <= 768px.
   - Não altera Login/Home/Tela de opções nem o desktop.
========================================================= */

@media (max-width: 768px) {

  /* ===== Base do modal (mobile) ===== */
  body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;   /* reduz “flutuar” em iOS */
    width: 100% !important;
  }

  body.modal-open #react-entry-point {
    height: 100% !important;
    overflow: hidden !important;
  }

  #modal-1 {
    position: fixed !important;
    inset: 0 !important;
  }

  #modal-1 .modal-dialog {
    width: 96vw !important;
    max-width: 96vw !important;
    margin-top: 8px !important;      /* antes era algo como 4vh */
    margin-bottom: 6px !important;
    height: calc(100vh - 14px) !important;
  }

  #modal-1 .modal-content {
    height: calc(100vh - 14px) !important;
    max-height: calc(100vh - 14px) !important;
    overflow: hidden !important; /* quem rola é o body */
  }

  #modal-1 .modal-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: 12px !important;
  }

  /* ===== Header: título + Sair na mesma linha ===== */
  #modal-1 .modal-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    padding-right: 78px !important; /* reserva espaço pro "Sair" */
  }

  #modal-1 .modal-title {
    display: block !important;
  }

  /* Botão Sair: pequeno no canto direito */
  #modal-1 #close-1 {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: fit-content !important;
    white-space: nowrap !important;

    padding: 3px 10px !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }




  /* =========================================================
     BOTÕES (mobile)
     - 3 botões na mesma linha
     - 2 circulares embaixo, centralizados
     - neutraliza offsets inline do desktop (80px) e margens top
  ========================================================= */

  #modal-1 .tp-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #modal-1 .tp-action-spacer {
    display: none !important;
  }

  /* Linha 1: 3 botões */
  #modal-1 .tp-main-actions {
    order: 1 !important;
    width: 100% !important;

    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 8px !important;
    padding: 0 14px !important;

    margin-left: 0 !important;  /* neutraliza inline */
    margin-right: 0 !important;
    text-align: left !important;
  }

  #modal-1 #tech-analyze-button,
  #modal-1 #tech-radar-button,
  #modal-1 #tech-scatter-button {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;

    margin-top: 0 !important;
    margin-right: 0 !important;

    height: 36px !important;
    white-space: nowrap !important;
  }

  /* Linha 2: circulares (quebra de linha garantida) */
  #modal-1 .tp-round-actions {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 14px !important;
    margin-top: 10px !important;

    margin-right: 0 !important; /* neutraliza inline */
  }

  #modal-1 #btn-go-physical,
  #modal-1 #btn-go-search-from-tech {
    margin-top: 0 !important;
    margin-right: 0 !important;
  }

  /* =========================================================
     BOXES: empilhar em TODOS os modos (Descritivo/Comparativo/Relacional)
  ========================================================= */
  #modal-1 .tp-results-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;

    /* derruba limites que travavam o empilhamento */
    height: auto !important;
    max-height: none !important;

    margin: 16px 12px !important; /* substitui margin desktop grande */
  }

  #modal-1 .tp-results-row > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  /* Espaçamento vertical entre os boxes empilhados */
  #modal-1 .tp-results-row > * {
    margin-bottom: 18px !important;
  }

  /* Remove margem extra no último box */
  #modal-1 .tp-results-row > *:last-child {
    margin-bottom: 0 !important;
  }


  /* ===== iPhone Safari: impedir auto-zoom SEM “fonte gigante” ===== */
  @supports (-webkit-touch-callout: none) {

    /* 1) Anti-zoom: manter 16px no input (regra do Safari) */
    #modal-1 .Select-control,
    #modal-1 .Select-placeholder,
    #modal-1 .Select-value-label,
    #modal-1 .Select-input,
    #modal-1 .Select-input input {
      font-size: 16px !important;
      line-height: 20px !important;
    }

    /* 2) “Encolher visualmente” o dropdown (sem baixar o font-size computado) */
    #modal-1 .Select {
      transform: scale(0.88);
      transform-origin: left top;
      width: calc(100% / 0.88) !important;  /* compensa o scale para não “encolher” a largura útil */
    }

    /* 3) Ajustes finos de altura/padding para ficar bonito */
    #modal-1 .Select-control {
      height: 36px !important;
      min-height: 36px !important;
    }

    #modal-1 .Select-placeholder,
    #modal-1 .Select-value {
      padding-top: 6px !important;
      padding-bottom: 6px !important;
    }
  }

  /* =====================================================
     DROPDOWNS (Modal 1) – legibilidade e menu melhor
     - Corrige sobreposição/transparência do menu
     - Remove o "X" (clear) que sobrepõe o valor
     - Permite menu mais largo (até o limite da viewport)
     Observação: escopo só no Modal 1 e só no mobile.
  ===================================================== */

  /* 1) Menu com fundo opaco e acima dos outros campos */
  #modal-1 .Select-menu-outer,
  #modal-1 .Select-menu {
    background-color: rgba(20, 20, 20, 0.98) !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important;
  }

  /* 2) Opções: uma linha + elipse (evita quebrar em 2 linhas) */
  #modal-1 .Select-option {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 3) Menu pode ser mais largo que o campo (sem estourar a tela) */
  #modal-1 .Select-menu-outer {
    min-width: 100% !important;                  /* pelo menos igual ao campo */
    width: max-content !important;               /* cresce conforme o texto */
    max-width: calc(100vw - 24px) !important;    /* mas não passa da viewport */
    left: 0 !important;                          /* ancora no campo */
    right: auto !important;
    box-sizing: border-box !important;
  }

  /* 4) Remove o "X" (clear) que atrapalha o valor */
  #modal-1 .Select-clear-zone,
  #modal-1 .Select-clear {
    display: none !important;
  }

  /* 5) Garante que o valor/placeholder não fique sob o caret */
  #modal-1 .Select-value,
  #modal-1 .Select-placeholder {
    padding-right: 24px !important;
  }

  /* =====================================================
     iOS Safari – FIX: 1ª opção “transparente” + sobreposição
     (Modal 1 / Dropdowns)
     Motivo: no iOS, o menu pode “vazar” transparência no 1º item
     quando existe transform/stacking context no Select.
  ===================================================== */
  @supports (-webkit-touch-callout: none) {

    /* Base de empilhamento previsível (principalmente com transform) */
    #modal-1 .Select {
      position: relative !important;
      z-index: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
    }

    /* Quando abrir, sobe o componente inteiro (não só o menu) */
    #modal-1 .Select.is-open {
      z-index: 2147483640 !important;
    }

    /* Menu acima de tudo e com fundo realmente opaco */
    #modal-1 .Select-menu-outer {
      z-index: 2147483641 !important;
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
    }

    /* IMPORTANTÍSSIMO: cada opção precisa ter fundo opaco no iOS */
    #modal-1 .Select-option {
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
    }

    /* Estados (hover/focus/selecionado) também com fundo opaco */
    #modal-1 .Select-option.is-focused,
    #modal-1 .Select-option.is-selected {
      background-color: rgba(35, 35, 35, 0.98) !important;
      opacity: 1 !important;
    }
  }



  /* =====================================================
     POPUPS "Visão" e "Opções" (Modal-1) – MOBILE
     Problema: texto/labels sem quebra => scroll horizontal.
     Solução: forçar quebra de linha e bloquear overflow-x.
     Escopo: somente nos modais disparados pelos botões
             "Visão"/"Opções" dentro do Modal-1.
  ===================================================== */

  /* 1) Corpo dos modais: sem rolagem horizontal e com quebra agressiva */
  #scatter-interpret-modal .modal-body,
  #scatter-options-modal .modal-body,
  #scatter2-interpret-modal .modal-body,
  #scatter2-options-modal .modal-body {
    overflow-x: hidden !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;   /* quebra mesmo sem espaço */
    word-break: break-word !important;
  }

  /* 2) Elementos internos comuns (UL/LI/SPAN/P) também podem quebrar */
  #scatter-interpret-modal .modal-body *,
  #scatter-options-modal .modal-body *,
  #scatter2-interpret-modal .modal-body *,
  #scatter2-options-modal .modal-body * {
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }

  /* 3) Labels de Radio/Checklist (Opções) – permitir múltiplas linhas */
  #scatter-options-modal label,
  #scatter2-options-modal label {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* 4) Evita que algum container force largura maior que a viewport */
  #scatter-interpret-modal .modal-dialog,
  #scatter-options-modal .modal-dialog,
  #scatter2-interpret-modal .modal-dialog,
  #scatter2-options-modal .modal-dialog {
    max-width: 96vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

/* =====================================================
     POPUP TEXT WRAP - targeted (Modal-1)
     - Glossário (Descritivo / Box 2): #glossary-modal
     - Visão (Relacional / Box 2): #scatter2-interpret-modal
     - Visão (Relacional / Box 3): #scatter-interpret-modal
     Objetivo:
       * sem scroll horizontal
       * parágrafos empilhados (P block + margin)
       * scroll vertical quando necessário
       * texto justificado (quando aplicável)
  ===================================================== */

  /* Base: nunca permitir overflow horizontal nesses popups */
  #glossary-modal,
  #scatter2-interpret-modal,
  #scatter-interpret-modal {
    overflow-x: hidden !important;
  }

  /* Corpo do modal: limitar altura e habilitar scroll vertical */
  #glossary-modal .modal-body,
  #scatter2-interpret-modal .modal-body,
  #scatter-interpret-modal .modal-body {
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* força quebra de linha mesmo com termos longos */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  /* Garantir que cada definição seja um “parágrafo” empilhado */
  #glossary-modal .modal-body p,
  #scatter2-interpret-modal .modal-body p,
  #scatter-interpret-modal .modal-body p {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    margin: 0 0 12px 0 !important;
  }

  /* Justificar texto onde você pediu */
  #scatter2-interpret-modal .modal-body,
  #scatter2-interpret-modal .modal-body p,
  #scatter-interpret-modal .modal-body,
  #scatter-interpret-modal .modal-body p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }

  /* (Opcional) Glossário: pode ficar justificado também; se não quiser, remova */
  #glossary-modal .modal-body,
  #glossary-modal .modal-body p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }

/* =====================================================
     POPUPS (Modal-1) – ajustes finais
     1) Glossário (Descritivo / Box 2): evitar “linha única” cortada
        - força quebra em QUALQUER elemento (não só <p>)
        - justificado
        - scroll vertical quando exceder altura
     2) Relacional (Box 2 e 3): “puxar para a esquerda”
        - remove indent/margem de listas e containers
        - ajusta padding para respirar no lado direito
  ===================================================== */

  /* ---------- 1) GLOSSÁRIO (Descritivo / Box 2) ---------- */
  #glossary-modal .modal-body{
    max-height: 72vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    /* alinhamento + wrap */
    text-align: justify !important;
    text-justify: inter-word !important;
  }

  /* Se o conteúdo NÃO estiver em <p>, garante wrap em tudo */
  #glossary-modal .modal-body,
  #glossary-modal .modal-body *{
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  /* Quando vier como itens (li/div/span), força “parágrafo” empilhado */
  #glossary-modal .modal-body > *{
    display: block !important;
  }

  /* Se houver listas, remove indent que pode “empurrar” e cortar */
  #glossary-modal .modal-body ul,
  #glossary-modal .modal-body ol{
    padding-left: 14px !important;
    margin-left: 0 !important;
  }

  /* ---------- 2) RELACIONAL (Box 2 e 3) ---------- */
  /* Ajuste de padding do body para dar respiro no lado direito e alinhar à esquerda com o título */
  #scatter2-interpret-modal .modal-body,
  #scatter-interpret-modal .modal-body{
    padding-left: 12px !important;
    padding-right: 18px !important;
  }

  /* Remove “empurrões” para a direita (margens/indents) */
  #scatter2-interpret-modal .modal-body *,
  #scatter-interpret-modal .modal-body *{
    max-width: 100% !important;
  }

  #scatter2-interpret-modal .modal-body ul,
  #scatter2-interpret-modal .modal-body ol,
  #scatter-interpret-modal .modal-body ul,
  #scatter-interpret-modal .modal-body ol{
    padding-left: 14px !important;
    margin-left: 0 !important;
  }

  /* Caso alguma definição venha em containers com margin-left/padding-left, zera */
  #scatter2-interpret-modal .modal-body p,
  #scatter2-interpret-modal .modal-body div,
  #scatter2-interpret-modal .modal-body span,
  #scatter-interpret-modal .modal-body p,
  #scatter-interpret-modal .modal-body div,
  #scatter-interpret-modal .modal-body span{
    margin-left: 0 !important;
  }


}

/* =====================================================
   WEB (Desktop) – Justificar texto dos popups "Visão"
   Escopo:
   - Glossário (Descritivo / Box 2)
   - Visão (Relacional / Box 2 e 3)
   Observação: fora do @media mobile
===================================================== */

#glossary-modal .modal-body,
#glossary-modal .modal-body p,
#scatter2-interpret-modal .modal-body,
#scatter2-interpret-modal .modal-body p,
#scatter-interpret-modal .modal-body,
#scatter-interpret-modal .modal-body p {
  text-align: justify !important;
  text-justify: inter-word !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@supports (-webkit-touch-callout: none) {
  #modal-1 .tp-filters-grid,
  #modal-1 .tp-filter-item {
    transform: none !important;
  }

  #modal-1 .Select {
    transform: none !important;
    width: 100% !important;
  }
}