/* ================================================================
   CENTRAL DE CHAMADOS — MOBILE.CSS  (v1.0)
   Complemento global mobile-first. Incluído APÓS o CSS de módulo.
   Não afeta o layout desktop (todos os blocos são dentro de @media).
   ================================================================ */

/* ── 1. PREVENIR ZOOM AUTOMÁTICO NO iOS ─────────────────────────
   iOS faz zoom quando font-size < 16px num input focado. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ── 2. TOUCH TARGETS MÍNIMOS (chips, backlink) ──────────────────
   Recomendação Apple/Google: 44-48px de área tocável. */
@media (max-width: 768px) {
  .chip span,
  .chips label span,
  .chip label span {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .backlink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── 3. DEFINIR cam-two E cam-three (AUSENTES no CSS original) ───
   Necessário para formulários de câmera de segurança em ti.html. */
.cam-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
}

.cam-three {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
}

/* ── 4. COLAPSAR GRIDS DE FORMULÁRIO EM TELAS PEQUENAS ──────────
   Evita scroll horizontal em campos side-by-side. */
@media (max-width: 600px) {
  .cam-two,
  .cam-three,
  .access-grid,
  .two-col,
  .grid.cam-two,
  .grid.cam-three,
  .grid.access-grid,
  .grid.two-col {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
}

/* ── 5. HERO COMPACTO PARA PÁGINAS DE FORMULÁRIO ─────────────────
   Formulários simples (ti, jurídico, manutenção...) têm hero sem
   sidebar/hamburguer. Em mobile: linha única compacta logo + título.
   Usa :has() para detectar hero sem .hamburger-btn (suporte ≥ 2023). */
@media (max-width: 768px) {
  .hero-inner:not(:has(.hamburger-btn)) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    min-height: 0 !important;
    gap: 10px !important;
  }

  .hero-inner:not(:has(.hamburger-btn)) .logo {
    height: 40px !important;
    flex-shrink: 0;
  }

  .hero-inner:not(:has(.hamburger-btn)) .hero-title {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: auto !important;
    pointer-events: auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-align: center !important;
    flex: 1;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .hero-inner:not(:has(.hamburger-btn)) .ghost {
    display: none !important;
  }
}

/* ── 6. TÍTULO MOBILE PARA PÁGINAS COM SIDEBAR (index, painéis) ─
   Mostra nome compacto do sistema entre logo e hamburger. */
.hero-mobile-title {
  display: none;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .hero-mobile-title {
    display: block;
    flex: 1;
    text-align: center;
    padding: 0 8px;
  }
}

/* ── 7. MODAIS COMO BOTTOM-SHEET ─────────────────────────────────
   Em vez de caixas centralizadas (que ficam muito pequenas),
   os modais deslizam de baixo para cima como uma gaveta. */
@media (max-width: 480px) {
  .modal-backdrop,
  .modal-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal-card,
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh !important;
    border-radius: 20px 20px 0 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 8. CONTAINER: padding ajustado em mobile ────────────────────*/
@media (max-width: 480px) {
  .container {
    padding: 0 10px !important;
    margin-top: 16px !important;
    margin-bottom: 40px !important;
  }
}

/* ── 9. TABELA DE PAINEL: scroll horizontal suave ────────────────*/
.table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .table-wrapper {
    /* Indicador visual de que há conteúdo além do scroll */
    background:
      linear-gradient(to right, #fff 30%, transparent) left center,
      linear-gradient(to left, #fff 30%, transparent) right center;
    background-size: 40px 100%, 40px 100%;
    background-attachment: local, local;
    background-repeat: no-repeat;
  }
}

/* ── 10. BOTÃO DE SUBMIT: largura total em mobile ────────────────*/
@media (max-width: 600px) {
  .actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .actions .btn,
  .actions button[type="submit"],
  .actions button[type="button"] {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    font-size: 16px !important;
  }
}

/* ── 11. PAGINAÇÃO: centralizar e ampliar área de toque ──────────*/
@media (max-width: 600px) {
  .pagination {
    justify-content: center !important;
    gap: 8px !important;
  }

  .pag-btn {
    padding: 12px 20px !important;
  }

  .pag-btn.ghost {
    width: auto !important;
    padding: 12px 18px !important;
  }

  .page {
    width: 40px !important;
    height: 40px !important;
    font-size: 14px !important;
  }
}

/* ── 12. CARD BASE: raio e padding reduzidos em telas muito pequenas */
@media (max-width: 360px) {
  .card {
    border-radius: 14px !important;
    padding: 14px 12px !important;
  }

  .tile {
    border-radius: 12px !important;
  }
}

/* ── 13. PREVENIR OVERFLOW HORIZONTAL GLOBAL ─────────────────────*/
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ── 14. TÍTULO DO HERO: ocultar em mobile ───────────────────────────
   O .hero-title fica quebrado em telas estreitas; o logo já identifica
   o sistema.                                                            */
@media (max-width: 900px) {
  .hero-title {
    display: none !important;
  }
}

/* ── 15. PAINÉIS — BARRA DE NAVEGAÇÃO SUPERIOR ──────────────────
   A barra usa inline styles (flex + space-between). O pai já tem
   flex-wrap:wrap, mas os action links internos também precisam. */
@media (max-width: 768px) {
  .container > div:first-child {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  .container > div:first-child > div {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── 16. PAINÉIS — SEÇÃO DE FILTROS ─────────────────────────────
   Desktop: busca + controles lado a lado (flex row).
   Mobile:  stack vertical — cada campo ocupa 100% da largura.  */
@media (max-width: 768px) {
  .filters-row {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: stretch !important;
  }

  .search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .search input,
  #fBusca {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .controls {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  label.select {
    width: 100% !important;
  }

  label.select select {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .chips {
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  /* Chip: altura mínima de toque já está na seção 2; aqui garante
     que os chips não estiquem além do necessário em telas estreitas */
  .chip span {
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
}

/* ── 17. PAINÉIS — TABELA: SCROLL HORIZONTAL ────────────────────
   .thead e .trow usam CSS grid com colunas fixas (min 860px total).
   Envolvemos o card que contém a tabela em scroll horizontal sem
   quebrar o layout externo. Usa :has() — suportado Chrome 105+,
   Firefox 121+, Safari 15.4+.                                    */
@media (max-width: 768px) {
  section.card:has(.thead) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* thead e trow mantêm largura mínima para permanecer legíveis */
  .thead,
  .trow {
    min-width: 860px !important;
  }

  /* Cabeçalho do card (título + legenda) pode quebrar linha */
  .list-head {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .legend {
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 12px !important;
  }
}

/* ── 18. PAINÉIS — MODAL COMO BOTTOM-SHEET (complemento) ────────
   A seção 7 já trata .modal-backdrop e .modal-overlay, mas o
   container real do modal é .modal (position:fixed, flex center).
   Aqui reposicionamos para baixo como gaveta.                    */
@media (max-width: 480px) {
  .modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  /* Setas de navegação entre chamados ficam fora da tela em mobile */
  .nav-btn.nav-left,
  .nav-btn.nav-right {
    display: none !important;
  }

  /* Cabeçalho do modal compacto */
  .modal-head {
    padding: 14px 16px !important;
  }

  /* Corpo do modal com padding lateral confortável */
  .modal-body {
    padding: 16px !important;
  }

  /* Ações do modal empilhadas */
  .modal-actions {
    flex-direction: column !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  .modal-actions .spacer {
    display: none !important;
  }

  .modal-actions .btn {
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
  }

  /* row/col dentro do modal: stack vertical */
  .modal-body .row {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .modal-body .col {
    min-width: 0 !important;
  }
}