/* NowBusiness — Etapa 23 · Responsividade e Mobile
 * Camada final e não destrutiva. Carregada após as camadas históricas.
 * Contrato: responsive-experience-v1.
 */
:root{
  --nb-responsive-gutter:clamp(12px,2.2vw,28px);
  --nb-touch-target:44px;
  --nb-safe-top:env(safe-area-inset-top,0px);
  --nb-safe-right:env(safe-area-inset-right,0px);
  --nb-safe-bottom:env(safe-area-inset-bottom,0px);
  --nb-safe-left:env(safe-area-inset-left,0px);
  --nb-mobile-gap:12px;
}

/* Nenhum conteúdo empresarial deve ampliar a viewport por acidente. */
html,body{max-inline-size:100%;}
body :where(main,section,article,aside,header,footer,nav,form,fieldset,div){min-inline-size:0;}
body :where(img,svg,video,canvas,iframe){max-inline-size:100%;}
body :where(img,video){block-size:auto;}
body :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){max-inline-size:100%;}

/* Áreas de ação podem quebrar linha sem perder comandos. */
body :where(.hero-actions,.card-actions,.table-actions,.form-actions,.form-footer,.filter-actions,.quick-actions-buttons,.center-modal-actions){
  flex-wrap:wrap;
  min-inline-size:0;
}
body :where(.hero-actions,.card-actions,.table-actions,.form-actions,.form-footer,.filter-actions) > *{max-inline-size:100%;}

/* Região de tabela acessível no desktop/tablet. No celular, o motor legado de cards continua soberano. */
.nb-responsive-table-region{
  max-inline-size:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.nb-responsive-table-region:focus-visible{outline:2px solid var(--nf-primary,#1861f1);outline-offset:3px;border-radius:12px;}
.nb-responsive-table-region > table{min-inline-size:100%;}

/* Texto longo nunca estoura cards, cabeçalhos ou células. */
body :where(.card,.metric-card,.module-hero,.dashboard-hero,.list-row,.table-wrap,.responsive-table) :where(p,small,strong,b,span,a,td,th){overflow-wrap:anywhere;}

/* Notebook / telas intermediárias. */
@media (max-width:1280px){
  body.nf-redesign .content{padding-inline:clamp(18px,2.4vw,26px);}
  body.nf-redesign :where(.grid-4,.dashboard-metrics,.nf-summary-tiles){grid-template-columns:repeat(2,minmax(0,1fr));}
  body.nf-redesign :where(.grid-3,.form-grid-3,.form-grid-4){grid-template-columns:repeat(2,minmax(0,1fr));}
  body.nf-redesign .filter-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.nf-redesign .filter-actions{align-self:end;}
}

/* Tablet: preservar densidade, mas retirar mínimos desktop. */
@media (max-width:1024px){
  body.nf-redesign :where(.dashboard-hero,.module-hero,.quick-actions-strip,.card-header,.settings-center-section-head){
    min-inline-size:0;
  }
  body.nf-redesign :where(.dashboard-hero,.module-hero){gap:16px;}
  body.nf-redesign :where(.dashboard-hero .hero-actions,.module-hero .hero-actions){justify-content:flex-start;}
  body.nf-redesign :where(.grid-3,.form-grid-3,.form-grid-4,.filter-grid){grid-template-columns:repeat(2,minmax(0,1fr));}
  body.nf-redesign :where(.form-card,.card,.module-hero,.dashboard-hero){max-inline-size:100%;}
  body.nf-redesign .table-wrap{max-inline-size:100%;}
}

/* Smartphone / tablet pequeno. */
@media (max-width:767px){
  :root{--nb-responsive-gutter:12px;--nb-mobile-gap:10px;}
  html{scroll-padding-top:72px;}
  body{inline-size:100%;}
  body.nf-redesign .content{
    inline-size:100%;
    max-inline-size:100%;
    padding-top:14px!important;
    padding-right:max(var(--nb-responsive-gutter),var(--nb-safe-right))!important;
    padding-left:max(var(--nb-responsive-gutter),var(--nb-safe-left))!important;
  }

  /* Não há funcionalidade importante escondida: ações mudam de formato, não somem. */
  body.nf-redesign :where(.grid-2,.grid-3,.grid-4,.form-grid,.form-grid-2,.form-grid-3,.form-grid-4,.filter-grid,.nb-detail-grid,.nb-detail-columns){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.nf-redesign :where(.form-grid-span-2,[class*="grid-span-"]){grid-column:1!important;}
  body.nf-redesign :where(.card,.module-hero,.dashboard-hero){padding:clamp(15px,4vw,20px);}
  body.nf-redesign :where(.card-header,.module-hero,.dashboard-hero,.quick-actions-strip){align-items:stretch;}
  body.nf-redesign :where(.card-header,.module-hero,.dashboard-hero){flex-direction:column;}
  body.nf-redesign :where(.card-header .hero-actions,.module-hero .hero-actions,.dashboard-hero .hero-actions,.form-footer){inline-size:100%;}

  /* Formulários com toque confortável e sem zoom automático no iOS. */
  body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
    inline-size:100%;
    min-inline-size:0;
    font-size:16px!important;
  }
  body :where(textarea){resize:vertical;}
  body :where(.btn,button:not(.icon-btn),input[type="button"],input[type="submit"]){min-block-size:var(--nb-touch-target);}
  body :where(.icon-btn,.topbar-icon-link,.nf-mobile-nav-item){min-inline-size:var(--nb-touch-target);min-block-size:var(--nb-touch-target);}

  body.nf-redesign :where(.form-footer,.center-modal-actions){display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
  body.nf-redesign :where(.form-footer,.center-modal-actions) :where(.btn,button,a.btn){inline-size:100%;}
  body.nf-redesign :where(.filter-actions){inline-size:100%;}
  body.nf-redesign :where(.filter-actions) :where(.btn,button,a.btn){flex:1 1 150px;}
  body.nf-redesign :where(.table-actions){gap:8px;}

  /* Tabelas cardificadas continuam completas e cada ação permanece tocável. */
  .nb-responsive-table-region{overflow:visible;}
  table.responsive-table{inline-size:100%!important;min-inline-size:0!important;}
  table.responsive-table tr{inline-size:100%;}
  table.responsive-table td{min-inline-size:0;}
  table.responsive-table td.actions-cell :where(.btn,button,a.btn,form){max-inline-size:100%;}

  /* Modais/drawers usam a viewport visual e não ficam atrás do teclado/dock. */
  body :where(.center-modal,.pwa-install-modal,.global-search-overlay-v2,.tutorial-modal){
    max-block-size:var(--nb-visual-viewport-height,100dvh);
  }
  body :where(.center-modal-card,.pwa-install-dialog,.global-search-dialog-v2,.tutorial-dialog){
    max-block-size:calc(var(--nb-visual-viewport-height,100dvh) - 20px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body :where(.page-help-drawer>section,.sidebar){padding-bottom:max(16px,var(--nb-safe-bottom));}

  /* Quando o teclado está aberto, o dock e os FABs cedem espaço ao campo ativo. */
  body.nb-keyboard-active :where(.nf-mobile-bottom-nav,.nowchat-support-fab,.page-help-fab,.contextual-intelligence){
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  body.nb-keyboard-active .content{
    padding-bottom:max(24px,calc(var(--nb-keyboard-inset,0px) + 20px))!important;
    scroll-padding-bottom:max(32px,calc(var(--nb-keyboard-inset,0px) + 28px))!important;
  }

  /* Chips/abas horizontais permanecem alcançáveis por swipe em vez de serem cortados. */
  body :where(.tabs,.settings-subnav,.profile-account-nav,.central-workspace-links,.global-search-source-filters){
    max-inline-size:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
}

/* Celular estreito. */
@media (max-width:480px){
  :root{--nb-responsive-gutter:10px;}
  body.nf-redesign :where(.card,.module-hero,.dashboard-hero){border-radius:18px!important;}
  body.nf-redesign :where(.card,.module-hero,.dashboard-hero,.quick-actions-strip){padding:14px!important;}
  body.nf-redesign :where(.hero-actions,.table-actions,.form-actions){gap:8px;}
  body.nf-redesign :where(.hero-actions,.form-actions) > :where(.btn,a.btn,button){flex:1 1 100%;inline-size:100%;}
  table.responsive-table td{grid-template-columns:minmax(84px,36%) minmax(0,1fr);gap:8px;padding-block:8px;}
  table.responsive-table td::before{font-size:10px;}
  body :where(.badge,.status-badge){max-inline-size:100%;white-space:normal;}
}

/* Paisagem baixa: conteúdo tem prioridade sobre chrome. */
@media (max-height:620px) and (orientation:landscape) and (max-width:1024px){
  body.nf-redesign .topbar{min-block-size:52px;block-size:52px;}
  body.nf-redesign .content{padding-top:10px!important;}
  body :where(.center-modal-card,.global-search-dialog-v2,.pwa-install-dialog){max-block-size:calc(var(--nb-visual-viewport-height,100dvh) - 12px);}
}

/* Touch: hover não pode ser requisito para acessar comandos. */
@media (hover:none),(pointer:coarse){
  body :where(.btn,.icon-btn,.topbar-icon-link,.sidebar-nav a,.nf-mobile-nav-item,summary){-webkit-tap-highlight-color:transparent;}
  body :where(.btn,.icon-btn,.topbar-icon-link,.nf-mobile-nav-item){touch-action:manipulation;}
  body :where([title]):focus-visible::after{display:none;}
}

/* Acessibilidade e preferência do sistema. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}