/* vmshub-list.css — padrao COMPARTILHADO das TELAS DE LISTA do VMSHub (cartoes + tabela), etapa DG+LISTA, 21/10/2026. Camada de TEMA: carregar DEPOIS de vmshub-theme.css.
 * Mora aqui o que a lista de Cameras (/cameras, /company/cameras) e as Deteccoes globais (/detections) dividem: cabecalho (.f3-headr), "visto ha" (.f3-seen), faixa de resumo (.f3-strip), grade de cartoes (.f3-grid),
 * esqueleto de carregamento (.f3-sk*) e densidade. UM conceito em UM lugar: nenhuma das duas telas repete estas regras no CSS local.
 * Uso: a RAIZ da tela leva a classe .vm-list junto de .f3-wrap (<div class="f3-wrap vm-list" id="f3c-root"> | id="dg-root">). Fora de .vm-list nada muda.
 * As classes f3-* (cartao, resumo, filtro, tabela, rodape, estados) continuam na camada do Shell (<style id="vmshub-f3-style">). Cor SO por var(--token); nenhum hex.
 * A camada vmshub-theme.css NAO pode ter @media de largura (sonda p0a T15): por isso este padrao mora em arquivo proprio, como vmshub-snav.css. */
.vm-list .f3-head .f3-headr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vm-list .f3-seen { font-size: 12px; color: var(--muted); }
.vm-list .f3-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* grade: 4 colunas em 1280 (conteudo do Shell = viewport - 248 de menu), gap 14; compacta 200/10; celular 1 coluna */
.vm-list .f3-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (max-width: 760px) { .vm-list .f3-grid, html[data-density="dense"] .vm-list .f3-grid { grid-template-columns: 1fr; } }
.vm-list .f3-sk { background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: f3shim 1.4s linear infinite; border-radius: 6px; }
@keyframes f3shim { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .vm-list .f3-sk { animation: none !important; } }
/* esqueleto: classes PROPRIAS (f3-sk*), nunca .f3-tile/.f3-grid/.f3-sum — nada que espere/conte cartoes reais pode confundir esqueleto com item */
.vm-list .f3-skgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (max-width: 760px) { .vm-list .f3-skgrid { grid-template-columns: 1fr; } }
.vm-list .f3-skt { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.vm-list .f3-skthumb { aspect-ratio: 16 / 9; border-radius: 0; }
.vm-list .f3-skbody { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.vm-list .f3-skstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.vm-list .f3-sksum { background: var(--surface); border: 2px solid var(--border); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
/* densidade (preferencia do usuario, Shell: html[data-density="dense"]) */
html[data-density="dense"] .vm-list .f3-grid { gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
html[data-density="dense"] .vm-list .f3-body { padding: 6px 8px 8px; gap: 3px; }
html[data-density="dense"] .vm-list .f3-tw th, html[data-density="dense"] .vm-list .f3-tw td { padding: 5px 10px; }