// "Leave Balances" page (HR app > Leaves > Leave Balances). Reuses
// o_xeno_hr_page/o_xeno_hr_header/o_xeno_hr_card/o_xeno_hr_table from
// leave_hr_app.scss -- this file only adds what's specific to this page:
// the year/employee filters, the List/Grid segmented toggle, the
// remaining-balance bar, and the Grid view's pivoted table + inline
// Edit Mode inputs.

.o_xeno_year_filter {
    max-width: 100px;
}

// Matches the 34px o_xeno_avatar circle (leave_hr_app.scss) so a real
// employee photo drops in without shifting the row layout.
.o_xeno_avatar_photo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

// Scoped to this page only -- o_xeno_employee_cell/fw-bold are shared with
// other xeno_* HR pages that weren't asked to change.
.o_xeno_balance_page .o_xeno_employee_cell .fw-bold {
    font-size: 0.85rem;
}

.o_xeno_employee_filter {
    max-width: 200px;
}

.o_xeno_view_toggle {
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.o_xeno_toggle_btn {
    border: none;
    background: transparent;
    color: #6b6b6b;
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 500;

    & + & {
        border-left: 1px solid rgba(0, 0, 0, 0.12);
    }

    &.active {
        background: #3b7dec;
        color: #fff;
    }

    &:not(.active):hover {
        background: rgba(0, 0, 0, 0.04);
    }
}

.o_xeno_balance_used { color: #a33a49; }
.o_xeno_balance_pending { color: #8a6d1d; }

.o_xeno_balance_remaining {
    min-width: 90px;
}

.o_xeno_balance_remaining_value {
    font-weight: 700;
    color: #206b45;
}

.o_xeno_balance_bar {
    height: 5px;
    border-radius: 999px;
    background: #ececec;
    margin-top: 4px;
    overflow: hidden;
}

.o_xeno_balance_bar_fill {
    height: 100%;
    border-radius: 999px;
    background: #34a866;
}

.o_xeno_balance_icons {
    display: flex;
    gap: 10px;
}

.o_xeno_balance_icon {
    color: #3b7dec;

    &:hover { color: #2b5fc4; }
}

.o_xeno_balance_icon_danger { color: #c8383f; }
.o_xeno_balance_icon_danger:hover { color: #a12c32; }

// Grid view: employee x leave-type pivot
.o_xeno_balance_grid_wrap {
    overflow-x: auto;
}

.o_xeno_balance_grid {
    th, td {
        white-space: nowrap;
    }

    // Everything below is scoped away from .o_xeno_grid_employee_col --
    // that column keeps its own look (left-aligned, sticky, uppercase
    // "Employee" header) untouched.
    th:not(.o_xeno_grid_employee_col),
    td:not(.o_xeno_grid_employee_col) {
        text-align: center;
    }

    thead th:not(.o_xeno_grid_employee_col) {
        text-transform: none;
        letter-spacing: normal;
    }

    thead tr:first-child th:not(.o_xeno_grid_employee_col) {
        font-weight: 700;
        color: #1a2b4a;
        font-size: 0.85rem;
    }

    thead tr:last-child th {
        font-weight: 500;
        color: #8a8f98;
        font-size: 0.75rem;
        background: #fafafa;
    }

    thead tr:first-child th {
        border-bottom: none;
        background: #fafafa;
    }

    tbody td:not(.o_xeno_grid_employee_col) {
        font-variant-numeric: tabular-nums;
        font-size: 0.9rem;
        padding: 16px 14px;
    }

    tbody tr:nth-child(even) td:not(.o_xeno_grid_employee_col) {
        background: #fafbfc;
    }
}

.o_xeno_grid_employee_col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    text-align: left !important;
    // 30% narrower than the ~230px this column was auto-sizing to; names
    // wrap instead of forcing the column wider or truncating.
    width: 160px;
    max-width: 160px;

    .o_xeno_employee_cell > div {
        min-width: 0;
    }

    .fw-bold {
        white-space: normal;
        overflow-wrap: break-word;
    }
}

// Pending Allocation Requests panel: allocations still awaiting HR/manager
// decision (core hr.leave.allocation confirm/validate1 states), shown above
// the main List/Grid card, distinct from the "Pending" column further down
// (which is pending *leave-taken* days -- a different concept entirely).
.o_xeno_pending_allocations_card {
    margin-bottom: 16px;
}

.o_xeno_pending_allocations_title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a2b4a;
    margin: 0;
}

.o_xeno_pending_status_badge {
    background: #fdf1d6;
    color: #8a6d1d;
    font-weight: 500;
    font-size: 0.75rem;
}

.o_xeno_grid_input {
    width: 64px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
}