/* ===========================================
   Header "Superadmin" menu (partials/_superadmin_menu.html)
   Desktop: filter box + four-column mega-menu with a description per page.
   Phones: full-screen panel, same filter box.
   Open/close comes from the global .popover behaviour in ui.js.
   =========================================== */

.superadmin-anchor { position: relative; }

.top-nav .user-menu .superadmin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 34px;
    margin: 0;
    padding: 0 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    background: var(--raised);
    color: var(--label-1);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.top-nav .user-menu .superadmin-btn:hover,
.top-nav .user-menu .superadmin-btn.current { background: var(--staff-hover); }
/* The header's own span rule beats the button's color. */
.top-nav .user-menu .superadmin-btn-label,
.top-nav .user-menu .superadmin-menu-head span { color: inherit; }
.superadmin-btn svg { width: 16px; height: 16px; }
.superadmin-btn-chev { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.superadmin-menu {
    top: calc(100% + 8px);
    right: 0;
    width: min(980px, calc(100vw - 2rem));
    padding: 0.75rem;
    border-radius: var(--r-lg);
    background: var(--raised);
    border-color: var(--border-light);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
    z-index: 1100;
}
.superadmin-menu.open { opacity: 1; visibility: visible; transform: none; }

.superadmin-menu-head { display: none; }
.superadmin-filter { display: block; width: 100%; margin-bottom: 0.5rem; }

.superadmin-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}
.superadmin-group { padding: 0 0.25rem; border-right: 1px solid var(--border-light); }
.superadmin-group:last-child { border-right: none; }
.superadmin-group-title {
    padding: 0.4rem 0.6rem 0.3rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.superadmin-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--r-md);
    color: var(--text-primary);
    text-decoration: none;
}
.superadmin-item:hover { background: var(--surface-alt); }
.superadmin-item .count-pill { margin-left: auto; align-self: center; flex-shrink: 0; }
.superadmin-item.current {
    background: color-mix(in srgb, var(--c-secondary), transparent 82%);
    box-shadow: inset 3px 0 0 var(--c-secondary);
}
.superadmin-item .nav-icon {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}
.superadmin-item-text { display: flex; flex-direction: column; min-width: 0; }
.superadmin-item-label { font-size: 0.88rem; font-weight: 500; }
.superadmin-item.current .superadmin-item-label { font-weight: 600; }
.superadmin-item small { font-size: 0.74rem; color: var(--text-muted); }
.superadmin-item[hidden], .superadmin-group[hidden] { display: none; }

@media (max-width: 1100px) {
    .superadmin-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.75rem; }
    .superadmin-group:nth-child(2n) { border-right: none; }
}

/* Phones: icon-only button, the count a corner badge (like .asst-fab-count); the
   menu is a full-screen panel under the header with a filter box. */
@media (max-width: 600px) {
    .superadmin-btn-label,
    .superadmin-btn-chev { display: none; }
    .top-nav .user-menu .superadmin-btn { width: 36px; padding: 0; justify-content: center; }
    .superadmin-btn svg { flex-shrink: 0; }
    .top-nav .user-menu .superadmin-btn .feedback-count { position: absolute; top: -6px; right: -6px; margin: 0; }

    .superadmin-menu {
        position: fixed;
        inset: 0;
        width: auto;
        max-width: none;
        border-radius: 0;
        overflow-y: auto;
        padding: 0.75rem 0.9rem 1.5rem;
    }
    .superadmin-menu-head {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.25rem 0.25rem 0.75rem;
        font-weight: 700;
        color: var(--label-1);
    }
    .superadmin-menu-head svg { width: 18px; height: 18px; }
    .top-nav .user-menu .superadmin-menu-close {
        margin-left: auto;
        padding: 0 0.4rem;
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: 1.6rem;
        line-height: 1;
    }
    .superadmin-groups { display: block; }
    .superadmin-group { border: none; padding: 0; }
}

/* The eye (partials/_view_as.html). The header styles every form as a row: undo it. */
.top-nav .user-menu .view-as-menu { right: 0; left: auto; display: none; flex-direction: column; align-items: stretch; gap: 1px; width: 230px; }
.top-nav .user-menu .view-as-menu.open { display: flex; }
.top-nav .user-menu .view-as-menu .pop-item { width: 100%; justify-content: flex-start; background: none; border: 0; }
.top-nav .user-menu .view-as-menu .pop-item:hover { background: var(--hover-tint); }
.top-nav .user-menu .view-as-menu .pop-item.is-sel { background: color-mix(in srgb, var(--c-fg) 14%, transparent); color: var(--label-1); }
.view-as-note { margin: 6px 8px 4px; color: var(--label-3); font-size: 12px; line-height: 1.4; }