/* ---------- Admin home (/admin, Pages/Admin/Index.razor) ----------
   A staff tool: a quiet header with the live line and the tool search, the "Esperando" strip (one cell per queue the
   user handles, split by hairlines, the most urgent one's dot rings twice), then every tool by task as hairline rows
   beside a sticky index that follows the reading (data-spy). Tokens only; no cards, no glow.
   Motion: queue cells and rows rise in one after another ([data-stagger]) when their section is revealed, the counts
   count up ([data-count]), filtered rows slide to their new place ([data-flip]); hover only nudges. */

/* ---- Header */

.pn-adm-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--pn-line);
}

.pn-adm-hello {
    min-width: 0;
}

.pn-adm-title {
    margin: 0;
    font-family: var(--pn-font-display);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.15;
    text-wrap: balance;
}

.pn-adm-lede {
    margin: 4px 0 0;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
}

.pn-adm-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 10px 0 0;
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pn-adm-status > .pn-live-dot {
    margin-right: -8px; /* the dot sits beside its sentence, not a gap away */
}

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

.pn-adm-warn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    border: 1px solid rgba(var(--mud-palette-warning-rgb), .4);
    border-radius: var(--pn-radius-sm);
    background: rgba(var(--mud-palette-warning-rgb), .08);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease;
}

.pn-adm-warn .mud-icon-root {
    color: var(--mud-palette-warning);
}

.pn-adm-find {
    flex: 0 1 380px;
    min-width: 240px;
}

/* ---- Section titles */

.pn-adm-h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    font-family: var(--pn-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.pn-adm-h2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
}

/* ---- "Esperando": one cell per queue. The cells wrap and stretch, so a short last row is never left with holes;
   each draws its right and bottom hairline, and the strip's edge clips the outer ones. */

.pn-adm-queues {
    margin-bottom: 40px;
}

.pn-adm-queue {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-adm-queue > li {
    display: flex;
    flex: 1 1 176px;
    min-width: 0;
    box-shadow: 1px 0 0 var(--pn-line), 0 1px 0 var(--pn-line);
}

.pn-adm-q {
    --pn-q-rgb: var(--mud-palette-primary-rgb);
    --pn-q: var(--mud-palette-text-secondary);
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 14px 16px 16px;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease;
}

.pn-adm-q--error { --pn-q: var(--mud-palette-error); --pn-q-rgb: var(--mud-palette-error-rgb); }
.pn-adm-q--warning { --pn-q: var(--mud-palette-warning); --pn-q-rgb: var(--mud-palette-warning-rgb); }
.pn-adm-q--info { --pn-q: var(--mud-palette-info); --pn-q-rgb: var(--mud-palette-info-rgb); }

.pn-adm-q-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: .875rem;
    font-weight: 600;
}

.pn-adm-q-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pn-adm-q-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--pn-q);
}

/* Nothing waiting: a hollow ring, the count and its hint quiet. */
.pn-adm-q.is-zero .pn-adm-q-dot {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--mud-palette-lines-inputs);
}

.pn-adm-q.is-zero .pn-adm-q-count {
    color: var(--mud-palette-text-secondary);
}

.pn-adm-q-go {
    margin-left: auto;
    flex: none;
    opacity: 0;
    translate: -4px 0;
    color: var(--mud-palette-text-secondary);
    transition: opacity var(--pn-dur-fast) ease, translate var(--pn-dur-fast) var(--pn-ease-out);
}

.pn-adm-q-count {
    margin-top: 8px;
    font-family: var(--pn-font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.pn-adm-q-hint {
    font-size: .8125rem;
    color: var(--mud-palette-text-secondary);
}

/* The most urgent queue with work: a faint wash of its tone, and its dot rings twice when the strip appears. */
.pn-adm-q[data-lead] {
    background: rgba(var(--pn-q-rgb), .06);
}

.pn-adm-q[data-lead] .pn-adm-q-dot {
    --pn-ring-rgb: var(--pn-q-rgb);
    animation: pn-ring 1.1s var(--pn-ease-out) 400ms 2;
}

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

.pn-adm-q:active {
    background: var(--pn-brand-soft);
}

/* Every queue empty: one line instead of a strip of zeros. */
.pn-adm-clear {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius);
    background: var(--mud-palette-surface);
}

.pn-adm-clear-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: rgba(var(--mud-palette-success-rgb), .14);
    color: var(--mud-palette-success);
    animation: pn-pop 320ms var(--pn-ease-out) 200ms backwards;
}

/* ---- Tools: index + sections */

.pn-adm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
}

.pn-adm-index {
    display: none;
}

@media (min-width: 1280px) {
    .pn-adm-layout {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }

    .pn-adm-index {
        position: sticky;
        top: calc(var(--pn-appbar-h, 64px) + 20px);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
}

.pn-adm-index a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--pn-dur-fast) ease, background-color var(--pn-dur-fast) ease;
}

.pn-adm-index-title {
    flex: 1;
    min-width: 0;
}

/* The section being read: the violet wash, no side bar. */
.pn-adm-index a[data-current] {
    background: var(--pn-brand-soft);
    color: var(--mud-palette-text-primary);
}

.pn-adm-index a[data-current] .mud-icon-root {
    color: var(--pn-brand-text);
}

.pn-adm-index-dot {
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--mud-palette-warning);
}

.pn-adm-main {
    min-width: 0;
}

.pn-adm-section {
    margin-bottom: 36px;
    scroll-margin-top: calc(var(--pn-appbar-h, 64px) + 16px);
}

.pn-adm-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    column-gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pn-adm-links > li {
    border-top: 1px solid var(--pn-line);
}

.pn-adm-link {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px -10px;
    padding: 8px 10px;
    border-radius: var(--pn-radius-md);
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    transition: background-color var(--pn-dur-fast) ease;
}

.pn-adm-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--pn-radius-md);
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-secondary);
    transition: background-color var(--pn-dur-fast) ease, color var(--pn-dur-fast) ease;
}

.pn-adm-link-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.pn-adm-link-label {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.35;
}

.pn-adm-link-desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: .8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

/* Pending work behind a tool: a neutral pill, the same as the staff drawer's. */
.pn-adm-link-count {
    min-width: 22px;
    height: 22px;
    flex: none;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    font-size: .75rem;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.pn-adm-link-go {
    flex: none;
    color: var(--mud-palette-text-secondary);
    transition: translate var(--pn-dur-fast) var(--pn-ease-out), color var(--pn-dur-fast) ease;
}

/* While searching, the tool Enter opens. */
.pn-adm-link[data-first] {
    background: var(--pn-brand-soft);
}

.pn-adm-link-enter {
    flex: none;
    padding: 0 6px;
    border: 1px solid var(--pn-line);
    border-radius: var(--pn-radius-sm);
    background: var(--mud-palette-surface);
    font-size: .75rem;
    line-height: 20px;
    color: var(--mud-palette-text-secondary);
}

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

/* A press answers with the violet wash (navigation rows never scale). */
.pn-adm-link:active {
    background: var(--pn-brand-soft);
}

.pn-adm-empty {
    padding: 8px 0 24px;
}

.pn-adm-empty p {
    margin: 0 0 12px;
    color: var(--mud-palette-text-secondary);
}

@media (hover: hover) and (pointer: fine) {
    .pn-adm-warn:hover { background: rgba(var(--mud-palette-warning-rgb), .14); }

    .pn-adm-q:hover { background: var(--mud-palette-action-default-hover); }
    .pn-adm-q[data-lead]:hover { background: rgba(var(--pn-q-rgb), .1); }
    .pn-adm-q:hover .pn-adm-q-go { opacity: 1; translate: 0 0; }

    .pn-adm-index a:hover { color: var(--mud-palette-text-primary); }

    .pn-adm-link:hover { background: var(--mud-palette-action-default-hover); }
    .pn-adm-link:hover .pn-adm-link-icon { background: var(--pn-brand-soft); color: var(--pn-brand-text); }
    .pn-adm-link:hover .pn-adm-link-go { translate: 3px 0; color: var(--pn-brand-text); }
}

/* ---- Phone */

@media (max-width: 599.98px) {
    .pn-adm-find {
        flex-basis: 100%;
        min-width: 0;
    }

    .pn-adm-queue > li {
        flex-basis: 140px;
    }

    .pn-adm-q {
        padding: 12px;
    }

    .pn-adm-q-count {
        font-size: 1.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pn-adm-q[data-lead] .pn-adm-q-dot { animation: none; }
    .pn-adm-clear-icon { animation-name: pn-fade; }
    .pn-adm-q-go, .pn-adm-link-go { transition: none; }
}