/* Shell layout: top bar, menus, quick navigation, mobile menu and tab bar, staff drawer and footer. Every class is
   prefixed with pn- so it cannot collide with page styles, colors come from the MudBlazor palette so light and dark
   mode both work, and motion uses the --pn-ease-* / --pn-dur-* tokens of site.css. Hover effects are gated behind
   (hover: hover) so a tap on a phone never leaves them stuck. */

/* ---------- Skip link ---------- */

.pn-skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 1400;
    padding: 10px 16px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(11, 11, 16, .2);
    transform: translateY(-160%);
    transition: transform var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-skip-link:focus-visible {
    transform: none;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

#main:focus { outline: none; }

/* ---------- Top bar ---------- */

/* Flat at the top of the page; once the page scrolls (html[data-scrolled], shell.js) it gets a shadow. */
.pn-appbar.mud-appbar {
    padding-top: env(safe-area-inset-top);
    background: var(--mud-palette-appbar-background) !important;
    border-bottom: 1px solid var(--pn-on-dark-wash);
    box-shadow: none !important;
    transition: background-color var(--pn-dur) ease, box-shadow var(--pn-dur) ease, border-color var(--pn-dur) ease;
}

html[data-scrolled] .pn-appbar.mud-appbar {
    box-shadow: var(--pn-shadow-float) !important;
}

/* Home page: transparent over the hero image until the page scrolls. The scrim, as dark as the bar under its text
   and fading out below it, keeps the links over 4.5:1 on the brightest slide. */
html:not([data-scrolled]) .pn-appbar--overlay.mud-appbar {
    background: transparent !important;
    border-bottom-color: transparent;
}

.pn-appbar--overlay::before {
    content: "";
    position: absolute;
    inset: 0 0 -32px;
    z-index: -1;
    background: linear-gradient(180deg, var(--pn-scrim) 0%, var(--pn-scrim) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pn-dur) ease;
}

html:not([data-scrolled]) .pn-appbar--overlay::before { opacity: 1; }

.pn-appbar .mud-toolbar {
    height: 100%;
}

.pn-appbar-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    padding: 0 12px;
}

.pn-appbar-icon {
    color: var(--mud-palette-appbar-text);
}

.pn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 10px;
    margin-right: 8px;
    border-radius: var(--pn-radius-md);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-brand:active { transform: scale(.97); }

.pn-brand-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--pn-radius-md);
}

.pn-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.pn-brand-name {
    font-family: var(--pn-font-display);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
}

.pn-brand-sub {
    font-size: .75rem;
    font-weight: 600;
    color: var(--pn-brand-on-dark);
}

.pn-topnav {
    align-items: center;
    gap: 2px;
}

.pn-topnav .pn-topnav-link {
    position: relative;
    padding: 6px 12px;
    border-radius: var(--pn-radius-md) !important;
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--pn-on-dark-soft);
    box-shadow: none !important;
}

.pn-topnav .pn-topnav-link.active {
    background: var(--pn-on-dark-hover);
    color: var(--pn-on-dark);
}

/* Current page: an underline that grows from the centre. */
.pn-topnav .pn-topnav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;
    height: 2px;
    border-radius: var(--pn-radius-sm);
    background: var(--pn-brand-on-dark);
    transform: scaleX(0);
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

.pn-topnav .pn-topnav-link.active::after { transform: scaleX(1); }

/* Once customjs/shell.js runs, one underline slides from the old link to the new one instead (until then, and
   without the script, each link draws its own). It is 100px wide and the script scales it to the link, so the
   slide only moves transform (no layout work per frame). */
.pn-topnav {
    position: relative;
}

.pn-topnav-ind {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 2px;
    border-radius: var(--pn-radius-sm);
    background: var(--pn-brand-on-dark);
    opacity: 0;
    pointer-events: none;
    transform-origin: 0 0;
    transition: transform var(--pn-dur) var(--pn-ease-out), opacity var(--pn-dur-fast) ease;
}

.pn-topnav-ind[data-on] { opacity: 1; }

html[data-topnav-slide] .pn-topnav .pn-topnav-link::after { display: none; }

.pn-appbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Search pill: opens the quick navigation (Ctrl+K). */
.pn-search-pill {
    align-items: center;
    gap: 8px;
    height: 36px;
    min-width: 200px;
    padding: 0 8px 0 12px;
    border: 1px solid var(--pn-on-dark-line);
    border-radius: var(--pn-radius-md);
    background: var(--pn-on-dark-wash);
    color: var(--pn-on-dark-soft);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
    transition: background-color var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-search-pill:active { transform: scale(.98); }

.pn-search-pill-text { flex: 1; text-align: left; }

kbd {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-bottom-width: 2px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    font-family: inherit;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

[data-mod-key] .pn-key-cmd,
html[data-apple] [data-mod-key] .pn-key-ctrl { display: none; }

html[data-apple] [data-mod-key] .pn-key-cmd { display: inline; }

.pn-search-pill kbd {
    border-color: var(--pn-on-dark-line);
    background: var(--pn-on-dark-wash);
    color: var(--pn-on-dark-soft);
}

.pn-avatar-button {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
    padding: 3px 6px 3px 3px;
    border: 1px solid var(--pn-on-dark-line);
    border-radius: var(--pn-radius-md);
    background: var(--pn-on-dark-wash);
    color: inherit;
    cursor: pointer;
    transition: background-color var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-avatar-button:active { transform: scale(.96); }

/* "Novedades" (PlayerCounters): the appeals dot (.pn-ap-dot) pinned to the corner of the avatar or a phone tab. */
.pn-avatar-button { position: relative; }

.pn-news-corner {
    position: absolute;
    top: 2px;
    right: 2px;
}

.pn-bottomnav-item .pn-news-corner {
    top: 6px;
    right: calc(50% - 16px);
}

.pn-avatar-button:focus-visible,
.pn-theme-option:focus-visible,
.pn-brand:focus-visible,
.pn-search-pill:focus-visible {
    outline: 2px solid var(--pn-brand-on-dark);
    outline-offset: 2px;
}

.pn-avatar {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
}

.pn-login-button {
    text-transform: none;
    font-weight: 600;
    border-radius: var(--pn-radius-md);
}

@media (hover: hover) and (pointer: fine) {
    .pn-appbar-icon:hover,
    .pn-appbar .pn-brand:hover { background: var(--pn-on-dark-hover); }

    .pn-topnav .pn-topnav-link:hover {
        background: var(--pn-on-dark-hover);
        color: var(--pn-on-dark);
    }

    .pn-search-pill:hover,
    .pn-avatar-button:hover {
        background: var(--pn-on-dark-hover);
        border-color: var(--pn-on-dark-line-strong);
    }
}

/* Narrow desktops (md to lg): every link stays, but the bar makes room for them. The link icons and the brand's text
   go, and the search pill shrinks to its icon (its label and tooltip still say Ctrl+K). */
@media (min-width: 960px) and (max-width: 1279.98px) {
    .pn-topnav .pn-topnav-link { padding: 6px 10px; }
    .pn-topnav .pn-topnav-link .mud-button-icon-start { display: none; }
    .pn-appbar .pn-brand-text { display: none !important; }

    .pn-search-pill {
        justify-content: center;
        width: 40px;
        min-width: 0;
        height: 40px;
        padding: 0;
    }

    .pn-search-pill-text,
    .pn-search-pill kbd { display: none; }
}

/* ---------- Menus (popovers; their entrance is in site.css) ---------- */

.pn-popover {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius) !important;
    overflow: hidden;
}

.pn-popover .mud-menu-item {
    min-width: 220px;
    border-radius: var(--pn-radius-md);
}

.pn-popover-wide .mud-list { padding: 6px; }

.pn-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 2px;
}

.pn-menu-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
}

.pn-menu-grid .mud-menu-item,
.pn-menu-list .mud-menu-item {
    padding: 10px 12px;
}

.pn-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    line-height: 1.25;
}

.pn-menu-tile {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--pn-radius-md);
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

.pn-menu-item-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pn-menu-item-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-menu-item-desc {
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pn-popover .mud-menu-item:hover .pn-menu-tile { transform: scale(1.06); }
}

.pn-menu-selected {
    font-weight: 600;
    color: var(--mud-palette-primary);
}

.pn-user-popover {
    min-width: 280px;
}

/* The header of the user menu is the link to the profile (a menu item, so it keeps the hover and keyboard of one). */
.pn-popover .pn-user-header {
    padding: 14px 16px;
    border-radius: 0;
}

.pn-user-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pn-user-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.pn-user-name {
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-primary);
}

.pn-user-role {
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-menu-section {
    padding: 10px 16px;
}

.pn-menu-section-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Theme segmented control */
.pn-theme-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 3px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-background-gray);
}

.pn-theme-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--pn-radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease, box-shadow var(--pn-dur-fast) ease;
}

.pn-theme-option.active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    font-weight: 600;
    box-shadow: var(--pn-shadow-raised);
}

.pn-dark .pn-theme-option.active { color: var(--mud-palette-primary-lighten); }

@media (hover: hover) and (pointer: fine) {
    .pn-theme-option:hover { color: var(--mud-palette-text-primary); }
}

/* ---------- Quick navigation (QuickNav.razor) ---------- */

/* No entrance animation on purpose: it is opened from the keyboard many times a day. */
.mud-dialog.pn-quicknav {
    margin-top: 12vh;
    animation: none !important;
    overflow: hidden;
    background: var(--mud-palette-surface);
    backdrop-filter: none;
}

.pn-quicknav-backdrop { backdrop-filter: blur(2px); }

.pn-qn-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pn-qn-search-icon { color: var(--mud-palette-text-secondary); }

.pn-qn-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 1rem;
}

.pn-qn-input::placeholder { color: var(--mud-palette-text-secondary); }

.pn-qn-close {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pn-qn-list {
    max-height: min(60dvh, 460px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
}

.pn-qn-group {
    padding: 12px 10px 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pn-qn-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    scroll-margin: 6px;
}

.pn-qn-item.active {
    background: rgba(var(--mud-palette-primary-rgb), .1);
}

@media (hover: hover) and (pointer: fine) {
    .pn-qn-item:hover { background: var(--mud-palette-action-default-hover); }
    .pn-qn-item.active:hover { background: rgba(var(--mud-palette-primary-rgb), .14); }
}

.pn-qn-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

.pn-qn-item.active .pn-qn-icon {
    background: rgba(var(--mud-palette-primary-rgb), .14);
    color: var(--mud-palette-primary);
}

.pn-dark .pn-qn-item.active .pn-qn-icon { color: var(--mud-palette-primary-lighten); }

.pn-qn-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.pn-qn-title { font-weight: 600; }

.pn-qn-desc,
/* Staff results can be pinned to the staff drawer (StaffPins); the button sits beside the option, not inside it. */
.pn-qn-row { position: relative; }
.pn-qn-row--pinnable .pn-qn-item { padding-right: 44px; }

.pn-qn-pin {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: var(--pn-radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease;
}

.pn-qn-pin .mud-icon-root { font-size: 1rem; }
.pn-qn-pin.is-pinned { color: var(--mud-palette-primary); }
.pn-qn-pin:active { transform: translateY(-50%) scale(.92); }
.pn-qn-row--pinnable .pn-qn-enter { display: none; }

@media (hover: hover) and (pointer: fine) {
    .pn-qn-pin:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
}

.pn-qn-tag {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.pn-qn-tag { flex-shrink: 0; max-width: 35%; }

.pn-qn-enter {
    color: var(--mud-palette-text-secondary);
    opacity: 0;
}

.pn-qn-item.active .pn-qn-enter { opacity: 1; }

.pn-qn-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.pn-qn-footer {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.pn-qn-footer kbd { margin-right: 4px; }

@media (max-width: 600px) {
    .mud-dialog.pn-quicknav { margin-top: 8px; }
    .pn-qn-footer { display: none; }
}

/* ---------- Navigation lists (mobile menu, staff drawer) ---------- */

/* MudBlazor's stylesheet loads after this one, so these selectors are a bit more specific than its own. */
/* .mud-nav-item is a flex row: width auto (for the side margins) would shrink the link to its text, so it grows. */
.pn-navmenu.mud-navmenu .mud-nav-link {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 2px 8px;
    padding: 8px 12px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-navmenu.mud-navmenu .mud-nav-link:active { transform: scale(.98); }

.pn-navmenu.mud-navmenu .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pn-navmenu.mud-navmenu .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    font-size: .9rem;
}

/* Current page: the violet wash and weight of a selected item (one colour for one state, no side bar). */
.pn-navmenu.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.pn-navmenu.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

.pn-dark .pn-navmenu.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.pn-dark .pn-navmenu.mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary-lighten);
}

/* Group headers (collapsible sections): small caps that read as a section, never shown as "current page". */
.pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link {
    /* A <button>: width auto would also shrink it to its text. Full row minus the side margins (8px each). */
    width: calc(100% - 16px);
    margin-top: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    font-size: .8rem;
    font-weight: 600;
}

/* Groups are told apart by a hairline above each one, not by a shouted label. */
.pn-navmenu.mud-navmenu .mud-nav-group + .mud-nav-group {
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    font-size: 1.05rem;
    color: var(--mud-palette-text-secondary);
}

.pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link::before {
    content: none;
}

.pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-expand-icon {
    font-size: 1.1rem;
    transition: transform var(--pn-dur) var(--pn-ease-out);
}

.pn-navgroup-title { flex: 1; }

@media (hover: hover) and (pointer: fine) {
    .pn-navmenu.mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled),
    .pn-navmenu.mud-navmenu .mud-nav-group > .mud-nav-link:hover {
        background: var(--mud-palette-action-default-hover);
    }

    .pn-navmenu.mud-navmenu .mud-nav-link.active:hover:not(.mud-nav-link-disabled) {
        background: rgba(var(--mud-palette-primary-rgb), .16);
    }
}

/* Links inside a group: one short indent (the groups are one level deep). */
.pn-navmenu.mud-navmenu .mud-nav-group .mud-nav-item .mud-nav-link {
    margin-left: 16px;
}

.pn-nav-section.mud-typography {
    display: block;
    padding: 16px 20px 4px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

/* Pending work next to a staff link (StaffLinks: open reports, appeals, alerts). Keyed by the count, so a new
   number pops in (never from scale(0)). */
.pn-nav-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
    animation: pn-pop var(--pn-dur-fast) var(--pn-ease-out) both;
    transition: opacity 120ms ease;
}


/* Folded group that holds pending work: a dot in the tone of the most urgent kind. */
.pn-nav-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--mud-palette-drawer-background);
    animation: pn-pop var(--pn-dur-fast) var(--pn-ease-out) both;
}

.pn-nav-dot.pn-tone-error { background: var(--mud-palette-error); }
.pn-nav-dot.pn-tone-warning { background: var(--mud-palette-warning); }
.pn-nav-dot.pn-tone-info { background: var(--mud-palette-info); }
.pn-nav-dot.pn-tone-neutral { background: var(--mud-palette-text-secondary); }

/* A staff link with its pin button (a sibling of the link, never inside it). The button shows on hover/focus, in a
   slot of its own at the end of the row so the pending badge stays visible beside it. */
.pn-navrow { position: relative; }

.pn-pin {
    position: absolute;
    top: 50%;
    right: 14px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--pn-radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 120ms ease, background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease;
}

.pn-pin .mud-icon-root { font-size: 1rem; }
.pn-pin:active { transform: translateY(-50%) scale(.92); }
.pn-pin.is-pinned { color: var(--mud-palette-primary); }

.pn-pin:focus-visible {
    opacity: 1;
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

@media (hover: hover) and (pointer: fine) {
    /* .mud-nav-item: beats MudBlazor's `.mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link { padding-inline-end: unset }`
       (same weight, loaded later), which inside a group would put the pending badge under the pin. */
    .pn-navmenu.mud-navmenu .pn-navrow--pinnable .mud-nav-item .mud-nav-link { padding-right: 44px; }
    .pn-navrow--pinnable:hover .pn-pin { opacity: 1; }
    .pn-pin:hover { background: var(--mud-palette-action-default-hover); color: var(--mud-palette-text-primary); }
    .pn-pin.is-pinned:hover { color: var(--mud-palette-primary); }
}

@media (hover: none) {
    /* Touch: pin from the quick navigation instead. */
    .pn-pin { display: none; }
}

/* ---------- Mobile menu ---------- */

.pn-mobile-drawer {
    width: 300px !important;
    max-width: 85vw;
    height: 100dvh !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 48px rgba(11, 11, 16, .25) !important;
}

.pn-mobile-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pn-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top)) 8px 12px 12px;
    background: var(--mud-palette-appbar-background);
    color: var(--mud-palette-appbar-text);
}

.pn-mobile-header .pn-brand { margin-right: 0; min-width: 0; }

.pn-mobile-content {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}

/* The links come in one after another each time the menu opens (only the first ones; the rest together), all within
   about a third of a second so the menu is usable at once. */
@keyframes pn-menu-item-in {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

.mud-drawer--open .pn-mobile-nav > * {
    animation: pn-menu-item-in .2s var(--pn-ease-out) both;
    animation-delay: 130ms;
}

.mud-drawer--open .pn-mobile-nav > :nth-child(1) { animation-delay: 20ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(2) { animation-delay: 35ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(3) { animation-delay: 50ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(4) { animation-delay: 65ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(5) { animation-delay: 80ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(6) { animation-delay: 95ms; }
.mud-drawer--open .pn-mobile-nav > :nth-child(7) { animation-delay: 110ms; }

.pn-mobile-footer {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pn-mobile-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------- Phone tab bar (BottomNav.razor) ---------- */

.pn-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 4px 4px env(safe-area-inset-bottom);
    border-top: 1px solid var(--mud-palette-lines-default);
    background: rgba(var(--mud-palette-surface-rgb), .92);
    backdrop-filter: blur(14px);
}

.pn-bottomnav-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--pn-radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-bottomnav-item:active { transform: scale(.94); }

.pn-bottomnav-item.active { color: var(--mud-palette-primary); }
.pn-dark .pn-bottomnav-item.active { color: var(--mud-palette-primary-lighten); }

/* Current tab: a pill behind the icon. */
.pn-bottomnav-item::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 48px;
    height: 28px;
    margin-left: -24px;
    border-radius: 999px;
    background: rgba(var(--mud-palette-primary-rgb), .14);
    opacity: 0;
    transform: scaleX(.6);
    transition: opacity var(--pn-dur-fast) ease, transform var(--pn-dur) var(--pn-ease-out);
}

.pn-bottomnav-item.active::before { opacity: 1; transform: none; }

.pn-bottomnav-item .mud-icon-root { position: relative; margin-top: 6px; }

.pn-bottomnav-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

@media (min-width: 960px) {
    .pn-bottomnav { display: none; }
}

/* The page and the footer keep clear of the tab bar. */
@media (max-width: 959.98px) {
    .pn-has-bottomnav .mud-main-content {
        padding-bottom: calc(60px + env(safe-area-inset-bottom));
    }
}

/* ---------- Lost connection / unhandled error (#blazor-error-ui, MainLayout) ---------- */

/* Hidden until Blazor sets display: block on it; its .dismiss button is wired by the framework. */
#blazor-error-ui {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1500;
    display: none;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 10px 8px 10px 16px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--pn-shadow-float);
    font-size: .9rem;
}

/* Blazor shows it with an inline display: block; lay it out as a row instead. */
#blazor-error-ui[style*="block"] { display: flex !important; }

#blazor-error-ui .reload {
    margin-left: auto;
    color: var(--mud-palette-primary);
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--pn-radius-md);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

#blazor-error-ui .dismiss:focus-visible,
#blazor-error-ui .reload:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ---------- Back to top ---------- */

.pn-to-top {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 1090;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 50%;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 8px 24px rgba(11, 11, 16, .15);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: scale(.9) translateY(8px);
    transition: opacity var(--pn-dur) var(--pn-ease-out), transform var(--pn-dur) var(--pn-ease-out);
}

html[data-far] .pn-to-top {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

html[data-far] .pn-to-top:active { transform: scale(.94); }

.pn-to-top:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

@media (max-width: 959.98px) {
    .pn-has-bottomnav .pn-to-top { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Staff drawer ---------- */

/* Shown or hidden on desktop (MainLayout). Hiding is occasional, so the drawer and the page margin move together on
   the drawer curve. */
@media (min-width: 960px) {
    .pn-staff-drawer.mud-drawer:not(.mud-drawer--initial) {
        transition: width var(--pn-dur) var(--pn-ease-drawer), left var(--pn-dur) var(--pn-ease-drawer);
    }

    .mud-layout:has(.pn-staff-drawer) > .mud-main-content {
        transition: margin var(--pn-dur) var(--pn-ease-drawer);
    }
}

.pn-staff-drawer {
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-x: hidden;
}

.pn-staff-drawer .mud-drawer-content {
    height: 100%;
}

.pn-staff-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 240px;
    animation: pn-fade var(--pn-dur-fast) ease both;
}

.pn-staff-nav-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 8px;
}

.pn-staff-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.pn-staff-nav-title .mud-icon-root { color: var(--mud-palette-text-secondary); }

/* Live status: players and staff online (SlApiService), a link to /servers. */
.pn-staff-live {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--pn-dur-fast) ease;
}

.pn-staff-live b { color: var(--mud-palette-text-primary); font-weight: 600; }

.pn-live-dot.is-off {
    background: var(--mud-palette-text-disabled);
    animation: none;
}

/* Pending work (StaffInbox): one chip per kind with something waiting, or a quiet "all done". */
.pn-inbox {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 12px 8px;
}

.pn-inbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--pn-radius-md);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-inbox-chip .mud-icon-root { font-size: 1rem; }
.pn-inbox-chip:active { transform: scale(.97); }

.pn-inbox-chip:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.pn-inbox-count {
    min-width: 18px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    animation: pn-pop var(--pn-dur-fast) var(--pn-ease-out) both;
}

.pn-inbox-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    font-size: .8rem;
    color: var(--mud-palette-text-secondary);
}

.pn-inbox-clear .mud-icon-root { font-size: 1rem; color: var(--mud-palette-success); }

.pn-dark .pn-inbox-chip.pn-tone-info { color: var(--mud-palette-info-lighten); }
.pn-dark .pn-inbox-chip.pn-tone-warning { color: var(--mud-palette-warning-lighten); }
.pn-dark .pn-inbox-chip.pn-tone-error { color: var(--mud-palette-error-lighten); }

/* The scrolling part. Fades at the edge that has more content (scroll-driven, where supported). */
.pn-staff-nav-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 8px;
}

@supports (animation-timeline: scroll()) {
    .pn-staff-nav-content {
        animation: pn-scroll-mask linear both;
        animation-timeline: scroll(self);
    }

    @keyframes pn-scroll-mask {
        from { mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent); }
        2% { mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
        98% { mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
        to { mask-image: linear-gradient(to bottom, transparent, #000 24px); }
    }
}

/* Pinned pages (StaffPins), above the groups. */
.pn-pinned {
    display: flex;
    flex-direction: column;
    padding: 4px 0 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pn-pinned-title {
    padding: 6px 20px 4px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pn-pinned-row {
    position: relative;
    animation: pn-pop var(--pn-dur-fast) var(--pn-ease-out) both;
}

.pn-pinned-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 8px;
    padding: 8px 40px 8px 12px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    font-size: .9rem;
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease, transform var(--pn-dur-press) var(--pn-ease-out);
}

.pn-pinned-link .mud-icon-root { color: var(--mud-palette-text-secondary); }
.pn-pinned-link:active { transform: scale(.98); }

.pn-pinned-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.pn-pinned-link.active {
    background: rgba(var(--mud-palette-primary-rgb), .12);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.pn-dark .pn-pinned-link.active { color: var(--mud-palette-primary-lighten); }

/* The unpin button of a pinned row is reachable on touch too (there is no other place to unpin there). */
.pn-pinned-row .pn-pin { display: grid; }
.pn-pinned-row .pn-pin.is-pinned { color: var(--mud-palette-text-secondary); }

@media (hover: none) {
    .pn-pinned-row .pn-pin { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
    .pn-staff-live:hover { color: var(--mud-palette-text-primary); }
    .pn-inbox-chip:hover { filter: brightness(1.08) saturate(1.1); }
    .pn-pinned-row:hover .pn-pin { opacity: 1; }
    .pn-pinned-link:hover { background: var(--mud-palette-action-default-hover); }
    .pn-pinned-link.active:hover { background: rgba(var(--mud-palette-primary-rgb), .16); }
}

/* ---------- Footer ---------- */

/* The page body fills at least the screen under the top bar: the footer is always below the fold, so moving between
   short pages never shows it jumping up and down. Flex column like .mud-main-content, whose children pages were. */
.pn-main-body {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: calc(100dvh - var(--pn-appbar-h));
}

.pn-footer {
    margin-top: 64px;
    padding: 0 24px 20px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

/* Staff tools: only the bottom line, quiet and short. */
.pn-footer--compact {
    margin-top: 40px;
    padding-bottom: 16px;
}

.pn-footer--compact .pn-footer-bottom {
    margin-top: 0;
    border-top: 0;
}

/* Four regions on one row on a desktop; «Jugar ahora» on its own row first below that, the two link lists side by
   side under it and who we are last. */
.pn-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.6fr;
    grid-template-areas: "brand explore help play";
    gap: 32px 40px;
    max-width: var(--pn-page-max);
    margin: 0 auto;
    padding-top: 40px;
}

.pn-footer-brand { grid-area: brand; }
.pn-footer-explore { grid-area: explore; }
.pn-footer-help { grid-area: help; }
.pn-footer-play { grid-area: play; min-width: 0; }

.pn-footer-heading {
    margin: 0 0 14px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.pn-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pn-footer-logo img { border-radius: var(--pn-radius-md); }

.pn-footer-name {
    font-family: var(--pn-font-display);
    font-size: 1.3rem;
    font-weight: 700;
}

.pn-footer-text {
    margin: 0 0 14px;
    max-width: 40ch;
    font-size: .9rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
    text-wrap: pretty;
}

.pn-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Icon buttons of the footer (social links, copy an address): 40px with a hairline, 44px on touch screens. */
.pn-footer .pn-footer-icon-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-secondary);
    transition: color var(--pn-dur-fast) ease, border-color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease;
}

@media (pointer: coarse) {
    .pn-footer .pn-footer-icon-btn { width: 44px; height: 44px; }
}

.pn-footer-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-footer a {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color var(--pn-dur-fast) ease, text-decoration-color var(--pn-dur-fast) ease;
}

/* Each link is a 32px row (WCAG 2.5.8 asks 24px), so a thumb never hits the one beside it. */
.pn-footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
}

.pn-footer-ext.mud-icon-root {
    font-size: .95rem;
    color: var(--mud-palette-text-secondary);
}

/* «Jugar ahora»: who is playing, then the servers as hairline rows (not boxes) and how to join. */
.pn-footer-live {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pn-footer-live strong {
    font-family: var(--pn-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.pn-footer-servers {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-footer-server {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.pn-footer-server-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.pn-footer-server-name {
    overflow: hidden;
    font-weight: 600;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-footer-server-meta {
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.pn-status-dot {
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Static: the footer lists every server, and a ring per row would make the glow a pattern instead of a moment. */
.pn-status-dot.online { background: var(--mud-palette-success); }
.pn-status-dot.offline { background: var(--mud-palette-error); }

.pn-footer a.pn-footer-join {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
    font-weight: 600;
    color: var(--pn-brand-text);
}

.pn-dark .pn-footer a.pn-footer-join { color: var(--mud-palette-primary-lighten); }

.pn-footer-join .mud-icon-root { transition: transform var(--pn-dur-fast) var(--pn-ease-out); }

.pn-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    max-width: var(--pn-page-max);
    margin: 36px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
}

.pn-footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.pn-footer-bottom-links a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pn-footer a:hover { text-decoration-color: currentColor; }
    .pn-footer-join:hover .mud-icon-root { transform: translateX(3px); }

    .pn-footer .pn-footer-icon-btn:hover {
        color: var(--pn-brand-text);
        border-color: rgba(var(--pn-brand-rgb), .5);
        background: var(--pn-brand-soft);
    }

    .pn-dark .pn-footer .pn-footer-icon-btn:hover { color: var(--mud-palette-primary-lighten); }
}

.pn-footer a:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--pn-radius-sm);
}

@media (max-width: 1099.98px) {
    .pn-footer-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "play play"
            "explore help"
            "brand brand";
    }
}

@media (max-width: 600px) {
    .pn-appbar-inner {
        padding: 0 4px;
    }

    .pn-footer {
        padding: 0 16px 16px;
    }

    .pn-footer-grid {
        gap: 28px 20px;
        padding-top: 32px;
    }

    .pn-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-brand,
    .pn-avatar-button,
    .pn-theme-option,
    .pn-inbox-chip,
    .pn-pinned-link,
    .pn-search-pill,
    .pn-footer a,
    .pn-footer .pn-footer-icon-btn,
    .pn-footer-join .mud-icon-root,
    .pn-bottomnav-item,
    .pn-navmenu.mud-navmenu .mud-nav-link {
        transition: none;
    }

    .mud-drawer--open .pn-mobile-nav > * { animation: pn-fade .15s ease both; }
    .pn-live-dot { animation: none; }
    .pn-to-top { transform: none; }
    .pn-nav-badge, .pn-nav-dot, .pn-inbox-count, .pn-pinned-row { animation-name: pn-fade; }
    .pn-staff-drawer.mud-drawer, .mud-layout > .mud-main-content { transition: none !important; }
}

/* Dark mode: text-like uses of the primary take its light tone (#a897ff), which reads better on the dark surfaces than the fill (#8b72ff). */
.pn-dark .mud-primary-text,
.pn-dark .mud-link.mud-link-primary,
.pn-dark .mud-button-text-primary,
.pn-dark .mud-button-outlined-primary,
.pn-dark .mud-tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-primary-lighten)
}

.pn-dark .mud-button-outlined-primary {
    border-color: var(--mud-palette-primary-lighten)
}

/* Grid toolbars wrap on narrow screens instead of overflowing; wide grids scroll inside their own box. */
.mud-data-grid .mud-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    row-gap: 8px;
    padding-block: 8px;
}

.mud-data-grid .mud-table-container {
    overflow-x: auto;
}

@media (max-width: 600px) {
    .mud-data-grid .mud-toolbar .mud-input-control {
        flex: 1 1 100%;
        order: 5;
    }
}

/* ---------- "Ver como rol" (RolePreviewBanner.razor, RolePreviewDialog.razor) ---------- */

.pn-preview-banner {
    position: sticky;
    top: var(--pn-appbar-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 16px;
    background: rgba(var(--mud-palette-warning-rgb), .16);
    border-bottom: 1px solid rgba(var(--mud-palette-warning-rgb), .4);
    color: var(--mud-palette-text-primary);
    font-size: .88rem;
    animation: pn-drop var(--pn-dur) var(--pn-ease-out) both;
}

.pn-preview-banner > .mud-icon-root {
    color: var(--mud-palette-warning);
}

.pn-preview-banner-text {
    flex: 1 1 240px;
    min-width: 0;
}

.pn-preview-banner-note {
    color: var(--mud-palette-text-secondary);
}

.pn-preview-banner-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.pn-preview-roles {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
}

.pn-preview-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 2px 12px 2px 4px;
}

.pn-preview-role + .pn-preview-role {
    border-top: 1px solid var(--pn-line);
}

.pn-preview-role.is-picked {
    background: rgba(var(--mud-palette-primary-rgb), .08);
}

.pn-preview-role > span {
    font-size: .82rem;
}

@media (prefers-reduced-motion: reduce) {
    .pn-preview-banner {
        animation: none;
    }
}