/* 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-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;
    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-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;
}

/* 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);
}