/*
===================================================
NICHOLAS 02/10/2025

O propósito deste código CSS é reduzir a carga dos estilos bootstraps no index.html
===================================================
*/

#navbar-brand {
  z-index: 1;
}

#brand-text {
  font-size: var(--millenio-font-xl);
}

#mega-dropdown-menu {
  max-width: 300px;
}

#dropdownList-li {
  visibility: hidden;
}

#editingToolbar {
  margin-top: 3.5%;
  padding: 0px;
  display: none;
}

#form-group,
#selMapa,
#selInscricao,
#selChave,
#selMatricula,
#selEndereco,
#selProprietario,
#selQuadra,
#selLote,
#selLogradouro,
#selBairro,
#selLoteamento {
  margin-top: 10px;
}

#dropdown-footer {
  padding: 8px;
  text-align: center;
}

#admin-link {
  margin-bottom: 8px;
  margin-top: 8px;
}

#btnQaSwitch {
  width: 100%;
}

#dropdown-footerBtn {
  margin-left: 4px;
}

#page-head,
#idata,
#mainnav-container,
#mySidepanelLeft,
#mySidepanelRight,
#footer>#editFooterSector,
#pt_txtSldBody,
#fpath {
  display: none;
}

#map {
  height: 100% !important;
  width: 100%;
  position: fixed;
  top: 55px;
}

#sidepanel-tabs-wrapper {
  display: block;
}

#lstCardLayers {
  min-width: 330px;
}

#mainnav-menu {
  min-width: 380px;
}

#mapLegendListGroup,
#serverThemeListGroup,
#clientThemeListGroup,
#drawer-attributes-side {
  min-width: 380px;
}

#btnclearZoomOptions {
  margin: 2px 0px 0px 80px;
  display: none;
  border-radius: 4px;
}

#btnclearSelectLayer,
#btnclearCheckedLayer,
#btnclearInfoLayer,
#btnclearAllLayer {
  line-height: 0;
  width: 75px;
  height: 26px;
  background-color: var(--millenio-white);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

#core-asd-tab-2-table,
#col_xs_6,
#ddlWmsLayer,
#ddlTargetLayer,
#ddlTargetLayerField {
  width: 100% !important;
}

#pnlInfoContainer {
  overflow: auto;
}

#system-config-panel {
  max-width: 600px;
}

#group_btn_fechar {
  float: right;
}

#modal_dialog_layer {
  width: 750px;
}

#pt_ddlTargetLayer,
#pt_ddlDataColumn {
  width: 100% !important;
  text-align: left !important;
}

#modal_body_bgColor {
  background-color: var(--millenio-gray-light);
}

#modal_body_row {
  text-align: center;
}

#modal_body_i_bgColor {
  color: #b7b7ff;
}

/* Altera a cor do TEXTO para preto */
.bootstrap-select .dropdown-menu li a .text,
.dropdown-menu li a .glyphicon,
.glyphicon,
.glyphicon text,
.bootstrap-select.btn-group .dropdown-toggle .filter-option,
#aliasName {
  color: #000 !important;
}

/* NICHOLAS 17/11/2025 */
/* tira o o fundo do botão de comparação */
.leaflet-sbs-range {
  background: none !important;
}

/* cor do botão de desativar comparação */
#btnDeactivateSwipe {
  background-color: #cc0000;
  color: var(--millenio-white);
}

@media (max-width: 768px) {
  .navbar-top-links .dropdown-menu {
    left: auto !important;
  }
}

/* NICHOLAS 16/12/2025 */
/* Fix sidepanel height/position to fit scroll properly and avoid cutoff */
.sidepanel {
  position: fixed !important;
  top: 55px !important;
  height: calc(100% - 55px) !important;
  z-index: 3000;
}

/* (Removed redundant global sidepanel styles - handled in mobile block below) */

/* ========================================================================== */
/* MOBILE SIDEBAR REFACTOR (High Specificity)                               */
/* ========================================================================== */

/* 1. FORCE TOGGLE ARROW TO VERTICAL CENTER */
body .sidepanel .sidepanel-toggle-container {
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 4000 !important;
  margin: 0 !important;
  /* Reset any potential margins */
  right: 0 !important;
  /* Ensure it sticks to edge */
}

@media (max-width: 992px) {

  /* 2. PIN TABS TO TOP LEFT (Separated from Arrow) */
  body .sidepanel-tabs-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin-top: 10px !important;
    z-index: 5000;
    height: auto !important;
  }

  /* 3. RESET CONTENT MARGINS */
  body .sidepanel-tabs-wrapper .sidepanel-tabs,
  body .sidepanel.tabs-left .sidepanel-content-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 4. STYLE TABS BUTTONS (Tall & Centered) */
  body .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link {
    height: 50px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link i,
  body .sidepanel-tabs-wrapper .sidepanel-tabs .sidepanel-tab .sidebar-tab-link svg {
    font-size: var(--millenio-font-xl) !important;
  }

  /* 5. FIX LEAFLET CONTROLS (Remove interference from .leaflet-top) */
  body .leaflet-top {
    top: 5% !important;
    /* Reset from 8% or conflicting values */
    bottom: auto !important;
  }
}

.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-lighter);
    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;
  }
}

/* ========================================= */
/* RESPONSIVENESS (HAMBURGER MENU)           */
/* ========================================= */

/* Hamburger Menu Styles */
.navbar-toggle-mobile {
  display: none;
  background: none;
  border: none;
  color: #000;
  font-size: 24px;
  padding: 15px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  top: 5px;
  z-index: 6000 !important;
}

.mobile-menu-container {
  position: fixed;
  top: 0;
  right: -300px;
  width: 280px;
  height: 100%;
  background-color: var(--millenio-white);
  z-index: 9999;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  overflow-y: auto;
  display: block;
}

.mobile-menu-container.open {
  right: 0;
}

.mobile-menu-header {
  background-color: var(--millenio-green);
  color: var(--millenio-white);
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu-header .brand-text {
  font-weight: bold;
  font-size: var(--millenio-font-lg);
}

.close-mobile-menu {
  background: none;
  border: none;
  color: var(--millenio-white);
  font-size: var(--millenio-font-xl);
  cursor: pointer;
}

.mobile-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu-item {
  padding: 15px 20px;
  border-bottom: 1px solid var(--millenio-gray-lighter);
  cursor: pointer;
  color: var(--millenio-text-dark);
  font-size: var(--millenio-font-sm);
  transition: background-color 0.2s;
}

.mobile-menu-item:hover {
  background-color: #e0e0e0;
}

.mobile-menu-item i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  color: var(--millenio-green);
}

.mobile-menu-divider {
  height: 10px;
  background-color: var(--millenio-gray-light);
  border-top: 1px solid var(--millenio-gray-border);
  border-bottom: 1px solid var(--millenio-gray-border);
}

.mobile-menu-section-title {
  padding: 10px 20px;
  background-color: var(--millenio-gray-light);
  font-size: var(--millenio-font-xs);
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  border-bottom: 1px solid var(--millenio-gray-lighter);
}

/* Mobile Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  display: none;
}

.mobile-menu-overlay.open {
  display: block;
}

/* Response Media Queries */
@media (max-width: 992px) {

  /* Show Hamburger - Align Right */
  .navbar-header {
    width: 100% !important;
  }

  .navbar-toggle-mobile {
    display: block !important;
    position: absolute !important;
    top: 15px;
    right: 15px;
    float: none !important;
    margin: 0 !important;
  }

  /* 1. Hide Left Toolbar (#navbarTop) */
  #navbarTop,
  #navbarTop>li {
    display: none !important;
  }

  /* 2. Hide specific items in Right Toolbar */
  /* STRICTLY hide dropdown-user and any other list items in the navbar-right/top */
  .navbar-top-links>li:not(.mobile-menu-container),
  #dropdown-user,
  #navbar-content-clearfix>div>ul>li {
    display: none !important;
  }

  /* 3. Hide Toolbar container #editingToolbar explicitly again */
  #editingToolbar,
  #editingToolbar * {
    display: none !important;
  }

  /* Hide Desktop Permission Group Dropdown */
  #combo-box-container,
  #dropdown-teste {
    display: none !important;
  }

  /* 4. Hide Leaflet Controls on Mobile (Zoom, Draw, etc.) */

  /* 5. Ensure Navbar Height & Remove Border */
  #navbar,
  #navbar-container,
  .navbar-content,
  .navbar-header,
  #navbar-content-clearfix {
    min-height: 55px;
    height: 55px;
    box-shadow: none !important;
    border-bottom: none !important;
    border: none !important;
    background-color: var(--millenio-white);
  }

  #navbar-container {
    padding: 0 !important;
    /* Remove bootstrap padding */
    margin: 0 !important;
  }

  /* Fix Alignment of Brand and Toggle */
  .navbar-header {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 3rem !important;
  }

  /* CRITICAL: Remove Bootstrap clearfix pseudo-elements from Flex container */
  .navbar-header::before,
  .navbar-header::after {
    display: none !important;
    content: none !important;
  }

  .navbar-brand {
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    float: none !important;
  }

  /* Force consistent spacing between Logo and Text */
  .navbar-brand img {
    margin-right: 10px !important;
  }

  /* 7. RESIZE AND ALIGN HAMBURGER ICON */
  /* Increased size slightly for better touch target */
  .navbar-toggle-mobile {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0 !important;
    background: transparent;
    border: none;
    color: #000;
    padding: 10px;
    line-height: 1;
  }

  .navbar-toggle-mobile i {
    font-size: 3rem !important;
  }

  /* 8. TABLET SPACING FIX (768px - 992px) */
  /* 
       PROBLEM: Nifty theme applies float-based styles (width: 240px, padding-left: 55px) 
       starting at 768px, which conflicts with our Flexbox layout on Tablet/Mobile.
       FIX: Reset width to auto and padding to 0 to remove the "ghost" spacing.
    */
  #container.mainnav-in .navbar-brand,
  #container.mainnav-lg .navbar-brand,
  .navbar-brand,
  .brand-title {
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #navbar .brand-title {
    padding: 0 !important;
    /* Removes the 55px left padding */
    width: auto !important;
  }

  /* 9. WIDEN SYSTEM CONFIG PANEL (Thematic Settings) */
  #system-config-panel {
    width: 90% !important;
    max-width: 500px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 15% !important;
    right: auto !important;
    display: block !important;
    /* When .in class is present */
  }

  /* Ensure it hides when not active (Bootstrap/JointJS usually toggles 'hide' or 'in') */
  #system-config-panel.hide {
    display: none !important;
  }

  /* 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;
  }

  /* 13. STYLE "GERENCIAR FONTES" TABS (Mobile Alignment Fix Only) */
  /* User requested "Desktop Style" visuals but "Aligned" layout */

  #add-data-source-modal .nav-tabs.tabs-right {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    border-bottom: 1px solid #ddd !important;
    /* Restore standard border */
    padding: 0 !important;
    gap: 0 !important;
    /* Remove gap for standard tab look */
  }

  #add-data-source-modal .nav-tabs.tabs-right>li {
    float: none !important;
    margin-bottom: -1px !important;
    /* Overlap border */
    flex: 1 0 30% !important;
    /* Keep 3-column alignment */
    text-align: center !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right>li>a {
    /* Revert to standard Bootstrap/Nifty styling */
    border: 1px solid transparent !important;
    border-radius: 4px 4px 0 0 !important;
    /* Top rounded only */
    background-color: transparent !important;
    color: #555 !important;
    margin-right: 2px !important;
    padding: 10px 5px !important;
    font-weight: 600 !important;

    /* Keep Flexbox for internal centering */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Active state matching standard look */
  #add-data-source-modal .nav-tabs.tabs-right>li.active>a,
  #add-data-source-modal .nav-tabs.tabs-right>li.active>a:hover,
  #add-data-source-modal .nav-tabs.tabs-right>li.active>a:focus {
    color: var(--millenio-text-muted) !important;
    background-color: var(--millenio-white) !important;
    border: 1px solid var(--millenio-gray-border) !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    /* Remove shadow */
    cursor: default !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right>li>a:hover {
    background-color: var(--millenio-gray-lighter) !important;
    border-color: var(--millenio-gray-lighter) var(--millenio-gray-lighter) var(--millenio-gray-border) !important;
  }

  #add-data-source-modal .nav-tabs.tabs-right>li>a i {
    display: block !important;
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  /* 14. STYLE TABLES FOR MOBILE (Better text wrapping & readability) */
  #add-data-source-modal .bootstrap-table .fixed-table-body {
    overflow-x: auto !important;
    /* Ensure generic scroll if needed */
    max-height: 50vh !important;
    /* Limit height so pagination is visible */
  }

  #add-data-source-modal .table>tbody>tr>td {
    white-space: normal !important;
    /* Allow wrapping */
    word-break: break-all !important;
    /* Break long underscores/names */
    word-wrap: break-word !important;
    font-size: var(--millenio-font-xs) !important;
    /* Slightly smaller text */
    padding: 8px 5px !important;
    /* Comfortable touch padding */
    vertical-align: middle !important;
  }

  /* Fix Pagination Stack */
  #add-data-source-modal .fixed-table-pagination {
    text-align: center !important;
  }

  #add-data-source-modal .fixed-table-pagination .pagination {
    float: none !important;
    display: inline-flex !important;
    margin-top: 10px !important;
  }

  #add-data-source-modal .fixed-table-pagination .pagination-detail {
    float: none !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

  /* 15. FIX "CONSULTAS" TAB LAYOUT (Stack Vertically) */
  /* The side-by-side layout breaks on mobile. We stack icons ON TOP of content. */
  #add-data-source-modal #demo-tabs-box-4 .media-left {
    display: none !important;
    /* Hide giant monitor icon on mobile to save space */
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left {
    display: flex !important;
    flex-direction: column !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    border-right: none !important;
    border-bottom: 1px solid var(--millenio-gray-border) !important;
    margin-bottom: 15px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs>li {
    float: none !important;
    margin: 0 5px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .nav-tabs>li>a {
    margin-right: 0 !important;
    margin-bottom: 1.5rem !important;
    border: 1px solid var(--millenio-gray-border) !important;
    border-radius: 4px !important;
  }

  #add-data-source-modal #demo-tabs-box-4 .tab-stacked-left .tab-content {
    display: block !important;
    /* OVERRIDE 'table-cell' from theme */
    width: 100% !important;
    margin-left: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* Fix Grid inside "User" tab (first tab) to prevent right-shift */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 .form-group {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Hide empty labels that act as spacers on desktop */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 label.col-md-3 {
    display: none !important;
  }

  /* Force input/table container to full width */
  #add-data-source-modal #demo-tabs-box-4 #demo-stk-lft-tab-1 .col-md-9 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
  }
}

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