/* Round 26a (HDR-1): the top bar (shared/header/header.blade.php), loaded right after sc-switch.css.
   1. Empty state (r.27-30): labelled buttons 'Organisaties (n)' / 'Sites (n)' in a .sc-bar-switch-slot.
   2. Run 29a: the site URL moved to .sc-bar-url (11).
   3. Phones (r.36): less text per part.
   4. No header but a subheader (r.35, HDR-3).
   5, 7. Run 27a (SHL-1): --sc-top, logo anchor (6, the slot motion of patchHeader, left in 28a: HDR-3).
   8–10. Run 28a (HDR-1): logo block = rail width, section dropdown per organization/site, responsive.
   11. Run 29a (HDR-2): visual ↔ title gap, site URL with a status dot, section groups and summaries.
   12. Run 30a (HDR-1): slot inset, the organization peek on site pages.
   13. Run 31a (TGL-1): slot tokens per theme (r.10), 'Bekijk site' foot (r.122), profile reveal (r.143-148). */

/* 1. The slot is a bar toggle (height, centring of the website slot); the button carries the look. */
.siteclick-container .siteclick-bar-main-nav .siteclick-bar-main-toggle.sc-bar-switch-slot {
    padding: 0;
    background: var(--sc-color-transparent);
}
.siteclick-container .sc-bar-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-transparent);
    color: var(--sc-color-ink-on-black);
    font-family: inherit;
    font-size: 11px;
    font-weight: var(--sc-font-weight-ui);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--sc-dur-base) var(--sc-ease-out), color var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .sc-bar-switch:hover,
.siteclick-container .sc-bar-switch:focus-visible {
    background: var(--sc-color-bar-slot-bg);
    color: var(--sc-color-bar-slot-ink);
}
.siteclick-container .sc-bar-switch:focus-visible {
    outline: 2px solid var(--sc-color-primary);
    outline-offset: 2px;
}
.siteclick-container .sc-bar-switch:active {
    filter: brightness(.94);
}
.siteclick-container .sc-bar-switch-count {
    color: var(--sc-color-text-subtle);
}

/* 3. Phones: no counts, the Editor action as icon only; active names stay (sc-admin-shell.css). */
@media screen and (max-width: 767px) {
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-count,
    .siteclick-container .sc-bar-cta-label {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .siteclick-container .sc-bar-switch-label {
        display: none;
    }
}

/* 4. Header off, subheader on: the subheader moves up under the bar (the [header=false] rules in shared.css stay). */
.siteclick-container .siteclick-wrap[data-siteclick-header="false"][data-siteclick-subheader="true"] .siteclick-subheader {
    top: var(--sc-top);
}
.siteclick-container .siteclick-wrap[data-siteclick-header="false"][data-siteclick-subheader="true"] .siteclick-content-in {
    padding-top: 66px;
}
.siteclick-container .siteclick-wrap[data-siteclick-header="false"][data-siteclick-subheader="true"] .siteclick-content-in-body {
    padding-top: var(--sc-top);
}

/* 5. Run 31a (TGL-1, D1): --sc-top lives in tokens.css only (the real bar height, 0 without a bar). */

/* 7. Anchor of the busy ring on the logo (ring: ui-loader.css). */
.siteclick-container .sc-bar-logo-mark {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

/* 8. Run 28a (HDR-1, r.134/136): the S mark centred in a block as wide as the rail, sized up front (no shift);
      the busy ring (ui-loader.css) centres on the mark. The white mark turns black in light. */
.siteclick-container .siteclick-bar-main-logo {
    width: var(--sc-nav-w, 40px);
}
.siteclick-container .siteclick-bar-main-logo a.sc-bar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--sc-bar-h, 40px);
    padding: 0;
}
html[data-sc-theme="light"] .sc-bar-logo-mark img {
    filter: invert(1);
}

/* 9. Run 28a (HDR-1, r.141-163): the section dropdown replaces the link row; the menu is the glass panel
      .sc-dd-panel (sc-list.css), here only placement and the open motion. */
.siteclick-container .siteclick-bar-main-toggle:has(> .sc-bar-section) {
    overflow: visible;
}
/* Run 29a (HDR-2, r.51-53): the trigger has the size of the Editor button (.sc-bar-cta), 12 px from the title. */
.siteclick-container .sc-bar-section {
    float: left;
    display: flex;
    align-items: center;
    height: 30px;
    margin: 0 4px 0 12px;
}
.siteclick-container .sc-bar-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: 5px;
    background: var(--sc-color-bar-control-bg);
    color: var(--sc-color-bar-control-ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
    transition: background-color var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .sc-bar-section-toggle:hover,
.siteclick-container .sc-bar-section.open .sc-bar-section-toggle {
    background: var(--sc-color-bar-control-bg-hover);
}
.siteclick-container .sc-bar-section-toggle .icon {
    font-size: 12px;
}
.siteclick-container .sc-bar-section-toggle span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.siteclick-container .sc-bar-section-toggle .icon {
    transition: transform var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .sc-bar-section.open .sc-bar-section-toggle .icon {
    transform: rotate(180deg);
}
.siteclick-container .sc-bar-section-menu {
    display: block;
    left: 0;
    right: auto;
    text-align: left;
    line-height: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--sc-dur-base) var(--sc-ease-out), transform var(--sc-dur-base) var(--sc-ease-out), visibility 0s var(--sc-dur-base);
}
.siteclick-container .sc-bar-section.open .sc-bar-section-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}
.siteclick-container .sc-bar-section-menu .sc-more-item.active {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
}

/* 10. Run 28a (HDR-1, r.164): 768-1224 keeps the dropdown (sc-admin-shell.css); very small screens show only the
       arrow and open the menu across the width under the bar.
       Round 31 (A24): phones show the title of the active (deepest) level only, one line with ellipsis, in a fixed
       width so organization -> site does not shift; other levels stay avatars (shared.css hides their text).
       0,4,0 + later load beats the sc-admin-shell.css max-width rule (0,4,0). */
@media screen and (max-width: 767px) {
    .siteclick-container .siteclick-bar-main-nav [data-sc-level-active] .siteclick-bar-main-text {
        display: block;
        width: 8rem;
        max-width: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .siteclick-container .sc-bar-section-toggle {
        max-width: 7rem;
    }
    .siteclick-container .sc-bar-section-menu .sc-more-item {
        display: flex;
        align-items: center;
        min-height: 40px;
    }
    /* Run 35a-1 (CHR-2, r.24-27): one gap between the main parts (logo, slots, user, '…') and one inside a slot
       (switch, visual, section, action); flex drops the inline-block white space. Hit areas grow through ::before
       (main parts 40 high, parts inside a slot at least 32 x 40); the pictures keep their size, so the slots let
       the hit areas out. Specificity 0,4,0+ beats shared.css (0,2,0) and sc-switch.css (0,3,0). */
    :root {
        --sc-bar-m-gap: 8px;
        --sc-bar-m-in: 6px;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main,
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggles {
        display: flex;
        align-items: flex-start;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggles > .siteclick-bar-main-toggle {
        margin: 5px 0 5px var(--sc-bar-m-gap);
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle.sc-bar-user {
        margin-right: var(--sc-bar-m-gap);
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle,
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle > .siteclick-bar-main-toggle-text {
        overflow: visible;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle > .sc-switch[data-sc-switch-count] {
        margin: 5px var(--sc-bar-m-in) 0 0;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle-text > .siteclick-bar-main-image {
        margin-right: 0;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle > .sc-bar-section {
        margin-left: var(--sc-bar-m-in);
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle > .sc-bar-section:not(:last-child) {
        margin-right: var(--sc-bar-m-in);
    }
    .siteclick-container .siteclick-bar-row-in :is(.siteclick-bar-main-toggle > .siteclick-bar-main-toggle-text, .sc-bar-switch, .sc-bar-section-toggle, .sc-bar-cta) {
        position: relative;
    }
    .siteclick-container .siteclick-bar-row-in :where(.siteclick-bar-main-toggle > .siteclick-bar-main-toggle-text, .sc-bar-switch, .sc-bar-section-toggle, .sc-bar-cta, .siteclick-bar-main-toggle > .sc-switch[data-sc-switch-count])::before {
        content: '';
        position: absolute;
        inset: -5px 0;
    }
    .siteclick-container .siteclick-bar-row-in :is(.sc-bar-section-toggle, .sc-bar-cta)::before {
        inset: -8px 0;
    }
    .siteclick-container .siteclick-bar-row-in .siteclick-bar-main-toggle > .sc-switch[data-sc-switch-count]::before {
        inset: -10px -6px;
    }
}
@media screen and (max-width: 480px) {
    .siteclick-container .siteclick-bar-main-nav [data-sc-level-active] .siteclick-bar-main-text {
        width: 6rem;
    }
    .siteclick-container .sc-bar-section-toggle span {
        display: none;
    }
    .siteclick-container .sc-bar-section-menu {
        position: fixed;
        top: var(--sc-top);
        left: 8px;
        right: 8px;
    }
}
/* NAFIX-fix31-2: the site row (logo, org, site + title, section, Editor, user, '…') is wider than the org row; with an
   8rem title it wrapped below ~560 px, with 6rem below ~460 px, over the content and the right rail. So the site title is
   6rem there and gives way below 460 px (the org title still fits). */
@media screen and (max-width: 559px) {
    .siteclick-container .siteclick-bar-main-nav [data-siteclick-bar-nav-toggle="website"][data-sc-level-active] .siteclick-bar-main-text {
        width: 6rem;
    }
}
@media screen and (max-width: 459px) {
    .siteclick-container .siteclick-bar-main-nav [data-siteclick-bar-nav-toggle="website"][data-sc-level-active] .siteclick-bar-main-text {
        display: none;
    }
}

/* 11. Run 29a (HDR-2). r.59: one gap between visual and title for organization, site and user; the site visual
       is as large as the avatar. */
:root {
    --sc-bar-visual-gap: 10px;
}
.siteclick-container .siteclick-bar-main-nav .siteclick-bar-main-toggle-text {
    display: flex;
    align-items: center;
    gap: var(--sc-bar-visual-gap);
}
.siteclick-container .siteclick-bar-main-nav .siteclick-bar-main-toggle-text > .siteclick-bar-main-image {
    width: 24px;
    height: 24px;
    border-radius: var(--sc-radius-sm);
}

/* r.61: the host under the site name with a status dot (green live, grey concept), no pulse in the bar. */
.siteclick-container .siteclick-bar-main-text .sc-bar-url {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 180px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--sc-color-text-subtle);
    font-family: var(--sc-font-sans);
    font-weight: 400;
    letter-spacing: 0;
    font-size: 9px;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.siteclick-container .sc-bar-url .sc-status-dot-pulse::after,
.siteclick-container .sc-bar-section-status .sc-status-dot-pulse::after {
    display: none;
}
@media screen and (max-width: 1224px) {
    .siteclick-container .siteclick-bar-main-text .sc-bar-url {
        display: none;
    }
}

/* r.55-57: groups with a separator, minor items after the first group, a summary on the right.
   Run 30a (r.17): items in the weight and ink of the trigger, one size smaller than the base .sc-more-item. */
.siteclick-container .sc-bar-section-menu .sc-bar-section-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    color: var(--sc-color-bar-control-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.siteclick-container .sc-bar-section-menu .sc-bar-section-item--minor {
    padding: 4px 10px;
    color: var(--sc-color-text-subtle);
    font-size: 11px;
    font-weight: 500;
}
.siteclick-container .sc-bar-section-sep {
    display: block;
    height: 1px;
    margin: 4px 0;
    background: var(--sc-color-border);
}
.siteclick-container .sc-bar-section-meta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
    color: var(--sc-color-text-subtle);
    font-size: 11px;
}
.siteclick-container .sc-bar-section-meta .icon-danger {
    color: var(--sc-color-danger);
}
.siteclick-container .sc-bar-section-meta .icon-attention {
    color: var(--sc-color-orange);
}
.siteclick-container .sc-bar-section-meta .icon-check {
    color: var(--sc-color-green);
}
.siteclick-container .sc-bar-scores {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}
.siteclick-container .sc-bar-score {
    --sc-bar-score-c: var(--sc-color-text-muted);
    display: block;
    width: 24px;
    height: 4px;
    border-radius: var(--sc-radius-full);
    background: linear-gradient(to right, var(--sc-bar-score-c) calc(var(--sc-v, 0) * 1%), var(--sc-color-border) 0);
}
.siteclick-container .sc-bar-score[data-band="green"] {
    --sc-bar-score-c: var(--sc-color-green);
}
.siteclick-container .sc-bar-score[data-band="orange"] {
    --sc-bar-score-c: var(--sc-color-orange);
}
.siteclick-container .sc-bar-score[data-band="red"] {
    --sc-bar-score-c: var(--sc-color-danger);
}

/* 12. Run 30a (HDR-1). r.14: right = top/bottom inset when the section is the last child (organization slot);
       the site slot (actions after the section) keeps its padding. */
:root {
    --sc-bar-slot-inset: 3px;
}
.siteclick-container .siteclick-bar-main-toggle:has(> .sc-bar-section:last-child:not(.sc-bar-section--peek)) {
    padding-right: var(--sc-bar-slot-inset);
}
.siteclick-container .siteclick-bar-main-toggle > .sc-bar-section:last-child {
    margin-right: 0;
}

/* r.15: the inactive organization dropdown on a site page. The arrow sits in a 0fr column and the column grows
   left to right (a reveal without a mask) only when 41-header-context.js found room ([data-sc-peek-room]);
   the menu is a sibling of the clip and opens on click (sc-more). */
.siteclick-container .siteclick-bar-main-toggle[data-sc-peek] {
    transition: padding-right var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .siteclick-bar-main-toggle[data-sc-peek-room]:is(:hover, :focus-within, :has(.sc-bar-section.open)) {
    padding-right: var(--sc-bar-slot-inset);
}
.siteclick-container .sc-bar-section--peek {
    margin: 0;
}
.siteclick-container .sc-bar-peek {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .siteclick-bar-main-toggle[data-sc-peek-room]:is(:hover, :focus-within, :has(.sc-bar-section.open)) .sc-bar-peek {
    grid-template-columns: 1fr;
}
.siteclick-container .sc-bar-peek-in {
    min-width: 0;
    overflow: hidden;
}
.siteclick-container .sc-bar-peek-in .sc-bar-section-toggle {
    margin-left: 12px;
}
@media (prefers-reduced-motion: reduce) {
    .siteclick-container .siteclick-bar-main-toggle[data-sc-peek],
    .siteclick-container .sc-bar-peek {
        transition: none;
    }
}
@media (hover: none), (max-width: 1224px) {
    .siteclick-container .sc-bar-section--peek {
        display: none;
    }
}

/* 13. Run 31a (TGL-1). r.10: the slots and their text read the two slot tokens (dark surface/white byte-equal,
       light surface-alt/text-strong); same selectors as shared.css (0,3,0), this file loads later. */
.siteclick-container [data-siteclick-bar-nav-main-active="website"] [data-siteclick-bar-nav-toggle="website"],
.siteclick-container [data-siteclick-bar-nav-main-active="template"] [data-siteclick-bar-nav-toggle="template"],
.siteclick-container [data-siteclick-bar-nav-main-active="organization"] [data-siteclick-bar-nav-toggle="organization"],
.siteclick-container [data-siteclick-bar-nav-main-active="admin"] [data-siteclick-bar-nav-toggle="admin"],
.siteclick-container [data-siteclick-bar-nav-main-active="user"] [data-siteclick-bar-nav-toggle="user"],
.siteclick-container .siteclick-bar-column .siteclick-bar-main-toggle {
    color: var(--sc-color-bar-slot-ink);
    background: var(--sc-color-bar-slot-bg);
}
.siteclick-container .siteclick-bar-main-text {
    color: var(--sc-color-bar-slot-ink);
}

/* r.122: 'Bekijk site' at the foot of the site menu, a full-width button. */
.siteclick-container .sc-bar-section-menu .sc-bar-section-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-bar-control-bg);
    color: var(--sc-color-bar-control-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}
.siteclick-container .sc-bar-section-menu .sc-bar-section-foot:hover {
    background: var(--sc-color-bar-control-bg-hover);
}

/* r.143-148: the user slot shows only the avatar; the text (left of it) opens in a 0fr -> 1fr column on hover/focus,
   on hover of the '…' cell and while the profile is open, and then the slot gets its ground. The gap is padding
   inside the clip, so the collapsed slot has no empty space. Specificity: collapsed 0,4,0 beats the slot rule
   (0,3,0); the open :is() (0,5,0 via :has) beats both. */
.siteclick-container .siteclick-bar-column .siteclick-bar-main-toggle.sc-bar-user {
    padding: 0 var(--sc-bar-slot-inset);
    background: var(--sc-color-transparent);
    transition: background-color var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .sc-bar-user .siteclick-bar-main-toggle-text {
    display: flex;
    align-items: center;
}
.siteclick-container .sc-bar-user-reveal {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns var(--sc-dur-base) var(--sc-ease-out);
}
.siteclick-container .sc-bar-user-reveal-in {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
}
/* Run 35a-1 (CHR-2, r.21): the open text sits as far from the slot edge as in the organization/site slot; the
   extra space is inside the clip, so the closed slot stays 30 x 30 around the avatar. */
:root {
    --sc-bar-slot-pad: 7px;
}
.siteclick-container .sc-bar-user-reveal-in > .siteclick-bar-main-text {
    padding-left: calc(var(--sc-bar-slot-pad) - var(--sc-bar-slot-inset));
    padding-right: var(--sc-bar-visual-gap);
}
:is(.sc-bar-user:hover, .sc-bar-user:focus-within, .siteclick-bar-row-in:has(.sc-rail-switch-col:hover) .sc-bar-user, .mk-head-end:has(.mk-head-rail-col:hover) .sc-bar-user, html.mk-rail-profile .sc-bar-user, .siteclick-container:has(.siteclick-sidebar-rest.active .sc-profile) .sc-bar-user) {
    background: var(--sc-color-bar-slot-bg);
}
:is(.sc-bar-user:hover, .sc-bar-user:focus-within, .siteclick-bar-row-in:has(.sc-rail-switch-col:hover) .sc-bar-user, .mk-head-end:has(.mk-head-rail-col:hover) .sc-bar-user, html.mk-rail-profile .sc-bar-user, .siteclick-container:has(.siteclick-sidebar-rest.active .sc-profile) .sc-bar-user) .sc-bar-user-reveal {
    grid-template-columns: 1fr;
}
@media (prefers-reduced-motion: reduce) {
    .siteclick-container .siteclick-bar-column .siteclick-bar-main-toggle.sc-bar-user,
    .siteclick-container .sc-bar-user-reveal {
        transition: none;
    }
}

/* Run 38b (NAV-5, P7): the nav toggle of the rail shows the sidebar icon; on = html.sc-nav-on (cookie sc_nav, S/20b-rail.js).
   The sc-chrome-items.css on-state still names the old html.sc-rail-on; this rule (same specificity) carries it. */
.siteclick-container .sc-rail-toggle .sc-icon-sidebar {
    display: block;
    width: 20px;
    height: 20px;
}
@media (min-width: 768px) {
    html.sc-nav-on .sc-rail-toggle {
        color: var(--sc-color-bar-ink-active);
    }
}