/**
 * APP HEADER — Pharmdata Design System v1.0
 *
 * Moldura global para aplicativos autenticados. O componente define anatomia
 * e estados; navegação local, título de página e capacidades do produto são
 * composições externas.
 */

.app-header {
    box-sizing: border-box;
    inline-size: 100%;
    background: var(--surface-institutional);
    border-block-end: 1px solid color-mix(in srgb, var(--cloud-fixed) 14%, transparent);
    box-shadow: none;
    color: var(--cloud-fixed);
    font-family: var(--font-sans);
}

.app-header *,
.app-header *::before,
.app-header *::after {
    box-sizing: border-box;
}

.app-header--sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
}

/* Protege a âncora institucional dos overrides globais legados de header. */
:root.dark-mode .app-header,
[data-theme="dark"] .app-header {
    background: var(--surface-institutional);
    border-block-end-color: color-mix(in srgb, var(--cloud-fixed) 14%, transparent);
    box-shadow: none;
}

.app-header__inner {
    display: flex;
    min-block-size: var(--space-16);
    max-inline-size: var(--container-2xl);
    margin-inline: auto;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-6);
}

.app-header__start,
.app-header__actions,
.app-header__identity,
.app-header__account {
    display: flex;
    min-inline-size: 0;
    align-items: center;
}

.app-header__start {
    gap: var(--space-3);
}

.app-header__capability {
    flex: 1 1 auto;
    min-inline-size: 0;
}

.app-header__actions {
    margin-inline-start: auto;
    gap: var(--space-1);
}

.app-header__identity {
    gap: var(--space-2);
    color: inherit;
    line-height: var(--leading-tight);
    text-decoration: none;
    white-space: nowrap;
}

.app-header__product-name {
    color: var(--cloud-fixed);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
}

.app-header__organization {
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid color-mix(in srgb, var(--cloud-fixed) 22%, transparent);
    color: var(--mint-signal-fixed);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.app-header__navigation-trigger,
.app-header__action {
    display: inline-flex;
    min-block-size: var(--space-11);
    min-inline-size: var(--space-11);
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    color: inherit;
    cursor: pointer;
    font: inherit;
}

.app-header__navigation-trigger:hover,
.app-header__action:hover {
    background: color-mix(in srgb, var(--cloud-fixed) 9%, transparent);
}

.app-header__navigation-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--mint-signal-fixed) 14%, transparent);
    border-color: color-mix(in srgb, var(--mint-signal-fixed) 45%, transparent);
    color: var(--mint-signal-fixed);
}

.app-header__identity:focus-visible,
.app-header__navigation-trigger:focus-visible,
.app-header__action:focus-visible {
    outline: 3px solid var(--mint-signal-fixed);
    outline-offset: 2px;
}

.app-header__icon {
    inline-size: var(--icon-lg);
    block-size: var(--icon-lg);
    font-size: var(--icon-lg);
}

.app-header__account {
    gap: var(--space-2);
    margin-inline-start: var(--space-2);
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid color-mix(in srgb, var(--cloud-fixed) 18%, transparent);
}

.app-header__avatar {
    display: inline-flex;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    background: var(--mint-signal-fixed);
    border-radius: var(--radius-full);
    color: var(--emerald-abyss-fixed);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}

.app-header__account-copy {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    line-height: var(--leading-tight);
}

.app-header__account-name {
    overflow: hidden;
    color: var(--cloud-fixed);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__account-context {
    margin-block-start: var(--space-1);
    color: var(--mint-signal-fixed);
    font-size: var(--text-xs);
}

@media (max-width: 640px) {
    .app-header__inner {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .app-header__start {
        gap: var(--space-2);
    }

    .app-header__organization,
    .app-header__account-copy {
        display: none;
    }

    .app-header__account {
        margin-inline-start: 0;
        padding-inline-start: var(--space-2);
    }
}

@media (forced-colors: active) {
    .app-header {
        border-color: CanvasText;
    }

    .app-header__navigation-trigger,
    .app-header__action,
    .app-header__avatar {
        border: 1px solid CanvasText;
    }
}