/* ==========================================================================
   VIEW DETAIL — lista compacta de informações (páginas "visualizar")
   --------------------------------------------------------------------------
   Converte os grids de cartões altos das telas de visualização em uma lista
   enxuta de "rótulo à esquerda / valor à direita" no mobile.

   Carregado por último (depois dos CSS por página), então sobrescreve as
   regras de .view-card de cada shell. A página de lançamento já possui um
   layout compacto próprio e fica de fora via :not(.lancamento-view-shell).
   ========================================================================== */

@media (max-width: 767.98px) {
  /* O grid vira um único cartão que agrupa as linhas. */
  .view-shell:not(.lancamento-view-shell) .view-grid {
    display: block !important;
    margin: 0 !important;
    padding: 0 0.95rem !important;
    border: 1px solid rgba(203, 213, 225, 0.74) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.045) !important;
    overflow: hidden !important;
  }

  /* Cada card vira uma linha: rótulo à esquerda, valor à direita. */
  .view-shell:not(.lancamento-view-shell) .view-grid .view-card {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 0.9rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0.62rem 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }

  .view-shell:not(.lancamento-view-shell) .view-grid .view-card:last-child {
    border-bottom: 0 !important;
  }

  .view-shell:not(.lancamento-view-shell) .view-grid .view-card strong {
    flex: 0 0 auto;
    margin: 0 !important;
    color: #64748b !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
  }

  .view-shell:not(.lancamento-view-shell) .view-grid .view-card span {
    min-width: 0;
    color: #0f172a !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: right !important;
    overflow-wrap: anywhere;
  }

  /* Campos longos (endereço, observações) empilham rótulo sobre o valor. */
  .view-shell:not(.lancamento-view-shell) .view-grid .view-card.is-wide {
    display: block !important;
  }

  .view-shell:not(.lancamento-view-shell) .view-grid .view-card.is-wide strong {
    display: block;
    margin-bottom: 0.28rem !important;
    white-space: normal;
  }

  .view-shell:not(.lancamento-view-shell) .view-grid .view-card.is-wide span {
    text-align: left !important;
  }
}