/* Camada final exclusiva para celular/PWA.
 * Mantém o desktop intocado e cobre todas as abas carregadas pelo registry. */

@media (display-mode: standalone) {
  body { min-height: 100dvh; }
}

@media (max-width: 900px) {
  :root {
    --mobile-header-height: 72px;
    --mobile-radius: 14px;
    --mobile-shadow: 0 8px 24px rgba(15, 35, 61, .08);
  }

  html { background: #f3f6fb; }
  body { min-height: 100dvh; background: #f3f6fb; }

  .app-shell { min-height: 100dvh; }
  .shell-main {
    min-height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  }

  .shell-topbar {
    top: max(6px, env(safe-area-inset-top));
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: var(--mobile-header-height);
    padding: 10px 11px !important;
    border-radius: 14px;
    box-shadow: var(--mobile-shadow);
    backdrop-filter: blur(16px);
  }

  .shell-topbar > div:first-child { grid-column: 1; grid-row: 1; }
  .brand-kicker { display: none; }
  .shell-topbar h1 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: clamp(17px, 5vw, 21px);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .shell-actions {
    display: flex !important;
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end !important;
    width: auto;
  }
  .mobile-menu-toggle { order: 0; min-width: 44px; width: 44px; padding: 0; font-size: 20px; }
  .mobile-menu-toggle span, .shell-actions #statusDados, #ativarNotificacoesPainel { display: none !important; }
  #atualizarDados {
    width: 44px;
    min-width: 44px;
    overflow: hidden;
    padding: 0;
    border-radius: 11px;
    font-size: 0;
  }
  #atualizarDados::before { content: "\21BB"; font-size: 21px; line-height: 1; }
  .shell-actions #sairLink {
    display: grid !important;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid #d5e0eb;
    border-radius: 11px;
    background: #fff;
    color: #9f2734;
    font-size: 0;
    text-decoration: none;
  }
  .shell-actions #sairLink::before { content: "Sair"; font-size: 10px; font-weight: 850; }

  .shell-sidebar {
    width: min(340px, 90vw) !important;
    padding: max(18px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)) !important;
    overscroll-behavior: contain;
  }
  .shell-logo { margin-bottom: 4px; }
  #navModulos { gap: 5px; }
  .nav-modulo {
    min-height: 52px !important;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
  }
  .nav-modulo-icone { width: 30px; font-size: 20px; }
  .nav-modulo.ativo { box-shadow: 0 6px 16px rgba(4, 11, 29, .24); }

  #moduloHost { min-height: calc(100dvh - var(--mobile-header-height) - 28px); }
  .modulo-host { overflow-x: clip; }

  .modulo-host :is(.page-modulo, .premium-module, .ferramentas-modulo, .dashboard-executivo, .planejamento-entregas, .organizador-telhas, .colaboradores, .comissoes-page) {
    gap: 12px !important;
  }

  .modulo-host :is(.module-actionbar, .pedidos-head) {
    position: sticky;
    z-index: 18;
    top: calc(var(--mobile-header-height) + max(12px, env(safe-area-inset-top)));
    padding: 8px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 7px 18px rgba(15, 35, 61, .08);
    backdrop-filter: blur(14px);
  }

  .modulo-host :is(.module-actionbar, .pedidos-exportacoes, .module-hero, .premium-card-head, .pedidos-card-head, .operacoes-cabecalho, .entregas-cabecalho, .telhas-cabecalho) {
    min-width: 0;
    max-width: 100%;
  }

  .modulo-host :is(.pedidos-exportacoes, .dashboard-abas, .entregas-filtros, .comissoes-abas, .comissoes-controles) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }
  .modulo-host :is(.pedidos-exportacoes, .dashboard-abas, .entregas-filtros, .comissoes-abas) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .modulo-host :is(.p1-directoria-layout, .operacoes-grid, .operacoes-colunas, .page4-entregas-grid, .entregas-ferramentas, .entrega-planejamento-form, .telhas-bobina-form, .os-grid, .pedidos-builder, .pedidos-toolbar-principal, .pedidos-planejador-corpo, .pedidos-filtros-corpo, .col-grid, .col-acesso-grid, .comissoes-grid, .comissoes-painel-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modulo-host :is(.chart-card, .premium-work-card, .operacoes-coluna, .entrega-cliente-card, .telhas-bobina-card, .telhas-producao-card, .telhas-status, .col-card, .comissoes-card) {
    min-width: 0;
    width: 100%;
    border-radius: var(--mobile-radius) !important;
  }

  .modulo-host :is(.scroll-list, .scroll-section, .entrega-tabela-wrap, .historico-tabela-wrap, .comissoes-tabela-wrap, .pedidos-catalogo) {
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
  }

  .modulo-host :is(.list-table, .entrega-produtos-tabela, .historico-tabela, .comissoes-tabela-wrap table) {
    min-width: 680px;
  }

  .modulo-host :is(.kpis, .os-kpis, .dashboard-kpis, .entregas-kpis, .telhas-resumo, .comissoes-kpis, .pay-grid) {
    gap: 8px !important;
  }

  .modulo-host :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 46px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
  }
  .modulo-host :is(button, a[class], summary, [role="button"], [role="tab"]) { min-height: 44px; }

  .pedido-impressao-janela {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
  }

  .vende-integracao, .vende-integracao iframe {
    width: 100% !important;
    min-height: calc(100dvh - 16px) !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 620px) {
  .shell-main {
    padding-right: max(6px, env(safe-area-inset-right)) !important;
    padding-left: max(6px, env(safe-area-inset-left)) !important;
  }
  .shell-topbar { margin-bottom: 9px; }

  /* Busca e filtros ocupam linhas previsiveis, sem cortar contagem ou texto. */
  .modulo-host .campo-busca {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    gap: 4px;
  }
  .modulo-host .campo-busca .busca-lista { width: 100%; min-width: 0; }
  .modulo-host .campo-busca .busca-contagem {
    justify-self: end;
    max-width: 100%;
    white-space: normal;
    text-align: right;
  }

  /* Produção: três áreas na mesma faixa e etapas em uma grade curta 2 x 2. */
  .modulo-host .producao-opcoes {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .modulo-host .producao-opcoes button {
    min-width: 0;
    min-height: 54px !important;
    padding: 7px 5px !important;
    font-size: 10px;
    line-height: 1.22;
    overflow-wrap: anywhere;
  }
  .modulo-host .os-producao-subabas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px;
  }
  .modulo-host .os-producao-subabas button { min-height: 52px; padding: 7px 8px; }
  .modulo-host .producao-premium .os-filterbar {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    width: 100%;
  }
  .modulo-host .producao-premium .os-filterbar .campo-busca {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
  }
  .modulo-host .producao-premium .os-filterbar .os-exportar {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
  .modulo-host .producao-premium .os-filterbar > select {
    grid-column: 2;
    grid-row: 2;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
  }

  .modulo-host :is(.dashboard-kpis, .kpis, .os-kpis, .entregas-kpis, .telhas-resumo, .comissoes-kpis, .pay-grid, .pay-grid-2col) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .modulo-host :is(.kpi, .pay-card, .entrega-kpi, .telhas-resumo article) {
    min-width: 0;
    padding: 11px !important;
  }
  .modulo-host :is(.kpi, .pay-card, .entrega-kpi, .telhas-resumo article) :is(h3, strong, b, span, small, p) {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .modulo-host table:has(td[data-label]) { min-width: 0 !important; }
  .modulo-host table:has(td[data-label]),
  .modulo-host table:has(td[data-label]) tbody,
  .modulo-host table:has(td[data-label]) tr,
  .modulo-host table:has(td[data-label]) td { display: block; width: 100%; }
  .modulo-host table:has(td[data-label]) thead { display: none; }
  .modulo-host table:has(td[data-label]) tr {
    margin: 8px;
    width: calc(100% - 16px);
    padding: 9px 11px;
    border: 1px solid #dce5ef;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 35, 61, .04);
  }
  .modulo-host table:has(td[data-label]) td {
    position: relative;
    min-height: 34px;
    padding: 7px 0 7px 42% !important;
    border: 0 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }
  .modulo-host table:has(td[data-label]) td::before {
    position: absolute;
    left: 0;
    width: 38%;
    content: attr(data-label);
    color: #64748b;
    font-size: 9px;
    font-weight: 850;
    text-align: left;
    text-transform: uppercase;
  }

  .modulo-host :is(.operacao-card, .entrega-cliente-card > header, .telhas-status > header, .pedidos-grupo-header, .comissoes-ranking-linha) {
    align-items: flex-start !important;
  }

  .modulo-host :is(.col-dialogo, .pedido-dialogo) {
    width: 100vw !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: auto 0 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }
}

/* Apenas aparelhos realmente estreitos voltam para uma coluna. Em 360/390 px,
 * duas colunas preservam leitura e reduzem bastante a rolagem vertical. */
@media (max-width: 340px) {
  .modulo-host :is(.dashboard-kpis, .kpis, .os-kpis, .entregas-kpis, .telhas-resumo, .comissoes-kpis, .pay-grid, .pay-grid-2col) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .modulo-host .producao-opcoes { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .shell-sidebar, .modulo-host * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}