/* Admin backoffice — shared structural styles for the AdminLayout and
   the Admin/* pages. Loaded globally from App.razor; tokens come from
   tokens.css. No hex literals allowed here. */

.admin-page {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.admin-page__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.admin-page__header h1 {
    font-family: var(--font-sans);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    letter-spacing: var(--text-h1-tracking);
    color: var(--text-h1-color);
    margin: 0;
}

.admin-page__subtitle {
    font-size: var(--text-body-md-size);
    color: var(--color-muted);
    margin: 0;
}

.admin-page__toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    justify-content: space-between;
    flex-wrap: wrap;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-xl);
}

.admin-stat__label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    color: var(--text-overline-color);
    text-transform: uppercase;
}

.admin-stat__value {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--text-display-lg-size);
    font-weight: var(--text-display-lg-weight);
    letter-spacing: var(--text-display-lg-tracking);
    line-height: var(--text-display-lg-leading);
    color: var(--text-display-lg-color);
    margin: var(--spacing-xs) 0;
}

.admin-stat__meta {
    display: block;
    font-size: var(--text-caption-size);
    color: var(--color-muted);
}

.admin-page__header--dashboard {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.admin-dashboard__status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.admin-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
}

.admin-alert-grid,
.admin-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
}

.admin-alert {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}

.admin-alert strong {
    font-size: var(--text-body-md-size);
}

.admin-alert span {
    color: var(--color-muted);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-md-leading);
}

.admin-alert--ok {
    border-left-color: var(--color-ok);
}

.admin-alert--warn {
    border-left-color: var(--color-warn);
}

.admin-alert--danger {
    border-left-color: var(--color-danger);
}

.admin-alert--link {
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.admin-alert--link:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.admin-alert--link:focus-visible,
.admin-shortcut:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.admin-dashboard__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-xl);
}

.admin-metric-list,
.admin-metric {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.admin-metric__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    color: var(--color-muted);
}

.admin-metric__label strong {
    color: var(--color-ink);
    font-size: var(--text-h3-size);
}

.admin-metric progress {
    width: 100%;
    height: var(--spacing-sm);
    overflow: hidden;
    accent-color: var(--color-accent);
    border: none;
    border-radius: var(--radius-pill);
    background: var(--color-background);
}

.admin-metric progress::-webkit-progress-bar {
    background: var(--color-background);
    border-radius: var(--radius-pill);
}

.admin-metric progress::-webkit-progress-value {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

.admin-metric progress::-moz-progress-bar {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

.admin-metric__breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: var(--spacing-sm);
}

.admin-metric__breakdown div {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--color-background);
    border-radius: var(--radius-sm);
}

.admin-metric__breakdown span {
    color: var(--color-muted);
    font-size: var(--text-caption-size);
}

.admin-metric__breakdown strong {
    color: var(--color-ink);
    font-size: var(--text-body-md-size);
}

.admin-shortcut {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-height: 104px;
    padding: var(--spacing-lg);
    color: var(--color-ink);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease;
}

.admin-shortcut:hover {
    border-color: var(--color-accent);
    transform: translateY(-1px);
}

.admin-shortcut strong {
    font-size: var(--text-body-md-size);
}

.admin-shortcut span {
    color: var(--color-muted);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-md-leading);
}

@media (max-width: 860px) {
    .admin-page__header--dashboard,
    .admin-section-heading {
        flex-direction: column;
    }

    .admin-dashboard__status {
        justify-content: flex-start;
    }

    .admin-dashboard__columns {
        grid-template-columns: minmax(0, 1fr);
    }
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--text-body-sm-size);
}

.admin-table thead th {
    text-align: left;
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-background);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    color: var(--text-overline-color);
    text-transform: uppercase;
    border-bottom: var(--border-width) solid var(--color-border);
}

.admin-table tbody td {
    padding: var(--spacing-md) var(--spacing-xl);
    color: var(--color-ink);
    border-bottom: var(--border-width) solid var(--color-border);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--color-background);
}

.admin-table--jobs td {
    vertical-align: top;
}

.admin-job-scene,
.admin-muted {
    display: block;
}

.admin-muted {
    margin-top: var(--spacing-xs);
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--text-mono-size);
    word-break: break-all;
}

.admin-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.admin-form-grid,
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

.admin-form-grid label {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    color: var(--color-muted);
    font-size: var(--text-body-sm-size);
}

.admin-detail-grid {
    margin: var(--spacing-lg) 0 0;
}

.admin-detail-grid div {
    min-width: 0;
}

.admin-detail-grid dt {
    color: var(--color-muted);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    text-transform: uppercase;
}

.admin-detail-grid dd {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-ink);
    word-break: break-word;
}

.admin-job-detail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.admin-job-detail__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.admin-job-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-md);
    margin: 0;
}

.admin-job-detail__grid div {
    min-width: 0;
}

.admin-job-detail__grid dt {
    color: var(--color-muted);
    font-size: var(--text-overline-size);
    font-weight: var(--text-overline-weight);
    letter-spacing: var(--text-overline-tracking);
    text-transform: uppercase;
}

.admin-job-detail__grid dd {
    margin: var(--spacing-xs) 0 0;
    color: var(--color-ink);
    word-break: break-word;
}

.admin-job-detail__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.admin-reject-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.admin-code {
    margin: 0;
    max-height: 280px;
    overflow: auto;
    padding: var(--spacing-md);
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-size: var(--text-mono-size);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-empty {
    color: var(--color-muted);
    font-size: var(--text-body-sm-size);
    margin: 0;
}

.admin-empty code {
    background: var(--color-background);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-xs);
    padding: 2px var(--spacing-xs);
    font-family: var(--font-mono);
    font-size: var(--text-mono-size);
}

.admin-page h2 {
    font-family: var(--font-sans);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    letter-spacing: var(--text-h3-tracking);
    color: var(--text-h3-color);
    margin: 0 0 var(--spacing-md);
}

.admin-stub {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-xxl);
    background: var(--color-surface);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    color: var(--color-muted);
}

.admin-stub__heading {
    font-family: var(--font-sans);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    color: var(--color-ink);
    margin: 0;
}

/* 403 panel rendered by AdminLayout when an authenticated user lacks the
   SuperAdmin role. Anonymous users hit RedirectToLogin instead. */
.admin-forbidden {
    max-width: 540px;
    margin: var(--spacing-xxl) auto;
    padding: var(--spacing-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-xl);
}

.admin-forbidden h1 {
    font-family: var(--font-sans);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    letter-spacing: var(--text-h2-tracking);
    color: var(--color-danger);
    margin: 0;
}

.admin-forbidden p {
    font-size: var(--text-body-md-size);
    color: var(--color-ink-2);
    line-height: var(--text-body-md-leading);
    margin: 0;
}

.admin-forbidden__exit {
    align-self: flex-start;
    color: var(--color-accent);
    font-size: var(--text-body-md-size);
    text-decoration: none;
}

.admin-forbidden__exit:hover {
    text-decoration: underline;
}

/* Toolbar that sits between the page header and the data table — holds
   filter inputs and the result-count chip. Wraps on narrow viewports. */
.admin-page__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.admin-filter-input {
    flex: 0 1 220px;
    width: 100%;
    align-self: stretch;
    min-height: 36px;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-body-sm-size);
    color: var(--color-ink);
}

.admin-filter-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.admin-form-grid .admin-filter-input {
    flex: initial;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    padding-top: var(--spacing-sm);
}

.admin-pagination__indicator {
    font-size: var(--text-body-sm-size);
    color: var(--color-muted);
    min-width: 120px;
    text-align: center;
}

.admin-support {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
    gap: var(--spacing-xl);
    align-items: start;
}

.admin-support__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.admin-support__row {
    cursor: pointer;
}

.admin-support__row.is-active {
    background: var(--color-background);
}

.admin-support__preview {
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-support__detail,
.admin-support__messages,
.admin-support__reply {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.admin-support__messages {
    max-height: 480px;
    overflow: auto;
    padding-right: var(--spacing-xs);
}

.admin-support__message {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.admin-support__message.is-staff {
    border-left: 4px solid var(--color-accent);
}

.admin-support__message.is-visitor {
    border-left: 4px solid var(--color-border-strong);
    background: var(--color-background);
}

.admin-support__message header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.admin-support__message header span {
    color: var(--color-muted);
    font-size: var(--text-caption-size);
}

.admin-support__message p {
    margin: 0;
    white-space: pre-wrap;
}

.admin-support__reply textarea {
    width: 100%;
    resize: vertical;
}

@media (max-width: 1200px) {
    .admin-support {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Full-viewport overlay rendered by <AdminAuthGate /> until the
   SuperAdmin check resolves. Sits on top of the layout chrome (sidebar +
   body) so the backoffice is visually + interactively inert during the
   restore window. Once authorized the gate renders nothing and the
   layout shows through. */
.admin-auth-gate {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    background: var(--color-background);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body-md-size);
}

.admin-auth-gate > p {
    margin: 0;
    color: var(--color-muted);
}

.admin-export-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
}

.admin-export-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}