:root{
  /* Cores base */
  --sb-bg:#ffffff;          /* fundo barra de ícones (branco) */
  --sb-bg-hover:#f6f8fb;    /* hover claro */
  --sb-fg:#475569;          /* cor dos ícones/textos (slate-600) */
  --sb-active:#10b6d6;      /* indicador ativo */

  --panel-bg:#ffffff;       /* fundo painel */
  --iconbar-w:64px;         /* largura coluna de ícones */
  --nav-h:56px;             /* altura navbar fixa */
  --nav-border:#eef2f6;
}

html, body {height:100%;}
body {overflow-x:hidden; background:#f5f7fb;}

@media (min-width: 992px){
  :root{
    --panel-w:250px; /* ou outro valor que achar melhor */
  }
}


.offcanvas{ z-index: 2005 !important; }
.offcanvas-backdrop{ z-index: 2000 !important; }

/* ===== BLOCO DO LOGO NO CANTO ===== */
.corner-brand{
  position: fixed;
  top: 0; left: 0;
  width: var(--iconbar-w);
  height: var(--nav-h);
  background: var(--sb-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 1070; /* acima de navbar e backdrop */
  border-bottom: 1px solid rgba(255,255,255,.08);
  background-color: #106FB7; /* mantém a faixa do logo azul */
}
.corner-brand .corner-logo{ width: 55px; height: 55px; object-fit: contain; }

/* ===== NAVBAR ===== */
.appbar.navbar{
  position: fixed; top: 0; right: 0; left: var(--iconbar-w);
  height: var(--nav-h);
  background:#fff;
  border-bottom:1px solid var(--nav-border);
  z-index:1059;
}
.appbar .brand-mark{ font-weight:700; letter-spacing:.3px; }
.appbar .avatar{ width:32px; height:32px; object-fit:cover; }

/* ===== SIDEBAR (1º nível) ===== */
.iconbar{
  position: fixed; left: 0; right: auto; top: var(--nav-h); bottom:0;
  width: var(--iconbar-w);
  background: var(--sb-bg);
  color: var(--sb-fg);
  display:flex; flex-direction:column; align-items:center;
  z-index:1068;
  transform:translateX(0); transition:transform .22s ease;
  border-right: 1px solid rgba(2, 6, 23, .06); /* linha sutil à direita */
}
/* removemos gaps para os divisores ficarem contínuos */
.iconbar .nav{ flex:1; width:100%; padding:.25rem 0; gap:0; }

.iconbtn{
  --size:48px;
  width:100%; height:var(--size);
  display:flex; align-items:center; justify-content:center;
  color: var(--sb-fg);
  text-decoration:none;
  border-left:4px solid transparent;
  border-bottom:1px solid rgba(2, 6, 23, .06); /* separador leve */
}
.iconbar .nav .iconbtn:last-child{ border-bottom:0; } /* não duplica no último */
.iconbtn .bi{ font-size:1.35rem; color:inherit; }

.iconbtn:hover{
  background:var(--sb-bg-hover);
  color:#0f172a;
}
.iconbtn.active{
  border-left-color:var(--sb-active);
  background:rgba(16,182,214,.10); /* leve “tinta” */
  color:#0f172a;
}

.iconbar .footer{
  padding:.5rem 0; width:100%;
  border-top:1px solid rgba(2,6,23,.06); /* separa do bloco superior */
}

/* ===== FLYOUT (2º nível) — atrás da iconbar e até o topo ===== */
.flyout{
  position: fixed;
  top: 0;
  bottom:0;
  left: var(--iconbar-w);
  width: var(--panel-w);
  background: var(--panel-bg);
  transform: translateX(-100%); transition: transform .22s ease;
  z-index:1066;
  overflow:auto;
  box-shadow:none; border-right:0;
  pointer-events:none; visibility:hidden;
}
.flyout.open{ pointer-events:auto; visibility:visible; transform:translateX(0); }

/* Header da 2ª camada: bem perto da navbar */
.flyout-header{
  position: sticky;
  top: 10px;
  z-index: 1;
  background:#fff;
  /* padding inferior maior, para abrir espaço */
  padding: .1rem .9rem .75rem;

  /* simula a linha depois do padding */
  box-shadow: inset 0 -1px 0 #eef2f6;
  margin-bottom: .75rem;
}
.flyout-header .titles{ display:flex; flex-direction:column; }
.flyout-header .title{
  font-size: 1.125rem;  line-height: 1.05; margin:0; font-weight:700;
}
.flyout-header .subtitle{
  margin-top:.1rem; font-size:.8125rem; line-height:1.15;
  color:#6c757d; font-weight:400; letter-spacing:.2px;
}

.flyout-body{ padding:.75rem .75rem 1rem; }
.menu-list .list-group-item{
  border:none; border-radius:.75rem; margin-bottom:.35rem;
  padding:.7rem .9rem;
}
.menu-list .list-group-item:hover{ background:#f3f7fb; }
.menu-list .bi{ margin-right:.5rem; }

/* Accordion flat */
.flyout .accordion{
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: inherit;
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: none;
}
.flyout .accordion-button,
.flyout .accordion-button:not(.collapsed),
.flyout .accordion-button:focus{
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* “CAP” do topo (mantido, mas desligado) */
.flyout-cap{
  position: fixed;
  top: 0;
  left: var(--iconbar-w);
  width: calc(100vw - var(--iconbar-w));
  height: var(--nav-h);
  background: var(--panel-bg);
  border-bottom:1px solid var(--nav-border);
  z-index: 1062;
  display: none;
  pointer-events: none;
}
.flyout-cap.show{ display:block; }
.iconbar .nav{
  padding: 0;      /* remove a faixa branca do topo */
}
/* Garantir hierarquia lateral */
.corner-brand{ z-index: 1070; }
.iconbar{ z-index: 1068; }

/* Backdrop no DESKTOP: cobre navbar + conteúdo; não cobre a coluna do logo */
.flyout-backdrop{
  position: fixed;
  top: 0;                       /* cobre a navbar */
  left: var(--iconbar-w);       /* não cobre a coluna do logo */
  right: 0; bottom: 0;
  background: rgba(15, 23, 42, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 1062;                /* abaixo da flyout/iconbar */
}
.flyout-backdrop.show{ opacity: 1; visibility: visible; pointer-events: auto; }

/* ===== CONTEÚDO ===== */
.app{
  box-sizing: border-box;
  padding-top: calc(var(--nav-h) + 1rem);
  padding-left: var(--iconbar-w);
  padding-right: 0;
  padding-bottom: 1rem;
}

/* ===== MOBILE (bloco único) ===== */
@media (max-width: 992px){
  /* Logo do canto some; navbar full width */
  .corner-brand{ display:none !important; }
  .appbar.navbar{ left:0 !important; }

  /* Sidebar fora da tela por padrão (abre com .open) */
  .iconbar{
    left:0 !important;
    transform: translateX(calc(-100% - 2px)) !important; /* fechada */
    will-change: transform;
  }
  .iconbar.open{ transform: translateX(0) !important; }   /* aberta */

  /* 2ª camada continua atrás da 1ª */
  .flyout{ left: var(--iconbar-w); width:85vw; }

  /* Backdrop cobre a tela toda; se iconbar aberta, não cobre a 1ª camada */
  .flyout-backdrop{ top:0; left:0; }
  body.iconbar-open .flyout-backdrop{ left: var(--iconbar-w); }

  /* Conteúdo sem recuo lateral */
  .app{ padding-left: 0; }
}

/* Desliga a “tampinha” do topo (evita faixa branca) */
.flyout-cap{ display: none !important; }



.iconbtn.with-arrow{
  position: relative;
  border-left-color: transparent; /* remove o marcador antigo */
}

.iconbtn.with-arrow::after{
  content: "";
  position: absolute;
  right: -1px;               /* encosta na borda do flyout */
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff; /* cor do fundo do flyout */
  z-index: 2;
}