/*!
*
* The MIT License (MIT)
* Copyright (c) 2023
* 
* Permission is hereby granted, free of charge, to any person obtaining a copy of
* this software and associated documentation files (the "Software"), to deal in
* the Software without restriction, including without limitation the rights to
* use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
* the Software, and to permit persons to whom the Software is furnished to do so,
* subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
* FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
* COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
* IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*
* @link https://github.com/andressousa/as-qliksense-mashup-darone
*/

/** 
 * 	CSS dependencies
 *	
 *	Bootstrap v4.6.0
 * 	- https://getbootstrap.com/docs/4.6/getting-started/introduction/
 * 
 *	Font Awesome Free 5.15.4
 *	- https://fontawesome.com/v5/search?m=free
 *
 *	Google Fonts
 *	- https://fonts.googleapis.com/
 */

/** 
 * 	Custom height for qlik objects
 *	- you can create yours custom height classes here
 */

.ha-50 {
  height: 50px;
}
.ha-75 {
  height: 75px;
}
.ha-100 {
  height: 100px;
}
.ha-125 {
  height: 125px;
}
.ha-150 {
  height: 150px;
}
.ha-175 {
  height: 175px;
}
.ha-200 {
  height: 200px;
}
.ha-225 {
  height: 225px;
}
.ha-250 {
  height: 250px;
}
.ha-275 {
  height: 275px;
}
.ha-300 {
  height: 300px;
}
.ha-325 {
  height: 325px;
}
.ha-350 {
  height: 350px;
}
.ha-375 {
  height: 375px;
}
.ha-400 {
  height: 400px;
}
.ha-425 {
  height: 425px;
}
.ha-450 {
  height: 450px;
}
.ha-455 {
  height: 455px;
}
.ha-475 {
  height: 475px;
}
.ha-500 {
  height: 500px;
}
.ha-525 {
  height: 525px;
}
.ha-550 {
  height: 550px;
}
.ha-575 {
  height: 575px;
}
.ha-600 {
  height: 600px;
}
.ha-625 {
  height: 625px;
}
.ha-650 {
  height: 650px;
}
.ha-675 {
  height: 675px;
}
.ha-700 {
  height: 700px;
}
.ha-725 {
  height: 725px;
}
.ha-750 {
  height: 750px;
}
.ha-775 {
  height: 775px;
}

.ha-777 {
  height: 777px;
}

.ha-800 {
  height: 800px;
}
.ha-825 {
  height: 825px;
}
.ha-850 {
  height: 850px;
}
.ha-875 {
  height: 875px;
}
.ha-900 {
  height: 900px;
}
.ha-925 {
  height: 925px;
}
.ha-950 {
  height: 950px;
}
.ha-975 {
  height: 975px;
}
.ha-1000 {
  height: 1000px;
}

/* Customização */

.sn-kpi-value {
  font-size: 1rem !important;
}

div.sn-kpi-measure-wrapper.sn-kpi-center > div {
  font-size: 0.8rem !important;
}

/* Container principal - layout vertical com foto principal acima e carrossel abaixo */
.album-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

/* Foto principal no topo */
.main-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-photo img {
  max-width: 600px;
  max-height: 600px;
  aspect-ratio: 4/3;
  width: auto;
  height: 600px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Container do carrossel com botões de navegação */
.carousel-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  position: relative;
 
}

/* Botões de navegação do carrossel */
.carousel-nav-btn {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 10;
  flex-shrink: 0;
}

.carousel-nav-btn:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

.carousel-nav-btn:active {
  transform: scale(0.95);
}

.carousel-nav-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}

.carousel-nav-btn i {
  font-size: 16px;
}

/* Lista de miniaturas horizontal */
.thumbnail-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex: 1;
  overflow-x: hidden; /* Esconde o scroll padrão, navegação será pelos botões */
  overflow-y: hidden;
  padding: 10px 5px;
  box-sizing: border-box;
  scroll-behavior: smooth; /* Scroll suave quando navegado via JavaScript */
  /* Remove a barra de scroll visual */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */

  
}

/* Remove barra de scroll no webkit (Chrome, Safari) */
.thumbnail-list::-webkit-scrollbar {
  display: none;
}

/* Miniaturas ajustadas para layout horizontal */
.thumbnail-list img {
  width: 120px !important;
  height: 90px !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: block;
  flex-shrink: 0;
  border: 2px solid transparent;
}

.thumbnail-list img:hover {
  transform: scale(1.05);
  border-color: #007bff;
}

.thumbnail-list img.active {
  border-color: #007bff;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
  transform: scale(1.02);
}

/* Posicionamento do botão abaixo das fotos */
#openAlbum  #thumbLoadMore{
  font-size: 12px;
  /*
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  margin: 12px auto;
  display: block;
  width: fit-content;
  transition: background-color 0.3s ease;
  */
}

#openAlbum:hover {
  background-color: #0056b3;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  overflow: auto;
}

.modal-content {
  margin: 5% auto;
  padding: 0;
  background-color: #fefefe;
  border: none;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  right: 20px;
  top: 10px;
  cursor: pointer;
  z-index: 1001;
}

.close:hover {
  color: black;
}

/* Grid da galeria no modal */
.grid-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.grid-gallery img {
  width: 100% !important;
  height: 150px !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  display: block;
}

.grid-gallery img:hover {
  transform: scale(1.05);
}

/* Responsivo para mobile */
@media (max-width: 768px) {
  .main-photo img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
  }
  
  .carousel-container {
    gap: 8px;
    max-width: 100%;
  }
  
  .carousel-nav-btn {
    width: 35px;
    height: 35px;
  }
  
  .carousel-nav-btn i {
    font-size: 14px;
  }
  
  .thumbnail-list {
    gap: 6px;
    padding: 8px 3px;
  }
  
  .thumbnail-list img {
    width: 80px !important;
    height: 60px !important;
    aspect-ratio: 4/3 !important;
  }
  
  .grid-gallery {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
  }
  
  .grid-gallery img {
    height: 112px !important;
  }
}

/* Responsivo para tablets */
@media (max-width: 1024px) and (min-width: 769px) {
  .carousel-container {
    max-width: 90%;
  }
  
  .thumbnail-list img {
    width: 100px !important;
    height: 75px !important;
  }
}

/* Responsivo para telas muito pequenas */
@media (max-width: 480px) {
  .carousel-nav-btn {
    width: 30px;
    height: 30px;
  }
  
  .carousel-nav-btn i {
    font-size: 12px;
  }
  
  .thumbnail-list img {
    width: 70px !important;
    height: 52px !important;
  }
}

.btn-export {
  pointer-events: auto !important;
  display: inline-block !important;
  visibility: visible !important;
}

.qv-object .qv-toolbar {
    display: block !important;
}

.qv-selections-pager .qv-selections-search {
    display: block !important;
}

.qv-selections-search {
  position: absolute !important;
  top: 20px !important;
  right: 50px !important;
  width: 400px !important;
}

/* Caixa de pesquisa inteligente */
.qv-global-search-input {
  border: 2px solid #4CAF50 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  padding: 6px 10px !important;
}

/* Resultados da pesquisa */
.qv-global-search-results {
  background-color: #f9f9f9 !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
}

/* Item selecionado no resultado */
.qv-global-search-results .selected {
  background-color: #4CAF50 !important;
  color: #fff !important;
}

button[tid="toggleGlobalSearchButton"]{
  background-color: #1a74f8 !important;
  color: white !important
}



/* Botão carregar */





/*
.MainImg  {
 background-position: 20px 30px;
 background-size: 20px 40px;


}
 */

.MainImg img {
 align-items: center;
  width: 603px;
  height: 535px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  margin-top:10px;



}


/* Responsivo para telas muito pequenas */
@media (max-width: 480px) {
  .MainImg img {
      max-width: 110%;

  }
  
}

@media (-webkit-min-device-pixel-ratio: 4){
  .MainImg img {
      max-width: 110%;

  }
} 


/* ---------------------------------------------------
   1. ESTILOS GERAIS PARA TABLETS (Portrait e Landscape)
   --------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
   

    /* Exemplo: Ajuste de imagens */
    .MainImg img {
        max-width: 600px !important;
        height: 550px !important;
        
    }

   
}