/* OTOH — recorte do eixo X + shell tipo app no mobile (carregue por último) */

html, body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

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

  #landing-page-wrapper,
  #login-view,
  .login-view,
  #dashboard-app,
  #accounting-view {
    overflow-x: hidden !important;
    overflow-x: clip !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .navbar .dropdown,
  .navbar .dropdown.sm,
  .navbar .dropdown--apps {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    left: 0 !important;
    transform: none !important;
  }

  .split-image,
  .otoh-hero,
  .hero {
    overflow: hidden;
  }

  /* Barra tipo app: uma linha, sem empilhar busca/switcher */
  #dashboard-app .top-header {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  #dashboard-app .otoh-mobile-nav-row {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto;
    gap: 6px;
  }

  #dashboard-app .otoh-mobile-menu-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  #dashboard-app .client-switcher-container,
  #dashboard-app .otoh-client-switcher {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    order: 0 !important;
  }

  #dashboard-app .client-switcher-container select,
  #dashboard-app #selectMestreBpo {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    font-size: 12px !important;
  }

  #dashboard-app .search-bar-wrapper {
    display: none !important;
  }

  #dashboard-app .header-actions {
    display: flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    order: 0 !important;
    gap: 6px !important;
    margin-left: 0 !important;
  }

  /* Gavetas fora da tela sem expandir o documento (Android) */
  #dashboard-app .sidebar-l1,
  #dashboard-app .sidebar-l2,
  #accounting-view .acc-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-102%, 0, 0) !important;
    will-change: transform;
  }

  #dashboard-app.otoh-l1-open .sidebar-l1,
  #dashboard-app.otoh-l2-open .sidebar-l2,
  #accounting-view.otoh-l1-open .acc-sidebar {
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0) !important;
  }

  #dashboard-app .main-content {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #dashboard-app .l3-container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .otoh-l2-menu-toggle {
    display: none !important;
  }

  /* Listagens: rolam DENTRO do card; a página não vai para o lado */
  .l3-container .conc-extrato-table-wrap,
  .l3-container .conc-extrato-scroll,
  .l3-container .cr-table-wrap,
  .l3-container .cp-omie-scroll,
  .l3-container .cp-titulos-scroll,
  .l3-container .cs-list-card,
  .l3-container .ns-table-wrap,
  .l3-container .ole-table-wrap,
  .l3-container .ac-table-wrap,
  .l3-container .otx-af-table-wrap,
  .l3-container .pipe-table-wrap,
  .l3-container .arc-table-wrap,
  .l3-container .agc-table-wrap,
  .l3-container .sign-table-wrap,
  .l3-container .cobr-table-wrap,
  .l3-container .rp-table-scroll,
  .l3-container .re-table-wrap,
  .l3-container .otoh-table-scroll,
  .l3-container .table-scroll-x,
  .acc-main .otoh-table-scroll {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .l3-container table,
  .acc-main table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  .l3-container th,
  .l3-container td {
    white-space: nowrap;
  }
}