/* FC Grupo — correções de viewport e conteúdo cortado — 2026-08-21
   Override final, isolado do tema principal. */

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

body {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell,
.module-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
}

.workspace,
.module-content,
.platform-main {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  overflow: visible;
}

.workspace > *,
.module-content > *,
.topbar > *,
.panel > *,
.module-grid > *,
.metrics > *,
.analysis-grid > *,
.analysis-hero > *,
.expense-layout > * {
  min-width: 0;
}

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

/* Conteúdo largo deve rolar localmente, não cortar a página inteira. */
.expense-table,
.table-wrap,
.table-wrapper,
.data-table-wrap,
.panel-table,
[role="region"][aria-label*="tabela" i] {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Drawers continuam fixos, mas sempre com rolagem própria. */
.drawer:not([hidden]),
.commercial-drawer:not([hidden]) {
  max-height: calc(100vh - 32px) !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Corrige o override anterior que impedia a rolagem do backdrop. */
.modal-backdrop:not([hidden]) {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  place-items: start center !important;
  padding: 16px !important;
  -webkit-overflow-scrolling: touch;
}

.modal-backdrop:not([hidden]) > .form-modal,
.modal-backdrop:not([hidden]) > .complaint-detail,
.modal-backdrop:not([hidden]) > .financial-detail-modal,
.modal-backdrop:not([hidden]) > .registry-wizard,
.modal-backdrop:not([hidden]) > .backup-modal,
.modal-backdrop:not([hidden]) > .confirm-modal {
  max-width: 100%;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
}

.form-grid-local,
.registry-wizard,
.complaint-detail,
.financial-detail-modal {
  min-height: 0;
}

.form-grid-local {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* O CSS anterior mantém width calc(100% - 240px) no module-content em mobile.
   Isso cortava parte da página quando a sidebar encolhia para 70px. */
@media (max-width: 700px) {
  .workspace,
  .module-content {
    margin-left: 70px !important;
    width: calc(100% - 70px) !important;
    max-width: calc(100% - 70px) !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .modal-backdrop:not([hidden]) {
    padding: 8px !important;
  }

  .modal-backdrop:not([hidden]) > .form-modal,
  .modal-backdrop:not([hidden]) > .complaint-detail,
  .modal-backdrop:not([hidden]) > .financial-detail-modal,
  .modal-backdrop:not([hidden]) > .registry-wizard,
  .modal-backdrop:not([hidden]) > .backup-modal {
    width: 100%;
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
  }
}

@media (max-width: 420px) {
  .workspace,
  .module-content {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}