/* 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 KPI: grid de cards ↔ lista compacta (item 53 farol v10)
 * Permite alternar entre `display: grid` (default) e `display: flex column`
 * com cards horizontais. Útil pra usuários que preferem visão tabular dos
 * KPIs ou pra telas com muitos KPIs (>8).
 * ════════════════════════════════════════════════════════════════════════════ */

.force-view-list-kpi.kpi-grid,
.force-view-list-kpi .kpi-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.force-view-list-kpi .kpi-card-v2 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px;
  padding: 10px 16px;
  transform: none !important;
}
.force-view-list-kpi .kpi-card-v2:hover {
  transform: none !important;
}
.force-view-list-kpi .kpi-card-v2 .kpi-icon-wrap {
  width: 32px;
  height: 32px;
  font-size: 14px;
  margin-bottom: 0;
  flex-shrink: 0;
}
.force-view-list-kpi .kpi-card-v2 .kpi-value {
  font-size: 18px !important;
  margin: 0;
  min-width: 80px;
  order: 2;
}
.force-view-list-kpi .kpi-card-v2 .kpi-label {
  font-size: 13px !important;
  margin: 0;
  flex: 1;
  order: 3;
  color: var(--ph3a-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
.force-view-list-kpi .kpi-card-v2 .kpi-trend,
.force-view-list-kpi .kpi-card-v2 .kpi-extra {
  order: 4;
  font-size: 12px;
  margin: 0;
}

/* Cobre também .kpi-card legacy (tickets/dashboard.html) */
.force-view-list-kpi.row,
.force-view-list-kpi.kpi-cards-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.force-view-list-kpi .kpi-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px;
  padding: 10px 16px !important;
}
.force-view-list-kpi .kpi-card .icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 14px !important;
  margin-bottom: 0 !important;
  flex-shrink: 0;
}
.force-view-list-kpi .kpi-card .val {
  font-size: 18px !important;
  min-width: 80px;
}
.force-view-list-kpi .kpi-card .lbl {
  font-size: 13px !important;
  margin-top: 0 !important;
  flex: 1;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--ph3a-text) !important;
}