/* =========================================================
   SG Compensa - Layout Base (Bootstrap 5)
   - Topbar fixa
   - Sidebar fixa (desktop)
   - Offcanvas (mobile <= 800px)
========================================================= */

/* Tokens do layout */
:root {
  --topbar-h: 56px;     /* altura da navbar */
  --sidebar-w: 240px;   /* largura da sidebar desktop */
  --main-pad: 16px;     /* padding do conteúdo */
  --z-topbar: 1030;     /* Bootstrap: .navbar.fixed-top usa ~1030 */
  --z-sidebar: 1020;    /* abaixo da topbar */


  --bg-sidebar: #E1F0E7;
  --bg-sidebar-menu-hover: #d2e1d8; 
  --bs-btn-sidebar-active-hover-bg: #157347;

}

/* Base */
html, body { height: 100%; }

body {
  padding-top: var(--topbar-h); /* compensa topbar fixa */
  background-color: #f8f9fa;
}

/* =========================================================
   TOPBAR
========================================================= */
.app-topbar {
  height: var(--topbar-h);
  z-index: var(--z-topbar);
}

/* Botão hamburger (ícone padrão) */
.app-sidebar-toggle .navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================================================
   SIDEBAR (DESKTOP)
   Observação: use a classe .app-sidebar no HTML
========================================================= */
.app-sidebar {
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  background-color: var(--bg-sidebar);
  border-right: 1px solid #dee2e6;
  z-index: var(--z-sidebar);
}
.app-sidebar-inner {
  height: 100%;
  overflow-y: auto;
}

.list-group-item{
  background-color: var(--bg-sidebar);
  border-color: var( --bs-success-border-subtle);
}

.list-group-item.active {
  background-color: var(--bs-success);
  border-color: var( --bs-success-border-subtle);
}
.list-group-item-action:focus, .list-group-item-action:hover{
  background-color: var(--bg-sidebar-menu-hover );
}
.list-group-item.active:hover {
  background-color: var(--bs-btn-sidebar-active-hover-bg);
}

/* =========================================================
   MAIN CONTENT
========================================================= */
.app-main {
  min-height: calc(100vh - var(--topbar-h));
  padding: var(--main-pad);
  margin-left: var(--sidebar-w); /* desktop: reserva espaço da sidebar */
}

/* =========================================================
   OFFCANVAS (MOBILE)
========================================================= */
.app-offcanvas .offcanvas-body {
  padding: 0;
}
.offcanvas{
  background-color: var(--bg-sidebar);
}


/* =========================================================
   RESPONSIVO: até 800px => sidebar fixa some e main ocupa 100%
========================================================= */
@media (max-width: 800px) {
  .app-sidebar {
    display: none; /* some a sidebar fixa */
  }

  .app-main {
    margin-left: 0;
    padding: 12px;
  }

  .app-sidebar-toggle {
    display: inline-flex !important; /* mostra botão */
  }
}

/* acima de 800px => esconde botão do offcanvas */
@media (min-width: 801px) {
  .app-sidebar-toggle {
    display: none !important;
  }
}

/* =========================================================
   AUTH (LOGIN)
========================================================= */
.auth-card { max-width: 680px; }

.auth-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 85vh;
  background-color: #f8f9fa;
}

.brand { height: 42px; }
.login .brand { height: 72px; }


.btn-toggle-layer-map{
  right: 30px;  
  margin-top: 15px; 
  z-index: 999999; 
  position: absolute; 
}