/* ════════════════════════════════════════════════════════════════════════
   responsive.css — MOBILE. Carrega DEPOIS do dashboard.css / shell.css.

   Da entrega original ficaram duas das três secções:

   • TABELAS → CARTÕES. Tinham scroll horizontal de 1300px+ dentro de um ecrã de
     390px. Abaixo de 640px cada linha vira um cartão com rótulos à esquerda.
     Precisa de class="rwd-cards" na <table> e data-label="..." em cada <td>.

   • ALVOS DE TOQUE a 44px. Pills, setas e ícones estavam a 28-32px.

   A secção 1 da entrega (sidebar → drawer, .nav-drawer-btn, .nav-scrim,
   html.nav-open + mobile-nav.js) foi REMOVIDA de propósito: o components.css
   já traz um drawer completo e blindado a !important (.app-topbar /
   .app-drawer / .drawer-overlay, comandado por body.drawer-open e por
   static/js/ui/shell.js). Instalar os dois dava duas sanduíches no topo, dois
   véus e dois estados de abertura independentes — e o novo nem sequer abria
   para quem tivesse a sidebar recolhida (html.sidebar-collapsed vencia o
   html.nav-open por especificidade). Ver também: .sidebar em position:fixed
   deixava o /pamm sem navegação entre 720px e 1024px.
   ════════════════════════════════════════════════════════════════════════ */

/* ╔══════════════════════════════════════════════════════════╗
   ║   2. TABELAS → CARTÕES                                   ║
   ╚══════════════════════════════════════════════════════════╝
   Funciona com <table> normal. Cada <td> precisa de data-label="NOME DA COLUNA"
   — é isso que passa a ser o rótulo à esquerda. Se um td não tiver data-label,
   o valor aparece sozinho, centrado, o que serve para as ações.

   Exemplo:
     <td data-label="P&L">+$153.34</td>                                        */

@media (max-width: 639.98px) {
  table.rwd-cards,
  table.rwd-cards thead,
  table.rwd-cards tbody,
  table.rwd-cards tfoot,
  table.rwd-cards tr,
  table.rwd-cards th,
  table.rwd-cards td { display: block; }

  table.rwd-cards { width: 100%; border-collapse: separate; border-spacing: 0; }

  /* O cabeçalho deixa de ser útil — o rótulo passa para dentro de cada célula */
  table.rwd-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  table.rwd-cards tr {
    background: var(--glass-1);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm, 12px);
    box-shadow: var(--elev-1);
    padding: 4px 14px;
    margin-bottom: 10px;
  }

  table.rwd-cards td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border: 0;
    border-bottom: 1px solid var(--border-glass);
    text-align: right;
    font-size: 13.5px;
    white-space: normal;
  }
  table.rwd-cards td:last-child { border-bottom: 0; }

  table.rwd-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: var(--track, 0.16em);
    text-transform: uppercase;
    color: var(--text-3);
    text-align: left;
  }
  table.rwd-cards td:not([data-label])::before { content: none; }
  table.rwd-cards td:not([data-label]) { justify-content: flex-end; }

  /* A primeira célula é o título do cartão: maior, sem rótulo, alinhada à esquerda */
  table.rwd-cards td:first-child {
    justify-content: flex-start;
    text-align: left;
    font-size: 15px;
    font-weight: 700;
    padding-top: 12px;
  }
  table.rwd-cards td:first-child::before { content: none; }

  /* Selects e inputs dentro de células não podem estourar o cartão. */
  table.rwd-cards td > select,
  table.rwd-cards td > input { min-width: 0; max-width: 100%; }

  /* Só os contentores de tabelas QUE JÁ viram cartões deixam de rolar de lado.
     A versão original apanhava [class*="-scroll"] inteiro e desligava o scroll
     de tabelas largas sem fallback (performance, analysis), pondo o documento
     a andar de lado. */
  :has(> table.rwd-cards) { overflow-x: visible !important; }
  :has(> table.rwd-cards) > * { min-width: 0 !important; }
}

/* ╔══════════════════════════════════════════════════════════╗
   ║   3. ALVOS DE TOQUE E DENSIDADE                          ║
   ╚══════════════════════════════════════════════════════════╝ */

@media (max-width: 1023.98px) {
  .topbar {
    gap: 10px;
    padding: 12px 0;
    /* Sem env(safe-area-inset-top) aqui: o .app-topbar acima já consome o
       notch (components.css:60-61) e somar outra vez dava padding a dobrar. */
  }
  .topbar-arrow,
  .theme-toggle {
    width: var(--tap, 44px); height: var(--tap, 44px);
  }

  /* Segmentos de período: rolam na horizontal em vez de partir a linha */
  .seg, .seg-wrap, [class*="period"], [class*="pills"] {
    -webkit-overflow-scrolling: touch;
  }
  .seg { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .seg::-webkit-scrollbar { display: none; }
  .seg > * { flex: 0 0 auto; min-height: var(--tap, 44px); display: flex; align-items: center; }
}

@media (max-width: 639.98px) {
  /* O título da página não pode empurrar o botão do tema para uma segunda
     linha — dava uma faixa vazia de ~100px por baixo do cabeçalho. Trunca. */
  .topbar-label {
    /* base 0, não auto: o flex decide a quebra de linha pelo tamanho
       HIPOTÉTICO do item. Com base:auto o título contava ~250px e empurrava
       o botão do tema para a linha de baixo antes de sequer encolher. */
    flex: 1 1 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .theme-toggle { margin-left: auto; flex: 0 0 auto; }

  /* Grelhas de KPI: duas colunas, nunca quatro espremidas */
  [class*="kpi"], [class*="metric-grid"], [class*="stat-grid"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .chart-section { padding: 18px 16px 20px; }
  .chart-section-hdr { padding-bottom: 14px; margin-bottom: 16px; }

  /* Gráficos: altura menor, senão ocupam o ecrã todo. Limita-se o CONTENTOR,
     não o <canvas> — o Chart.js dimensiona o canvas a partir do pai, e limitar
     o canvas deixava faixa morta por baixo. */
  .chart-body, .chart-wrap, .chart-canvas-wrap { max-height: 240px; }

  /* Calendário: sete colunas num ecrã estreito não cabem com números dentro.
     Reduz o texto em vez de deixar transbordar. */
  [class*="cal-grid"] { gap: 4px; }
  [class*="cal-cell"] { min-height: 52px; padding: 5px 4px; font-size: 10px; }

  /* Rodapé com espaço para a barra do sistema iOS */
  .main { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}

/* Landscape em telemóvel: o drawer não deve ocupar o ecrã todo */
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
  .sidebar { width: min(280px, 60vw); }
  .sidebar-logo { padding-bottom: 14px; }
  .sidebar-group-label { padding: 10px 22px 5px; }
}