/* Estrutura do app e menu lateral */
.app-shell{display:flex; align-items:flex-start;}
.app-main{flex:1; min-width:0;}
.sec-hidden{display:none !important;}

/* ---------- menu lateral ---------- */
.sidebar{
  width:280px; flex-shrink:0; align-self:stretch; position:sticky; top:0; height:100vh; z-index:50;
  background:var(--espresso); color:#F0E8D6;
  border-right:1px solid rgba(233,223,201,.08);
}
.side-scroll{height:100%; display:flex; flex-direction:column; padding:22px 16px 0;}

.side-brand{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:0;
  padding:0 8px 18px; margin-bottom:12px; position:relative;
}
.side-brand::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(185,148,90,.75) 50%, transparent);
}
.side-brand .brand-mark{width:auto; height:44px; display:block; margin-bottom:10px;}
.side-brand .name{font-family:var(--font-display); font-size:20px; font-weight:500; line-height:1.15; color:#fff; letter-spacing:.005em;}
.side-brand .role{margin-top:5px; font-size:11.5px; line-height:1.5; color:rgba(233,223,201,.62); display:flex; flex-direction:column; gap:1px;}
.side-brand .role span:first-child{color:rgba(233,223,201,.86); font-weight:600;}

/* Vistoria · Laudo · Orçamento */
.side-switch{display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin-bottom:14px; border-radius:13px; background:rgba(255,255,255,.045);}
.view-tab{
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px 8px; border:0; border-radius:10px;
  background:transparent; color:rgba(233,223,201,.6); font:600 11.5px/1 var(--font-ui); cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.view-tab .ic{width:19px; height:19px;}
.view-tab:hover{color:#fff; background:rgba(255,255,255,.05);}
.view-tab.active{color:#F6ECD3; background:rgba(176,141,87,.2); box-shadow:inset 0 0 0 1px rgba(201,168,104,.45);}
.view-tab.active .ic{color:#D2B074;}

/* seções — a lista rola sozinha; as ações ficam sempre visíveis embaixo */
.side-nav{flex:1; min-height:0; overflow-y:auto; margin:0 -6px; padding:0 6px 10px; display:flex; flex-direction:column; gap:1px;}
.side-nav::-webkit-scrollbar{width:5px;}
.side-nav::-webkit-scrollbar-thumb{background:rgba(233,223,201,.16); border-radius:3px;}
.side-link{
  position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:36px; padding:7px 12px; border:0; border-radius:10px;
  background:transparent; color:rgba(240,232,214,.66); font:500 13.5px/1.25 var(--font-ui); text-align:left; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.side-link .ic{width:18px; height:18px; flex-shrink:0; opacity:.9;}
.side-link:hover{background:rgba(255,255,255,.05); color:#fff;}
.side-link.active{background:rgba(176,141,87,.15); color:#F6ECD3; font-weight:600;}
.side-link.active .ic{color:#D2B074; opacity:1;}
.side-link.active::before{content:""; position:absolute; left:-6px; top:11px; bottom:11px; width:3px; border-radius:2px; background:var(--gold);}
.side-link .sl-badge{margin-left:auto; min-width:22px; text-align:center; padding:2px 7px; border-radius:999px; background:rgba(233,223,201,.12); color:#E9DFC9; font-size:11px; font-weight:700;}

/* rodapé do menu */
.side-foot{padding:14px 0 18px; border-top:1px solid rgba(233,223,201,.09); display:flex; flex-direction:column; gap:10px;}
.side-foot .btn-block{width:100%; justify-content:center;}
.side-tools{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.side-tools .vistorias-wrap{display:contents;}
.side-tools-duo{display:contents;}
.side-btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:52px; padding:8px 2px 7px; border:0; border-radius:10px;
  background:rgba(255,255,255,.04); color:rgba(240,232,214,.74); font:600 10.5px/1.1 var(--font-ui); text-align:center; cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.side-btn .ic{width:18px; height:18px; opacity:.9;}
.side-btn:hover{background:rgba(255,255,255,.09); color:#fff;}
.side-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:6px;}
.side-stats .ss-row{
  display:flex; align-items:center; justify-content:center; gap:7px; padding:7px 4px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.045); color:#F0E8D6; font-size:12px; transition:background .15s ease;
}
.side-stats .ss-row:hover{background:rgba(255,255,255,.09);}
.side-stats .ss-row b{font-weight:700; font-variant-numeric:tabular-nums;}

/* painel "Vistorias salvas" abre ao lado do menu */
.side-foot .vistorias-panel{position:fixed; left:296px; bottom:20px; top:auto; right:auto; width:340px; max-height:calc(100vh - 40px); z-index:80;}
.vistorias-panel .btn-ghost{background:#fff; border:1px solid var(--line); color:var(--ink);}
.vistorias-panel .btn-ghost:hover{background:var(--paper); color:var(--ink);}

.sidebar-toggle{
  display:none; position:fixed; left:14px; bottom:18px; z-index:70; width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(233,223,201,.2); background:var(--espresso); color:#E9DFC9; cursor:pointer;
  align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.sidebar-toggle .ic{width:22px; height:22px;}

@media (max-width:900px){
  .sidebar{position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .25s ease; box-shadow:8px 0 32px rgba(0,0,0,.35);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-toggle{display:flex;}
  .side-foot .vistorias-panel{left:14px; bottom:80px; width:calc(100vw - 28px); max-width:340px;}
}

/* com o menu aberto no celular, o botão vira "fechar" no canto de cima */
@media (max-width:900px){
  .sidebar.open + .sidebar-toggle{left:auto; right:14px; bottom:auto; top:14px;}
}