/* ============================================================
   Atzar Digital — Camada responsiva (mobile) — COMPARTILHADA
   Tudo escopado em @media: no desktop NADA muda.
   A sidebar vira um menu off-canvas (hambúrguer no topo).
   ============================================================ */

/* botão hambúrguer (criado pelo atzar-responsive.js) — escondido no desktop */
#atzar-burger { display: none; }
#atzar-nav-overlay { display: none; }

/* ---------- Celular / tablet estreito ---------- */
@media (max-width: 860px) {
  /* a sidebar sai da esquerda (off-canvas) */
  .sidebar {
    position: fixed !important;
    top: 0; left: 0;
    height: 100%; height: 100dvh;
    width: 252px !important;
    z-index: 1200;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 8px 0 44px rgba(0, 0, 0, .55);
  }
  /* no mobile ignora o "minimizar" (sempre largura cheia quando aberta) */
  .sidebar.collapsed { width: 252px !important; }
  body.atzar-nav-open .sidebar { transform: translateX(0); }

  .main { width: 100% !important; max-width: 100% !important; min-width: 0; }

  /* IMPORTANTE: o .app tem position:relative + z-index:1, o que cria um
     "stacking context" e prende a sidebar ATRÁS do overlay (que é filho do body).
     Neutralizar o z-index do .app no mobile faz a sidebar ficar por cima e clicável. */
  .app { z-index: auto !important; }

  /* Diagnóstico — "Ver respostas": as 2 colunas (lista + detalhe) empilham no celular */
  .det-body { flex-direction: column !important; }
  .resp-list-panel {
    width: 100% !important; flex-shrink: 0;
    max-height: 190px; border-right: none;
    border-bottom: 1px solid var(--border, #182040);
  }
  .resp-detail-panel { width: 100% !important; }

  /* hambúrguer fixo no canto superior esquerdo */
  #atzar-burger {
    display: flex; align-items: center; justify-content: center;
    position: fixed; top: 9px; left: 10px; z-index: 1201;
    width: 40px; height: 40px; border-radius: 11px;
    background: rgba(7, 13, 26, .95);
    border: 1px solid var(--border, #182040);
    color: var(--text, #eef2ff);
    cursor: pointer; padding: 0;
  }
  #atzar-burger:active { transform: scale(.94); }

  /* fundo escuro quando o menu está aberto */
  #atzar-nav-overlay {
    position: fixed; inset: 0; z-index: 1199;
    background: rgba(2, 5, 11, .6);
  }
  body.atzar-nav-open #atzar-nav-overlay { display: block; }

  /* abre espaço pro hambúrguer na barra de cima */
  .topbar { padding-left: 60px !important; }

  /* paddings de conteúdo mais enxutos */
  .content, .page { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 600px) {
  /* grids viram 1 coluna */
  .kpi-row, .score-summary, .pc-tipos, .f-kpis, .f-form, .client-info-grid, .pc-row,
  .f-grid2, .diag-hero, .stats-grid, .settings-grid, .sdr-grid, .sc-grid, .popup-cols,
  .pay-row, .pay-mods, .meta, .jornada-overview, .info-grid, .info-box, .info, .gen-row,
  .form-grid, .fin-header, .drawer-grid2, .full, .cc-meta-grid {
    grid-template-columns: 1fr !important;
  }

  /* Mapa da Jornada (e telas com .page): cabeçalho quebra linha e paddings menores */
  .page { padding: 16px 14px 60px !important; }
  .page-header { flex-wrap: wrap !important; gap: 10px !important; }
  /* a linha de serviço (nome | barra | status | ação) empilha com respiro */
  .sc-grid { gap: 6px 10px !important; align-items: start; }
  /* relatório de impressão, se visto inline no celular */
  .report { max-width: 100% !important; padding: 18px 16px !important; }
  /* cartões/painéis da timeline não estouram a largura */
  .tl-card, .tl-expand-panel, .mc-ciclo, .ep-micro-row { max-width: 100% !important; }

  /* drawer e painéis laterais ocupam a tela toda */
  .drawer, .client-drawer, .prod-drawer, .resp-detail-panel { width: 100% !important; max-width: 100% !important; }
  .resp-list-panel { width: 100% !important; }

  /* tabelas rolam na horizontal em vez de estourar */
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* barra de cima pode quebrar linha */
  .topbar { height: auto !important; flex-wrap: wrap; gap: 6px; padding-top: 9px; padding-bottom: 9px; }

  /* reduz paddings grandes de conteúdo */
  .content, .page { padding-left: 12px !important; padding-right: 12px !important; }
}