// Check-in/out widget on the self-service "My Attendance" page, above the
// HRSystem-sourced history iframe. Styled after XENHR's own equivalent
// screen (blue clock icon, live HH:MM:SS, Present/Absent pill, button).

.xeno_my_attendance_page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.xeno_checkin_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    background: #fff;
    flex-shrink: 0;
}

.xeno_checkin_left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.xeno_checkin_clock_icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #e8f0fd;
    color: #3b7dec;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.xeno_checkin_clock {
    font-size: 1.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.xeno_checkin_date {
    color: #8a8a8a;
    font-size: 0.85rem;
}

.xeno_checkin_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.xeno_checkin_since {
    font-size: 0.8rem;
    color: #6b6b6b;
}

.xeno_checkin_btn {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.xeno_checkin_btn_in {
    background: #142933;
    color: #fff;
    border-color: #142933;

    &:hover { background: #1e3a48; color: #fff; }
}

.xeno_checkin_btn_out {
    background: #fff;
    color: #495057;

    &:hover { background: #f8f9fa; }
}

.xeno_attendance_iframe {
    flex: 1 1 auto;
}