/* =========================================================
   EMPLOYEES
   ========================================================= */

.employee-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:18px;
}


/* =========================================================
   EMPLOYEE CARD
   ========================================================= */

.employee-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px;
    display:flex;
    gap:17px;
    min-width:0;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}

.employee-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 32px rgba(0,0,0,.07);
}


/* =========================================================
   PHOTO
   ========================================================= */

.employee-photo-link{
    display:block;
    flex:0 0 108px;
    width:108px;
    height:132px;
    text-decoration:none;
}

.employee-photo{
    width:108px;
    height:132px;
    object-fit:cover;
    display:block;
    border-radius:16px;
    background:#eef3f9;
    border:1px solid var(--line);
}

.employee-photo-placeholder{
    display:grid;
    place-items:center;
    text-align:center;
    padding:8px;
    box-sizing:border-box;
    color:var(--blue);
    font-size:17px;
    font-weight:800;
}


/* =========================================================
   INFO
   ========================================================= */

.employee-info{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}

.employee-name-link{
    color:inherit;
    text-decoration:none;
}

.employee-info h2{
    font-size:18px;
    line-height:1.25;
    margin:0;
}

.employee-name-link:hover h2{
    color:var(--blue);
}

.employee-position{
    margin-top:6px;
    font-size:13px;
    font-weight:700;
    color:var(--blue);
}

.employee-department{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
}

.employee-phone{
    margin:8px 0 0;
    color:var(--muted);
    font-size:13px;
}


/* =========================================================
   BALANCE
   ========================================================= */

.employee-balance{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    margin:15px 0 12px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

.employee-balance span{
    color:var(--muted);
    font-size:12px;
}

.employee-balance strong{
    font-size:15px;
}

.positive{
    color:var(--green);
}

.negative{
    color:var(--red);
}


/* =========================================================
   ACTIONS
   ========================================================= */

.employee-card-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:auto;
}

.employee-card-actions a{
    color:var(--blue);
    font-weight:700;
    text-decoration:none;
    font-size:13px;
}

.employee-card-actions a:hover{
    text-decoration:underline;
}


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

.employee-form-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px;
    max-width:900px;
    margin:0 auto 30px;
    box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.employee-photo-section{
    display:flex;
    align-items:center;
    gap:24px;
}

.employee-photo-preview{
    width:130px;
    height:130px;
    flex:0 0 130px;
    border-radius:20px;
    overflow:hidden;
    background:#eef3f9;
    border:1px solid var(--line);
}

.employee-photo-preview img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.employee-photo-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:50px;
}

.employee-photo-info{
    min-width:0;
}

.employee-photo-info h3{
    margin:0 0 7px;
    font-size:20px;
}

.employee-photo-info p{
    margin:0 0 12px;
    color:var(--muted);
    line-height:1.5;
}

.employee-photo-info small{
    display:block;
    margin-top:8px;
    color:var(--muted);
}

.file-button{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 15px;
    border:1px solid var(--line);
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
    background:#f7f9fc;
}

.employee-form-divider{
    height:1px;
    background:var(--line);
    margin:30px 0;
}

.employee-form-section{
    margin-bottom:32px;
}

.employee-form-section-title{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:20px;
}

.employee-form-section-title > span{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#edf3ff;
    color:var(--blue);
    font-size:12px;
    font-weight:800;
}

.employee-form-section-title h2{
    margin:0;
    font-size:19px;
}

.employee-form-section-title p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:13px;
}

.employee-form-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.form-field{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.form-field.full{
    grid-column:1 / -1;
}

.form-field label{
    font-size:13px;
    font-weight:700;
}

.form-field input,
.form-field textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:10px;
    padding:12px 13px;
    background:#fff;
    color:inherit;
    font:inherit;
    outline:none;
}

.form-field input:focus,
.form-field textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(40,90,180,.08);
}

.form-field textarea{
    resize:vertical;
    min-height:150px;
    line-height:1.5;
}

.employee-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding-top:10px;
}

.primary-button{
    border:0;
    border-radius:10px;
    padding:11px 18px;
    background:var(--blue);
    color:#fff;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    display:inline-block;
}

.primary-button:hover{
    opacity:.92;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:650px){

    .employee-grid{
        grid-template-columns:1fr;
    }

    .employee-card{
        padding:14px;
    }

    .employee-photo-link{
        flex:0 0 88px;
        width:88px;
        height:110px;
    }

    .employee-photo{
        width:88px;
        height:110px;
    }

    .employee-form-card{
        padding:18px;
        border-radius:16px;
    }

    .employee-photo-section{
        align-items:flex-start;
        flex-direction:column;
    }

    .employee-form-grid{
        grid-template-columns:1fr;
    }

    .form-field.full{
        grid-column:auto;
    }

    .employee-form-actions{
        flex-direction:column-reverse;
    }

    .employee-form-actions a,
    .employee-form-actions button{
        width:100%;
        text-align:center;
        box-sizing:border-box;
    }
}

.employee-heading-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.employee-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
}

.employee-main{
    min-width:0;
    flex:1;
}

.employee-code{
    display:none;
}

.employee-admin-actions{
    display:flex;
    gap:7px;
    flex-shrink:0;
}

.employee-admin-actions form{
    margin:0;
}

.employee-edit-button,
.employee-delete-button{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:9px;
    background:#fff;
    text-decoration:none;
    cursor:pointer;
    font-size:17px;
    box-sizing:border-box;
}

.employee-edit-button{
    color:var(--blue);
}

.employee-delete-button{
    color:var(--red);
}

.employee-edit-button:hover,
.employee-delete-button:hover{
    background:#f6f8fb;
}

.employee-photo-link{
    flex:0 0 82px;
    width:82px;
    height:100px;
}

.employee-photo{
    width:82px;
    height:100px;
    object-fit:cover;
    display:block;
    border-radius:13px;
    background:#eef3f9;
    border:1px solid var(--line);
}

.employee-photo-placeholder{
    display:grid;
    place-items:center;
    text-align:center;
    padding:6px;
    box-sizing:border-box;
    color:var(--blue);
    font-size:13px;
    font-weight:800;
}

@media(max-width:650px){

    .employee-heading-actions{
        width:100%;
    }

    .employee-heading-actions a{
        flex:1;
        text-align:center;
    }

    .employee-card{
        gap:12px;
    }

    .employee-photo-link{
        flex:0 0 70px;
        width:70px;
        height:86px;
    }

    .employee-photo{
        width:70px;
        height:86px;
    }

    .employee-admin-actions{
        gap:4px;
    }

    .employee-edit-button,
    .employee-delete-button{
        width:32px;
        height:32px;
        font-size:14px;
    }
}

.employee-profile{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:28px;
    margin-bottom:30px;
}

.employee-profile-main{
    display:flex;
    gap:22px;
    align-items:center;
}

.employee-profile-photo{
    width:130px;
    height:150px;
    flex:0 0 130px;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#eef3f9;
}

.employee-profile-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.employee-profile-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    color:var(--blue);
    font-weight:800;
}

.employee-profile-info h2{
    margin:0;
    font-size:26px;
}

.employee-profile-position{
    margin-top:7px;
    color:var(--blue);
    font-weight:700;
}

.employee-profile-muted{
    color:var(--muted);
}

.employee-profile-phone{
    margin-top:8px;
}

.employee-profile-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:28px;
}

.employee-profile-item{
    border:1px solid var(--line);
    border-radius:13px;
    padding:16px;
}

.employee-profile-item span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-bottom:7px;
}

.employee-profile-item strong{
    font-size:15px;
}

.employee-profile-section{
    margin-top:28px;
    padding-top:25px;
    border-top:1px solid var(--line);
}

.employee-profile-section h3{
    margin:0 0 14px;
}

.employee-profile-section-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
}

.employee-profile-section-heading h3{
    margin:0;
}

.employee-profile-section-heading a{
    color:var(--blue);
    text-decoration:none;
    font-weight:700;
    font-size:13px;
}

.employee-responsibilities{
    white-space:pre-line;
    line-height:1.6;
    margin:0;
}

.employee-task-list,
.employee-finance-list{
    border:1px solid var(--line);
    border-radius:13px;
    overflow:hidden;
}

.employee-task-row,
.employee-finance-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
}

.employee-task-row:last-child,
.employee-finance-row:last-child{
    border-bottom:0;
}

.employee-task-row small,
.employee-finance-row small{
    display:block;
    color:var(--muted);
    margin-top:3px;
    font-size:12px;
}

@media(max-width:800px){

    .employee-profile-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:550px){

    .employee-profile{
        padding:18px;
    }

    .employee-profile-main{
        align-items:flex-start;
        flex-direction:column;
    }

    .employee-profile-grid{
        grid-template-columns:1fr;
    }

    .employee-task-row,
    .employee-finance-row{
        align-items:flex-start;
        flex-direction:column;
    }
}

/* ===== EMPLOYEE PHOTO FIX ===== */

.employee-card{
    overflow:hidden;
    min-width:0;
}

.employee-photo-link{
    display:block;
    width:82px !important;
    height:100px !important;
    min-width:82px !important;
    max-width:82px !important;
    flex:0 0 82px !important;
    overflow:hidden;
    border-radius:13px;
}

.employee-photo-link .employee-photo{
    display:block !important;
    width:82px !important;
    height:100px !important;
    min-width:82px !important;
    max-width:82px !important;
    min-height:100px !important;
    max-height:100px !important;
    object-fit:cover !important;
    object-position:center !important;
    overflow:hidden;
    border-radius:13px;
}

.employee-info{
    min-width:0 !important;
    width:0;
    flex:1 1 auto;
}

.employee-top{
    min-width:0;
}

.employee-main{
    min-width:0;
    overflow:hidden;
}

.employee-main h2{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media(max-width:650px){

    .employee-photo-link{
        width:70px !important;
        height:86px !important;
        min-width:70px !important;
        max-width:70px !important;
        flex-basis:70px !important;
    }

    .employee-photo-link .employee-photo{
        width:70px !important;
        height:86px !important;
        min-width:70px !important;
        max-width:70px !important;
        min-height:86px !important;
        max-height:86px !important;
    }
}

/* =========================================================
   EMPLOYEE DETAIL
   ========================================================= */

.employee-detail-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.employee-profile-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:24px;
    margin-bottom:18px;
}

.employee-profile-main{
    display:flex;
    align-items:center;
    gap:20px;
}

.employee-profile-photo{
    width:110px;
    height:125px;
    flex:0 0 110px;
    border-radius:16px;
    overflow:hidden;
    background:#eef3f9;
    border:1px solid var(--line);
}

.employee-profile-photo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.employee-profile-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--blue);
    font-weight:800;
    font-size:16px;
}

.employee-profile-info{
    min-width:0;
}

.employee-profile-name{
    font-size:26px;
    font-weight:800;
    line-height:1.2;
}

.employee-profile-position{
    margin-top:7px;
    color:var(--blue);
    font-size:14px;
    font-weight:700;
}

.employee-profile-department{
    margin-top:4px;
    color:var(--muted);
    font-size:13px;
}

.employee-profile-phone{
    margin-top:9px;
    font-size:13px;
}

.employee-profile-data{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin-top:22px;
}

.employee-profile-data-item{
    padding:14px;
    border:1px solid var(--line);
    border-radius:12px;
}

.employee-profile-data-item span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:6px;
}

.employee-profile-data-item strong{
    font-size:14px;
}

.employee-profile-data-item.balance strong{
    font-size:15px;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.employee-detail-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-bottom:18px;
}

.employee-detail-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:21px;
    min-width:0;
}

.employee-wide-card{
    margin-bottom:18px;
}

.employee-detail-card-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    margin-bottom:17px;
}

.employee-card-eyebrow{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    margin-bottom:4px;
}

.employee-detail-card h2{
    margin:0;
    font-size:18px;
}

.employee-section-link{
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
}

.employee-status{
    padding:5px 9px;
    border-radius:20px;
    background:#f1f3f6;
    color:var(--muted);
    font-size:11px;
    font-weight:700;
}

.employee-status.active{
    background:#eaf7ef;
    color:var(--green);
}


/* =========================================================
   WAREHOUSE
   ========================================================= */

.warehouse-profile-list{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.warehouse-profile-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
}

.warehouse-profile-row:last-child{
    border-bottom:0;
}

.warehouse-profile-material{
    min-width:0;
}

.warehouse-profile-material strong{
    display:block;
    font-size:13px;
}

.warehouse-profile-material small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}

.warehouse-profile-balance{
    text-align:right;
    white-space:nowrap;
}

.warehouse-profile-balance strong{
    font-size:15px;
}

.warehouse-profile-balance span{
    color:var(--muted);
    font-size:11px;
}


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

.employee-detail-empty{
    padding:18px;
    border:1px dashed var(--line);
    border-radius:12px;
    color:var(--muted);
    font-size:13px;
    text-align:center;
}


/* =========================================================
   RESPONSIBILITIES
   ========================================================= */

.employee-responsibilities{
    white-space:pre-line;
    line-height:1.65;
    font-size:14px;
}


/* =========================================================
   REQUESTS
   ========================================================= */

.employee-request-list{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.employee-request-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
}

.employee-request-row:last-child{
    border-bottom:0;
}

.employee-request-main{
    min-width:0;
}

.employee-request-main strong{
    display:block;
    font-size:13px;
}

.employee-request-main small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}

.employee-request-status{
    padding:6px 9px;
    border-radius:20px;
    background:#f1f3f6;
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.employee-request-status.pending{
    background:#fff6df;
    color:#9a6b00;
}

.employee-request-status.approved{
    background:#eaf7ef;
    color:var(--green);
}

.employee-request-status.rejected{
    background:#fdecec;
    color:var(--red);
}


/* =========================================================
   TASKS
   ========================================================= */

.employee-task-list{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.employee-task-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
    text-decoration:none;
    color:inherit;
}

.employee-task-row:last-child{
    border-bottom:0;
}

.employee-task-row:hover{
    background:#fafbfd;
}

.employee-task-main{
    min-width:0;
}

.employee-task-main strong{
    display:block;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.employee-task-main small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}

.employee-task-status{
    padding:6px 9px;
    border-radius:20px;
    background:#f1f3f6;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}


/* =========================================================
   FINANCE
   ========================================================= */

.employee-finance-list{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.employee-finance-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:13px 15px;
    border-bottom:1px solid var(--line);
}

.employee-finance-row:last-child{
    border-bottom:0;
}

.employee-finance-row > div{
    min-width:0;
}

.employee-finance-row strong{
    font-size:13px;
}

.employee-finance-row small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
}


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

.employee-danger-zone{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:18px 20px;
    margin-bottom:30px;
    border:1px solid #f0d4d4;
    border-radius:16px;
    background:#fffafa;
}

.employee-danger-zone strong{
    font-size:13px;
}

.employee-danger-zone p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:11px;
}

.employee-danger-button{
    border:1px solid #e7bcbc;
    border-radius:9px;
    background:#fff;
    color:var(--red);
    padding:9px 13px;
    font:inherit;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    white-space:nowrap;
}


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

@media(max-width:850px){

    .employee-detail-grid{
        grid-template-columns:1fr;
    }

    .employee-profile-data{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .employee-detail-actions{
        width:100%;
    }

    .employee-detail-actions a{
        flex:1;
        text-align:center;
    }

    .employee-profile-card,
    .employee-detail-card{
        padding:17px;
    }

    .employee-profile-main{
        align-items:flex-start;
    }

    .employee-profile-photo{
        width:90px;
        height:105px;
        flex-basis:90px;
    }

    .employee-profile-name{
        font-size:21px;
    }

    .employee-profile-data{
        grid-template-columns:1fr 1fr;
    }

    .employee-request-row,
    .employee-finance-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .employee-task-row{
        align-items:flex-start;
    }

    .employee-danger-zone{
        align-items:flex-start;
        flex-direction:column;
    }

    .employee-danger-button{
        width:100%;
    }
}

/* =========================================================
   EMPLOYEE PROFILE TABS
   ========================================================= */

.employee-profile-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:8px;
    margin-bottom:18px;
}

.employee-profile-tab{
    appearance:none;
    border:1px solid transparent;
    background:transparent;
    color:#43516a;
    padding:10px 14px;
    border-radius:10px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:.15s ease;
}

.employee-profile-tab:hover{
    background:#f4f7fb;
    color:var(--blue);
}

.employee-profile-tab.active{
    background:#eaf1ff;
    border-color:#d6e2ff;
    color:var(--blue);
}


/* =========================================================
   TAB SECTIONS
   ========================================================= */

.employee-tab-section{
    display:none;
    margin-bottom:18px;
}

.employee-tab-section.active{
    display:block;
}


/* =========================================================
   ABOUT
   ========================================================= */

.employee-about-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.employee-about-item{
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px;
    min-width:0;
}

.employee-about-item span{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:6px;
}

.employee-about-item strong{
    display:block;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.employee-about-responsibilities{
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--line);
}

.employee-about-responsibilities h3{
    margin:0 0 10px;
    font-size:14px;
}


/* =========================================================
   MOVEMENTS
   ========================================================= */

.employee-movement-list{
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;
}

.employee-movement-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:14px 15px;
    border-bottom:1px solid var(--line);
}

.employee-movement-row:last-child{
    border-bottom:0;
}

.employee-movement-main{
    min-width:0;
}

.employee-movement-main strong{
    display:block;
    font-size:13px;
}

.employee-movement-main small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.employee-movement-right{
    flex:0 0 auto;
    text-align:right;
}

.employee-movement-right strong{
    display:block;
    font-size:15px;
}

.employee-movement-right span{
    display:block;
    color:var(--muted);
    font-size:10px;
    margin-top:2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:700px){

    .employee-profile-tabs{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .employee-profile-tab{
        width:100%;
        padding:10px 8px;
        font-size:12px;
    }

    .employee-about-grid{
        grid-template-columns:1fr 1fr;
    }

    .employee-movement-row{
        align-items:flex-start;
    }
}

@media(max-width:480px){

    .employee-profile-tabs{
        grid-template-columns:1fr;
    }

    .employee-about-grid{
        grid-template-columns:1fr;
    }

    .employee-movement-row{
        flex-direction:column;
        gap:8px;
    }

    .employee-movement-right{
        text-align:left;
    }
}


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

.employee-form{
    max-width:980px;
    margin:0 auto 35px;
}

.employee-form-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:22px;
    margin-bottom:16px;
}

.employee-form-card-title{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:20px;
}

.employee-form-card-title h2{
    margin:0;
    font-size:18px;
}

.employee-photo-upload{
    display:flex;
    align-items:center;
    gap:20px;
}

.employee-form-photo-preview{
    width:110px;
    height:125px;
    flex:0 0 110px;
    overflow:hidden;
    border-radius:16px;
    background:#f2f5f9;
    border:1px solid var(--line);
}

.employee-form-photo-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.employee-form-photo-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-size:30px;
    color:var(--muted);
}

.employee-form-photo-preview-image.hidden,
.employee-form-photo-placeholder.hidden{
    display:none;
}

.employee-photo-upload-info{
    min-width:0;
}

.employee-photo-upload-info strong{
    display:block;
    font-size:14px;
}

.employee-photo-upload-info p{
    margin:6px 0 12px;
    color:var(--muted);
    font-size:12px;
}

.employee-photo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:9px;
    background:#eef3ff;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}

.employee-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.employee-form-field{
    min-width:0;
}

.employee-form-field-wide{
    grid-column:1 / -1;
}

.employee-form-field label{
    display:block;
    margin-bottom:7px;
    font-size:12px;
    font-weight:700;
}

.employee-form-field label span{
    color:var(--red);
}

.employee-form-field input,
.employee-form-field textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    padding:11px 12px;
    color:inherit;
    font:inherit;
    font-size:13px;
    outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.employee-form-field input{
    height:43px;
}

.employee-form-field textarea{
    resize:vertical;
    min-height:130px;
    line-height:1.5;
}

.employee-form-field input:focus,
.employee-form-field textarea:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 3px rgba(50,100,220,.08);
}

.employee-form-hint{
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
}

.employee-form-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    margin-top:5px;
}

.employee-save-button{
    border:0;
    border-radius:10px;
    background:var(--blue);
    color:#fff;
    padding:11px 18px;
    font:inherit;
    font-size:13px;
    font-weight:700;
    cursor:pointer;
}

.employee-save-button:hover{
    opacity:.92;
}

@media(max-width:650px){

    .employee-form-card{
        padding:17px;
    }

    .employee-form-grid{
        grid-template-columns:1fr;
    }

    .employee-form-field-wide{
        grid-column:auto;
    }

    .employee-photo-upload{
        align-items:flex-start;
    }

    .employee-form-photo-preview{
        width:85px;
        height:100px;
        flex-basis:85px;
    }

    .employee-form-actions{
        flex-direction:column-reverse;
    }

    .employee-form-actions a,
    .employee-save-button{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

}

/* =========================================================
   EMPLOYEE LIST
   ========================================================= */

.employee-heading-actions{
    display:flex;
    gap:10px;
    align-items:center;
    flex-wrap:wrap;
}

.employee-photo-link{
    display:block;
    flex:0 0 82px;
    width:82px;
    height:100px;
    overflow:hidden;
    border-radius:14px;
    text-decoration:none;
    background:#f1f4f8;
}

.employee-photo{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.employee-photo-placeholder{
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--blue);
    background:#eaf1ff;
    font-size:13px;
    font-weight:800;
}

.employee-name-link{
    color:inherit;
    text-decoration:none;
}

.employee-name-link h2{
    margin:0;
    font-size:17px;
    line-height:1.25;
}

.employee-name-link:hover h2{
    color:var(--blue);
}

.employee-position{
    margin-top:5px;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
}

.employee-department{
    margin-top:3px;
    color:var(--muted);
    font-size:11px;
}

.employee-phone{
    margin-top:7px;
    color:var(--muted);
    font-size:11px;
}

.employee-birthday{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:12px;
    padding:7px 9px;
    border-radius:9px;
    background:#fff8e8;
    color:#8b6800;
    font-size:10px;
}

.employee-birthday strong{
    font-size:10px;
}

.employee-birthday span{
    color:#9a7b20;
}

.employee-card-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.employee-card-actions a{
    text-decoration:none;
    color:var(--blue);
    font-size:11px;
    font-weight:700;
}

.employee-card-actions a:hover{
    text-decoration:underline;
}

.employee-admin-actions{
    display:flex;
    align-items:center;
    gap:5px;
}

.employee-edit-button,
.employee-delete-button{
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
}

.employee-edit-button{
    background:#eef3ff;
    color:var(--blue);
}

.employee-delete-button{
    border:0;
    background:#fff0f0;
    color:var(--red);
    cursor:pointer;
}

.employee-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.employee-main{
    min-width:0;
}

@media(max-width:650px){

    .employee-heading-actions{
        width:100%;
    }

    .employee-heading-actions a{
        flex:1;
        text-align:center;
    }

    .employee-photo-link{
        flex-basis:70px;
        width:70px;
        height:86px;
    }

    .employee-card{
        padding:15px;
        gap:12px;
    }

    .employee-name-link h2{
        font-size:15px;
    }

}

/* =========================================================
   BIRTHDAY BANNER
   ========================================================= */

.birthday-banner{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    max-width:1180px;
    margin:12px auto 0;
    padding:11px 42px 11px 14px;
    border:1px solid #f1dfaa;
    border-radius:12px;
    background:#fffaf0;
    color:#705700;
    box-sizing:border-box;
}

.birthday-banner.hidden{
    display:none;
}

.birthday-banner-icon{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:#fff0c9;
    font-size:18px;
}

.birthday-banner-content{
    min-width:0;
}

.birthday-banner-content strong{
    display:block;
    font-size:12px;
    font-weight:800;
}

.birthday-banner-content span{
    display:block;
    margin-top:2px;
    font-size:12px;
}

.birthday-banner-close{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    width:28px;
    height:28px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#806d32;
    font-size:20px;
    line-height:1;
    cursor:pointer;
}

.birthday-banner-close:hover{
    background:#fff0c9;
}

@media(max-width:600px){

    .birthday-banner{
        margin:10px 12px 0;
    }

    .birthday-banner-content span{
        font-size:11px;
    }

}

/* =========================================================
   MAXWELL — EMPLOYEES PREMIUM UI
   ========================================================= */

.employee-grid {
    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
    gap: 20px;
}

.employee-card {
    position: relative;
    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #f9fbff 100%
    ) !important;

    border: 1px solid #e2e8f1 !important;
    border-radius: 22px !important;

    padding: 18px !important;
    gap: 18px !important;

    box-shadow:
        0 6px 20px rgba(20, 32, 51, .045),
        0 1px 2px rgba(20, 32, 51, .04) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease !important;
}

.employee-card:hover {
    transform: translateY(-3px) !important;

    border-color: #d3ddea !important;

    box-shadow:
        0 14px 34px rgba(20, 32, 51, .09),
        0 2px 5px rgba(20, 32, 51, .05) !important;
}


/* PHOTO */

.employee-photo-link {
    width: 96px !important;
    height: 116px !important;
    flex: 0 0 96px !important;

    border-radius: 17px !important;
    overflow: hidden;

    background: #edf2f8 !important;

    box-shadow:
        inset 0 0 0 1px rgba(20, 32, 51, .06),
        0 4px 12px rgba(20, 32, 51, .06);
}

.employee-photo-link .employee-photo {
    width: 96px !important;
    height: 116px !important;

    border: 0 !important;
    border-radius: 17px !important;

    object-fit: cover !important;
}

.employee-photo-placeholder {
    color: #3569b8 !important;

    background:
        linear-gradient(
            145deg,
            #edf4ff,
            #e5edf9
        ) !important;

    font-size: 15px !important;
}


/* INFO */

.employee-info {
    min-width: 0 !important;
}

.employee-top {
    gap: 12px !important;
}

.employee-name-link h2 {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
    color: #172235;
}

.employee-name-link:hover h2 {
    color: #3569b8 !important;
}

.employee-position {
    margin-top: 7px !important;

    color: #3569b8 !important;

    font-size: 13px !important;
    font-weight: 750 !important;
}

.employee-department {
    margin-top: 4px !important;

    color: #718096 !important;
    font-size: 12px !important;
}

.employee-phone {
    margin-top: 7px !important;

    color: #718096 !important;
    font-size: 12px !important;
}


/* ADMIN BUTTONS */

.employee-admin-actions {
    gap: 6px !important;
}

.employee-edit-button,
.employee-delete-button {
    width: 34px !important;
    height: 34px !important;

    border-radius: 10px !important;

    border: 1px solid #e1e7ef !important;

    font-size: 14px !important;

    transition:
        background .15s ease,
        transform .15s ease,
        border-color .15s ease !important;
}

.employee-edit-button {
    background: #f2f6fd !important;
    color: #3569b8 !important;
}

.employee-delete-button {
    background: #fff4f4 !important;
    color: #c94d4d !important;
}

.employee-edit-button:hover,
.employee-delete-button:hover {
    transform: translateY(-1px);
}


/* BIRTHDAY */

.employee-birthday {
    margin-top: 13px !important;

    padding: 8px 10px !important;

    border: 1px solid #e7edf4 !important;
    border-radius: 10px !important;

    background: #f7f9fc !important;

    color: #64748b !important;

    font-size: 11px !important;
}

.employee-birthday span {
    color: #7b8798 !important;
}

.employee-birthday strong {
    color: #263449 !important;
    font-size: 11px !important;
}


/* BALANCE */

.employee-balance {
    margin: 14px 0 13px !important;

    padding:
        12px 13px !important;

    border: 1px solid #e3e9f1 !important;
    border-radius: 12px !important;

    background: #f8fafc !important;
}

.employee-balance span {
    color: #7b8798 !important;
    font-size: 11px !important;
    font-weight: 600;
}

.employee-balance strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
}

.employee-balance strong.positive {
    color: #16815a !important;
}

.employee-balance strong.negative {
    color: #c94d4d !important;
}


/* CARD ACTIONS */

.employee-card-actions {
    gap: 8px !important;
}

.employee-card-actions a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 11px;

    border: 1px solid #e1e7ef;
    border-radius: 9px;

    background: #ffffff;

    color: #425b7c !important;

    font-size: 11px !important;
    font-weight: 750 !important;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease !important;
}

.employee-card-actions a:hover {
    text-decoration: none !important;

    background: #f2f6fd;
    border-color: #cfdbea;

    color: #3569b8 !important;
}


/* HEADER ACTIONS */

.employee-heading-actions {
    gap: 9px !important;
}

.employee-heading-actions .outline-button,
.employee-heading-actions .primary-button {
    min-height: 42px;
    border-radius: 11px;
    font-weight: 750;
}


/* EMPTY */

.empty {
    border-radius: 18px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .employee-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .employee-card {
        padding: 15px !important;
        gap: 13px !important;
        border-radius: 18px !important;
    }

    .employee-photo-link {
        width: 76px !important;
        height: 94px !important;
        flex-basis: 76px !important;
    }

    .employee-photo-link .employee-photo {
        width: 76px !important;
        height: 94px !important;
    }

    .employee-name-link h2 {
        font-size: 16px !important;
    }

    .employee-card-actions a {
        flex: 1;
    }
}


/* =========================================================
   MAXWELL EMPLOYEES — FINAL PREMIUM OVERRIDE
   ========================================================= */

.employee-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.employee-card {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;

    min-height: 245px !important;

    padding: 20px !important;

    background: #ffffff !important;
    border: 1px solid #e1e7ef !important;
    border-radius: 20px !important;

    box-shadow:
        0 5px 18px rgba(24, 39, 75, .055) !important;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease !important;
}

.employee-card:hover {
    transform: translateY(-4px) !important;

    border-color: #cbd7e6 !important;

    box-shadow:
        0 16px 35px rgba(24, 39, 75, .11) !important;
}


/* FOTO */

.employee-photo-link,
.employee-photo-link .employee-photo {
    width: 96px !important;
    height: 124px !important;
    min-width: 96px !important;
    max-width: 96px !important;
}

.employee-photo-link {
    border-radius: 16px !important;
    background: #edf2f8 !important;

    box-shadow:
        0 4px 12px rgba(20, 32, 51, .08) !important;
}

.employee-photo-link .employee-photo {
    border-radius: 16px !important;
}


/* ISM */

.employee-name-link h2 {
    margin: 2px 0 0 !important;

    color: #152238 !important;

    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

.employee-name-link:hover h2 {
    color: #3569b8 !important;
}


/* MA'LUMOTLAR */

.employee-position {
    margin-top: 7px !important;

    color: #3569b8 !important;

    font-size: 13px !important;
    font-weight: 750 !important;
}

.employee-department {
    margin-top: 4px !important;

    color: #78869a !important;

    font-size: 12px !important;
}

.employee-phone {
    margin-top: 7px !important;

    color: #7b8798 !important;

    font-size: 12px !important;
}


/* ADMIN */

.employee-edit-button,
.employee-delete-button {
    width: 32px !important;
    height: 32px !important;

    border-radius: 9px !important;

    border: 1px solid #e2e8f0 !important;

    font-size: 13px !important;
}

.employee-edit-button {
    background: #f1f5fb !important;
    color: #3569b8 !important;
}

.employee-delete-button {
    background: #fff3f3 !important;
    color: #c94d4d !important;
}


/* TUG'ILGAN SANA */

.employee-birthday {
    grid-column: 1 / -1 !important;

    margin: 4px 0 0 !important;

    padding: 9px 11px !important;

    background: #f7f9fc !important;

    border: 1px solid #e5eaf1 !important;
    border-radius: 10px !important;

    color: #69778a !important;

    font-size: 11px !important;
}

.employee-birthday strong {
    color: #27364b !important;
}


/* BALANS */

.employee-balance {
    grid-column: 1 / -1 !important;

    margin: 0 !important;
    padding: 12px 14px !important;

    background: #f7f9fc !important;

    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
}

.employee-balance span {
    color: #7b8798 !important;

    font-size: 11px !important;
    font-weight: 650 !important;
}

.employee-balance strong {
    font-size: 16px !important;
    font-weight: 800 !important;
}

.employee-balance strong.positive {
    color: #16815a !important;
}

.employee-balance strong.negative {
    color: #c94d4d !important;
}


/* PASTKI TUGMALAR */

.employee-card-actions {
    grid-column: 1 / -1 !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    gap: 8px !important;

    margin-top: auto !important;
}

.employee-card-actions a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 35px !important;

    border: 1px solid #dfe6ef !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    color: #425b7c !important;

    font-size: 11px !important;
    font-weight: 750 !important;

    text-decoration: none !important;
}

.employee-card-actions a:hover {
    background: #f1f5fb !important;
    border-color: #cbd7e6 !important;
    color: #3569b8 !important;
}


/* HEADER */

.employee-heading-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.employee-heading-actions a {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 11px !important;
}


/* TABLET */

@media (max-width: 1100px) {

    .employee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* MOBILE */

@media (max-width: 700px) {

    .employee-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .employee-card {
        grid-template-columns: 76px minmax(0, 1fr) !important;

        min-height: 0 !important;

        padding: 15px !important;
    }

    .employee-photo-link,
    .employee-photo-link .employee-photo {
        width: 76px !important;
        height: 96px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }

    .employee-name-link h2 {
        font-size: 16px !important;
    }

}


/* =========================================================
   EMPLOYEES — FIX / FINAL CARD LAYOUT
   ========================================================= */

/* 3 ta chiroyli karta */

.employee-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
}


/* KARTA */

.employee-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    width: auto !important;
    min-height: 0 !important;

    padding: 18px !important;

    gap: 17px !important;

    background: #ffffff !important;
    border: 1px solid #e1e7ef !important;
    border-radius: 18px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 5px 18px rgba(20, 32, 51, .055) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

.employee-card:hover {
    transform: translateY(-3px) !important;

    border-color: #cbd7e6 !important;

    box-shadow:
        0 14px 30px rgba(20, 32, 51, .09) !important;
}


/* =========================================================
   FOTO
   ========================================================= */

.employee-photo-link {
    display: block !important;

    flex: 0 0 96px !important;

    width: 96px !important;
    height: 116px !important;

    margin: 0 !important;

    border-radius: 15px !important;

    overflow: hidden !important;

    background: #edf3fb !important;
}

.employee-photo-link .employee-photo {
    display: block !important;

    width: 96px !important;
    height: 116px !important;

    object-fit: cover !important;

    border-radius: 15px !important;
}


/* =========================================================
   INFO — ASOSIY QISM
   ========================================================= */

.employee-info {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    height: 100% !important;
}


/* TOP */

.employee-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;

    gap: 10px !important;
}


/* ISM VA MA'LUMOT */

.employee-main {
    min-width: 0 !important;
}

.employee-name-link {
    text-decoration: none !important;
}

.employee-name-link h2 {
    margin: 0 !important;

    color: #152238 !important;

    font-size: 18px !important;
    line-height: 1.25 !important;

    font-weight: 800 !important;

    white-space: normal !important;
}

.employee-name-link:hover h2 {
    color: #2468d8 !important;
}

.employee-position {
    margin-top: 5px !important;

    color: #2468d8 !important;

    font-size: 12px !important;
    font-weight: 750 !important;
}

.employee-department {
    margin-top: 3px !important;

    color: #718096 !important;

    font-size: 11px !important;
}

.employee-phone {
    margin-top: 7px !important;

    color: #64748b !important;

    font-size: 11px !important;
}


/* =========================================================
   ADMIN TUGMALAR
   ========================================================= */

.employee-admin-actions {
    display: flex !important;

    flex-shrink: 0 !important;

    gap: 5px !important;
}

.employee-edit-button,
.employee-delete-button {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 31px !important;
    height: 31px !important;

    padding: 0 !important;

    border-radius: 8px !important;

    font-size: 13px !important;
}

.employee-edit-button {
    background: #f2f6fc !important;
    border: 1px solid #dce5f0 !important;

    color: #2869c7 !important;
}

.employee-delete-button {
    background: #fff4f4 !important;
    border: 1px solid #f0d9d9 !important;

    color: #d54d4d !important;
}


/* =========================================================
   TUG'ILGAN SANA
   ========================================================= */

.employee-birthday {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;

    width: auto !important;

    margin: 12px 0 0 !important;
    padding: 7px 9px !important;

    background: #f7f9fc !important;

    border: 1px solid #e5eaf1 !important;
    border-radius: 8px !important;

    color: #718096 !important;

    font-size: 10px !important;
}

.employee-birthday strong {
    color: #27364b !important;
    font-weight: 750 !important;
}


/* =========================================================
   BALANS
   ========================================================= */

.employee-balance {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    margin: 12px 0 0 !important;
    padding: 10px 12px !important;

    box-sizing: border-box !important;

    background: #f8fafc !important;

    border: 1px solid #e1e7ef !important;
    border-radius: 10px !important;
}

.employee-balance span {
    color: #718096 !important;

    font-size: 10px !important;
    font-weight: 650 !important;
}

.employee-balance strong {
    font-size: 14px !important;
    font-weight: 800 !important;

    white-space: nowrap !important;
}

.employee-balance strong.positive {
    color: #13865b !important;
}

.employee-balance strong.negative {
    color: #d14d4d !important;
}


/* =========================================================
   PASTKI ACTION TUGMALAR
   ========================================================= */

.employee-card-actions {
    display: grid !important;

    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;

    gap: 7px !important;

    margin-top: auto !important;
    padding-top: 10px !important;
}

.employee-card-actions a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-height: 32px !important;

    padding: 0 7px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;

    border: 1px solid #dfe6ef !important;
    border-radius: 8px !important;

    color: #315b91 !important;

    font-size: 10px !important;
    font-weight: 750 !important;

    text-decoration: none !important;
}

.employee-card-actions a:hover {
    background: #f2f6fc !important;

    border-color: #cbd8e8 !important;

    color: #2468d8 !important;
}


/* =========================================================
   MUHIM: OLD GRID OVERRIDE'LARNI BEKOR QILISH
   ========================================================= */

.employee-birthday,
.employee-balance,
.employee-card-actions {
    grid-column: auto !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .employee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 700px) {

    .employee-grid {
        grid-template-columns: 1fr !important;
    }

    .employee-card {
        padding: 15px !important;
        gap: 13px !important;
    }

    .employee-photo-link {
        flex-basis: 76px !important;

        width: 76px !important;
        height: 96px !important;
    }

    .employee-photo-link .employee-photo {
        width: 76px !important;
        height: 96px !important;
    }

    .employee-name-link h2 {
        font-size: 16px !important;
    }

    .employee-balance strong {
        font-size: 13px !important;
    }

}


/* =========================================================
   EMPLOYEES — COMPACT PREMIUM FIX
   ========================================================= */

.employee-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 20px !important;
}

.employee-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 16px !important;
    gap: 15px !important;

    box-sizing: border-box !important;

    background: #ffffff !important;
    border: 1px solid #e1e7ef !important;
    border-radius: 18px !important;

    box-shadow:
        0 5px 18px rgba(20, 32, 51, .055) !important;
}


/* FOTO */

.employee-photo-link {
    flex: 0 0 92px !important;

    width: 92px !important;
    height: 112px !important;

    border-radius: 15px !important;
}

.employee-photo-link .employee-photo {
    width: 92px !important;
    height: 112px !important;

    border-radius: 15px !important;
}


/* O'NG TOMON */

.employee-info {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}


/* YUQORI QISM */

.employee-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;

    width: 100% !important;
    gap: 8px !important;
}

.employee-main {
    min-width: 0 !important;
}

.employee-name-link h2 {
    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.2 !important;

    color: #142033 !important;
    font-weight: 800 !important;
}

.employee-position {
    margin-top: 5px !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    color: #2869c7 !important;
}

.employee-department {
    margin-top: 3px !important;
    font-size: 11px !important;
    color: #718096 !important;
}

.employee-phone {
    margin-top: 6px !important;
    font-size: 11px !important;
    color: #718096 !important;
}


/* ADMIN */

.employee-admin-actions {
    flex-shrink: 0 !important;

    display: flex !important;
    gap: 5px !important;
}

.employee-edit-button,
.employee-delete-button {
    width: 30px !important;
    height: 30px !important;

    padding: 0 !important;

    border-radius: 8px !important;
}


/* TUG'ILGAN SANA */

.employee-birthday {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 10px 0 0 !important;
    padding: 7px 9px !important;

    border-radius: 8px !important;
    border: 1px solid #e4eaf2 !important;

    background: #f7f9fc !important;

    font-size: 10px !important;
}


/* BALANS */

.employee-balance {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    box-sizing: border-box !important;

    margin: 10px 0 0 !important;
    padding: 9px 11px !important;

    border-radius: 9px !important;
    border: 1px solid #e0e7ef !important;

    background: #f8fafc !important;
}

.employee-balance span {
    font-size: 10px !important;
    color: #718096 !important;
}

.employee-balance strong {
    font-size: 13px !important;
    white-space: nowrap !important;
}

.employee-balance strong.positive {
    color: #13865b !important;
}

.employee-balance strong.negative {
    color: #d14d4d !important;
}


/* PASTKI TUGMALAR */

.employee-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;

    width: 100% !important;

    gap: 7px !important;

    margin-top: 10px !important;
    padding-top: 0 !important;
}

.employee-card-actions a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 31px !important;

    padding: 0 6px !important;

    border-radius: 8px !important;
    border: 1px solid #dfe6ef !important;

    background: #ffffff !important;

    color: #315b91 !important;

    font-size: 10px !important;
    font-weight: 750 !important;

    text-decoration: none !important;
}


/* HOVER */

.employee-card:hover {
    transform: translateY(-2px) !important;

    border-color: #cbd7e6 !important;

    box-shadow:
        0 12px 28px rgba(20, 32, 51, .09) !important;
}


/* TABLET */

@media (max-width: 1100px) {
    .employee-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* TELEFON */

@media (max-width: 700px) {
    .employee-grid {
        grid-template-columns: 1fr !important;
    }

    .employee-photo-link {
        flex-basis: 76px !important;
        width: 76px !important;
        height: 94px !important;
    }

    .employee-photo-link .employee-photo {
        width: 76px !important;
        height: 94px !important;
    }
}