@media(max-width:900px){.grid-4,.grid-3,.grid-2,.form-grid{grid-template-columns:1fr}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.sidebar-overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:25}.main-content{margin-left:0}.mobile-header{display:flex}.app-main{padding:18px}.row{align-items:flex-start;flex-direction:column}.toast{left:18px;right:18px}}

@media (max-width:768px){.floating-logout{right:14px;bottom:14px;width:40px;height:40px}.access-card{padding:24px;border-radius:24px}.access-options{align-items:flex-start}.grid-2,.grid-3,.grid-4,.form-grid{grid-template-columns:1fr}}


/* UX/UI premium refinements */

@media(max-width:640px){.card-glass,.panel-card{border-radius:18px!important;padding:16px!important}.metric-number{font-size:1.9rem!important}.sidebar-link{min-height:40px}.modal,.access-card,.checkout-modal{width:calc(100vw - 24px)!important;max-height:calc(100vh - 24px);overflow:auto}.hide-mobile-overflow{overflow:hidden}}

/* Dashboard horizontal: cards sempre alinhados em linha no desktop */
#app-main .dashboard-kpis.grid-4,
#app-main section .dashboard-kpis.grid-4{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  gap:18px!important;
}
#app-main .dashboard-user-kpis.grid-3,
#app-main section .dashboard-user-kpis.grid-3{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  align-items:stretch!important;
  gap:18px!important;
}
#app-main .dashboard-kpis .card,
#app-main .dashboard-user-kpis .card,
#app-main .kpi-card,
#app-main .user-kpi-card{
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
}
@media(max-width:1100px){
  #app-main .dashboard-kpis.grid-4,
  #app-main section .dashboard-kpis.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:760px){
  #app-main .dashboard-kpis.grid-4,
  #app-main section .dashboard-kpis.grid-4,
  #app-main .dashboard-user-kpis.grid-3,
  #app-main section .dashboard-user-kpis.grid-3{grid-template-columns:1fr!important;}
}

/* Dashboard: reforço contra desalinhamento de margens dentro do grid */
#app-main .dashboard-kpis > .card + .card,
#app-main .dashboard-user-kpis > .card + .card{margin-top:0!important;}

/* Reforço final: nenhum card dentro do dashboard recebe margem lateral/vertical automática. */
#app-main .dashboard-metrics-grid > .card + .card, #app-main .dashboard-user-metrics-grid > .card + .card{margin:0!important;}


/* Remover título Comunidade Network do cabeçalho no mobile */
@media (max-width: 768px){
    .app-header-logo,
    .header-logo,
    .header-brand,
    .mobile-header-title,
    .mobile-brand,
    .sidebar-brand-mobile,
    .topbar-title,
    .navbar-brand,
    [class*="brand"],
    [class*="logo-text"]{
        display:none !important;
    }

    .app-header,
    .mobile-header{
        justify-content:space-between !important;
    }
}


/* Correção precisa: esconder somente o título do cabeçalho superior no mobile */
@media (max-width: 900px){
  .main-content > .mobile-header > strong,
  .main-content > header.mobile-header > strong,
  header.mobile-header strong:not(#app-title){
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .main-content > .mobile-header{
    justify-content: space-between !important;
    gap: 10px !important;
  }
}


/* Manter logo e título dentro do menu lateral mobile */
@media (max-width:900px){
  #sidebar .brand-row,
  .sidebar .brand-row,
  #sidebar #app-title,
  .sidebar #app-title,
  #sidebar .brand-mark,
  .sidebar .brand-mark{
      display:flex !important;
      visibility:visible !important;
      opacity:1 !important;
  }

  #sidebar #app-title{
      width:auto !important;
      max-width:none !important;
      overflow:visible !important;
  }
}