/* ========================================= */
/* MOBILE MODALS (Centering & Sizing)        */
/* ========================================= */

.vertical-divider-sm-up {
  display: none;
}

@media (min-width: 768px) {
  .vertical-divider-sm-up {
    display: block;
    height: 100%;
    width: 1px;
    background-color: var(--millenio-gray-border);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-55%);
  }

  #swipe-config-modal .col-sm-6 {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

@media (max-width: 767px) {
  /* 1. Oculta o divisor vertical */
  .vertical-divider-sm-up {
    display: none !important;
  }

  /* 2. Estiliza a COLUNA ESQUERDA (Primeira a aparecer no mobile) */
  /* Adiciona margem inferior para dar espaço à linha e ao conteúdo seguinte */
  #swipe-config-modal .col-sm-6:first-child {
    margin-bottom: 20px !important;
    /* Limpa qualquer borda que possa ter sido setada */
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    /* Garante posicionamento relativo para o pseudo-elemento */
    position: relative !important;
  }

  /* 3. INSERE A LINHA HORIZONTAL USANDO PSEUDO-ELEMENTO */
  #swipe-config-modal .col-sm-6:first-child:after {
    content: "";
    /* Essencial para pseudo-elementos */
    display: block;
    /* A borda real é aplicada aqui */
    border-bottom: 1px solid var(--millenio-gray-border);

    /* Posiciona a linha na base do conteúdo da primeira coluna */
    position: absolute;
    bottom: -10px;
    /* Distância da linha em relação ao conteúdo da Camada Esquerda */
    left: 0;
    right: 0;
    width: 100%;
  }

  /* 4. Estiliza a COLUNA DIREITA (Segunda a aparecer no mobile) */
  #swipe-config-modal .col-sm-6:last-child {
    border-left: none !important;
    border-right: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* Mantém o estilo de desktop para afastar o conteúdo do divisor vertical */
@media (min-width: 768px) {
  .col-sm-6 {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
}

@media (max-width: 1262px) {
  /* 10. CENTER "GERENCIAR FONTES" MODAL (Add Data Source) */
  #add-data-source-modal .modal-dialog {
    position: absolute !important;
    top: 20px !important;
    /* increased top gap */
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    width: 90% !important;
    /* Reduced from 95% for breathing room */
    max-width: 700px !important;
    height: auto !important;
    max-height: 90vh !important;
    display: block !important;
  }

  #add-data-source-modal .modal-content {
    max-height: 85vh;
    overflow-y: auto;
    padding-bottom: 80px !important;
    /* SAFE AREA for scrolling */
  }

  /* 11. CENTER "ADICIONAR TEMA" MODAL (Thematic Map - Simple/Advanced) */
  /* This modal has an inline min-width: 750px which breaks mobile layout. */
  #add-client-theme-layer-modal .modal-dialog {
    position: absolute !important;
    top: 50% !important;
    /* Perfect vertical center */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 90% !important;
    /* Reduced from 95% */
    max-width: 600px !important;
    display: block !important;

    height: auto !important;
    max-height: 85vh !important;
    /* STRICT LIMIT to prevent top cutoff */
  }

  #add-client-theme-layer-modal .modal-content {
    max-height: 80vh;
    /* STRICT LIMIT: Ensure content fits */
    overflow-y: auto;
    padding-bottom: 80px !important;
  }

  /* 12. CENTER "ADVANCED THEME WIZARD" MODAL (Publicar Tema) */
  #add-server-theme-layer-modal .modal-dialog {
    position: absolute !important;
    top: 50% !important;
    /* Perfect vertical center */
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 90% !important;
    max-width: 700px !important;
    display: block !important;
    height: auto !important;
    max-height: 85vh !important;
  }

  #add-server-theme-layer-modal .modal-content {
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 80px !important;
  }
}

/* RESTORE DESKTOP WIDTHS (removed from inline HTML) */
@media (min-width: 1263px) {
  #add-client-theme-layer-modal .modal-dialog {
    min-width: 750px !important;
    width: 750px !important;
  }
}