/* =========================
   Users page (theme-aware)
   ========================= */
#users-page {
    color: var(--sb-fg);
}

    /* Cards */
    #users-page .users-head,
    #users-page .users-table {
        background: var(--sb-card);
        border: 1px solid var(--sb-border);
        border-radius: 12px;
        box-shadow: var(--sb-shadow-1);
        transition: transform .12s ease, box-shadow .15s ease;
    }

        #users-page .users-head:hover,
        #users-page .users-table:hover {
            box-shadow: var(--sb-shadow-2);
            transform: translateY(-1px);
        }

    /* Table foundation */
    #users-page table.table {
        --bs-table-bg: var(--sb-card);
        --bs-table-color: var(--sb-fg);
        --bs-table-border-color: var(--sb-border);
        --bs-table-striped-bg: color-mix(in srgb, var(--sb-card) 92%, #000);
        --bs-table-hover-bg: color-mix(in srgb, var(--sb-card) 86%, #000);
        margin-bottom: 0;
        border-color: var(--sb-border);
        font-size: .95rem;
    }

    /* Head & body cells */
    #users-page table thead th {
        background: color-mix(in srgb, var(--sb-card) 85%, var(--sb-bg));
        color: var(--sb-fg);
        border-bottom: 1px solid var(--sb-border);
        font-weight: 700;
        letter-spacing: .01em;
        vertical-align: middle;
    }

    #users-page table tbody td {
        vertical-align: middle;
        border-top-color: var(--sb-border);
        padding: .65rem .75rem;
    }

    /* Row hover */
    #users-page .users-table .table tbody tr:hover {
        background: var(--bs-table-hover-bg);
    }
    /* Slight extra lift on cell background (subtle) */
    #users-page tbody tr:hover td {
        background: color-mix(in srgb, var(--sb-card) 96%, var(--sb-bg));
    }

    /* Utilities */
    #users-page .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12.5px;
    }

    #users-page .truncate {
        max-width: 420px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 992px) {
    #users-page .truncate {
        max-width: 260px;
    }
}

/* Small, subtle badges that work in both themes */
#users-page .users-badge {
    font-weight: 600;
    padding: .35rem .5rem;
    border-radius: 999px;
}

/* Action buttons alignment */
#users-page .btn-toolbar .btn-group .btn {
    min-width: 64px;
}

#users-page .btn-toolbar .btn-group + .btn-group {
    margin-left: .5rem;
}

/* Outline buttons (brand-aware) */
#users-page .btn-outline-primary {
    border-color: var(--sb-accent);
    color: var(--sb-accent);
}

    #users-page .btn-outline-primary:hover {
        background: var(--sb-accent);
        color: #fff;
    }

#users-page .btn-outline-secondary {
    border-color: var(--sb-card-ring, var(--sb-border));
    color: var(--sb-fg);
}

    #users-page .btn-outline-secondary:hover {
        background: var(--sb-card-ring, var(--sb-border));
        color: var(--sb-fg);
    }

#users-page .btn-outline-danger {
    border-color: #dc3545;
    color: #dc3545;
}

    #users-page .btn-outline-danger:hover {
        background: #dc3545;
        color: #fff;
    }

/* Stack actions on narrow screens */
@media (max-width: 640px) {
    #users-page .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

        #users-page .btn-group .btn {
            flex: 1 1 auto;
        }

    #users-page .truncate {
        max-width: 18ch;
    }
}

/* Dark-mode header contrast tweak */
html[data-theme="dark"] #users-page table thead th {
    background: color-mix(in srgb, var(--sb-card) 75%, #000);
}