/* Cards gerados pelo toggle tabela<->cards (grid-view-toggle.js). */

/* Em telas pequenas o grid é sempre cards (#61): o seletor de visão não se aplica. */
@media (max-width: 767.98px) {
    .grid-view-toggle {
        display: none !important;
    }
}

.grid-view-toggle .btn {
    padding: 0.35rem 0.6rem;
    line-height: 1;
}
.grid-view-toggle .btn.active {
    background: var(--color-primary, var(--color-primary));
    border-color: var(--color-primary, var(--color-primary));
    color: var(--color-surface-card);
}

.grid-cards-container {
    padding: var(--spacing-sm);
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.grid-cards--action-heavy,
.grid-cards[data-grid-key="admin-administradores"],
.grid-cards[data-grid-key="admin-parceiros"],
.grid-cards[data-grid-key="admin-empresas"],
.grid-cards[data-grid-key="admin-clientes"],
.grid-cards[data-grid-key="partner-investidores"],
.grid-cards[data-grid-key="partner-home"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
}

.grid-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    min-height: 15.5rem;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: 12px;
    background: var(--color-surface-card);
    box-shadow: var(--shadow-xs);
    height: 100%;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.grid-card:hover {
    border-color: var(--color-gray-300);
    box-shadow: var(--shadow-sm);
}

.grid-card__title {
    display: flex;
    min-height: 3rem;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.2rem;
    font-weight: 600;
    color: var(--color-gray-800);
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.grid-card__title > * {
    min-width: 0;
}

.grid-card__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.4rem;
}

.grid-card__field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 2.1rem;
    font-size: 0.85rem;
    min-width: 0;
}

.grid-card__label {
    color: var(--color-text-muted, var(--color-gray-500));
    flex: 0 0 auto;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.grid-card__value {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 68%;
    text-align: right;
    color: var(--color-gray-800);
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}

.grid-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-gray-200);
    /* Alinha botões + linha divisória 100% no FUNDO do card, independentemente da
       altura do conteúdo (cards da mesma linha têm altura igual via grid stretch). */
    margin-top: auto;
    /* Visão CARD: botões de ação CENTRALIZADOS (oposto da visão tabela, que é à
       esquerda). Vale para o conjunto de botões e quebra de linha. */
    align-items: center;
    justify-content: center;
}

/* O toggle copia o innerHTML da célula de ações, trazendo o wrapper .table-actions
   da tabela para dentro do card. Dentro do card ele deve CENTRALIZAR (a regra de
   tabela alinha à esquerda) e ocupar a largura toda para o centro ficar real.
   O seletor inclui o container do toggle + as classes de dashboard p/ vencer em
   especificidade a regra `.main-content .table-actions` (que alinha à esquerda). */
:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions .table-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 7.75rem), 1fr));
    align-items: stretch;
    justify-content: stretch;
    gap: var(--spacing-xs);
}

:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions[data-action-count="4"] .table-actions,
:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions[data-action-count="5"] .table-actions,
:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions[data-action-count="6"] .table-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions .table-actions :is(.btn, a.btn, button.btn) {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding-right: 0.55rem;
    padding-left: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions .table-actions form {
    width: 100%;
}

@media (max-width: 575.98px) {
    .grid-cards-container {
        padding: var(--spacing-xs);
    }

    .grid-card {
        min-height: 0;
    }

    .grid-card__title {
        min-height: 0;
    }

    .grid-card__field {
        flex-direction: column;
        gap: 0.15rem;
    }

    .grid-card__value {
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    :is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions .table-actions,
    :is(.admin-dashboard, .customer-dashboard, .partner-dashboard) .grid-cards-container .grid-card__actions[data-action-count] .table-actions {
        grid-template-columns: 1fr;
    }
}