/* =========================================================
   FSS COMEX - Correção Mobile
   Corrige sidebar, menu superior, dashboard e tabelas
   ========================================================= */

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

  body {
    font-size: 14px;
  }

  /* Evita largura desktop fixa no mobile */
  .app-shell,
  .main-shell,
  .layout-shell,
  .page-shell,
  .content-shell,
  .dashboard-shell,
  .dashboard-layout,
  .dashboard-grid,
  .main-content,
  .content,
  .page-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }

  /* Sidebar vira gaveta */
  .sidebar,
  .side-menu,
  .app-sidebar,
  aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 86vw !important;
    max-width: 360px !important;
    height: 100vh !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.35);
  }

  body.sidebar-open .sidebar,
  body.sidebar-open .side-menu,
  body.sidebar-open .app-sidebar,
  body.sidebar-open aside {
    transform: translateX(0);
  }

  /* Backdrop escuro quando menu abrir */
  body.sidebar-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.55);
  }

  /* Conteúdo nunca fica por baixo do menu */
  .main,
  main,
  .workspace,
  .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Top menu no mobile */
  .topbar,
  .top-menu,
  .module-menu,
  .navbar,
  header {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .topbar > *,
  .top-menu > *,
  .module-menu > *,
  .navbar > * {
    flex-shrink: 0 !important;
  }

  /* Remove menus flutuando na direita */
  .floating-module-menu,
  .quick-module-menu,
  .right-floating-menu {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin: 8px 0 !important;
    display: flex !important;
    overflow-x: auto !important;
    gap: 8px !important;
  }

  /* Cards do dashboard em uma coluna */
  .cards-grid,
  .kpi-grid,
  .dashboard-cards,
  .stats-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .card,
  .kpi-card,
  .stat-card,
  .panel,
  .dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Layout de duas colunas vira uma coluna */
  .two-column-layout,
  .dashboard-two-columns,
  .dashboard-main-grid,
  .content-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Câmbio/painel lateral no mobile fica abaixo ou recolhido */
  .exchange-panel,
  .currency-panel,
  .rates-panel,
  .side-panel,
  .right-panel {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-top: 12px !important;
  }

  /* Filtros em coluna no celular */
  .filters,
  .filter-bar,
  .dashboard-filters,
  .process-filters {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .filters input,
  .filters select,
  .filter-bar input,
  .filter-bar select,
  .dashboard-filters input,
  .dashboard-filters select,
  .process-filters input,
  .process-filters select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
  }

  /* Tabelas com scroll horizontal */
  table {
    min-width: 760px;
  }

  .table-wrapper,
  .table-responsive,
  .process-table-wrapper,
  .data-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Títulos e textos menores */
  h1 {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 20px !important;
  }

  h3 {
    font-size: 17px !important;
  }

  .page-title,
  .hero-title {
    font-size: 24px !important;
    line-height: 1.15 !important;
    word-break: normal !important;
  }

  .muted,
  .subtitle,
  .description {
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  /* Botões ocupam largura utilizável */
  .btn,
  button {
    max-width: 100%;
  }

  /* Evita textos quebrados letra por letra */
  p,
  span,
  strong,
  label,
  a,
  div {
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Mobile pequeno */
@media (max-width: 520px) {
  .sidebar,
  .side-menu,
  .app-sidebar,
  aside {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  .main-content,
  .content,
  .page-content {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .kpi-card,
  .stat-card,
  .dashboard-card {
    padding: 14px !important;
  }

  .topbar,
  .top-menu,
  .module-menu,
  .navbar {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}