/* ==========================================================================
   Admin (/admin). Builds on app.css foundation.
   ========================================================================== */

/* Overview stats ------------------------------------------------------------ */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.admin-stat {
    display: grid;
    gap: 4px;
    padding: 16px 20px;
}

.admin-stat__label {
    color: var(--text-3);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-stat strong {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Section switcher ---------------------------------------------------------- */
.admin-sections {
    margin-bottom: 16px;
}

@media (max-width: 560px) {
    .admin-sections .segmented {
        display: flex;
        width: 100%;
    }

    .admin-sections .segmented button {
        flex: 1 0 auto;
        padding-inline: 10px;
    }

    .admin-sections .segmented__count {
        display: none;
    }
}

/* Layout grids ---------------------------------------------------------------- */
.admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

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

.admin-activity {
    --stack-gap: 16px;
}

/* Toolbar ----------------------------------------------------------------------- */
.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    padding-block: 16px;
    border-bottom: 1px solid var(--border);
}

.admin-toolbar__search {
    flex: 1 1 260px;
    max-width: 420px;
}

.admin-toolbar .field + .field {
    margin-top: 0;
}

@media (max-width: 560px) {
    .admin-toolbar__search {
        max-width: none;
    }

    .admin-toolbar .segmented {
        display: flex;
        width: 100%;
    }

    .admin-toolbar .field {
        flex: 1 1 100%;
    }
}

/* Forms ----------------------------------------------------------------------- */
.admin-switch__label {
    font-weight: 500;
}

.admin-switch-row {
    display: grid;
    gap: 6px;
}

.admin-switch-row .field__hint {
    padding-left: 56px;
}

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

.card__body > .switch + .form-grid,
.card__body > .form-grid + .form-grid {
    margin-top: 20px;
}

.admin-check {
    margin-top: 20px;
}

.admin-check--compact {
    margin-top: 4px;
    font-size: 0.875rem;
}

.admin-section-alert {
    margin-top: 16px;
}

.admin-dialog-row {
    margin-top: 16px;
}

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

    .admin-switch-row .field__hint {
        padding-left: 0;
    }
}

/* Tables ------------------------------------------------------------------------ */
.admin-table-wrap {
    overflow-x: auto;
}

.admin-table-wrap:focus-visible {
    outline-offset: -2px;
}

.admin-table td {
    color: var(--text-2);
}

.admin-table strong {
    color: var(--text);
    font-weight: 500;
}

.admin-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.admin-user {
    display: grid;
    min-width: 0;
}

.admin-user strong {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.admin-user .muted {
    overflow-wrap: anywhere;
    font-size: var(--fs-sm);
}

.admin-role-select.input {
    width: auto;
    min-width: 116px;
    min-height: 36px;
    padding-block: 6px;
}

.admin-badges {
    --cluster-gap: 6px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

/* Keep Save role / Suspend / Delete on one line in the desktop table; the stacked mobile layout wraps them. */
@media (min-width: 761px) {
    .admin-actions {
        flex-wrap: nowrap;
    }

    .admin-cell-actions {
        width: 1%;
        white-space: nowrap;
    }
}

.admin-row--suspended .admin-cell-user .avatar {
    background: var(--danger-soft);
    color: var(--danger);
}

.admin-row-alert td {
    padding-top: 0;
}

.table tbody tr.admin-row-alert:hover td {
    background: transparent;
}

.admin-row-alert .alert {
    align-items: center;
}

.admin-room-link {
    font-size: var(--fs-sm);
    font-weight: 500;
}

/* Stacked cards for narrow screens: every cell gets its column name from data-label,
   so actions are never hidden behind sideways scrolling. */
@media (max-width: 760px) {
    .admin-table-wrap {
        overflow: visible;
    }

    .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .admin-table,
    .admin-table tbody,
    .admin-table tr,
    .admin-table td {
        display: block;
        width: 100%;
    }

    .admin-table tbody tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }

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

    .table.admin-table tbody tr:hover td {
        background: transparent;
    }

    .admin-table td,
    .table.admin-table tbody tr:last-child td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 36px;
        padding: 6px 0;
        border-bottom: 0;
        text-align: right;
    }

    .admin-table td::before {
        content: attr(data-label);
        flex: none;
        color: var(--text-3);
        font-size: var(--fs-sm);
        font-weight: 500;
        text-align: left;
    }

    .admin-table td:not([data-label])::before {
        content: none;
    }

    .admin-table .admin-cell-user {
        justify-content: flex-start;
        padding-bottom: 8px;
        text-align: left;
    }

    .admin-user-cell {
        min-width: 0;
    }

    .admin-table .admin-cell-user::before,
    .admin-table .admin-cell-actions::before {
        content: none;
    }

    .admin-table .admin-cell-actions {
        padding-top: 10px;
    }

    .admin-table .admin-actions {
        width: 100%;
        justify-content: stretch;
    }

    .admin-table .admin-actions .btn {
        flex: 1 1 0;
    }

    .admin-table .admin-badges {
        justify-content: flex-end;
    }

    .admin-table tr.admin-row-alert {
        padding-top: 0;
    }

    .admin-table tr.admin-row-alert td {
        display: block;
        text-align: left;
    }
}