/* KAIZUKA MOBILE SYSTEM — V31.12
   Padrão compartilhado do ecossistema em telas até 700px.
   Desktop permanece inalterado. */

@media(max-width:700px){
  html,body{
    max-width:100%;
    overflow-x:hidden;
  }

  body{
    -webkit-text-size-adjust:100%;
  }

  /* Shell / cabeçalhos globais */
  header,
  .app-header,
  .topbar,
  .saas-header,
  .kaizuka-header{
    max-width:100%;
  }

  .container,
  .wrap,
  .shell,
  .page-wrap,
  .content-wrap,
  .content,
  main{
    max-width:100%;
    min-width:0;
  }

  /* Evita "desktop espremido" */
  .grid,
  .layout,
  .columns,
  .three-columns,
  .two-columns,
  .saas-profile-grid,
  .community-layout,
  .condo-layout{
    min-width:0;
  }

  /* Cards mais densos */
  .card,
  .panel,
  .box,
  .saas-card,
  .surface{
    box-sizing:border-box;
    max-width:100%;
  }

  /* Formulários confortáveis no toque */
  input,
  select,
  textarea{
    max-width:100%;
    font-size:16px;
  }

  button,
  a.btn,
  .btn{
    touch-action:manipulation;
  }

  /* Imagens e avatares nunca estouram */
  img,
  video,
  canvas{
    max-width:100%;
  }

  /* Tabelas ficam locais e roláveis */
  .table-wrap,
  .table-container,
  .responsive-table{
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* textos grandes recuam no mobile */
  h1{font-size:clamp(24px,7vw,32px)}
  h2{font-size:clamp(20px,6vw,27px)}
  h3{font-size:clamp(17px,5vw,22px)}

  /* navegação superior não pode criar largura extra */
  nav{
    max-width:100%;
  }

  /* páginas sociais: uma coluna real no mobile */
  .saas-profile-grid,
  .profile-grid,
  .main-layout-container,
  .community-grid,
  .condo-grid,
  .portal-grid{
    grid-template-columns:1fr!important;
    flex-direction:column!important;
  }

  .saas-left-column,
  .saas-center-column,
  .saas-right-column,
  .sidebar-perfil-coluna,
  .feed-central-coluna,
  .sidebar-direita-coluna{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    position:static!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    margin-left:0!important;
    margin-right:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  /* Messenger: preserva arquitetura contatos -> conversa */
  body.messenger-page .app,
  .messenger-app{
    max-width:100%;
    overflow:hidden;
  }

  /* blocos de ações quebram linha em vez de estourar */
  .actions,
  .toolbar,
  .button-row,
  .buttons,
  .page-actions,
  .header-actions{
    flex-wrap:wrap;
    max-width:100%;
  }

  /* Modal sempre cabe no viewport */
  dialog,
  .modal,
  .modal-card,
  .sheet{
    max-width:calc(100vw - 20px)!important;
    box-sizing:border-box;
  }

  /* banners e hero não podem consumir metade da tela */
  .hero,
  .banner,
  .welcome,
  .hero-card{
    max-width:100%;
  }
}