/*
 * Olika — Camada de responsividade sistêmica
 *
 * Corrige a quebra de layout sem patches por página. A referência é a largura
 * real do conteúdo (main), não a viewport: no painel, a sidebar reduz o espaço
 * disponível e os breakpoints sm:/md:/lg: disparam cedo demais.
 *
 * Ordem de carga: depois de todos os CSS de página. Especificidade baixa com
 * :where() para que regras específicas existentes continuem vencendo.
 */

/* 1. O conteúdo é o container de referência */
main,
.resp-content {
    container-type: inline-size;
    container-name: olika-conteudo;
    min-width: 0;
}

/* 2. Segurança estrutural: flex/grid não estouram o container */
:where(main, main .panel-card, main .ui-card, main .card-padrao) {
    min-width: 0;
}

:where(main .flex > *, main .grid > *) {
    min-width: 0;
}

/* Cards na mesma linha: altura uniforme, sem altura fixa */
:where(main .panel-card, main .panel-stat-card, main .ui-card, main .card-padrao) {
    align-self: stretch;
}

/* Grades de stat cards: todas as linhas com a mesma altura, inclusive entre linhas */
:where(main .grid:has(> .olika-stat-card), main .grid:has(> .panel-stat-card)) {
    grid-auto-rows: 1fr;
}

/* Valor monetário longo: compacta só o card necessário para manter a altura dos menores */
@media (max-width: 639.98px) {
    main .olika-stat-card .stat-valor-longo {
        font-size: 1.0625rem;
    }

    main .olika-stat-card:has(.stat-valor-longo) .items-baseline {
        gap: 0.125rem;
    }

    main .olika-stat-card:has(.stat-valor-longo) .rounded-md.px-2 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* 3. Textos longos quebram dentro do card, sem empurrar botões */
:where(main h1, main h2, main h3, main h4) {
    overflow-wrap: anywhere;
    text-wrap: balance;
    min-width: 0;
}

:where(main p, main li, main strong, main td, main th) {
    overflow-wrap: break-word;
}

:where(main .badge, main .status, main .font-mono, main [data-codigo]) {
    overflow-wrap: anywhere;
}

:where(main p, main li) {
    text-wrap: pretty;
}

/* 4. Mídias e tabelas nunca ultrapassam o card */
:where(main img, main video, main canvas, main svg, main table) {
    max-width: 100%;
}

:where(main .overflow-x-auto, main .table-responsive) {
    max-width: 100%;
    min-width: 0;
}

/* 5. Cabeçalhos e grupos de ação: quebram pela largura do conteúdo */
@container olika-conteudo (max-width: 56rem) {
    :where(
        header.panel-card,
        .ui-page-header,
        .panel-card-header,
        .panel-section__header,
        .mamma-section-header
    ) {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 0.75rem;
    }

    :where(
        header.panel-card > :last-child,
        .ui-page-header__actions,
        .panel-card-header__actions
    ) {
        flex-wrap: wrap;
        max-width: 100%;
    }
}

/* 6. Em conteúdo estreito, título e ações empilham */
@container olika-conteudo (max-width: 42rem) {
    :where(
        header.panel-card,
        .ui-page-header,
        .panel-card-header,
        .panel-section__header,
        .mamma-section-header
    ) {
        flex-direction: column;
        align-items: stretch;
    }

    :where(
        header.panel-card > :last-child,
        .ui-page-header__actions,
        .panel-card-header__actions
    ) {
        width: 100%;
        justify-content: flex-start;
    }

    /* Formulários e cards do painel: uma coluna quando não há largura útil */
    :where(main .panel-card .grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* 8. Fallback para WebView/APK sem container queries */
@supports not (container-type: inline-size) {
    @media (max-width: 1024px) {
        :where(
            header.panel-card,
            .ui-page-header,
            .panel-card-header,
            .panel-section__header,
            .mamma-section-header
        ) {
            flex-wrap: wrap;
            align-items: flex-start;
            row-gap: 0.75rem;
        }

        :where(
            header.panel-card > :last-child,
            .ui-page-header__actions,
            .panel-card-header__actions
        ) {
            flex-wrap: wrap;
            max-width: 100%;
        }
    }

    @media (max-width: 768px) {
        :where(
            header.panel-card,
            .ui-page-header,
            .panel-card-header,
            .panel-section__header,
            .mamma-section-header
        ) {
            flex-direction: column;
            align-items: stretch;
        }

        :where(
            header.panel-card > :last-child,
            .ui-page-header__actions,
            .panel-card-header__actions
        ) {
            width: 100%;
            justify-content: flex-start;
        }

        :where(main .panel-card .grid) {
            grid-template-columns: minmax(0, 1fr) !important;
        }
    }
}


/* PDV: título do cabeçalho e box de endereço no mobile */
@media (max-width: 639.98px) {
    main .pdv-page-header h1 {
        font-size: 1.125rem;
        line-height: 1.25;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}

main .pdv-endereco {
    min-height: 80px;
    max-height: 104px;
}

@media (min-width: 768px) {
    main .pdv-endereco {
        max-height: 80px;
    }
}


/* Sucesso do pedido: o .resp-content mobile não pode encolher a confirmação */
@media (max-width: 768px) {
    main.checkout-success-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Links da Bio: rodapé do item no mobile */
main .bio-link-item-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid var(--border, #e5e7eb);
    padding-top: 0.5rem;
}

@media (min-width: 640px) {
    main .bio-link-item-footer {
        width: auto;
        flex-shrink: 0;
        justify-content: flex-end;
        border-top: 0;
        padding-top: 0;
    }
}