/* ============================================================
   z_modal5_fix.css — Modal 5 (Perfis Semelhantes)
   MOBILE (Android + iOS) — do zero, seguindo o padrão dos Modais 1–4

   Requisitos (mobile):
   - Título do modal (H4) centrado e em 1 linha
   - Linha 1: ícone "1" sozinho; (quebra) 3 dropdowns; (quebra) +3 dropdowns
   - Linha 2: ícone "2" sozinho; (quebra) 3 dropdowns
   - Controles: "Tipo" e "Escopo" lado a lado (mesma linha)
              (quebra) Botão Buscar centralizado
              (quebra) Slider (com LED) centralizado
   - iOS: menu do dropdown por cima e com fundo realmente opaco
   Escopo: SOMENTE #modal-5 e SOMENTE <=768px (não altera web)
============================================================ */

@media (max-width: 768px){

  /* --------- Anti overflow global --------- */
  html, body{
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* --------- Modal base (padrão Modal-2/3/4) --------- */
  body.modal-open{
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
  }

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

  #modal-5{
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  #modal-5 .modal-dialog{
    width: 96vw !important;
    max-width: 96vw !important;
    margin: calc(env(safe-area-inset-top, 0px) + 4px) auto calc(env(safe-area-inset-bottom, 0px) + 4px) auto !important;

    height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 8px) !important;
    box-sizing: border-box !important;
  }

  #modal-5 .modal-content{
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important; /* scroll no body */
    box-sizing: border-box !important;
  }

  #modal-5 .modal-body{
    height: calc(100% - 54px) !important; /* header padrão */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 14px 0 !important;
    box-sizing: border-box !important;
  }

  /* --------- Título (H4 dentro do body) --------- */
  #modal-5 .modal-body h4.text-center.mb-3{
    width: 100% !important;
    margin: 12px auto 12px auto !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;

    text-align: center !important;
    white-space: nowrap !important;       /* NÃO quebrar */
    overflow: visible !important;
    text-overflow: clip !important;

    font-size: 18px !important;          /* evita quebra no iPhone */
    line-height: 22px !important;
  }

  /* ============================================================
     LINHAS DE DROPDOWN
     No Python:
       _line_ref_player()   => div com style width:90%, display:flex, flex-wrap:nowrap, gap:8px
       _line_search_universe() idem (e 3 colunas fantasma vazias)
     Aqui: transformamos essas duas linhas em GRID 6 colunas.
============================================================ */

  /* Alvo robusto: qualquer container (dentro do modal-5) com flex-wrap: nowrap + gap: 8px */
  #modal-5 .modal-body div[style*="flex-wrap: nowrap"][style*="gap: 8px"]{
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 10px 10px !important;
    align-items: center !important;
    overflow: visible !important;
  }

  /* Ícone (primeiro filho) sozinho na linha */
  #modal-5 .modal-body div[style*="flex-wrap: nowrap"][style*="gap: 8px"] > div:first-child{
    grid-column: 1 / -1 !important;
    justify-self: start !important;

    /* círculo perfeito (não depende da largura do layout) */
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    line-height: 24px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Wrappers dos dropdowns: 3 por linha => span 2 */
  #modal-5 .modal-body div[style*="flex-wrap: nowrap"][style*="gap: 8px"] > div:not(:first-child){
    grid-column: span 2 !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  /* Colunas “fantasma” vazias (apenas na linha 2) — esconder no mobile */
  #modal-5 .modal-body div[style*="flex-wrap: nowrap"][style*="gap: 8px"] > div:empty{
    display: none !important;
  }

  /* Dropdown ocupa 100% do slot */
  #modal-5 .dash-dropdown,
  #modal-5 .Select{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Evita texto estourar e “alargar” */
  #modal-5 .Select-placeholder,
  #modal-5 .Select-value-label{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ============================================================
     CONTROLES (div com style display:flex; justifyContent: space-between; width:95%)
     Vamos transformar em:
       linha 1: coluna esquerda (Tipo + Escopo) inteira
       linha 2: Buscar centralizado
       linha 3: Slider + LED centralizado
============================================================ */

  /* Container de controles: alvo por width: 95% e justify-content: space-between */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"]{
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 0 auto 10px auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;

    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Coluna ESQUERDA (1º filho): fica na 1ª linha e mantém Tipo+Escopo lado a lado */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"] > div:first-child{
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-left: 0 !important; /* remove marginLeft 30 no mobile */
  }

  /* Botão Buscar (2º filho): linha exclusiva, centrado */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"] > div:nth-child(2){
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-right: 0 !important;
  }

  #modal-5 #sim-search-btn{
    display: block !important;
    margin: 0 auto !important;
  }

  /* Slider (3º filho): linha exclusiva, centrado, sem translateY */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"] > div:nth-child(3){
    flex: 1 1 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin-right: 0 !important;
    transform: none !important; /* remove translateY(-16px) */
  }

  #modal-5 #sim-min-minutes-slider{
    display: block !important;
    width: 220px !important;
    max-width: 100% !important;
  }

  /* Resultados contidos */
  #modal-5 #sim-results-container{
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 0 auto 12px auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;

    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #modal-5 #sim-results-container *{
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Android: sobe um pouco mais */
  @supports not (-webkit-touch-callout: none){
    #modal-5 .modal-dialog{ margin-top: 4px !important; }
  }
}

/* ============================================================
   iOS ONLY — Dropdown menu por cima + fundo opaco (stacking fix)
============================================================ */
@media (max-width: 768px){
  @supports (-webkit-touch-callout: none){

    #modal-5 .Select{
      position: relative !important;
      z-index: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
      transform: translate3d(0,0,0) !important;
    }

    #modal-5 .Select.is-open{
      z-index: 2147483640 !important;
    }

    #modal-5 .Select-menu-outer,
    #modal-5 .Select-menu{
      z-index: 2147483647 !important;
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      -webkit-transform: translate3d(0,0,0) !important;
      transform: translate3d(0,0,0) !important;
    }

    /* Opções com “fundo” real (evita ver placeholders por baixo) */
    #modal-5 .Select-option,
    #modal-5 .Select-noresults{
      background-color: rgba(20, 20, 20, 0.98) !important;
      opacity: 1 !important;
      color: #ffffff !important;
    }

    #modal-5 .Select-option.is-focused,
    #modal-5 .Select-option:hover{
      background-color: rgba(255,255,255,0.06) !important;
    }
    #modal-5 .Select-option.is-selected{
      background-color: rgba(255,255,255,0.10) !important;
    }

    /* anti-zoom */
    #modal-5 .Select-control,
    #modal-5 .Select-placeholder,
    #modal-5 .Select-value-label,
    #modal-5 .Select-input,
    #modal-5 .Select-input input{
      font-size: 16px !important;
      line-height: 20px !important;
    }
  }
}


/* ============================================================
   Modal 5 — Refinos finais (mobile)
   1) RadioItems: alinhar as "bolinhas" verticalmente por coluna
   2) Cards do resultado: mais largos (ocupam quase toda a célula do grid)
============================================================ */
@media (max-width: 768px){

  /* 1) RADIOITEMS — força grid 2 colunas com labels padronizados */
  #modal-5 #sim-kind-radio,
  #modal-5 #sim-dimension-radio{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;  /* 2 colunas => pares alinhados */
    column-gap: 14px !important;
    row-gap: 8px !important;
    justify-items: start !important;
    align-items: start !important;
  }

  /* Cada opção: 1ª coluna = bolinha (input), 2ª = texto */
  #modal-5 #sim-kind-radio label,
  #modal-5 #sim-dimension-radio label{
    display: grid !important;
    grid-template-columns: 18px 1fr !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Garante que o input não varie de largura */
  #modal-5 #sim-kind-radio input[type="radio"],
  #modal-5 #sim-dimension-radio input[type="radio"]{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  /* 2) CARDS — ocupar quase toda a célula/linha */
  #modal-5 #sim-results-container{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* Se o container interno for grid/flex, reduz o gap e garante cards 100% */
  #modal-5 #sim-results-container > div{
    gap: 10px !important;
  }

  #modal-5 #sim-results-container .card,
  #modal-5 #sim-results-container .dbc-card,
  #modal-5 #sim-results-container [class*="card"]{
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================
   Modal 5 — Ajustes solicitados (mobile)
   1) Tipo: Técnica em cima / Física embaixo (não lado a lado)
   2) Resultados: cards ocupando quase toda a linha (sem “buraco” entre pares)
============================================================ */
@media (max-width: 768px){

  /* 1) RADIO — TIPO (sim-kind-radio): volta a empilhar verticalmente */
  #modal-5 #sim-kind-radio{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }

  #modal-5 #sim-kind-radio label{
    display: grid !important;
    grid-template-columns: 18px 1fr !important; /* bolinha + texto */
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Mantém a bolinha consistente */
  #modal-5 #sim-kind-radio input[type="radio"]{
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    justify-self: center !important;
  }

  /* 2) RESULTADOS — força layout “quase full width” (1 card por linha) */
  #modal-5 #sim-results-container > div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  /* Cards ocupam 100% */
  #modal-5 #sim-results-container > div > *{
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* Se existir algum espaço criado por justify-content/space-between, mata */
  #modal-5 #sim-results-container > div{
    justify-content: stretch !important;
  }
}


/* ============================================================
   Modal 5 — Ajustes finais solicitados (mobile)
   1) Resultados: 2 cards por linha (grid 2 colunas)
   2) Espaço entre dropdowns e área de RadioItems
   3) Espaço entre RadioItems e botão Buscar
============================================================ */
@media (max-width: 768px){

  /* 1) RESULTADOS — 2 cards por linha */
  #modal-5 #sim-results-container > div{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 por linha */
    gap: 10px 10px !important;
    justify-items: stretch !important;
    align-items: stretch !important;
  }

  #modal-5 #sim-results-container > div > *{
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* 2) Espaço entre dropdowns e RadioItems */
  /* O bloco de controles (onde ficam os radios/buscar/slider) já foi alvo por width:95% */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"]{
    margin-top: 20px !important;  /* cria respiro abaixo dos dropdowns */
  }

  /* 3) Espaço entre RadioItems e o botão Buscar */
  /* Buscar é o 2º filho do container de controles */
  #modal-5 .modal-body div[style*="justify-content: space-between"][style*="width: 95%"] > div:nth-child(2){
    margin-top: 15px !important;  /* afasta do bloco de radios acima */
  }
}