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

/* Hamburger Menu Styles */
.navbar-toggle-mobile {
  display: none;
  background: none;
  border: none;
  color: var(--millenio-black);
  font-size: var(--millenio-font-2xl);
  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: #f5f5f5;
}

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

.mobile-menu-divider {
  height: 10px;
  background-color: #f0f0f0;
  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: 1.4rem;
  font-weight: bold;
  color: var(--millenio-black);
  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: 1262px) {
  /* 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: var(--millenio-black);
    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;
  }
}

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