/* Gestão do Patrimônio — estados de hover e detalhes que não dão em inline
   (GUIA_ESTILOS.md: CSS dedicado pra hover/pseudo-elemento). */

.gp-tabela th {
  color: var(--muted);
  text-align: left;
  font-weight: var(--font-medium);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.gp-tabela td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.gp-tabela tbody tr:nth-child(odd) td { background: var(--surface-alt); }
.gp-tabela tbody tr:hover td { background: color-mix(in srgb, var(--green) 8%, var(--panel)); }

.gp-kpi { transition: border-color var(--transition-fast, 150ms) ease; }
.gp-kpi:hover { border-color: var(--green); }
.gp-kpi-ativo { border-color: var(--green); }

.gp-dash-card { transition: border-color 150ms ease; }
.gp-dash-card:hover { border-color: var(--green); }

.gp-remover-anexo:hover { color: var(--danger) !important; }

/* ===================================================================
   MOBILE — tabelas e calendário dos módulos de equipamento
   (Patrimônio, Ordem de Serviço, Formulários, Rotinas de Limpeza)

   Problema: <table width:100%> dentro de wrapper com overflow-x:auto.
   No desktop sobra largura e fica certo; no celular o navegador ESMAGA
   as colunas pra caber — vira uma letra por linha e o cabeçalho se
   sobrepõe. A cura é dar min-width à tabela: aí ela para de encolher e
   o wrapper passa a rolar de lado, que é o comportamento pedido.

   Tudo aqui vive dentro do @media: o desktop não muda em nada.
   =================================================================== */
@media (max-width: 768px) {

  /* Rolar de lado em vez de esmagar. min-width é o piso: telas maiores
     que isso continuam usando 100% normalmente. */
  .gp-tabela {
    min-width: 720px;
  }
  .gp-tabela th,
  .gp-tabela td {
    white-space: nowrap;
  }

  /* Colunas de texto longo (nome do bem, descrição da rotina) não podem
     esticar a tabela até o infinito: corta com reticências. */
  .gp-tabela td.gp-col-texto,
  .gp-tabela td:first-child {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Conformidade da limpeza: 31 colunas de dias. A coluna do equipamento
     fica congelada à esquerda enquanto o resto rola (sticky precisa de
     fundo sólido e z-index, senão o conteúdo passa por baixo). */
  .gl-conformidade {
    min-width: 980px;
  }
  .gl-conformidade th:first-child,
  .gl-conformidade td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 2px 0 4px rgba(0, 0, 0, .35);
    min-width: 140px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .gl-conformidade thead th:first-child {
    z-index: 3;
  }

  /* Calendário: o mês continua em grade de 7 colunas. O que estourava a
     tela era a célula sem min-width:0 — o texto do evento (nowrap) forçava
     a coluna a crescer, empurrando o calendário pra fora. */
  .os-cal-grade {
    gap: 3px;
  }
  .os-cal-cel {
    min-width: 0;
    overflow: hidden;
    padding: 3px !important;
    min-height: 54px !important;
  }
  .os-cal-ev {
    font-size: 9px !important;
    padding: 1px 3px !important;
  }
  .os-cal-dia-label {
    font-size: 9px;
  }
}

/* Dica visual de que a tabela rola de lado (só aparece no toque). */
@media (max-width: 768px) and (pointer: coarse) {
  .gp-tabela-scroll {
    position: relative;
  }
  .gp-tabela-scroll::after {
    content: '‹ arraste ›';
    position: absolute;
    top: -18px;
    right: 4px;
    font-size: 9px;
    color: var(--muted);
    letter-spacing: .5px;
  }
}