/* ============================================================
   z_modal4_fix.css — Modal 4 (Buscador de Talentos)
   MOBILE (Android + iOS) no padrão do z_modal2_fix.css / z_modal3_fix.css
   Versão LIMPA (sem patches acumulados).

   Objetivos (mobile):
   - Popup ocupa a área útil do celular e sobe (sem cortar topo)
   - Sem “escorregar” para a direita ao clicar em Buscar (trava overflow-x global)
   - Grid de filtros 3 + 3 + 2, com gap e bloco centralizado e largo
   - Botão Buscar centrado
   - Dropdown menu opaco e visível (não “vazio”)
   - Android: fonte pequena; iOS: 16px anti-zoom + scale visual (igual Modal-2)
   - Overflow horizontal: só dentro do resultado (tabela), nunca no modal inteiro
============================================================ */

@media (max-width: 768px){

  /* --------- Anti overflow global (evita shift para direita) --------- */
  html, body{
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* --------- Modal base (igual Modal-2) --------- */
  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-4{
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  /* Dialog ocupa quase a tela inteira */
  #modal-4 .modal-dialog{
    width: 96vw !important;
    max-width: 96vw !important;

    /* Sobe (sem cortar): iOS respeita safe-area, Android fica colado */
    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-4 .modal-content{
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important; /* scroll fica no modal-body (padrão Modal-2) */
    box-sizing: border-box !important;
  }

  /* Header não pode cortar o close */
  #modal-4 .modal-header{
    position: relative !important;
    padding: 12px 12px !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
  }

  #modal-4 .modal-title{
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 46px !important;
    box-sizing: border-box !important;
  }

  #modal-4 .modal-header .close,
  #modal-4 .modal-header button.close{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 30 !important;
  }

  /* Body ocupa o resto, rola só se precisar */
  #modal-4 .modal-body{
    height: calc(100% - 54px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 0 14px 0 !important;
    box-sizing: border-box !important;
  }

  /* --------- Filtros 3 + 3 + 2 (usa classes do WEBSAFE) --------- */
  #modal-4 .talent-filters-wrap{
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 0 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;
    overflow: visible !important;
  }

  /* Se houver wrappers internos (linhas), achata */
  #modal-4 .talent-filters-wrap > div{
    display: contents !important;
  }

  #modal-4 .talent-filter-item{
    width: auto !important; /* mata width inline */
    margin: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  #modal-4 .talent-filter-item:nth-child(-n+6){ grid-column: span 2 !important; }  /* 3 por linha */
  #modal-4 .talent-filter-item:nth-child(n+7):nth-child(-n+8){ grid-column: span 3 !important; } /* 2 por linha */

  #modal-4 .talent-filter-item .dash-dropdown,
  #modal-4 .talent-filter-item .talent-dropdown{
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Evita “crescimento” */
  #modal-4 .Select-value-label,
  #modal-4 .Select-placeholder{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* --------- Dropdown menu: opaco + visível --------- */
  #modal-4 .Select-option,
  #modal-4 .Select-noresults,
  #modal-4 .Select-value-label,
  #modal-4 .Select-placeholder{
    color: #ffffff !important;
  }

  #modal-4 .Select-menu-outer,
  #modal-4 .Select-menu{
    background-color: rgba(20, 20, 20, 0.98) !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45) !important;
  }

  #modal-4 .Select-menu-outer{
    min-width: 100% !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  #modal-4 .Select-option{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #modal-4 .Select-clear-zone,
  #modal-4 .Select-clear{ display: none !important; }

  #modal-4 .Select-value,
  #modal-4 .Select-placeholder{ padding-right: 24px !important; }

  /* --------- Fontes: Android pequena; iOS 16px anti-zoom --------- */
  #modal-4 .Select-control,
  #modal-4 .Select-placeholder,
  #modal-4 .Select-value-label,
  #modal-4 .Select-input,
  #modal-4 .Select-input input{
    font-size: 12px !important;
    line-height: 16px !important;
  }

  @supports (-webkit-touch-callout: none){
    #modal-4 .Select-control,
    #modal-4 .Select-placeholder,
    #modal-4 .Select-value-label,
    #modal-4 .Select-input,
    #modal-4 .Select-input input{
      font-size: 16px !important;
      line-height: 20px !important;
    }
    /* Igual Modal-2: compacta visual sem disparar zoom */
    #modal-4 .Select{
      transform: scale(0.88);
      transform-origin: left top;
      width: calc(100% / 0.88) !important;
    }
  }

  /* --------- Botão Buscar centrado --------- */
  #modal-4 #talent-buscar{
    display: block !important;
    margin: 16px auto 10px auto !important;
    margin-right: auto !important;
  }

  /* --------- Resultado: contido, sem empurrar modal; scroll só aqui --------- */
  #modal-4 #talent-resultado{
    width: 94vw !important;
    max-width: 94vw !important;
    margin: 10px auto 0 auto !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;

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

  #modal-4 #talent-resultado *{
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #modal-4 #talent-resultado .dash-table-container,
  #modal-4 #talent-resultado .dash-spreadsheet-container{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Android: sobe ainda mais (sem safe-area) e evita qualquer centralização maluca */
  @supports not (-webkit-touch-callout: none){
    #modal-4 .modal-dialog{
      margin-top: 4px !important;
    }
  }
}

@media (max-width: 768px){
  /* Deixa a área do resultado mais larga (quase full-width) */
  #modal-4 #talent-resultado{
    width: 100vw !important;       /* antes devia estar ~94–96vw */
    max-width: 100vw !important;
    margin-left: auto !important;
    margin-right: auto !important;

    /* reduz o “respiro” lateral que estava cortando a última coluna */
    padding-left: 1px !important;
    padding-right: 1px !important;
    box-sizing: border-box !important;
  }

  /* Garante que a tabela use toda a largura disponível do container */
  #modal-4 #talent-resultado .dash-table-container,
  #modal-4 #talent-resultado .dash-spreadsheet-container,
  #modal-4 #talent-resultado table{
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 768px){
  /* 1ª coluna da tabela: alinhar à esquerda, igual à 2ª coluna */
  #modal-4 #talent-resultado table td:first-child,
  #modal-4 #talent-resultado table th:first-child{
    text-align: left !important;
    white-space: normal !important;     /* permite quebra de linha */
    word-break: break-word !important;  /* evita estouro */
  }

  /* Garante que spans/divs internos não recentralizem o texto */
  #modal-4 #talent-resultado table td:first-child *,
  #modal-4 #talent-resultado table th:first-child *{
    text-align: left !important;
  }
}

@media (max-width: 768px){

  /* =========================
     Caso seja HTML <table>
     ========================= */

  /* Coluna 1 (Nome) — mais larga */
  #modal-4 #talent-resultado table th:nth-child(1),
  #modal-4 #talent-resultado table td:nth-child(1){
    width: 100% !important;
    max-width: 100% !important;
  }

  

  /* =========================
     Caso seja Dash DataTable
     ========================= */

  /* Coluna 1 (Nome) — mais larga */
  #modal-4 #talent-resultado .dash-spreadsheet th:nth-child(1),
  #modal-4 #talent-resultado .dash-spreadsheet td:nth-child(1){
    width: 100% !important;
    max-width: 100% !important;
  }

  
}

/* =====================================================
   iOS Safari – FIX (Modal 4) — menu por cima + fundo opaco (igual Modal-2)
   - NÃO mexe no Android
   - NÃO altera layout web (só mobile + iOS)
===================================================== */
@media (max-width: 768px){
  @supports (-webkit-touch-callout: none){

    /* Base de empilhamento previsível (igual Modal-2) */
    #modal-4 .talent-filter-item .Select{
      position: relative !important;
      z-index: 1 !important;
      -webkit-transform: translate3d(0,0,0) !important;
      transform: translate3d(0,0,0) !important;
    }

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

    /* Menu acima de tudo + cria layer própria */
    #modal-4 .talent-filter-item .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;
      transform: translate3d(0,0,0) !important;
    }

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

    /* Estados também opacos (não deixa “vazar” o placeholder de baixo) */
    #modal-4 .talent-filter-item .Select-option.is-focused,
    #modal-4 .talent-filter-item .Select-option:hover{
      background-color: rgba(255,255,255,0.06) !important;
    }

    #modal-4 .talent-filter-item .Select-option.is-selected{
      background-color: rgba(255,255,255,0.10) !important;
    }
  }
}