/* FC Grupo — correções de viewport e conteúdo cortado — 2026-08-21
   Carregado por último para corrigir layout sem reescrever o tema existente. */

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

body:not(.modal-open) {
  overflow-y: auto;
}

#app-view {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.page-shell,
.role-panel,
.tab-panel,
.panel-card {
  min-width: 0;
  height: auto;
}

.page-shell,
.role-panel,
.tab-panel {
  max-height: none;
  overflow: visible;
}

.page-shell {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Itens de grid/flex nunca devem forçar a página além da viewport. */
.grid-two > *,
.metrics-grid > *,
.registration-grid > *,
.form-grid > *,
.conversation-shell > *,
.details-summary > *,
.pass-grid > * {
  min-width: 0;
}

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

/* Modais: o backdrop pode rolar e o conteúdo interno continua rolável. */
.modal-backdrop:not([hidden]) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  align-items: flex-start;
  padding: 18px;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop:not([hidden]) > .modal {
  width: min(100%, 680px);
  max-width: 100%;
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px);
  margin: auto;
}

.modal-backdrop:not([hidden]) > .modal-wide {
  width: min(1040px, 100%);
}

.modal-backdrop:not([hidden]) > .pass-modal {
  width: min(780px, 100%);
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.printable-pass,
.pass-summary,
.pass-grid,
.pass-box,
.pass-rules {
  min-width: 0;
  max-width: 100%;
}

/* Áreas que podem crescer não devem ser recortadas por ancestrais. */
.card-list,
.host-conversation-area,
.rules-editor-form,
.form-sections {
  height: auto;
  max-width: 100%;
}

@media (max-width: 720px) {
  .modal-backdrop:not([hidden]) {
    padding: 0;
    overflow: hidden !important;
    align-items: stretch;
  }

  .modal-backdrop:not([hidden]) > .modal,
  .modal-backdrop:not([hidden]) > .modal-wide,
  .modal-backdrop:not([hidden]) > .pass-modal {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .page-shell {
    margin-bottom: 36px;
  }
}

/* Morador mobile-first: ações de hospedagem em páginas próprias */
.host-page-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;box-sizing:border-box}
@media(max-width:650px){
  #host-panel .registration-actions{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
  #host-panel .registration-actions>*{width:100%!important;min-height:48px!important}
  #host-panel .registration-card{padding:16px!important}
  #host-panel .registration-grid{grid-template-columns:1fr!important}
}

/* Mobile-first navigation: ações complexas em páginas próprias */
#host-panel .host-legacy-chat{display:none!important}
#host-panel .section-heading .primary-button{white-space:nowrap}
.registration-actions a.secondary-button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:700px){.registration-actions{display:grid!important;grid-template-columns:1fr!important}.registration-actions>*{width:100%!important}.host-actions-banner{align-items:stretch!important}.host-actions-banner .primary-button{width:100%;text-align:center}.toolbar-actions{display:grid!important;grid-template-columns:1fr!important}.toolbar-actions>*{width:100%!important}}