/* Shared styles for every admin screen (T10) — UX §14's header note: "a persistent top border strip
   in --sd-danger and an 'Admin' label, so that a staff member can never mistake an admin action for
   a player action." DesignSystem §2.6 (tables), §2.8 (state patterns), §2.4 (buttons), §3.4
   (accessibility) subset relevant to admin screens only — no status bar/meters/timers/azulejo/glass,
   which are gameplay-only components no admin screen uses. */

.admin-shell {
    border-top: 4px solid var(--sd-danger);
    min-height: 100vh;
}

.admin-header {
    display: flex;
    align-items: center;
    gap: var(--sd-space-3);
    padding: var(--sd-space-4) var(--sd-space-6);
    border-bottom: 1px solid var(--sd-border-subtle);
    background: var(--sd-surface-1);
}

.admin-header__badge {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--sd-danger);
    border: 1px solid var(--sd-danger);
    border-radius: var(--sd-radius-sm);
    padding: 2px var(--sd-space-2);
}

.admin-header__title {
    font-size: var(--sd-text-lg);
    line-height: var(--sd-line-lg);
    margin: 0;
}

.admin-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--sd-space-6);
}

/* Tables — §2.6: dense by default, sticky headers, right-aligned numerals, hairline row separators. */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sd-text-sm);
    line-height: var(--sd-line-sm);
}

.admin-table th {
    position: sticky;
    top: 0;
    text-align: left;
    color: var(--sd-text-secondary);
    font-weight: 600;
    padding: var(--sd-space-2) var(--sd-space-3);
    border-bottom: 1px solid var(--sd-border-default);
    background: var(--sd-surface-1);
}

.admin-table td {
    padding: var(--sd-space-2) var(--sd-space-3);
    border-bottom: 1px solid var(--sd-border-subtle);
}

.admin-table tbody tr:hover {
    background: var(--sd-surface-3);
}

.admin-table .numeric {
    text-align: right;
    font-family: var(--sd-font-data);
    font-variant-numeric: tabular-nums lining-nums;
}

/* Cards — §2.7. */
.admin-card {
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-md);
    padding: var(--sd-space-4);
}

.admin-field-label {
    color: var(--sd-text-secondary);
    font-size: var(--sd-text-xs);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: var(--sd-space-2);
}

/* State patterns — §2.8. */
.admin-state-empty,
.admin-state-error {
    padding: var(--sd-space-6);
    text-align: center;
    color: var(--sd-text-secondary);
}

.admin-state-error {
    color: var(--sd-danger);
}

.admin-state-loading {
    padding: var(--sd-space-6);
    color: var(--sd-text-secondary);
}

/* Inline-edit inputs — §1.4 (radius-sm is spec'd for "inputs, chips, badges"). */
.admin-input {
    font-family: var(--sd-font-data);
    font-size: var(--sd-text-sm);
    border-radius: var(--sd-radius-sm);
    border: 1px solid var(--sd-border-default);
    background: var(--sd-surface-1);
    color: var(--sd-text-primary);
    padding: var(--sd-space-2) var(--sd-space-3);
}

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

.admin-input--invalid {
    border-color: var(--sd-danger);
}

.admin-field-error {
    color: var(--sd-danger);
    font-size: var(--sd-text-xs);
    margin-top: var(--sd-space-1);
}

/* Modified-from-default marker — UX §14.1. */
.admin-table tr.is-modified td:first-child {
    box-shadow: inset 3px 0 0 var(--sd-accent);
}

/* Buttons — §2.4. */
.admin-button {
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    border-radius: var(--sd-radius-sm);
    padding: var(--sd-space-2) var(--sd-space-4);
    border: 1px solid var(--sd-border-default);
    background: transparent;
    color: var(--sd-text-primary);
    cursor: pointer;
    min-height: 44px;
    transition: background-color var(--sd-dur-instant) var(--sd-ease);
}

.admin-button:hover {
    background: var(--sd-surface-3);
}

.admin-button:focus-visible {
    outline: 2px solid var(--sd-accent);
    outline-offset: 2px;
}

.admin-button--primary {
    background: var(--sd-accent);
    color: var(--sd-text-inverse);
    border-color: var(--sd-accent);
}

.admin-button--primary:hover {
    background: var(--sd-accent-hover);
    border-color: var(--sd-accent-hover);
}