@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.bundle.scp.css';

/* /Pages/HRM/BangCongTongHopCalendar.razor.rz.scp.css */
/* Attendance Calendar Grid Styles */
.calendar-grid-wrapper[b-r1abm6w5g5] {
    max-height: 70vh;
    border-radius: 8px;
    border: var(--neutral-stroke-layer-rest) solid 1px;
}

.calendar-grid-table[b-r1abm6w5g5] {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
    min-width: 1400px;
}

.calendar-grid-table th[b-r1abm6w5g5],
.calendar-grid-table td[b-r1abm6w5g5] {
    border: 1px solid var(--neutral-stroke-layer-rest);
    padding: 4px 6px;
    text-align: center;
    white-space: nowrap;
}

.calendar-header-row th[b-r1abm6w5g5] {
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-rest);
    font-weight: 600;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 20;
}

.calendar-header-row th.col-employee-info[b-r1abm6w5g5] {
    left: 0;
    z-index: 25;
}

.col-employee-info[b-r1abm6w5g5] {
    min-width: 220px;
    max-width: 260px;
    text-align: left !important;
    position: sticky;
    left: 0;
    z-index: 15;
    background: var(--neutral-layer-2);
    font-size: 13px;
}

.cell-frozen[b-r1abm6w5g5] {
    background: var(--neutral-layer-2) !important;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.04);
}

.col-day[b-r1abm6w5g5] {
    min-width: 46px;
    max-width: 50px;
    width: 48px;
    padding: 2px !important;
    position: relative;
}

.day-cell-wrapper[b-r1abm6w5g5] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.day-cell-overlay[b-r1abm6w5g5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(128, 128, 128, 0.4);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: pointer;
    z-index: 2;
    border-radius: 3px;
}

.day-cell-wrapper:hover .day-cell-overlay[b-r1abm6w5g5] {
    opacity: 1;
}

.col-day .day-number[b-r1abm6w5g5] {
    font-weight: 700;
    font-size: 11px;
}

.col-day .day-name[b-r1abm6w5g5] {
    font-weight: 400;
    font-size: 9px;
    opacity: 0.6;
}

.weekend-col[b-r1abm6w5g5],
.holiday-col[b-r1abm6w5g5] {
    background: var(--neutral-layer-3) !important;
}

.day-symbol[b-r1abm6w5g5] {
    font-weight: 700;
    font-size: 10px;
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    min-width: 24px;
    text-align: center;
}

.att-work .day-symbol[b-r1abm6w5g5] {
    background: var(--neutral-layer-1);
    color: var(--neutral-foreground-rest);
    border: 1px solid var(--neutral-stroke-layer-rest);
}

.att-annual-leave .day-symbol[b-r1abm6w5g5] {
    background: #d4edda;
    color: #155724;
}

.att-off .day-symbol[b-r1abm6w5g5] {
    background: var(--neutral-layer-3);
    color: var(--neutral-foreground-hint);
}

.att-error .day-symbol[b-r1abm6w5g5] {
    background: #ba1a1a;
    color: #ffffff;
}

.att-pending .day-symbol[b-r1abm6w5g5] {
    background: #fff3cd;
    color: #856404;
    border: 1px dashed #ffc107;
}

.att-unauthorized .day-symbol[b-r1abm6w5g5] {
    background: #f57c00;
    color: #ffffff;
}

.att-personal .day-symbol[b-r1abm6w5g5] {
    background: #fff3cd;
    color: #856404;
}

.att-dual .day-symbol[b-r1abm6w5g5] {
    background: #ffe0b2;
    color: #e65100;
    font-weight: 800;
}

.att-business .day-symbol[b-r1abm6w5g5] {
    background: #bbdefb;
    color: #0d47a1;
}

.att-compensatory .day-symbol[b-r1abm6w5g5] {
    background: #b2dfdb;
    color: #00695c;
}

.att-sl .day-symbol[b-r1abm6w5g5] {
    background: #e8f5e9;
    color: #1b5e20;
    border: 1px dashed #66bb6a;
}

.att-empty .day-symbol[b-r1abm6w5g5] {
    background: transparent;
    color: var(--neutral-foreground-hint);
    opacity: 0.4;
}

.pending-ot[b-r1abm6w5g5]::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #f57c00;
    border-radius: 50%;
    pointer-events: none;
}

.night-shift[b-r1abm6w5g5]::before {
    content: '☾';
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 8px;
    line-height: 1;
    pointer-events: none;
    z-index: 1;
    font-weight: 900;
}

.col-summary-group[b-r1abm6w5g5] {
    min-width: 60px;
    font-weight: 600;
    font-size: 11px;
    background: var(--neutral-layer-3);
}

.col-nt[b-r1abm6w5g5] { color: #0f6cbd; }
.col-nn[b-r1abm6w5g5] { color: #107c10; }
.col-dem[b-r1abm6w5g5] { color: #5c2d91; }
.col-ot[b-r1abm6w5g5] { color: #0f6cbd; }
.col-phep[b-r1abm6w5g5] { color: #107c10; }
.col-kp[b-r1abm6w5g5] { color: #ba1a1a; }
.col-kh[b-r1abm6w5g5] { color: #e65100; }
.col-action[b-r1abm6w5g5] { color: var(--neutral-foreground-rest); }

.col-summary[b-r1abm6w5g5] {
    font-weight: 700;
    font-size: 12px;
    min-width: 55px;
}

.kp-warning[b-r1abm6w5g5] {
    background: #fce4ec !important;
    color: #ba1a1a !important;
}

.employee-info[b-r1abm6w5g5] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-avatar[b-r1abm6w5g5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-fill-rest);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.employee-details[b-r1abm6w5g5] {
    overflow: hidden;
}

.employee-name[b-r1abm6w5g5] {
    font-weight: 600;
    font-size: 12px;
    color: var(--neutral-foreground-rest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-dept[b-r1abm6w5g5] {
    font-size: 10px;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-data-row:hover[b-r1abm6w5g5] {
    background: var(--neutral-layer-1);
}

.calendar-data-row:hover .cell-frozen[b-r1abm6w5g5] {
    background: var(--neutral-layer-1) !important;
}

/* Floating row actions - hover trên dòng mới hiện nút */
.calendar-grid-table .row-actions-floating[b-r1abm6w5g5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    box-sizing: border-box;
    background: linear-gradient(
        to right,
        transparent 0%,
        transparent 30%,
        color-mix(in srgb, var(--neutral-fill-hover) 88%, transparent) 62%,
        var(--neutral-fill-hover) 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease;
    z-index: 7;
}

.calendar-grid-table tbody tr:hover .row-actions-floating[b-r1abm6w5g5] {
    opacity: 1;
}

.calendar-grid-table .row-actions-buttons[b-r1abm6w5g5] {
    pointer-events: none;
}

.calendar-grid-table tbody tr:hover .row-actions-buttons[b-r1abm6w5g5] {
    pointer-events: auto;
}

.legend-container[b-r1abm6w5g5] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 8px;
}

.legend-item[b-r1abm6w5g5] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--neutral-foreground-hint);
}

.legend-badge[b-r1abm6w5g5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 9px;
}

.legend-badge.att-night[b-r1abm6w5g5] {
    background: #1a1a2e;
    font-size: 11px;
}
/* /Pages/HRM/BangLuongList.razor.rz.scp.css */

    .bang-luong-table[b-aae8qfu1pq] {
        border-collapse: collapse;
        font-size: 12px;
        white-space: nowrap;
        width: max-content;
    }

    .bang-luong-table th[b-aae8qfu1pq],
    .bang-luong-table td[b-aae8qfu1pq] {
        border: 1px solid var(--neutral-stroke-rest);
        padding: 4px 6px;
        text-align: center;
        min-width: 50px;
    }

    .bang-luong-table .group-header[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-secondary-rest);
        font-weight: 600;
    }

    .bang-luong-table .header-row-1 th[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-input-rest);
        position: sticky;
        top: 0;
        z-index: 4;
    }

    .bang-luong-table .header-row-2 th[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-stealth-rest);
        position: sticky;
        top: 28px;
        z-index: 3;
    }

    /* Header sticky: viền dưới bị mất khi cuộn dọc vì border-collapse dồn đường kẻ
       vào mép của table (không thuộc cell sticky, nên trượt khuất theo container khi cuộn).
       Dùng box-shadow để đường kẻ được vẽ ngay trong cell sticky nên luôn hiển thị.
       Row 2 chỉ cần viền dưới để phân cách với nội dung. */
    .bang-luong-table .header-row-1 th[b-aae8qfu1pq] {
        box-shadow: inset 0 -1px 0 var(--neutral-stroke-rest),
                    inset 0 1px 0 var(--neutral-stroke-rest);
    }

    .bang-luong-table .header-row-2 th[b-aae8qfu1pq] {
        box-shadow: inset 0 -1px 0 var(--neutral-stroke-rest);
    }

    .bang-luong-table .amount[b-aae8qfu1pq] {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

    /* Cột lương chính (8 chữ số + 2 dấu phân cách = ~11 ký tự) */
    .bang-luong-table .col-luong[b-aae8qfu1pq] {
        min-width: 90px;
    }

    /* Cột phụ cấp / BHXH (7 chữ số + 2 dấu phân cách = ~9 ký tự) */
    .bang-luong-table .col-phu-cap[b-aae8qfu1pq] {
        min-width: 75px;
    }

    .bang-luong-table .fw-bold[b-aae8qfu1pq] {
        font-weight: 600;
    }

    .bang-luong-table .group-separator td[b-aae8qfu1pq] {
        background-color: var(--accent-fill-rest);
        color: var(--neutral-fill-inverse-rest);
        font-weight: 600;
        padding: 6px 8px;
        text-align: left;
    }

    .bang-luong-table .tong-cong-row td[b-aae8qfu1pq] {
        font-weight: 600;
        background-color: var(--neutral-fill-secondary-rest);
        border-top: 2px solid var(--neutral-stroke-strong-rest);
    }

    .bang-luong-table tbody tr:hover[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-hover);
    }

    .bang-luong-table .col-employee-info[b-aae8qfu1pq] {
        min-width: 200px;
        text-align: left;
    }

    .bang-luong-table .col-select[b-aae8qfu1pq] {
        min-width: 36px;
        width: 36px;
        text-align: center;
    }

    /* === Sticky first 3 columns (neo khi cuộn ngang) === */
    .bang-luong-table .col-select[b-aae8qfu1pq],
    .bang-luong-table .col-stt[b-aae8qfu1pq],
    .bang-luong-table .col-employee-info[b-aae8qfu1pq] {
        position: sticky;
        z-index: 2;
        box-sizing: border-box;
    }

    .bang-luong-table .col-select[b-aae8qfu1pq] {
        left: 0;
        width: 50px;
        min-width: 50px;
    }

    .bang-luong-table .col-stt[b-aae8qfu1pq] {
        left: 50px;
        width: 60px;
        min-width: 60px;
        text-align: center;
    }

    .bang-luong-table .col-employee-info[b-aae8qfu1pq] {
        left: 110px;
        width: 220px;
        min-width: 220px;
    }

    /* Header sticky cells cần z-index cao hơn để nằm trên body cells */
    .bang-luong-table thead .col-select[b-aae8qfu1pq],
    .bang-luong-table thead .col-stt[b-aae8qfu1pq],
    .bang-luong-table thead .col-employee-info[b-aae8qfu1pq] {
        z-index: 5;
        background-color: var(--neutral-fill-input-rest);
    }

    /* Sticky cells PHẢI có background opaque để che nội dung cuộn bên dưới */
    .bang-luong-table tbody .col-select[b-aae8qfu1pq],
    .bang-luong-table tbody .col-stt[b-aae8qfu1pq],
    .bang-luong-table tbody .col-employee-info[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-rest);
    }

    .bang-luong-table tbody tr:hover .col-select[b-aae8qfu1pq],
    .bang-luong-table tbody tr:hover .col-stt[b-aae8qfu1pq],
    .bang-luong-table tbody tr:hover .col-employee-info[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-hover);
    }

    .bang-luong-table .tong-cong-row .col-select[b-aae8qfu1pq],
    .bang-luong-table .tong-cong-row .col-stt[b-aae8qfu1pq],
    .bang-luong-table .tong-cong-row .col-employee-info[b-aae8qfu1pq] {
        background-color: var(--neutral-fill-secondary-rest);
    }

    /* Đường kẻ PHẢI của cột sticky cuối (Thông tin nhân sự) vẽ bằng box-shadow thay
       vì border. Với border-collapse: collapse, border của cell sticky bị dồn vào lưới
       bảng và cuộn theo nội dung → khi cuộn ngang, border của các cột bị ẩn phía sau
       lộ ra ở mép vùng sticky (rõ nhất khi hover). box-shadow nằm trong lớp paint của
       chính cell sticky (cao hơn cell cuộn nhờ z-index) nên luôn che kín mép nối. */
    .bang-luong-table tbody .col-employee-info[b-aae8qfu1pq],
    .bang-luong-table .tong-cong-row .col-employee-info[b-aae8qfu1pq] {
        box-shadow: 1px 0 0 0 var(--neutral-stroke-rest);
    }

    /* Đường kẻ PHẢI của 2 cột sticky đầu (checkbox, STT) cũng vẽ bằng box-shadow.
       Lỗi border-collapse + position: sticky khiến border phải của cell sticky biến
       mất khi cuộn DỌC (không repaint), chỉ hiện lại khi hover dòng (buộc repaint).
       Dùng INSET (không outset như cột Thông tin nhân sự) vì cột sticky kế bên nằm
       ngay trên mép phải (cùng z-index, sau trong DOM) sẽ che mất đường outset. */
    .bang-luong-table tbody .col-select[b-aae8qfu1pq],
    .bang-luong-table tbody .col-stt[b-aae8qfu1pq],
    .bang-luong-table .tong-cong-row .col-select[b-aae8qfu1pq],
    .bang-luong-table .tong-cong-row .col-stt[b-aae8qfu1pq] {
        box-shadow: inset -1px 0 0 0 var(--neutral-stroke-rest);
    }

    /* Header của cột Thông tin nhân sự cần cả viền trên/dưới (neo khi cuộn dọc) lẫn
       viền phải (che mép nối khi cuộn ngang) trong cùng một box-shadow. */
    .bang-luong-table .header-row-1 th.col-employee-info[b-aae8qfu1pq] {
        box-shadow: inset 0 -1px 0 var(--neutral-stroke-rest),
                    inset 0 1px 0 var(--neutral-stroke-rest),
                    1px 0 0 0 var(--neutral-stroke-rest);
    }

    /* Header 2 cột sticky đầu: giữ viền trên/dưới + thêm viền phải (inset) đồng bộ với body. */
    .bang-luong-table .header-row-1 th.col-select[b-aae8qfu1pq],
    .bang-luong-table .header-row-1 th.col-stt[b-aae8qfu1pq] {
        box-shadow: inset 0 -1px 0 var(--neutral-stroke-rest),
                    inset 0 1px 0 var(--neutral-stroke-rest),
                    inset -1px 0 0 0 var(--neutral-stroke-rest);
    }

    /* Group separator: neo trái để tên bộ phận luôn hiển thị khi cuộn ngang */
    .bang-luong-table .group-separator td[b-aae8qfu1pq] {
        position: sticky;
        left: 0;
        z-index: 3;
    }

    .employee-info[b-aae8qfu1pq] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .employee-avatar[b-aae8qfu1pq] {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--accent-fill-rest);
        color: var(--neutral-fill-inverse-rest);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        flex-shrink: 0;
    }

    .employee-details[b-aae8qfu1pq] {
        display: flex;
        flex-direction: column;
    }

    .employee-name[b-aae8qfu1pq] {
        font-weight: 500;
        font-size: 12px;
        color: var(--neutral-foreground-rest);
    }

    .employee-dept[b-aae8qfu1pq] {
        font-size: 11px;
        color: var(--neutral-foreground-secondary-rest);
    }

    /* === Thanh Actions kiểu Gmail ===
       Thanh Actions nằm TRONG ô "Thông tin nhân sự" (.col-employee-info) — ô này
       đã sticky left nên nút luôn hiển thị mà không cần cuộn ngang. Khi hover dòng
       thanh sẽ:
         - phủ đúng phạm vi ô Thông tin nhân sự (inset: 0), cao đúng bằng dòng,
         - canh nút sang mép phải của ô,
         - nửa trái trong suốt (vẫn thấy thông tin nhân sự bên dưới),
         - mờ dần sang nền đục ở nửa phải làm phông cho các nút.
       Cần .col-employee-info { position: sticky } (đã có) làm gốc định vị absolute. */
    .bang-luong-table .row-actions-floating[b-aae8qfu1pq] {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 8px;
        box-sizing: border-box;
        /* Trái trong suốt → phải đục dần thành nền dòng hover, làm phông cho nút */
        background: linear-gradient(
            to right,
            transparent 0%,
            transparent 30%,
            color-mix(in srgb, var(--neutral-fill-hover) 88%, transparent) 62%,
            var(--neutral-fill-hover) 100%);
        opacity: 0;
        /* Nền trong suốt bên trái KHÔNG chặn tương tác với dữ liệu dòng */
        pointer-events: none;
        transition: opacity 0.16s ease;
        z-index: 7;
    }

    .bang-luong-table tbody tr:hover .row-actions-floating[b-aae8qfu1pq] {
        opacity: 1;
    }

    /* Chỉ khối nút mới nhận tương tác, và chỉ khi hover dòng (tránh nút vô hình
       vẫn bắt click khi opacity: 0). */
    .bang-luong-table .row-actions-buttons[b-aae8qfu1pq] {
        pointer-events: none;
    }

    .bang-luong-table tbody tr:hover .row-actions-buttons[b-aae8qfu1pq] {
        pointer-events: auto;
    }

    /* Dòng tổng cộng không có hành động */
    .bang-luong-table .tong-cong-row .row-actions-floating[b-aae8qfu1pq] {
        display: none;
    }
/* /Shared/Components/FluentCurrencyField.razor.rz.scp.css */
fluent-text-field[b-f06ah7dsks]::part(control) {
    text-align: right;
}