/* Page Header - Padrão Global */
.pageHeader {
    background: var(--background-light);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-xl);
    padding: var(--padding-xxl);
    margin-bottom: 15px;
    position: relative;

    h1 {
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--gap-sm) 0;
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--gap-sm);
        color: var(--brand-primary);

        .icon {
            color: var(--brand-primary);
        }
    }

    /* H8.3: descrição em uma linha (div: permite blocos filhos ex.: Tag + texto sem <p><div> inválido) */
    .descriptionBlock {
        font-size: var(--font-size-md);
        margin: 0;
        position: relative;
        color: var(--brand-primary);
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--gap-lg);
    }

    .titleSection {
        flex: 1;
        min-width: 0;
    }

    .titleMainRow {
        display: flex;
        align-items: center;
        gap: var(--gap-lg);
        flex-wrap: wrap;
        min-width: 0;
        width: 100%;
    }

    .titleMainRowWithTrailing h1 {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .titleTrailing {
        flex: 1 1 280px;
        min-width: 0;
        max-width: 100%;
    }

    .actions {
        display: flex;
        gap: var(--gap-sm);
        align-items: center;
        flex-shrink: 0;
    }
}

/* Page Header Pagina - Layout Flex */
.pageHeaderPagina {
    background: var(--background-light);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-xl);
    padding: 14px 18px;
    /* Separa o bloco do cabeçalho do topo do conteúdo (ex.: sem breadcrumb ou após a barra do layout). */
    margin-top: var(--gap-lg);

    @media (max-width: 768px) {
        /* Mobile: o inset superior vem do PageWrapper / `.content`; evita somar 20px ao lateral (15px). */
        margin-top: 0;
    }
    margin-bottom: 15px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--gap-lg);

    h1 {
        font-size: var(--font-size-h1);
        font-weight: var(--font-weight-bold);
        margin: 3px 0 0 0;
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--gap-sm);
        color: var(--brand-primary);

        .icon {
            color: var(--brand-primary);
        }
    }

    .descriptionBlock {
        font-size: var(--font-size-md);
        margin: 0;
        position: relative;
        color: var(--brand-primary);
        opacity: 0.8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--gap-lg);
        width: 100%;
    }

    .titleSection {
        flex: 1;
        min-width: 0;
    }

    .titleMainRow {
        display: flex;
        align-items: center;
        gap: var(--gap-lg);
        flex-wrap: wrap;
        min-width: 0;
        width: 100%;
    }

    .titleMainRowWithTrailing h1 {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .titleTrailing {
        flex: 1 1 280px;
        min-width: 0;
        max-width: 100%;
    }

    .actions {
        display: flex;
        gap: var(--gap-sm);
        align-items: center;
        flex-shrink: 0;
        position: static;
        margin-left: auto;
    }

    &.withActions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--gap-lg);

        .titleSection {
            flex: 1;
            min-width: 0;
        }
    }

    /* Detalhe: título numa linha (ellipsis) e ações na linha seguinte */
    &.stackActionsBelow {
        .content {
            flex-direction: column;
            align-items: stretch;
        }

        .titleSection {
            flex: none;
            width: 100%;
            min-width: 0;
        }

        .titleMainRow {
            flex-wrap: nowrap;
        }

        h1 {
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            min-width: 0;
        }

        h1.titleRow {
            display: flex;
            flex-wrap: nowrap;
            align-items: flex-start;
            width: 100%;
            min-width: 0;
            flex: 1 1 auto;
            max-width: 100%;
        }

        .titleStack {
            flex: 1;
            min-width: 0;
            overflow: hidden;
        }

        .titleHeadingText {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            width: 100%;
            min-width: 0;

            /* Edição inline (Input): ocupar a largura do header, sem ellipsis no campo */
            &:has(:global(.ant-input)) {
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
            }
        }

        .actions {
            width: 100%;
            margin-left: 0;
            margin-top: 10px;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
    }
}

.contextStrip {
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.contextStripIcon {
    flex-shrink: 0;
}

.contextStripDescription {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary, rgba(0, 0, 0, 0.65));
}

/* Barra fixa de ações no mobile (variant pagina) */
.actionsMobileBar {
    display: none;
}

/* Responsivo */
@media (max-width: 768px) {
    .pageHeader,
    .pageHeaderPagina {
        padding: var(--padding-lg);
        margin-bottom: 15px;

        h1 {
            font-size: var(--font-size-h2);
        }
    }

    /* RESP-011: wrap e touch target ≥44px para ações no header (default e pagina) */
    .pageHeader {
        .content {
            flex-wrap: wrap;
            min-width: 0;
        }

        .actions {
            flex-wrap: wrap;
            min-width: 0;
            width: 100%;
            justify-content: flex-start;
            margin-top: var(--gap-sm);

            :global(.ant-btn) {
                min-height: 44px;
                min-width: 44px;
            }
        }
    }

    .pageHeaderPagina {
        flex-direction: column;
        align-items: stretch;
        min-width: 0;
        max-width: 100%;

        h1 {
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            max-width: 100%;
        }

        &.stackActionsBelow {
            h1 {
                display: flex;
            }

            .titleHeadingText {
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
            }
        }

        .content {
            flex-direction: column;
            min-width: 0;
            width: 100%;
        }

        .titleSection {
            flex: none;
            width: 100%;
            min-width: 0;
        }

        /* Esconde ações dentro do header no mobile (vão para a barra fixa) */
        .actions[data-mobile-hidden] {
            display: none !important;
        }

        .actions,
        .pageHeader .actions {
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
            margin-top: var(--gap-md);
            margin-left: 0;
        }
    }

    /* Barra fixa no rodapé: 100% largura, só no mobile; ações numa linha */
    .actionsMobileBar {
        display: flex;
        align-items: center;
        justify-content: stretch;
        gap: var(--gap-sm);
        flex-wrap: nowrap;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        background: var(--background-light);
        border-top: 1px solid var(--border);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
        z-index: 100;
        overflow: hidden;
        min-height: 0;

        :global(.ant-space) {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: center;
            width: 100%;
            min-width: 0;
            gap: 8px !important;
        }

        :global(.ant-space-item) {
            flex: 1 1 0;
            min-width: 0;
            max-width: none;
            margin: 0 !important;
        }

        /* «Mais» / botão circular não partilha largura com os demais */
        :global(.ant-space-item:has(.ant-btn-circle)) {
            flex: 0 0 auto;
        }

        :global(.ant-btn) {
            min-height: 44px;
            min-width: 0;
            width: 100%;
            max-width: 100%;
            padding-inline: 10px;
            font-size: 13px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        :global(.ant-btn-circle) {
            width: 44px !important;
            min-width: 44px !important;
            max-width: 44px;
            padding-inline: 0;
            flex-shrink: 0;
        }

        :global(.ant-btn .anticon + span),
        :global(.ant-btn span + .anticon) {
            margin-inline: 4px;
        }

        /* Ícones nos botões de texto ocupam largura — barra compacta só com rótulo */
        :global(.ant-btn:not(.ant-btn-circle) .anticon) {
            display: none;
        }

        :global(.ant-btn:not(.ant-btn-circle) .anticon + span) {
            margin-inline-start: 0;
        }

        /* Detalhe com «Mais»: só ícone + mobileBarSecondary na barra fixa */
        :global([data-detail-header-actions='collapse-mobile']) {
            :global(.ant-space-item:has([data-detail-header-primary])),
            :global(.ant-space-item:has([data-detail-header-secondary])) {
                display: none;
            }
        }
    }
}

/* MOB-017: 320px–430px — título e ações sem overflow horizontal */
@media (max-width: 430px) {
    .pageHeader,
    .pageHeaderPagina {
        min-width: 0;
        max-width: 100%;
        padding: 14px 12px;
        margin-bottom: 15px;

        h1 {
            font-size: var(--font-size-page-title-mobile);
            line-height: 1.35;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            min-width: 0;
        }

        .titleSection {
            min-width: 0;
        }

        .content {
            min-width: 0;
        }
    }

    .actionsMobileBar {
        padding: 8px max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
        gap: 6px;

        :global(.ant-space) {
            gap: 6px !important;
        }

        :global(.ant-btn) {
            padding-inline: 8px;
            font-size: 12px;
        }
    }

    /* RESP-011: default variant — ações no header com wrap e 44px em 320px */
    .pageHeader .actions :global(.ant-btn) {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Título com bloco à esquerda (foto + coluna nome/subtítulo) */
.pageHeader h1.titleRow,
.pageHeaderPagina h1.titleRow {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
    box-sizing: border-box;
}

.pageHeader .titleLeading,
.pageHeaderPagina .titleLeading {
    flex-shrink: 0;
    display: flex;
    align-items: center;

    :global(.ant-avatar) {
        width: 44px !important;
        height: 44px !important;
        min-height: 44px;
        min-width: 44px;
        max-height: 44px;
        max-width: 44px;
        flex-shrink: 0;
        aspect-ratio: 1;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}

.pageHeader .titleStack,
.pageHeaderPagina .titleStack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.pageHeader .titleHeadingText,
.pageHeaderPagina .titleHeadingText {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.25;
    word-break: break-word;
}

.pageHeaderPagina .titleHeadingText {
    margin-bottom: 8px;
}

.pageHeader .titleAboveName,
.pageHeaderPagina .titleAboveName {
    margin-top: 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary, rgba(0, 0, 0, 0.65));
    width: 100%;
    max-width: 100%;
}

.pageHeader .titleBelowName,
.pageHeaderPagina .titleBelowName {
    font-size: var(--font-size-md);
    font-weight: 400;
    width: 100%;
    max-width: 100%;
}

/* Tema escuro: alinhado a ContentCard / tokens do app (html.dark) */
:global(.dark) .pageHeader,
:global(.dark) .pageHeaderPagina {
    background: #141414;
    border-color: #303030;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);

    h1 {
        color: rgba(255, 255, 255, 0.9);

        .icon {
            color: var(--primary, #c4b5fd);
        }
    }

    .titleAboveName {
        color: rgba(255, 255, 255, 0.55);
    }

    .titleBelowName {
        color: rgba(255, 255, 255, 0.72);
    }

    .descriptionBlock {
        color: rgba(255, 255, 255, 0.55);
        opacity: 1;
    }
}

:global(.dark) .actionsMobileBar {
    background: #141414;
    border-top-color: #303030;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.45);
}