/* AG CRM V78 — experiência mobile nativa e menu corrigido */
@media (max-width: 900px){
  :root{
    --ag-mobile-nav-h:64px;
    --ag-mobile-header:#ffffff;
    --ag-mobile-bg:#f7f8fa;
    --ag-mobile-line:rgba(20,37,63,.10);
  }

  html,body{overflow-x:hidden!important;background:var(--ag-mobile-bg)!important}
  body{padding:0!important}
  /* O z-index antigo da .app prendia o drawer abaixo do backdrop e deixava o menu borrado. */
  .app{position:relative!important;z-index:auto!important;isolation:auto!important;overflow:visible!important}
  .main{
    width:100%!important;
    max-width:100%!important;
    padding:0 12px calc(var(--ag-mobile-nav-h) + 28px + env(safe-area-inset-bottom,0px))!important;
    overflow-x:hidden!important;
  }

  /* Header enxuto: menu + busca + criar. */
  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px!important;
    align-items:center!important;
    gap:7px!important;
    min-height:58px!important;
    height:auto!important;
    margin:0 -12px 12px!important;
    padding:calc(7px + env(safe-area-inset-top,0px)) 12px 7px!important;
    background:rgba(255,255,255,.97)!important;
    border-bottom:1px solid var(--ag-mobile-line)!important;
    box-shadow:0 3px 12px rgba(20,37,63,.035)!important;
    backdrop-filter:saturate(1.2) blur(12px)!important;
    -webkit-backdrop-filter:saturate(1.2) blur(12px)!important;
  }
  #mobileMenu.mobile-menu,
  .top-actions .btn.primary{
    width:40px!important;
    min-width:40px!important;
    height:40px!important;
    min-height:40px!important;
    margin:0!important;
    padding:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    box-shadow:none!important;
  }
  #mobileMenu.mobile-menu{
    background:#fff!important;
    color:#14253f!important;
    border:1px solid rgba(20,37,63,.13)!important;
  }
  #mobileMenu.mobile-menu:before{font-size:18px!important;color:#14253f!important}
  .top-actions{display:grid!important;place-items:center!important;width:40px!important;min-width:40px!important}
  .top-actions .btn.primary{
    background:#14253f!important;
    border:1px solid #14253f!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
  }
  .top-actions .btn.primary .new-label{display:none!important}
  .search{width:100%!important;min-width:0!important;margin:0!important}
  .search input{
    width:100%!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px 0 36px!important;
    border-radius:12px!important;
    border:1px solid rgba(20,37,63,.10)!important;
    background:#f5f6f8!important;
    color:#14253f!important;
    font-size:16px!important;
    box-shadow:none!important;
  }
  .search:before{left:12px!important;top:11px!important;font-size:13px!important;color:#758094!important}
  .search-key{display:none!important}

  /* Dashboard mais compacto e escaneável. */
  .dashboard-intro,.page-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin:4px 0 14px!important;
  }
  .eyebrow,.v5-kicker{
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.08em!important;
  }
  .eyebrow:before{width:7px!important;height:7px!important}
  .dashboard-intro h1,.page-head h1{
    margin:7px 0 0!important;
    max-width:100%!important;
    font-size:28px!important;
    line-height:1.05!important;
    letter-spacing:-.035em!important;
    overflow-wrap:anywhere!important;
  }
  .dashboard-intro h1 em{
    display:block!important;
    margin:4px 0 0!important;
    font-size:.82em!important;
    line-height:1.08!important;
    color:#7c817a!important;
  }
  .intro-actions,.head-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
  }
  .intro-actions .btn,.head-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    font-size:11px!important;
    line-height:1.2!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .dashboard-stage{gap:10px!important}
  .operation-pulse{
    min-height:176px!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  .pulse-label{font-size:11px!important}
  .pulse-value{font-size:44px!important;line-height:1!important;margin-top:10px!important}
  .pulse-caption{font-size:13px!important;line-height:1.25!important}
  .pulse-bottom{margin-top:12px!important;padding-top:12px!important;gap:8px!important}
  .pulse-note{font-size:11px!important;line-height:1.45!important}
  .pulse-chip{font-size:10px!important;min-height:34px!important;padding:0 11px!important}
  .spotlight{min-height:240px!important;border-radius:18px!important}
  .spotlight-top{top:12px!important;left:12px!important;right:12px!important}
  .spotlight-copy{left:16px!important;right:16px!important;bottom:16px!important}
  .spotlight-copy h3{font-size:24px!important;margin:7px 0 9px!important}
  .spotlight-meta{gap:8px!important;align-items:flex-start!important;flex-direction:column!important}

  .kpis{gap:8px!important}
  .kpi{min-height:100px!important;padding:12px!important;border-radius:15px!important}
  .kpi strong{font-size:24px!important}
  .kpi span,.kpi small{font-size:10px!important}

  /* Tab bar nativa: não cobre o conteúdo com uma grande cápsula flutuante. */
  #mobileBottom.mobile-bottom{
    position:fixed!important;
    z-index:160!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:calc(var(--ag-mobile-nav-h) + env(safe-area-inset-bottom,0px))!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:start!important;
    gap:0!important;
    margin:0!important;
    padding:5px 6px calc(5px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;
    border-top:1px solid rgba(20,37,63,.10)!important;
    border-radius:0!important;
    background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 24px rgba(20,37,63,.08)!important;
    backdrop-filter:saturate(1.15) blur(16px)!important;
    -webkit-backdrop-filter:saturate(1.15) blur(16px)!important;
    overflow:hidden!important;
    transition:transform .2s ease,opacity .2s ease!important;
  }
  #mobileBottom.mobile-bottom button{
    width:100%!important;
    min-width:0!important;
    min-height:52px!important;
    height:52px!important;
    margin:0!important;
    padding:5px 2px 3px!important;
    display:grid!important;
    place-items:center!important;
    align-content:center!important;
    gap:3px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#7c8592!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    box-shadow:none!important;
  }
  #mobileBottom.mobile-bottom button span{
    display:block!important;
    color:#7c8592!important;
    font-size:18px!important;
    line-height:1!important;
  }
  #mobileBottom.mobile-bottom button.active{
    background:#f1f4f7!important;
    color:#14253f!important;
  }
  #mobileBottom.mobile-bottom button.active span{color:#b88d46!important}
  #mobileBottom.mobile-bottom #mobileMoreBtn{color:#7c8592!important}
  body.drawer-open #mobileBottom.mobile-bottom{
    transform:translateY(115%)!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  /* Drawer: acima do backdrop, sem blur e com densidade de app. */
  #mobileDrawerBackdrop.mobile-drawer-backdrop{
    position:fixed!important;
    inset:0!important;
    z-index:980!important;
    background:rgba(4,12,24,.48)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .18s ease,visibility .18s ease!important;
  }
  #mobileDrawerBackdrop.mobile-drawer-backdrop.show{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  #sidebar.sidebar{
    position:fixed!important;
    z-index:1000!important;
    left:0!important;
    right:auto!important;
    top:0!important;
    bottom:0!important;
    width:min(304px,82vw)!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:0!important;
    border-radius:0 20px 20px 0!important;
    background:#14253f!important;
    box-shadow:none!important;
    transform:translate3d(-105%,0,0)!important;
    transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease!important;
    contain:none!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  #sidebar.sidebar.open{
    transform:translate3d(0,0,0)!important;
    box-shadow:20px 0 55px rgba(4,12,24,.30)!important;
  }
  #sidebar .brand.brand--with-logo{
    flex:0 0 auto!important;
    min-height:68px!important;
    width:100%!important;
    margin:0!important;
    padding:calc(10px + env(safe-area-inset-top,0px)) 52px 10px 14px!important;
    display:flex!important;
    align-items:center!important;
    border:0!important;
    border-bottom:1px solid rgba(255,255,255,.10)!important;
    background:#14253f!important;
  }
  #sidebar .brand-mark.logo-full img{
    width:88px!important;
    max-width:88px!important;
    max-height:44px!important;
    height:auto!important;
  }
  #sidebar .ag-mobile-drawer-close{
    width:36px!important;
    min-width:36px!important;
    height:36px!important;
    right:10px!important;
    border-radius:11px!important;
    font-size:22px!important;
    background:rgba(255,255,255,.08)!important;
  }
  #sidebar #sideNav.nav{
    flex:1 1 auto!important;
    min-height:0!important;
    width:100%!important;
    margin:0!important;
    padding:8px 8px 10px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  #sidebar #sideNav.nav::-webkit-scrollbar{display:none!important}
  #sidebar #sideNav.nav button,
  #sidebar #sideNav.nav .nav-heart{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:44px!important;
    margin:0!important;
    padding:0 11px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:10px!important;
    border:0!important;
    border-radius:11px!important;
    background:transparent!important;
    color:rgba(255,255,255,.80)!important;
    font-size:12px!important;
    font-weight:700!important;
    line-height:1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    box-shadow:none!important;
  }
  #sidebar #sideNav.nav button .ico,
  #sidebar #sideNav.nav .nav-heart .ico{
    flex:0 0 20px!important;
    width:20px!important;
    height:20px!important;
    color:#eac686!important;
  }
  #sidebar #sideNav.nav button .ico svg{width:19px!important;height:19px!important}
  #sidebar #sideNav.nav button.active,
  #sidebar #sideNav.nav .nav-heart.active{
    background:#fff!important;
    color:#14253f!important;
  }
  #sidebar #sideNav.nav button.active .ico,
  #sidebar #sideNav.nav .nav-heart.active .ico{color:#b88d46!important}
  #sidebar #sideNav.nav button .badge{
    margin-left:auto!important;
    min-width:20px!important;
    height:20px!important;
    padding:0 6px!important;
    font-size:9px!important;
  }
  #sidebar .sidebar-foot{
    position:static!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))!important;
    border:0!important;
    border-top:1px solid rgba(255,255,255,.10)!important;
    background:#14253f!important;
  }
  #sidebar .pwa-install-btn{min-height:40px!important;font-size:11px!important}
  #sidebar .user-mini{
    width:100%!important;
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr) 36px!important;
    gap:8px!important;
    padding:4px!important;
  }
  #sidebar .avatar{width:36px!important;height:36px!important;font-size:10px!important}
  #sidebar .user-mini b{font-size:11px!important}
  #sidebar .user-mini small{font-size:9px!important}
  #sidebar .logout-mini{width:36px!important;min-width:36px!important;height:36px!important}

  /* Conteúdo em geral: elementos nunca escapam da tela. */
  .page,.card,.card-body,.card-head,.toolbar,.property-card,.ag-access-card,
  .modal,.modal-body,.modal-foot,.pw-panel,.pw-summary,.pw-section,
  .dashboard-stage,.operation-pulse,.spotlight,.kpi{
    min-width:0!important;
    max-width:100%!important;
  }
  .page *{overflow-wrap:break-word}
  img,svg,canvas{max-width:100%}

  /* Command Center como sheet móvel. */
  .v25-command-center{
    align-items:flex-end!important;
    padding:0!important;
    background:rgba(4,12,24,.45)!important;
    backdrop-filter:none!important;
  }
  .v25-command-dialog{
    width:100%!important;
    max-width:100%!important;
    max-height:82dvh!important;
    border-radius:20px 20px 0 0!important;
  }
  .v25-command-search{min-height:60px!important;padding:10px 12px!important}
  .v25-command-search input{font-size:16px!important}
  .v25-command-footer{display:none!important}
}

@media(max-width:420px){
  .main{padding-left:10px!important;padding-right:10px!important}
  .topbar{margin-left:-10px!important;margin-right:-10px!important;padding-left:10px!important;padding-right:10px!important}
  .dashboard-intro h1,.page-head h1{font-size:26px!important}
  .intro-actions,.head-actions{grid-template-columns:1fr 1fr!important}
  #sidebar.sidebar{width:min(292px,86vw)!important}
}

@media(display-mode:standalone) and (max-width:900px){
  .topbar{padding-top:calc(7px + env(safe-area-inset-top,0px))!important}
  #mobileBottom.mobile-bottom{padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))!important}
}