/**
 * Responsividade global — complementa app.css e premium-ui.css.
 * Grids inline nas views são adaptados via media queries abaixo.
 */

/* --- Utilitários reutilizáveis --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 20px;
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar__grupo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 520px;
}

/* --- Tabelas dentro de cartões --- */
.cartao:has(> table),
.cartao:has(> .table-scroll) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cartao > table {
  min-width: 480px;
}

/* --- Topbar mobile --- */
@media (max-width: 900px) {
  .app-topbar-busca {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: none;
  }

  .app-topbar-busca__painel {
    width: min(360px, calc(100vw - 24px));
    max-height: min(360px, 55vh);
  }
}

@media (max-width: 640px) {
  .app-topbar-direita {
    gap: 8px;
    width: 100%;
  }

  .app-topbar-busca {
    flex: 1 1 auto;
    min-width: 0;
  }

  .app-topbar-tenant,
  .app-topbar-escritorio {
    display: none;
  }

  .app-topbar-ajuda {
    padding: 6px 10px;
    font-size: 13px;
  }

  .app-topbar-ajuda span[aria-hidden="true"] {
    margin-right: 0;
  }

  .app-topbar-busca__input {
    font-size: 16px; /* evita zoom no iOS */
  }
}

@media (max-width: 480px) {
  .app-topbar-ajuda {
    font-size: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    border-radius: var(--raio-padrao, 8px);
  }

  .app-topbar-ajuda span[aria-hidden="true"] {
    font-size: 16px;
    margin: 0;
  }
}

/* --- Sidebar mobile (z-index acima do overlay) --- */
@media (max-width: 900px) {
  .app-sidebar-overlay.visivel {
    z-index: 280;
  }

  .app-sidebar {
    z-index: 290;
    width: min(280px, 88vw);
    min-width: 0;
  }

  body.sidebar-aberta {
    overflow: hidden;
  }
}

/* --- Grids inline (views com style="display: grid") --- */
@media (max-width: 900px) and (min-width: 561px) {
  .app-conteudo [style*="display: grid"][style*="repeat(3"],
  .app-conteudo [style*="display: grid"][style*="repeat(4"],
  .app-conteudo form[style*="display: grid"][style*="repeat(3"],
  .app-conteudo form[style*="display: grid"][style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 560px) {
  .app-conteudo [style*="display: grid"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  .app-conteudo form[style*="display: grid"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
    grid-template-columns: 1fr !important;
  }

  .grid-2,
  .grid-3,
  .grid-2-1,
  .grid-1-2,
  .grid-form {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    gap: 12px;
  }
}

/* --- Flex toolbars inline --- */
@media (max-width: 640px) {
  .app-conteudo > div[style*="justify-content: space-between"],
  .app-conteudo > div[style*="display: flex"][style*="space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .app-conteudo > div[style*="display: flex"][style*="space-between"] > div[style*="display: flex"] {
    flex-wrap: wrap !important;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar__grupo {
    width: 100%;
  }

  .toolbar__grupo .botao,
  .toolbar .botao {
    flex: 1;
    text-align: center;
    justify-content: center;
  }
}

/* --- Formulários e cartões --- */
@media (max-width: 640px) {
  .cartao {
    padding: 18px 16px;
  }

  .campo-grupo {
    margin-bottom: 14px;
  }

  .botao-bloco-mobile {
    width: 100%;
    justify-content: center;
  }

  .alerta {
    font-size: 14px;
    padding: 12px 14px;
  }

  .assinatura-nav {
    flex-direction: column;
  }

  .assinatura-nav .botao {
    width: 100%;
    text-align: center;
  }

  .contador-assinatura--banner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .contador-assinatura--banner .contador-assinatura__circulo {
    margin: 0 auto;
  }

  .contador-assinatura--card {
    flex-direction: column;
    align-items: stretch;
  }

  .lixeira-item {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }

  .lixeira-acoes {
    width: 100%;
    justify-content: flex-start;
  }
}

/* --- Listagens --- */
@media (max-width: 768px) {
  .lista-busca-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .lista-busca-form {
    max-width: none;
    width: 100%;
  }

  .lista-busca-form .campo-input {
    min-width: 0;
    width: 100%;
  }

  .lista-tabela-wrap {
    border-radius: var(--raio-padrao, 8px);
  }

  .lista-tabela td,
  .lista-tabela th {
    padding: 10px 6px;
    font-size: 13px;
  }
}

/* --- Dashboard --- */
@media (max-width: 640px) {
  .dashboard-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }

  .dashboard-kpi-card {
    padding: 16px;
  }

  .dashboard-kpi-card__valor {
    font-size: 22px;
  }

  .dashboard-widget-grid {
    grid-template-columns: 1fr !important;
  }

  .dashboard-funil-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .dashboard-centro-grid,
  .dashboard-agenda-duo {
    grid-template-columns: 1fr !important;
  }

  .dashboard-agenda-coluna {
    gap: 14px;
  }

  .dashboard-welcome {
    padding: 14px 16px !important;
  }
}

@media (max-width: 400px) {
  .dashboard-kpi-grid,
  .dashboard-funil-grid {
    grid-template-columns: 1fr !important;
  }
}

/* --- Kanban / scroll horizontal preservado --- */
@media (max-width: 900px) {
  .kanban-board,
  .trello-board,
  [class*="kanban"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Auth / landing --- */
@media (max-width: 768px) {
  .landing-container {
    padding: 0 16px;
  }

  .landing-nav__links {
    display: none;
  }

  .landing-nav__acoes {
    gap: 8px;
  }

  .landing-hero h1 {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .landing-hero__acoes {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-hero__acoes .botao {
    width: 100%;
    justify-content: center;
  }

  .landing-planos-grid,
  .landing-features-grid {
    grid-template-columns: 1fr !important;
  }

  .landing-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .cartao-auth {
    padding: 28px 20px;
    margin: 16px;
    width: calc(100% - 32px);
  }

  .tela-auth {
    padding: 16px;
    align-items: flex-start;
    padding-top: 32px;
  }

  .landing-nav {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 0;
  }

  .landing-hero {
    padding: 48px 0 32px;
  }
}

/* --- Admin --- */
@media (max-width: 900px) {
  .app-shell--admin .app-sidebar {
    display: flex;
    flex-direction: column;
  }

  .app-shell--admin .app-sidebar nav,
  .app-shell--admin .app-sidebar-nav {
    flex: 1;
    overflow-y: auto;
  }
}

/* --- Modais documentos --- */
@media (max-width: 640px) {
  .doc-modal-overlay .doc-modal {
    width: calc(100vw - 24px) !important;
    max-width: none !important;
    margin: 12px;
  }

  .doc-modal__footer {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .doc-modal__footer .botao {
    width: 100%;
  }
}

/* --- Safe area (notch) --- */
@supports (padding: max(0px)) {
  .app-topbar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .app-conteudo {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}