/* =========================================================
   SYSTEM ADMIN - USER MODULE
========================================================= */


/* =========================================================
   VIEW HEADER
========================================================= */

.users-view-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

}


.users-view-header-left {

    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 0;

}


.users-view-header-right {

    display: flex;
    align-items: center;
    gap: 8px;

}


/* =========================================================
   USERS CARD
========================================================= */

.users-card {

    width: 100%;

}


.users-card-body {

    padding: 0;

}


/* =========================================================
   LIST TOOLBAR
========================================================= */

.users-list-toolbar {

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 48px;

    padding:
        12px 16px;

    border-bottom:
        1px solid
        var(--border-color, #e0e0e0);

}


.users-list-summary {

    font-size: 14px;

    color:
        var(--text-secondary, #666);

}


/* =========================================================
   LIST CONTAINER
========================================================= */

.users-list-container {

    width: 100%;

    overflow-x: auto;

}


/* =========================================================
   LOADING
========================================================= */

.users-list-loading {

    padding: 32px 16px;

    text-align: center;

    font-size: 14px;

    color:
        var(--text-secondary, #666);

}


/* =========================================================
   EMPTY
========================================================= */

.users-list-empty {

    padding: 48px 16px;

    text-align: center;

    font-size: 14px;

    color:
        var(--text-secondary, #666);

}


/* =========================================================
   TABLE
========================================================= */

.users-table {

    width: 100%;

    border-collapse: collapse;

    min-width: 820px;

}


.users-table thead th {

    padding:
        12px 16px;

    text-align: left;

    white-space: nowrap;

    font-size: 13px;

    font-weight: 600;

    color:
        var(--text-secondary, #666);

    background:
        var(--surface-secondary, #f7f7f7);

    border-bottom:
        1px solid
        var(--border-color, #e0e0e0);

}


.users-table tbody td {

    padding:
        13px 16px;

    font-size: 14px;

    border-bottom:
        1px solid
        var(--border-color, #e0e0e0);

    vertical-align: middle;

}


/* =========================================================
   TABLE ROW
========================================================= */

.users-table-row {

    cursor: pointer;

    transition:
        background-color 0.12s ease;

}


.users-table-row:hover {

    background:
        var(--surface-hover, #f5f5f5);

}


.users-table-row:focus {

    outline: none;

    background:
        var(--surface-hover, #f5f5f5);

}


.users-table-row:last-child td {

    border-bottom: none;

}


/* =========================================================
   COLUMNS
========================================================= */

.users-col-id {

    width: 80px;

    white-space: nowrap;

    color:
        var(--text-secondary, #666);

}


/* =========================================================
   PRIMARY TEXT
========================================================= */

.users-primary-text {

    font-weight: 500;

    color:
        var(--text-primary, #222);

}


/* =========================================================
   ROLE
========================================================= */

.users-role {

    display: inline-flex;

    align-items: center;

    min-height: 26px;

    padding:
        3px 8px;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}


.users-role-admin {

    background:
        var(--surface-secondary, #f0f0f0);

}


.users-role-super_admin {

    background:
        var(--surface-secondary, #e8e8e8);

}


/* =========================================================
   STATUS
========================================================= */

.users-status {

    display: inline-flex;

    align-items: center;

    min-height: 26px;

    padding:
        3px 8px;

    border-radius: 4px;

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}


.users-status-active {

    background:
        var(--surface-secondary, #eef7ee);

}


.users-status-disabled {

    background:
        var(--surface-secondary, #f5eeee);

}


/* =========================================================
   FORM - SHARED
========================================================= */

.users-form {

    width: 100%;

}


.users-form-section {

    margin-bottom: 24px;

}


.users-form-section:last-child {

    margin-bottom: 0;

}


.users-form-section-title {

    margin:
        0 0 16px;

    font-size: 15px;

    font-weight: 600;

}


.users-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;

}


.users-form-field {

    min-width: 0;

}


.users-form-field-full {

    grid-column:
        1 / -1;

}


.users-form-label {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: 500;

}


.users-form-required {

    margin-left: 2px;

}


.users-form-input {

    width: 100%;

    min-height: 40px;

    padding:
        8px 10px;

    box-sizing: border-box;

}


.users-form-help {

    margin-top: 5px;

    font-size: 12px;

    color:
        var(--text-secondary, #666);

}


.users-form-actions {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    margin-top: 24px;

}


.users-form-actions-left,
.users-form-actions-right {

    display: flex;

    align-items: center;

    gap: 8px;

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .users-view-header {

        align-items: flex-start;

    }


    .users-view-header-right {

        flex-shrink: 0;

    }


    .users-form-grid {

        grid-template-columns:
            1fr;

    }


    .users-form-field-full {

        grid-column:
            auto;

    }

}