/* =========================================================
   UIX modernization layer — SHELL (master header/logout/footer)
   Scope: .uix-app
   Applied via Application.master, so it renders on EVERY page.
   Source: Figma "Header" component (130:9023 and 44 identical copies —
   the header is byte-for-byte the same on every screen and breakpoint).
   ========================================================= */

/* ---------- Header ----------
   Figma: a full-bleed white band, 64px tall, with a 1px #e0e0e0 bottom border
   that runs edge to edge. The band is full width; only its CONTENT is inset by
   the gutter. This is why the border must live on the band and the padding on
   the inner wrapper — the client's review called out the old build for leaving
   blank space at both ends of the divider. */
.uix-app .uix-shell-header {
    background: var(--uix-color-surface);
    border-bottom: 1px solid var(--uix-color-border);
    /* Borders/Base/default */
    height: 64px;

}

.uix-app .uix-shell-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uix-space-3);
    height: var(--uix-header-height);
    /* 64px */
    max-width: var(--uix-page-max);
    /* 1440px artboard */
    margin: 0 auto;
    padding: 0 var(--uix-shell-gutter);
}

/* Brand / logo. Figma renders it 149.85x36, but Logo.Src is set per firm in
   code-behind (image.ashx eform_logo), so the height is pinned and the width
   follows the firm asset's aspect ratio instead of being hard-coded. */
.uix-app .uix-shell-header__brand {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.uix-app .uix-shell-header__logo {
    display: block;
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

/* Logout. Figma: 8px padding box whose right edge lands exactly on the gutter,
   icon Light Green/500 #63ad0e, label Roboto Bold 16/20 Text/Base/primary. */
.uix-app .uix-shell-header__logout {
    display: inline-flex;
    align-items: center;
    gap: var(--uix-space-1);
    /* 8px */
    padding: var(--uix-space-1);
    color: var(--uix-color-text);
    font-family: var(--uix-font-family);
    font-size: var(--uix-body-size);
    /* 16px */
    line-height: var(--uix-body-line);
    /* 20px */
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.uix-app .uix-shell-header__logout:hover,
.uix-app .uix-shell-header__logout:focus {
    color: var(--uix-color-text);
    text-decoration: none;
}

.uix-app .uix-shell-header__logout i {
    color: var(--uix-color-accent);
    /* Light Green/500 - Accent #63ad0e */
    font-size: 16px;
}

.uix-app .uix-shell-header__logout:focus-visible {
    outline: none;
    box-shadow: var(--uix-focus-ring);
    border-radius: var(--uix-radius-sm);
}

/* Mobile: keep the label but let the logo shrink before anything wraps. */
@media (max-width: 576px) {
    .uix-app .uix-shell-header__logo {
        max-width: 150px;
    }
}