/* ===========================================================================
 * Platform access bar (MIMP-33)
 *
 * The shared top bar carried by all three modules — Browser UI, Onboarder and
 * Exchange — so a user moving between them sees one product rather than three.
 *
 * THIS FILE IS THE SOURCE. It is copied verbatim into each app's static assets:
 *
 *   frontend/browser/public/branding/platform-access-bar.css
 *   frontend/exchange/public/branding/platform-access-bar.css
 *   legacy-backend/ModelCatalogueApp/grails-app/assets/stylesheets/branding/platform-access-bar.css
 *
 * Three copies of one file is deliberate and temporary. The apps have no shared
 * package and no shared static route, and inventing one is MIMP-6's job (the
 * branding contract). Identical CSS plus identical markup is what makes the bar
 * genuinely the same in all three rather than three lookalikes that drift.
 * When MIMP-6 lands, this becomes generated output and the copies go away.
 *
 * Colour tokens are the Onboarder's existing --nav-* set, taken verbatim from
 * grails-app/assets/stylesheets/onboarding/navbar.css, because "the same colour
 * scheme as the onboarding" already had a definition and it was already in the
 * CSS-custom-property form Grails can consume.
 * =========================================================================== */

:root {
    /* Verbatim from onboarding/navbar.css — do not diverge without changing both. */
    --nav-surface: #ffffff;
    --nav-surface-2: #f6f7f9;
    --nav-border: #e5e8ed;
    --nav-text: #15181d;
    --nav-text-muted: #5b6473;
    --nav-text-subtle: #8a93a3;
    --nav-brand: #2f5bff;
    --nav-brand-700: #1f43cc;
    --nav-brand-50: #eef2ff;
    --nav-shadow-1: 0 1px 2px rgba(15, 18, 25, 0.04), 0 1px 1px rgba(15, 18, 25, 0.03);

    /* Bar-specific. One height across all three, so switching module does not
       shift the page. Exposed as a variable so each app can offset its own
       existing chrome by exactly this much. */
    --pab-height: 48px;

    /* MIMP-155: the one top bar every module shows (logo + this bar's dark variant).
       Same colour and height in all three -- the React apps use the same two values. */
    --mim-topbar-bg: #0d2b4e;
    --mim-topbar-height: 72px;
}

.pab {
    display: flex;
    align-items: center;
    /* MIMP-7: some hosts (Browser's Grommet <Header>) center flex children by
       content width rather than stretching them, so without an explicit width
       the bar shrinks to its own content and ends up centered instead of
       spanning edge-to-edge like the other two apps' copies already do. */
    width: 100%;
    gap: 20px;
    height: var(--pab-height);
    box-sizing: border-box;
    padding: 0 16px;
    background-color: var(--nav-surface);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow-1);
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    /* Above page content and above the Onboarder's left rail. */
    position: relative;
    z-index: 1000;
}

/* --- module links -------------------------------------------------------- */
.pab-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pab-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    color: var(--nav-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Module icon — stroke is currentColor so it follows .pab-link's own color
   through hover/active/focus, no separate icon-color rules needed. */
.pab-link svg {
    flex-shrink: 0;
}

.pab-link:hover {
    background-color: var(--nav-surface-2);
    color: var(--nav-text);
    text-decoration: none;
}

.pab-link:focus-visible {
    outline: 2px solid var(--nav-brand);
    outline-offset: 2px;
}

/* Current module. aria-current is the source of truth; the class is for
   browsers/markup where that is inconvenient to set. */
.pab-link[aria-current='page'],
.pab-link.is-active {
    background-color: var(--nav-brand-50);
    color: var(--nav-brand-700);
    font-weight: 600;
}

/* --- session ------------------------------------------------------------- */
.pab-session {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--nav-text-muted);
}

.pab-user {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pab-action {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--nav-border);
    border-radius: 6px;
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.pab-action:hover {
    background-color: var(--nav-surface-2);
    text-decoration: none;
}

.pab-action:focus-visible {
    outline: 2px solid var(--nav-brand);
    outline-offset: 2px;
}

/* --- user menu (MIMP-7) ---------------------------------------------------
 * <details>/<summary> instead of a scripted dropdown — matches "deliberately
 * plain HTML" above, and needs no click-outside/keyboard handling of its own.
 * -------------------------------------------------------------------------- */
.pab-user-menu {
    position: relative;
}

.pab-user-menu > summary {
    list-style: none;
    cursor: pointer;
}

.pab-user-menu > summary::-webkit-details-marker {
    display: none;
}

.pab-user-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--nav-text-muted);
    transition: background-color 0.12s ease, color 0.12s ease;
}

.pab-user-menu[open] > .pab-user-trigger,
.pab-user-trigger:hover {
    background-color: var(--nav-surface-2);
    color: var(--nav-text);
}

.pab-user-trigger:focus-visible {
    outline: 2px solid var(--nav-brand);
    outline-offset: 2px;
}

.pab-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--nav-surface);
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 18, 25, 0.1), 0 2px 6px rgba(15, 18, 25, 0.05);
    padding: 10px 12px;
    z-index: 1001;
}

.pab-user-dropdown .pab-user {
    max-width: none;
    color: var(--nav-text);
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    padding: 4px 6px;
    margin: -4px -6px;
}

a.pab-user:hover {
    background-color: var(--nav-surface-2);
    text-decoration: none;
}

a.pab-user:focus-visible {
    outline: 2px solid var(--nav-brand);
    outline-offset: 2px;
}

.pab-user-dropdown .pab-action {
    justify-content: center;
}

/* --- dark variant: inside each module's navy main bar (MIMP-155) ----------
 * MIMP-155 removes the separate white strip: the same markup is rendered INSIDE
 * each module's dark main bar, after its logo, so the three apps share one bar.
 * The host bar owns height, background and padding; this only recolours the
 * links and icons for a dark surface. Dropdowns stay light (they're popovers).
 * ------------------------------------------------------------------------ */
.pab.pab--dark {
    height: auto;
    padding: 0;
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;
}

/* .pab-link--on-dark: a host app's own links in the same navy bar (e.g. the Browser's
   Search / Projects), so they look exactly like the module links next to them. */
.pab--dark .pab-link,
.pab-link.pab-link--on-dark,
.pab--dark .pab-user-trigger,
.pab--dark .pab-session > .pab-action {
    color: rgba(255, 255, 255, 0.85);
}

.pab--dark .pab-link,
.pab-link.pab-link--on-dark {
    height: 36px;
    font-size: 15px;
}

.pab--dark .pab-link:hover,
.pab-link.pab-link--on-dark:hover,
.pab--dark .pab-user-trigger:hover,
.pab--dark .pab-user-menu[open] > .pab-user-trigger {
    background-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.pab--dark .pab-link[aria-current='page'],
.pab--dark .pab-link.is-active,
.pab-link.pab-link--on-dark[aria-current='page'] {
    background-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.pab--dark .pab-session > .pab-action {
    border-color: rgba(255, 255, 255, 0.45);
}

.pab--dark .pab-session > .pab-action:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.pab--dark .pab-link:focus-visible,
.pab-link.pab-link--on-dark:focus-visible,
.pab--dark .pab-user-trigger:focus-visible,
.pab--dark .pab-session > .pab-action:focus-visible {
    outline-color: #ffffff;
}

/* --- narrow viewports ----------------------------------------------------
 * Matches the Browser UI's existing showNavHamburger breakpoint rather than
 * introducing a second one. Labels are dropped before links are, so every
 * module stays reachable on a phone.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    .pab {
        gap: 12px;
        padding: 0 10px;
    }


    .pab-link {
        padding: 0 8px;
    }

    .pab-user {
        display: none;
    }
}