/* =========================================================
   PATCH PENTAGONO - RESPONSIVIDADE GLOBAL DA PLATAFORMA
   Camada segura para evitar cortes, estouro lateral e modais quebrados.
   ========================================================= */

html,
body{
  max-width:100vw !important;
  overflow-x:hidden !important;
}

*,
*::before,
*::after{
  box-sizing:border-box !important;
}

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

input,
select,
textarea,
button{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Área principal */
.conteudo,
.content,
.main,
.container,
.page,
.dashboard,
.wrapper{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Evita que cards e blocos estourem */
.card,
.card-premium,
.bloco,
.box,
.panel,
.modal-content,
.crm-resumo-card,
.carteira-card,
.metric-card,
.resumo-card{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Grids comuns mais flexíveis */
.grid,
.cards-grid,
.resumo-grid,
.dashboard-grid,
.form-grid,
.form-grid-2,
.form-grid-3,
.form-grid-4,
.topo-lead,
.toolbar,
.toolbar-crm,
.vendedor-toolbar{
  max-width:100% !important;
  box-sizing:border-box !important;
}

/* Tabelas com rolagem horizontal em vez de cortar */
table{
  max-width:100% !important;
}

.table-wrap,
.tabela-wrap,
.tabela-container,
.table-container{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
}

/* Quando uma tabela estiver solta, permite rolagem no pai visual */
section,
.card,
.bloco,
.panel{
  overflow-wrap:anywhere;
}

/* Modais globais */
.modal{
  max-width:100vw !important;
  max-height:100vh !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.modal.show{
  padding:10px !important;
  box-sizing:border-box !important;
}

.modal .modal-content,
.modal-content{
  max-width:calc(100vw - 20px) !important;
  max-height:calc(100vh - 20px) !important;
  overflow:auto !important;
  box-sizing:border-box !important;
}

/* Formulários */
form,
.form,
.formulario{
  max-width:100% !important;
}

.campo-bloco,
.form-group,
.field,
.input-group{
  min-width:0 !important;
  max-width:100% !important;
}

.campo-bloco input,
.campo-bloco select,
.campo-bloco textarea,
.form-group input,
.form-group select,
.form-group textarea{
  width:100% !important;
}

/* Select dark para evitar caixa branca */
select,
select option{
  background:#071225 !important;
  color:#eaf4ff !important;
  color-scheme:dark !important;
}

/* Toolbars quebram linha em telas menores */
.toolbar-crm,
.toolbar,
.filtros,
.filtros-rapidos,
.actions,
.row-actions{
  flex-wrap:wrap !important;
}

/* Botões não devem sumir para fora */
button,
.btn,
.icon-btn{
  white-space:nowrap;
}

/* Kanban e colunas com rolagem saudável */
.kanban{
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
}

.coluna{
  min-width:min(280px, 86vw) !important;
}

/* Responsividade intermediária */
@media(max-width:1366px){
  .conteudo{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .form-grid-4{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .form-grid-3{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  }

  .form-grid-2{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) !important;
  }

  .topo-lead{
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) !important;
  }
}

/* Tablets e notebooks menores */
@media(max-width:1100px){
  .conteudo{
    width:100vw !important;
    max-width:100vw !important;
    padding:14px !important;
  }

  .toolbar-crm input,
  .toolbar-crm select,
  .toolbar-crm button,
  .toolbar input,
  .toolbar select,
  .toolbar button{
    min-width:min(220px, 100%) !important;
    flex:1 1 220px !important;
  }

  .modal.show{
    padding:6px !important;
  }

  .modal .modal-content,
  .modal-content{
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100vh - 12px) !important;
  }
}

/* Celular */
@media(max-width:760px){
  body{
    overflow-x:hidden !important;
  }

  .conteudo{
    margin-left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    padding:12px !important;
  }

  h1{
    font-size:24px !important;
    line-height:1.15 !important;
  }

  h2{
    font-size:21px !important;
    line-height:1.15 !important;
  }

  .form-grid-4,
  .form-grid-3,
  .form-grid-2,
  .topo-lead,
  .produto-row{
    grid-template-columns:1fr !important;
  }

  .toolbar-crm,
  .toolbar,
  .filtros,
  .actions{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .toolbar-crm input,
  .toolbar-crm select,
  .toolbar-crm button,
  .toolbar input,
  .toolbar select,
  .toolbar button{
    width:100% !important;
    min-width:0 !important;
  }

  .modal.show{
    padding:4px !important;
  }

  .modal .modal-content,
  .modal-content{
    width:calc(100vw - 8px) !important;
    max-width:calc(100vw - 8px) !important;
    height:auto !important;
    max-height:calc(100vh - 8px) !important;
    padding:12px !important;
    border-radius:14px !important;
  }

  button,
  .btn,
  .icon-btn{
    min-height:40px;
  }
}

/* Telas muito pequenas */
@media(max-width:420px){
  .conteudo{
    padding:8px !important;
  }

  h1{
    font-size:21px !important;
  }

  .card,
  .bloco,
  .box,
  .panel{
    padding:10px !important;
  }
}

/* =========================================================
   PATCH PENTAGONO - TOPBAR APENAS CONTORNO DO USUARIO
   Remove a faixa grande atravessando a tela e mantém só o login.
   ========================================================= */

.topbar-premium{
  position:fixed !important;
  top:12px !important;
  right:18px !important;
  left:auto !important;

  width:auto !important;
  max-width:none !important;
  min-width:0 !important;

  height:auto !important;
  min-height:0 !important;
  max-height:none !important;

  padding:0 !important;
  margin:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;

  z-index:9998 !important;
  pointer-events:none !important;
}

/* Mantém apenas o botão/card do usuário clicável */
.topbar-premium .top-user-box,
.topbar-premium .user-box,
.topbar-premium [class*="user"]{
  pointer-events:auto !important;
}

/* Card do usuário no tamanho certo */
.top-user-box{
  width:180px !important;
  min-width:180px !important;
  max-width:180px !important;

  height:40px !important;
  min-height:40px !important;
  max-height:40px !important;

  padding:0 12px !important;
  border-radius:12px !important;

  background:
    radial-gradient(circle at top left, rgba(34,211,238,.18), transparent 42%),
    linear-gradient(135deg, rgba(15,35,70,.94), rgba(17,24,55,.94)) !important;

  border:1px solid rgba(96,165,250,.32) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.30),
    0 0 18px rgba(34,211,238,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Evita que qualquer pseudo-elemento da topbar crie faixa */
.topbar-premium::before,
.topbar-premium::after{
  display:none !important;
  content:none !important;
}

/* Em telas menores, aproxima um pouco */
@media(max-width:760px){
  .topbar-premium{
    top:8px !important;
    right:8px !important;
  }

  .top-user-box{
    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;
  }
}