/* ============================================================
   mobile.css — responsividade do app web para celular/tablet.
   Só overrides web (o styles.css do desktop fica intacto). O advogado
   consulta prazo no telefone: a barra lateral vira barra inferior, a
   agenda empilha, os modais viram tela cheia.
   ============================================================ */

/* ---------- Tablet estreito ---------- */
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .buckets { grid-template-columns: 1fr !important; }
  .week { grid-template-columns: 1fr; min-height: auto; }   /* semana empilha em cartões de dia */
}

/* ---------- Celular ---------- */
@media (max-width: 640px) {
  /* barra lateral -> barra de navegação inferior */
  .app { grid-template-columns: 1fr; }
  .side {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    flex-direction: row; align-items: center; justify-content: flex-start;
    height: 60px; padding: 0 8px; gap: 2px;
    border-right: 0; border-top: 1px solid var(--border);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .side::-webkit-scrollbar { display: none; }
  .side__logo { display: none; }
  .side__foot { margin: 0 0 0 auto; flex-direction: row; gap: 2px; }
  .navbtn { width: 42px; height: 42px; flex: 0 0 auto; }

  .main { height: 100vh; }
  .view { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); overflow-x: auto; }  /* espaço p/ a barra inferior; mês rola por dentro */

  /* topbar quebra linha e enxuga */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 9px 14px; }
  .period { order: -1; flex: 1 1 100%; }
  .searchbtn { flex: 1 1 auto; }
  .searchbtn kbd { display: none; }
  .seg button { padding: 5px 10px; }
  .ochip { display: none; }                 /* Outlook fica em Configurações no celular */
  .topbar .btn--primary { flex: 0 0 auto; }

  /* métricas em 2 colunas */
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* agenda: semana empilha; mês fica compacto e rolável na horizontal */
  .week { grid-template-columns: 1fr; min-height: auto; }
  .monthhead, .month { min-width: 620px; }
  .month { min-height: 60vh; }

  /* modais viram quase tela cheia */
  .scrim { padding: 10px; align-items: flex-start; }
  .modal, .modal--wide { max-width: 100%; max-height: calc(100vh - 20px); border-radius: 14px; }
  .pubmeta { grid-template-columns: 1fr; }

  /* Configurações e tour: modais próprios ocupam melhor a tela */
  .wmodal { max-height: 92vh; border-radius: 14px; }
  .wgrid { grid-template-columns: 1fr; }
  .tour-pop { width: calc(100vw - 24px) !important; }
}