/* V20: bloqueia a largura visual no viewport e corrige o eixo do gráfico real. */
html,body{width:100%!important;max-width:100vw!important;overflow-x:hidden!important}
#root,.app,.content,main{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}

/* Desktop: a largura do conteúdo precisa descontar a barra lateral fixa.
   Sem isso, width:100% + margin-left empurra a última coluna para fora da tela. */
@media (min-width:1101px){
  .content{
    margin-left:245px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
}
@media (min-width:701px) and (max-width:1100px){
  .content{
    margin-left:80px!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
  }
}

/* Os componentes internos também precisam poder encolher. Grid com 1fr puro
   respeita a largura mínima do conteúdo e pode empurrar a última coluna. */
.content>*{min-width:0!important;max-width:100%!important}
.content>header,.header-actions{min-width:0!important;max-width:100%!important}
.metrics{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.metrics article{min-width:0!important;overflow:hidden}
.metrics h2{font-size:clamp(17px,1.55vw,22px)!important;white-space:nowrap}

/* IPTV possui controles mais largos que os cards comuns. Impedir que o
   conteúdo mínimo dos cinco indicadores e dos botões alargue o painel. */
.iptv-panel,.iptv-stock-banner,.iptv-metrics,.iptv-list{width:100%!important;max-width:100%!important;min-width:0!important}
.iptv-stock-banner{grid-template-columns:220px minmax(0,1fr)!important}
.iptv-metrics-five{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.iptv-metrics>div,.iptv-list>div,.iptv-list>div>*{min-width:0!important}
.iptv-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.iptv-list>div{grid-template-columns:auto minmax(0,1fr) auto auto auto!important}
.iptv-list b,.iptv-list small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (min-width:701px) and (max-width:1500px){
  .iptv-metrics-five{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .iptv-list{grid-template-columns:1fr!important}
}

@media (min-width:701px) and (max-width:980px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
.panel,.real-flow-panel,.real-flow-chart{min-width:0!important;max-width:100%!important}
.real-flow-chart{width:100%!important;overflow:hidden!important;contain:layout paint}
.real-flow-chart svg{display:block;width:100%!important;max-width:100%!important;overflow:hidden!important}
.real-flow-labels{left:20px!important;right:20px!important;width:auto!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:center;overflow:hidden!important}
.real-flow-labels span{position:static!important;left:auto!important;transform:none!important;min-width:0;text-align:center}
.real-flow-labels span:first-child{text-align:left}
.real-flow-labels span:last-child{text-align:right}

@media(max-width:700px){
  body{position:relative;touch-action:pan-y;overscroll-behavior-x:none}
  .content{margin-left:0!important;width:auto!important;max-width:100vw!important}
  #root,.app,.content,main,.panel,.real-flow-panel{max-width:100vw!important;overflow-x:hidden!important}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .iptv-stock-banner,.iptv-metrics-five,.iptv-list{grid-template-columns:1fr!important}
  .iptv-list>div{grid-template-columns:auto minmax(0,1fr) auto!important}
  .sidebar nav{width:100%!important;max-width:100%!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;overflow:hidden!important}
  .sidebar nav button{min-width:0!important;max-width:100%!important;padding-left:2px!important;padding-right:2px!important;overflow:hidden!important;white-space:normal!important}
  .sidebar nav button>span+*{min-width:0!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis}
  .real-flow-labels{left:12px!important;right:12px!important}
  .content>header{position:relative!important;padding-right:0!important}
  .mobile-profile-v21{display:block;position:relative;min-width:0;z-index:120}
  .mobile-profile-trigger-v21{width:100%!important;height:54px!important;margin:0!important;padding:5px 2px!important;border:0!important;border-radius:10px;background:transparent!important;color:#969aa4!important;line-height:1;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px}
  .mobile-profile-trigger-v21>span{color:#d9ad4c;font-size:17px!important;letter-spacing:2px;line-height:14px}
  .mobile-profile-trigger-v21>small{color:#969aa4!important;font-size:8px!important;font-weight:400!important;letter-spacing:0}
  .mobile-profile-menu-v21{display:none;position:fixed;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:9999;width:230px;padding:7px;border:1px solid #3b3528;border-radius:11px;background:#111215;box-shadow:0 18px 50px #000c}
  .mobile-profile-menu-v21.open{display:block}
  .mobile-profile-menu-v21 button{width:100%;min-height:54px;margin:0;padding:10px 12px;border:0;border-radius:8px;background:transparent;color:#f0ede5;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px}
  .mobile-profile-menu-v21 span{font-size:13px;font-weight:700}
  .mobile-profile-menu-v21 small{font-size:10px;color:#858a93}
}
@media(min-width:701px){.mobile-profile-v21,.mobile-profile-menu-v21{display:none!important}}