/* Ajustes finais de viewport e responsividade mobile. */
:root{
  --app-height:100dvh;
}

html,body{
  width:100%;
  max-width:100%;
  min-height:100%;
  overflow-x:hidden;
  overscroll-behavior-x:none;
}

body{
  min-height:var(--app-height);
}

img,svg,canvas{
  max-width:100%;
}

button,input,select,textarea{
  min-width:0;
  max-width:100%;
}

.login-view,
.app-view{
  width:100%;
  min-width:0;
  min-height:var(--app-height);
}

.app-view,
.page,
.page>*,
.welcome>*,
.page-heading>*,
.hero-card>*,
.section-title>*,
.summary-grid>*,
.status-panels>*,
.general-kpis>*,
.monitor-stats>*,
.menu-grid>*,
.quick-grid>*,
.module-options>*,
.mobile-form>*,
.general-filters>*,
.indicator-content>*,
.indicator-kpis>*,
.leader-grid>*,
.donut-layout>*{
  min-width:0;
  max-width:100%;
}

.summary-grid,
.status-panels,
.general-kpis,
.monitor-stats,
.menu-grid,
.quick-grid,
.mobile-form,
.general-filters,
.indicator-kpis,
.leader-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.bottom-nav{
  width:min(100%,760px);
  max-width:100%;
}

.toast{
  width:max-content;
  max-width:calc(100% - 28px);
  text-align:center;
}

.indicator-table-wrap,
.chips{
  max-width:100%;
  scrollbar-width:none;
}

.indicator-table-wrap::-webkit-scrollbar,
.chips::-webkit-scrollbar{
  display:none;
}

.operation-card .value{
  min-width:0;
  flex:0 1 auto;
}

.page-heading h1,
.welcome h1,
.module-options b,
.module-options small,
.menu-item b,
.menu-item small,
.card-copy b,
.card-copy span,
.card-copy small{
  overflow-wrap:anywhere;
}

@media(max-width:699px){
  .login-view{
    min-height:var(--app-height);
    padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
    align-content:center;
    gap:20px;
  }

  .login-logo{
    width:min(58vw,220px);
  }

  .login-card{
    padding:22px;
    border-radius:22px;
  }

  .app-view{
    min-height:var(--app-height);
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
  }

  .topbar{
    height:64px;
    padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));
  }

  .page{
    width:100%;
    padding:18px 14px;
  }

  .page-heading,
  .welcome{
    gap:10px;
  }

  .page-heading h1,
  .welcome h1,
  .login-card h1{
    font-size:clamp(22px,7vw,27px);
  }

  .hero-card{
    padding:18px;
  }

  .hero-visual{
    flex:0 0 54px;
  }

  .general-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .bottom-nav{
    left:0;
    right:0;
    transform:none;
    height:calc(70px + env(safe-area-inset-bottom));
    padding:6px max(6px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px,env(safe-area-inset-left));
  }

  .bottom-nav button{
    min-width:0;
    padding-inline:2px;
  }

  .bottom-nav button span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

@media(max-width:420px){
  .welcome,
  .page-heading{
    flex-wrap:wrap;
  }

  .welcome>.badge,
  .page-heading>.filter-button,
  .page-heading>.live{
    flex:none;
  }

  .status-panels,
  .menu-grid,
  .mobile-form,
  .general-filters,
  .leader-grid{
    grid-template-columns:minmax(0,1fr);
  }

  .general-filters label,
  .general-filters label:nth-child(3),
  .general-filters button,
  .mobile-form label,
  .form-actions{
    grid-column:1;
  }

  .quick-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }

  .quick-grid i{
    width:40px;
    height:40px;
  }

  .monitor-stats{
    gap:5px;
  }

  .monitor-stats div{
    padding:11px 4px;
  }

  .donut-layout{
    grid-template-columns:minmax(0,1fr);
    justify-items:center;
  }

  .donut-legend{
    width:100%;
  }

  .alert-card,
  .operation-card,
  .monitor-card{
    padding:12px;
    gap:9px;
  }
}

@media(max-width:340px){
  .page{
    padding-inline:10px;
  }

  .header-logo{
    width:110px;
  }

  .icon-button,
  .avatar{
    width:36px;
    height:36px;
  }

  .summary-grid,
  .indicator-kpis{
    grid-template-columns:minmax(0,1fr);
  }

  .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:12px;
  }

  .bottom-nav button{
    font-size:8px;
  }

  .bottom-nav button i{
    font-size:18px;
  }
}

@media(max-height:700px) and (max-width:699px){
  .login-view{
    align-content:start;
    gap:12px;
  }

  .login-brand p,
  .login-card>.muted,
  .login-card>small{
    display:none;
  }

  .login-card label{
    margin-top:12px;
  }

  .login-card input:not([type=checkbox]){
    padding:12px;
  }
}

@supports not (height:100dvh){
  :root{--app-height:100vh}
}