/* ============================================================
   BOX BOY WEB V5.1.9 — navegação inicial, sidebar overlay e KPIs
   Escopo apenas de interface. Backend/API/banco não são alterados.
   ============================================================ */

/* ---------- Sidebar: abre SOBRE o conteúdo, sem empurrar a página ---------- */
.app-shell,
.app-shell:not(.sidebar-collapsed),
.app-shell.sidebar-collapsed{
  display:block!important;
  width:100%!important;
  min-height:100vh;
}

.sidebar.sidebar-v518{
  position:fixed!important;
  inset:0 auto 0 0!important;
  width:248px!important;
  max-width:calc(100vw - 24px);
  height:100dvh!important;
  z-index:4200!important;
  box-shadow:18px 0 46px rgba(0,0,0,.38)!important;
}
.app-shell.sidebar-collapsed .sidebar.sidebar-v518{display:none!important}
.main-content,
.main-content.wrap{
  width:100%!important;
  max-width:1500px;
  margin-inline:auto!important;
}

/* Cabeçalho: mantém somente título/menu e usa a linha azul da identidade. */
.main-content > .top{
  grid-template-columns:minmax(0,1fr)!important;
  min-height:62px;
  padding-bottom:10px;
  margin-bottom:14px;
  border-bottom:1px solid rgba(72,139,181,.46)!important;
}
.main-content > .top .user-tools{display:none!important}

/* ---------- Chevron oficial recebido: mesma forma, cor contextual ---------- */
.sidebar-v518 .nav-group-title .group-arrow,
#ordersPanelPage .orders-group-arrow,
#ordersPanelPage .orders-status-menu > summary > span:last-child,
#ordersPanelPage .bb-card-expand::before{
  -webkit-mask:url('/assets/chevron-v519.png') center/contain no-repeat;
  mask:url('/assets/chevron-v519.png') center/contain no-repeat;
  background:currentColor;
}

.sidebar-v518 .nav-group-title .group-arrow{
  display:block;
  width:10px;
  height:7px;
  flex:0 0 10px;
  font-size:0!important;
  transform:none;
  transition:transform .16s ease;
}
.sidebar-v518 .nav-group.open .group-arrow{transform:rotate(180deg)}

#ordersPanelPage .orders-group-arrow{
  display:block;
  width:12px;
  height:8px;
  font-size:0!important;
  color:#221608;
  transform:rotate(180deg);
  transition:transform .15s ease;
}
#ordersPanelPage .orders-group.collapsed .orders-group-arrow{transform:none}

#ordersPanelPage .orders-status-menu > summary > span:last-child{
  display:inline-block;
  width:9px;
  height:6px;
  margin-left:4px;
  font-size:0!important;
  color:currentColor;
  vertical-align:middle;
  transition:transform .15s ease;
}
#ordersPanelPage .orders-status-menu[open] > summary > span:last-child{transform:rotate(180deg)}

#ordersPanelPage .bb-card-expand{
  font-size:0!important;
}
#ordersPanelPage .bb-card-expand::before{
  content:"";
  display:block;
  width:9px;
  height:6px;
  color:#d9e3e9;
  transition:transform .15s ease;
}
#ordersPanelPage .bb-card-expand[aria-expanded="true"]::before{transform:rotate(180deg)}

/* ---------- Dashboard: 8 indicadores em uma linha no desktop ---------- */
#dashboardKpis{
  grid-template-columns:repeat(8,minmax(0,1fr))!important;
  gap:7px!important;
  margin:9px 0 11px!important;
}
#dashboardKpis .kpi{
  min-width:0;
  min-height:82px;
  padding:10px 34px 9px 11px!important;
  border-radius:12px;
}
#dashboardKpis .kpi .label{
  font-size:7.5px;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#dashboardKpis .kpi .value{
  margin-top:6px;
  font-size:19px!important;
  line-height:1.02;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#dashboardKpis .kpi .hint{
  margin-top:3px;
  font-size:8px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#dashboardKpis .kpi-eye{
  top:7px;
  right:7px;
  width:23px;
  height:23px;
  min-width:23px;
  border-radius:7px;
  font-size:11px;
}
#dashboardKpis .kpi.system-kpi.kpi-hidden::after{
  left:11px;
  right:32px;
  font-size:9px;
}

@media(max-width:1180px) and (min-width:761px){
  #dashboardKpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Mobile: sidebar também é overlay e não vira bloco empilhado. */
@media(max-width:760px){
  .sidebar.sidebar-v518{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(278px,calc(100vw - 22px))!important;
    height:100dvh!important;
    padding:10px 10px 12px!important;
    overflow:hidden!important;
    border-right:1px solid rgba(127,171,198,.2)!important;
    border-bottom:0!important;
  }
  .app-shell.sidebar-collapsed .sidebar.sidebar-v518{display:none!important}
  .sidebar-v518 .sidebar-brand-row.sidebar-brand-v518{
    height:62px!important;
    min-height:62px!important;
    margin-bottom:6px!important;
  }
  .sidebar-v518 .sidebar-brand-lockup{justify-content:flex-start!important}
  .sidebar-v518 .sidebar-nav-v518{overflow-y:auto!important;min-height:0!important}
  .sidebar-v518 .sidebar-foot.sidebar-user-v518{display:grid!important}

  #dashboardKpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #dashboardKpis .kpi{min-height:86px!important}
}

/* Botão interno de recolher: necessário porque o menu agora sobrepõe o header. */
.sidebar-v518 .sidebar-brand-row.sidebar-brand-v518{position:relative;padding-right:34px}
.sidebar-overlay-close{
  position:absolute;
  right:2px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  padding:0;
  border:1px solid rgba(115,168,202,.18);
  border-radius:8px;
  background:rgba(255,255,255,.025);
  color:#8fb7d3;
  display:grid;
  place-items:center;
}
.sidebar-overlay-close:hover{color:#ff9d40;border-color:rgba(255,157,64,.34);background:rgba(255,157,64,.06)}
.sidebar-overlay-close span{
  width:9px;
  height:13px;
  display:block;
  background:currentColor;
  -webkit-mask:url('/assets/chevron-v519.png') center/contain no-repeat;
  mask:url('/assets/chevron-v519.png') center/contain no-repeat;
  transform:rotate(90deg);
}

/* Mantém exatamente a mesma largura/posição do conteúdo com menu aberto ou fechado. */
.app-shell .main-content.wrap,
.app-shell.sidebar-collapsed .main-content.wrap,
.app-shell:not(.sidebar-collapsed) .main-content.wrap{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}