/*
 * GS Central
 * Minha Conta — Produtos contratados
 *
 * Corrige somente a estrutura visual dos cards.
 * Não altera contratos, status, valores, links,
 * SSO, pagamentos, permissões ou company_id.
 */

.gs-product-header,
.gs-product-grid,
.gs-product-card,
.gs-product-card > header,
.gs-product-card .account-metrics,
.gs-product-card .account-metrics > article,
.gs-product-card .portal-actions,
.gs-product-card .gs-product-details,
.gs-product-card .account-grid {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

.gs-product-header {
    width: 100%;
    margin: 28px 0 16px;
}

.gs-product-header h2 {
    margin: 5px 0 0;
}

.gs-product-grid {
    display: grid !important;

    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 330px), 1fr)
    ) !important;

    gap: 18px !important;
    align-items: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-x: clip;
}

.gs-product-grid > .gs-product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
}

.gs-product-card {
    position: relative;

    display: flex !important;
    flex-direction: column !important;

    padding: 22px;

    overflow: hidden;

    border-top:
        3px solid
        var(--plan-color, #38bdf8);

    container-name: gs-product-card;
    container-type: inline-size;
}

.gs-product-card > header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100%;

    gap: 14px;
}

.gs-product-card > header > div {
    flex: 1 1 auto;
    min-width: 0;
}

.gs-product-card > header span,
.gs-product-card > header h2 {
    display: block;

    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
}

.gs-product-card > header h2 {
    margin: 5px 0 0;

    font-size: clamp(
        23px,
        2vw,
        29px
    );

    line-height: 1.12;
}

.gs-product-card .portal-status-chip {
    flex: 0 0 auto;

    max-width: 42%;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Regra principal:
 * cards estreitos usam duas colunas.
 */
.gs-product-card .account-metrics {
    display: grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        ) !important;

    gap: 9px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 18px 0 !important;
}

.gs-product-card .account-metrics > article {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    min-height: 82px;

    gap: 6px;

    padding: 12px 10px !important;

    overflow: hidden;

    box-sizing: border-box;

    border:
        1px solid
        var(--portal-line);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, .025);
}

.gs-product-card .account-metrics span,
.gs-product-card .account-metrics strong {
    display: block;

    min-width: 0;
    max-width: 100%;

    overflow-wrap: anywhere;
    word-break: normal;
}

.gs-product-card .account-metrics span {
    color: var(--portal-muted);

    font-size: clamp(
        8px,
        .68vw,
        9px
    );

    line-height: 1.3;
}

.gs-product-card .account-metrics strong {
    color: var(--portal-text);

    font-size: clamp(
        13px,
        1.05vw,
        16px
    );

    line-height: 1.35;
}

.gs-product-card .portal-actions {
    display: flex !important;
    align-items: center !important;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    gap: 9px;

    flex-wrap: wrap;

    margin-top: auto !important;

    padding-top: 2px;
}

.gs-product-card .portal-actions > * {
    min-width: 0;
    max-width: 100%;
}

.gs-product-card .portal-btn {
    min-width: 0;
    max-width: 100%;

    white-space: normal;
    text-align: center;
}

.gs-product-card .gs-product-details {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-top: 16px !important;
    padding-top: 14px !important;

    overflow: hidden;

    border-top:
        1px solid
        rgba(148, 163, 184, .18);
}

.gs-product-card
.gs-product-details
summary {
    width: 100%;
    min-width: 0;

    cursor: pointer;

    color: #7dd3fc;

    font-weight: 800;

    overflow-wrap: anywhere;
}

.gs-product-card
.gs-product-details
.account-grid {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr) !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    gap: 12px !important;

    margin-top: 14px !important;
}

.gs-product-card
.gs-product-details
.card,

.gs-product-card
.account-timeline,

.gs-product-card
.account-payment-list,

.gs-product-card
.account-payment-list > div,

.gs-product-card
.account-timeline > div,

.gs-product-card
.history-list,

.gs-product-card
.history-list > div {
    min-width: 0 !important;
    max-width: 100% !important;

    overflow-wrap: anywhere;
}

/*
 * Somente cards realmente largos recebem
 * os quatro indicadores na mesma linha.
 */
@container gs-product-card (min-width: 600px) {
    .gs-product-card .account-metrics {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }
}

@media (max-width: 760px) {
    .gs-product-grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .gs-product-card {
        padding: 20px;
    }

    .gs-product-card .portal-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .gs-product-card .portal-actions > *,
    .gs-product-card .portal-btn {
        width: 100% !important;
    }
}

@media (max-width: 430px) {
    .gs-product-card {
        padding: 17px;
    }

    .gs-product-card > header {
        gap: 10px;
    }

    .gs-product-card .portal-status-chip {
        max-width: 38%;

        padding: 7px 9px;
    }

    .gs-product-card
    .account-metrics > article {
        min-height: 74px;
    }
}

@media (max-width: 390px) {
    .gs-product-card .account-metrics {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

    .gs-product-card
    .account-metrics > article {
        min-height: 68px;
    }
}