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

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

/* 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: 1360px) {
  /* 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 {
    /* User requested to remove top offset in responsive mode */
    top: 0 !important;
    /* Reset from 8% or conflicting values */
    bottom: auto !important;
  }

  /* 6. FIX LEAFLET LEFT CONTROLS (Prevent shift at small screens) */
  body .leaflet-left {
    left: 0 !important;
    margin-left: 0 !important;
  }
}

/* ========================================================================== */
/* NICHOLAS - Largura RESPONSIVA do sidepanel                                 */
/* -------------------------------------------------------------------------- */
/* Motivo: em leaflet-sidepanel.css o .sidepanel tem width:400px FIXO e so vira */
/* largura cheia em max-width:450px. Entre ~450px e o desktop nao havia nenhum  */
/* breakpoint, entao o painel travava em 400px e espremia o mapa nas telas      */
/* intermediarias (o efeito que aparecia por volta de 970px).                   */
/* Solucao: degrade gradual ate o overlay de tela cheia no celular.             */
/* ========================================================================== */

/* Tablet / telas intermediarias: reduz o painel para sobrar mais mapa */
@media (max-width: 991px) {
  .sidepanel {
    width: 320px !important;
  }
}

/* Celular: painel ocupa quase a largura toda (overlay sobre o mapa) */
@media (max-width: 600px) {
  .sidepanel {
    width: calc(100% - 56px) !important;
  }
}