/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ════════════════════════════════════════════════════════════════════════════
 * Toggle view: cards ↔ lista (item 36 farol v10) — desktop opt-in
 * Permite usuário forçar a visão "cards" mesmo em telas grandes.
 * Aplica mesmas regras de .ph3a-table-mobile-cards do bloco @media (max-width:
 * 767.98px), mas via classe explícita .force-view-cards no wrap.
 * ════════════════════════════════════════════════════════════════════════════ */

.toggle-view-cards-lista {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ph3a-bg-card);
  border: 1px solid var(--ph3a-border);
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 10px;
  font-size: 12px;
}
.toggle-view-cards-lista button {
  border: 0;
  background: transparent;
  color: var(--ph3a-text-light);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.toggle-view-cards-lista button:hover {
  color: var(--ph3a-text);
  background: rgba(0,0,0,.04);
}
:root[data-theme-resolved="dark"] .toggle-view-cards-lista button:hover {
  background: rgba(255,255,255,.06);
}
.toggle-view-cards-lista button.active {
  background: var(--ph3a-accent);
  color: #fff;
}

/* Aplica visão cards no DESKTOP — mesma estrutura do @media mobile */
.force-view-cards .ph3a-table-mobile-cards,
.force-view-cards .ph3a-table-mobile-cards thead,
.force-view-cards .ph3a-table-mobile-cards tbody,
.force-view-cards .ph3a-table-mobile-cards tr,
.force-view-cards .ph3a-table-mobile-cards td {
  display: block;
  width: 100%;
}
.force-view-cards .ph3a-table-mobile-cards thead { display: none; }
.force-view-cards .ph3a-table-mobile-cards tr {
  border: 1px solid var(--ph3a-border);
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--ph3a-bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.force-view-cards .ph3a-table-mobile-cards td {
  border: none !important;
  padding: 8px 0 !important;
  display: block;
  width: 100%;
  font-size: 13px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.force-view-cards .ph3a-table-mobile-cards td:not(:last-child) {
  border-bottom: 1px dashed var(--ph3a-border) !important;
}
.force-view-cards .ph3a-table-mobile-cards td:empty { display: none; }
.force-view-cards .ph3a-table-mobile-cards td::before {
  content: attr(data-label);
  display: block;
  font-weight: 700;
  color: var(--ph3a-text-light);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.force-view-cards .ph3a-table-mobile-cards td[data-label=""]::before,
.force-view-cards .ph3a-table-mobile-cards td:not([data-label])::before {
  content: none;
  margin-bottom: 0;
}
.force-view-cards .table-responsive {
  overflow-x: visible !important;
  overflow: visible !important;
}

/* Em telas grandes, exibe cards em grid (2-3 colunas) pra aproveitar viewport */
@media (min-width: 992px) {
  .force-view-cards .ph3a-table-mobile-cards tbody {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
  }
  .force-view-cards .ph3a-table-mobile-cards tr {
    margin-bottom: 0;
  }
}