/* ═══════════════════════════════════════════════════════════════
   PSA-MT — Camada de responsividade mobile (overlay)
   Carregada DEPOIS de modules.css/components.css.
   Os módulos geram markup com estilos inline → overrides usam !important.
   Nada aqui afeta desktop: tudo vive em @media (max-width: 768px).
   ═══════════════════════════════════════════════════════════════ */

/* Botão "Filtros" e overlay existem no DOM em qualquer largura,
   mas só aparecem no mobile. */
.m-filters-btn, .m-filters-ov, #m-mail-back, #m-mail-folders { display: none; }

@media (max-width: 768px) {

  /* ── Higiene global ─────────────────────────────────────────── */
  /* Mata expansão por min-content (raiz de todo overflow horizontal).
     Regras específicas abaixo re-aplicam min-width onde necessário. */
  main div { min-width: 0 !important; }
  /* flex-shrink:0 inline propaga largura mínima e estoura a tela */
  main div[style*="flex-shrink:0"], main div[style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
  /* Guarda-raiz: nenhuma view pode alargar o main além da tela */
  main, main > .view { max-width: 100vw !important; overflow-x: hidden; }
  main img { max-width: 100%; }
  html, body { overflow-x: hidden; }

  /* iOS: fonte <16px em input causa auto-zoom ao focar */
  input, select, textarea { font-size: 16px !important; }
  button { touch-action: manipulation; }
  * { -webkit-tap-highlight-color: rgba(19,124,147,.15); }

  /* Módulos usam height:100vh inline, mas ficam sob a topbar de 48px */
  #pr-container, #im-container, #ag-container, #tk-container,
  #cl-container, .wp-root, .em-layout,
  #ctrl-container > div {
    height: calc(100dvh - 48px) !important;
  }

  /* Views ocupam a largura toda no mobile */
  .view { max-width: 100% !important; }
  main { padding: 0 !important; }
  main > .view { padding: 12px 10px 40px; }
  /* Módulos de tela cheia colam nas bordas */
  main > .view:has(#pr-container), main > .view:has(#im-container),
  main > .view:has(#ag-container), main > .view:has(#tk-container),
  main > .view:has(#cl-container), main > .view:has(.wp-root),
  main > .view:has(.em-layout),   main > .view:has(#ctrl-container) {
    padding: 0;
  }

  /* ── Cabeçalhos dos módulos: quebram linha em vez de estourar ── */
  #pr-container > div:first-child,
  #ag-container > div:first-child,
  #tk-container > div:first-child,
  #cl-container > div:first-child,
  #im-container > div:first-child > div {
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    height: auto !important;
  }
  /* Linhas aninhadas dentro dos cabeçalhos também quebram */
  #pr-container > div:first-child div,
  #ag-container > div:first-child div,
  #tk-container > div:first-child div,
  #cl-container > div:first-child div,
  #im-container > div:first-child div {
    flex-wrap: wrap !important;
  }
  #pr-busca, #wp-busca, #em-search {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Agenda: grade do mês rola na horizontal em vez de cortar */
  #ag-main { overflow-x: auto !important; }
  #ag-main [style*="grid-template-columns"] { min-width: 640px; }

  /* Intimações: cards de estatísticas viram fita horizontal compacta
     (empilhados roubavam quase toda a tela da lista) */
  #im-stats {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    -webkit-overflow-scrolling: touch;
  }
  #im-stats > div {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }
  #im-stats > div > div[style*="font-size:26px"] { font-size: 15px !important; }
  #im-stats > div > div[style*="font-size:11px"] { font-size: 9px !important; margin-top: 0 !important; white-space: nowrap; }
  #im-stats > div > div[style*="font-size:10px"] { display: none !important; }
  /* Cabeçalho das Intimações mais enxuto */
  #im-container h2 { font-size: 16px !important; }
  #im-container > div:first-child > div { padding: 8px 10px !important; }

  /* ── Painel de filtros → gaveta off-canvas (classe via mobile.js) ── */
  .m-filters {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    height: 100dvh !important;
    width: min(82vw, 320px) !important;
    max-width: none !important;
    transform: translateX(-105%);
    transition: transform .25s ease;
    z-index: 600 !important;
    box-shadow: 0 0 48px rgba(0,0,0,.28);
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    background: var(--surface) !important;
    border-right: none !important;
  }
  .m-filters.open { transform: none; }
  .m-filters-ov.show {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 590;
  }
  .m-filters-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-mid);
    font: 500 13px 'Figtree', sans-serif;
    cursor: pointer; flex-shrink: 0;
  }
  .m-filters-btn:active { background: var(--blue-light); }

  /* ── Kanban de tarefas: colunas em carrossel com snap ── */
  #tk-board {
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding: 10px !important;
    gap: 10px !important;
  }
  #tk-board > div {
    min-width: 82vw !important;
    width: 82vw !important;
    scroll-snap-align: center;
  }

  /* ── E-mail: lista em tela cheia; mensagem desliza por cima ── */
  .em-layout > div[style*="width:10px"] { display: none !important; }  /* splitters */
  #em-list-panel { width: 100% !important; }
  .em-layout.m-email #em-content {
    position: fixed !important;
    left: 0; right: 0; bottom: 0; top: 48px;
    z-index: 550;
    background: #fff;
    transform: translateX(105%);
    transition: transform .25s ease;
  }
  .em-layout.m-mail-open #em-content { transform: none; }
  /* Composer (Novo e-mail) monta DENTRO do #em-content → precisa trazê-lo à tela */
  .em-layout.m-email #em-content:has(#em-compose-overlay),
  .em-layout.m-compose-open #em-content { transform: none; }
  /* Botão flutuante "Pastas" do e-mail (gaveta com contas/pastas) */
  #m-mail-folders {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom)); right: 78px;
    z-index: 540;
    padding: 10px 16px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-mid);
    font: 500 13px 'Figtree', sans-serif;
    box-shadow: 0 4px 16px rgba(13,27,53,.18);
    cursor: pointer;
  }
  .em-layout.m-mail-open #m-mail-back {
    display: inline-flex; align-items: center; gap: 6px;
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px;
    z-index: 620;
    padding: 10px 18px;
    border: none; border-radius: 999px;
    background: var(--navy); color: #fff;
    font: 500 14px 'Figtree', sans-serif;
    box-shadow: 0 4px 16px rgba(13,27,53,.35);
    cursor: pointer;
  }

  /* ── Controladoria: linhas internas respiram e quebram ── */
  #ctrl-container [style*="padding:16px 24px"],
  #ctrl-container [style*="padding: 16px 24px"] { padding: 12px !important; }
  #ctrl-container [style*="display:flex"],
  #ctrl-container [style*="display: flex"] { flex-wrap: wrap !important; }
  /* Painel lateral "Carga dos Advogados" não cabe no celular */
  #ctrl-container div[style*="width:240px"][style*="border-left"] { display: none !important; }

  /* ── Modais ── */
  .ui-modal__panel {
    width: 96vw !important; max-width: 96vw !important;
    max-height: 90dvh !important; overflow: auto !important;
  }
  /* Painéis inline tipo "position:fixed → filho largura fixa" */
  [style*="position:fixed"] > [style*="width:6"],
  [style*="position:fixed"] > [style*="width:7"],
  [style*="position:fixed"] > [style*="width:8"],
  [style*="position: fixed"] > [style*="width:6"],
  [style*="position: fixed"] > [style*="width:7"],
  [style*="position: fixed"] > [style*="width:8"] {
    width: 96vw !important; max-width: 96vw !important;
    max-height: 92dvh !important; overflow: auto !important;
  }

  /* ── Editor OnlyOffice: cabeçalhos viram fita horizontal rolável
        (wrap roubaria altura do documento) ── */
  #view-oo-editor > div:first-child {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  #view-oo-editor > div:first-child > div { white-space: nowrap; }
  #view-oo-editor > div:first-child button { flex-shrink: 0 !important; }

  /* ── Login ── */
  .login-card { padding: 32px 22px 28px !important; }

  /* ── Tabelas largas roláveis (fallback; mobile.js também trata) ── */
  #cli-main { overflow-x: auto !important; }
  #cli-main table { min-width: 560px; }

  /* Sininho de notificações: abaixo dos modais (senão cobre o ✕ de fechar) */
  #psa-notif-wrap { z-index: 500 !important; }

  /* Player de música: menor e respeitando a área segura */
  #psa-player-fab {
    width: 44px !important; height: 44px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    right: 14px !important;
  }
  #psa-player-panel { right: 10px !important; width: min(92vw, 300px) !important; }

  /* Sininho e player só aparecem no Dashboard; nas demais telas
     atrapalham (campo do WhatsApp, botões de modais, cards) */
  body:not(:has(#view-dashboard:not(.hidden))) #psa-notif-wrap,
  body:not(:has(#view-dashboard:not(.hidden))) #psa-player-fab,
  body:not(:has(#view-dashboard:not(.hidden))) #psa-player-panel { display: none !important; }

  /* ── Safe areas (PWA standalone / notch) ── */
  .topbar { padding-top: env(safe-area-inset-top); height: calc(48px + env(safe-area-inset-top)); }
  .sidebar { padding-top: env(safe-area-inset-top); }
}