/*
 * Styles for the documentation header that is injected into content pages
 * (see src/content-injection.ts).
 *
 * Content pages bring their own stylesheets, so:
 *  - every rule is prefixed with #mwdocs-topbar to win against element/class
 *    selectors of the content page without leaking styles into it
 *  - the bar is position: fixed so it does not participate in the content
 *    page's layout (some pages use display: flex / height: 100vh on <body>)
 */

@font-face {
	font-family: "Proxima Nova";
	font-display: swap;
	font-weight: 400;
	src: url(https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&#038;fvd=n4&#038;v=3) format('woff2'), url(https://use.typekit.net/af/4838bd/00000000000000003b9b0934/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&#038;fvd=n4&#038;v=3) format('woff');
}

:root {
    --mwdocs-topbar-height: 52px;
    --mwdocs-color-primary: #416ba9;
}

/* make room for the fixed bar */
body {
    padding-top: var(--mwdocs-topbar-height) !important;
    box-sizing: border-box !important;
}

#mwdocs-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mwdocs-topbar-height);
    z-index: 2147483000;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 0 8px 0 #0004;
    font-family: 'Proxima Nova', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: #575756;
}

#mwdocs-topbar * {
    box-sizing: border-box;
}

#mwdocs-topbar a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

#mwdocs-topbar img {
    vertical-align: middle;
    border: none;
    max-width: none;
}

#mwdocs-topbar .mwdocs-icon-primary {
    filter: invert(38%) sepia(93%) saturate(307%) hue-rotate(174deg) brightness(89%) contrast(97%);
}

#mwdocs-topbar .mwdocs-topbar-left,
#mwdocs-topbar .mwdocs-topbar-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

#mwdocs-topbar .mwdocs-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#mwdocs-topbar .mwdocs-brand img {
    height: 28px;
}

#mwdocs-topbar .mwdocs-brand-name {
    font-size: 20px;
    font-weight: 600;
    word-spacing: -3px;
}

#mwdocs-topbar .mwdocs-brand-primary {
    color: var(--mwdocs-color-primary);
}

#mwdocs-topbar .mwdocs-brand-beta {
    font-size: 14px;
}

#mwdocs-topbar .mwdocs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 600;
}

#mwdocs-topbar .mwdocs-product-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

#mwdocs-topbar .mwdocs-select {
    position: relative;
    width: max-content;
    font-size: 15px;
    white-space: nowrap;
}

#mwdocs-topbar .mwdocs-select > span {
    display: block;
    padding: 3px 6px;
    border-radius: 4px;
    box-shadow: 0 0 4px 0 #00000020 inset;
    cursor: pointer;
}

#mwdocs-topbar .mwdocs-select > span * {
    pointer-events: none;
}

#mwdocs-topbar .mwdocs-select > div {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    width: max-content;
    min-width: 100%;
    height: 0;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 3px 3px 4px -4px black;
    background-color: #ffffffe8;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#mwdocs-topbar .mwdocs-select.mwdocs-expanded > span {
    opacity: 0;
}

#mwdocs-topbar .mwdocs-select.mwdocs-expanded > div {
    height: auto;
}

#mwdocs-topbar .mwdocs-select-option {
    padding: 4px 6px;
    cursor: pointer;
}

#mwdocs-topbar .mwdocs-select-option:hover {
    background-color: var(--mwdocs-color-primary);
    color: white;
}

#mwdocs-topbar .mwdocs-select-option.mwdocs-selected {
    background-color: #416ba940;
    cursor: default;
}

#mwdocs-topbar .mwdocs-select-option.mwdocs-selected:hover {
    background-color: #416ba940;
    color: inherit;
}

#mwdocs-topbar .mwdocs-download {
    white-space: nowrap;
    font-size: 15px;
    color: var(--mwdocs-color-primary);
    border-bottom: 1px solid var(--mwdocs-color-primary);
    padding: 1px 3px;
}

#mwdocs-topbar .mwdocs-user {
    white-space: nowrap;
}

#mwdocs-topbar .mwdocs-link {
    color: var(--mwdocs-color-primary);
    border-bottom: 1px solid var(--mwdocs-color-primary);
}

#mwdocs-topbar .mwdocs-login {
    white-space: nowrap;
    color: var(--mwdocs-color-primary);
    border: 2px solid var(--mwdocs-color-primary);
    border-radius: 3px;
    padding: 5px 12px;
}

#mwdocs-topbar .mwdocs-login:hover {
    background-color: var(--mwdocs-color-primary);
    color: white;
}

@media (max-width: 1100px) {
    #mwdocs-topbar .mwdocs-brand-name {
        display: none;
    }
}

@media (max-width: 800px) {
    #mwdocs-topbar .mwdocs-user {
        display: none;
    }
}

/*
 * Sidebar-tree fixes for Confluence-export documentations (end-user, whats-new,
 * messages, …). These docs render a collapsible tree as `ul.components`; the
 * generator's own CSS has two navigation flaws we override here. Scoped to
 * `ul.components` so they only affect those docs, and this stylesheet is
 * injected last (before </head>), after the doc's own wrapper.css, so it wins.
 */

/* 1. The marker is a static `content: "+"`. Bootstrap collapse sets
 *    aria-expanded="true" on an open parent, so show a minus there instead.
 *    (Collapsed parents keep the generator's "+".) */
ul.components li a[aria-expanded="true"]:not(:last-child)::after {
    content: "\2212"; /* − minus sign */
}

/* 2. Indentation is fixed per nesting depth and stops after 5 levels, so pages
 *    deeper than that sit at the same indent as their level-5 ancestor. Replace
 *    the per-depth link padding with a compounding per-<ul> indent that steps
 *    consistently at any depth. !important overrides the generator's deep
 *    (high-specificity) per-level rules with one uniform declaration. */
ul.components li a { padding-left: 14px !important; }
ul.components ul   { padding-left: 16px; }