/* =========================================================
   MOOV INSIGHTS - RESPONSIVIDADE GLOBAL
   Somente CSS. Não altera login, sessão, Firebase ou backend.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

/* Evita conteúdo estourando para fora da tela */
#appView,
.app-shell,
.app-layout,
.dashboard-layout,
.main-layout,
.content,
.main-content,
.page-content,
.app-main,
section,
.app-section {
  max-width: 100%;
  min-width: 0;
}

/* Container principal mais fluido */
#appView {
  width: 100%;
}

/* Conteúdo interno com largura confortável */
.app-section {
  width: 100%;
  padding-inline: clamp(12px, 2vw, 28px);
}

/* Cards e blocos visuais */
.card,
.dashboard-card,
.advanced-card,
.vendedor-panel-card,
.vendedor-vendas-card,
.vendedor-profile-card,
.seller-card,
.metric-card,
.kpi-card,
[class*="card"],
[class*="panel"] {
  max-width: 100%;
  min-width: 0;
}

/* Grids ficam fluidos sem quebrar layout */
.dashboard-grid,
.advanced-grid,
.vendedor-kpi-grid,
.vendedor-main-grid,
.vendedor-vendas-kpis,
.seller-grid,
.metas-seller-grid,
[class*="kpi-grid"],
[class*="card-grid"],
[class*="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(12px, 1.5vw, 22px);
  max-width: 100%;
}

/* Grids maiores */
.vendedor-main-grid,
.advanced-main-grid,
.dashboard-main-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Títulos não estouram */
h1, h2, h3, h4, h5, h6,
strong,
p,
span,
small,
button,
label,
input,
select,
textarea {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Tabelas largas com scroll elegante */
.table-wrap,
.vendedor-table-wrap,
.vendedor-vendas-table-wrap,
.advanced-table-wrap,
.responsive-table,
[class*="table-wrap"],
[class*="table-container"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.table-wrap table,
.vendedor-table-wrap table,
.vendedor-vendas-table-wrap table,
.advanced-table-wrap table,
[class*="table-wrap"] table {
  min-width: 760px;
}

th,
td {
  white-space: nowrap;
}

td:first-child,
th:first-child {
  white-space: normal;
}

/* Inputs e filtros */
input,
select,
textarea,
button {
  max-width: 100%;
}

.filters,
.filter-bar,
.advanced-filters,
.vendedor-vendas-actions,
.vendedor-actions,
.dashboard-actions,
[class*="filters"],
[class*="actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

.filters > *,
.filter-bar > *,
.advanced-filters > *,
.vendedor-vendas-actions > *,
.vendedor-actions > *,
.dashboard-actions > *,
[class*="filters"] > *,
[class*="actions"] > * {
  min-width: 0;
}

/* Imagens, gráficos e canvas */
img,
svg,
canvas {
  max-width: 100%;
}

canvas {
  height: auto !important;
}

/* Sidebar/menu: evita esmagar conteúdo */
.sidebar,
.app-sidebar,
nav.sidebar,
aside.sidebar {
  flex-shrink: 0;
}

/* Ajuste para notebooks comuns 1366x768 */
@media (max-width: 1440px) {
  .app-section {
    padding-inline: 18px;
  }

  .vendedor-hero,
  .dashboard-hero,
  .advanced-hero,
  [class*="hero"] {
    padding: clamp(16px, 2vw, 26px);
  }

  .card,
  .dashboard-card,
  .advanced-card,
  .vendedor-panel-card,
  [class*="card"] {
    padding: clamp(14px, 1.5vw, 22px);
  }

  .dashboard-grid,
  .advanced-grid,
  .vendedor-kpi-grid,
  .vendedor-vendas-kpis,
  [class*="kpi-grid"],
  [class*="card-grid"] {
    gap: 14px;
  }
}

/* Monitores menores e notebooks */
@media (max-width: 1280px) {
  body {
    font-size: 14px;
  }

  .app-section {
    padding-inline: 14px;
  }

  .dashboard-grid,
  .advanced-grid,
  .vendedor-kpi-grid,
  .vendedor-vendas-kpis,
  [class*="kpi-grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  }

  .vendedor-main-grid,
  .advanced-main-grid,
  .dashboard-main-grid {
    grid-template-columns: 1fr;
  }

  .sidebar,
  .app-sidebar,
  nav.sidebar,
  aside.sidebar {
    max-width: 260px;
  }
}

/* Tablets e telas estreitas */
@media (max-width: 1024px) {
  .app-section {
    padding-inline: 12px;
  }

  .dashboard-grid,
  .advanced-grid,
  .vendedor-kpi-grid,
  .vendedor-vendas-kpis,
  .seller-grid,
  [class*="kpi-grid"],
  [class*="card-grid"],
  [class*="grid"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  }

  .vendedor-actions,
  .dashboard-actions,
  .advanced-filters,
  .filters,
  .filter-bar,
  [class*="actions"],
  [class*="filters"] {
    align-items: stretch;
  }

  .vendedor-actions button,
  .dashboard-actions button,
  .advanced-filters button,
  .filters button,
  .filter-bar button,
  [class*="actions"] button,
  [class*="filters"] button {
    min-height: 40px;
  }
}

/* Celular ou janela muito estreita */
@media (max-width: 768px) {
  body {
    font-size: 13.5px;
  }

  .app-section {
    padding-inline: 10px;
  }

  .dashboard-grid,
  .advanced-grid,
  .vendedor-kpi-grid,
  .vendedor-vendas-kpis,
  .seller-grid,
  [class*="kpi-grid"],
  [class*="card-grid"],
  [class*="grid"] {
    grid-template-columns: 1fr;
  }

  .vendedor-hero,
  .dashboard-hero,
  .advanced-hero,
  [class*="hero"] {
    padding: 16px;
  }

  .card,
  .dashboard-card,
  .advanced-card,
  .vendedor-panel-card,
  .vendedor-vendas-card,
  [class*="card"] {
    padding: 14px;
    border-radius: 18px;
  }

  .filters,
  .filter-bar,
  .advanced-filters,
  .vendedor-vendas-actions,
  .vendedor-actions,
  .dashboard-actions,
  [class*="filters"],
  [class*="actions"] {
    flex-direction: column;
  }

  .filters > *,
  .filter-bar > *,
  .advanced-filters > *,
  .vendedor-vendas-actions > *,
  .vendedor-actions > *,
  .dashboard-actions > *,
  [class*="filters"] > *,
  [class*="actions"] > * {
    width: 100%;
  }

  .table-wrap table,
  .vendedor-table-wrap table,
  .vendedor-vendas-table-wrap table,
  .advanced-table-wrap table,
  [class*="table-wrap"] table {
    min-width: 680px;
  }
}

/* Telas muito pequenas */
@media (max-width: 480px) {
  .app-section {
    padding-inline: 8px;
  }

  h1 {
    font-size: clamp(22px, 7vw, 30px);
  }

  h2 {
    font-size: clamp(19px, 6vw, 26px);
  }

  h3 {
    font-size: clamp(17px, 5vw, 22px);
  }

  .card,
  .dashboard-card,
  .advanced-card,
  .vendedor-panel-card,
  .vendedor-vendas-card,
  [class*="card"] {
    padding: 12px;
    border-radius: 16px;
  }

  .table-wrap table,
  .vendedor-table-wrap table,
  .vendedor-vendas-table-wrap table,
  .advanced-table-wrap table,
  [class*="table-wrap"] table {
    min-width: 620px;
  }
}

/* Evita zoom visual quebrado em telas menores */
@media (max-height: 760px) and (min-width: 900px) {
  .app-section {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .vendedor-hero,
  .dashboard-hero,
  .advanced-hero,
  [class*="hero"] {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .card,
  .dashboard-card,
  .advanced-card,
  .vendedor-panel-card,
  [class*="card"] {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}