/* ============================================================
   Melhor Passagem · Agency OS — Responsivo + A11y (Fase 10)
   ------------------------------------------------------------
   Breakpoint principal 768px. SÓ CSS, sob .ds-theme. O
   hambúrguer/backdrop são injetados pelo ds-shell.js (gated em
   ds-theme); aqui ficam apenas as regras visuais. Carregado por
   ÚLTIMO para poder ajustar as camadas anteriores no mobile.
   Reversão total: remover ds-theme (ou este <link>).
   ============================================================ */

/* hambúrguer e backdrop: escondidos no desktop */
.ds-hamburguer { display: none; }
.ds-menu-backdrop { display: none; }

/* ── acessibilidade global ── */
.ds-theme :focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ds-theme *, .ds-theme *::before, .ds-theme *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}
/* rolagem horizontal suave nas tabelas densas (toque) */
.ds-theme .rolagem, .ds-theme .ds-tabela-wrap { -webkit-overflow-scrolling: touch; }

/* ============================================================
   < 768px  — o principal
   ============================================================ */
@media (max-width: 768px) {
  /* conteúdo respira menos */
  .ds-theme main { padding: 16px; }
  .ds-theme main .topo { align-items: flex-start; gap: 10px; }

  /* hambúrguer aparece no topo da página */
  .ds-theme .ds-hamburguer {
    display: inline-flex; align-items: center; justify-content: center; order: -1;
    width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid var(--ds-n-300);
    border-radius: var(--ds-raio-botao); background: var(--ds-branco); color: var(--ds-texto-sec);
    cursor: pointer;
  }
  .ds-theme .ds-hamburguer svg { width: 22px; height: 22px; }
  .ds-theme .ds-hamburguer:hover { background: var(--ds-n-50); color: var(--ds-brand-600); }

  /* sidebar vira gaveta off-canvas (à esquerda) — o :not() empata a
     especificidade da regra legada de 900px (senão a gaveta fica 190px) */
  .ds-theme #app { display: block; }
  .ds-theme #app aside.ds-shell,
  .ds-theme #app aside.ds-shell:not(.ds-colapsada) {
    position: fixed; top: 0; left: 0; height: 100vh; z-index: 70; width: min(280px, 86vw);
    transform: translateX(-100%); transition: transform .2s ease;
    border-right: 1px solid var(--ds-n-200); border-bottom: 0; overflow-y: auto;
  }
  .ds-theme #app.ds-menu-aberto aside.ds-shell { transform: none; box-shadow: var(--ds-sombra-drawer); }
  /* no mobile a gaveta é sempre "expandida" (nunca o modo ícone/flyout) */
  .ds-theme #app aside.ds-shell.ds-colapsada { width: min(280px, 86vw); padding: var(--ds-esp-16) var(--ds-esp-12); }
  .ds-theme #app aside.ds-shell.ds-colapsada .logo .logo-marca,
  .ds-theme #app aside.ds-shell.ds-colapsada .logo small,
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-nav-rotulo,
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-nav-chevron,
  .ds-theme #app aside.ds-shell.ds-colapsada nav#menu button[id^="nav-"] span:last-child,
  .ds-theme #app aside.ds-shell.ds-colapsada .rodape b,
  .ds-theme #app aside.ds-shell.ds-colapsada .rodape #quem-papel,
  .ds-theme #app aside.ds-shell.ds-colapsada .rodape .leve { display: revert; }
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-mono { display: none; }
  .ds-theme #app aside.ds-shell.ds-colapsada .logo .logo-marca { display: block; }
  .ds-theme #app aside.ds-shell.ds-colapsada nav#menu button[id^="nav-"],
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-nav-cab {
    width: 100%; height: auto; min-height: 28px; padding: var(--ds-esp-6); margin: 0; justify-content: flex-start;
  }
  /* no mobile os grupos são acordeão (o flyout só existe no desktop colapsado) */
  .ds-theme #app aside.ds-shell.ds-colapsada nav#menu .ds-nav-lista {
    position: static; box-shadow: none; border: 0; padding: var(--ds-esp-2) 0 var(--ds-esp-2) 0;
    background: none; min-width: 0;
  }
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-nav-grupo:hover > .ds-nav-lista { display: none; }
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-nav-grupo.ds-aberto > .ds-nav-lista { display: flex; }
  .ds-theme #app aside.ds-shell.ds-colapsada .ds-flyout-titulo { display: none; }

  /* backdrop */
  .ds-theme #app.ds-menu-aberto .ds-menu-backdrop {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(21, 29, 86, .35);
  }

  /* toolbars e filtros empilham em largura total */
  .ds-theme .ds-toolbar { flex-direction: column; align-items: stretch; }
  .ds-theme .ds-busca { max-width: none; }
  .ds-theme .ds-lista .grade,
  .ds-theme #pg-registrar .grade,
  .ds-theme #pg-gastos .gastos-form-grid,
  .ds-theme #pg-gastos .gastos-form-bloco .grade { grid-template-columns: 1fr; }
  .ds-theme .topbar { width: 100%; }
  .ds-theme .busca-global { width: 100%; max-width: none; }

  /* grids de dashboard/registro colapsam em 1 coluna */
  .ds-theme #pg-registrar .registro-layout,
  .ds-theme #pg-gastos .gastos-hero,
  .ds-theme #pg-gastos .gastos-operacao-grid,
  .ds-theme #pg-gastos .gastos-prioridade-grid { grid-template-columns: 1fr; }
  .ds-theme #pg-gastos .gastos-operacao-lateral { position: static; }

  /* card de seção com padding e raio menores no mobile */
  .ds-theme .ds-lista .card { padding: var(--ds-esp-16); border-radius: var(--ds-raio-avatar); }

  /* drawer e modal ocupam a tela */
  .ds-theme .ds-drawer-overlay .ds-drawer { width: 100%; }
  .ds-theme .modal-box { padding: var(--ds-esp-20); border-radius: var(--ds-raio-modal); width: min(100%, 520px); }
  .ds-theme .ds-modal-grade { grid-template-columns: 1fr; }
}

/* ============================================================
   < 480px  — telas bem estreitas
   ============================================================ */
@media (max-width: 480px) {
  .ds-theme main { padding: 12px; }
  .ds-theme .kpis, .ds-theme .ds-kpis { grid-template-columns: 1fr; }
  .ds-theme #pg-gastos .gastos-alertas { grid-template-columns: 1fr 1fr; }
  .ds-theme .tela-cab .acoes, .ds-theme .topbar { flex-wrap: wrap; }
}