/* =============================================================================
   mobile.css — Responsividade e gaveta (drawer) do menu. FASE 2.
   TUDO está dentro de @media (max-width: 768px) ou (display-mode: standalone),
   portanto o DESKTOP não é afetado. Carregado por último (após theme.css).
   Os rótulos das tabelas-cartão são preenchidos por js/mobile.js (data-label).
   ========================================================================== */

@media (max-width: 768px){

  /* ===== Gaveta (drawer) off-canvas do menu ============================== */
  #sidebar{
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 86vw !important; max-width: 300px !important; min-width: 0 !important;
    height: 100vh !important; max-height: 100vh !important;
    transform: translateX(-100%);
    transition: transform .28s var(--ease-out);
    z-index: 1060;
    padding-top: env(safe-area-inset-top);
  }
  body.mobile-nav-open #sidebar{ transform: translateX(0); box-shadow: var(--shadow-lg); }
  /* Topbar acima do backdrop quando a gaveta abre (para tocar no X) */
  body.mobile-nav-open .app-topbar{ z-index: 1058; }

  .mobile-nav-backdrop{
    position: fixed; inset: 0; background: rgba(2, 6, 23, .5);
    opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1050;
  }
  body.mobile-nav-open .mobile-nav-backdrop{ opacity: 1; visibility: visible; }
  body.mobile-nav-open{ overflow: hidden; }  /* trava o scroll do fundo */

  /* Topbar: safe-area (notch) + hambúrguer maior */
  .app-topbar{
    padding-top: env(safe-area-inset-top);
    height: calc(var(--app-topbar-height) + env(safe-area-inset-top));
  }
  .app-topbar__menu{ width: 42px; height: 42px; }
  .app-topbar__badge{ max-width: 26vw; }

  /* Conteúdo ocupa a largura toda (sidebar saiu do fluxo) */
  .main-content{ width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .container-fluid{ padding-left: .75rem; padding-right: .75rem; }

  /* ===== Inputs com 16px (evita zoom automático no iOS) ================= */
  .form-control, .form-select, input, select, textarea{ font-size: 16px; }

  /* Alvos de toque mais confortáveis */
  .btn{ min-height: 38px; }

  /* ===== Tabelas viram CARTÕES empilhados =============================== */
  .table-responsive{ overflow-x: visible; }
  .table-responsive table thead{ display: none; }
  .table-responsive table tbody tr{
    display: block; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); padding: .4rem .75rem; margin-bottom: .65rem;
  }
  .table-responsive table tbody td{
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    border: 0 !important; padding: .4rem 0; text-align: right;
  }
  .table-responsive table tbody td::before{
    content: attr(data-label); font-weight: 600; color: var(--c-text-soft);
    text-align: left; margin-right: auto;
  }
  /* Linhas de "carregando/vazio" (colspan) ocupam tudo, centralizadas */
  .table-responsive table tbody td[colspan]{ justify-content: center; text-align: center; }
  .table-responsive table tbody td[colspan]::before{ content: ''; margin: 0; }

  /* ===== ticket.php: empilhar painéis (vence o !important do desktop pela
     especificidade de #main-content; também neutraliza minimizar/expandir) ==*/
  #main-content #painel-informacoes,
  #main-content #painel-timeline{
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; min-width: 0 !important;
  }
  #main-content #painel-informacoes .card{ height: auto !important; }

  /* Modais com mais respiro */
  .modal-dialog:not(.modal-sm){ margin: .5rem; }
}

/* Safe-area inferior apenas no app instalado (PWA standalone) */
@media (display-mode: standalone){
  body{ padding-bottom: env(safe-area-inset-bottom); }
}