/* ============================================================
   EASY WAY OPERATION SYSTEM
   PHASE 6 — ADVANCED USER & TEAM MANAGEMENT
   ============================================================ */


/* ============================================================
   USER LIST
   ============================================================ */

.users-page {

    max-width:
        1500px;

}


.users-filters {

    display:
        grid;

    grid-template-columns:
        minmax(260px, 1fr)
        160px
        160px
        auto
        auto;

    gap:
        9px;

    margin-bottom:
        18px;

}


.users-filters input,
.users-filters select {

    min-height:
        44px;

    width:
        100%;

    padding:
        0 13px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        9px;

    color:
        var(--text);

    font-size:
        10px;

    outline:
        none;

}


.users-filters input:focus,
.users-filters select:focus {

    border-color:
        var(--border-light);

}


.users-clear {

    min-height:
        44px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 16px;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    color:
        var(--muted);

    font-size:
        10px;

    font-weight:
        800;

    text-decoration:
        none;

}


.users-card {

    overflow:
        hidden;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.users-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

}


.users-table {

    width:
        100%;

    min-width:
        1050px;

    border-collapse:
        collapse;

}


.users-table th {

    padding:
        15px 17px;

    border-bottom:
        1px solid var(--border);

    background:
        #101010;

    color:
        var(--muted);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-align:
        left;

    white-space:
        nowrap;

}


.users-table td {

    padding:
        16px 17px;

    border-bottom:
        1px solid #202020;

    color:
        #999;

    font-size:
        10px;

    white-space:
        nowrap;

}


.users-table tbody tr:last-child td {

    border-bottom:
        none;

}


.users-table tbody tr:hover {

    background:
        #151515;

}


.user-inactive-row {

    opacity:
        .55;

}


.user-table-name {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--text);

    text-decoration:
        none;

}


.user-table-avatar {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 35px;

    border:
        1px solid var(--border-light);

    border-radius:
        9px;

    background:
        #181818;

    color:
        var(--text);

    font-size:
        10px;

    font-weight:
        900;

}


.user-table-name strong {

    display:
        block;

    font-size:
        11px;

}


.user-table-name small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.user-meta-cell strong {

    display:
        block;

    color:
        #aaa;

    font-size:
        10px;

}


.user-meta-cell small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.role-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px 7px;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    color:
        #aaa;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.role-admin {

    border-color:
        #666;

    color:
        #f0f0f0;

}


.role-team_leader {

    color:
        #ddd;

}


.role-reception {

    color:
        #c4c4c4;

}


.role-engineer {

    color:
        #888;

}


.active-badge,
.inactive-badge {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        5px 8px;

    border:
        1px solid var(--border);

    border-radius:
        6px;

    font-size:
        8px;

    font-weight:
        800;

}


.active-badge {

    color:
        #bbb;

}


.inactive-badge {

    color:
        #666;

}


.completed-number {

    color:
        #aaa;

    font-weight:
        800;

}


.last-login {

    color:
        #686868;

    font-size:
        8px;

}


.table-action {

    color:
        #aaa;

    font-size:
        9px;

    font-weight:
        800;

    text-decoration:
        none;

}


.table-action:hover {

    color:
        #fff;

}


.users-empty {

    padding:
        60px 25px !important;

    color:
        #5d5d5d !important;

    text-align:
        center;

}


/* ============================================================
   FORM
   ============================================================ */

.user-form-page {

    max-width:
        1200px;

}


.user-form-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            0,
            1fr
        )
        330px;

    gap:
        18px;

}


.user-form-card,
.user-security-card,
.password-card {

    padding:
        27px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.form-section {

    padding-bottom:
        24px;

    margin-bottom:
        24px;

    border-bottom:
        1px solid var(--border);

}


.form-section:last-of-type {

    margin-bottom:
        0;

    border-bottom:
        none;

}


.form-grid-2 {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        17px;

}


.form-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin-top:
        14px;

}


.form-grid-2 .form-field {

    margin-top:
        0;

}


.form-field label {

    color:
        #888;

    font-size:
        9px;

    font-weight:
        800;

}


.form-field input,
.form-field select,
.form-field textarea,
.account-control-card input,
.password-card input {

    width:
        100%;

    box-sizing:
        border-box;

    padding:
        12px;

    background:
        #111;

    border:
        1px solid var(--border);

    border-radius:
        9px;

    color:
        var(--text);

    font-family:
        inherit;

    font-size:
        10px;

    outline:
        none;

}


.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.account-control-card input:focus,
.password-card input:focus {

    border-color:
        var(--border-light);

}


.form-field textarea {

    resize:
        vertical;

    line-height:
        1.6;

}


.form-field small {

    color:
        var(--muted-dark);

    font-size:
        8px;

}


.user-form-actions,
.password-actions {

    margin-top:
        24px;

    display:
        flex;

    justify-content:
        flex-end;

    gap:
        9px;

}


.user-security-card h2 {

    margin-top:
        14px;

    margin-bottom:
        20px;

    font-size:
        23px;

}


.permission-item {

    padding:
        16px 0;

    border-bottom:
        1px solid var(--border);

}


.permission-item:last-child {

    border-bottom:
        none;

}


.permission-item strong {

    display:
        block;

    color:
        #bbb;

    font-size:
        10px;

}


.permission-item span {

    display:
        block;

    margin-top:
        5px;

    color:
        #666;

    font-size:
        9px;

    line-height:
        1.5;

}


/* ============================================================
   USER DETAIL
   ============================================================ */

.user-detail-page {

    max-width:
        1400px;

}


.user-detail-actions {

    display:
        flex;

    gap:
        9px;

}


.user-profile-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        28px;

    margin-bottom:
        18px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.user-profile-identity {

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

}


.user-profile-avatar {

    width:
        72px;

    height:
        72px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--border-light);

    border-radius:
        19px;

    background:
        #181818;

    color:
        var(--text);

    font-size:
        25px;

    font-weight:
        900;

}


.user-profile-identity h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        28px;

}


.user-profile-identity p {

    margin:
        6px 0 10px;

    color:
        var(--muted);

    font-size:
        10px;

}


.user-profile-badges {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


.user-profile-meta {

    display:
        flex;

    align-items:
        flex-end;

    gap:
        35px;

}


.user-profile-meta div span {

    display:
        block;

    color:
        #5d5d5d;

    font-size:
        7px;

    font-weight:
        900;

    letter-spacing:
        .1em;

}


.user-profile-meta div strong {

    display:
        block;

    margin-top:
        6px;

    color:
        #888;

    font-size:
        9px;

}


.user-information-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        18px;

}


.user-information-card {

    padding:
        25px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.user-information-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    padding:
        15px 0;

    border-bottom:
        1px solid var(--border);

}


.user-information-row:last-child {

    border-bottom:
        none;

}


.user-information-row span {

    color:
        #666;

    font-size:
        9px;

}


.user-information-row strong {

    color:
        #aaa;

    font-size:
        9px;

    text-align:
        right;

}


.user-mini-stat-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        1px;

    margin-top:
        17px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        10px;

}


.user-mini-stat-grid div {

    min-height:
        85px;

    padding:
        14px;

    background:
        #111;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}


.user-mini-stat-grid div:nth-child(3n) {

    border-right:
        none;

}


.user-mini-stat-grid div span {

    color:
        #5f5f5f;

    font-size:
        7px;

    font-weight:
        900;

}


.user-mini-stat-grid div strong {

    display:
        block;

    margin-top:
        14px;

    color:
        #aaa;

    font-size:
        20px;

}


/* ============================================================
   ADMIN CONTROLS
   ============================================================ */

.user-management-panel {

    margin-bottom:
        18px;

    overflow:
        hidden;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.management-panel-header {

    min-height:
        80px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    padding:
        21px 25px;

    border-bottom:
        1px solid var(--border);

}


.management-panel-header h2 {

    margin:
        0;

    font-size:
        24px;

}


.account-control-grid {

    display:
        grid;

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

    gap:
        1px;

    background:
        var(--border);

}


.account-control-card {

    padding:
        25px;

    background:
        var(--surface);

}


.account-control-card strong {

    display:
        block;

    color:
        #aaa;

    font-size:
        12px;

}


.account-control-card span {

    display:
        block;

    margin:
        6px 0 16px;

    color:
        #666;

    font-size:
        9px;

}


.control-button {

    min-height:
        38px;

    padding:
        0 13px;

    border:
        1px solid var(--border-light);

    border-radius:
        8px;

    background:
        #151515;

    color:
        #aaa;

    font-family:
        inherit;

    font-size:
        9px;

    font-weight:
        800;

    cursor:
        pointer;

}


/* ============================================================
   REQUEST HISTORY
   ============================================================ */

.user-section-card {

    margin-bottom:
        18px;

    overflow:
        hidden;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.user-request-history {

    display:
        flex;

    flex-direction:
        column;

}


.user-request-history-row {

    display:
        grid;

    grid-template-columns:
        minmax(220px, 1fr)
        150px
        130px;

    align-items:
        center;

    gap:
        15px;

    padding:
        15px 25px;

    border-bottom:
        1px solid var(--border);

    color:
        #888;

    text-decoration:
        none;

}


.user-request-history-row:last-child {

    border-bottom:
        none;

}


.user-request-history-row:hover {

    background:
        #151515;

}


.user-request-history-row strong {

    display:
        block;

    margin-top:
        4px;

    color:
        #bbb;

    font-size:
        10px;

}


.user-history-code {

    color:
        #5f5f5f;

    font-family:
        monospace;

    font-size:
        8px;

}


.history-status {

    font-size:
        8px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.history-completed,
.history-delivered {

    color:
        #bbb;

}


.history-overdue {

    color:
        #eee;

}


.user-request-history-row > span:last-child {

    color:
        #666;

    font-size:
        8px;

    text-align:
        right;

}


/* ============================================================
   ACTIVITY
   ============================================================ */

.user-activity-list {

    display:
        flex;

    flex-direction:
        column;

}


.user-activity-row {

    display:
        grid;

    grid-template-columns:
        125px
        minmax(
            0,
            1fr
        )
        100px;

    align-items:
        center;

    gap:
        20px;

    padding:
        16px 25px;

    border-bottom:
        1px solid var(--border);

}


.user-activity-row:last-child {

    border-bottom:
        none;

}


.user-activity-time {

    color:
        #555;

    font-size:
        8px;

}


.user-activity-row strong {

    color:
        #aaa;

    font-size:
        10px;

}


.user-activity-row p {

    margin:
        4px 0 0;

    color:
        #666;

    font-size:
        8px;

    line-height:
        1.5;

}


.user-activity-request {

    color:
        #777;

    font-family:
        monospace;

    font-size:
        8px;

    text-align:
        right;

    text-decoration:
        none;

}


/* ============================================================
   ACCOUNT
   ============================================================ */

.account-page {

    max-width:
        1150px;

}


.account-layout {

    display:
        grid;

    grid-template-columns:
        360px
        minmax(
            0,
            1fr
        );

    gap:
        18px;

}


.account-profile-card,
.account-work-card {

    padding:
        28px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        18px;

}


.account-profile-card {

    text-align:
        center;

}


.account-avatar {

    width:
        78px;

    height:
        78px;

    margin:
        0 auto 15px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid var(--border-light);

    border-radius:
        20px;

    background:
        #181818;

    color:
        var(--text);

    font-size:
        28px;

    font-weight:
        900;

}


.account-profile-card h2 {

    margin:
        0;

    font-size:
        24px;

}


.account-profile-card > p {

    margin:
        7px 0 12px;

    color:
        #666;

    font-size:
        9px;

}


.account-profile-details {

    margin-top:
        25px;

    text-align:
        left;

}


.account-profile-details div {

    padding:
        14px 0;

    border-bottom:
        1px solid var(--border);

}


.account-profile-details div:last-child {

    border-bottom:
        none;

}


.account-profile-details span {

    display:
        block;

    color:
        #555;

    font-size:
        7px;

    font-weight:
        900;

}


.account-profile-details strong {

    display:
        block;

    margin-top:
        5px;

    color:
        #999;

    font-size:
        9px;

}


.account-work-card h2 {

    margin:
        6px 0 20px;

    font-size:
        27px;

}


.account-work-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        1px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        10px;

}


.account-work-grid div {

    min-height:
        90px;

    padding:
        16px;

    background:
        #111;

    border-right:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}


.account-work-grid div span {

    color:
        #555;

    font-size:
        7px;

    font-weight:
        900;

}


.account-work-grid div strong {

    display:
        block;

    margin-top:
        13px;

    color:
        #aaa;

    font-size:
        22px;

}


.account-action-row {

    margin-top:
        20px;

    display:
        flex;

    gap:
        9px;

}


/* ============================================================
   PASSWORD
   ============================================================ */

.account-password-page {

    max-width:
        800px;

}


.password-card {

    max-width:
        620px;

}


.password-card .form-section {

    margin-bottom:
        18px;

}


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

@media (max-width: 1000px) {

    .users-filters {

        grid-template-columns:
            1fr
            1fr;

    }


    .user-form-layout {

        grid-template-columns:
            1fr;

    }


    .user-profile-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .user-profile-meta {

        width:
            100%;

        justify-content:
            space-between;

    }


    .account-layout {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 750px) {

    .form-grid-2 {

        grid-template-columns:
            1fr;

    }


    .user-information-grid {

        grid-template-columns:
            1fr;

    }


    .account-control-grid {

        grid-template-columns:
            1fr;

    }


    .user-request-history-row {

        grid-template-columns:
            1fr;

        gap:
            7px;

    }


    .user-request-history-row > span:last-child {

        text-align:
            left;

    }


    .user-activity-row {

        grid-template-columns:
            1fr;

        gap:
            7px;

    }


    .user-activity-request {

        text-align:
            left;

    }


    .account-work-grid {

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

    }

}


@media (max-width: 520px) {

    .users-filters {

        grid-template-columns:
            1fr;

    }


    .user-detail-actions {

        width:
            100%;

        flex-direction:
            column;

    }


    .user-detail-actions a {

        width:
            100%;

    }


    .user-profile-identity {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .user-profile-meta {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            15px;

    }


    .user-form-actions,
    .password-actions,
    .account-action-row {

        align-items:
            stretch;

        flex-direction:
            column;

    }

}

/* ============================================================
   DANGER ACTION
   ============================================================ */

.danger-control-button {

    border-color:
        #555;

    color:
        #d0d0d0;

}

.danger-control-button:hover {

    background:
        #242424;

    color:
        #ffffff;

}