/* =============================================== */
    /*      REFINED & MODERN USERS PAGE STYLES         */
    /* =============================================== */

    .users-page-container {
        width: 100%;
    }

    /* --- Control Bar --- */
    .users-control-bar {
        padding: 1rem;
        background-color: transparent !important; /* Remove box background */
        border: none;
        box-shadow: none !important;
        margin-bottom: 1rem;
    }

    .users-filters-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        align-items: center;
    }

    .users-filters-container .field {
        margin-bottom: 0 !important;
    }

    /* Search Input */
    .users-filters-container .input {
        min-width: 250px;
        background-color: var(--bulma-black-ter) !important;
        border-color: var(--bulma-border) !important;
        box-shadow: none !important;
    }
    .users-filters-container .input:focus {
        border-color: var(--bulma-border-hover) !important;
    }

    /* Dropdowns (Roles, Sort) */
    .users-filters-container .select select,
    .users-filters-container .dropdown .button {
        background-color: var(--bulma-black-ter) !important;
        border: 1px solid var(--bulma-border) !important;
        font-weight: var(--bulma-weight-medium);
    }
     .users-filters-container .select:hover select,
     .users-filters-container .dropdown:hover .button {
        border-color: var(--bulma-border-hover);
     }
    .dropdown-menu {
        background-color: var(--bulma-black-ter);
        border: 1px solid var(--bulma-border);
    }

    /* Active filter tags display */
    #active-user-filters {
        padding-left: 0.25rem;
    }
    #active-user-filters .tag {
        background-color: var(--bulma-black-ter);
        color: var(--bulma-text);
        font-weight: var(--bulma-weight-medium);
    }
    #active-user-filters .tag .delete {
        background-color: var(--bulma-grey-dark);
    }
    #active-user-filters .tag .delete:hover {
        background-color: var(--bulma-grey);
    }

    /* --- User Table --- */
    .table-container {
        background-color: var(--bulma-black-ter);
        border-radius: var(--bulma-radius-medium);
        overflow: hidden;
    }

    .users-table {
        background-color: transparent;
        border-collapse: collapse; /* Cleaner lines */
    }

    .users-table thead th {
        border-bottom: 1px solid var(--bulma-border);
        color: var(--bulma-text-weak) !important;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.75rem 1.5rem;
        font-weight: var(--bulma-weight-medium);
    }

    .users-table tbody tr:hover {
        background-color: var(--bulma-black) !important;
    }

    .users-table tbody td {
        border-bottom: 1px solid var(--bulma-border-weak);
        padding: 1rem 1.5rem;
        vertical-align: middle;
    }
    .users-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Main User Info Cell */
    .user-info-cell {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .user-info-cell .image {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .user-info-text .username-link {
        font-weight: var(--bulma-weight-semibold);
        color: var(--bulma-text-strong) !important;
        font-size: 1rem;
    }
    .user-info-text .role-tag {
        font-size: 0.7rem;
        font-weight: var(--bulma-weight-semibold);
        height: auto;
        padding: 0.1em 0.5em;
        line-height: 1.3;
        color: var(--bulma-text-weak) !important;
        background-color: transparent !important;
        border: 1px solid var(--bulma-border);
    }
    .user-info-text .role-tag.is-vip {
        color: var(--uwupad-vip) !important;
        border-color: var(--uwupad-vip) !important;
        opacity: 0.7;
    }

    .user-id-cell {
        font-family: var(--bulma-family-code);
        color: var(--bulma-text-weak);
        font-size: 0.9em;
    }

    .user-actions a.button, .user-actions button.button {
        color: var(--bulma-text-weak) !important;
        border-radius: 50% !important;
        width: 32px;
        height: 32px;
    }
    .user-actions a.button:hover, .user-actions button.button:hover {
        background-color: var(--bulma-grey-darker) !important;
        color: var(--bulma-text-strong) !important;
    }

    /* --- Skeleton Loader --- */
    .skeleton-row td {
        border-bottom: 1px solid var(--bulma-border-weak);
    }
    .skeleton-row:last-child td {
        border-bottom: none;
    }
    .skeleton {
        animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        background-color: var(--bulma-black);
    }
    @keyframes pulse { 50% { opacity: 0.6; } }

    .skeleton.is-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
    }
    .skeleton.skeleton-line {
        height: 10px;
        border-radius: var(--bulma-radius-small);
    }